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