r1539 - trunk/ui
r1539 - trunk/ui
Author: paul.bakaus
Date: Wed Jan 7 08:07:23 2009
New Revision: 1539
Modified:
trunk/ui/effects.core.js
Log:
effects: improved syntax, arguments, fixes #3674
Modified: trunk/ui/effects.core.js
==============================================================================
--- trunk/ui/effects.core.js (original)
+++ trunk/ui/effects.core.js Wed Jan 7 08:07:23 2009
@@ -13,20 +13,26 @@
$.extend($.effects, {
version: "@VERSION",
- save: function(el, set) {
- for(var i=0;i<set.length;i++) {
- if(set[i] !== null) $.data(el[0], "ec.storage."+set[i],
el[0].style[set[i]]);
+
+ // Saves a set of properties in a data storage
+ save: function(element, set) {
+ for(var i=0; i < set.length; i++) {
+ if(set[i] !== null) element.data("ec.storage."+set[i],
element[0].style[set[i]]);
}
},
- restore: function(el, set) {
- for(var i=0;i<set.length;i++) {
- if(set[i] !== null) el.css(set[i], $.data(el[0], "ec.storage."+set[i]));
+
+ // Restores a set of previously saved properties from a data storage
+ restore: function(element, set) {
+ for(var i=0; i < set.length; i++) {
+ if(set[i] !== null) element.css(set[i],
element.data("ec.storage."+set[i]));
}
},
+
setMode: function(el, mode) {
if (mode == 'toggle') mode = el.is(':hidden') ? 'show' : 'hide'; // Set
for toggle
return mode;
},
+
getBaseline: function(origin, original) { // Translates a [top,left]
array into a baseline value
// this should be a little more flexible in the future to handle a
string & hash
var y, x;
@@ -44,41 +50,54 @@
};
return {x: x, y: y};
},
- createWrapper: function(el) {
- if (el.parent().attr('id') == 'fxWrapper')
- return el;
- var props = {width: el.outerWidth({margin:true}), height:
el.outerHeight({margin:true}), 'float': el.css('float')};
- el.wrap('<div id="fxWrapper"
style="font-size:100%;background:transparent;border:none;margin:0;padding:0"></div>');
- var wrapper = el.parent();
- if (el.css('position') == 'static'){
- wrapper.css({position: 'relative'});
- el.css({position: 'relative'});
+
+ // Wraps the element around a wrapper that copies position properties
+ createWrapper: function(element) {
+
+ //if the element is already wrapped, return it
+ if (element.parent().is('.ui-effects-wrapper'))
+ return element.parent();
+
+ //Cache width,height and float properties of the element, and create a
wrapper around it
+ var props = { width: element.outerWidth(true), height:
element.outerHeight(true), 'float': element.css('float') };
+ element.wrap('<div class="ui-effects-wrapper"
style="font-size:100%;background:transparent;border:none;margin:0;padding:0"></div>');
+ var wrapper = element.parent();
+
+ //Transfer the positioning of the element to the wrapper
+ if (element.css('position') == 'static') {
+ wrapper.css({ position: 'relative' });
+ element.css({ position: 'relative'} );
} else {
- var top = el.css('top'); if(isNaN(parseInt(top))) top = 'auto';
- var left = el.css('left'); if(isNaN(parseInt(left))) left = 'auto';
- wrapper.css({ position: el.css('position'), top: top, left: left,
zIndex: el.css('z-index') }).show();
- el.css({position: 'relative', top:0, left:0});
+ var top = element.css('top'); if(isNaN(parseInt(top,10))) top = 'auto';
+ var left = element.css('left'); if(isNaN(parseInt(left,10))) left
= 'auto';
+ wrapper.css({ position: element.css('position'), top: top, left: left,
zIndex: element.css('z-index') }).show();
+ element.css({position: 'relative', top: 0, left: 0 });
}
+
wrapper.css(props);
return wrapper;
},
- removeWrapper: function(el) {
- if (el.parent().attr('id') == 'fxWrapper')
- return el.parent().replaceWith(el);
- return el;
- },
- setTransition: function(el, list, factor, val) {
- val = val || {};
- $.each(list,function(i, x){
- unit = el.cssUnit(x);
- if (unit[0] > 0) val[x] = unit[0] * factor + unit[1];
+
+ removeWrapper: function(element) {
+ if (element.parent().is('.ui-effects-wrapper'))
+ return element.parent().replaceWith(element);
+ return element;
+ },
+
+ setTransition: function(element, list, factor, value) {
+ value = value || {};
+ $.each(list, function(i, x){
+ unit = element.cssUnit(x);
+ if (unit[0] > 0) value[x] = unit[0] * factor + unit[1];
});
- return val;
+ return value;
},
+
+ //Base function to animate from one class to another in a seamless
transition
animateClass: function(value, duration, easing, callback) {
var cb = (typeof easing == "function" ? easing : (callback ? callback :
null));
- var ea = (typeof easing == "object" ? easing : null);
+ var ea = (typeof easing == "string" ? easing : null);
return this.each(function() {
@@ -115,6 +134,7 @@
//Extend the methods of jQuery
$.fn.extend({
+
//Save old methods
_show: $.fn.show,
_hide: $.fn.hide,
@@ -122,35 +142,40 @@
_addClass: $.fn.addClass,
_removeClass: $.fn.removeClass,
_toggleClass: $.fn.toggleClass,
- // New ec methods
- effect: function(fx,o,speed,callback) {
- return $.effects[fx] ? $.effects[fx].call(this, {method: fx, options: o |
| {}, duration: speed, callback: callback }) : null;
+
+ // New effect methods
+ effect: function(fx, options, speed, callback) {
+ return $.effects[fx] ? $.effects[fx].call(this, {method: fx, options:
options || {}, duration: speed, callback: callback }) : null;
},
+
show: function() {
- if(!arguments[0] || (arguments[0].constructor == Number || /(slow|normal|
fast)/.test(arguments[0])))
+ if(!arguments[0] || (arguments[0].constructor == Number || (/(slow|
normal|fast)/).test(arguments[0])))
return this._show.apply(this, arguments);
else {
var o = arguments[1] || {}; o['mode'] = 'show';
return this.effect.apply(this, [arguments[0], o, arguments[2] ||
o.duration, arguments[3] || o.callback]);
}
},
+
hide: function() {
- if(!arguments[0] || (arguments[0].constructor == Number || /(slow|normal|
fast)/.test(arguments[0])))
+ if(!arguments[0] || (arguments[0].constructor == Number || (/(slow|
normal|fast)/).test(arguments[0])))
return this._hide.apply(this, arguments);
else {
var o = arguments[1] || {}; o['mode'] = 'hide';
return this.effect.apply(this, [arguments[0], o, arguments[2] ||
o.duration, arguments[3] || o.callback]);
}
},
+
toggle: function(){
- if(!arguments[0] || (arguments[0].constructor == Number || /(slow|normal|
fast)/.test(arguments[0])) || (arguments[0].constructor == Function))
+ if(!arguments[0] || (arguments[0].constructor == Number || (/(slow|
normal|fast)/).test(arguments[0])) || (arguments[0].constructor ==
Function))
return this.__toggle.apply(this, arguments);
else {
var o = arguments[1] || {}; o['mode'] = 'toggle';
return this.effect.apply(this, [arguments[0], o, arguments[2] ||
o.duration, arguments[3] || o.callback]);
}
},
- addClass: function(classNames,speed,easing,callback) {
+
+ addClass: function(classNames, speed, easing, callback) {
return speed ? $.effects.animateClass.apply(this, [{ add: classNames
},speed,easing,callback]) : this._addClass(classNames);
},
removeClass: function(classNames,speed,easing,callback) {
@@ -165,6 +190,7 @@
switchClass: function() {
return this.morph.apply(this, arguments);
},
+
// helper functions
cssUnit: function(key) {
var style = this.css(key), val = [];
@@ -184,18 +210,18 @@
// We override the animation for all of these color styles
$.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'],
function(i,attr){
- $.fx.step[attr] = function(fx){
+ $.fx.step[attr] = function(fx) {
if ( fx.state == 0 ) {
fx.start = getColor( fx.elem, attr );
fx.end = getRGB( fx.end );
}
fx.elem.style[attr] = "rgb(" + [
- Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) +
fx.start[0]), 255), 0),
- Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) +
fx.start[1]), 255), 0),
- Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) +
fx.start[2]), 255), 0)
+ Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) +
fx.start[0],10), 255), 0),
+ Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) +
fx.start[1],10), 255), 0),
+ Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) +
fx.start[2],10), 255), 0)
].join(",") + ")";
- }
+ };
});
// Color Conversion functions from highlightFade
@@ -212,7 +238,7 @@
// Look for rgb(num,num,num)
if (result =
/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
- return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
+ return [parseInt(result[1],10), parseInt(result[2],10),
parseInt(result[3],10)];
// Look for rgb(num%,num%,num%)
if (result =
/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))