X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=gallery%2Fgallery.js;h=e854a7a4ac0bd0b1b13abe2ce7b7cdb234060ad1;hb=30b2bf7dd0177e04fa90ed82a27045cf967379dd;hp=14cd34157a21d75ed5fc9dae10f0bf4b2dd2ff09;hpb=605b6119bcc80db4ea100d66df3483425dcd32af;p=dygraphs.git

diff --git a/gallery/gallery.js b/gallery/gallery.js
index 14cd341..e854a7a 100644
--- a/gallery/gallery.js
+++ b/gallery/gallery.js
@@ -20,10 +20,13 @@ 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.workarea.style.visibility = "hidden";
-  Gallery.title = document.getElementById("title");
+  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];
@@ -46,23 +49,53 @@ Gallery.start = function() {
         }
       }
       Gallery.subtitle.innerHTML = "";
-      var codeLink = Gallery.create("a", Gallery.subtitle);
-      codeLink.textContent = "code";
-      codeLink.href = "#";
-      Gallery.workarea.style.visibility = "visible";
-      Gallery.title.textContent = demo.title ? demo.title : "";
+
+      Gallery.demotitle.textContent = demo.title ? demo.title : "";
       demo.innerDiv.className = "selected";
+
+      var codeSpan = Gallery.create("span", Gallery.subtitle);
+      codeSpan.id = "code";
+
+      var htmlLink = Gallery.create("a", codeSpan);
+      htmlLink.textContent = "HTML";
+
+      codeSpan.appendChild(document.createTextNode(" "));
+
+      var javascriptLink = Gallery.create("a", codeSpan);
+      javascriptLink.textContent = "Javascript";
+
+      codeSpan.appendChild(document.createTextNode(" "));
+
+      var css = getCss(id);
+      if (css) {
+        var cssLink = Gallery.create("a", codeSpan);
+        cssLink.textContent = "CSS";
+      }
+
       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());
       };
+
+      if (css) {
+        cssLink.onclick = function() {
+          Gallery.textarea.show("CSS", css);
+        };
+      }
+
       demo.run(Gallery.workareaChild);
       Gallery.runningDemo = demo;
     }; }(demo, id);
@@ -73,6 +106,32 @@ Gallery.start = function() {
   window.onhashchange = Gallery.setHash;("hashchange", Gallery.hashChange, false);
 };
 
+var getCss = function(id) {
+  for (var i = 0; i < document.styleSheets.length; i++) {
+    var ss = document.styleSheets[i];
+    if (ss.title == "gallery") {
+      try {
+        var rules = ss.rules || ss.cssRules;
+        if (rules) {
+          var arry = [];
+          for (var j = 0; j < rules.length; j++) {
+            var rule = rules[j];
+            var cssText = rule.cssText;
+            var key = "#workarea #" + id + " ";
+            if (cssText.indexOf(key) == 0) {
+              arry.push(cssText.substr(key.length));
+            }
+          }
+          return arry.join("\n\n");
+        }
+      } catch(e) { // security error
+        console.log(e);
+      }
+    }
+  }
+  return "not found";
+}
+
 Gallery.register = function(id, demo) {
   if (Gallery.entries[id]) {
     throw id + " already registered";
@@ -87,6 +146,8 @@ Gallery.hashChange = function(event) {
       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>"
 };