effects.js

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

// $Id: effects.js 6749 2007-03-26 09:22:52Z andrew $
/**
 *
 * Copyright (c) 2004-2006 by Zapatec, Inc.
 * http://www.zapatec.com
 * 1700 MLK Way, Berkeley, California,
 * 94709, U.S.A.
 * All rights reserved.
 */

if (typeof Zapatec == 'undefined') {
  /// define the global Zapatec namespace
  Zapatec = {};
}

/**
 * Zapatec.Effect hierarchy contains functions for working with visual effects.
 * These are called to progressively style the DOM elements as menus show
 * and hide. They do not have to set item visibility, but may want to set DOM
 * properties like clipping, opacity and position to create custom effects.
 *
 * @param ref [HTMLElement] -- target DOM element.
 * @param counter [number] -- an animation progress value, from 0 (start) to 100 (end).
 */

Zapatec.Effect = {};

/*
* Constant stores value for removing clip effect
*/
Zapatec.Effect.NO_CLIP = ((window.opera || navigator.userAgent.indexOf('KHTML') > -1) ?
	'' : 'rect(auto, auto, auto, auto)');

/**
 * \internal Sometimes is useful to execute some action for elements and all 
 * his childs.
 *
 * @param ref [HTMLElement] -- target DOM element.
 * @param funcToDo [function] -- function, that would be applied to ref.
 */

Zapatec.Effect.applyFunc = function(ref, funcToDo) {
	funcToDo(ref);

	for(var i = 0; i < ref.childNodes.length; i++) {
		Zapatec.Effect.applyFunc(ref.childNodes[i], funcToDo);
	}
};

Zapatec.Effect.fade = function(ref, counter) {
	if(ref.zpOriginalOpacity == null && ref.__zp_opacitySaved == null){
		ref.zpOpacitySaved = true;
		ref.zpOriginalOpacity = document.all ? 
			ref.style.filter : ref.style.opacity != null ? 
				ref.style.opacity : ref.style.MozOpacity
		;
	}

	var md = null;

	var currentOpacity = 
		(!isNaN(parseFloat(ref.zpOriginalOpacity || 1)) ?
			parseFloat(ref.zpOriginalOpacity || 1) : (
				(md = ref.zpOriginalOpacity.match(/alpha\(opacity=(\d+)\)/i)) ?
					parseInt(md[1]) / 100 : 1
			)
		) * counter / 100;

	if (ref.filters) {
		if (!ref.style.filter.match(/alpha/i)) {
			ref.style.filter += ' alpha(opacity=' + (currentOpacity * 100) + ')';
		} else if (ref.filters.length && ref.filters.alpha) {
			ref.style.filter = ref.style.filter.replace(/alpha\(opacity=\d+\)/ig, 'alpha(opacity=' + (Math.floor(currentOpacity * 100)) + ')');
		}
	} else {      
		if(counter > 0 && counter < 100){
			ref.style.opacity = ref.style.MozOpacity = currentOpacity;
		}
	}

	if(counter <= 0){
		ref.style.display = 'none';
		ref.style.filter = ref.style.opacity = ref.style.MozOpacity = ref.zpOriginalOpacity;
		ref.zpOriginalOpacity = null;
		ref.zpOpacitySaved = null;
	}

	if(counter >= 100 && ref.zpOpacitySaved != null) {
		ref.style.filter = ref.zpOriginalOpacity;

		// FF blinks if set opacity=1 to element which already have it.
//		if(ref.zpOriginalOpacity != "" && parseFloat(ref.zpOriginalOpacity) != 1) {
			ref.style.opacity = ref.style.MozOpacity = ref.zpOriginalOpacity;
//		}
			
		ref.zpOriginalOpacity = null;
		ref.zpOpacitySaved = null;
	}
};

Zapatec.Effect.slideTop = function(ref, counter) {
	return Zapatec.Effect.slide(ref, counter, 'top');
};

Zapatec.Effect.slideRight = function(ref, counter) {
	return Zapatec.Effect.slide(ref, counter, 'right');
};

Zapatec.Effect.slideBottom = function(ref, counter) {
	return Zapatec.Effect.slide(ref, counter, 'bottom');
};

Zapatec.Effect.slideLeft = function(ref, counter) {
	return Zapatec.Effect.slide(ref, counter, 'left');
};

Zapatec.Effect.slide = function(ref, counter, direction) {
	if(typeof(direction) != 'string'){
		return false;
	}

	direction = direction.toLowerCase();

	var direct = "";

	switch(direction){
		case 'top':
			// fall through
		case 'bottom':
			direct = "marginTop";
			break;
		case 'right':
			// fall through
		case 'left':
			direct = "marginLeft";
			break;
		default:
			return false;
	}

	var cP = Math.pow(Math.sin(Math.PI*counter/200),0.75);

	if(isNaN(cP)){
		cP = 0;
	}

	if (typeof ref.__zp_origmargin == 'undefined') {
		ref.__zp_origmargin = ref.style[direct];
	}

	if(counter == 100){
		ref.style.clip = Zapatec.Effect.NO_CLIP;
		ref.style[direct] = ref.__zp_origmargin;
	} else {
		switch(direction){
			case 'top':
				ref.style.clip = 'rect(' +
					(ref.offsetHeight*(1 - cP)) + 'px, ' +
					ref.offsetWidth + 'px, ' +
					ref.offsetHeight + 'px, ' +
					'0px' +
				')';

				ref.style.marginTop = '-' + (ref.offsetHeight * (1 - cP)) + 'px';
				break;
			case 'right':
				ref.style.clip = 'rect(' +
					'0px, ' +
					(ref.offsetWidth * cP) + 'px, ' +
					ref.offsetHeight + 'px, ' +
					'0px' +
				')';

				ref.style.marginLeft = (ref.offsetWidth * (1 - cP)) + 'px';
				break;
			case 'bottom':
				ref.style.clip = 'rect(' +
					'0px, ' +
					ref.offsetWidth + 'px, ' +
					ref.offsetHeight*cP + 'px, ' +
					'0px' +
				')';
				ref.style.marginTop = (ref.offsetHeight * (1 - cP)) + 'px';
				break;
			case 'left':
				ref.style.clip = 'rect(' +
					'0px, ' +
					ref.offsetWidth + 'px, ' +
					ref.offsetHeight + 'px, ' +
					ref.offsetWidth*(1 - cP) + 'px' +
				')';

				ref.style.marginLeft = "-" + (ref.offsetWidth * (1 - cP)) + 'px';
				break;
		}
	}

	if(counter <= 0){
		ref.style.display = 'none';
		ref.style.clip = Zapatec.Effect.NO_CLIP;
		ref.style[direct] = ref.__zp_origmargin;
	}
};

Zapatec.Effect.glideTop = function(ref, counter) {
	return Zapatec.Effect.glide(ref, counter, 'top');
};

Zapatec.Effect.glideRight = function(ref, counter) {
	return Zapatec.Effect.glide(ref, counter, 'right');
};

Zapatec.Effect.glideBottom = function(ref, counter) {
	return Zapatec.Effect.glide(ref, counter, 'bottom');
};

Zapatec.Effect.glideLeft = function(ref, counter) {
	return Zapatec.Effect.glide(ref, counter, 'left');
};

Zapatec.Effect.glide = function(ref, counter, direction) {
	if(typeof(direction) != 'string'){
		return false;
	}

	direction = direction.toLowerCase();

	var cP = Math.pow(Math.sin(Math.PI*counter/200),0.75);

	if(counter == 100){
		ref.style.clip = Zapatec.Effect.NO_CLIP;
	} else {
		switch(direction){
			case 'top':
				ref.style.clip = 'rect(' +
					(ref.offsetHeight*(1 - cP)) + 'px, ' +
					ref.offsetWidth + 'px, ' +
					ref.offsetHeight + 'px, ' +
					'0px' +
				')';
				break;
			case 'right':
				ref.style.clip = 'rect(' +
					'0px, ' +
					(ref.offsetWidth * cP) + 'px, ' +
					ref.offsetHeight + 'px, ' +
					'0px' +
				')';
				break;
			case 'bottom':
				ref.style.clip = 'rect(' +
					'0px, ' +
					ref.offsetWidth + 'px, ' +
					ref.offsetHeight*cP + 'px, ' +
					'0px' +
				')';
				break;
			case 'left':
				ref.style.clip = 'rect(' +
					'0px, ' +
					ref.offsetWidth + 'px, ' +
					ref.offsetHeight + 'px, ' +
					ref.offsetWidth*(1 - cP) + 'px' +
				')';
				break;
		}
	}

	if(counter <= 0){
		ref.style.display = 'none';
		ref.style.clip = Zapatec.Effect.NO_CLIP;
	}
};

Zapatec.Effect.wipe = function(ref, counter) {
	ref.style.clip = (counter==100) ? Zapatec.Effect.NO_CLIP :
		'rect(0, ' + (ref.offsetWidth*(counter/100)) + 'px, ' +
		(ref.offsetHeight*(counter/100)) + 'px, 0)';

	if(counter <= 0){
		ref.style.display = 'none';
		ref.style.clip = Zapatec.Effect.NO_CLIP;
	}
};

Zapatec.Effect.unfurl = function(ref, counter) {
	if (counter <= 50) {
		ref.style.clip = 'rect(0, ' + (ref.offsetWidth*(counter/50)) +
			'px, 10px, 0)';
	} else if (counter < 100) {
		ref.style.clip =  'rect(0, ' + ref.offsetWidth + 'px, ' +
			(ref.offsetHeight*((counter-50)/50)) + 'px, 0)';
	} else {
		ref.style.clip = Zapatec.Effect.NO_CLIP;
	}

	if(counter <= 0){
		ref.style.display = 'none';
		ref.style.clip = Zapatec.Effect.NO_CLIP;
	}
};

Zapatec.Effect.shrink = function(ref, counter) {
	var paddingWidth = Math.floor(ref.offsetWidth * counter / 200);
	var paddingHeight = Math.floor(ref.offsetHeight * counter / 200);

	ref.style.clip = (counter >= 100) ? 
		Zapatec.Effect.NO_CLIP : "rect(" + (ref.offsetHeight / 2 - paddingHeight) + "px, " + (ref.offsetWidth/2 + paddingWidth) + "px, "
			+ (ref.offsetHeight / 2 + paddingHeight) + "px, " + (ref.offsetWidth/2 - paddingWidth) + "px)";

	if(counter <= 0){
		ref.style.display = 'none';
		ref.style.clip = Zapatec.Effect.NO_CLIP;
	}
};

Zapatec.Effect.grow = function(ref, counter) {
	Zapatec.Effect.shrink(ref, 100 - counter);
};

Zapatec.Effect.highlight = function(ref, counter) {
	if(ref.origbackground == null) {
		Zapatec.Effect.applyFunc(ref, function(){ 
			var el = arguments[0];

			if(el.nodeType == 1) {
				el.origbackground = el.style.backgroundColor;
			}
		});
	}