UNPKG

@stencil/router

Version:
80 lines (77 loc) 2.63 kB
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 };