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..56a2c07910 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,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); } /**