(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : typeof define === 'function' && define.amd ? define(factory) : (global.page = factory()); }(this, (function () { 'use strict'; var isarray = Array.isArray || function (arr) { return Object.prototype.toString.call(arr) == '[object Array]'; }; /** * Expose `pathToRegexp`. */ var pathToRegexp_1 = pathToRegexp; var parse_1 = parse; var compile_1 = compile; var tokensToFunction_1 = tokensToFunction; var tokensToRegExp_1 = tokensToRegExp; /** * The main path matching regexp utility. * * @type {RegExp} */ var PATH_REGEXP = new RegExp([ // Match escaped characters that would otherwise appear in future matches. // This allows the user to escape special characters that won't transform. '(\\\\.)', // Match Express-style parameters and un-named parameters with a prefix // and optional suffixes. Matches appear as: // // "/:test(\\d+)?" => ["/", "test", "\d+", undefined, "?", undefined] // "/route(\\d+)" => [undefined, undefined, undefined, "\d+", undefined, undefined] // "/*" => ["/", undefined, undefined, undefined, undefined, "*"] '([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^()])+)\\))?|\\(((?:\\\\.|[^()])+)\\))([+*?])?|(\\*))' ].join('|'), 'g'); /** * Parse a string for the raw tokens. * * @param {String} str * @return {Array} */ function parse (str) { var tokens = []; var key = 0; var index = 0; var path = ''; var res; while ((res = PATH_REGEXP.exec(str)) != null) { var m = res[0]; var escaped = res[1]; var offset = res.index; path += str.slice(index, offset); index = offset + m.length; // Ignore already escaped sequences. if (escaped) { path += escaped[1]; continue } // Push the current path onto the tokens. if (path) { tokens.push(path); path = ''; } var prefix = res[2]; var name = res[3]; var capture = res[4]; var group = res[5]; var suffix = res[6]; var asterisk = res[7]; var repeat = suffix === '+' || suffix === '*'; var optional = suffix === '?' || suffix === '*'; var delimiter = prefix || '/'; var pattern = capture || group || (asterisk ? '.*' : '[^' + delimiter + ']+?'); tokens.push({ name: name || key++, prefix: prefix || '', delimiter: delimiter, optional: optional, repeat: repeat, pattern: escapeGroup(pattern) }); } // Match any characters still remaining. if (index < str.length) { path += str.substr(index); } // If the path exists, push it onto the end. if (path) { tokens.push(path); } return tokens } /** * Compile a string to a template function for the path. * * @param {String} str * @return {Function} */ function compile (str) { return tokensToFunction(parse(str)) } /** * Expose a method for transforming tokens into the path function. */ function tokensToFunction (tokens) { // Compile all the tokens into regexps. var matches = new Array(tokens.length); // Compile all the patterns before compilation. for (var i = 0; i < tokens.length; i++) { if (typeof tokens[i] === 'object') { matches[i] = new RegExp('^' + tokens[i].pattern + '$'); } } return function (obj) { var path = ''; var data = obj || {}; for (var i = 0; i < tokens.length; i++) { var token = tokens[i]; if (typeof token === 'string') { path += token; continue } var value = data[token.name]; var segment; if (value == null) { if (token.optional) { continue } else { throw new TypeError('Expected "' + token.name + '" to be defined') } } if (isarray(value)) { if (!token.repeat) { throw new TypeError('Expected "' + token.name + '" to not repeat, but received "' + value + '"') } if (value.length === 0) { if (token.optional) { continue } else { throw new TypeError('Expected "' + token.name + '" to not be empty') } } for (var j = 0; j < value.length; j++) { segment = encodeURIComponent(value[j]); if (!matches[i].test(segment)) { throw new TypeError('Expected all "' + token.name + '" to match "' + token.pattern + '", but received "' + segment + '"') } path += (j === 0 ? token.prefix : token.delimiter) + segment; } continue } segment = encodeURIComponent(value); if (!matches[i].test(segment)) { throw new TypeError('Expected "' + token.name + '" to match "' + token.pattern + '", but received "' + segment + '"') } path += token.prefix + segment; } return path } } /** * Escape a regular expression string. * * @param {String} str * @return {String} */ function escapeString (str) { return str.replace(/([.+*?=^!:${}()[\]|\/])/g, '\\$1') } /** * Escape the capturing group by escaping special characters and meaning. * * @param {String} group * @return {String} */ function escapeGroup (group) { return group.replace(/([=!:$\/()])/g, '\\$1') } /** * Attach the keys as a property of the regexp. * * @param {RegExp} re * @param {Array} keys * @return {RegExp} */ function attachKeys (re, keys) { re.keys = keys; return re } /** * Get the flags for a regexp from the options. * * @param {Object} options * @return {String} */ function flags (options) { return options.sensitive ? '' : 'i' } /** * Pull out keys from a regexp. * * @param {RegExp} path * @param {Array} keys * @return {RegExp} */ function regexpToRegexp (path, keys) { // Use a negative lookahead to match only capturing groups. var groups = path.source.match(/\((?!\?)/g); if (groups) { for (var i = 0; i < groups.length; i++) { keys.push({ name: i, prefix: null, delimiter: null, optional: false, repeat: false, pattern: null }); } } return attachKeys(path, keys) } /** * Transform an array into a regexp. * * @param {Array} path * @param {Array} keys * @param {Object} options * @return {RegExp} */ function arrayToRegexp (path, keys, options) { var parts = []; for (var i = 0; i < path.length; i++) { parts.push(pathToRegexp(path[i], keys, options).source); } var regexp = new RegExp('(?:' + parts.join('|') + ')', flags(options)); return attachKeys(regexp, keys) } /** * Create a path regexp from string input. * * @param {String} path * @param {Array} keys * @param {Object} options * @return {RegExp} */ function stringToRegexp (path, keys, options) { var tokens = parse(path); var re = tokensToRegExp(tokens, options); // Attach keys back to the regexp. for (var i = 0; i < tokens.length; i++) { if (typeof tokens[i] !== 'string') { keys.push(tokens[i]); } } return attachKeys(re, keys) } /** * Expose a function for taking tokens and returning a RegExp. * * @param {Array} tokens * @param {Array} keys * @param {Object} options * @return {RegExp} */ function tokensToRegExp (tokens, options) { options = options || {}; var strict = options.strict; var end = options.end !== false; var route = ''; var lastToken = tokens[tokens.length - 1]; var endsWithSlash = typeof lastToken === 'string' && /\/$/.test(lastToken); // Iterate over the tokens and create our regexp string. for (var i = 0; i < tokens.length; i++) { var token = tokens[i]; if (typeof token === 'string') { route += escapeString(token); } else { var prefix = escapeString(token.prefix); var capture = token.pattern; if (token.repeat) { capture += '(?:' + prefix + capture + ')*'; } if (token.optional) { if (prefix) { capture = '(?:' + prefix + '(' + capture + '))?'; } else { capture = '(' + capture + ')?'; } } else { capture = prefix + '(' + capture + ')'; } route += capture; } } // In non-strict mode we allow a slash at the end of match. If the path to // match already ends with a slash, we remove it for consistency. The slash // is valid at the end of a path match, not in the middle. This is important // in non-ending mode, where "/test/" shouldn't match "/test//route". if (!strict) { route = (endsWithSlash ? route.slice(0, -2) : route) + '(?:\\/(?=$))?'; } if (end) { route += '$'; } else { // In non-ending mode, we need the capturing groups to match as much as // possible by using a positive lookahead to the end or next path segment. route += strict && endsWithSlash ? '' : '(?=\\/|$)'; } return new RegExp('^' + route, flags(options)) } /** * Normalize the given path string, returning a regular expression. * * An empty array can be passed in for the keys, which will hold the * placeholder key descriptions. For example, using `/user/:id`, `keys` will * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`. * * @param {(String|RegExp|Array)} path * @param {Array} [keys] * @param {Object} [options] * @return {RegExp} */ function pathToRegexp (path, keys, options) { keys = keys || []; if (!isarray(keys)) { options = keys; keys = []; } else if (!options) { options = {}; } if (path instanceof RegExp) { return regexpToRegexp(path, keys, options) } if (isarray(path)) { return arrayToRegexp(path, keys, options) } return stringToRegexp(path, keys, options) } pathToRegexp_1.parse = parse_1; pathToRegexp_1.compile = compile_1; pathToRegexp_1.tokensToFunction = tokensToFunction_1; pathToRegexp_1.tokensToRegExp = tokensToRegExp_1; /** * Module dependencies. */ /** * Module exports. */ var page_js = page; page.default = page; page.Context = Context; page.Route = Route; page.sameOrigin = sameOrigin; /** * Short-cuts for global-object checks */ var hasDocument = ('undefined' !== typeof document); var hasWindow = ('undefined' !== typeof window); var hasHistory = ('undefined' !== typeof history); var hasProcess = typeof process !== 'undefined'; /** * Detect click event */ var clickEvent = hasDocument && document.ontouchstart ? 'touchstart' : 'click'; /** * To work properly with the URL * history.location generated polyfill in https://github.com/devote/HTML5-History-API */ var isLocation = hasWindow && !!(window.history.location || window.location); /** * Perform initial dispatch. */ var dispatch = true; /** * Decode URL components (query string, pathname, hash). * Accommodates both regular percent encoding and x-www-form-urlencoded format. */ var decodeURLComponents = true; /** * Base path. */ var base = ''; /** * Strict path matching. */ var strict = false; /** * Running flag. */ var running; /** * HashBang option */ var hashbang = false; /** * Previous context, for capturing * page exit events. */ var prevContext; /** * The window for which this `page` is running */ var pageWindow; /** * Register `path` with callback `fn()`, * or route `path`, or redirection, * or `page.start()`. * * page(fn); * page('*', fn); * page('/user/:id', load, user); * page('/user/' + user.id, { some: 'thing' }); * page('/user/' + user.id); * page('/from', '/to') * page(); * * @param {string|!Function|!Object} path * @param {Function=} fn * @api public */ function page(path, fn) { // if ('function' === typeof path) { return page('*', path); } // route to if ('function' === typeof fn) { var route = new Route(/** @type {string} */ (path)); for (var i = 1; i < arguments.length; ++i) { page.callbacks.push(route.middleware(arguments[i])); } // show with [state] } else if ('string' === typeof path) { page['string' === typeof fn ? 'redirect' : 'show'](path, fn); // start [options] } else { page.start(path); } } /** * Callback functions. */ page.callbacks = []; page.exits = []; /** * Current path being processed * @type {string} */ page.current = ''; /** * Number of pages navigated to. * @type {number} * * page.len == 0; * page('/login'); * page.len == 1; */ page.len = 0; /** * Get or set basepath to `path`. * * @param {string} path * @api public */ page.base = function(path) { if (0 === arguments.length) return base; base = path; }; /** * Get or set strict path matching to `enable` * * @param {boolean} enable * @api public */ page.strict = function(enable) { if (0 === arguments.length) return strict; strict = enable; }; /** * Bind with the given `options`. * * Options: * * - `click` bind to click events [true] * - `popstate` bind to popstate [true] * - `dispatch` perform initial dispatch [true] * * @param {Object} options * @api public */ page.start = function(options) { options = options || {}; if (running) return; running = true; pageWindow = options.window || (hasWindow && window); if (false === options.dispatch) dispatch = false; if (false === options.decodeURLComponents) decodeURLComponents = false; if (false !== options.popstate && hasWindow) pageWindow.addEventListener('popstate', onpopstate, false); if (false !== options.click && hasDocument) { pageWindow.document.addEventListener(clickEvent, onclick, false); } hashbang = !!options.hashbang; if(hashbang && hasWindow && !hasHistory) { pageWindow.addEventListener('hashchange', onpopstate, false); } if (!dispatch) return; var url; if(isLocation) { var loc = pageWindow.location; if(hashbang && ~loc.hash.indexOf('#!')) { url = loc.hash.substr(2) + loc.search; } else if (hashbang) { url = loc.search + loc.hash; } else { url = loc.pathname + loc.search + loc.hash; } } page.replace(url, null, true, dispatch); }; /** * Unbind click and popstate event handlers. * * @api public */ page.stop = function() { if (!running) return; page.current = ''; page.len = 0; running = false; hasDocument && pageWindow.document.removeEventListener(clickEvent, onclick, false); hasWindow && pageWindow.removeEventListener('popstate', onpopstate, false); hasWindow && pageWindow.removeEventListener('hashchange', onpopstate, false); }; /** * Show `path` with optional `state` object. * * @param {string} path * @param {Object=} state * @param {boolean=} dispatch * @param {boolean=} push * @return {!Context} * @api public */ page.show = function(path, state, dispatch, push) { var ctx = new Context(path, state), prev = prevContext; prevContext = ctx; page.current = ctx.path; if (false !== dispatch) page.dispatch(ctx, prev); if (false !== ctx.handled && false !== push) ctx.pushState(); return ctx; }; /** * Goes back in the history * Back should always let the current route push state and then go back. * * @param {string} path - fallback path to go back if no more history exists, if undefined defaults to page.base * @param {Object=} state * @api public */ page.back = function(path, state) { if (page.len > 0) { // this may need more testing to see if all browsers // wait for the next tick to go back in history hasHistory && pageWindow.history.back(); page.len--; } else if (path) { setTimeout(function() { page.show(path, state); }); }else{ setTimeout(function() { page.show(getBase(), state); }); } }; /** * Register route to redirect from one path to other * or just redirect to another route * * @param {string} from - if param 'to' is undefined redirects to 'from' * @param {string=} to * @api public */ page.redirect = function(from, to) { // Define route from a path to another if ('string' === typeof from && 'string' === typeof to) { page(from, function(e) { setTimeout(function() { page.replace(/** @type {!string} */ (to)); }, 0); }); } // Wait for the push state and replace it with another if ('string' === typeof from && 'undefined' === typeof to) { setTimeout(function() { page.replace(from); }, 0); } }; /** * Replace `path` with optional `state` object. * * @param {string} path * @param {Object=} state * @param {boolean=} init * @param {boolean=} dispatch * @return {!Context} * @api public */ page.replace = function(path, state, init, dispatch) { var ctx = new Context(path, state), prev = prevContext; prevContext = ctx; page.current = ctx.path; ctx.init = init; ctx.save(); // save before dispatching, which may redirect if (false !== dispatch) page.dispatch(ctx, prev); return ctx; }; /** * Dispatch the given `ctx`. * * @param {Context} ctx * @api private */ page.dispatch = function(ctx, prev) { var i = 0, j = 0; function nextExit() { var fn = page.exits[j++]; if (!fn) return nextEnter(); fn(prev, nextExit); } function nextEnter() { var fn = page.callbacks[i++]; if (ctx.path !== page.current) { ctx.handled = false; return; } if (!fn) return unhandled(ctx); fn(ctx, nextEnter); } if (prev) { nextExit(); } else { nextEnter(); } }; /** * Unhandled `ctx`. When it's not the initial * popstate then redirect. If you wish to handle * 404s on your own use `page('*', callback)`. * * @param {Context} ctx * @api private */ function unhandled(ctx) { if (ctx.handled) return; var current; if (hashbang) { current = isLocation && getBase() + pageWindow.location.hash.replace('#!', ''); } else { current = isLocation && pageWindow.location.pathname + pageWindow.location.search; } if (current === ctx.canonicalPath) return; page.stop(); ctx.handled = false; isLocation && (pageWindow.location.href = ctx.canonicalPath); } /** * Register an exit route on `path` with * callback `fn()`, which will be called * on the previous context when a new * page is visited. */ page.exit = function(path, fn) { if (typeof path === 'function') { return page.exit('*', path); } var route = new Route(path); for (var i = 1; i < arguments.length; ++i) { page.exits.push(route.middleware(arguments[i])); } }; /** * Remove URL encoding from the given `str`. * Accommodates whitespace in both x-www-form-urlencoded * and regular percent-encoded form. * * @param {string} val - URL component to decode */ function decodeURLEncodedURIComponent(val) { if (typeof val !== 'string') { return val; } return decodeURLComponents ? decodeURIComponent(val.replace(/\+/g, ' ')) : val; } /** * Initialize a new "request" `Context` * with the given `path` and optional initial `state`. * * @constructor * @param {string} path * @param {Object=} state * @api public */ function Context(path, state) { var pageBase = getBase(); if ('/' === path[0] && 0 !== path.indexOf(pageBase)) path = pageBase + (hashbang ? '#!' : '') + path; var i = path.indexOf('?'); this.canonicalPath = path; this.path = path.replace(pageBase, '') || '/'; if (hashbang) this.path = this.path.replace('#!', '') || '/'; this.title = (hasDocument && pageWindow.document.title); this.state = state || {}; this.state.path = path; this.querystring = ~i ? decodeURLEncodedURIComponent(path.slice(i + 1)) : ''; this.pathname = decodeURLEncodedURIComponent(~i ? path.slice(0, i) : path); this.params = {}; // fragment this.hash = ''; if (!hashbang) { if (!~this.path.indexOf('#')) return; var parts = this.path.split('#'); this.path = this.pathname = parts[0]; this.hash = decodeURLEncodedURIComponent(parts[1]) || ''; this.querystring = this.querystring.split('#')[0]; } } /** * Expose `Context`. */ page.Context = Context; /** * Push state. * * @api private */ Context.prototype.pushState = function() { page.len++; if (hasHistory) { pageWindow.history.pushState(this.state, this.title, hashbang && this.path !== '/' ? '#!' + this.path : this.canonicalPath); } }; /** * Save the context state. * * @api public */ Context.prototype.save = function() { if (hasHistory && pageWindow.location.protocol !== 'file:') { pageWindow.history.replaceState(this.state, this.title, hashbang && this.path !== '/' ? '#!' + this.path : this.canonicalPath); } }; /** * Initialize `Route` with the given HTTP `path`, * and an array of `callbacks` and `options`. * * Options: * * - `sensitive` enable case-sensitive routes * - `strict` enable strict matching for trailing slashes * * @constructor * @param {string} path * @param {Object=} options * @api private */ function Route(path, options) { options = options || {}; options.strict = options.strict || strict; this.path = (path === '*') ? '(.*)' : path; this.method = 'GET'; this.regexp = pathToRegexp_1(this.path, this.keys = [], options); } /** * Expose `Route`. */ page.Route = Route; /** * Return route middleware with * the given callback `fn()`. * * @param {Function} fn * @return {Function} * @api public */ Route.prototype.middleware = function(fn) { var self = this; return function(ctx, next) { if (self.match(ctx.path, ctx.params)) return fn(ctx, next); next(); }; }; /** * Check if this route matches `path`, if so * populate `params`. * * @param {string} path * @param {Object} params * @return {boolean} * @api private */ Route.prototype.match = function(path, params) { var keys = this.keys, qsIndex = path.indexOf('?'), pathname = ~qsIndex ? path.slice(0, qsIndex) : path, m = this.regexp.exec(decodeURIComponent(pathname)); if (!m) return false; for (var i = 1, len = m.length; i < len; ++i) { var key = keys[i - 1]; var val = decodeURLEncodedURIComponent(m[i]); if (val !== undefined || !(hasOwnProperty.call(params, key.name))) { params[key.name] = val; } } return true; }; /** * Handle "populate" events. */ var onpopstate = (function () { var loaded = false; if ( ! hasWindow ) { return; } if (hasDocument && document.readyState === 'complete') { loaded = true; } else { window.addEventListener('load', function() { setTimeout(function() { loaded = true; }, 0); }); } return function onpopstate(e) { if (!loaded) return; if (e.state) { var path = e.state.path; page.replace(path, e.state); } else if (isLocation) { var loc = pageWindow.location; page.show(loc.pathname + loc.hash, undefined, undefined, false); } }; })(); /** * Handle "click" events. */ /* jshint +W054 */ function onclick(e) { if (1 !== which(e)) return; if (e.metaKey || e.ctrlKey || e.shiftKey) return; if (e.defaultPrevented) return; // ensure link // use shadow dom when available var el = e.path ? e.path[0] : e.target; // continue ensure link // el.nodeName for svg links are 'a' instead of 'A' while (el && 'A' !== el.nodeName.toUpperCase()) el = el.parentNode; if (!el || 'A' !== el.nodeName.toUpperCase()) return; // check if link is inside an svg // in this case, both href and target are always inside an object var svg = (typeof el.href === 'object') && el.href.constructor.name === 'SVGAnimatedString'; // Ignore if tag has // 1. "download" attribute // 2. rel="external" attribute if (el.hasAttribute('download') || el.getAttribute('rel') === 'external') return; // ensure non-hash for the same path var link = el.getAttribute('href'); if(!hashbang && samePath(el) && (el.hash || '#' === link)) return; // Check for mailto: in the href if (link && link.indexOf('mailto:') > -1) return; // check target // svg target is an object and its desired value is in .baseVal property if (svg ? el.target.baseVal : el.target) return; // x-origin // note: svg links that are not relative don't call click events (and skip page.js) // consequently, all svg links tested inside page.js are relative and in the same origin if (!svg && !sameOrigin(el.href)) return; // rebuild path // There aren't .pathname and .search properties in svg links, so we use href // Also, svg href is an object and its desired value is in .baseVal property var path = svg ? el.href.baseVal : (el.pathname + el.search + (el.hash || '')); path = path[0] !== '/' ? '/' + path : path; // strip leading "/[drive letter]:" on NW.js on Windows if (hasProcess && path.match(/^\/[a-zA-Z]:\//)) { path = path.replace(/^\/[a-zA-Z]:\//, '/'); } // same page var orig = path; var pageBase = getBase(); if (path.indexOf(pageBase) === 0) { path = path.substr(base.length); } if (hashbang) path = path.replace('#!', ''); if (pageBase && orig === path) return; e.preventDefault(); page.show(orig); } /** * Event button. */ function which(e) { e = e || (hasWindow && window.event); return null == e.which ? e.button : e.which; } /** * Convert to a URL object */ function toURL(href) { if(typeof URL === 'function' && isLocation) { return new URL(href, location.toString()); } else if (hasDocument) { var anc = document.createElement('a'); anc.href = href; return anc; } } /** * Check if `href` is the same origin. */ function sameOrigin(href) { if(!href || !isLocation) return false; var url = toURL(href); var loc = pageWindow.location; return loc.protocol === url.protocol && loc.hostname === url.hostname && loc.port === url.port; } function samePath(url) { if(!isLocation) return false; var loc = pageWindow.location; return url.pathname === loc.pathname && url.search === loc.search; } /** * Gets the `base`, which depends on whether we are using History or * hashbang routing. */ function getBase() { if(!!base) return base; var loc = hasWindow && pageWindow.location; return (hasWindow && hashbang && loc.protocol === 'file:') ? loc.pathname : base; } page.sameOrigin = sameOrigin; return page_js; })));