Merge pull request #926 from OpenGeoscience/tutorial-history

Add an option to the tutorial editors to keep history in the browser.
OpenGeoscience · Sep 11, 2018 · 2346bb5 · 2346bb5
2 parents 529936f + 83d5d68
commit 2346bb5
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 12 deletions.
diff --git a/examples/common/utils.js b/examples/common/utils.js
@@ -19,17 +19,23 @@ var exampleUtils = {
    * location and history.  This will also remove undefined values from the
    * set properites of params.
    *
-   * @param {object} params: the query parameters as a dictionary.
+   * @param {object} params The query parameters as a dictionary.
+   * @param {boolean} [updateHistory] If true, update the browser history.  If
+   *    falsy, replace the history state.
    */
-  setQuery: function (params) {
+  setQuery: function (params, updateHistory) {
     $.each(params, function (key, value) {
       if (value === undefined) {
         delete params[key];
       }
     });
     var newurl = window.location.protocol + '//' + window.location.host +
         window.location.pathname + '?' + $.param(params);
-    window.history.replaceState(params, '', newurl);
+    if (updateHistory) {
+      window.history.pushState(params, '', newurl);
+    } else {
+      window.history.replaceState(params, '', newurl);
+    }
   }
 };
 

diff --git a/tutorials/common/tutorials.js b/tutorials/common/tutorials.js
@@ -231,16 +231,11 @@ function run_tutorial() {
 }
 
 /**
- * Get query parameters for each step and update them as we start.  Monitor the
- * code blocks and update the url when they change if appropriate.
+ * Fill the codeblocks based on the encoded values in a query.
  *
- * @param {boolean} alwaysKeep If `true`, update the url even if the `keep` url
- *      parameter is not specified.
+ * @param {object} query An object as returned from `utils.getQuery()`.
  */
-function start_keeper(alwaysKeep) {
-  var query = utils.getQuery(),
-      keep = query.keep || (alwaysKeep === true);
-
+function fill_codeblocks(query) {
   $('.codeblock').each(function () {
     var block = $(this),
         key = 'src' + (block.attr('step') !== '1' ? block.attr('step') : '');
@@ -259,6 +254,21 @@ function start_keeper(alwaysKeep) {
       } catch (err) { }
     }
   });
+}
+
+/**
+ * Get query parameters for each step and update them as we start.  Monitor the
+ * code blocks and update the url when they change if appropriate.
+ *
+ * @param {boolean} alwaysKeep If `true`, update the url even if the `keep` url
+ *      parameter is not specified.
+ */
+function start_keeper(alwaysKeep) {
+  var query = utils.getQuery(),
+      keep = query.keep || (alwaysKeep === true),
+      inPop = false;
+
+  fill_codeblocks(query);
   if (keep) {
     $(document).on('geojs-tutorial-run', '.codeblock', function () {
       var newQuery = {};
@@ -280,9 +290,17 @@ function start_keeper(alwaysKeep) {
           newQuery[key] = comp;
         }
       });
-      utils.setQuery(newQuery);
+      if (!inPop) {
+        utils.setQuery(newQuery, true);
+      }
     });
   }
+  window.addEventListener('popstate', function (evt) {
+    inPop = true;
+    fill_codeblocks(utils.getQuery());
+    run_tutorial();
+    inPop = false;
+  }, false);
 }
 
 /**