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.innerText = type; // innerText for arrays.
-
- 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)
};
this.filterBar.onclick = this.filterBar.onkeyup;
- var go = document.createElement("button");
- Palette.createChild("span", row).appendChild(go);
- go.innerText = "Redraw"
+ 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)) {
} (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);
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) {
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) {