experimental/palette/palette.js

   1 // Copyright (c) 2011 Google, Inc.
   2 //
   3 // Permission is hereby granted, free of charge, to any person obtaining a copy
   4 // of this software and associated documentation files (the "Software"), to deal
   5 // in the Software without restriction, including without limitation the rights
   6 // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
   7 // copies of the Software, and to permit persons to whom the Software is
   8 // furnished to do so, subject to the following conditions:
   9 //
  10 // The above copyright notice and this permission notice shall be included in
  11 // all copies or substantial portions of the Software.
  12 //
  13 // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  14 // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  15 // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  16 // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  17 // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  18 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  19 // THE SOFTWARE.
  20
  21 /**
  22  * @fileoverview Dygraphs options palette.
  23  *
  24  * @author konigsberg@google.com (Robert Konigsberg)
  25  */
  26 "use strict";
  27
  28 function Palette() {
  29   this.model = {};
  30   this.onchange = function() {};
  31   this.filterBar = null;
  32 }
  33
  34 Palette.createChild = function(type, parentElement) {
  35   var element = document.createElement(type);
  36   parentElement.appendChild(element);
  37   return element;
  38 };
  39
  40 function Tooltip(parent) {
  41   if (!parent) {
  42     parent = document.getElementsByTagName("body")[0];
  43   }
  44   this.elem = Palette.createChild("div", parent);
  45   this.title = Palette.createChild("div", this.elem);
  46   this.elem.className = "tooltip";
  47   this.title.className = "title";
  48   this.type = Palette.createChild("div", this.elem);
  49   this.type.className = "type";
  50   this.body = Palette.createChild("div", this.elem);
  51   this.body.className = "body";
  52   this.hide();
  53 }
  54
  55 Tooltip.prototype.show = function(source, event, title, type, body) {
  56   this.title.innerHTML = title;
  57   this.body.innerHTML = body;
  58   this.type.innerHTML = type;
  59
  60   var getTopLeft = function(element) {
  61     var x = element.offsetLeft;
  62     var y = element.offsetTop;
  63     element = element.offsetParent;
  64
  65     while(element != null) {
  66       x = parseInt(x) + parseInt(element.offsetLeft);
  67       y = parseInt(y) + parseInt(element.offsetTop);
  68       element = element.offsetParent;
  69     }
  70     return [y, x];
  71   }
  72
  73   this.elem.style.height = source.style.height;
  74   this.elem.style.width = "280";
  75   var topLeft = getTopLeft(source);
  76   this.elem.style.top = parseInt(topLeft[0] + source.offsetHeight) + 'px';
  77   this.elem.style.left = parseInt(topLeft[1] + 10) + 'px';
  78   this.elem.style.visibility = "visible";
  79 }
  80
  81 Tooltip.prototype.hide = function() {
  82   this.elem.style.visibility = "hidden";
  83 }
  84
  85 Palette.prototype.create = function(document, parentElement) {
  86   var palette = this;
  87
  88   var table = Palette.createChild("div", parentElement);
  89   table.className = "palette";
  90   table.width="300px";
  91
  92   this.tooltip = new Tooltip();
  93
  94   var row = Palette.createChild("div", table);
  95   row.style.visibility = "visible";
  96   row.className = "header";
  97
  98   Palette.createChild("span", row).innerText = "Filter:";
  99   this.filterBar = Palette.createChild("input", Palette.createChild("span", row));
 100   this.filterBar.onkeyup = function() {
 101     palette.filter(palette.filterBar.value)
 102   };
 103   var go = document.createElement("button");
 104   Palette.createChild("span", row).appendChild(go);
 105   go.innerText = "Redraw"
 106   go.onclick = function() {
 107     palette.onchange();
 108   };
 109
 110   for (var opt in opts) {
 111     try {
 112       if (opts.hasOwnProperty(opt)) {
 113         var type = opts[opt].type;
 114         var isFunction = type.indexOf("function(") == 0;
 115         var row = Palette.createChild("div", table);
 116         row.onmouseover = function(source, title, type, body, e) {
 117           return function(e) {
 118             palette.tooltip.show(source, e, title, type, body);
 119           };
 120         } (row, opt, type, Dygraph.OPTIONS_REFERENCE[opt].description);
 121         row.onmouseout = function() { palette.tooltip.hide(); };
 122
 123         var div = Palette.createChild("span", row);
 124         div.innerText = opt;
 125         div.className = "name";
 126
 127         var value = Palette.createChild("span", row);
 128         value.className = "option";
 129
 130         if (isFunction) {
 131            var input = Palette.createChild("button", value);
 132            input.onclick = function(opt, palette) {
 133              return function(event) {
 134                var entry = palette.model[opt];
 135                var inputValue = entry.functionString;
 136                if (inputValue == null || inputValue.length == 0) {
 137                  inputValue = opts[opt].type + "{ }";
 138                }
 139                var value = prompt("enter function", inputValue);
 140                if (value != null) {
 141                  if (value.length == 0) {
 142                    value = null;
 143                  }
 144                  if (value != inputValue) {
 145                    entry.functionString = value;
 146                    entry.input.innerText = value ? "defined" : "not defined";
 147                    palette.onchange();
 148                  }
 149                }
 150              }
 151            }(opt, this);
 152         } else {
 153           var input = Palette.createChild("input", value);
 154           input.onkeypress = function(event) {
 155             var keycode = event.which;
 156             if (keycode == 13 || keycode == 8) {
 157               palette.onchange();
 158             }
 159           }
 160
 161           input.type="text";
 162         }
 163         this.model[opt] = { input: input, row: row };
 164       }
 165     } catch(err) {
 166       throw "For option " + opt + ":" + err;
 167     }
 168   }
 169   this.filter("");
 170 }
 171
 172 // TODO: replace semicolon parsing with comma parsing, and supporting quotes.
 173 Palette.parseStringArray = function(value) {
 174   if (value == null || value.length == 0) {
 175     return null;
 176   }
 177   return value.split(";");
 178 }
 179
 180 Palette.parseBooleanArray = function(value) {
 181   if (value == null || value.length == 0) {
 182     return null;
 183   }
 184   return value.split(',').map(function(x) { return x.trim() == "true"; });
 185 }
 186
 187 Palette.parseFloatArray = function(value) {
 188   if (value == null || value.length == 0) {
 189     return null;
 190   }
 191   return value.split(',').map(function(x) { return parseFloat(x); });
 192 }
 193
 194 Palette.parseIntArray = function(value) {
 195   if (value == null || value.length == 0) {
 196     return null;
 197   }
 198   return value.split(',').map(function(x) { return parseInt(x); });
 199 }
 200
 201 Palette.prototype.read = function() {
 202   var results = {};
 203   for (var opt in this.model) {
 204     if (this.model.hasOwnProperty(opt)) {
 205       var type = opts[opt].type;
 206       var isFunction = type.indexOf("function(") == 0;
 207       var input = this.model[opt].input;
 208       var value = isFunction ? this.model[opt].functionString : input.value;
 209       if (value && value.length != 0) {
 210         if (type == "boolean") {
 211           results[opt] = value == "true";
 212         } else if (type == "int") {
 213           results[opt] = parseInt(value);
 214         } else if (type == "float") {
 215           results[opt] = parseFloat(value);
 216         } else if (type == "array<string>") {
 217           results[opt] = Palette.parseStringArray(value);
 218         } else if (type == "array<float>") {
 219           results[opt] = Palette.parseFloatArray(value);
 220         } else if (type == "array<boolean>") {
 221           results[opt] = Palette.parseBooleanArray(value);
 222         } else if (type == "array<Date>") {
 223           results[opt] = Palette.parseIntArray(value);
 224         } else if (isFunction) {
 225           var localVariable = null;
 226           eval("localVariable = " + value);
 227           results[opt] = localVariable;
 228         } else {
 229           results[opt] = value;
 230         }
 231       }
 232     }
 233   }
 234   return results;
 235 }
 236
 237 /**
 238  * Write to input elements.
 239  */
 240 Palette.prototype.write = function(hash) {
 241   var results = {};
 242   for (var opt in this.model) {
 243     //  && hash.hasOwnProperty(opt)
 244     if (this.model.hasOwnProperty(opt)) {
 245       var input = this.model[opt].input;
 246       var type = opts[opt].type;
 247       var value = hash[opt];
 248       if (type == "array<string>") {
 249         if (value) {
 250           input.value = value.join("; ");
 251         }
 252       } else if (type.indexOf("array") == 0) {
 253         if (value) {
 254           input.value = value.join(", ");
 255         }
 256       } else if (type.indexOf("function(") == 0) {
 257         input.innerText = value ? "defined" : "not defined";
 258         this.model[opt].functionString = value ? value.toString() : null;
 259       } else {
 260         if (value) {
 261           input.value = value;
 262         }
 263       }
 264     }
 265   }
 266 }
 267
 268 Palette.prototype.filter = function(pattern) {
 269   pattern = pattern.toLowerCase();
 270   var even = true;
 271   for (var opt in this.model) {
 272     if (this.model.hasOwnProperty(opt)) {
 273       var row = this.model[opt].row;
 274       var matches = opt.toLowerCase().indexOf(pattern) >= 0;
 275       row.style.display = matches ? "block" : "none";
 276       if (matches) {
 277         row.className = even ? "even" : "odd";
 278         even = !even;
 279       }
 280     }
 281   }
 282 }