page.js

var page = (function () {
    var pathtoRegexp = (function () {

        /* isArray */
        var isArray = Array.isArray || function (arr) {
            return Object.prototype.toString.call(arr) == '[object Array]';
        };

        /* pathToRegExp */

        /**
         * 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, "?"]
            // "/route(\\d+)" => [undefined, undefined, undefined, "\d+", undefined]
            '([\\/.])?(?:\\:(\\w+)(?:\\(((?:\\\\.|[^)])*)\\))?|\\(((?:\\\\.|[^)])*)\\))([+*?])?',
            // Match regexp special characters that are always escaped.
            '([.+*?=^!:${}()[\\]|\\/])'
        ].join('|'), 'g');

        /**
         * 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,
                        delimiter: null,
                        optional: false,
                        repeat: false
                    });
                }
            }

            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);
        }

        /**
         * Replace the specific tags with regexp strings.
         *
         * @param  {String} path
         * @param  {Array}  keys
         * @return {String}
         */
        function replacePath(path, keys) {
            var index = 0;

            function replace(_, escaped, prefix, key, capture, group, suffix, escape) {
                if (escaped) {
                    return escaped;
                }

                if (escape) {
                    return '\\' + escape;
                }

                var repeat = suffix === '+' || suffix === '*';
                var optional = suffix === '?' || suffix === '*';

                keys.push({
                    name: key || index++,
                    delimiter: prefix || '/',
                    optional: optional,
                    repeat: repeat
                });

                prefix = prefix ? ('\\' + prefix) : '';
                capture = escapeGroup(capture || group || '[^' + (prefix || '\\/') + ']+?');

                if (repeat) {
                    capture = capture + '(?:' + prefix + capture + ')*';
                }

                if (optional) {
                    return '(?:' + prefix + '(' + capture + '))?';
                }

                // Basic parameter support.
                return prefix + '(' + capture + ')';
            }

            return path.replace(PATH_REGEXP, replace);
        }

        /**
         * 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);
            }

            var strict = options.strict;
            var end = options.end !== false;
            var route = replacePath(path, keys);
            var endsWithSlash = path.charAt(path.length - 1) === '/';

            // 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 attachKeys(new RegExp('^' + route, flags(options)), keys);
        }

        return pathToRegexp;
    })();

    /**
     * Detect click event
     */
    var clickEvent = ('undefined' !== typeof document) && document.ontouchstart ? 'touchstart' : 'click';

    /**
     * To work properly with the URL
     * history.location generated polyfill in https://github.com/devote/HTML5-History-API
     */

    var location = ('undefined' !== typeof window) && (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 = '';

    /**
     * Running flag.
     */

    var running;

    /**
     * HashBang option
     */

    var hashbang = false;

    /**
     * Previous context, for capturing
     * page exit events.
     */

    var prevContext;

    /**
     * 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} path
     * @param {Function} fn...
     * @api public
     */

    function page(path, fn) {
        // <callback>
        if ('function' === typeof path) {
            return page('*', path);
        }

        // route <path> to <callback ...>
        if ('function' === typeof fn) {
            var route = new Route(path);
            for (var i = 1; i < arguments.length; ++i) {
                page.callbacks.push(route.middleware(arguments[i]));
            }
            // show <path> 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;
    };

    /**
     * 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;
        if (false === options.dispatch) dispatch = false;
        if (false === options.decodeURLComponents) decodeURLComponents = false;
        if (false !== options.popstate) window.addEventListener('popstate', onpopstate, false);
        if (false !== options.click) {
            document.addEventListener(clickEvent, onclick, false);
        }
        if (true === options.hashbang) hashbang = true;
        if (!dispatch) return;
        var url = (hashbang && ~location.hash.indexOf('#!')) ? location.hash.substr(2) + location.search : location.pathname + location.search + location.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;
        document.removeEventListener(clickEvent, onclick, false);
        window.removeEventListener('popstate', 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);
        page.current = ctx.path;
        if (false !== dispatch) page.dispatch(ctx);
        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
            history.back();
            page.len--;
        } else if (path) {
            setTimeout(function () {
                page.show(path, state);
            });
        } else {
            setTimeout(function () {
                page.show(base, 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 () {
                setTimeout(function () {
                    page.replace(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);
        page.current = ctx.path;
        ctx.init = init;
        ctx.save(); // save before dispatching, which may redirect
        if (false !== dispatch) page.dispatch(ctx);
        return ctx;
    };

    /**
     * Dispatch the given `ctx`.
     *
     * @param {Object} ctx
     * @api private
     */

    page.dispatch = function (ctx) {
        var prev = prevContext,
            i = 0,
            j = 0;

        prevContext = ctx;

        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 = base + location.hash.replace('#!', '');
        } else {
            current = location.pathname + location.search;
        }

        if (current === ctx.canonicalPath) return;
        page.stop();
        ctx.handled = false;
        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 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`.
     *
     * @param {String} path
     * @param {Object} state
     * @api public
     */

    function Context(path, state) {
        if ('/' === path[0] && 0 !== path.indexOf(base)) path = base + (hashbang ? '#!' : '') + path;
        var i = path.indexOf('?');

        this.canonicalPath = path;
        this.path = path.replace(base, '') || '/';
        if (hashbang) this.path = this.path.replace('#!', '') || '/';

        this.title = 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 = {};
        this.handled = false;

        // fragment
        this.hash = '';
        if (!hashbang) {
            if (!~this.path.indexOf('#')) return;
            var parts = this.path.split('#');
            this.path = 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++;
        history.pushState(this.state, this.title, hashbang && this.path !== '/' ? '#!' + this.path : this.canonicalPath);
    };

    /**
     * Save the context state.
     *
     * @api public
     */

    Context.prototype.save = function () {
        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
     *
     * @param {String} path
     * @param {Object} options.
     * @api private
     */

    function Route(path, options) {
        options = options || {};
        this.path = (path === '*') ? '(.*)' : path;
        this.method = 'GET';
        this.regexp = pathtoRegexp(this.path,
            this.keys = [],
            options.sensitive,
            options.strict);
    }

    /**
     * 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 ('undefined' === typeof window) {
            return;
        }
        if (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 {
                page.show(location.pathname + location.hash, undefined, undefined, false);
            }
        };
    })();

    /**
     * Handle "click" events.
     */

    function onclick(e) {

        if (1 !== which(e)) return;

        if (e.metaKey || e.ctrlKey || e.shiftKey) return;
        if (e.defaultPrevented) return;


        // ensure link
        var el = e.target;
        while (el && 'A' !== el.nodeName) el = el.parentNode;
        if (!el || 'A' !== el.nodeName) return;


        // 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 && el.pathname === location.pathname && (el.hash || '#' === link)) return;


        // Check for mailto: in the href
        if (link && link.indexOf('mailto:') > -1) return;

        // check target
        if (el.target) return;

        // x-origin
        if (!sameOrigin(el.href)) return;


        // rebuild path
        var path = el.pathname + el.search + (el.hash || '');

        // strip leading "/[drive letter]:" on NW.js on Windows
        if (typeof process !== 'undefined' && path.match(/^\/[a-zA-Z]:\//)) {
            path = path.replace(/^\/[a-zA-Z]:\//, '/');
        }

        // same page
        var orig = path;

        if (path.indexOf(base) === 0) {
            path = path.substr(base.length);
        }

        if (hashbang) path = path.replace('#!', '');

        if (base && orig === path) return;

        e.preventDefault();
        page.show(orig);
    }

    /**
     * Event button.
     */

    function which(e) {
        e = e || window.event;
        return null === e.which ? e.button : e.which;
    }

    /**
     * Check if `href` is the same origin.
     */

    function sameOrigin(href) {
        var origin = location.protocol + '//' + location.hostname;
        if (location.port) origin += ':' + location.port;
        return (href && (0 === href.indexOf(origin)));
    }

    page.sameOrigin = sameOrigin;

    return page;

})();