UNPKG

kompendium

Version:

Documentation generator for Stencil components

77 lines (72 loc) 2.35 kB
'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); const index = require('./index-4264cbf1.js'); const domUtils = require('./dom-utils-384f57f3.js'); const activeRouter = require('./active-router-64317b4c.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; }; const RouteLink = class { constructor(hostRef) { index.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 = domUtils.matchPath(this.location.pathname, { path: this.urlMatch || this.url, exact: this.exact, strict: this.strict }); } } handleClick(e) { if (domUtils.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 (index.h(this.custom, Object.assign({}, anchorAttributes), index.h("slot", null))); } get el() { return index.getElement(this); } static get watchers() { return { "location": ["computeMatch"] }; } }; activeRouter.ActiveRouter.injectProps(RouteLink, [ 'history', 'location', 'root' ]); exports.stencil_route_link = RouteLink;