@stencil/router
Version:
80 lines (77 loc) • 2.63 kB
JavaScript
import { r as registerInstance, h, g as getElement } from './stencilrouter-1307249c.js';
import { A as ActiveRouter } from './chunk-cfc6485e.js';
import { m as matchPath } from './chunk-8fc41abb.js';
import './chunk-d2e78d53.js';
import { i as isModifiedEvent } from './chunk-4eecdc1a.js';
const getUrl = (url, root) => {
// Don't allow double slashes
if (url.charAt(0) == '/' && root.charAt(root.length - 1) == '/') {
return root.slice(0, root.length - 1) + url;
}
return root + url;
};
/**
* @name Route
* @module ionic
* @description
*/
class RouteLink {
constructor(hostRef) {
registerInstance(this, hostRef);
this.unsubscribe = () => { return; };
this.activeClass = 'link-active';
this.exact = false;
this.strict = true;
/**
* Custom tag to use instead of an anchor
*/
this.custom = 'a';
this.match = null;
}
componentWillLoad() {
this.computeMatch();
}
// Identify if the current route is a match.
computeMatch() {
if (this.location) {
this.match = matchPath(this.location.pathname, {
path: this.urlMatch || this.url,
exact: this.exact,
strict: this.strict
});
}
}
handleClick(e) {
if (isModifiedEvent(e) || !this.history || !this.url || !this.root) {
return;
}
e.preventDefault();
return this.history.push(getUrl(this.url, this.root));
}
// Get the URL for this route link without the root from the router
render() {
let anchorAttributes = {
class: {
[this.activeClass]: this.match !== null,
},
onClick: this.handleClick.bind(this)
};
if (this.anchorClass) {
anchorAttributes.class[this.anchorClass] = true;
}
if (this.custom === 'a') {
anchorAttributes = Object.assign({}, anchorAttributes, { href: this.url, title: this.anchorTitle, role: this.anchorRole, tabindex: this.anchorTabIndex, 'aria-haspopup': this.ariaHaspopup, id: this.anchorId, 'aria-posinset': this.ariaPosinset, 'aria-setsize': this.ariaSetsize, 'aria-label': this.ariaLabel });
}
return (h(this.custom, Object.assign({}, anchorAttributes), h("slot", null)));
}
get el() { return getElement(this); }
static get watchers() { return {
"location": ["computeMatch"]
}; }
}
ActiveRouter.injectProps(RouteLink, [
'history',
'location',
'root'
]);
export { RouteLink as stencil_route_link };