X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=inline;f=gallery%2Fgallery.js;h=f8b4ceea1ae284ab931b62beafb2d0dcd04adc8c;hb=ad9515f810131991ff323f6437623cc15a36c492;hp=08299aa6a588e244100ceedb1f9643da97e7bbff;hpb=d53954c3fef58d4ea260ffb35b133a49e86f8d80;p=dygraphs.git diff --git a/gallery/gallery.js b/gallery/gallery.js index 08299aa..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 = {}; @@ -17,11 +19,17 @@ Gallery.create = function(type, parent, className) { }; Gallery.start = function() { - google.load('visualization', '1', {'packages':['annotatedtimeline']}); Gallery.toc = document.getElementById("toc"); Gallery.workarea = document.getElementById("workarea"); + Gallery.subtitle = Gallery.create("div", Gallery.workarea); + Gallery.subtitle.id = "subtitle"; Gallery.workareaChild = Gallery.create("div", Gallery.workarea); - Gallery.workarea.style.visibility = "hidden"; + Gallery.demotitle = document.getElementById("demotitle"); + Gallery.textarea = new TextArea(); + Gallery.textarea.cancel.style.display = "none"; + Gallery.textarea.width = 600; + Gallery.textarea.height = 400; + for (var idx in Gallery.entryOrder) { var id = Gallery.entryOrder[idx]; var demo = Gallery.entries[id]; @@ -36,21 +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.workarea.style.visibility = "visible"; - document.getElementById("title").textContent = demo.title ? demo.title : ""; - demo.innerDiv.className = "selected"; + 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 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; + + // 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); @@ -58,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) { @@ -71,10 +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; } } -}; \ No newline at end of file + Gallery.workareaChild.innerHTML = "