gallery/gallery.js

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