Merge pull request #88 from GitbookIO/feature/clarity

Feature/clarity

8 files changed, 167 insertions, 38 deletions

diff --git a/theme/javascript/core/exercise.js b/theme/javascript/core/exercise.js
index 5219546..e24ae0a 100644..100755
--- a/theme/javascript/core/exercise.js
+++ b/theme/javascript/core/exercise.js
@@ -19,7 +19,7 @@ define([
         $exercise.find(".action-submit").click(function(e) {
             e.preventDefault();
 
-            analytic.track("exercise.submit");
+            analytic.track("exercise.submit", {type: "code"});
 
             execute("javascript", editor.getValue(), codeValidation, codeContext, function(err, result) {
                 $exercise.toggleClass("return-error", err != null);
diff --git a/theme/javascript/core/keyboard.js b/theme/javascript/core/keyboard.js
index 5bbdcf2..5bbdcf2 100644..100755
--- a/theme/javascript/core/keyboard.js
+++ b/theme/javascript/core/keyboard.js
diff --git a/theme/javascript/core/navigation.js b/theme/javascript/core/navigation.js
index bb3547c..2a08dab 100644..100755
--- a/theme/javascript/core/navigation.js
+++ b/theme/javascript/core/navigation.js
@@ -1,16 +1,137 @@
 define([
-    "jQuery"
-], function($) {
+    "jQuery",
+    "core/state",
+    "core/progress",
+    "core/exercise",
+    "core/quiz"
+], function($, state, progress, exercises, quiz) {
+    var prev, next;
+    var githubCountStars, githubCountWatch;
+
+    var updateHistory = function(url, title) {
+        history.pushState({ path: url }, title, url);
+    };
+
+    var handleNavigation = function(url, push) {
+        if (typeof history.pushState === "undefined") {
+            // Refresh the page to the new URL if pushState not supported
+            location.href = url;
+            return
+        }
+
+        return $.get(url)
+        .done(function (html) {
+            html = html.replace( /<(\/?)(html|head|body)([^>]*)>/ig, function(a,b,c,d){
+                return '<' + b + 'div' + ( b ? '' : ' data-element="' + c + '"' ) + d + '>';
+            });
+
+            var $page = $(html);
+            var $pageHead = $page.find("[data-element=head]");
+
+            // Merge heads
+            var headContent = $pageHead.html()
+
+            $("head style").each(function() {
+                headContent = headContent + this.outerHTML
+            });
+            $("head").html(headContent);
+
+            // Update header, body and summary
+            $('.book-header').html($page.find('.book-header').html());
+            $('.book-body').html($page.find('.book-body').html());
+            $('.book-summary').html($page.find('.book-summary').html());
+
+            if (push) updateHistory(url, null);
+            preparePage();
+        })
+        .fail(function () {
+            location.href = url;
+        });
+    };
+
+    var updateGitHubCounts = function() {
+        $(".book-header .count-star span").text(githubCountStars);
+        $(".book-header .count-watch span").text(githubCountWatch);
+    }
+
+    var preparePage = function() {
+        // Bind exercises/quiz
+        exercises.init();
+        quiz.init();
+
+        // Show progress
+        progress.show();
+
+        // Reset scroll
+        $(".book-body").scrollTop(0);
+
+        // Focus on content
+        $(".book-body").focus();
+
+        // Update GitHub count
+        if (state.githubId) {
+            if (githubCountStars) {
+                updateGitHubCounts();
+            } else {
+                $.getJSON("https://api.github.com/repos/"+state.githubId)
+                .done(function(repo) {
+                    githubCountStars = repo.stargazers_count;
+                    githubCountWatch = repo.subscribers_count;
+                    updateGitHubCounts();
+                });
+            }
+        }
+    };
+
+    var handlePagination = function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+
+        var url = $(this).attr('href');
+        if (url) handleNavigation(url, true);
+    };
+
     var goNext = function() {
-        var url = $("link[rel='next']").attr("href");
-        if (url) location.href = url;
+        var url = $(".navigation-next").attr("href");
+        if (url) handleNavigation(url, true);
     };
+
     var goPrev = function() {
-        var url = $("link[rel='prev']").attr("href");
-        if (url) location.href = url;
+        var url = $(".navigation-prev").attr("href");
+        if (url) handleNavigation(url, true);
+    };
+
+    
+
+    var init = function() {
+        // Prevent cache so that using the back button works
+        // See: http://stackoverflow.com/a/15805399/983070
+        $.ajaxSetup({
+            cache: false
+        });
+
+        // Recreate first page when the page loads.
+        history.replaceState({ path: window.location.href }, '');
+
+        // Back Button Hijacking :(
+        window.onpopstate = function (event) {
+            if (event.state === null) {
+                return;
+            }
+
+            return handleNavigation(event.state.path, false);
+        };
+
+        $(document).on('click', ".navigation-prev", handlePagination);
+        $(document).on('click', ".navigation-next", handlePagination);
+        $(document).on('click', ".summary [data-path] a", handlePagination);
+
+        // Prepare current page
+        preparePage();
     };
 
     return {
+        init: init,
         goNext: goNext,
         goPrev: goPrev
     };
diff --git a/theme/javascript/core/progress.js b/theme/javascript/core/progress.js
index d074cae..a409a11 100644..100755
--- a/theme/javascript/core/progress.js
+++ b/theme/javascript/core/progress.js
@@ -10,15 +10,16 @@ define([
     };
 
     // Return all levels
-    var getLevels = function() {
+    var getLevels = function () {
         var levels = $(".book-summary li[data-level]");
+
         return _.map(levels, function(level) {
             return $(level).data("level").toString();
         });
     };
 
     // Return a map chapter -> number (timestamp)
-    var getProgress = function() {
+    var getProgress = function () {
         // Current level
         var progress = storage.get("progress", {});
 
@@ -33,27 +34,33 @@ define([
     };
 
     // Change value of progress for a level
-    var markProgress = function(level, state) {
-        if (state == null) state = true;
-
+    var markProgress = function (level, state) {
         var progress = getProgress();
-        progress[level] = state? Date.now() : 0;
+
+        if (state == null) {
+            state = true;
+        }
+
+        progress[level] = state
+            ? Date.now()
+            : 0;
 
         storage.set("progress", progress);
     };
 
     // Show progress
-    var showProgress = function() {        
-        // Update progress
+    var showProgress = function () {
         var progress = getProgress();
         var $summary = $(".book-summary");
 
-        _.each(progress, function(value, level) {
+        _.each(progress, function (value, level) {
             $summary.find("li[data-level='"+level+"']").toggleClass("done", value > 0);
         });
 
-        // Mark current progress
-        markProgress(getCurrentLevel(), true);
+        // Mark current progress if we have not already
+        if (!progress[getCurrentLevel()]) {
+            markProgress(getCurrentLevel(), true);
+        }
     };
 
     return {
diff --git a/theme/javascript/core/quiz.js b/theme/javascript/core/quiz.js
index 7043641..bc1a16d 100644
--- a/theme/javascript/core/quiz.js
+++ b/theme/javascript/core/quiz.js
@@ -5,22 +5,22 @@ define([
     "core/state"
 ], function($, execute, analytic, state){
     // Bind an exercise
-    var prepareExercise = function($exercise) {
+    var prepareQuiz = function($quiz) {
 
-        $exercise.find(".quiz-answers input").click(function(e) {
+        $quiz.find(".quiz-answers input").click(function(e) {
             e.preventDefault();
         });
 
         // Submit: test code
-        $exercise.find(".action-submit").click(function(e) {
+        $quiz.find(".action-submit").click(function(e) {
             e.preventDefault();
-            analytic.track("exercise.submit");
-            $exercise.find("tr.alert-danger,li.alert-danger").removeClass("alert-danger");
-            $exercise.find(".alert-success,.alert-danger").addClass("hidden");
+            analytic.track("exercise.submit", {type: "quiz"});
+            $quiz.find("tr.alert-danger,li.alert-danger").removeClass("alert-danger");
+            $quiz.find(".alert-success,.alert-danger").addClass("hidden");
 
-            $exercise.find(".quiz").each(function(q) {
+            $quiz.find(".question").each(function(q) {
                 var result = true;
-                var $answers = $exercise.find(".quiz-answers").slice(q).find("input[type=radio], input[type=checkbox]");
+                var $answers = $quiz.find(".question-answers").slice(q).find("input[type=radio], input[type=checkbox]");
                 $(this).find("input[type=radio],input[type=checkbox]").each(function(i) {
                     var correct = $(this).is(":checked") === $answers.slice(i).first().is(":checked");
                     result = result && correct;
@@ -33,20 +33,21 @@ define([
 
         });
 
-        $exercise.find(".action-solution").click(function(e) {
-            $exercise.find(".quiz, .quiz-answers").toggleClass("hidden");
+        $quiz.find(".action-solution").click(function(e) {
+            e.preventDefault();
+            $quiz.find(".question-content, .question-answers").toggleClass("hidden");
         });
     };
 
     // Prepare all exercise
     var init = function() {
         state.$book.find("section.quiz").each(function() {
-            prepareExercise($(this));
+            prepareQuiz($(this));
         });
     };
 
     return {
         init: init,
-        prepare: prepareExercise
+        prepare: prepareQuiz
     };
-});
+});
\ No newline at end of file
diff --git a/theme/javascript/core/search.js b/theme/javascript/core/search.js
index 4171660..d8ddc2e 100644..100755
--- a/theme/javascript/core/search.js
+++ b/theme/javascript/core/search.js
@@ -64,7 +64,7 @@ define([
         loadIndex();
 
         // Toggle search
-        state.$book.find(".book-header .toggle-search").click(function(e) {
+        $(document).on("click", ".book-header .toggle-search", function(e) {
             e.preventDefault();
             toggleSearch();
         });
diff --git a/theme/javascript/core/sidebar.js b/theme/javascript/core/sidebar.js
index d318676..0d09b58 100644..100755
--- a/theme/javascript/core/sidebar.js
+++ b/theme/javascript/core/sidebar.js
@@ -25,7 +25,7 @@ define([
     // Prepare sidebar: state and toggle button
     var init = function() {
         // Toggle summary
-        state.$book.find(".book-header .toggle-summary").click(function(e) {
+        $(document).on("click", ".book-header .toggle-summary", function(e) {
             e.preventDefault();
             toggleSidebar();
         });
diff --git a/theme/javascript/core/state.js b/theme/javascript/core/state.js
index 79876b9..34851c1 100644..100755
--- a/theme/javascript/core/state.js
+++ b/theme/javascript/core/state.js
@@ -4,11 +4,11 @@ define([
     var $book = $(".book");
 
     return {
-        '$book': $book,
+      '$book': $book,
 
-        'githubId': $book.data("github"),
-        'level': $book.data("level"),
-        'basePath': $book.data("basepath"),
-        'revision': $book.data("revision")
+      'githubId': $book.data("github"),
+      'level': $book.data("level"),
+      'basePath': $book.data("basepath"),
+      'revision': $book.data("revision")
     };
 });
\ No newline at end of file