formatting

[dygraphs.git] / experimental / palette / palette.js

diff --git a/experimental/palette/palette.js b/experimental/palette/palette.js
index cb6a03f..e69b086 100644 (file)
--- a/experimental/palette/palette.js
+++ b/experimental/palette/palette.js
@@ -31,82 +31,48 @@ function Palette() {
   this.filterBar = null;
 }
 
-Palette.createChild = function(type, parentElement) {
+Palette.createChild = function(type, parentElement, className) {
   var element = document.createElement(type);
   parentElement.appendChild(element);
+  if (className) {
+    element.className = className;
+  }
   return element;
 };
 
-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.className = "tooltip";
-  this.title.className = "title";
-  this.type = Palette.createChild("div", this.elem);
-  this.type.className = "type";
-  this.body = Palette.createChild("div", this.elem);
-  this.body.className = "body";
-  this.hide();
-}
-
-Tooltip.prototype.show = function(source, event, title, type, body) {
-  this.title.innerHTML = title;
-  this.body.innerHTML = body;
-  this.type.innerHTML = type;
-
-  var getTopLeft = function(element) {
-    var x = element.offsetLeft;
-    var y = element.offsetTop;
-    element = element.offsetParent;
-
-    while(element != null) {
-      x = parseInt(x) + parseInt(element.offsetLeft);
-      y = parseInt(y) + parseInt(element.offsetTop);
-      element = element.offsetParent;
-    }
-    return [y, x];
-  }
-
-  this.elem.style.height = source.style.height;
-  this.elem.style.width = "280";
-  var topLeft = getTopLeft(source);
-  this.elem.style.top = parseInt(topLeft[0] + source.offsetHeight) + 'px';
-  this.elem.style.left = parseInt(topLeft[1] + 10) + 'px';
-  this.elem.style.visibility = "visible";
-}
-
-Tooltip.prototype.hide = function() {
-  this.elem.style.visibility = "hidden";
-}
-
 Palette.prototype.create = function(document, parentElement) {
   var palette = this;
 
-  var table = Palette.createChild("div", parentElement);
-  table.className = "palette";
+  var table = Palette.createChild("div", parentElement, "palette");
   table.width="300px";
 
   this.tooltip = new Tooltip();
 
-  var row = Palette.createChild("div", table);
+  var row = Palette.createChild("div", table, "header");
   row.style.visibility = "visible";
-  row.className = "header";
 
-  Palette.createChild("span", row).innerText = "Filter:";
+  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)
   };
-  var go = document.createElement("button");
-  Palette.createChild("span", row).appendChild(go);
-  go.innerText = "Redraw"
+  this.filterBar.onclick = this.filterBar.onkeyup;
+  var go = Palette.createChild("button", Palette.createChild("span", row));
+  go.textContent = "Redraw"
   go.onclick = function() {
     palette.onchange();
   };
 
+  // CURRENTLY HIDDEN.
+  var tmp = Palette.createChild("button", Palette.createChild("span", row));
+  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";
+
   for (var opt in opts) {
     try {
       if (opts.hasOwnProperty(opt)) {
@@ -120,12 +86,10 @@ Palette.prototype.create = function(document, parentElement) {
         } (row, opt, type, Dygraph.OPTIONS_REFERENCE[opt].description);
         row.onmouseout = function() { palette.tooltip.hide(); };
 
-        var div = Palette.createChild("span", row);
-        div.innerText = opt;
-        div.className = "name";
+        var div = Palette.createChild("span", row, "name");
+        div.textContent = opt;
 
-        var value = Palette.createChild("span", row);
-        value.className = "option";
+        var value = Palette.createChild("span", row, "option");
 
         if (isFunction) {
            var input = Palette.createChild("button", value);
@@ -134,23 +98,25 @@ Palette.prototype.create = function(document, parentElement) {
                var entry = palette.model[opt];
                var inputValue = entry.functionString;
                if (inputValue == null || inputValue.length == 0) {
-                 inputValue = opts[opt].type + "{ }";
+                 inputValue = opts[opt].type + "{\n\n}";
                }
-               var value = prompt("enter function", inputValue);
-               if (value != null) {
-                 if (value.length == 0) {
-                   value = null;
-                 }
+                    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 {
-          var input = Palette.createChild("input", value);
+          var input = Palette.createChild("input", value, "textInput");
+          if (type == "boolean") {
+            input.size = "5";
+            input.maxlength = "5";
+          }
           input.onkeypress = function(event) {
             var keycode = event.which;
             if (keycode == 13 || keycode == 8) {
@@ -254,7 +220,7 @@ 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) {