gallery/gallery.js

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