gallery/gallery.js

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