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.workareaChild = Gallery.create("div", Gallery.workarea);
  24   Gallery.title = document.getElementById("title");
  25   Gallery.textarea = new TextArea();
  26
  27   for (var idx in Gallery.entryOrder) {
  28     var id = Gallery.entryOrder[idx];
  29     var demo = Gallery.entries[id];
  30
  31     var div = Gallery.create("div", Gallery.toc, "entry");
  32     div.id = id + "-toc";
  33     var innerDiv = Gallery.create("div", div, "");
  34
  35     // Storing extra data in the demo object.
  36     demo.div = div;
  37     demo.innerDiv = innerDiv;
  38
  39     innerDiv.textContent = demo.name;
  40     div.onclick = function(demo, id) { return function() {
  41       if (Gallery.runningDemo != null) {
  42         Gallery.runningDemo.innerDiv.className = "";
  43         if (Gallery.runningDemo.clean != null) {
  44           Gallery.runningDemo.clean(Gallery.workareaChild);
  45         }
  46       }
  47       Gallery.subtitle.innerHTML = "";
  48       var codeLink = Gallery.create("a", Gallery.subtitle);
  49       codeLink.textContent = "code";
  50       codeLink.href = "#";
  51       Gallery.title.textContent = demo.title ? demo.title : "";
  52       demo.innerDiv.className = "selected";
  53       Gallery.workareaChild.id = id;
  54       location.hash = "g/" + id;
  55       Gallery.workareaChild.innerHTML='';
  56       if (demo.setup) {
  57         demo.setup(Gallery.workareaChild);
  58       }
  59       var html = Gallery.workareaChild.innerHTML;
  60       codeLink.onclick = function() {
  61         var javascript = demo.run.toString();
  62         Gallery.textarea.show("Code", "HTML\n\n" + html + "\n\njavascript\n\n" + javascript);
  63       };
  64       demo.run(Gallery.workareaChild);
  65       Gallery.runningDemo = demo;
  66     }; }(demo, id);
  67   }
  68
  69   Gallery.hashChange();
  70
  71   window.onhashchange = Gallery.setHash;("hashchange", Gallery.hashChange, false);
  72 };
  73
  74 Gallery.register = function(id, demo) {
  75   if (Gallery.entries[id]) {
  76     throw id + " already registered";
  77   }
  78   Gallery.entries[id] = demo;
  79   Gallery.entryOrder.push(id);
  80 };
  81
  82 Gallery.hashChange = function(event) {
  83   if (location.hash) {
  84     if (location.hash.indexOf("#g/") == 0) {
  85       var id = location.hash.substring(3) + "-toc";
  86       var elem = document.getElementById(id);
  87       elem.onclick();
  88       return;
  89     }
  90   }
  91   Gallery.workareaChild.innerHTML = "<h3>Select a demo from the gallery on the left</h3>"
  92 };