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

diff --git a/common/textarea.js b/common/textarea.js
index d0e1c31..6580d3a 100644 (file)
--- a/common/textarea.js
+++ b/common/textarea.js
@@ -101,12 +101,27 @@ TextArea.prototype.show = function(title, content) {
   this.textarea.style.height = (-18 + sums([this.elem], [this.title, this.buttons], "offsetHeight")) + "px";
   this.textarea.style.width = (-16 + sums([this.elem], [ ], "offsetWidth")) + "px";
 
+  var textarea = this;
+
+  this.keyDownListener_ = function(event) {
+    console.log(event);
+    if(event.keyCode == 13) { // enter / return
+      textarea.hide();
+    }
+    if(event.keyCode == 27) { // esc
+      textarea.hide();
+    }
+  }
+
+  Dygraph.addEvent(document, "keydown", this.keyDownListener_);
   this.reposition();
   window.addEventListener('resize', this.reposition, false);
   document.documentElement.addEventListener('onscroll', this.reposition);
 }
 
 TextArea.prototype.hide = function() {
+  Dygraph.removeEvent(document, "keypress", this.keyDownListener_);
+  this.keyDownListener_ = null;
   this.elem.style.display = "none";
   this.background.style.display = "none";
   window.removeEventListener("resize", this.reposition);

diff --git a/gallery/gallery.js b/gallery/gallery.js
index 0c0034c..8e0aa71 100644 (file)
--- a/gallery/gallery.js
+++ b/gallery/gallery.js
@@ -24,6 +24,7 @@ Gallery.start = function() {
   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;
 
@@ -48,22 +49,49 @@ Gallery.start = function() {
         }
       }
       Gallery.subtitle.innerHTML = "";
-      var codeLink = Gallery.create("a", Gallery.subtitle);
-      codeLink.textContent = "code";
-      codeLink.href = "#";
+
       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;
-      codeLink.onclick = function() {
-        var javascript = demo.run.toString();
-        Gallery.textarea.show("Code", "HTML\n\n" + html + "\n\njavascript\n\n" + javascript);
+
+      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);
@@ -74,6 +102,13 @@ Gallery.start = function() {
   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";