zpmenu-core.js

zapatec suite 最新版 20070204,非常棒的ajax widgets 工具包

/**
 * @fileoverview Zapatec DHTML Menu Widget.
 *
 * <pre>
 * Copyright (c) 2004-2007 by Zapatec, Inc.
 * http://www.zapatec.com
 * 1700 MLK Way, Berkeley, California,
 * 94709, U.S.A.
 * All rights reserved.
 * </pre>
 */

/* $Id: zpmenu-core.js 7390 2007-06-11 15:36:56Z alex $ */

/**
 * Extends base Zapatec Widget class (utils/zpwidget.js).
 *
 * <pre>
 * <strong>In addition to config options defined in base Zapatec.Widget class
 * provides following config options:</strong>
 *
 * <b>container</b> [object or string] Element or id of element that will hold
 * the menu. Required when sourceType is other than "html". If sourceType is
 * "html" and "container" is not specified, menu "source" element will be
 * replaced with the menu.
 *
 * <b>dynamic</b> [boolean] If true is passed, the tree will use the
 * "dynamic initialization" technique which greatly improves generation time.
 * Some functionality is not available in this mode until all the tree was
 * generated. In "dynamic" mode the tree is initially collapsed and levels are
 * generated "on the fly" as the end user expands them. You can't retrieve nodes
 * by ID (which implies you can't synchronize to certain nodes) until they have
 * been generated.
 *
 * <b>showDelay</b> [number] Delay before a submenu is shown, in milliseconds.
 *
 * <b>hideDelay</b> [number] Delay before a submenu is hidden, in milliseconds.
 *
 * <b>onClick</b> [boolean] Top menu drops on click not on hover.
 *
 * <b>vertical</b> [boolean] Make it a vertical menu.
 *
 * <b>scrollWithWindow</b> [boolean]
 *
 * <b>dropShadow</b> [number]
 *
 * <b>drag</b> [boolean]
 *
 * <b>slide</b> [boolean]
 *
 * <b>glide</b> [boolean]
 *
 * <b>fade</b> [boolean]
 *
 * <b>wipe</b> [boolean]
 *
 * <b>unfurl</b> [boolean]
 *
 * <b>animSpeed</b> [number] percentage animation per frame.
 *
 * <b>defaultIcons</b> [string] If set, all tree items will get an additional TD
 * element containing that string in the class attribute. This helps you
 * to include custom default icons without specifying them as IMG tags in
 * the tree.
 *
 * <b>zIndex</b> [number] Can be used for two menus on the same page. Use higher
 * value for menu which must be in front of other menus.
 *
 * <b>rememberPath</b> [boolean or string] Used to keep track of previous menu
 * location. Optional if pathCookie flag value differs from "__zp_item".
 * Possible values:
 * 1) true: keep track.
 * 2) false: do not keep track.
 * 3) "expand": the menu will open expanded to this previously location.
 *
 * <b>pathCookie</b> [string] Used to keep track of previous menu location. Use
 * this option with or instead of "rememberPath" when you need to specify which
 * cookie will contain path information. This is needed e.g. when you have
 * several menus on a page. If "rememberPath" option is not false and
 * "pathCookie" option is not set, cookie name "__zp_item" will be used by
 * default.
 *
 * <b>triggerEvent</b> [string] Event that will trigger showing of the menu.
 * Possible values:
 * 1) For mouse click: 'mousedown' or 'mouseup' or 'click' (no matter which, all
 *    values treated the same).
 * 2) For keyboard: 'keydown' or 'keyup' or 'keypress' (no matter which, all
 *    values treated the same).
 *
 * <b>triggerKey</b> [number or string] Decimal keyboard scan code or mouse
 * button: "left" or "both". Default: right mouse button.
 * Requires "triggerEvent" to be set.
 * See keyboard scan codes at:
 * http://techwww.in.tu-clausthal.de/Dokumentation/Standards_Bussysteme/ASCII-Tabelle/
 * http://www.nthelp.com/charts.htm
 *
 * <b>triggerObject</b> [string or object] Element id or HTMLElement object
 * associated with the menu. E.g. div inside which user must click to open the
 * menu. Default: window.document.
 * Requires triggerEvent to be set.
 * Also can be following array (to set trigger on several elements):
 * [
 *   [object or string] HTMLElement object or element id ||
 *   {
 *     triggerObject: [object or string] HTMLElement object or element id,
 *     triggerArgs: [any] args that should be available for external scripts
 *   },
 *   ...
 * ]
 * When trigger menu is shown, its "triggerObject" property contains reference
 * to trigger object that last invoked the menu, "triggerArgs" property contains
 * corresponding arguments. External scripts can access those properties.
 * This gives ability to attach menu to several objects and to pass through some
 * piece of data from those objects to external scripts. E.g. to determine,
 * which cell of the grid was clicked, etc.
 * If array is empty (triggerObject: []), trigger objects are not set initially
 * and can be set later using setTriggerObject() method.
 *
 * <b>top</b> [string or int] menu initial top offset.
 * <b>right</b> [string or int] menu initial right offset.
 * <b>bottom</b> [string or int] menu initial bottom offset.
 * <b>left</b> [string or int] menu initial left offset.
 * If set, top_parent div will be absolute positioned. Their values will be
 * assigned to corresponding CSS properties of top_parent div.
 * Important: For drag and scroll menus set either "top" or "bottom" and
 * "right" or "left" options instead of putting menu inside absolute positioned
 * div. Otherwise menu can be wrong positioned.
 *
 * <b>onInit</b> [function] function reference to call when menu is initialized.
 * Can be used e.g. to disable certain items, etc.
 *
 * <strong>In addition to events fired from base Zapatec.Widget class fires
 * following events:</strong>
 *
 * <b>menuShown</b> when menu is shown.
 *
 * <b>menuHidden</b> when menu is hidden.
 *
 * </pre>
 *
 * @constructor
 * @extends Zapatec.Widget
 * @param {object} objArgs User configuration
 */
Zapatec.Menu = function(objArgs) {
  // For backward compatibility with v1.1
  if (arguments.length > 1) {
    var objConfig = arguments[1];
    objConfig.source = arguments[0];
    objArgs = objConfig;
  }
  // Call constructor of superclass
  Zapatec.Menu.SUPERconstructor.call(this, objArgs);
};

Zapatec.Menu.id = "Zapatec.Menu";
// Inherit Widget
Zapatec.inherit(Zapatec.Menu, Zapatec.Widget);

/**
 * Initializes menu.
 *
 * @param {object} objArgs User configuration
 */
Zapatec.Menu.prototype.init = function(objArgs) {
  // Define config options
  this.config.container = null;
  this.config.dynamic = false;
  this.config.showDelay = 0;
  this.config.hideDelay = 500;
  this.config.onClick = false;
  this.config.vertical = false;
  this.config.scrollWithWindow = false;
  this.config.dropShadow = 0;
  this.config.drag = false;
  this.config.slide = false;
  this.config.glide = false;
  this.config.fade = false;
  this.config.wipe = false;
  this.config.unfurl = false;
  this.config.animSpeed = 10;
  this.config.defaultIcons = null;
  this.config.zIndex = 0;
  this.config.rememberPath = false;
  this.config.pathCookie = '__zp_item';
  this.config.triggerEvent = null;
  this.config.triggerKey = null;
  this.config.triggerObject = null;
  this.config.top = null;
  this.config.right = null;
  this.config.bottom = null;
  this.config.left = null;
  this.config.onInit = null;
  this.config.preventDoubleCall = false;
  this.called = false;
  // Call parent init
  Zapatec.Menu.SUPERclass.init.call(this, objArgs);
  // Continue initialization after theme is loaded
};

/**
 * Extends parent method. Unregisters scrolling to let JavaScript garbage
 * collector delete the object.
 */
Zapatec.Menu.prototype.discard = function() {
  Zapatec.ScrollWithWindow.unregister(this.rootMenu);
  // Call parent method
  Zapatec.Menu.SUPERclass.discard.call(this);
};

/**
 * Extends parent method.
 * @private
 */
Zapatec.Menu.prototype.addStandardEventListeners = function() {
  // Call parent method
  Zapatec.Menu.SUPERclass.addStandardEventListeners.call(this);
  // Add menu specific event listeners
  this.addEventListener('loadThemeEnd', function() {
      this.onThemeLoad();
  /*
    if (Zapatec.windowLoaded) {
      this.onThemeLoad();
    } else {
      var objMenu = this;
      Zapatec.Utils.addEvent(window, 'load', function() {
        objMenu.onThemeLoad()
      });
    }
    */
  });
};

/**
 * Holds reference to menu object that is currently on top. When menu is
 * mouseovered, its top_parent zIndex is changed to max to put it over the rest
 * of elements. This variable is needed to be able to restore zIndex of previous
 * top menu.
 * @private
 */
Zapatec.Menu.onTop = null;

/**
 * Restores zIndex of this menu.
 * @private
 */
Zapatec.Menu.prototype.restoreZIndex = function() {
  this.top_parent.style.zIndex = this.config.zIndex;
  Zapatec.Menu.onTop = null;
};

/**
 * Puts this menu on top.
 * @private
 */
Zapatec.Menu.prototype.putOnTop = function() {
  // Restore zIndex of previous top menu
  var objOnTop = Zapatec.Menu.onTop;
  if (objOnTop) {
    objOnTop.restoreZIndex();
  }
  // Put this menu over the rest of elements
  // Max zIndex in IE and FF: 10737418239, in Opera: 2147483583
  this.top_parent.style.zIndex = 2147483583;
  Zapatec.Menu.onTop = this;
};

/**
 * Called when theme is loaded.
 * @private
 */
Zapatec.Menu.prototype.onThemeLoad = function() {
	var self=this;
  // Current trigger object that launched menu (menu can be attached to several
  // objects).
  this.triggerObject = null;
  // Arguments received from current trigger object. Those arguments can be
  // accessed from external script, e.g. to determine, which cell of the grid
  // was clicked, etc.
  this.triggerArgs = null;

  this.animations = [];

  // Menu container
  this.container = Zapatec.Widget.getElementById(this.config.container);
  // Call parent method to load data from the specified source
  this.loadData();

  this.openMenus = [];
  this.clickDone = false;

  var objMenu = this;

  // Setup triggers
  if (this.config.triggerEvent) {
    this.setTriggerObject(this.config.triggerObject || window.document);
    // Hide menu on click
    Zapatec.Utils.addEvent(window.document, 'mouseup',
      function() {
        objMenu.hideMenu()
      }
    );
    // Prevent hiding on click inside menu
    Zapatec.Utils.addEvent(this.top_parent, 'mouseup',
      function(objEvent) {
        return Zapatec.Utils.stopEvent(objEvent);
      }
    );
    // Hide menu on ESC
    Zapatec.Utils.addEvent(window.document, 'keypress',
      function(objEvent) {
        objEvent || (objEvent = window.event);
        if (objEvent.keyCode == 27) {
          for (var i = 0; i < Zapatec.Menu.selectedItemsStack.length; i++) {
            if (Zapatec.Menu.all[Zapatec.Menu.selectedItemsStack[i].__zp_tree]
             == objMenu) {
              return;
            }
          }
          // No more selected items in this menu
          objMenu.hideMenu();
        }
      }
    );
  } else {
    // Dragging and scrolling can't work correctly together with triggers
    if (this.config.scrollWithWindow && this.rootMenu) {
      Zapatec.ScrollWithWindow.register(this.rootMenu);
    }
    if (this.config.drag) {
      this.dragging = false;

      Zapatec.Transport.loadJS({
      	url:Zapatec.zapatecPath+"zpobjects.js", 
        onLoad: function() {
					Zapatec.Transport.loadJS({
						url:Zapatec.zapatecPath+"dom.js", 
						onLoad: function() {
							Zapatec.Transport.loadJS({
								url:Zapatec.zapatecPath+"movable.js", 
								onLoad: function() {
									Zapatec.Transport.loadJS({
										url:Zapatec.zapatecPath+"draggable.js", 
										onLoad: function() {
											new Zapatec.Utils.Draggable({
												container: objMenu.rootMenu.parentNode, 
												preserveSizes: false, 
												eventCapture: true
											});
										}, 
										onError: function () {
											self.config.drag = false;
										}
									});
								}, 
								onError: function () {
									self.config.drag = false;
								}
							});
						}, 
						onError: function () {
							self.config.drag = false;
						}
					});
        }, 
        onError: function () {
        	self.config.drag = false;
        }
      });

/*			
			Old dragging behavior
      Zapatec.Utils.addEvent(window.document, "mousedown",
        function(ev) { return Zapatec.Menu.dragStart(ev, objMenu) });
      Zapatec.Utils.addEvent(window.document, "mousemove",
        function(ev) { return Zapatec.Menu.dragMove(ev, objMenu) });
      Zapatec.Utils.addEvent(window.document, "mouseup",
        function(ev) { return Zapatec.Menu.dragEnd(ev, objMenu) });
*/        
    }
  }
  // Enforce animation mixing rules: fade + any 1 other.
  if (this.config.fade) {
    this.addAnimation('fade');
  }
  if (this.config.slide) {
    this.addAnimation('slide');