javascript-router
Advanced tools
+22
| MIT License | ||
| Copyright (c) 2019 Samuel Hornsey | ||
| Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| of this software and associated documentation files (the "Software"), to deal | ||
| in the Software without restriction, including without limitation the rights | ||
| to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| copies of the Software, and to permit persons to whom the Software is | ||
| furnished to do so, subject to the following conditions: | ||
| The above copyright notice and this permission notice shall be included in all | ||
| copies or substantial portions of the Software. | ||
| THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| SOFTWARE. |
+16
-4
@@ -10,2 +10,4 @@ // Regex constants | ||
| this.root = root ? root : window.location.origin; | ||
| // Bind to prevent multiple click handlers | ||
| this.go = this.go.bind(this); | ||
| } | ||
@@ -27,3 +29,3 @@ /** | ||
| for (let link of links) { | ||
| link.addEventListener("click", event => this.go(event)); | ||
| link.addEventListener("click", this.go); | ||
| } | ||
@@ -57,2 +59,11 @@ } | ||
| /** | ||
| * Navigate to path | ||
| * @param path string | ||
| */ | ||
| navigate(path) { | ||
| const url = `${this.root}${path}`; | ||
| window.history.pushState(null, null, url); | ||
| this.onChange(); | ||
| } | ||
| /** | ||
| * Replace parameters regex | ||
@@ -131,6 +142,7 @@ * @param route Route | ||
| event.preventDefault(); | ||
| const query = event.target.search; | ||
| const query = event.target.closest('a').search; | ||
| const pathname = event.target.closest('a').pathname; | ||
| const url = query | ||
| ? `${this.root}${event.target.pathname}${query}` | ||
| : `${this.root}${event.target.pathname}`; | ||
| ? `${this.root}${pathname}${query}` | ||
| : `${this.root}${pathname}`; | ||
| window.history.pushState(null, null, url); | ||
@@ -137,0 +149,0 @@ this.onChange(); |
+20
-4
@@ -34,2 +34,5 @@ // Route interface | ||
| this.root = root ? root : window.location.origin; | ||
| // Bind to prevent multiple click handlers | ||
| this.go = this.go.bind(this); | ||
| } | ||
@@ -55,3 +58,3 @@ | ||
| for (let link of links) { | ||
| link.addEventListener("click", event => this.go(event)); | ||
| link.addEventListener("click", this.go); | ||
| } | ||
@@ -91,2 +94,13 @@ } | ||
| /** | ||
| * Navigate to path | ||
| * @param path string | ||
| */ | ||
| public navigate(path: string) { | ||
| const url = `${this.root}${path}`; | ||
| window.history.pushState(null, null, url); | ||
| this.onChange(); | ||
| } | ||
| /** | ||
| * Replace parameters regex | ||
@@ -179,7 +193,9 @@ * @param route Route | ||
| event.preventDefault(); | ||
| const query = event.target.search; | ||
| const query = event.target.closest('a').search; | ||
| const pathname = event.target.closest('a').pathname; | ||
| const url = query | ||
| ? `${this.root}${event.target.pathname}${query}` | ||
| : `${this.root}${event.target.pathname}`; | ||
| ? `${this.root}${pathname}${query}` | ||
| : `${this.root}${pathname}`; | ||
@@ -186,0 +202,0 @@ window.history.pushState(null, null, url); |
+1
-1
| { | ||
| "name": "javascript-router", | ||
| "version": "0.0.4", | ||
| "version": "0.0.5", | ||
| "description": "A lightweight javascript router", | ||
@@ -5,0 +5,0 @@ "main": "dist/router.mjs", |
+2
-0
@@ -6,2 +6,4 @@ # Javascript Router | ||
| > Demo: [samuelhornsey.github.io/javascript-router/demo/](https://samuelhornsey.github.io/javascript-router/demo/) | ||
| A simple Javascript UI router. Written in typescript and bundled as a es6 module for use with Webpack or Rollup. | ||
@@ -8,0 +10,0 @@ |
13164
16.22%9
12.5%336
7.69%83
2.47%