X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;ds=sidebyside;f=gallery%2Fgallery.js;h=f4b6e704facd0d728a8f251438528e7ed483dc2c;hb=406714e12102ee6714774e2801622577ca0daa16;hp=10128ff480510b8e0519e4ae00cc6b15bea20321;hpb=72c8bf9993215da78476fa918af09e12b297a34c;p=dygraphs.git diff --git a/gallery/gallery.js b/gallery/gallery.js index 10128ff..f4b6e70 100644 --- a/gallery/gallery.js +++ b/gallery/gallery.js @@ -17,11 +17,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]; @@ -42,15 +48,97 @@ Gallery.start = function() { 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 = 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); + if (css) { + Gallery.create("span", codeSpan).textContent = " | "; + var 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); @@ -61,6 +149,32 @@ Gallery.start = function() { window.onhashchange = Gallery.setHash;("hashchange", Gallery.hashChange, false); }; +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]) { throw id + " already registered"; @@ -71,8 +185,12 @@ Gallery.register = function(id, demo) { Gallery.hashChange = function(event) { if (location.hash) { - var id = location.hash.substring(1) + "-toc"; - var elem = document.getElementById(id); - elem.onclick(); + 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 = "