X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=experimental%2Fpalette%2Fpalette.js;h=9e4139f9225f428a2bf1b732b903273e3bc8ffe9;hb=0b5dcc08f7f673a84f627e5e7d51fd46a21c66f4;hp=1e718f46931d07b92492b7c1a8fb6f80828f3614;hpb=909bae9be60850acdb3fc1430be1dc9ac8341e75;p=dygraphs.git

diff --git a/experimental/palette/palette.js b/experimental/palette/palette.js
index 1e718f4..9e4139f 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,54 +47,51 @@ 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).innerText = "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.innerText = "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));
-  tmp.innerText = "Copy"
+  var tmp = Palette.createChild("button", Palette.createChild("span", header));
+  tmp.textContent = "Copy"
   tmp.onclick = function() {
     var textarea = new TextArea();
     textarea.show("header", "Now is the time for all good men\nto come to the aid of their country");
   };
   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(); };
 
         var div = Palette.createChild("span", row, "name");
-        div.innerText = opt;
+        div.textContent = opt;
 
         var value = Palette.createChild("span", row, "option");
 
@@ -100,27 +104,39 @@ 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.innerText = value ? "defined" : "not defined";
+                   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);
+          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();
             }
           }
-
-          input.type="text";
         }
         this.model[opt] = { input: input, row: row };
       }
@@ -170,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") {
@@ -181,6 +203,8 @@ Palette.prototype.read = function() {
           results[opt] = Palette.parseFloatArray(value);
         } else if (type == "array<boolean>") {
           results[opt] = Palette.parseBooleanArray(value);
+        } else if (type == "array<int>") {
+          results[opt] = Palette.parseIntArray(value);
         } else if (type == "array<Date>") {
           results[opt] = Palette.parseIntArray(value);
         } else if (isFunction) {
@@ -202,12 +226,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<string>") {
+      if (type == "boolean") {
+        var text = value == true ? "true" : (value == false ? "false" : "none");
+        Palette.populateBooleanButton(input, text);
+      } else if (type == "array<string>") {
         if (value) {
           input.value = value.join("; ");
         }
@@ -216,10 +242,10 @@ Palette.prototype.write = function(hash) {
           input.value = value.join(", ");
         }
       } else if (type.indexOf("function(") == 0) {
-        input.innerText = value ? "defined" : "not defined";
+        input.textContent = value ? "defined" : "not defined";
         this.model[opt].functionString = value ? value.toString() : null;
       } else {
-        if (value) {
+        if (value != undefined) {
           input.value = value;
         }
       }
@@ -227,6 +253,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;