add option to control how history is updated

* Use update option to only process inbound request from URL (no updates on navigation)
* Use history option to control whether history is maintained

README.md

@@ -50,6 +50,32 @@ If you'd like to use named hash routes instead, add `data-bespoke-hash` attribut
 </article>
 ```
 
+### Disabling updates
+
+You can prevent the URL from being updated after the initial page load by setting the `update` option to `false`. This switch allows you to respond to incoming changes from the URL, but not continue updating the URL when the slide changes.
+
+```
+bespoke.from('article', [
+ bespoke.plugins.hash({ update: false })
+]);
+```
+
+Default value: `true`
+
+### History control
+
+You can control whether this browser history is updated using the `history` option. A value of `false` overwrites the last history entry each time the slide is changed (assuming the `update` option is not `false`).
+
+```
+bespoke.from('article', [
+ bespoke.plugins.hash({ history: false })
+]);
+```
+
+If updates are disabled and the value of the `history` option is false, the hash will be removed from the URL after the deck is loaded.
+
+Default value: `true`
+
 ## Package managers
 
 ### npm

dist/bespoke-hash.js

@@ -1,16 +1,18 @@
 /*!
  * bespoke-hash v1.0.2
  *
- * Copyright 2014, Mark Dalgleish
+ * Copyright 2015, Mark Dalgleish
  * This content is released under the MIT license
  * http://mit-license.org/markdalgleish
  */
 
 !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var n;"undefined"!=typeof window?n=window:"undefined"!=typeof global?n=global:"undefined"!=typeof self&&(n=self);var o=n;o=o.bespoke||(o.bespoke={}),o=o.plugins||(o.plugins={}),o.hash=e()}}(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(_dereq_,module,exports){
-module.exports = function() {
+module.exports = function(opts) {
+ opts = opts || {};
  return function(deck) {
+ var loc = window.location;
  var parseHash = function() {
- var hash = window.location.hash.slice(1),
+ var hash = loc.hash.slice(1),
  slideNumberOrName = parseInt(hash, 10);
 
  if (hash) {
@@ -36,10 +38,23 @@ module.exports = function() {
  setTimeout(function() {
  parseHash();
 
- deck.on('activate', function(e) {
- var slideName = e.slide.getAttribute('data-bespoke-hash');
- window.location.hash = slideName || e.index + 1;
- });
+ if (opts.update === false) {
+ if (opts.history === false) {
+ window.history.replaceState('', document.title, loc.pathname + loc.search);
+ }
+ }
+ else {
+ deck.on('activate', function(e) {
+ var slideName = e.slide.getAttribute('data-bespoke-hash');
+ if (opts.history === false) {
+ loc.replace(loc.pathname + loc.search + '#' + (slideName || e.index + 1));
+ //window.history.replaceState('', document.title, loc.pathname + loc.search + '#' + (slideName || e.index + 1));
+ }
+ else {
+ loc.hash = slideName || e.index + 1;
+ }
+ });
+ }
 
  window.addEventListener('hashchange', parseHash);
  }, 0);

lib/bespoke-hash.js

@@ -1,7 +1,9 @@
-module.exports = function() {
+module.exports = function(opts) {
+ opts = opts || {};
  return function(deck) {
+ var loc = window.location;
  var parseHash = function() {
- var hash = window.location.hash.slice(1),
+ var hash = loc.hash.slice(1),
  slideNumberOrName = parseInt(hash, 10);
 
  if (hash) {
@@ -27,10 +29,23 @@ module.exports = function() {
  setTimeout(function() {
  parseHash();
 
- deck.on('activate', function(e) {
- var slideName = e.slide.getAttribute('data-bespoke-hash');
- window.location.hash = slideName || e.index + 1;
- });
+ if (opts.update === false) {
+ if (opts.history === false) {
+ window.history.replaceState('', document.title, loc.pathname + loc.search);
+ }
+ }
+ else {
+ deck.on('activate', function(e) {
+ var slideName = e.slide.getAttribute('data-bespoke-hash');
+ if (opts.history === false) {
+ loc.replace(loc.pathname + loc.search + '#' + (slideName || e.index + 1));
+ //window.history.replaceState('', document.title, loc.pathname + loc.search + '#' + (slideName || e.index + 1));
+ }
+ else {
+ loc.hash = slideName || e.index + 1;
+ }
+ });
+ }
 
  window.addEventListener('hashchange', parseHash);
  }, 0);

test/spec/bespoke-hashSpec.js

@@ -16,7 +16,7 @@ describe("bespoke-hash", function() {
  slides,
  deck;
 
- var createDeck = function() {
+ var createDeck = function(opts) {
  slides = [];
 
  article = document.createElement(PARENT_TAG);
@@ -34,7 +34,7 @@ describe("bespoke-hash", function() {
  document.body.appendChild(article);
 
  deck = bespoke.from(PARENT_TAG, [
- hash()
+ hash(opts)
  ]);
 
  // Wait for next tick
@@ -224,4 +224,56 @@ describe("bespoke-hash", function() {
 
  });
 
+ describe("given update mode is deactivated", function() {
+ beforeEach(function() {
+ window.location.hash = 2;
+ });
+
+ [true, false].forEach(function(historyOpt) {
+ describe("when the deck is created with history " + (historyOpt ? 'enabled' : 'disabled'), function() {
+ beforeEach(function() {
+ createDeck({ update: false, history: historyOpt });
+ });
+ afterEach(destroyDeck);
+
+ it("should activate the slide referenced in the hash", function() {
+ expect(deck.slide()).toBe(1);
+ expect(window.location.hash).toBe(historyOpt ? '#2' : '');
+ });
+
+ it("should not update the hash when the slide changes", function() {
+ deck.next();
+ expect(deck.slide()).toBe(2);
+ expect(window.location.hash).toBe(historyOpt ? '#2' : '');
+ });
+ });
+ });
+ });
+
+ describe("given history mode is deactivated", function() {
+ beforeEach(function() {
+ window.location.hash = 2;
+ });
+
+ describe("when the deck is created", function() {
+ beforeEach(function() {
+ createDeck({ history: false });
+ });
+ afterEach(destroyDeck);
+
+ it("should activate the slide referenced in the hash", function() {
+ expect(deck.slide()).toBe(1);
+ expect(window.location.hash).toBe('#2');
+ });
+
+ it("should not add entry to history when the slide changes", function() {
+ var beforeHistoryLength = window.history.length;
+ deck.next();
+ expect(deck.slide()).toBe(2);
+ expect(window.location.hash).toBe('#3');
+ expect(window.history.length).toBe(beforeHistoryLength);
+ });
+ });
+ });
+
 });