File: history/js/history-hash.js

            /**
             * Provides browser history management backed by
             * <code>window.location.hash</code>, as well as convenience methods for working
             * with the location hash and a synthetic <code>hashchange</code> event that
             * normalizes differences across browsers.
             *
             * @module history
             * @submodule history-hash
             * @since 3.2.0
             * @class HistoryHash
             * @extends HistoryBase
             * @constructor
             * @param {Object} config (optional) Configuration object. See the HistoryBase
             *   documentation for details.
             */
            
            var HistoryBase = Y.HistoryBase,
                Lang        = Y.Lang,
                YArray      = Y.Array,
                YObject     = Y.Object,
                GlobalEnv   = YUI.namespace('Env.HistoryHash'),
            
                SRC_HASH    = 'hash',
            
                hashNotifiers,
                oldHash,
                oldUrl,
                win             = Y.config.win,
                useHistoryHTML5 = Y.config.useHistoryHTML5;
            
            function HistoryHash() {
                HistoryHash.superclass.constructor.apply(this, arguments);
            }
            
            Y.extend(HistoryHash, HistoryBase, {
                // -- Initialization -------------------------------------------------------
                _init: function (config) {
                    var bookmarkedState = HistoryHash.parseHash();
            
                    // If an initialState was provided, merge the bookmarked state into it
                    // (the bookmarked state wins).
                    config = config || {};
            
                    this._initialState = config.initialState ?
                            Y.merge(config.initialState, bookmarkedState) : bookmarkedState;
            
                    // Subscribe to the synthetic hashchange event (defined below) to handle
                    // changes.
                    Y.after('hashchange', Y.bind(this._afterHashChange, this), win);
            
                    HistoryHash.superclass._init.apply(this, arguments);
                },
            
                // -- Protected Methods ----------------------------------------------------
                _change: function (src, state, options) {
                    // Stringify all values to ensure that comparisons don't fail after
                    // they're coerced to strings in the location hash.
                    YObject.each(state, function (value, key) {
                        if (Lang.isValue(value)) {
                            state[key] = value.toString();
                        }
                    });
            
                    return HistoryHash.superclass._change.call(this, src, state, options);
                },
            
                _storeState: function (src, newState) {
                    var decode  = HistoryHash.decode,
                        newHash = HistoryHash.createHash(newState);
            
                    HistoryHash.superclass._storeState.apply(this, arguments);
            
                    // Update the location hash with the changes, but only if the new hash
                    // actually differs from the current hash (this avoids creating multiple
                    // history entries for a single state).
                    //
                    // We always compare decoded hashes, since it's possible that the hash
                    // could be set incorrectly to a non-encoded value outside of
                    // HistoryHash.
                    if (src !== SRC_HASH && decode(HistoryHash.getHash()) !== decode(newHash)) {
                        HistoryHash[src === HistoryBase.SRC_REPLACE ? 'replaceHash' : 'setHash'](newHash);
                    }
                },
            
                // -- Protected Event Handlers ---------------------------------------------
            
                /**
                 * Handler for hashchange events.
                 *
                 * @method _afterHashChange
                 * @param {Event} e
                 * @protected
                 */
                _afterHashChange: function (e) {
                    this._resolveChanges(SRC_HASH, HistoryHash.parseHash(e.newHash), {});
                }
            }, {
                // -- Public Static Properties ---------------------------------------------
                NAME: 'historyHash',
            
                /**
                 * Constant used to identify state changes originating from
                 * <code>hashchange</code> events.
                 *
                 * @property SRC_HASH
                 * @type String
                 * @static
                 * @final
                 */
                SRC_HASH: SRC_HASH,
            
                /**
                 * <p>
                 * Prefix to prepend when setting the hash fragment. For example, if the
                 * prefix is <code>!</code> and the hash fragment is set to
                 * <code>#foo=bar&baz=quux</code>, the final hash fragment in the URL will
                 * become <code>#!foo=bar&baz=quux</code>. This can be used to help make an
                 * Ajax application crawlable in accordance with Google's guidelines at
                 * <a href="http://code.google.com/web/ajaxcrawling/">http://code.google.com/web/ajaxcrawling/</a>.
                 * </p>
                 *
                 * <p>
                 * Note that this prefix applies to all HistoryHash instances. It's not
                 * possible for individual instances to use their own prefixes since they
                 * all operate on the same URL.
                 * </p>
                 *
                 * @property hashPrefix
                 * @type String
                 * @default ''
                 * @static
                 */
                hashPrefix: '',
            
                // -- Protected Static Properties ------------------------------------------
            
                /**
                 * Regular expression used to parse location hash/query strings.
                 *
                 * @property _REGEX_HASH
                 * @type RegExp
                 * @protected
                 * @static
                 * @final
                 */
                _REGEX_HASH: /([^\?#&=]+)=?([^&=]*)/g,
            
                // -- Public Static Methods ------------------------------------------------
            
                /**
                 * Creates a location hash string from the specified object of key/value
                 * pairs.
                 *
                 * @method createHash
                 * @param {Object} params object of key/value parameter pairs
                 * @return {String} location hash string
                 * @static
                 */
                createHash: function (params) {
                    var encode = HistoryHash.encode,
                        hash   = [];
            
                    YObject.each(params, function (value, key) {
                        if (Lang.isValue(value)) {
                            hash.push(encode(key) + '=' + encode(value));
                        }
                    });
            
                    return hash.join('&');
                },
            
                /**
                 * Wrapper around <code>decodeURIComponent()</code> that also converts +
                 * chars into spaces.
                 *
                 * @method decode
                 * @param {String} string string to decode
                 * @return {String} decoded string
                 * @static
                 */
                decode: function (string) {
                    return decodeURIComponent(string.replace(/\+/g, ' '));
                },
            
                /**
                 * Wrapper around <code>encodeURIComponent()</code> that converts spaces to
                 * + chars.
                 *
                 * @method encode
                 * @param {String} string string to encode
                 * @return {String} encoded string
                 * @static
                 */
                encode: function (string) {
                    return encodeURIComponent(string).replace(/%20/g, '+');
                },
            
                /**
                 * Gets the raw (not decoded) current location hash, minus the preceding '#'
                 * character and the hashPrefix (if one is set).
                 *
                 * @method getHash
                 * @return {String} current location hash
                 * @static
                 */
                getHash: (Y.UA.gecko ? function () {
                    // Gecko's window.location.hash returns a decoded string and we want all
                    // encoding untouched, so we need to get the hash value from
                    // window.location.href instead. We have to use UA sniffing rather than
                    // feature detection, since the only way to detect this would be to
                    // actually change the hash.
                    var location = Y.getLocation(),
                        matches  = /#(.*)$/.exec(location.href),
                        hash     = matches && matches[1] || '',
                        prefix   = HistoryHash.hashPrefix;
            
                    return prefix && hash.indexOf(prefix) === 0 ?
                                hash.replace(prefix, '') : hash;
                } : function () {
                    var location = Y.getLocation(),
                        hash     = location.hash.substring(1),
                        prefix   = HistoryHash.hashPrefix;
            
                    // Slight code duplication here, but execution speed is of the essence
                    // since getHash() is called every 50ms to poll for changes in browsers
                    // that don't support native onhashchange. An additional function call
                    // would add unnecessary overhead.
                    return prefix && hash.indexOf(prefix) === 0 ?
                                hash.replace(prefix, '') : hash;
                }),
            
                /**
                 * Gets the current bookmarkable URL.
                 *
                 * @method getUrl
                 * @return {String} current bookmarkable URL
                 * @static
                 */
                getUrl: function () {
                    return location.href;
                },
            
                /**
                 * Parses a location hash string into an object of key/value parameter
                 * pairs. If <i>hash</i> is not specified, the current location hash will
                 * be used.
                 *
                 * @method parseHash
                 * @param {String} hash (optional) location hash string
                 * @return {Object} object of parsed key/value parameter pairs
                 * @static
                 */
                parseHash: function (hash) {
                    var decode = HistoryHash.decode,
                        i,
                        len,
                        match,
                        matches,
                        param,
                        params = {},
                        prefix = HistoryHash.hashPrefix,
                        prefixIndex;
            
                    hash = Lang.isValue(hash) ? hash : HistoryHash.getHash();
            
                    if (prefix) {
                        prefixIndex = hash.indexOf(prefix);
            
                        if (prefixIndex === 0 || (prefixIndex === 1 && hash.charAt(0) === '#')) {
                            hash = hash.replace(prefix, '');
                        }
                    }
            
                    matches = hash.match(HistoryHash._REGEX_HASH) || [];
            
                    for (i = 0, len = matches.length; i < len; ++i) {
                        match = matches[i];
            
                        param = match.split('=');
            
                        if (param.length > 1) {
                            params[decode(param[0])] = decode(param[1]);
                        } else {
                            params[decode(match)] = '';
                        }
                    }
            
                    return params;
                },
            
                /**
                 * Replaces the browser's current location hash with the specified hash
                 * and removes all forward navigation states, without creating a new browser
                 * history entry. Automatically prepends the <code>hashPrefix</code> if one
                 * is set.
                 *
                 * @method replaceHash
                 * @param {String} hash new location hash
                 * @static
                 */
                replaceHash: function (hash) {
                    var location = Y.getLocation(),
                        base     = location.href.replace(/#.*$/, '');
            
                    if (hash.charAt(0) === '#') {
                        hash = hash.substring(1);
                    }
            
                    location.replace(base + '#' + (HistoryHash.hashPrefix || '') + hash);
                },
            
                /**
                 * Sets the browser's location hash to the specified string. Automatically
                 * prepends the <code>hashPrefix</code> if one is set.
                 *
                 * @method setHash
                 * @param {String} hash new location hash
                 * @static
                 */
                setHash: function (hash) {
                    var location = Y.getLocation();
            
                    if (hash.charAt(0) === '#') {
                        hash = hash.substring(1);
                    }
            
                    location.hash = (HistoryHash.hashPrefix || '') + hash;
                }
            });
            
            // -- Synthetic hashchange Event -----------------------------------------------
            
            // TODO: YUIDoc currently doesn't provide a good way to document synthetic DOM
            // events. For now, we're just documenting the hashchange event on the YUI
            // object, which is about the best we can do until enhancements are made to
            // YUIDoc.
            
            /**
            Synthetic <code>window.onhashchange</code> event that normalizes differences
            across browsers and provides support for browsers that don't natively support
            <code>onhashchange</code>.
            
            This event is provided by the <code>history-hash</code> module.
            
            @example
            
                YUI().use('history-hash', function (Y) {
                  Y.on('hashchange', function (e) {
                    // Handle hashchange events on the current window.
                  }, Y.config.win);
                });
            
            @event hashchange
            @param {EventFacade} e Event facade with the following additional
              properties:
            
            <dl>
              <dt>oldHash</dt>
              <dd>
                Previous hash fragment value before the change.
              </dd>
            
              <dt>oldUrl</dt>
              <dd>
                Previous URL (including the hash fragment) before the change.
              </dd>
            
              <dt>newHash</dt>
              <dd>
                New hash fragment value after the change.
              </dd>
            
              <dt>newUrl</dt>
              <dd>
                New URL (including the hash fragment) after the change.
              </dd>
            </dl>
            @for YUI
            @since 3.2.0
            **/
            
            hashNotifiers = GlobalEnv._notifiers;
            
            if (!hashNotifiers) {
                hashNotifiers = GlobalEnv._notifiers = [];
            }
            
            Y.Event.define('hashchange', {
                on: function (node, subscriber, notifier) {
                    // Ignore this subscription if the node is anything other than the
                    // window or document body, since those are the only elements that
                    // should support the hashchange event. Note that the body could also be
                    // a frameset, but that's okay since framesets support hashchange too.
                    if (node.compareTo(win) || node.compareTo(Y.config.doc.body)) {
                        hashNotifiers.push(notifier);
                    }
                },
            
                detach: function (node, subscriber, notifier) {
                    var index = YArray.indexOf(hashNotifiers, notifier);
            
                    if (index !== -1) {
                        hashNotifiers.splice(index, 1);
                    }
                }
            });
            
            oldHash = HistoryHash.getHash();
            oldUrl  = HistoryHash.getUrl();
            
            if (HistoryBase.nativeHashChange) {
                // Wrap the browser's native hashchange event if there's not already a
                // global listener.
                if (!GlobalEnv._hashHandle) {
                    GlobalEnv._hashHandle = Y.Event.attach('hashchange', function (e) {
                        var newHash = HistoryHash.getHash(),
                            newUrl  = HistoryHash.getUrl();
            
                        // Iterate over a copy of the hashNotifiers array since a subscriber
                        // could detach during iteration and cause the array to be re-indexed.
                        YArray.each(hashNotifiers.concat(), function (notifier) {
                            notifier.fire({
                                _event : e,
                                oldHash: oldHash,
                                oldUrl : oldUrl,
                                newHash: newHash,
                                newUrl : newUrl
                            });
                        });
            
                        oldHash = newHash;
                        oldUrl  = newUrl;
                    }, win);
                }
            } else {
                // Begin polling for location hash changes if there's not already a global
                // poll running.
                if (!GlobalEnv._hashPoll) {
                    GlobalEnv._hashPoll = Y.later(50, null, function () {
                        var newHash = HistoryHash.getHash(),
                            facade, newUrl;
            
                        if (oldHash !== newHash) {
                            newUrl = HistoryHash.getUrl();
            
                            facade = {
                                oldHash: oldHash,
                                oldUrl : oldUrl,
                                newHash: newHash,
                                newUrl : newUrl
                            };
            
                            oldHash = newHash;
                            oldUrl  = newUrl;
            
                            YArray.each(hashNotifiers.concat(), function (notifier) {
                                notifier.fire(facade);
                            });
                        }
                    }, null, true);
                }
            }
            
            Y.HistoryHash = HistoryHash;
            
            // HistoryHash will never win over HistoryHTML5 unless useHistoryHTML5 is false.
            if (useHistoryHTML5 === false || (!Y.History && useHistoryHTML5 !== true &&
                    (!HistoryBase.html5 || !Y.HistoryHTML5))) {
                Y.History = HistoryHash;
            }