diff --git a/README.md b/README.md index d60cf35a..3c49d36c 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 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 @@ -532,6 +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: `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 79a7c525..f21bd913 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 ? true : opts.hash this._hasWindow = typeof window !== 'undefined' - this._createLocation = nanolocation this._cache = opts.cache this._loaded = false this._stores = [] @@ -128,8 +127,11 @@ Choo.prototype.start = function () { if (self._hrefEnabled) { nanohref(function (location) { var href = location.href - var currHref = window.location.href - if (href === currHref) return + var hash = location.hash + if (href === window.location.href) { + if (!this._hashEnabled && hash) scrollToAnchor(hash) + return + } self.emitter.emit(self._events.PUSHSTATE, href) }) } @@ -224,10 +226,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) 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",