<location-lite>
Location path getter system for making a single-page-application.
It intercepts the global clicking of any <a>
tag and pushes the anchor's href
url to history
without loading the page from the server. It only intercepts clicks with the intent to
open in the same window, so middle mouse clicks and ctrl/cmd clicks work fine.
You can customize this behavior with the urlSpaceRegex
.
This is a copied version of without using Polymer https://github.com/PolymerElements/iron-location/blob/__auto_generated_3.0_preview/iron-location.js
When the URL is /search?query=583#details
, the location-lite's properties will be:
- path:
/search
- query:
query=583
- hash:
details
It would also fire path-change
, query-change
, and hash-change
events.
You can also set the path
, query
, and hash
and it will reflect on the window.location and also on window.history
Settable properties would be the following:
- dwellTime: Copied from iron-location, it protects against accidental history spamming by only adding entries to the user's history if the URL stays unchanged for
dwellTime
milliseconds - urlSpaceRegex: allows you to disregard interception of urls that follow the
urlSpaceRegex
pattern
This is the recommended way. To install, just do this:
npm i --save @littleq/location-lite
You can either load it via html script
<script type="module" src="node_modules/@littleq/location-lite/location-lite.js">
or load it in your JS file
import 'node_modules/@littleq/location-lite/location-lite.js'
and then just use the tag on your html document
<location-lite></location-lite>
Same as above.
You need to add this additional script for polyfill
npm i --save @webcomponents/webcomponentsjs
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js">
And then wrap around the files after the WebComponentsReady
event has been fired
<script>
window.addEventListener('WebComponentsReady', function() {
var component = document.createElement('script');
component.src = 'node_modules/@littleq/location-lite/location-lite.js';
component.type = 'module';
document.head.appendChild(component);
});
</script>
if you are using Webpack and you have bundled it in ES5 for older browsers, you also need:
<script src="node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js">
If you want to use the ES5 version, add this
<script src="node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js">
Before adding this.
<script>
window.addEventListener('WebComponentsReady', function() {
var component = document.createElement('script');
component.src = 'node_modules/@littleq/location-lite/dist/location-lite.umd.es5.js';
document.head.appendChild(component);
});
</script>
You can capture changes on path
, query
, and hash
when you listen on path-change
, query-change
, and hash-change
respectively.
const el = document.querySelector('location-lite');
el.addEventListener('path-change', ({ detail: path }) => {
console.log(path);
});
el.addEventListener('query-change', ({ detail: query }) => {
console.log(query);
});
el.addEventListener('hash-change', ({ detail: hash }) => {
console.log(hash);
});
If you are going to use it on Evergreen Browsers that allows <script type="module">
,
then you can just do this on your js
files
import './node_modules/@littleq/location-lite/location-lite.js';
or
<script type="module" src="node_modules/@littleq/location-lite/location-lite.js">
If you are going to use it on Webpack or Rollup, you can do any of these
// provided that node_modules is resolved in your configurations
import '.@littleq/location-lite';
or
import './node_modules/@littleq/location-lite';
or
import './node_modules/@littleq/location-lite/dist/location-lite.esm.js';
If you are going to use require
and not import
you can do any of these
// provided that node_modules is resolved in your configurations
require('@littleq/location-lite');
or
// provided that node_modules is resolved in your configurations
require('@littleq/location-lite/dist/location-lite.cjs.js');
If you are going to load it via the <script>
tag, you need to do these
For ES6
<script src="/node_modules/@littleq/location-lite/dist/location-lite.umd.js">
<!-- <script src="/node_modules/@littleq/location-lite/dist/location-lite.umd.min.js">
if you need the minified file -->
For ES5
<script src="/node_modules/@littleq/location-lite/dist/location-lite.umd.es5.js">
<!-- <script src="/node_modules/@littleq/location-lite/dist/location-lite.umd.es5.min.js">
if you need the minified file -->
It works on all major evergreen Browsers (Edge, Safari, Chrome, Firefox) as long as you have the Polyfills
set (make sure to add webcomponents-lite
or webcomponents-loader
and load location-lite
after the
WebComponentsReady
event has been fired)
It also works on Safari 11, Safari 10.1. Still checking on Safari 9 and IE 11.
Based on size-limit
npm run size
> @littleq/location-lite@0.1.0 size /home/tjmonsi/Projects/@littleq/location-lite
> size-limit
Package size: 1.37 KB
Size limit: 1.5 KB
With all dependencies, minified and gzipped