From 378d35817f72d956f6efec5a0b69090de9961c71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl=20T=C3=B6rnqvist?= Date: Mon, 18 Jun 2018 11:50:30 +0200 Subject: [PATCH 1/6] Add hash option --- index.js | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/index.js b/index.js index 79a7c525..11bff161 100644 --- a/index.js +++ b/index.js @@ -1,6 +1,5 @@ var scrollToAnchor = require('scroll-to-anchor') var documentReady = require('document-ready') -var nanolocation = require('nanolocation') var nanotiming = require('nanotiming') var nanorouter = require('nanorouter') var nanomorph = require('nanomorph') @@ -39,8 +38,8 @@ function Choo (opts) { // properties for internal use only this._historyEnabled = opts.history === undefined ? true : opts.history this._hrefEnabled = opts.href === undefined ? true : opts.href + this._hashEnabled = opts.hash === undefined ? false : opts.hash this._hasWindow = typeof window !== 'undefined' - this._createLocation = nanolocation this._cache = opts.cache this._loaded = false this._stores = [] @@ -128,8 +127,10 @@ Choo.prototype.start = function () { if (self._hrefEnabled) { nanohref(function (location) { var href = location.href - var currHref = window.location.href - if (href === currHref) return + if (href === window.location.href) { + if (!this._hashEnabled) scrollToAnchor(location.hash) + return + } self.emitter.emit(self._events.PUSHSTATE, href) }) } @@ -224,10 +225,12 @@ Choo.prototype.toString = function (location, state) { Choo.prototype._matchRoute = function (locationOverride) { var location, queryString if (locationOverride) { - location = locationOverride.replace(/\?.+$/, '') + location = locationOverride.replace(/\?.+$/, '').replace(/\/$/, '') + if (!this._hashEnabled) location = location.replace(/#.+$/, '') queryString = locationOverride } else { - location = this._createLocation() + location = window.location.pathname.replace(/\/$/, '') + if (this._hashEnabled) location += window.location.hash.replace(/^#/, '/') queryString = window.location.search } var matched = this.router.match(location) From f9fb812488a36315bce6fe578059e354f85b19c7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl=20T=C3=B6rnqvist?= Date: Mon, 18 Jun 2018 12:53:05 +0200 Subject: [PATCH 2/6] Avoid unecessary scroll into view-call --- index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/index.js b/index.js index 11bff161..e6d79804 100644 --- a/index.js +++ b/index.js @@ -127,8 +127,9 @@ Choo.prototype.start = function () { if (self._hrefEnabled) { nanohref(function (location) { var href = location.href + var hash = location.hash if (href === window.location.href) { - if (!this._hashEnabled) scrollToAnchor(location.hash) + if (!this._hashEnabled && hash) scrollToAnchor(hash) return } self.emitter.emit(self._events.PUSHSTATE, href) From 7d9f3fe037e2d45d957a240622c818995128da29 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl=20T=C3=B6rnqvist?= Date: Mon, 18 Jun 2018 12:53:27 +0200 Subject: [PATCH 3/6] Update readme with hash option --- README.md | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index d60cf35a..107ad1d4 100644 --- a/README.md +++ b/README.md @@ -284,10 +284,12 @@ Querystrings (e.g. `?foo=bar`) are ignored when matching routes. An object containing the key-value mappings exists as `state.query`. ### Hash routing -Using hashes to delimit routes is supported out of the box (e.g. `/foo#bar`). -When a hash is found we also check if there's an available anchor on the same -page, and will scroll the screen to the position. Using both hashes in URLs and -anchor links on the page is generally not recommended. +By default hashes are not taken into account when routing. Using hashes to +delimit routes (e.g. `/foo#bar`) is supported if the `hash` options set to +`true`. Regardles, when a hash is found we also check if there's an +available anchor on the same page, and will scroll the screen to the position. +Using both hashes in URLs and anchor links on the page is generally not +recommended. ### Following links By default all clicks on `` tags are handled by the router through the @@ -532,6 +534,7 @@ Initialize a new `choo` instance. `opts` can also contain the following values: - __opts.cache:__ default: `undefined`. Override default class cache used by `state.cache`. Can be a a `number` (maximum number of instances in cache, default `100`) or an `object` with a [nanolru][nanolru]-compatible API. +- __opts.hash:__ default: `false`. Treat hashes in URLs as part of the pathname, transforming `/foo#bar` to `/foo/bar`. This is useful if the application is not mounted at the website root. ### `app.use(callback(state, emitter, app))` Call a function and pass it a `state`, `emitter` and `app`. `emitter` is an instance From 1d6cdd76f2655e8f29c8d073915dd5de5d4e4c84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl=20T=C3=B6rnqvist?= Date: Mon, 18 Jun 2018 17:54:35 +0200 Subject: [PATCH 4/6] Fix typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 107ad1d4..11cfd72a 100644 --- a/README.md +++ b/README.md @@ -286,7 +286,7 @@ containing the key-value mappings exists as `state.query`. ### Hash routing By default hashes are not taken into account when routing. Using hashes to delimit routes (e.g. `/foo#bar`) is supported if the `hash` options set to -`true`. Regardles, when a hash is found we also check if there's an +`true`. Regardless, when a hash is found we also check if there's an available anchor on the same page, and will scroll the screen to the position. Using both hashes in URLs and anchor links on the page is generally not recommended. From 6df5ee08f5a9b78d2ebc1411a7944a4bf36546fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl=20T=C3=B6rnqvist?= Date: Mon, 18 Jun 2018 18:09:39 +0200 Subject: [PATCH 5/6] Remove nanolocation dep --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index 09e1ff19..8c26d0ab 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,6 @@ "nanocomponent": "^6.5.0", "nanohref": "^3.0.0", "nanohtml": "^1.1.0", - "nanolocation": "^1.0.0", "nanolru": "^1.0.0", "nanomorph": "^5.1.2", "nanoquery": "^1.1.0", From bea81e23c158a135b04ddacdaaa1cd4551ad1f63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Carl=20T=C3=B6rnqvist?= Date: Thu, 12 Jul 2018 11:03:30 +0200 Subject: [PATCH 6/6] Default hash option to true --- README.md | 16 +++++++++------- index.js | 2 +- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 11cfd72a..3c49d36c 100644 --- a/README.md +++ b/README.md @@ -284,12 +284,12 @@ Querystrings (e.g. `?foo=bar`) are ignored when matching routes. An object containing the key-value mappings exists as `state.query`. ### Hash routing -By default hashes are not taken into account when routing. Using hashes to -delimit routes (e.g. `/foo#bar`) is supported if the `hash` options set to -`true`. Regardless, when a hash is found we also check if there's an -available anchor on the same page, and will scroll the screen to the position. -Using both hashes in URLs and anchor links on the page is generally not -recommended. +By default hashes are treated as part of the url when routing. Using hashes to +delimit routes (e.g. `/foo#bar`) can be disabled by setting the `hash` +[option](#app--chooopts) to `false`. Regardless, when a hash is found we also +check if there's an available anchor on the same page, and will scroll the +screen to the position. Using both hashes in URLs and anchor links on the page +is generally not recommended. ### Following links By default all clicks on `` tags are handled by the router through the @@ -534,7 +534,9 @@ Initialize a new `choo` instance. `opts` can also contain the following values: - __opts.cache:__ default: `undefined`. Override default class cache used by `state.cache`. Can be a a `number` (maximum number of instances in cache, default `100`) or an `object` with a [nanolru][nanolru]-compatible API. -- __opts.hash:__ default: `false`. Treat hashes in URLs as part of the pathname, transforming `/foo#bar` to `/foo/bar`. This is useful if the application is not mounted at the website root. +- __opts.hash:__ default: `true`. Treat hashes in URLs as part of the pathname, + transforming `/foo#bar` to `/foo/bar`. This is useful if the application is + not mounted at the website root. ### `app.use(callback(state, emitter, app))` Call a function and pass it a `state`, `emitter` and `app`. `emitter` is an instance diff --git a/index.js b/index.js index e6d79804..f21bd913 100644 --- a/index.js +++ b/index.js @@ -38,7 +38,7 @@ function Choo (opts) { // properties for internal use only this._historyEnabled = opts.history === undefined ? true : opts.history this._hrefEnabled = opts.href === undefined ? true : opts.href - this._hashEnabled = opts.hash === undefined ? false : opts.hash + this._hashEnabled = opts.hash === undefined ? true : opts.hash this._hasWindow = typeof window !== 'undefined' this._cache = opts.cache this._loaded = false