this.textarea.style.height = (-18 + sums([this.elem], [this.title, this.buttons], "offsetHeight")) + "px";
this.textarea.style.width = (-16 + sums([this.elem], [ ], "offsetWidth")) + "px";
+ var textarea = this;
+
+ this.keyDownListener_ = function(event) {
+ console.log(event);
+ if(event.keyCode == 13) { // enter / return
+ textarea.hide();
+ }
+ if(event.keyCode == 27) { // esc
+ textarea.hide();
+ }
+ }
+
+ Dygraph.addEvent(document, "keydown", this.keyDownListener_);
this.reposition();
window.addEventListener('resize', this.reposition, false);
document.documentElement.addEventListener('onscroll', this.reposition);
}
TextArea.prototype.hide = function() {
+ Dygraph.removeEvent(document, "keypress", this.keyDownListener_);
+ this.keyDownListener_ = null;
this.elem.style.display = "none";
this.background.style.display = "none";
window.removeEventListener("resize", this.reposition);
"default": "false",
"labels": ["Data Line display"],
"type": "boolean",
- "description": "Draw a small dot at each point, in addition to a line going through the point. This makes the individual data points easier to see, but can increase visual clutter in the chart. The small dot can be replaced with a custom rendering by supplying a drawPointCallback."
+ "description": "Draw a small dot at each point, in addition to a line going through \
+ the point. This makes the individual data points easier to see, but \
+ can increase visual clutter in the chart. The small dot can be \
+ replaced with a custom rendering by supplying a \
+ <a href='#drawPointCallback'>drawPointCallback</a>."
},
"drawPointCallback": {
"default": "null",
"labels": ["Data Line display"],
"type": "function(g, seriesName, canvasContext, cx, cy, color, pointSize)",
- "description": "Draw a custom item when drawPoints is enabled. Default is a small dot matching the series color."
+ "parameters": [
+ [ "g" , "the reference graph" ],
+ [ "seriesName" , "the name of the series" ],
+ [ "canvasContext" , "the canvas to draw on" ],
+ [ "cx" , "center x coordinate" ],
+ [ "cy" , "center y coordinate" ],
+ [ "color" , "series color" ],
+ [ "pointSize" , "the radius of the image." ]
+ ],
+ "description": "Draw a custom item when drawPoints is enabled. \
+ Default is a small dot matching the series color. This method \
+ should constrain drawing to within pointSize pixels from (cx, cy). \
+ Also see <a href='#drawHighlightPointCallback'>drawHighlightPointCallback</a>"
},
"height": {
"default": "320",
"labels": ["Overall display"],
"type": "integer",
- "description": "Height, in pixels, of the chart. If the container div has been explicitly sized, this will be ignored."
+ "description": "Height, in pixels, of the chart. If the container div has \
+ been explicitly sized, this will be ignored."
},
"zoomCallback": {
"default": "null",
[ "maxDate" , "milliseconds since epoch." ],
[ "yRanges" , "is an array of [bottom, top] pairs, one for each y-axis." ]
],
- "description": "A function to call when the zoom window is changed (either by zooming in or out)."
+ "description": "A function to call when the zoom window is changed (either \
+ by zooming in or out)."
},
"pointClickCallback": {
"snippet": "function(e, point){<br> alert(point);<br>}",
"default": "null",
"labels": ["Data Line display"],
"type": "function(g, seriesName, canvasContext, cx, cy, color, pointSize)",
- "description": "Draw a custom item when a point is highlighted. Default is a small dot matching the series color."
+ "parameters": [
+ [ "g" , "the reference graph" ],
+ [ "seriesName" , "the name of the series" ],
+ [ "canvasContext" , "the canvas to draw on" ],
+ [ "cx" , "center x coordinate" ],
+ [ "cy" , "center y coordinate" ],
+ [ "color" , "series color" ],
+ [ "pointSize" , "the radius of the image." ]
+ ],
+ "description": "Draw a custom item when a point is highlighted. \
+ Default is a small dot matching the series color. This method \
+ should constrain drawing to within pointSize pixels from (cx, cy) \
+ Also see <a href='#drawPointCallback'>drawPointCallback</a>"
},
"highlightSeriesOpts": {
"default": "null",
-@import url("../common/textarea.css");
-
body {
font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
font-size: 90%;
Gallery.workareaChild = Gallery.create("div", Gallery.workarea);
Gallery.demotitle = document.getElementById("demotitle");
Gallery.textarea = new TextArea();
+ Gallery.textarea.cancel.style.display = "none";
Gallery.textarea.width = 600;
Gallery.textarea.height = 400;
}
}
Gallery.subtitle.innerHTML = "";
- var codeLink = Gallery.create("a", Gallery.subtitle);
- codeLink.textContent = "code";
- codeLink.href = "#";
+
Gallery.demotitle.textContent = demo.title ? demo.title : "";
demo.innerDiv.className = "selected";
+
+ var htmlLink = Gallery.create("a", Gallery.subtitle);
+ htmlLink.textContent = "HTML";
+ htmlLink.href = "#";
+
+ Gallery.subtitle.appendChild(document.createTextNode(" "));
+
+ var javascriptLink = Gallery.create("a", Gallery.subtitle);
+ javascriptLink.textContent = "Javascript";
+ javascriptLink.href = "#";
+
+ Gallery.subtitle.appendChild(document.createTextNode(" "));
+
+ var css = getCss(id);
+ if (css) {
+ var cssLink = Gallery.create("a", Gallery.subtitle);
+ cssLink.textContent = "CSS";
+ cssLink.href = "#";
+ }
+
Gallery.workareaChild.id = id;
location.hash = "g/" + id;
+
Gallery.workareaChild.innerHTML='';
if (demo.setup) {
demo.setup(Gallery.workareaChild);
}
+
var html = Gallery.workareaChild.innerHTML;
- codeLink.onclick = function() {
- var javascript = demo.run.toString();
- Gallery.textarea.show("Code", "HTML\n\n" + html + "\n\njavascript\n\n" + javascript);
+
+ htmlLink.onclick = function() {
+ Gallery.textarea.show("HTML", html);
};
+
+ javascriptLink.onclick = function() {
+ Gallery.textarea.show("Javascript", demo.run.toString());
+ };
+
+ cssLink.onclick = function() {
+ Gallery.textarea.show("CSS", css);
+ };
+
demo.run(Gallery.workareaChild);
Gallery.runningDemo = demo;
}; }(demo, id);
window.onhashchange = Gallery.setHash;("hashchange", Gallery.hashChange, false);
};
+var getCss = function(id) {
+ for (var i = 0; i < document.styleSheets.length; i++) {
+ var ss = document.styleSheets[i];
+ if (ss.title == "gallery") {
+ try {
+ var rules = ss.rules || ss.cssRules;
+ if (rules) {
+ var arry = [];
+ for (var j = 0; j < rules.length; j++) {
+ var rule = rules[j];
+ var cssText = rule.cssText;
+ var key = "#workarea #" + id + " ";
+ if (cssText.indexOf(key) == 0) {
+ arry.push(cssText.substr(key.length));
+ }
+ }
+ return arry.join("\n\n");
+ }
+ } catch(e) { // security error
+ console.log(e);
+ }
+ }
+ }
+ return "not found";
+}
+
Gallery.register = function(id, demo) {
if (Gallery.entries[id]) {
throw id + " already registered";
<script src="annotation-gviz.js"></script>
<script src="annotation-native.js"></script>
-->
- <link rel="stylesheet" type="text/css" href="gallery.css" />
+ <link rel="stylesheet" type="text/css" href="../common/textarea.css"></link>
+ <link title="gallery" rel="stylesheet" type="text/css" href="gallery.css"></link>
</head>
<body>
<table>
elif '</JSON>' in line:
in_json = False
elif in_json:
+ if line.endswith("\\\n"): # hacked in line continuation support with trailing \.
+ line = line[:-2]
js += line
# TODO(danvk): better errors here.
projects / dygraphs.git / commitdiff