effects.js

原名JSPackager

element = $(element);var options = Object.extend({direction:"center", moveTransition:Effect.Transitions.sinoidal, scaleTransition:Effect.Transitions.sinoidal, opacityTransition:Effect.Transitions.full}, arguments[1] || {});var oldStyle = {top:element.style.top, left:element.style.left, height:element.style.height, width:element.style.width, opacity:element.getInlineOpacity()};var dims = element.getDimensions();var initialMoveX, initialMoveY;var moveX, moveY;switch (options.direction) {case "top-left":initialMoveX = initialMoveY = moveX = moveY = 0;break;case "top-right":initialMoveX = dims.width;initialMoveY = moveY = 0;moveX = -dims.width;break;case "bottom-left":initialMoveX = moveX = 0;initialMoveY = dims.height;moveY = -dims.height;break;case "bottom-right":initialMoveX = dims.width;initialMoveY = dims.height;moveX = -dims.width;moveY = -dims.height;break;case "center":initialMoveX = dims.width / 2;initialMoveY = dims.height / 2;moveX = -dims.width / 2;moveY = -dims.height / 2;break;}return new Effect.Move(element, {x:initialMoveX, y:initialMoveY, duration:0.01, beforeSetup:function (effect) {effect.element.hide().makeClipping().makePositioned();}, afterFinishInternal:function (effect) {new Effect.Parallel([new Effect.Opacity(effect.element, {sync:true, to:1, from:0, transition:options.opacityTransition}), new Effect.Move(effect.element, {x:moveX, y:moveY, sync:true, transition:options.moveTransition}), new Effect.Scale(effect.element, 100, {scaleMode:{originalHeight:dims.height, originalWidth:dims.width}, sync:true, scaleFrom:window.opera ? 1 : 0, transition:options.scaleTransition, restoreAfterFinish:true})], Object.extend({beforeSetup:function (effect) {
effect.effects[0].element.setStyle({height:"0px"}).show();}, afterFinishInternal:function (effect) {effect.effects[0].element.undoClipping().undoPositioned().setStyle(oldStyle);}}, options));}});};Effect.Shrink = function (element) {element = $(element);var options = Object.extend({direction:"center", moveTransition:Effect.Transitions.sinoidal, scaleTransition:Effect.Transitions.sinoidal, opacityTransition:Effect.Transitions.none}, arguments[1] || {});var oldStyle = {top:element.style.top, left:element.style.left, height:element.style.height, width:element.style.width, opacity:element.getInlineOpacity()};var dims = element.getDimensions();var moveX, moveY;switch (options.direction) {case "top-left":moveX = moveY = 0;break;case "top-right":moveX = dims.width;moveY = 0;break;case "bottom-left":moveX = 0;moveY = dims.height;break;case "bottom-right":moveX = dims.width;moveY = dims.height;break;case "center":moveX = dims.width / 2;moveY = dims.height / 2;break;}return new Effect.Parallel([new Effect.Opacity(element, {sync:true, to:0, from:1, transition:options.opacityTransition}), new Effect.Scale(element, window.opera ? 1 : 0, {sync:true, transition:options.scaleTransition, restoreAfterFinish:true}), new Effect.Move(element, {x:moveX, y:moveY, sync:true, transition:options.moveTransition})], Object.extend({beforeStartInternal:function (effect) {
effect.effects[0].element.makePositioned().makeClipping();}, afterFinishInternal:function (effect) {effect.effects[0].element.hide().undoClipping().undoPositioned().setStyle(oldStyle);}}, options));};Effect.Pulsate = function (element) {element = $(element);var options = arguments[1] || {};var oldOpacity = element.getInlineOpacity();var transition = options.transition || Effect.Transitions.sinoidal;var reverser = function (pos) {return transition(1 - Effect.Transitions.pulse(pos, options.pulses));};reverser.bind(transition);return new Effect.Opacity(element, Object.extend(Object.extend({duration:2, from:0, afterFinishInternal:function (effect) {effect.element.setStyle({opacity:oldOpacity});}}, options), {transition:reverser}));};Effect.Fold = function (element) {element = $(element);var oldStyle = {top:element.style.top, left:element.style.left, width:element.style.width, height:element.style.height};element.makeClipping();return new Effect.Scale(element, 5, Object.extend({scaleContent:false, scaleX:false, afterFinishInternal:function (effect) {new Effect.Scale(element, 1, {scaleContent:false, scaleY:false, afterFinishInternal:function (effect) {effect.element.hide().undoClipping().setStyle(oldStyle);
}});}}, arguments[1] || {}));};Effect.Morph = Class.create();Object.extend(Object.extend(Effect.Morph.prototype, Effect.Base.prototype), {initialize:function (element) {this.element = $(element);if (!this.element) {throw (Effect._elementDoesNotExistError);}var options = Object.extend({style:{}}, arguments[1] || {});if (typeof options.style == "string") {if (options.style.indexOf(":") == -1) {var cssText = "", selector = "." + options.style;$A(document.styleSheets).reverse().each(function (styleSheet) {if (styleSheet.cssRules) {cssRules = styleSheet.cssRules;} else {if (styleSheet.rules) {cssRules = styleSheet.rules;}}$A(cssRules).reverse().each(function (rule) {if (selector == rule.selectorText) {cssText = rule.style.cssText;throw $break;}});if (cssText) {throw $break;}});this.style = cssText.parseStyle();options.afterFinishInternal = function (effect) {effect.element.addClassName(effect.options.style);effect.transforms.each(function (transform) {if (transform.style != "opacity") {effect.element.style[transform.style.camelize()] = "";}});};} else {this.style = options.style.parseStyle();}} else {this.style = $H(options.style);}this.start(options);}, setup:function () {function parseColor(color) {if (!color || ["rgba(0, 0, 0, 0)", "transparent"].include(color)) {color = "#ffffff";}color = color.parseColor();return $R(0, 2).map(function (i) {
return parseInt(color.slice(i * 2 + 1, i * 2 + 3), 16);});}this.transforms = this.style.map(function (pair) {var property = pair[0].underscore().dasherize(), value = pair[1], unit = null;if (value.parseColor("#zzzzzz") != "#zzzzzz") {value = value.parseColor();unit = "color";} else {if (property == "opacity") {value = parseFloat(value);if (/MSIE/.test(navigator.userAgent) && !window.opera && (!this.element.currentStyle.hasLayout)) {this.element.setStyle({zoom:1});}} else {if (Element.CSS_LENGTH.test(value)) {var components = value.match(/^([\+\-]?[0-9\.]+)(.*)$/), value = parseFloat(components[1]), unit = (components.length == 3) ? components[2] : null;}}}var originalValue = this.element.getStyle(property);return $H({style:property, originalValue:unit == "color" ? parseColor(originalValue) : parseFloat(originalValue || 0), targetValue:unit == "color" ? parseColor(value) : value, unit:unit});}.bind(this)).reject(function (transform) {return ((transform.originalValue == transform.targetValue) || (transform.unit != "color" && (isNaN(transform.originalValue) || isNaN(transform.targetValue))));
});}, update:function (position) {var style = $H(), value = null;this.transforms.each(function (transform) {value = transform.unit == "color" ? $R(0, 2).inject("#", function (m, v, i) {return m + (Math.round(transform.originalValue[i] + (transform.targetValue[i] - transform.originalValue[i]) * position)).toColorPart();}) : transform.originalValue + Math.round(((transform.targetValue - transform.originalValue) * position) * 1000) / 1000 + transform.unit;style[transform.style] = value;});this.element.setStyle(style);}});Effect.Transform = Class.create();Object.extend(Effect.Transform.prototype, {initialize:function (tracks) {this.tracks = [];this.options = arguments[1] || {};
this.addTracks(tracks);}, addTracks:function (tracks) {tracks.each(function (track) {var data = $H(track).values().first();this.tracks.push($H({ids:$H(track).keys().first(), effect:Effect.Morph, options:{style:data}}));}.bind(this));return this;}, play:function () {return new Effect.Parallel(this.tracks.map(function (track) {var elements = [$(track.ids) || $$(track.ids)].flatten();return elements.map(function (e) {return new track.effect(e, Object.extend({sync:true}, track.options));});}).flatten(), this.options);}});Element.CSS_PROPERTIES = $w("backgroundColor backgroundPosition borderBottomColor borderBottomStyle " + "borderBottomWidth borderLeftColor borderLeftStyle borderLeftWidth " + "borderRightColor borderRightStyle borderRightWidth borderSpacing " + "borderTopColor borderTopStyle borderTopWidth bottom clip color " + "fontSize fontWeight height left letterSpacing lineHeight " + "marginBottom marginLeft marginRight marginTop markerOffset maxHeight " + "maxWidth minHeight minWidth opacity outlineColor outlineOffset " + "outlineWidth paddingBottom paddingLeft paddingRight paddingTop " + "right textIndent top width wordSpacing zIndex");Element.CSS_LENGTH = /^(([\+\-]?[0-9\.]+)(em|ex|px|in|cm|mm|pt|pc|\%))|0$/;String.prototype.parseStyle = function () {
var element = Element.extend(document.createElement("div"));element.innerHTML = "<div style=\"" + this + "\"></div>";var style = element.down().style, styleRules = $H();Element.CSS_PROPERTIES.each(function (property) {if (style[property]) {styleRules[property] = style[property];}});if (/MSIE/.test(navigator.userAgent) && !window.opera && this.indexOf("opacity") > -1) {styleRules.opacity = this.match(/opacity:\s*((?:0|1)?(?:\.\d*)?)/)[1];}return styleRules;};Element.morph = function (element, style) {new Effect.Morph(element, Object.extend({style:style}, arguments[2] || {}));return element;};["setOpacity", "getOpacity", "getInlineOpacity", "forceRerendering", "setContentZoom", "collectTextNodes", "collectTextNodesIgnoreClass", "morph"].each(function (f) {Element.Methods[f] = Element[f];
});Element.Methods.visualEffect = function (element, effect, options) {s = effect.gsub(/_/, "-").camelize();effect_class = s.charAt(0).toUpperCase() + s.substring(1);new Effect[effect_class](element, options);return $(element);};Element.addMethods();});