Merge pull request mozilla#9 from Pomax/gh-pages

re-enabled the share button

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;
+}

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>
 
@@ -150,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>
@@ -199,5 +211,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>

js/lateSocials.js

@@ -0,0 +1,86 @@
+/**
+ * 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.
+ */
+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.
+     */
+    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-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' 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-url='"+urlPlaceHolder+"' 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, 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;
+            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($, targetSelector, parent, medium) {
+        if (medium.src) {
+            $("." + medium.class, parent).click(function() {
+                hotLoad($, this, medium, targetSelector);
+                // 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($, targetSelector, parent, socialMedia[medium]);
+    }
+};

js/main.js

@@ -47,7 +47,14 @@ $(window).load(function() {
       undo: $("#undo_button"),
       redo: $("#redo_button")
     });
-    var shareUI = ShareUI($('#share-dialog'));
+    var shareUI = ShareUI({
+       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);
 

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);
+          }
         }
       });
     }

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;
-}
+}