From a0e87b3810630f0ae3d3b6942effe77d652a2e4a Mon Sep 17 00:00:00 2001
From: Robert Konigsberg <konigsberg@google.com>
Date: Mon, 16 Jan 2012 17:01:26 -0500
Subject: [PATCH] Add code link. It should get cleaned up.

---
 gallery/README      |  2 --
 gallery/gallery.css |  2 ++
 gallery/gallery.js  | 16 ++++++++++++++--
 gallery/index.html  |  7 ++++---
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/gallery/README b/gallery/README
index 573845b..6c8d357 100644
--- a/gallery/README
+++ b/gallery/README
@@ -26,9 +26,7 @@ Tips on adding entries to the gallery
 TODOs:
   * Remove the awful tables in interaction.html (that I wrote)
   * Move all style to css
-  * Create links to get code
   * Consider moving HTML to HTML files that are read via XMLHTTP
   * Add margin-left: 30px to #workarea, and then make #workarea h2 { margin-left: -30px}
-  * Replace <input type='button'> with <button>
   * Standard width. No need for very wide graphs.
   * Remove runtime warnings.
\ No newline at end of file
diff --git a/gallery/gallery.css b/gallery/gallery.css
index ca05d43..92d240c 100644
--- a/gallery/gallery.css
+++ b/gallery/gallery.css
@@ -1,3 +1,5 @@
+@import url("../common/textarea.css");
+
 body {
   font-family: Helvetica Neue, Arial, Helvetica, sans-serif;
   font-size: 90%;
diff --git a/gallery/gallery.js b/gallery/gallery.js
index 08299aa..5a907bb 100644
--- a/gallery/gallery.js
+++ b/gallery/gallery.js
@@ -17,11 +17,14 @@ 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.workareaChild = Gallery.create("div", Gallery.workarea);
   Gallery.workarea.style.visibility = "hidden";
+  Gallery.title = document.getElementById("title");
+  Gallery.textarea = new TextArea();
+
   for (var idx in Gallery.entryOrder) {
     var id = Gallery.entryOrder[idx];
     var demo = Gallery.entries[id];
@@ -42,8 +45,12 @@ Gallery.start = function() {
           Gallery.runningDemo.clean(Gallery.workareaChild);
         }
       }
+      Gallery.subtitle.innerHTML = "";
+      var codeLink = Gallery.create("a", Gallery.subtitle);
+      codeLink.textContent = "code";
+      codeLink.href = "#";
       Gallery.workarea.style.visibility = "visible";
-      document.getElementById("title").textContent = demo.title ? demo.title : "";
+      Gallery.title.textContent = demo.title ? demo.title : "";
       demo.innerDiv.className = "selected";
       Gallery.workareaChild.id = id;
       location.hash = "g/" + id;
@@ -51,6 +58,11 @@ Gallery.start = function() {
       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);
+      };
       demo.run(Gallery.workareaChild);
       Gallery.runningDemo = demo;
     }; }(demo, id);
diff --git a/gallery/index.html b/gallery/index.html
index 5b304c2..b284d50 100644
--- a/gallery/index.html
+++ b/gallery/index.html
@@ -8,10 +8,11 @@
     <![endif]-->
 
     <script src="../dygraph-dev.js"></script>
+    <script src="../common/textarea.js"></script>
     <script src="gallery.js"></script>
     <script src="data.js"></script>
     <script src="interaction-api.js"></script>
-    <script src='http://www.google.com/jsapi'></script> <!-- required in some cases -->
+    <!-- script src='http://www.google.com/jsapi'></script> -->
 
     <!-- gallery entries. Can these be auto-loaded? -->
     <script src="annotation.js"></script>
@@ -31,7 +32,7 @@
     <script src="interaction.js"></script>
     <script src="linear-regression.js"></script>
 
-    <!-- These might not remain in the gallery -->
+    <!-- These might not remain in the gallery
     <script src="dygraph-simple.js"></script>
     <script src="demo.js"></script>
     <script src="border.js"></script>
@@ -45,7 +46,7 @@
     <script src="negative.js"></script>
     <script src="annotation-gviz.js"></script>
     <script src="annotation-native.js"></script>
-
+    -->
     <link rel="stylesheet" type="text/css" href="gallery.css" />
   </head>
   <body>
-- 
2.7.4