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