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