From: Robert Konigsberg <konigsberg@gmail.com>
Date: Sat, 29 Dec 2012 03:39:26 +0000 (-0500)
Subject: jquery-ify the palette object.
X-Git-Tag: v1.0.0~139^2~1
X-Git-Url: https://adrianiainlam.tk/git/?a=commitdiff_plain;h=9390f62431dfa8174b52d0aef45df7b4c7da138e;p=dygraphs.git
jquery-ify the palette object.
---
diff --git a/experimental/palette/multi-palette.js b/experimental/palette/multi-palette.js
index 5556f19..2307030 100644
--- a/experimental/palette/multi-palette.js
+++ b/experimental/palette/multi-palette.js
@@ -98,7 +98,7 @@ MultiPalette.prototype.createPalette_ = function(key, scope, value) {
.text(value));
var palette = new Palette(scope);
palette.create(this.root);
- palette.root.style.display = "none";
+ palette.root.hide();
var self = this;
palette.onchange = function() {
self.onchange();
@@ -121,10 +121,10 @@ MultiPalette.prototype.conditionallyAddSingleSeries_ = function(series) {
MultiPalette.prototype.activate = function(key) {
if (this.activePalette) {
- this.activePalette.root.style.display = "none";
+ this.activePalette.root.hide();
}
this.activePalette = this.palettes[key];
- this.activePalette.root.style.display = "block";
+ this.activePalette.root.show();
}
MultiPalette.prototype.showHash = function() {
diff --git a/experimental/palette/palette.js b/experimental/palette/palette.js
index 65ef612..8948333 100644
--- a/experimental/palette/palette.js
+++ b/experimental/palette/palette.js
@@ -38,103 +38,98 @@ function Palette(scope) {
this.root = null;
}
-Palette.createChild = function(type, parentElement, className) {
- var element = document.createElement(type);
- parentElement.appendChild(element);
- if (className) {
- element.className = className;
- }
- return element;
-};
-
Palette.prototype.create = function(parentElement) {
var palette = this;
- var table = Palette.createChild("div", parentElement[0], "palette");
- this.root = table;
- table.width="300px";
+ var table = $("<div>")
+ .addClass("palette")
+ .width(300)
+ .appendTo(parentElement);
+ this.root = table;
this.tooltip = new Tooltip();
- // Build the header
- var header = Palette.createChild("div", table, "header");
- header.style.visibility = "visible";
-
// One row per option.
- for (var opt in opts) {
+ $.each(opts, function(opt, optEntry) {
try {
- if (opts.hasOwnProperty(opt)) {
- var type = opts[opt].type;
+ var scope = optEntry.scope || [ "global" ]; // Scope can be empty, infer "global" only.
+ var valid = scope[0] == "*" || $.inArray(palette.scope, scope) >= 0;
+ if (!valid) {
+ return;
+ }
- var scope = opts[opt].scope || [ "global" ]; // Scope can be empty, infer "global" only.
- var valid = scope[0] == "*" || $.inArray(this.scope, scope) >= 0;
- if (!valid) {
- continue;
- }
+ var type = optEntry.type;
+ var isFunction = type.indexOf("function(") == 0;
+
+ var input;
+ if (isFunction) {
+ input = $("<button>")
+ .click(function(opt, palette) {
+ return function(event) {
+ var entry = palette.model[opt];
+ var inputValue = entry.functionString;
+ var type = opts[opt].type;
+ if (inputValue == null || inputValue.length == 0) {
+ inputValue = type + "{\n\n}";
+ }
+ var textarea = new TextArea();
+ textarea.show(opt, inputValue);
+ textarea.okCallback = function(value) {
+ if (value != inputValue) {
+ entry.functionString = value;
+ entry.input.textContent = value ? "defined" : "not defined";
+ palette.onchange();
+ }
+ };
+ };
+ } (opt, palette) // Instantiating this inner function.
+ );
+ } else if (type == "boolean") {
+ input = $("<button>")
+ .click(function(event) {
+ var btn = event.target;
+ if (btn.value == "none") {
+ Palette.populateBooleanButton(btn, "true");
+ } else if (btn.value == "true") {
+ Palette.populateBooleanButton(btn, "false");
+ } else {
+ Palette.populateBooleanButton(btn, "none");
+ }
+ palette.onchange();
+ });
+ } else {
+ input = $("<input>", { type: "text" })
+ .addClass("textInput")
+ .keypress(function(event) {
+ var keycode = event.which;
+ if (keycode == 13 || keycode == 8) {
+ palette.onchange();
+ }
+ });
+ }
+
+ var row = $("<div>")
+ .append($("<span>").addClass("name").text(opt))
+ .append($("<span>").addClass("option")
+ .append(input));
- var isFunction = type.indexOf("function(") == 0;
- var row = Palette.createChild("div", table);
- row.onmouseover = function(source, title, type, body) {
+ row.mouseover(function(source, title, type, body) {
return function() {
- palette.tooltip.show(source, title, type, body);
+ // source[0] is un-jquerying.
+ // TODO(konigsberg): when tooltip is jquery, dump this.
+ palette.tooltip.show(source[0], title, type, body);
};
- } (row, opt, type, Dygraph.OPTIONS_REFERENCE[opt].description);
- row.onmouseout = function() { palette.tooltip.hide(); };
-
- var div = Palette.createChild("span", row, "name");
- div.textContent = opt;
+ } (row, opt, type, Dygraph.OPTIONS_REFERENCE[opt].description))
+ .mouseout(function() { palette.tooltip.hide(); })
- var value = Palette.createChild("span", row, "option");
+ row.appendTo(table);
- if (isFunction) {
- var input = Palette.createChild("button", value);
- input.onclick = function(opt, palette) {
- return function(event) {
- var entry = palette.model[opt];
- var inputValue = entry.functionString;
- if (inputValue == null || inputValue.length == 0) {
- inputValue = opts[opt].type + "{\n\n}";
- }
- var textarea = new TextArea();
- textarea.show(opt, inputValue);
- textarea.okCallback = function(value) {
- if (value != inputValue) {
- entry.functionString = value;
- entry.input.textContent = value ? "defined" : "not defined";
- palette.onchange();
- }
- }
- }
- }(opt, this);
- } else if (type == "boolean") {
- var input = Palette.createChild("button", value);
- input.onclick = function(e) {
- var btn = e.target;
- if (btn.value == "none") {
- Palette.populateBooleanButton(btn, "true");
- } else if (btn.value == "true") {
- Palette.populateBooleanButton(btn, "false");
- } else {
- Palette.populateBooleanButton(btn, "none");
- }
- palette.onchange();
- };
- } else {
- var input = Palette.createChild("input", value, "textInput");
- input.type="text";
- input.onkeypress = function(event) {
- var keycode = event.which;
- if (keycode == 13 || keycode == 8) {
- palette.onchange();
- }
- }
- }
- this.model[opt] = { input: input, row: row };
- }
+ palette.model[opt] = { input: input, row: row };
} catch(err) {
throw "For option " + opt + ":" + err;
}
- }
+ });
+
this.filter("");
}
@@ -150,21 +145,28 @@ Palette.parseBooleanArray = function(value) {
if (value == null || value.length == 0) {
return null;
}
- return value.split(',').map(function(x) { return x.trim() == "true"; });
+ return value.split(',').map(function(x) {
+ return x.trim() == "true";
+ });
}
Palette.parseFloatArray = function(value) {
if (value == null || value.length == 0) {
return null;
}
- return value.split(',').map(function(x) { return parseFloat(x); });
+ return value.split(',').map(function(x) {
+ return parseFloat(x);
+ });
}
Palette.parseIntArray = function(value) {
if (value == null || value.length == 0) {
return null;
}
- return value.split(',').map(function(x) { return parseInt(x); });
+
+ return value.split(',').map(function(x) {
+ return parseInt(x);
+ });
}
Palette.prototype.read = function() {
@@ -173,7 +175,7 @@ Palette.prototype.read = function() {
if (this.model.hasOwnProperty(opt)) {
var type = opts[opt].type;
var isFunction = type.indexOf("function(") == 0;
- var input = this.model[opt].input;
+ var input = this.model[opt].input[0]; // jquery dereference.
var value = isFunction ? this.model[opt].functionString : input.value;
if (value && value.length != 0) {
if (type == "boolean") {
@@ -218,7 +220,7 @@ Palette.prototype.write = function(hash) {
var results = {};
for (var opt in this.model) {
if (this.model.hasOwnProperty(opt)) {
- var input = this.model[opt].input;
+ var input = this.model[opt].input[0]; // jquery dereference
var type = opts[opt].type;
var value = hash[opt];
if (type == "boolean") {
@@ -256,9 +258,9 @@ Palette.prototype.filter = function(pattern) {
if (this.model.hasOwnProperty(opt)) {
var row = this.model[opt].row;
var matches = opt.toLowerCase().indexOf(pattern) >= 0;
- row.style.display = matches ? "block" : "none";
+ row.toggle(matches);
if (matches) {
- row.className = even ? "even" : "odd";
+ row.attr("class", even ? "even" : "odd");
even = !even;
}
}
diff --git a/experimental/palette/tooltip.js b/experimental/palette/tooltip.js
index 20479b0..a1d8856 100644
--- a/experimental/palette/tooltip.js
+++ b/experimental/palette/tooltip.js
@@ -29,17 +29,26 @@ function Tooltip(parent) {
if (!parent) {
parent = document.getElementsByTagName("body")[0];
}
- this.elem = Palette.createChild("div", parent);
- this.title = Palette.createChild("div", this.elem);
+ this.elem = Tooltip.createChild("div", parent);
+ this.title = Tooltip.createChild("div", this.elem);
this.elem.className = "tooltip";
this.title.className = "title";
- this.type = Palette.createChild("div", this.elem);
+ this.type = Tooltip.createChild("div", this.elem);
this.type.className = "type";
- this.body = Palette.createChild("div", this.elem);
+ this.body = Tooltip.createChild("div", this.elem);
this.body.className = "body";
this.hide();
}
+Tooltip.createChild = function(type, parentElement, className) {
+ var element = document.createElement(type);
+ parentElement.appendChild(element);
+ if (className) {
+ element.className = className;
+ }
+ return element;
+};
+
Tooltip.prototype.show = function(source, title, type, body) {
this.title.innerHTML = title;
this.body.innerHTML = body;