mirror of
https://github.com/wassname/Mostly-Harmless.git
synced 2026-06-27 16:10:28 +08:00
Updated to the latest fancy-settings with my textarea support added in.
This commit is contained in:
Kerrick Long
@@ -31,6 +31,14 @@
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.setting.label.textarea {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.setting.element.textarea {
|
||||
width:100%;
|
||||
}
|
||||
|
||||
.setting.bundle.list-box {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
+15
-15
@@ -11,29 +11,29 @@
|
||||
|
||||
<!-- Stylesheets -->
|
||||
<link id="favicon" rel="icon" href="">
|
||||
<link rel="stylesheet" type="text/css" href="lib/default.css" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="css/main.css" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="css/setting.css" media="screen">
|
||||
<link rel="stylesheet" type="text/css" href="custom.css" media="screen">
|
||||
<link rel="stylesheet" href="lib/default.css" media="screen">
|
||||
<link rel="stylesheet" href="css/main.css" media="screen">
|
||||
<link rel="stylesheet" href="css/setting.css" media="screen">
|
||||
<link rel="stylesheet" href="custom.css" media="screen">
|
||||
|
||||
<!-- JavaScripts -->
|
||||
<script type="text/javascript" src="lib/mootools-core.js"></script>
|
||||
<script type="text/javascript" src="lib/store.js"></script>
|
||||
<script type="text/javascript" src="js/classes/tab.js"></script>
|
||||
<script type="text/javascript" src="js/classes/setting.js"></script>
|
||||
<script type="text/javascript" src="js/classes/search.js"></script>
|
||||
<script type="text/javascript" src="js/classes/fancy-settings.js"></script>
|
||||
<script type="text/javascript" src="i18n.js"></script>
|
||||
<script type="text/javascript" src="js/i18n.js"></script>
|
||||
<script type="text/javascript" src="manifest.js"></script>
|
||||
<script type="text/javascript" src="settings.js"></script>
|
||||
<script src="lib/mootools-core.js"></script>
|
||||
<script src="lib/store.js"></script>
|
||||
<script src="js/classes/tab.js"></script>
|
||||
<script src="js/classes/setting.js"></script>
|
||||
<script src="js/classes/search.js"></script>
|
||||
<script src="js/classes/fancy-settings.js"></script>
|
||||
<script src="i18n.js"></script>
|
||||
<script src="js/i18n.js"></script>
|
||||
<script src="manifest.js"></script>
|
||||
<script src="settings.js"></script>
|
||||
</head>
|
||||
<body class="no-select">
|
||||
<div id="sidebar" class="fancy">
|
||||
<img id="icon" src="" alt=""><h1 id="settings-label"></h1>
|
||||
<div id="tab-container">
|
||||
<div id="search-container" class="tab">
|
||||
<input id="search" type="search">
|
||||
<input id="search" type="search" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -35,7 +35,12 @@
|
||||
tab.content = this.tab.create();
|
||||
tab.content.tab.set("text", params.tab);
|
||||
this.search.bind(tab.content.tab);
|
||||
|
||||
|
||||
var anchor = location.hash.substring(1);
|
||||
if (params.tab == i18n.get(anchor) || params.tab == anchor) {
|
||||
tab.content.activate();
|
||||
}
|
||||
|
||||
tab.content = tab.content.content;
|
||||
(new Element("h2", {
|
||||
"text": params.tab
|
||||
@@ -144,7 +149,7 @@
|
||||
});
|
||||
document.body.removeClass("measuring");
|
||||
}
|
||||
|
||||
|
||||
if (callback !== undefined) {
|
||||
callback(settings);
|
||||
}
|
||||
|
||||
@@ -222,6 +222,54 @@
|
||||
}
|
||||
});
|
||||
|
||||
Bundle.Textarea = new Class({
|
||||
// label, text
|
||||
// action -> change & keyup
|
||||
"Extends": Bundle,
|
||||
|
||||
"createDOM": function () {
|
||||
this.bundle = new Element("div", {
|
||||
"class": "setting bundle textarea"
|
||||
});
|
||||
|
||||
this.container = new Element("div", {
|
||||
"class": "setting container textarea"
|
||||
});
|
||||
|
||||
this.element = new Element("textarea", {
|
||||
"class": "setting element textarea"
|
||||
});
|
||||
|
||||
this.label = new Element("label", {
|
||||
"class": "setting label textarea"
|
||||
});
|
||||
},
|
||||
|
||||
"setupDOM": function () {
|
||||
if (this.params.label !== undefined) {
|
||||
this.label.set("html", this.params.label);
|
||||
this.label.inject(this.container);
|
||||
this.params.searchString += this.params.label + "•";
|
||||
}
|
||||
|
||||
this.element.inject(this.container);
|
||||
this.container.inject(this.bundle);
|
||||
},
|
||||
|
||||
"addEvents": function () {
|
||||
var change = (function (event) {
|
||||
if (this.params.name !== undefined) {
|
||||
settings.set(this.params.name, this.get());
|
||||
}
|
||||
|
||||
this.fireEvent("action", this.get());
|
||||
}).bind(this);
|
||||
|
||||
this.element.addEvent("change", change);
|
||||
this.element.addEvent("keyup", change);
|
||||
}
|
||||
});
|
||||
|
||||
Bundle.Checkbox = new Class({
|
||||
// label
|
||||
// action -> change
|
||||
@@ -410,14 +458,66 @@
|
||||
});
|
||||
|
||||
if (this.params.options === undefined) { return; }
|
||||
this.params.options.each((function (option) {
|
||||
this.params.searchString += (option[1] || option[0]) + "•";
|
||||
|
||||
(new Element("option", {
|
||||
"value": option[0],
|
||||
"text": option[1] || option[0]
|
||||
})).inject(this.element);
|
||||
}).bind(this));
|
||||
|
||||
// convert array syntax into object syntax for options
|
||||
function arrayToObject(option) {
|
||||
if (typeOf(option) == "array") {
|
||||
option = {
|
||||
"value": option[0],
|
||||
"text": option[1] || option[0],
|
||||
};
|
||||
}
|
||||
return option;
|
||||
}
|
||||
|
||||
// convert arrays
|
||||
if (typeOf(this.params.options) == "array") {
|
||||
var values = [];
|
||||
this.params.options.each((function(values, option) {
|
||||
values.push(arrayToObject(option));
|
||||
}).bind(this, values));
|
||||
this.params.options = { "values": values };
|
||||
}
|
||||
|
||||
var groups;
|
||||
if (this.params.options.groups !== undefined) {
|
||||
groups = {};
|
||||
this.params.options.groups.each((function (groups, group) {
|
||||
this.params.searchString += (group) + "•";
|
||||
groups[group] = (new Element("optgroup", {
|
||||
"label": group,
|
||||
}).inject(this.element));
|
||||
}).bind(this, groups));
|
||||
}
|
||||
|
||||
if (this.params.options.values !== undefined) {
|
||||
this.params.options.values.each((function(groups, option) {
|
||||
option = arrayToObject(option);
|
||||
this.params.searchString += (option.text || option.value) + "•";
|
||||
|
||||
// find the parent of this option - either a group or the main element
|
||||
var parent;
|
||||
if (option.group && this.params.options.groups) {
|
||||
if ((option.group - 1) in this.params.options.groups) {
|
||||
option.group = this.params.options.groups[option.group-1];
|
||||
}
|
||||
if (option.group in groups) {
|
||||
parent = groups[option.group];
|
||||
}
|
||||
else {
|
||||
parent = this.element;
|
||||
}
|
||||
}
|
||||
else {
|
||||
parent = this.element;
|
||||
}
|
||||
|
||||
(new Element("option", {
|
||||
"value": option.value,
|
||||
"text": option.text || option.value,
|
||||
})).inject(parent);
|
||||
}).bind(this, groups));
|
||||
}
|
||||
},
|
||||
|
||||
"setupDOM": function () {
|
||||
@@ -573,6 +673,7 @@
|
||||
"description": "Description",
|
||||
"button": "Button",
|
||||
"text": "Text",
|
||||
"textarea": "Textarea",
|
||||
"checkbox": "Checkbox",
|
||||
"slider": "Slider",
|
||||
"popupButton": "PopupButton",
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
if (this.creator.activeBundle && this.creator.activeBundle !== this) {
|
||||
this.creator.activeBundle.deactivate();
|
||||
}
|
||||
|
||||
this.tab.addClass("active");
|
||||
this.content.addClass("show");
|
||||
this.creator.activeBundle = this;
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
window.addEvent("domready", function () {
|
||||
// Option 1: Use the manifest:
|
||||
new FancySettings.initWithManifest();
|
||||
new FancySettings.initWithManifest(function (settings) {
|
||||
settings.manifest.myButton.addEvent("action", function () {
|
||||
alert("You clicked me!");
|
||||
});
|
||||
});
|
||||
|
||||
// Option 2: Do everything manually:
|
||||
/*
|
||||
|
||||
Reference in New Issue
Block a user