From 1fd6b38ec3158ce414bc737b843cbac305495fe1 Mon Sep 17 00:00:00 2001
From: Michiel Kamermans <pomax@nihongoresources.com>
Date: Wed, 9 May 2012 15:07:32 -0400
Subject: [PATCH 1/3] filled in the share button dialog

---
 css/modals.css    | 13 ++++++--
 index.html        | 48 +++++++++++++++++----------
 js/lateSocials.js | 83 +++++++++++++++++++++++++++++++++++++++++++++++
 js/main.js        |  5 ++-
 js/publish.js     |  5 ++-
 js/share.js       | 17 ++++++++--
 6 files changed, 147 insertions(+), 24 deletions(-)
 create mode 100755 js/lateSocials.js

diff --git a/css/modals.css b/css/modals.css
index f8cbc1d..0bc87f9 100755
--- a/css/modals.css
+++ b/css/modals.css
@@ -68,8 +68,10 @@
 }
 
 .content-box {
-  width: 300px;
+  width: 32s0px;
   min-height: 100px;
+  max-height: 200px;
+  overflow: auto;
   border: 20px solid #79a327;
   margin: auto;
   font-size: 80%;
@@ -99,7 +101,7 @@
 #modal-source-code {
   width: 100%;
   min-height: 100px;
-  font-size: 80%;
+  font-size: 90%;
 }
 
 #share-buttons a {
@@ -163,3 +165,10 @@
 .modal-selection.selected {
   display: block;
 }
+
+/* facebook needs a width override, because it reserves way too much
+   horizontal space by default (450px) that interferes with the modal. */
+#share-dialog div.fb-like span,
+#share-dialog div.fb-like span iframe {
+  width: 280px !important;
+}
diff --git a/index.html b/index.html
index 8091d58..3f8ac6c 100755
--- a/index.html
+++ b/index.html
@@ -30,8 +30,8 @@
           <!-- TODO: Until we actually implement the sharing widget,
                we're renaming 'Save' to 'Share' and not displaying the
                real 'Share' button. -->
-          <a class="button blue" id="save_button">Share</a>
-          <a class="button" id="share_button" style="display: none">Share</a>
+          <a class="button blue" id="save_button">Save</a>
+          <a class="button" id="share_button">Share</a>
       </div>
     </header>
 
@@ -83,44 +83,57 @@
 
         <div class="button-bar">
           <ul id="share-buttons">
-            <li><a data-id="socialshare-widget" class="twitter">Share with Twitter</a></li>
-            <li><a data-id="socialshare-widget" class="facebook">Share with Facebook</a></li>
-            <li><a data-id="socialshare-widget" class="google">Share with Google+</a></li>
+            <li><a data-id="twitter-widget" class="twitter">Share with Twitter</a></li>
+            <li><a data-id="facebook-widget" class="facebook">Share with Facebook</a></li>
+            <li><a data-id="google-widget" class="google">Share with Google+</a></li>
             <li><a data-id="link-to-this" class="link">Embed as Link</a></li>
             <li><a data-id="download-code" class="download">Download Code</a></li>
             <li><a data-id="mail-this" class="email">Email to a Friend</a></li>
           </ul>
         </div>
         
-        <div class="modal-selections">
+        <div class="modal-selections" id="share-container">
           <!-- twitter, facebook and goolge+ use socialshare -->
-          <div class="modal-selection socialshare-widget">
-            share your page on social media
-            <div class="content-box">
-              click here to pick a social medium<br>
-              (SocialShare code goes here)
+          <div class="modal-selection facebook-widget">
+            Share your work on FaceBook!
+            <div class="content-box facebook">
+              <a href="">Click here for the facebook like button</a>
             </div>
           </div>
-
+          <div class="modal-selection google-widget">
+            Share your work through Google!
+            <div class="content-box google">
+              <a href="">Click here for the Google+ button</a>
+            </div>
+          </div>
+          <div class="modal-selection twitter-widget">
+            Share your work via Twitter!
+            <div class="content-box twitter">
+              <a href="">Click here for the tweet button</a>
+            </div>
+          </div>
+          
           <div class="modal-selection link-to-this">
             get the link for your page
-            <div class="content-box">
-              your link is: (link goes here)
+            <div class="content-box" id="quick-save">
+              <div class="done">
+                your link is: <a href="" class="view">here</a>
+              </div>
             </div>
           </div>
 
           <div class="modal-selection download-code">
             get the source code for your page:
             <div class="content-box">
-              <textarea id="modal-source-code" readonly>
-              </textarea>
+              <pre id="modal-source-code" readonly>
+              </pre>
             </div>
           </div>
 
           <div class="modal-selection mail-this">
             mail this to a friend
             <div class="content-box">
-              (mailto link goes here)
+              <a href="" class="mailto">Click here to let a friend know about your remix!</a>
             </div>
           </div>
 
@@ -199,5 +212,6 @@ <h1>Let's remix the web! It's easy!</h1>
   <script src="js/editor.js"></script>
   <script src="js/publish.js"></script>
   <script src="js/share.js"></script>
+  <script src="js/lateSocials.js"></script>
   <script src="js/main.js"></script>
 </html>
\ No newline at end of file
diff --git a/js/lateSocials.js b/js/lateSocials.js
new file mode 100755
index 0000000..052ce4e
--- /dev/null
+++ b/js/lateSocials.js
@@ -0,0 +1,83 @@
+/**
+ * A tiny library for load-loading social media share buttons.
+ * If we don't do this, social media will track users even before
+ * they click the like button and we don't like that kind of
+ * monitoring behaviour.
+ */
+(function($){
+    /**
+     * The various social media all have the same API.
+     */
+    var socialMedia = {
+
+        facebook: {
+            class: "facebook",
+            id: "facebook-jssdk",
+            src: "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=1",
+            html: "<div id='fb-root'></div><div class='fb-like' data-send='false' data-show-faces='false' data-font='tahoma'></div>" },
+
+        google: {
+            class: "google",
+            id: "google-plus",
+            src: "https://apis.google.com/js/plusone.js",
+            html: "<g:plusone annotation='none'></g:plusone>" },
+
+        twitter: {
+            class: "twitter",
+            id: "twitter-wjs",
+            src: "http://platform.twitter.com/widgets.js",
+            html: "<a href='https://twitter.com/share' class='twitter-share-button' data-via='Mozilla' data-count='none'>Tweet</a>" }
+
+    }
+    
+    /**
+     * Hot-load a social medium's button by first
+     * injecting the necessary HTML for the medium
+     * to perform its own iframe replacements, and
+     * then late-loading the script required for
+     * the medium to load up its functionality.
+     */
+    var hotLoad = function(element, socialMedium) {
+        element.innerHTML = socialMedium.html;
+        (function(document, id, src) {
+            var script = document.createElement("script");
+            script.type = "text/javascript";
+            script.id = id;
+            script.src = src;
+            document.head.appendChild(script);
+        }(document, socialMedium.id, socialMedium.src));
+    }
+    
+    /**
+     * This is a separate function because the
+     * for/in loop is a weird JavaScript thing;
+     * it does late variable binding, somehow,
+     * so dynamic functions that involve "medium"
+     * end up all being evaluated for the last
+     * object in the socialMedia object. Effectively
+     * it makes every button a twitter button.
+     */
+    var setupHotLoading = function($, parent, medium) {
+        if (medium.src) {
+            $("." + medium.class, parent).click(function() {
+                hotLoad(this, medium);
+                // prevent default click behaviour
+                return false;
+            });
+        }
+    }    
+ 
+    /**
+     * Set up the onclick bindings. Content will
+     * be injected into elements inside a master
+     * container with id "share-container", and
+     * content replacements are based on each
+     * social medium's "class" property.
+     */
+    var parent = $("#share-container");
+    for (medium in socialMedia) {
+        // call an actual function to force
+        // immediate evaluation of {medium}
+        setupHotLoading($, parent, socialMedia[medium]);
+    }
+}(jQuery));
\ No newline at end of file
diff --git a/js/main.js b/js/main.js
index 366fe60..fd244cb 100755
--- a/js/main.js
+++ b/js/main.js
@@ -47,7 +47,10 @@ $(window).load(function() {
       undo: $("#undo_button"),
       redo: $("#redo_button")
     });
-    var shareUI = ShareUI($('#share-dialog'));
+    var shareUI = ShareUI({
+       codeMirror: codeMirror,
+       dialog: $('#share-dialog')
+    });
     var pageToLoad = getQueryVariable('p') || "default";
     var parachute = Parachute(window, codeMirror, pageToLoad);
 
diff --git a/js/publish.js b/js/publish.js
index 60ef2ea..f82075c 100755
--- a/js/publish.js
+++ b/js/publish.js
@@ -22,7 +22,7 @@ function PublishUI(options) {
         cb();
       });
     },
-    saveCode: function() {
+    saveCode: function(callback) {
       dlg.show();
       $(".done", dlg).hide();
       publisher.saveCode(codeMirror.getValue(), currURL, function(err, info) {
@@ -36,6 +36,9 @@ function PublishUI(options) {
           $(".done", dlg).fadeIn();
           $('a.view', dlg).attr('href', viewURL).text(viewURL);
           $('a.remix', dlg).attr('href', remixURL).text(remixURL);
+          if (callback) {
+            callback(viewURL, remixURL);
+          }
         }
       });
     }
diff --git a/js/share.js b/js/share.js
index fb73cc1..3584db3 100755
--- a/js/share.js
+++ b/js/share.js
@@ -1,8 +1,19 @@
-function ShareUI(dialog) {
+function ShareUI(options) {
+  var codeMirror = options.codeMirror;
+  var dialog = options.dialog;
+
   var self = {
     shareCode: function() {
       dialog.show();
       select.call(dialog.find('a.link')[0]);
+      $("#modal-source-code").text(codeMirror.getValue());
+      PublishUI({
+        codeMirror: codeMirror,
+        publisher: Publisher("http://wpm.toolness.org"),
+        dialog: $("#quick-save")
+      }).saveCode(function(viewURL,remixURL) {
+        $("#share-container a.mailto").attr('href', 'mailto:?subject=Check out the page I just remixed!?body=You can check it out here: '+viewURL);
+      });
     }
   };
 
@@ -13,7 +24,7 @@ function ShareUI(dialog) {
     $(this).addClass("selected");
     content.addClass("selected");
   }
-  
+
   // clicking the "close" button
   dialog.find('.close-icon').click(function(){ dialog.hide(); });
 
@@ -25,4 +36,4 @@ function ShareUI(dialog) {
   });
   
   return self;
-}
+}
\ No newline at end of file

From d65bb6953f26923f13e359f0b1a1efba726db716 Mon Sep 17 00:00:00 2001
From: Michiel Kamermans <pomax@nihongoresources.com>
Date: Wed, 9 May 2012 15:30:49 -0400
Subject: [PATCH 2/3] updates to lateSocials so that the social media buttons
 get the saved URL, not the 'current' URL

---
 js/lateSocials.js | 27 +++++++++++++++------------
 js/main.js        |  4 ++++
 2 files changed, 19 insertions(+), 12 deletions(-)

diff --git a/js/lateSocials.js b/js/lateSocials.js
index 052ce4e..e88c7aa 100755
--- a/js/lateSocials.js
+++ b/js/lateSocials.js
@@ -4,7 +4,11 @@
  * they click the like button and we don't like that kind of
  * monitoring behaviour.
  */
-(function($){
+var SocialMedia = function(options) {
+    var $ = options.jQuery;
+    var targetSelector = options.selector;
+    var urlPlaceHolder = "__URL__PLACE__HOLDER__";
+ 
     /**
      * The various social media all have the same API.
      */
@@ -14,20 +18,19 @@
             class: "facebook",
             id: "facebook-jssdk",
             src: "http://connect.facebook.net/en_US/all.js#xfbml=1&appId=1",
-            html: "<div id='fb-root'></div><div class='fb-like' data-send='false' data-show-faces='false' data-font='tahoma'></div>" },
+            html: "<div id='fb-root'></div><div class='fb-like' data-href='"+urlPlaceHolder+"' data-send='false' data-show-faces='false' data-font='tahoma'></div>" },
 
         google: {
             class: "google",
             id: "google-plus",
             src: "https://apis.google.com/js/plusone.js",
-            html: "<g:plusone annotation='none'></g:plusone>" },
+            html: "<g:plusone annotation='none' href='"+urlPlaceHolder+"'></g:plusone>" },
 
         twitter: {
             class: "twitter",
             id: "twitter-wjs",
             src: "http://platform.twitter.com/widgets.js",
-            html: "<a href='https://twitter.com/share' class='twitter-share-button' data-via='Mozilla' data-count='none'>Tweet</a>" }
-
+            html: "<a href='https://twitter.com/share'class='twitter-share-button' data-url='"+urlPlaceHolder+"' data-via='Mozilla' data-count='none'>Tweet</a>" }
     }
     
     /**
@@ -37,9 +40,9 @@
      * then late-loading the script required for
      * the medium to load up its functionality.
      */
-    var hotLoad = function(element, socialMedium) {
-        element.innerHTML = socialMedium.html;
-        (function(document, id, src) {
+    var hotLoad = function($, element, socialMedium, targetSelector) {
+        element.innerHTML = socialMedium.html.replace(urlPlaceHolder, $(targetSelector).text());
+        (function(document, id, src, url) {
             var script = document.createElement("script");
             script.type = "text/javascript";
             script.id = id;
@@ -57,10 +60,10 @@
      * object in the socialMedia object. Effectively
      * it makes every button a twitter button.
      */
-    var setupHotLoading = function($, parent, medium) {
+    var setupHotLoading = function($, targetSelector, parent, medium) {
         if (medium.src) {
             $("." + medium.class, parent).click(function() {
-                hotLoad(this, medium);
+                hotLoad($, this, medium, targetSelector);
                 // prevent default click behaviour
                 return false;
             });
@@ -78,6 +81,6 @@
     for (medium in socialMedia) {
         // call an actual function to force
         // immediate evaluation of {medium}
-        setupHotLoading($, parent, socialMedia[medium]);
+        setupHotLoading($, targetSelector, parent, socialMedia[medium]);
     }
-}(jQuery));
\ No newline at end of file
+};
diff --git a/js/main.js b/js/main.js
index fd244cb..291a69c 100755
--- a/js/main.js
+++ b/js/main.js
@@ -51,6 +51,10 @@ $(window).load(function() {
        codeMirror: codeMirror,
        dialog: $('#share-dialog')
     });
+    var socialMedia = SocialMedia({
+        jQuery: jQuery,
+        selector: "#share-container a.view"
+    });
     var pageToLoad = getQueryVariable('p') || "default";
     var parachute = Parachute(window, codeMirror, pageToLoad);
 

From 3594360da6992cfaf5d4fe89cb8953fcfa60e83a Mon Sep 17 00:00:00 2001
From: Michiel Kamermans <pomax@nihongoresources.com>
Date: Wed, 9 May 2012 15:32:50 -0400
Subject: [PATCH 3/3] removed spacing before doctype

---
 index.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 3f8ac6c..8a739fd 100755
--- a/index.html
+++ b/index.html
@@ -163,8 +163,7 @@
   </div>
 </script>
 
-<script type="text/html" id="initial-html">
-<!DOCTYPE html>
+<script type="text/html" id="initial-html"><!DOCTYPE html>
 <html>
   <head>
     <style>