Better gallery; separates out the HTML, Javascript and CSS. Although the CSS is missi...

[dygraphs.git] / gallery / gallery.js

var Gallery = {};

Gallery.entries = {};
Gallery.entryOrder = [];
Gallery.runningDemo = null;

/*
 * Shortcut for creating HTML associated with a parent.
 */
Gallery.create = function(type, parent, className) {
  var elem = document.createElement(type);
  parent.appendChild(elem);
  if (className) {
    elem.className = className;
  }
  return elem;
};

Gallery.start = function() {
  Gallery.toc = document.getElementById("toc");
  Gallery.workarea = document.getElementById("workarea");
  Gallery.subtitle = Gallery.create("div", Gallery.workarea);
  Gallery.subtitle.id = "subtitle";
  Gallery.workareaChild = Gallery.create("div", Gallery.workarea);
  Gallery.demotitle = document.getElementById("demotitle");
  Gallery.textarea = new TextArea();
  Gallery.textarea.cancel.style.display = "none";
  Gallery.textarea.width = 600;
  Gallery.textarea.height = 400;

  for (var idx in Gallery.entryOrder) {
    var id = Gallery.entryOrder[idx];
    var demo = Gallery.entries[id];

    var div = Gallery.create("div", Gallery.toc, "entry");
    div.id = id + "-toc";
    var innerDiv = Gallery.create("div", div, "");

    // Storing extra data in the demo object.
    demo.div = div;
    demo.innerDiv = innerDiv;

    innerDiv.textContent = demo.name;
    div.onclick = function(demo, id) { return function() {
      if (Gallery.runningDemo != null) {
        Gallery.runningDemo.innerDiv.className = "";
        if (Gallery.runningDemo.clean != null) {
          Gallery.runningDemo.clean(Gallery.workareaChild);
        }
      }
      Gallery.subtitle.innerHTML = "";

      Gallery.demotitle.textContent = demo.title ? demo.title : "";
      demo.innerDiv.className = "selected";

      var htmlLink = Gallery.create("a", Gallery.subtitle);
      htmlLink.textContent = "HTML";
      htmlLink.href = "#";

      Gallery.subtitle.appendChild(document.createTextNode(" "));

      var javascriptLink = Gallery.create("a", Gallery.subtitle);
      javascriptLink.textContent = "Javascript";
      javascriptLink.href = "#";

      Gallery.subtitle.appendChild(document.createTextNode(" "));

      var cssLink = Gallery.create("a", Gallery.subtitle);
      cssLink.textContent = "CSS";
      cssLink.href = "#";

      Gallery.workareaChild.id = id;
      location.hash = "g/" + id;

      Gallery.workareaChild.innerHTML='';
      if (demo.setup) {
        demo.setup(Gallery.workareaChild);
      }

      var html = Gallery.workareaChild.innerHTML;

      htmlLink.onclick = function() {
        Gallery.textarea.show("HTML", html);
      };

      javascriptLink.onclick = function() {
        Gallery.textarea.show("Javascript", demo.run.toString());
      };

      cssLink.onclick = function() {
        var css = getCss(demo.title);
        Gallery.textarea.show("CSS", css);
      };

      demo.run(Gallery.workareaChild);
      Gallery.runningDemo = demo;
    }; }(demo, id);
  }

  Gallery.hashChange();

  window.onhashchange = Gallery.setHash;("hashchange", Gallery.hashChange, false);
};

var getCss = function(section) {
  // Pretty presumptive of me to assume the first style sheet is the correct one.
  // TODO(konigsberg): find the right style sheet by searching.
  var ss = document.styleSheets[0];
  return ss.toString();
}

Gallery.register = function(id, demo) {
  if (Gallery.entries[id]) {
    throw id + " already registered";
  }
  Gallery.entries[id] = demo;
  Gallery.entryOrder.push(id);
};

Gallery.hashChange = function(event) {
  if (location.hash) {
    if (location.hash.indexOf("#g/") == 0) {
      var id = location.hash.substring(3) + "-toc";
      var elem = document.getElementById(id);
      elem.onclick();
      return;
    }
  }
  Gallery.workareaChild.innerHTML = "<h3>Select a demo from the gallery on the left</h3>"
};