diff --git a/.gitignore b/.gitignore index a0090b4..40f1a03 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,5 @@ # macOS .DS_Store + +# node +node_modules diff --git a/README.md b/README.md index c7aba23..3d40e6d 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Back Forward History -This is an addon to the history JavaScript +This is an addon to the JavaScript [history](https://github.com/mjackson/history) library. It enables tracking of back and forward locations. @@ -32,10 +32,18 @@ Check if you can go forward n pages. Defaults to 1. Set a tag for a location you may want to return to. Get a key with `currentLocationKey`. +### deleteTag(tag) +```js +HistoryTracker.deleteTag('homepage') +``` + ### goToLocationWithTag(tag) Goes backward or forward to reach a tag. # Changes +### 1.1.1 +- Added deleteTag method + ### 1.1 - Add pathname support diff --git a/index.js b/index.js index c4742d5..0395420 100644 --- a/index.js +++ b/index.js @@ -1,192 +1,140 @@ -'use strict'; +const SESSIONSTORAGE_PREFIX = 'BackForwardHistory_'; -Object.defineProperty(exports, "__esModule", { - value: true -}); +class BackForwardHistory { + constructor() { + this.loadStateFromSession(); + } -var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + listenTo(browserHistory) { + this.browserHistory = browserHistory; + browserHistory.listen(this.onHistoryEvent.bind(this)); + } -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + get firstLocationKey() { + return this.historyStack[0].key; + } -var SESSIONSTORAGE_PREFIX = 'BackForwardHistory_'; + get currentLocationKey() { + return this.historyStack[this.currentIndex].key; + } -var BackForwardHistory = function () { - function BackForwardHistory() { - _classCallCheck(this, BackForwardHistory); + canGoBack(n = 1) { + return this.currentIndex >= n; + } - this.loadStateFromSession(); + canGoForward(n = 1) { + return this.currentIndex < this.historyStack.length - n; } - _createClass(BackForwardHistory, [{ - key: 'listenTo', - value: function listenTo(browserHistory) { - this.browserHistory = browserHistory; - browserHistory.listen(this.onHistoryEvent.bind(this)); - } - }, { - key: 'canGoBack', - value: function canGoBack() { - var n = arguments.length <= 0 || arguments[0] === undefined ? 1 : arguments[0]; + get currentlyOnFirstPage() { + return this.currentLocationKey == this.firstLocationKey; + } - return this.currentIndex >= n; - } - }, { - key: 'canGoForward', - value: function canGoForward() { - var n = arguments.length <= 0 || arguments[0] === undefined ? 1 : arguments[0]; + get currentlyOnLastPage() { + return !this.canGoForward(); + } - return this.currentIndex < this.historyStack.length - n; - } - }, { - key: 'loadStateFromSession', - value: function loadStateFromSession() { - this.historyStack = JSON.parse(sessionStorage.getItem(SESSIONSTORAGE_PREFIX + 'historyStack')) || []; - this.currentIndex = sessionStorage.getItem(SESSIONSTORAGE_PREFIX + 'currentIndex') || 0; - this.tags = JSON.parse(sessionStorage.getItem(SESSIONSTORAGE_PREFIX + 'tags')) || {}; - } - }, { - key: 'saveStateToSession', - value: function saveStateToSession() { - sessionStorage.setItem(SESSIONSTORAGE_PREFIX + 'historyStack', JSON.stringify(this.historyStack)); - sessionStorage.setItem(SESSIONSTORAGE_PREFIX + 'currentIndex', this.currentIndex); - sessionStorage.setItem(SESSIONSTORAGE_PREFIX + 'tags', JSON.stringify(this.tags)); - } - }, { - key: 'resetState', - value: function resetState() { - this.historyStack = []; - this.currentIndex = 0; - this.tags = {}; - this.saveStateToSession(); - } - }, { - key: 'onHistoryEvent', - value: function onHistoryEvent(_ref) { - var pathname = _ref.pathname; - var key = _ref.key; - var action = _ref.action; - - if (this.historyStack.length === 0) { - this.historyStack.push({ key: key, pathname: pathname }); - return; - } + loadStateFromSession() { + this.historyStack = JSON.parse(sessionStorage.getItem(SESSIONSTORAGE_PREFIX + 'historyStack')) || []; + this.currentIndex = sessionStorage.getItem(SESSIONSTORAGE_PREFIX + 'currentIndex') || 0; + this.tags = JSON.parse(sessionStorage.getItem(SESSIONSTORAGE_PREFIX + 'tags')) || {}; + } - if (action === 'PUSH') { - if (!this.currentlyOnLastPage) { - this.historyStack = this.historyStack.splice(0, this.currentIndex + 1); - } + saveStateToSession() { + sessionStorage.setItem(SESSIONSTORAGE_PREFIX + 'historyStack', JSON.stringify(this.historyStack)); + sessionStorage.setItem(SESSIONSTORAGE_PREFIX + 'currentIndex', this.currentIndex); + sessionStorage.setItem(SESSIONSTORAGE_PREFIX + 'tags', JSON.stringify(this.tags)); + } - this.historyStack.push({ key: key, pathname: pathname }); - this.currentIndex++; - } + resetState() { + this.historyStack = []; + this.currentIndex = 0; + this.tags = {}; + this.saveStateToSession(); + } - if (action === 'POP') { - var potentialIndex = this.getIndexForKey(key); - if (potentialIndex === -1) { - // User hit go on url bar. Reset history stack. - this.resetState(); - this.historyStack = [{ key: key, pathname: pathname }]; - } + onHistoryEvent({ pathname, key, action }) { + if (this.historyStack.length === 0) { + this.historyStack.push({ key, pathname }); + return; + } - this.currentIndex = this.getIndexForKey(key); + if (action === 'PUSH') { + if (!this.currentlyOnLastPage) { + this.historyStack = this.historyStack.splice(0, this.currentIndex + 1); } - this.saveStateToSession(); - } - }, { - key: 'getIndexForKey', - value: function getIndexForKey(key) { - return this.historyStack.findIndex(function (i) { - return i.key === key; - }); - } - }, { - key: 'getIndexForTag', - value: function getIndexForTag(tag) { - return this.getIndexForKey(this.tags[tag]); + this.historyStack.push({ key, pathname }); + this.currentIndex++; } - }, { - key: 'getKeyForTag', - value: function getKeyForTag(tag) { - return this.tags[tag]; - } - }, { - key: 'getCurrentPathname', - value: function getCurrentPathname() { - var n = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; - return this.historyStack[this.currentIndex + n].pathname; - } - }, { - key: 'getCurrentLocationTitle', - value: function getCurrentLocationTitle() { - var n = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0]; + if (action === 'POP') { + const potentialIndex = this.getIndexForKey(key); + if (potentialIndex === -1) { + // User hit go on url bar. Reset history stack. + this.resetState(); + this.historyStack = [{ key, pathname }]; + } - return this.historyStack[this.currentIndex + n].title; - } - }, { - key: 'getTitleForKey', - value: function getTitleForKey(key) { - return this.historyStack[this.getIndexForKey(key)].title; + this.currentIndex = this.getIndexForKey(key); } - }, { - key: 'setTitleForKey', - value: function setTitleForKey(key, title) { - this.historyStack[this.getIndexForKey(key)].title = title; - } - }, { - key: 'setTitleForCurrentLocation', - value: function setTitleForCurrentLocation(title) { - var n = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1]; - this.historyStack[this.currentIndex + n].title = title; - } - }, { - key: 'setTagForKey', - value: function setTagForKey(key, tag) { - this.tags[tag] = key; - } - }, { - key: 'isCurrentlyOnTag', - value: function isCurrentlyOnTag(tag) { - return this.currentLocationKey == this.tags[tag]; - } - }, { - key: 'goToLocationWithTag', - value: function goToLocationWithTag(tag) { - var n = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1]; - - var indexOfTag = this.getIndexForTag(tag); - if (indexOfTag === -1) { - throw new Error('No index found for tag: ' + tag); - } + this.saveStateToSession(); + } - this.browserHistory.go(indexOfTag - this.currentIndex + n); - } - }, { - key: 'firstLocationKey', - get: function get() { - return this.historyStack[0].key; - } - }, { - key: 'currentLocationKey', - get: function get() { - return this.historyStack[this.currentIndex].key; - } - }, { - key: 'currentlyOnFirstPage', - get: function get() { - return this.currentLocationKey == this.firstLocationKey; - } - }, { - key: 'currentlyOnLastPage', - get: function get() { - return !this.canGoForward(); + getIndexForKey(key) { + return this.historyStack.findIndex(i => i.key === key); + } + + getIndexForTag(tag) { + return this.getIndexForKey(this.tags[tag]); + } + + getKeyForTag(tag) { + return this.tags[tag]; + } + + getCurrentPathname(n = 0) { + return this.historyStack[this.currentIndex + n].pathname; + } + + getCurrentLocationTitle(n = 0) { + return this.historyStack[this.currentIndex + n].title; + } + + getTitleForKey(key) { + return this.historyStack[this.getIndexForKey(key)].title; + } + + setTitleForKey(key, title) { + this.historyStack[this.getIndexForKey(key)].title = title; + } + + setTitleForCurrentLocation(title, n = 0) { + this.historyStack[this.currentIndex + n].title = title; + } + + setTagForKey(key, tag) { + this.tags[tag] = key; + } + + deleteTagForKey(tag) { + delete this.tags[tag]; + } + + isCurrentlyOnTag(tag) { + return this.currentLocationKey == this.tags[tag]; + } + + goToLocationWithTag(tag, n = 0) { + const indexOfTag = this.getIndexForTag(tag); + if (indexOfTag === -1) { + throw new Error('No index found for tag: ' + tag); } - }]); - return BackForwardHistory; -}(); + this.browserHistory.go(indexOfTag - this.currentIndex + n); + } +} -exports.default = new BackForwardHistory(); +export default new BackForwardHistory(); diff --git a/index_src.js b/index_src.js index 2957aac..0f70f8c 100644 --- a/index_src.js +++ b/index_src.js @@ -118,6 +118,10 @@ class BackForwardHistory { this.tags[tag] = key } + deleteTagForKey(tag) { + delete this.tags[tag] + } + isCurrentlyOnTag(tag) { return this.currentLocationKey == this.tags[tag] } diff --git a/package.json b/package.json index a0082b7..3111f9f 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,11 @@ { "name": "back-forward-history", - "version": "1.1.0", + "version": "1.1.1", "description": "This is an addon to the history JavaScript library. It enables tracking of back and forward locations.", "main": "index.js", "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "test": "echo \"Error: no test specified\" && exit 1", + "build": "babel index_src.js > index.js" }, "author": "UConn Center for Open Research, Resrouces, and Equipment", "license": "MIT", @@ -16,5 +17,8 @@ "history", "react", "react-router" - ] + ], + "devDependencies": { + "babel-cli": "^6.14.0" + } }