History.js

define(function (require) {

        var $ = require('jquery')
            , _ = require('underscore')
            , Events = require('./Events')

        // Handles cross-browser history management, based on URL fragments. If the
        // browser does not support `onhashchange`, falls back to polling.
        var History = function () {
            this.handlers = [];
            this.history = []
            _.bindAll(this, 'checkUrl');
        };

        // Cached regex for cleaning leading hashes and slashes .
        var routeStripper = /^[#\/]/;

        // Cached regex for detecting MSIE.
        var isExplorer = /msie [\w.]+/;

        // Has the history handling already been started?
        History.started = false;

        History.prototype = {

            // The default interval to poll for hash changes, if necessary, is
            // twenty times a second.
            interval:50,

            // Gets the true hash value. Cannot use location.hash directly due to bug
            // in Firefox where location.hash will always be decoded.
            getHash:function (windowOverride) {
                var loc = windowOverride ? windowOverride.location : window.location;
                var match = loc.href.match(/#(.*)$/);
                return match ? match[1] : '';
            },

            // Get the cross-browser normalized URL fragment, either from the URL,
            // the hash, or the override.
            getFragment:function (fragment, forcePushState) {
                if (fragment == null) {
                    if (this._hasPushState || forcePushState) {
                        fragment = window.location.pathname;
                        var search = window.location.search;
                        if (search) fragment += search;
                    } else {
                        fragment = this.getHash();
                    }
                }
                if (!fragment.indexOf(this.options.root)) fragment = fragment.substr(this.options.root.length);
                return fragment.replace(routeStripper, '');
            },

            // Start the hash change handling, returning `true` if the current URL matches
            // an existing route, and `false` otherwise.
            start:function (options) {
                if (History.started) throw new Error("History.instance has already been started");
                History.started = true;

                // Figure out the initial configuration. Do we need an iframe?
                // Is pushState desired ... is it available?
                this.options = _.extend({}, {root:'/'}, this.options, options);
                this._wantsHashChange = this.options.hashChange !== false;
                this._wantsPushState = !!this.options.pushState;
                this._hasPushState = !!(this.options.pushState && window.history && window.history.pushState);
                var fragment = this.getFragment();
                var docMode = document.documentMode;
                var oldIE = (isExplorer.exec(navigator.userAgent.toLowerCase()) && (!docMode || docMode <= 7));

                if (oldIE) {
                    this.iframe = $('<iframe src="javascript:0" tabindex="-1" />').hide().appendTo('body')[0].contentWindow;
                    this.navigate(fragment);
                }

                // Depending on whether we're using pushState or hashes, and whether
                // 'onhashchange' is supported, determine how we check the URL state.
                if (this._hasPushState) {
                    $(window).bind('popstate', this.checkUrl);
                } else if (this._wantsHashChange && ('onhashchange' in window) && !oldIE) {
                    $(window).bind('hashchange', this.checkUrl);
                } else if (this._wantsHashChange) {
                    this._checkUrlInterval = setInterval(this.checkUrl, this.interval);
                }

                // Determine if we need to change the base url, for a pushState link
                // opened by a non-pushState browser.
                this.fragment = fragment;
                var loc = window.location;
                var atRoot = loc.pathname == this.options.root;

                // If we've started off with a route from a `pushState`-enabled browser,
                // but we're currently in a browser that doesn't support it...
                if (this._wantsHashChange && this._wantsPushState && !this._hasPushState && !atRoot) {
                    this.fragment = this.getFragment(null, true);
                    window.location.replace(this.options.root + '#' + this.fragment);
                    // Return immediately as browser will do redirect to new url
                    return true;

                    // Or if we've started out with a hash-based route, but we're currently
                    // in a browser where it could be `pushState`-based instead...
                } else if (this._wantsPushState && this._hasPushState && atRoot && loc.hash) {
                    this.fragment = this.getHash().replace(routeStripper, '');
                    window.history.replaceState({}, document.title, loc.protocol + '//' + loc.host + this.options.root + this.fragment);
                }

                if (!this.options.silent) {
                    return this.loadUrl();
                }
            },

            // Disable History.instance, perhaps temporarily. Not useful in a real app,
            // but possibly useful for unit testing Routers.
            stop:function () {
                $(window).unbind('popstate', this.checkUrl).unbind('hashchange', this.checkUrl);
                clearInterval(this._checkUrlInterval);
                History.started = false;
            },

            // Add a route to be tested when the fragment changes. Routes added later
            // may override previous routes.
            route:function (route, callback) {
                this.handlers.unshift({route:route, callback:callback});
            },

            // Checks the current URL to see if it has changed, and if it has,
            // calls `loadUrl`, normalizing across the hidden iframe.
            checkUrl:function (e) {
                var current = this.getFragment();
                if (current == this.fragment && this.iframe) current = this.getFragment(this.getHash(this.iframe));
                if (current == this.fragment) return false;
                if (this.iframe) this.navigate(current);
                this.history.push('/#/' + this.fragment)
                this.loadUrl();
            },

            // Attempt to load the current URL fragment. If a route succeeds with a
            // match, returns `true`. If no defined routes matches the fragment,
            // returns `false`.
            // Multiple routes accepted
            loadUrl:function (fragmentOverride) {
                var fragment = this.fragment = this.getFragment(fragmentOverride),
                    matched = 0;
                _.each(this.handlers, function (handler) {
                    if (handler.route.test(fragment)) {
                        handler.callback(fragment);
                        matched++;
                    }
                });
                if (!matched) {
                    History.applyDefault(fragment);
                }
                return matched;
            },

            // Save a fragment into the hash history, or replace the URL state if the
            // 'replace' option is passed. You are responsible for properly URL-encoding
            // the fragment in advance.
            //
            // The options object can contain `trigger: true` if you wish to have the
            // route callback be fired (not usually desirable), or `replace: true`, if
            // you wish to modify the current URL without adding an entry to the history.
            navigate:function (fragment, options) {
                if (!History.started) return false;
                if (!options || options === true) options = {trigger:options};
                var frag = (fragment || '').replace(routeStripper, '');
                if (this.fragment == frag) return;

                // If pushState is available, we use it to set the fragment as a real URL.
                if (this._hasPushState) {
                    if (frag.indexOf(this.options.root) != 0) frag = this.options.root + frag;
                    this.fragment = frag;
                    window.history[options.replace ? 'replaceState' : 'pushState']({}, document.title, frag);

                    // If hash changes haven't been explicitly disabled, update the hash
                    // fragment to store history.
                } else if (this._wantsHashChange) {
                    this.fragment = frag;
                    this._updateHash(window.location, frag, options.replace);
                    if (this.iframe && (frag != this.getFragment(this.getHash(this.iframe)))) {
                        // Opening and closing the iframe tricks IE7 and earlier to push a history entry on hash-tag change.
                        // When replace is true, we don't want this.
                        if (!options.replace) this.iframe.document.open().close();
                        this._updateHash(this.iframe.location, frag, options.replace);
                    }

                    // If you've told us that you explicitly don't want fallback hashchange-
                    // based history, then `navigate` becomes a page refresh.
                } else {
                    window.location.assign(this.options.root + fragment);
                }

                if (options.silent) {
                    this.fragment = this.getFragment()
                } else if (options.trigger) this.loadUrl(fragment);
            },

            // Update the hash location, either replacing the current entry, or adding
            // a new one to the browser history.
            _updateHash:function (location, fragment, replace) {
                if (replace) {
                    location.replace(location.toString().replace(/(javascript:|#).*$/, '') + '#' + fragment);
                } else {
                    location.hash = fragment;
                }
            },

            back:function (options) {
                if (!this.history.length) return false;
                this.navigate(this.history.pop(), options)
                return true;
            }
        };

        _.extend(History.prototype, Events);

        return History;

    }
);