+/*jshint loopfunc:true */
+/*global Dygraph,$,TextArea,jQuery */
var Gallery = {};
Gallery.entries = {};
innerDiv.textContent = demo.name;
div.onclick = function(demo, id) { return function() {
- if (Gallery.runningDemo != null) {
+ if (Gallery.runningDemo !== null) {
Gallery.runningDemo.innerDiv.className = "";
- if (Gallery.runningDemo.clean != null) {
+ if (Gallery.runningDemo.clean) {
Gallery.runningDemo.clean(Gallery.workareaChild);
}
}
Gallery.subtitle.innerHTML = "";
+ Gallery.workareaChild.id = id;
+ location.hash = "g/" + id;
+
+ Gallery.workareaChild.innerHTML='';
+ if (demo.setup) {
+ demo.setup(Gallery.workareaChild);
+ }
+
Gallery.demotitle.textContent = demo.title ? demo.title : "";
demo.innerDiv.className = "selected";
- var htmlLink = Gallery.create("a", Gallery.subtitle);
+ var codeSpan = Gallery.create("span", Gallery.subtitle);
+ codeSpan.id = "code";
+
+ var htmlLink = Gallery.create("a", codeSpan);
htmlLink.textContent = "HTML";
- htmlLink.href = "#";
- Gallery.subtitle.appendChild(document.createTextNode(" "));
+ Gallery.create("span", codeSpan).textContent = " | ";
- var javascriptLink = Gallery.create("a", Gallery.subtitle);
+ var javascriptLink = Gallery.create("a", codeSpan);
javascriptLink.textContent = "Javascript";
- javascriptLink.href = "#";
-
- Gallery.subtitle.appendChild(document.createTextNode(" "));
- var cssLink = Gallery.create("a", Gallery.subtitle);
- cssLink.textContent = "CSS";
- cssLink.href = "#";
+ var css = getCss(id);
+ var cssLink;
+ if (css) {
+ Gallery.create("span", codeSpan).textContent = " | ";
+ cssLink = Gallery.create("a", codeSpan);
+ cssLink.textContent = "CSS";
+ }
- Gallery.workareaChild.id = id;
- location.hash = "g/" + id;
+ var jsFiddleForm = Gallery.create("form", codeSpan);
+ var jsfs = $(jsFiddleForm);
+ jsFiddleForm.method = "post";
+ jsFiddleForm.action = "http://jsfiddle.net/api/post/jquery/1.4/";
- Gallery.workareaChild.innerHTML='';
- if (demo.setup) {
- demo.setup(Gallery.workareaChild);
- }
+ jsfs.html("<input type='submit' value='Edit in jsFiddle'/>\n" +
+ "<span style='display:none'>\n" +
+ "<textarea name='resources'>http://dygraphs.com/dygraph.js</textarea>\n" +
+ "<input type='text' name='dtd' value='html 5'/></span>\n");
+ var javascript = demo.run.toString();
var html = Gallery.workareaChild.innerHTML;
+ // tweak for use in jsfiddle
+ javascript = " $(document).ready(" + javascript + "\n);";
+ jQuery('<textarea/>', { name: 'html' })
+ .val(html)
+ .hide()
+ .appendTo(jsfs);
+
+ jQuery('<textarea/>', { name: 'js' })
+ .val(javascript)
+ .hide()
+ .appendTo(jsfs);
+
+ if (css) {
+ jQuery('<textarea/>', { name: 'css' })
+ .val(css)
+ .hide()
+ .appendTo(jsfs);
+ }
+ jQuery('<input/>', {
+ type: 'text',
+ name: 'title',
+ value: 'title tbd'
+ })
+ .hide()
+ .appendTo(jsfs);
+ jQuery('<input/>', {
+ type: 'text',
+ name: 'description',
+ value: 'desc tbd'
+ })
+ .hide()
+ .appendTo(jsfs);
+
htmlLink.onclick = function() {
Gallery.textarea.show("HTML", html);
};
javascriptLink.onclick = function() {
- Gallery.textarea.show("Javascript", demo.run.toString());
+ Gallery.textarea.show("Javascript", javascript);
};
- cssLink.onclick = function() {
- var css = getCss(demo.title);
- Gallery.textarea.show("CSS", css);
- };
+ if (css) {
+ cssLink.onclick = function() {
+ Gallery.textarea.show("CSS", css);
+ };
+ }
demo.run(Gallery.workareaChild);
Gallery.runningDemo = demo;
Gallery.hashChange();
- window.onhashchange = Gallery.setHash;("hashchange", Gallery.hashChange, false);
+ window.onhashchange = Gallery.setHash;
};
-var getCss = function(section) {
- // Pretty presumptive of me to assume the first style sheet is the correct one.
- // TODO(konigsberg): find the right style sheet by searching.
- var ss = document.styleSheets[0];
- return ss.toString();
-}
+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]) {
Gallery.hashChange = function(event) {
if (location.hash) {
- if (location.hash.indexOf("#g/") == 0) {
+ if (location.hash.indexOf("#g/") === 0) {
var id = location.hash.substring(3) + "-toc";
var elem = document.getElementById(id);
elem.onclick();
return;
}
}
- Gallery.workareaChild.innerHTML = "<h3>Select a demo from the gallery on the left</h3>"
+ Gallery.workareaChild.innerHTML = "<h3>Select a demo from the gallery on the left</h3>";
};