Move stock data into tests/data.js
[dygraphs.git] / gallery / gallery.js
1 /*jshint loopfunc:true */
2 /*global Dygraph,$,TextArea,jQuery */
3 var Gallery = {};
4
5 Gallery.entries = {};
6 Gallery.entryOrder = [];
7 Gallery.runningDemo = null;
8
9 /*
10 * Shortcut for creating HTML associated with a parent.
11 */
12 Gallery.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
21 Gallery.start = function() {
22 Gallery.toc = document.getElementById("toc");
23 Gallery.workarea = document.getElementById("workarea");
24 Gallery.subtitle = Gallery.create("div", Gallery.workarea);
25 Gallery.subtitle.id = "subtitle";
26 Gallery.workareaChild = Gallery.create("div", Gallery.workarea);
27 Gallery.demotitle = document.getElementById("demotitle");
28 Gallery.textarea = new TextArea();
29 Gallery.textarea.cancel.style.display = "none";
30 Gallery.textarea.width = 600;
31 Gallery.textarea.height = 400;
32
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() {
47 if (Gallery.runningDemo !== null) {
48 Gallery.runningDemo.innerDiv.className = "";
49 if (Gallery.runningDemo.clean) {
50 Gallery.runningDemo.clean(Gallery.workareaChild);
51 }
52 }
53 Gallery.subtitle.innerHTML = "";
54
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
63 Gallery.demotitle.textContent = demo.title ? demo.title : "";
64 demo.innerDiv.className = "selected";
65
66 var codeSpan = Gallery.create("span", Gallery.subtitle);
67 codeSpan.id = "code";
68
69 var htmlLink = Gallery.create("a", codeSpan);
70 htmlLink.textContent = "HTML";
71
72 Gallery.create("span", codeSpan).textContent = " | ";
73
74 var javascriptLink = Gallery.create("a", codeSpan);
75 javascriptLink.textContent = "Javascript";
76
77 var css = getCss(id);
78 var cssLink;
79 if (css) {
80 Gallery.create("span", codeSpan).textContent = " | ";
81 cssLink = Gallery.create("a", codeSpan);
82 cssLink.textContent = "CSS";
83 }
84
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/";
89
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");
94
95 var javascript = demo.run.toString();
96 var html = Gallery.workareaChild.innerHTML;
97
98 // tweak for use in jsfiddle
99 javascript = " $(document).ready(" + javascript + "\n);";
100 jQuery('<textarea/>', { name: 'html' })
101 .val(html)
102 .hide()
103 .appendTo(jsfs);
104
105 jQuery('<textarea/>', { name: 'js' })
106 .val(javascript)
107 .hide()
108 .appendTo(jsfs);
109
110 if (css) {
111 jQuery('<textarea/>', { name: 'css' })
112 .val(css)
113 .hide()
114 .appendTo(jsfs);
115 }
116 jQuery('<input/>', {
117 type: 'text',
118 name: 'title',
119 value: 'title tbd'
120 })
121 .hide()
122 .appendTo(jsfs);
123 jQuery('<input/>', {
124 type: 'text',
125 name: 'description',
126 value: 'desc tbd'
127 })
128 .hide()
129 .appendTo(jsfs);
130
131 htmlLink.onclick = function() {
132 Gallery.textarea.show("HTML", html);
133 };
134
135 javascriptLink.onclick = function() {
136 Gallery.textarea.show("Javascript", javascript);
137 };
138
139 if (css) {
140 cssLink.onclick = function() {
141 Gallery.textarea.show("CSS", css);
142 };
143 }
144
145 demo.run(Gallery.workareaChild);
146 Gallery.runningDemo = demo;
147 }; }(demo, id);
148 }
149
150 Gallery.hashChange();
151
152 window.onhashchange = Gallery.setHash;
153 };
154
155 var 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 + " ";
167 if (cssText.indexOf(key) === 0) {
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";
179 };
180
181 Gallery.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
189 Gallery.hashChange = function(event) {
190 if (location.hash) {
191 if (location.hash.indexOf("#g/") === 0) {
192 var id = location.hash.substring(3) + "-toc";
193 var elem = document.getElementById(id);
194 elem.onclick();
195 return;
196 }
197 }
198 Gallery.workareaChild.innerHTML = "<h3>Select a demo from the gallery on the left</h3>";
199 };