Add sharing links in header

assets/javascript/app.js

@@ -2,11 +2,13 @@ require([
     "jQuery",
     "utils/storage",
     "utils/analytic",
+    "utils/sharing",
+
     "core/state",
     "core/exercise",
     "core/progress",
     "core/sidebar"
-], function($, storage, analytic, _state, exercise, progress, sidebar){
+], function($, storage, analytic, sharing, _state, exercise, progress, sidebar){
     $(document).ready(function() {
         var state = _state();
         var $book = state.$book;
@@ -30,6 +32,9 @@ require([
         // Bind exercise
         exercise.init();
 
+        // Bind sharing button
+        sharing.init();
+
         // Show progress
         progress.show();
     });

assets/javascript/utils/sharing.js

@@ -0,0 +1,32 @@
+define([
+    "jQuery"
+], function($) {
+    var url = location.href;
+    var title = $("title").text();
+
+    var types = {
+        "twitter": function($el) {
+            window.open("http://twitter.com/home?status="+encodeURIComponent(title+" "+url))
+        },
+        "facebook": function($el) {
+            window.open("http://www.facebook.com/sharer/sharer.php?s=100&p[url]="+encodeURIComponent(url))
+        },
+        "google-plus": function($el) {
+            window.open("https://plus.google.com/share?url="+encodeURIComponent(url))
+        }
+    };
+
+
+    // Bind all sharing button
+    var init = function() {
+        $("a[data-sharing]").click(function(e) {
+            var type = $(this).data("sharing");
+
+            types[type]($(this));
+        })
+    };
+
+    return {
+        init: init
+    };
+});

templates/includes/book/header.html

@@ -1,9 +1,13 @@
 <div class="book-header">
     <!-- Actions Left -->
     <a href="https://github.com/{{ githubId }}" target="_blank" class="btn pull-left"><i class="fa fa-github-alt"></i></a>
-    <a href="#" class="btn pull-left toggle-summary"><i class="fa fa-align-justify"></i> Summary</a>
+    <a href="#" class="btn pull-left toggle-summary"><i class="fa fa-align-justify"></i></a>
 
     <!-- Actions Right -->
+    <a href="#" target="_blank" class="btn pull-right" data-sharing="google-plus"><i class="fa fa-google-plus"></i></a>
+    <a href="#" target="_blank" class="btn pull-right" data-sharing="facebook"><i class="fa fa-facebook"></i></a>
+    <a href="#" target="_blank" class="btn pull-right" data-sharing="twitter"><i class="fa fa-twitter"></i></a>
+
     <a href="https://github.com/{{ githubId }}/stargazers" target="_blank" class="btn pull-right count-star"><i class="fa fa-star-o"></i> Star (<span>-</span>)</a>
     <a href="https://github.com/{{ githubId }}/watchers" target="_blank" class="btn pull-right count-watch"><i class="fa fa-eye"></i> Watch (<span>-</span>)</a>