history.js

SugarCRM5.1 开源PHP客户关系管理系统

/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.4.1
*/
/**
 * The Browser History Manager provides the ability to use the
 * back/forward navigation buttons in a DHTML application. It also allows
 * a DHTML application to be bookmarked in a specific state.
 *
 * @module history
 * @requires yahoo,event
 * @title Browser History Manager
 * @experimental
 */

/**
 * The History class provides the ability to use the back/forward navigation
 * buttons in a DHTML application. It also allows a DHTML application to
 * be bookmarked in a specific state.
 *
 * @class History
 * @constructor
 */
Ext.ux.History = function () {

    /**
     * Our hidden IFrame used to store the browsing history.
     *
     * @property _iframe
     * @type HTMLIFrameElement
     * @default null
     * @private
     */
    var _iframe = null;

    /**
     * INPUT field (with type="hidden" or type="text") or TEXTAREA.
     * This field keeps the value of the initial state, current state
     * the list of all states across pages within a single browser session.
     *
     * @property _storageField
     * @type HTMLInputElement|HTMLTextAreaElement
     * @default null
     * @private
     */
    var _storageField = null;

    /**
     * Flag used to tell whether Ext.ux.History.initialize has been called.
     *
     * @property _initialized
     * @type boolean
     * @default false
     * @private
     */
    var _initialized = false;

    /**
     * Flag used to tell whether the storage field is ready to be used.
     *
     * @property _storageFieldReady
     * @type boolean
     * @default false
     * @private
     */
    var _storageFieldReady = false;

    /**
     * List of registered modules.
     *
     * @property _modules
     * @type array
     * @default []
     * @private
     */
    var _modules = [];

    /**
     * List of fully qualified states. This is used only by Safari.
     *
     * @property _fqstates
     * @type array
     * @default []
     * @private
     */
    var _fqstates = [];

    /**
     * Trims a string.
     *
     * @method _trim
     * @param {string} str The string to be trimmed.
     * @return {string} The trimmed string
     * @private
     */
    function _trim( str ) {
        return str.replace( /^\s*(\S*(\s+\S+)*)\s*$/, "$1" );
    }

    /**
     * location.hash is a bit buggy on Opera. I have seen instances where
     * navigating the history using the back/forward buttons, and hence
     * changing the URL, would not change location.hash. That's ok, the
     * implementation of an equivalent is trivial.
     *
     * @method _getHash
     * @return {string} The hash portion of the document's location
     * @private
     */
    function _getHash() {
        var i, href;
        href = top.location.href;
        i = href.indexOf("#");
        return i >= 0 ? href.substr(i + 1) : null;
    }

    /**
     * Stores all the registered modules' initial state and current state.
     * On Safari, we also store all the fully qualified states visited by
     * the application within a single browser session. The storage takes
     * place in the form field specified during initialization.
     *
     * @method _storeStates
     * @private
     */
    function _storeStates() {

        var moduleName;
        var moduleObj;
        var initialStates = [];
        var currentStates = [];

        for ( moduleName in _modules ) {
            if ( _modules.hasOwnProperty(moduleName ) ) {
                moduleObj = _modules[moduleName];
                initialStates.push(moduleName + "=" + moduleObj.initialState);
                currentStates.push(moduleName + "=" + moduleObj.currentState);
            }
        }

        _storageField.value = initialStates.join( "&" ) + "|" + currentStates.join( "&" );

        if ( Ext.isSafari ) {
            _storageField.value += "|" + _fqstates.join( "," );
        }
    }

    /**
     * Sets the new currentState attribute of all modules depending on the new
     * fully qualified state. Also notifies the modules which current state has
     * changed.
     *
     * @method _handleFQStateChange
     * @param {string} fqstate Fully qualified state
     * @private
     */
    function _handleFQStateChange( fqstate ) {

        var i;
        var len;
        var moduleName;
        var moduleObj;
        var modules;
        var states;
        var tokens;
        var currentState;

        if ( !fqstate ) {
            // Notifies all modules
            for ( moduleName in _modules ) {
                if ( _modules.hasOwnProperty(moduleName ) ) {
                    moduleObj = _modules[moduleName];
                    moduleObj.currentState = moduleObj.initialState;
                    moduleObj.onStateChange( unescape( moduleObj.currentState ) );
                }
            }
            return;
        }

        modules = [];
        states = fqstate.split( "&" );
        for ( i = 0, len = states.length ; i < len ; i++ ) {
            tokens = states[i].split( "=" );
            if ( tokens.length === 2 ) {
                moduleName = tokens[0];
                currentState = tokens[1];
                modules[moduleName] = currentState;
            }
        }

        for ( moduleName in _modules ) {
            if ( _modules.hasOwnProperty(moduleName ) ) {
                moduleObj = _modules[moduleName];
                currentState = modules[moduleName];
                if ( !currentState || moduleObj.currentState !== currentState ) {
                    moduleObj.currentState = currentState || moduleObj.initialState;
                    moduleObj.onStateChange( unescape( moduleObj.currentState ) );
                }
            }
        }
    }

    /**
     * Update the IFrame with our new state.
     *
     * @method _updateIFrame
     * @private
     * @return {boolean} true if successful. false otherwise.
     */
    function _updateIFrame (fqstate) {

        var html, doc;

        html = '<html><body><div id="state">' + fqstate + '</div></body></html>';

        try {
            doc = _iframe.contentWindow.document;
            doc.open();
            doc.write(html);
            doc.close();
            return true;
        } catch (e) {
            return false;
        }
    }

    /**
     * Periodically checks whether our internal IFrame is ready to be used.
     *
     * @method _checkIframeLoaded
     * @private
     */
    function _checkIframeLoaded() {

        var doc, elem, fqstate, hash;

        if ( !_iframe.contentWindow || !_iframe.contentWindow.document ) {
            // Check again in 10 msec...
            setTimeout( _checkIframeLoaded, 10 );
            return;
        }

        // Start the thread that will have the responsibility to
        // periodically check whether a navigate operation has been
        // requested on the main window. This will happen when
        // Ext.ux.History.navigate has been called or after
        // the user has hit the back/forward button.

        doc = _iframe.contentWindow.document;
        elem = doc.getElementById( "state" );
        // We must use innerText, and not innerHTML because our string contains
        // the "&" character (which would end up being escaped as "&amp;") and
        // the string comparison would fail...
        fqstate = elem ? elem.innerText : null;

		hash = _getHash();

        setInterval( function () {

            var newfqstate, states, moduleName, moduleObj, newHash, historyLength;

            doc = _iframe.contentWindow.document;
            elem = doc.getElementById( "state" );
            // See my comment above about using innerText instead of innerHTML...
            newfqstate = elem ? elem.innerText : null;

            newHash = _getHash();

            if (newfqstate !== fqstate) {

                fqstate = newfqstate;
                _handleFQStateChange( fqstate );

                if ( !fqstate ) {
                    states = [];
                    for ( moduleName in _modules ) {
                        if ( _modules.hasOwnProperty(moduleName ) ) {
                            moduleObj = _modules[moduleName];
                            states.push( moduleName + "=" + moduleObj.initialState );
                        }
                    }
                    newHash = states.join("&");
                } else {
                    newHash = fqstate;
                }

                // Allow the state to be bookmarked by setting the top window's
                // URL fragment identifier. Note that here, we are on IE, and
                // IE does not touch the browser history when setting the hash
                // (unlike all the other browsers). I used to write:
                //     top.location.replace( "#" + hash );
                // but this had a side effect when the page was not the top frame.
                top.location.hash = newHash;
                hash = newHash;

                _storeStates();

            } else if (newHash !== hash) {

                // The hash has changed. The user might have clicked on a link,
                // or modified the URL directly, or opened the same application
                // bookmarked in a specific state using a bookmark. However, we
                // know the hash change was not caused by a hit on the back or
                // forward buttons, or by a call to navigate() (because it would
                // have been handled above) We must handle these cases, which is
                // why we also need to keep track of hash changes on IE!

                // Note that IE6 has some major issues with this kind of user
                // interaction (the history stack gets completely messed up)
                // but it seems to work fine on IE7.

                hash = newHash;

                // Now, store a new history entry. The following will cause the
                // code above to execute, doing all the dirty work for us...
                _updateIFrame(newHash);
            }

        }, 50);

        _initialized = true;
    }

  /**
   * Finish up the initialization of the Browser History Manager.
   *
   * @method _initialize
   * @private
   */
    function _initialize() {
      var i;
      var len;
      var parts;
      var tokens;
      var moduleName;
      var moduleObj;
      var initialStates;
      var initialState;
      var currentStates;
      var currentState;
      var counter;
      var hash;

      _storageField = document.getElementById( "yui_hist_field" );

      // Decode the content of our storage field...
      parts = _storageField.value.split( "|" );

      if ( parts.length > 1 ) {

          initialStates = parts[0].split( "&" );
          for ( i = 0, len = initialStates.length ; i < len ; i++ ) {
              tokens = initialStates[i].split( "=" );
              if ( tokens.length === 2 ) {
                  moduleName = tokens[0];
                  initialState = tokens[1];
                  moduleObj = _modules[moduleName];
                  if ( moduleObj ) {
                      moduleObj.initialState = initialState;
                  }
              }
          }

          currentStates = parts[1].split( "&" );
          for ( i = 0, len = currentStates.length ; i < len ; i++ ) {
              tokens = currentStates[i].split( "=" );
              if ( tokens.length >= 2 ) {
                  moduleName = tokens[0];
                  currentState = tokens[1];
                  moduleObj = _modules[moduleName];
                  if ( moduleObj ) {
                      moduleObj.currentState = currentState;
                  }
              }
          }
      }

      if ( parts.length > 2 ) {
          _fqstates = parts[2].split( "," );
      }

      _storageFieldReady = true;

      if ( Ext.isIE ) {

          _iframe = document.getElementById( "yui_hist_iframe" );
          _checkIframeLoaded();

      } else {

          // Start the thread that will have the responsibility to
          // periodically check whether a navigate operation has been
          // requested on the main window. This will happen when