jquery-ify the palette object.

diff --git a/experimental/palette/multi-palette.js b/experimental/palette/multi-palette.js
index 5556f19..2307030 100644 (file)
--- 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 (file)
--- 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 (file)
--- 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;