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 codeSpan = Gallery.create("span", Gallery.subtitle);
  57       codeSpan.id = "code";
  58
  59       var htmlLink = Gallery.create("a", codeSpan);
  60       htmlLink.textContent = "HTML";
  61
  62       codeSpan.appendChild(document.createTextNode(" "));
  63
  64       var javascriptLink = Gallery.create("a", codeSpan);
  65       javascriptLink.textContent = "Javascript";
  66
  67       codeSpan.appendChild(document.createTextNode(" "));
  68
  69       var css = getCss(id);
  70       if (css) {
  71         var cssLink = Gallery.create("a", codeSpan);
  72         cssLink.textContent = "CSS";
  73       }
  74
  75       Gallery.workareaChild.id = id;
  76       location.hash = "g/" + id;
  77
  78       Gallery.workareaChild.innerHTML='';
  79       if (demo.setup) {
  80         demo.setup(Gallery.workareaChild);
  81       }
  82
  83       var html = Gallery.workareaChild.innerHTML;
  84
  85       htmlLink.onclick = function() {
  86         Gallery.textarea.show("HTML", html);
  87       };
  88
  89       javascriptLink.onclick = function() {
  90         Gallery.textarea.show("Javascript", demo.run.toString());
  91       };
  92
  93       if (css) {
  94         cssLink.onclick = function() {
  95           Gallery.textarea.show("CSS", css);
  96         };
  97       }
  98
  99       demo.run(Gallery.workareaChild);
 100       Gallery.runningDemo = demo;
 101     }; }(demo, id);
 102   }
 103
 104   Gallery.hashChange();
 105
 106   window.onhashchange = Gallery.setHash;("hashchange", Gallery.hashChange, false);
 107 };
 108
 109 var getCss = function(id) {
 110   for (var i = 0; i < document.styleSheets.length; i++) {
 111     var ss = document.styleSheets[i];
 112     if (ss.title == "gallery") {
 113       try {
 114         var rules = ss.rules || ss.cssRules;
 115         if (rules) {
 116           var arry = [];
 117           for (var j = 0; j < rules.length; j++) {
 118             var rule = rules[j];
 119             var cssText = rule.cssText;
 120             var key = "#workarea #" + id + " ";
 121             if (cssText.indexOf(key) == 0) {
 122               arry.push(cssText.substr(key.length));
 123             }
 124           }
 125           return arry.join("\n\n");
 126         }
 127       } catch(e) { // security error
 128         console.log(e);
 129       }
 130     }
 131   }
 132   return "not found";
 133 }
 134
 135 Gallery.register = function(id, demo) {
 136   if (Gallery.entries[id]) {
 137     throw id + " already registered";
 138   }
 139   Gallery.entries[id] = demo;
 140   Gallery.entryOrder.push(id);
 141 };
 142
 143 Gallery.hashChange = function(event) {
 144   if (location.hash) {
 145     if (location.hash.indexOf("#g/") == 0) {
 146       var id = location.hash.substring(3) + "-toc";
 147       var elem = document.getElementById(id);
 148       elem.onclick();
 149       return;
 150     }
 151   }
 152   Gallery.workareaChild.innerHTML = "<h3>Select a demo from the gallery on the left</h3>"
 153 };