X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=inline;f=gallery%2Fgallery.js;h=f8b4ceea1ae284ab931b62beafb2d0dcd04adc8c;hb=80be397c6428c0015c21f4a4ac96e222eb51f67e;hp=0c0034caf60eabf0b4380d8181fccae62fd444da;hpb=5b6d85fdd7b79dc62886a67a08fb9019c98f796c;p=dygraphs.git diff --git a/gallery/gallery.js b/gallery/gallery.js index 0c0034c..f8b4cee 100644 --- a/gallery/gallery.js +++ b/gallery/gallery.js @@ -1,3 +1,5 @@ +/*jshint loopfunc:true */ +/*global Dygraph,$,TextArea,jQuery */ var Gallery = {}; Gallery.entries = {}; @@ -24,6 +26,7 @@ Gallery.start = function() { 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; @@ -41,29 +44,104 @@ Gallery.start = function() { 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 = ""; - var codeLink = Gallery.create("a", Gallery.subtitle); - codeLink.textContent = "code"; - codeLink.href = "#"; - Gallery.demotitle.textContent = demo.title ? demo.title : ""; - demo.innerDiv.className = "selected"; + 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 codeSpan = Gallery.create("span", Gallery.subtitle); + codeSpan.id = "code"; + + var htmlLink = Gallery.create("a", codeSpan); + htmlLink.textContent = "HTML"; + + Gallery.create("span", codeSpan).textContent = " | "; + + var javascriptLink = Gallery.create("a", codeSpan); + javascriptLink.textContent = "Javascript"; + + var css = getCss(id); + var cssLink; + if (css) { + Gallery.create("span", codeSpan).textContent = " | "; + cssLink = Gallery.create("a", codeSpan); + cssLink.textContent = "CSS"; + } + + var jsFiddleForm = Gallery.create("form", codeSpan); + var jsfs = $(jsFiddleForm); + jsFiddleForm.method = "post"; + jsFiddleForm.action = "http://jsfiddle.net/api/post/jquery/1.4/"; + + jsfs.html("\n" + + "
\n"); + + var javascript = demo.run.toString(); 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); + + // tweak for use in jsfiddle + javascript = " $(document).ready(" + javascript + "\n);"; + jQuery('', { name: 'html' }) + .val(html) + .hide() + .appendTo(jsfs); + + jQuery('', { name: 'js' }) + .val(javascript) + .hide() + .appendTo(jsfs); + + if (css) { + jQuery('', { name: 'css' }) + .val(css) + .hide() + .appendTo(jsfs); + } + jQuery('', { + type: 'text', + name: 'title', + value: 'title tbd' + }) + .hide() + .appendTo(jsfs); + jQuery('', { + 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", javascript); }; + + if (css) { + cssLink.onclick = function() { + Gallery.textarea.show("CSS", css); + }; + } + demo.run(Gallery.workareaChild); Gallery.runningDemo = demo; }; }(demo, id); @@ -71,7 +149,33 @@ Gallery.start = function() { Gallery.hashChange(); - window.onhashchange = Gallery.setHash;("hashchange", Gallery.hashChange, false); + window.onhashchange = Gallery.setHash; +}; + +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) { @@ -84,12 +188,12 @@ Gallery.register = function(id, demo) { 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 = "