X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=gallery%2Fgallery.js;h=f8b4ceea1ae284ab931b62beafb2d0dcd04adc8c;hb=7c45116b8b3d8a3b5cceff1e1fb40e0749571df5;hp=10128ff480510b8e0519e4ae00cc6b15bea20321;hpb=72c8bf9993215da78476fa918af09e12b297a34c;p=dygraphs.git

diff --git a/gallery/gallery.js b/gallery/gallery.js
index 10128ff..f8b4cee 100644
--- a/gallery/gallery.js
+++ b/gallery/gallery.js
@@ -1,3 +1,5 @@
+/*jshint loopfunc:true */
+/*global Dygraph,$,TextArea,jQuery */
 var Gallery = {};
 
 Gallery.entries = {};
@@ -17,11 +19,17 @@ Gallery.create = function(type, parent, className) {
 };
 
 Gallery.start = function() {
-  google.load('visualization', '1', {'packages':['annotatedtimeline']});
   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.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];
@@ -36,21 +44,104 @@ Gallery.start = function() {
 
     innerDiv.textContent = demo.name;
     div.onclick = function(demo, id) { return function() {
-      if (Gallery.runningDemo != null) {
+      if (Gallery.runningDemo !== null) {
         Gallery.runningDemo.innerDiv.className = "";
-        if (Gallery.runningDemo.clean != null) {
+        if (Gallery.runningDemo.clean) {
           Gallery.runningDemo.clean(Gallery.workareaChild);
         }
       }
-      Gallery.workarea.style.visibility = "visible";
-      document.getElementById("title").textContent = demo.title ? demo.title : "";
-      demo.innerDiv.className = "selected";
+      Gallery.subtitle.innerHTML = "";
+
       Gallery.workareaChild.id = id;
-      location.hash = id;
+      location.hash = "g/" + id;
+
       Gallery.workareaChild.innerHTML='';
       if (demo.setup) {
         demo.setup(Gallery.workareaChild);
       }
+
+      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";
+
+      Gallery.create("span", codeSpan).textContent = " | ";
+
+      var javascriptLink = Gallery.create("a", codeSpan);
+      javascriptLink.textContent = "Javascript";
+
+      var css = getCss(id);
+      var cssLink;
+      if (css) {
+        Gallery.create("span", codeSpan).textContent = " | ";
+        cssLink = Gallery.create("a", codeSpan);
+        cssLink.textContent = "CSS";
+      }
+
+      var jsFiddleForm = Gallery.create("form", codeSpan);
+      var jsfs = $(jsFiddleForm);
+      jsFiddleForm.method = "post";
+      jsFiddleForm.action = "http://jsfiddle.net/api/post/jquery/1.4/";
+
+      jsfs.html("<input type='submit' value='Edit in jsFiddle'/>\n" +
+      "<span style='display:none'>\n" +
+      "<textarea name='resources'>http://dygraphs.com/dygraph-combined.js</textarea>\n" +
+      "<input type='text' name='dtd' value='html 5'/></span>\n");
+
+      var javascript = demo.run.toString();
+      var html = Gallery.workareaChild.innerHTML;
+
+      // tweak for use in jsfiddle
+      javascript = " $(document).ready(" + javascript + "\n);";
+      jQuery('<textarea/>', { name: 'html' })
+        .val(html)
+        .hide()
+        .appendTo(jsfs);
+
+      jQuery('<textarea/>', { name: 'js' })
+        .val(javascript)
+        .hide()
+        .appendTo(jsfs);
+
+      if (css) {
+        jQuery('<textarea/>', { name: 'css' })
+          .val(css)
+          .hide()
+          .appendTo(jsfs);
+      }
+      jQuery('<input/>', {
+        type: 'text',
+        name: 'title',
+        value: 'title tbd'
+      })
+        .hide()
+        .appendTo(jsfs);
+      jQuery('<input/>', {
+        type: 'text',
+        name: 'description',
+        value: 'desc tbd'
+      })
+        .hide()
+        .appendTo(jsfs);
+
+      htmlLink.onclick = function() {
+        Gallery.textarea.show("HTML", html);
+      };
+
+      javascriptLink.onclick = function() {
+        Gallery.textarea.show("Javascript", javascript);
+      };
+
+      if (css) {
+        cssLink.onclick = function() {
+          Gallery.textarea.show("CSS", css);
+        };
+      }
+
       demo.run(Gallery.workareaChild);
       Gallery.runningDemo = demo;
     }; }(demo, id);
@@ -58,7 +149,33 @@ Gallery.start = function() {
 
   Gallery.hashChange();
 
-  window.onhashchange = Gallery.setHash;("hashchange", Gallery.hashChange, false);
+  window.onhashchange = Gallery.setHash;
+};
+
+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) {
@@ -71,8 +188,12 @@ Gallery.register = function(id, demo) {
 
 Gallery.hashChange = function(event) {
   if (location.hash) {
-    var id = location.hash.substring(1) + "-toc";
-    var elem = document.getElementById(id);
-    elem.onclick();
+    if (location.hash.indexOf("#g/") === 0) {
+      var id = location.hash.substring(3) + "-toc";
+      var elem = document.getElementById(id);
+      elem.onclick();
+      return;
+    }
   }
-};
\ No newline at end of file
+  Gallery.workareaChild.innerHTML = "<h3>Select a demo from the gallery on the left</h3>";
+};