hoverer.js

来自「zapatec suite 最新版 20070204,非常棒的ajax widg」· JavaScript 代码 · 共 177 行

// $Id: hoverer.js 6652 2007-03-19 10:19:30Z andrew $
/**
 *
 * Copyright (c) 2004-2006 by Zapatec, Inc.
 * http://www.zapatec.com
 * 1700 MLK Way, Berkeley, California,
 * 94709, U.S.A.
 * All rights reserved.
 */

/**
 * Zapatec.Hoverer is a tool for creating simple presentations.
 * If you mouseover anchor - depending target element would be showed using 
 *   given effect.
 *
 * @param params [HashMap] -- array with properties.
 * 		effect [String] - effect to use for showing targets("fade" by default)
 *		animSpeed [int] - animation speed(5 by default)
 */

Zapatec.Hoverer = function(objArgs){
	Zapatec.Hoverer.SUPERconstructor.call(this, objArgs);
}

/**
 * Unique static id of the widget class. Gives ability for Zapatec#inherit to
 * determine and store path to this file correctly when it is included using
 * Zapatec#include. When this file is included using Zapatec#include or path
 * to this file is gotten using Zapatec#getPath, this value must be specified
 * as script id.
 * @private
 */
Zapatec.Hoverer.id = "Zapatec.Hoverer";

// Inherit SuperClass
Zapatec.inherit(Zapatec.Hoverer, Zapatec.Widget);

Zapatec.Transport.include(Zapatec.zapatecPath + "../zpeffects/src/effects.js", "Zapatec.Effects");

/**
 * @private
 * Initializes widget.
 * @param {object} objArgs User configuration
 */
Zapatec.Hoverer.prototype.init = function(objArgs){
	this.hoverMark = 0;
	this.storage = {};
	this.currentlyShowing = null;

	Zapatec.Hoverer.SUPERclass.init.call(this, objArgs);
};

/**
 * Configures widget. Gets called from parent init method.
 *
 * @private
 * @param {object} objArgs User configuration
 */
Zapatec.Hoverer.prototype.configure = function(objArgs) {
	this.defineConfigOption('theme', ""); // What effect to use
	this.defineConfigOption('effect', "fade"); // What effect to use
	this.defineConfigOption('animSpeed', 5); // Animation speed

	// super call
	Zapatec.Hoverer.SUPERclass.configure.call(this, objArgs);
};

/**
 * Reconfigures the widget with new config options after it was initialized.
 * May be used to change look or behavior of the widget after it has loaded
 * the data. In the argument pass only values for changed config options.
 * There is no need to pass config options that were not changed.
 *
 * @param {object} objArgs Changes to user configuration
 */
Zapatec.Hoverer.prototype.reconfigure = function(objArgs){
	// Call parent method
	Zapatec.Hoverer.SUPERclass.reconfigure.call(this, objArgs);
};

/**
 * \internal triggers when user mouseoser anchor.
 * @param anchorRef [HTMLElement] - link to anchor HTML element.
 */
Zapatec.Hoverer.prototype.show = function(anchorRef){
    // do nothing if element to show is element that is visible now 
    //     or if this anchor is not found in storage.
	if(
		anchorRef == this.currentlyShowing || 
		anchorRef == null ||
		this.storage[anchorRef.__zp_hovermark] == null
	){
		return;
	}

	if(this.currentlyShowing != null){
		// hide previous element
		this.storage[this.currentlyShowing.__zp_hovermark].origdisplay = 
			this.storage[this.currentlyShowing.__zp_hovermark].style.display;

		this.storage[this.currentlyShowing.__zp_hovermark].style.display = 'none';
	}

	this.currentlyShowing = anchorRef;

	this.storage[this.currentlyShowing.__zp_hovermark].style.display = 
		this.storage[this.currentlyShowing.__zp_hovermark].origdisplay;
	
	// show new element
	Zapatec.Effects.show(
		this.storage[this.currentlyShowing.__zp_hovermark], 
		this.config.animSpeed, 
		this.config.effect
	);
};

/**
 * use this method to add elements to current Hoverer object
 *
 * @param params [HashMap] -- array with properties.
 *		anchorRef [HTMLElement or string] - link to anchor element
 *		targetRef [HTMLElement or string] - link to target element
 *		isDefault [boolean] - if true - this elements wouldn't be hided on page load
 */
Zapatec.Hoverer.prototype.addElement = function(params){
    var anchorRef = Zapatec.Widget.getElementById(params['anchorRef']);

	if(anchorRef == null || this.storage[anchorRef.__zp_hovermark] != null){
		return;
	}

    var targetRef = Zapatec.Widget.getElementById(params['targetRef']);

	if(targetRef == null){
		return;
	}

	anchorRef.__zp_hovermark = this.hoverMark++;
	this.storage[anchorRef.__zp_hovermark] = targetRef;

	targetRef.origdisplay = anchorRef.style.display;

	if(this.currentlyShowing == null || params['isDefault'] == true){
		if(this.currentlyShowing != null){
			this.storage[this.currentlyShowing.__zp_hovermark].style.display = 'none';
		}

		this.currentlyShowing = anchorRef;
	} else {
		targetRef.style.display = 'none';
	}

	var _this = this;

	anchorRef.onmouseout = function(){
		if(this.running){
			this.origbackground = this.origbackgroundcolor;
		} else {
			this.style.backgroundColor = this.origbackgroundcolor;
			Zapatec.Effects.hide(this, 10, 'highlight');
		}
	};

	anchorRef.onmouseover = function(){
		if(!this.running){
			this.origbackgroundcolor = this.style.backgroundColor;
			this.style.backgroundColor = "#FFFF69";
        } else {
			this.origbackground = "#FFFF69";
        }

		_this.show(this);
	};
};

Zapatec.Utils.addEvent(window, 'load', Zapatec.Utils.checkActivation);