Move to the proper directory
[dygraphs.git] / gallery / gallery.js
CommitLineData
e1e80cce 1/*jshint loopfunc:true */
e88a95b4 2/*global Dygraph,$,TextArea,jQuery */
c1f22b5a
RK
3var Gallery = {};
4
5Gallery.entries = {};
6Gallery.entryOrder = [];
7Gallery.runningDemo = null;
8
9/*
10 * Shortcut for creating HTML associated with a parent.
11 */
12Gallery.create = function(type, parent, className) {
13 var elem = document.createElement(type);
14 parent.appendChild(elem);
15 if (className) {
16 elem.className = className;
17 }
18 return elem;
19};
20
21Gallery.start = function() {
c1f22b5a
RK
22 Gallery.toc = document.getElementById("toc");
23 Gallery.workarea = document.getElementById("workarea");
a0e87b38 24 Gallery.subtitle = Gallery.create("div", Gallery.workarea);
2a3953eb 25 Gallery.subtitle.id = "subtitle";
c1f22b5a 26 Gallery.workareaChild = Gallery.create("div", Gallery.workarea);
19d9e7c5 27 Gallery.demotitle = document.getElementById("demotitle");
a0e87b38 28 Gallery.textarea = new TextArea();
e2f62472 29 Gallery.textarea.cancel.style.display = "none";
2a3953eb
RK
30 Gallery.textarea.width = 600;
31 Gallery.textarea.height = 400;
a0e87b38 32
c1f22b5a
RK
33 for (var idx in Gallery.entryOrder) {
34 var id = Gallery.entryOrder[idx];
35 var demo = Gallery.entries[id];
36
37 var div = Gallery.create("div", Gallery.toc, "entry");
38 div.id = id + "-toc";
39 var innerDiv = Gallery.create("div", div, "");
40
41 // Storing extra data in the demo object.
42 demo.div = div;
43 demo.innerDiv = innerDiv;
44
45 innerDiv.textContent = demo.name;
46 div.onclick = function(demo, id) { return function() {
e1e80cce 47 if (Gallery.runningDemo !== null) {
c1f22b5a 48 Gallery.runningDemo.innerDiv.className = "";
e1e80cce 49 if (Gallery.runningDemo.clean) {
c1f22b5a
RK
50 Gallery.runningDemo.clean(Gallery.workareaChild);
51 }
52 }
a0e87b38 53 Gallery.subtitle.innerHTML = "";
e2f62472 54
29cb484c
RK
55 Gallery.workareaChild.id = id;
56 location.hash = "g/" + id;
57
58 Gallery.workareaChild.innerHTML='';
59 if (demo.setup) {
60 demo.setup(Gallery.workareaChild);
61 }
62
19d9e7c5 63 Gallery.demotitle.textContent = demo.title ? demo.title : "";
c1f22b5a 64 demo.innerDiv.className = "selected";
e2f62472 65
a6c2695d
RK
66 var codeSpan = Gallery.create("span", Gallery.subtitle);
67 codeSpan.id = "code";
68
69 var htmlLink = Gallery.create("a", codeSpan);
e2f62472 70 htmlLink.textContent = "HTML";
e2f62472 71
29cb484c 72 Gallery.create("span", codeSpan).textContent = " | ";
e2f62472 73
a6c2695d 74 var javascriptLink = Gallery.create("a", codeSpan);
e2f62472 75 javascriptLink.textContent = "Javascript";
e2f62472 76
fa20d2ef 77 var css = getCss(id);
e1e80cce 78 var cssLink;
fa20d2ef 79 if (css) {
29cb484c 80 Gallery.create("span", codeSpan).textContent = " | ";
e1e80cce 81 cssLink = Gallery.create("a", codeSpan);
fa20d2ef 82 cssLink.textContent = "CSS";
fa20d2ef 83 }
e2f62472 84
29cb484c
RK
85 var jsFiddleForm = Gallery.create("form", codeSpan);
86 var jsfs = $(jsFiddleForm);
87 jsFiddleForm.method = "post";
88 jsFiddleForm.action = "http://jsfiddle.net/api/post/jquery/1.4/";
e2f62472 89
29cb484c
RK
90 jsfs.html("<input type='submit' value='Edit in jsFiddle'/>\n" +
91 "<span style='display:none'>\n" +
92 "<textarea name='resources'>http://dygraphs.com/dygraph-combined.js</textarea>\n" +
93 "<input type='text' name='dtd' value='html 5'/></span>\n");
e2f62472 94
29cb484c 95 var javascript = demo.run.toString();
a0e87b38 96 var html = Gallery.workareaChild.innerHTML;
e2f62472 97
29cb484c 98 // tweak for use in jsfiddle
e1e80cce 99 javascript = " $(document).ready(" + javascript + "\n);";
29cb484c 100 jQuery('<textarea/>', { name: 'html' })
e1e80cce
DV
101 .val(html)
102 .hide()
103 .appendTo(jsfs);
29cb484c
RK
104
105 jQuery('<textarea/>', { name: 'js' })
e1e80cce
DV
106 .val(javascript)
107 .hide()
108 .appendTo(jsfs);
29cb484c
RK
109
110 if (css) {
111 jQuery('<textarea/>', { name: 'css' })
e1e80cce
DV
112 .val(css)
113 .hide()
114 .appendTo(jsfs);
115 }
29cb484c
RK
116 jQuery('<input/>', {
117 type: 'text',
118 name: 'title',
119 value: 'title tbd'
120 })
e1e80cce
DV
121 .hide()
122 .appendTo(jsfs);
29cb484c
RK
123 jQuery('<input/>', {
124 type: 'text',
125 name: 'description',
126 value: 'desc tbd'
127 })
e1e80cce
DV
128 .hide()
129 .appendTo(jsfs);
29cb484c 130
e2f62472
RK
131 htmlLink.onclick = function() {
132 Gallery.textarea.show("HTML", html);
133 };
134
135 javascriptLink.onclick = function() {
29cb484c 136 Gallery.textarea.show("Javascript", javascript);
a0e87b38 137 };
e2f62472 138
304c1fbb
RK
139 if (css) {
140 cssLink.onclick = function() {
141 Gallery.textarea.show("CSS", css);
142 };
143 }
e2f62472 144
c1f22b5a
RK
145 demo.run(Gallery.workareaChild);
146 Gallery.runningDemo = demo;
147 }; }(demo, id);
148 }
149
150 Gallery.hashChange();
151
e1e80cce 152 window.onhashchange = Gallery.setHash;
c1f22b5a
RK
153};
154
fa20d2ef
RK
155var getCss = function(id) {
156 for (var i = 0; i < document.styleSheets.length; i++) {
157 var ss = document.styleSheets[i];
158 if (ss.title == "gallery") {
159 try {
160 var rules = ss.rules || ss.cssRules;
161 if (rules) {
162 var arry = [];
163 for (var j = 0; j < rules.length; j++) {
164 var rule = rules[j];
165 var cssText = rule.cssText;
166 var key = "#workarea #" + id + " ";
e1e80cce 167 if (cssText.indexOf(key) === 0) {
fa20d2ef
RK
168 arry.push(cssText.substr(key.length));
169 }
170 }
171 return arry.join("\n\n");
172 }
173 } catch(e) { // security error
174 console.log(e);
175 }
176 }
177 }
178 return "not found";
e1e80cce 179};
e2f62472 180
c1f22b5a
RK
181Gallery.register = function(id, demo) {
182 if (Gallery.entries[id]) {
183 throw id + " already registered";
184 }
185 Gallery.entries[id] = demo;
186 Gallery.entryOrder.push(id);
187};
188
189Gallery.hashChange = function(event) {
72c8bf99 190 if (location.hash) {
e1e80cce 191 if (location.hash.indexOf("#g/") === 0) {
d53954c3
RK
192 var id = location.hash.substring(3) + "-toc";
193 var elem = document.getElementById(id);
194 elem.onclick();
6ced6086 195 return;
d53954c3 196 }
72c8bf99 197 }
e1e80cce 198 Gallery.workareaChild.innerHTML = "<h3>Select a demo from the gallery on the left</h3>";
605b6119 199};