X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=experimental%2Fpalette%2Fpalette.js;h=b61f0d98305efe9500e39f7a292b9bdf42a1bcdb;hb=cd1d97d83260cf571584e4d2544f3cc6264b31a2;hp=d7c7cab42120a5e77bd413d16d49d0f49079c68d;hpb=21285cf929cd8f70c3d70a8df7e2895f7041fe67;p=dygraphs.git diff --git a/experimental/palette/palette.js b/experimental/palette/palette.js index d7c7cab..b61f0d9 100644 --- a/experimental/palette/palette.js +++ b/experimental/palette/palette.js @@ -25,10 +25,17 @@ */ "use strict"; -function Palette() { +/** + * scope is either "global", "series", "x", "y" or "y2". + */ +function Palette(scope) { + // Contains pair of "input" (the input object) and "row" (the parent row) + // Also contains functionString. this.model = {}; + // This is meant to be overridden by a palette host. this.onchange = function() {}; - this.filterBar = null; + this.scope = scope; + this.root = null; } Palette.createChild = function(type, parentElement, className) { @@ -40,32 +47,21 @@ Palette.createChild = function(type, parentElement, className) { return element; }; -Palette.prototype.create = function(document, parentElement) { +Palette.prototype.create = function(parentElement) { var palette = this; - var table = Palette.createChild("div", parentElement, "palette"); + var table = Palette.createChild("div", parentElement[0], "palette"); + this.root = table; table.width="300px"; this.tooltip = new Tooltip(); - var row = Palette.createChild("div", table, "header"); - row.style.visibility = "visible"; - - Palette.createChild("span", row).textContent = "Filter:"; - this.filterBar = Palette.createChild("input", Palette.createChild("span", row)); - this.filterBar.type = "search"; - this.filterBar.onkeyup = function() { - palette.filter(palette.filterBar.value) - }; - this.filterBar.onclick = this.filterBar.onkeyup; - var go = Palette.createChild("button", Palette.createChild("span", row)); - go.textContent = "Redraw" - go.onclick = function() { - palette.onchange(); - }; + // Build the header + var header = Palette.createChild("div", table, "header"); + header.style.visibility = "visible"; // CURRENTLY HIDDEN. - var tmp = Palette.createChild("button", Palette.createChild("span", row)); + var tmp = Palette.createChild("button", Palette.createChild("span", header)); tmp.textContent = "Copy" tmp.onclick = function() { var textarea = new TextArea(); @@ -73,15 +69,23 @@ Palette.prototype.create = function(document, parentElement) { }; tmp.style.display = "none"; + // One row per option. for (var opt in opts) { try { if (opts.hasOwnProperty(opt)) { var type = opts[opt].type; + + 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 isFunction = type.indexOf("function(") == 0; var row = Palette.createChild("div", table); - row.onmouseover = function(source, title, type, body, e) { - return function(e) { - palette.tooltip.show(source, e, title, type, body); + row.onmouseover = function(source, title, type, body) { + return function() { + palette.tooltip.show(source, title, type, body); }; } (row, opt, type, Dygraph.OPTIONS_REFERENCE[opt].description); row.onmouseout = function() { palette.tooltip.hide(); }; @@ -100,9 +104,9 @@ Palette.prototype.create = function(document, parentElement) { if (inputValue == null || inputValue.length == 0) { inputValue = opts[opt].type + "{\n\n}"; } - var textarea = new TextArea(); - textarea.show(opt, inputValue); - textarea.okCallback = function(value) { + 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"; @@ -111,20 +115,28 @@ Palette.prototype.create = function(document, parentElement) { } } }(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"); - if (type == "boolean") { - input.size = "5"; - input.maxlength = "5"; - } + input.type="text"; input.onkeypress = function(event) { var keycode = event.which; if (keycode == 13 || keycode == 8) { palette.onchange(); } } - - input.type="text"; } this.model[opt] = { input: input, row: row }; } @@ -174,7 +186,13 @@ Palette.prototype.read = function() { var value = isFunction ? this.model[opt].functionString : input.value; if (value && value.length != 0) { if (type == "boolean") { - results[opt] = value == "true"; + if (value == "false") { + results[opt] = false; + } + if (value == "true") { + results[opt] = true; + } + // Ignore value == "none" } else if (type == "int") { results[opt] = parseInt(value); } else if (type == "float") { @@ -206,12 +224,14 @@ Palette.prototype.read = function() { Palette.prototype.write = function(hash) { var results = {}; for (var opt in this.model) { - // && hash.hasOwnProperty(opt) if (this.model.hasOwnProperty(opt)) { var input = this.model[opt].input; var type = opts[opt].type; var value = hash[opt]; - if (type == "array") { + if (type == "boolean") { + var text = value == true ? "true" : (value == false ? "false" : "none"); + Palette.populateBooleanButton(input, text); + } else if (type == "array") { if (value) { input.value = value.join("; "); } @@ -231,6 +251,11 @@ Palette.prototype.write = function(hash) { } } +Palette.populateBooleanButton = function(button, value) { + button.innerHTML = value; + button.value = value; +} + Palette.prototype.filter = function(pattern) { pattern = pattern.toLowerCase(); var even = true;