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.cancel.style.display = "none";
  28   Gallery.textarea.width = 600;
  29   Gallery.textarea.height = 400;
  30
  31   for (var idx in Gallery.entryOrder) {
  32     var id = Gallery.entryOrder[idx];
  33     var demo = Gallery.entries[id];
  34
  35     var div = Gallery.create("div", Gallery.toc, "entry");
  36     div.id = id + "-toc";
  37     var innerDiv = Gallery.create("div", div, "");
  38
  39     // Storing extra data in the demo object.
  40     demo.div = div;
  41     demo.innerDiv = innerDiv;
  42
  43     innerDiv.textContent = demo.name;
  44     div.onclick = function(demo, id) { return function() {
  45       if (Gallery.runningDemo != null) {
  46         Gallery.runningDemo.innerDiv.className = "";
  47         if (Gallery.runningDemo.clean != null) {
  48           Gallery.runningDemo.clean(Gallery.workareaChild);
  49         }
  50       }
  51       Gallery.subtitle.innerHTML = "";
  52
  53       Gallery.demotitle.textContent = demo.title ? demo.title : "";
  54       demo.innerDiv.className = "selected";
  55
  56       var htmlLink = Gallery.create("a", Gallery.subtitle);
  57       htmlLink.textContent = "HTML";
  58       htmlLink.href = "#";
  59
  60       Gallery.subtitle.appendChild(document.createTextNode(" "));
  61
  62       var javascriptLink = Gallery.create("a", Gallery.subtitle);
  63       javascriptLink.textContent = "Javascript";
  64       javascriptLink.href = "#";
  65
  66       Gallery.subtitle.appendChild(document.createTextNode(" "));
  67
  68       var cssLink = Gallery.create("a", Gallery.subtitle);
  69       cssLink.textContent = "CSS";
  70       cssLink.href = "#";
  71
  72       Gallery.workareaChild.id = id;
  73       location.hash = "g/" + id;
  74
  75       Gallery.workareaChild.innerHTML='';
  76       if (demo.setup) {
  77         demo.setup(Gallery.workareaChild);
  78       }
  79
  80       var html = Gallery.workareaChild.innerHTML;
  81
  82       htmlLink.onclick = function() {
  83         Gallery.textarea.show("HTML", html);
  84       };
  85
  86       javascriptLink.onclick = function() {
  87         Gallery.textarea.show("Javascript", demo.run.toString());
  88       };
  89
  90       cssLink.onclick = function() {
  91         var css = getCss(demo.title);
  92         Gallery.textarea.show("CSS", css);
  93       };
  94
  95       demo.run(Gallery.workareaChild);
  96       Gallery.runningDemo = demo;
  97     }; }(demo, id);
  98   }
  99
 100   Gallery.hashChange();
 101
 102   window.onhashchange = Gallery.setHash;("hashchange", Gallery.hashChange, false);
 103 };
 104
 105 var getCss = function(section) {
 106   // Pretty presumptive of me to assume the first style sheet is the correct one.
 107   // TODO(konigsberg): find the right style sheet by searching.
 108   var ss = document.styleSheets[0];
 109   return ss.toString();
 110 }
 111
 112 Gallery.register = function(id, demo) {
 113   if (Gallery.entries[id]) {
 114     throw id + " already registered";
 115   }
 116   Gallery.entries[id] = demo;
 117   Gallery.entryOrder.push(id);
 118 };
 119
 120 Gallery.hashChange = function(event) {
 121   if (location.hash) {
 122     if (location.hash.indexOf("#g/") == 0) {
 123       var id = location.hash.substring(3) + "-toc";
 124       var elem = document.getElementById(id);
 125       elem.onclick();
 126       return;
 127     }
 128   }
 129   Gallery.workareaChild.innerHTML = "<h3>Select a demo from the gallery on the left</h3>"
 130 };