From 8702dbca020cf1933cb6d0bfedc8c6529de9ccfb Mon Sep 17 00:00:00 2001
From: David Manthey <david.manthey@kitware.com>
Date: Mon, 10 Sep 2018 12:23:55 -0400
Subject: [PATCH 1/2] Add an option to the tutorial editors to keep history in
 the browser.

If `keep=history` is in the tutorial's url, in addition to add the
source code to the window's location, the back button will return to the
previously source code of the tutorial.

I'm finding this is handy when using the editor to try out experimental
code, as those experiments are in the browser's history.  However, this
has been left as an option that has to be explicitly enabled, as if you
make many small edits, the history is very long and tedious without a
good indicator of when something significant or interesting occurred.
---
 examples/common/utils.js      | 12 ++++++++---
 tutorials/common/tutorials.js | 40 ++++++++++++++++++++++++++---------
 2 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/examples/common/utils.js b/examples/common/utils.js
index d73dd521cf..03bf0854d8 100644
--- a/examples/common/utils.js
+++ b/examples/common/utils.js
@@ -19,9 +19,11 @@ 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];
@@ -29,7 +31,11 @@ var exampleUtils = {
     });
     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
index 04b676d891..a68e31081d 100644
--- 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,10 +254,25 @@ 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 = {};
-      if (query.keep && alwaysKeep !== true) {
+      if (query.keep && (alwaysKeep !== true || query.keep === 'history')) {
         newQuery.keep = query.keep;
       }
       $('.codeblock').each(function () {
@@ -280,9 +290,19 @@ function start_keeper(alwaysKeep) {
           newQuery[key] = comp;
         }
       });
-      utils.setQuery(newQuery);
+      if (!inPop) {
+        utils.setQuery(newQuery, keep === 'history');
+      }
     });
   }
+  if (keep === 'history') {
+    window.addEventListener('popstate', function (evt) {
+      inPop = true;
+      fill_codeblocks(utils.getQuery());
+      run_tutorial();
+      inPop = false;
+    }, false);
+  }
 }
 
 /**

From 83d5d68ed9c6aa184b8fcba2f1d20565ad51ccef Mon Sep 17 00:00:00 2001
From: David Manthey <david.manthey@kitware.com>
Date: Tue, 11 Sep 2018 08:03:20 -0400
Subject: [PATCH 2/2] Always keep history.

---
 tutorials/common/tutorials.js | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/tutorials/common/tutorials.js b/tutorials/common/tutorials.js
index a68e31081d..56a2c07910 100644
--- a/tutorials/common/tutorials.js
+++ b/tutorials/common/tutorials.js
@@ -272,7 +272,7 @@ function start_keeper(alwaysKeep) {
   if (keep) {
     $(document).on('geojs-tutorial-run', '.codeblock', function () {
       var newQuery = {};
-      if (query.keep && (alwaysKeep !== true || query.keep === 'history')) {
+      if (query.keep && alwaysKeep !== true) {
         newQuery.keep = query.keep;
       }
       $('.codeblock').each(function () {
@@ -291,18 +291,16 @@ function start_keeper(alwaysKeep) {
         }
       });
       if (!inPop) {
-        utils.setQuery(newQuery, keep === 'history');
+        utils.setQuery(newQuery, true);
       }
     });
   }
-  if (keep === 'history') {
-    window.addEventListener('popstate', function (evt) {
-      inPop = true;
-      fill_codeblocks(utils.getQuery());
-      run_tutorial();
-      inPop = false;
-    }, false);
-  }
+  window.addEventListener('popstate', function (evt) {
+    inPop = true;
+    fill_codeblocks(utils.getQuery());
+    run_tutorial();
+    inPop = false;
+  }, false);
 }
 
 /**