library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

effects: improved syntax, arguments, fixes #3674

Browse Source
This commit is contained in:
Paul Bakaus 2009-01-07 16:07:23 +00:00
parent 55b09c1a95
commit 1bdd309013
1 changed files with 69 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
ui/effects.core.js
View File

@ -13,20 +13,26 @@ $.effects = $.effects || {}; //Add the 'effects' scope
$.extend($.effects, { $.extend($.effects, {
version: "@VERSION", version: "@VERSION",
save: function(el, set) {
for(var i=0;i<set.length;i++) { // Saves a set of properties in a data storage
if(set[i] !== null) $.data(el[0], "ec.storage."+set[i], el[0].style[set[i]]); 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++) { // Restores a set of previously saved properties from a data storage
if(set[i] !== null) el.css(set[i], $.data(el[0], "ec.storage."+set[i])); 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) { setMode: function(el, mode) {
if (mode == 'toggle') mode = el.is(':hidden') ? 'show' : 'hide'; // Set for toggle if (mode == 'toggle') mode = el.is(':hidden') ? 'show' : 'hide'; // Set for toggle
return mode; return mode;
}, },
getBaseline: function(origin, original) { // Translates a [top,left] array into a baseline value 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 // this should be a little more flexible in the future to handle a string & hash
var y, x; var y, x;
@ -44,41 +50,54 @@ $.extend($.effects, {
}; };
return {x: x, y: y}; return {x: x, y: y};
}, },
createWrapper: function(el) {
if (el.parent().attr('id') == 'fxWrapper') // Wraps the element around a wrapper that copies position properties
return el; createWrapper: function(element) {
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>'); //if the element is already wrapped, return it
var wrapper = el.parent(); if (element.parent().is('.ui-effects-wrapper'))
if (el.css('position') == 'static'){ return element.parent();
wrapper.css({position: 'relative'});
el.css({position: 'relative'}); //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 { } else {
var top = el.css('top'); if(isNaN(parseInt(top))) top = 'auto'; var top = element.css('top'); if(isNaN(parseInt(top,10))) top = 'auto';
var left = el.css('left'); if(isNaN(parseInt(left))) left = 'auto'; var left = element.css('left'); if(isNaN(parseInt(left,10))) left = 'auto';
wrapper.css({ position: el.css('position'), top: top, left: left, zIndex: el.css('z-index') }).show(); wrapper.css({ position: element.css('position'), top: top, left: left, zIndex: element.css('z-index') }).show();
el.css({position: 'relative', top:0, left:0}); element.css({position: 'relative', top: 0, left: 0 });
} }
wrapper.css(props); wrapper.css(props);
return wrapper; return wrapper;
}, },
removeWrapper: function(el) {
if (el.parent().attr('id') == 'fxWrapper') removeWrapper: function(element) {
return el.parent().replaceWith(el); if (element.parent().is('.ui-effects-wrapper'))
return el; return element.parent().replaceWith(element);
return element;
}, },
setTransition: function(el, list, factor, val) {
val = val || {}; setTransition: function(element, list, factor, value) {
$.each(list,function(i, x){ value = value || {};
unit = el.cssUnit(x); $.each(list, function(i, x){
if (unit[0] > 0) val[x] = unit[0] * factor + unit[1]; 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) { animateClass: function(value, duration, easing, callback) {
var cb = (typeof easing == "function" ? easing : (callback ? callback : null)); 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() { return this.each(function() {
@ -115,6 +134,7 @@ $.extend($.effects, {
//Extend the methods of jQuery //Extend the methods of jQuery
$.fn.extend({ $.fn.extend({
//Save old methods //Save old methods
_show: $.fn.show, _show: $.fn.show,
_hide: $.fn.hide, _hide: $.fn.hide,
@ -122,35 +142,40 @@ $.fn.extend({
_addClass: $.fn.addClass, _addClass: $.fn.addClass,
_removeClass: $.fn.removeClass, _removeClass: $.fn.removeClass,
_toggleClass: $.fn.toggleClass, _toggleClass: $.fn.toggleClass,
// New ec methods
effect: function(fx,o,speed,callback) { // New effect methods
return $.effects[fx] ? $.effects[fx].call(this, {method: fx, options: o || {}, duration: speed, callback: callback }) : null; effect: function(fx, options, speed, callback) {
return $.effects[fx] ? $.effects[fx].call(this, {method: fx, options: options || {}, duration: speed, callback: callback }) : null;
}, },
show: function() { 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); return this._show.apply(this, arguments);
else { else {
var o = arguments[1] || {}; o['mode'] = 'show'; var o = arguments[1] || {}; o['mode'] = 'show';
return this.effect.apply(this, [arguments[0], o, arguments[2] || o.duration, arguments[3] || o.callback]); return this.effect.apply(this, [arguments[0], o, arguments[2] || o.duration, arguments[3] || o.callback]);
} }
}, },
hide: function() { 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); return this._hide.apply(this, arguments);
else { else {
var o = arguments[1] || {}; o['mode'] = 'hide'; var o = arguments[1] || {}; o['mode'] = 'hide';
return this.effect.apply(this, [arguments[0], o, arguments[2] || o.duration, arguments[3] || o.callback]); return this.effect.apply(this, [arguments[0], o, arguments[2] || o.duration, arguments[3] || o.callback]);
} }
}, },
toggle: function(){ 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); return this.__toggle.apply(this, arguments);
else { else {
var o = arguments[1] || {}; o['mode'] = 'toggle'; var o = arguments[1] || {}; o['mode'] = 'toggle';
return this.effect.apply(this, [arguments[0], o, arguments[2] || o.duration, arguments[3] || o.callback]); 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); return speed ? $.effects.animateClass.apply(this, [{ add: classNames },speed,easing,callback]) : this._addClass(classNames);
}, },
removeClass: function(classNames,speed,easing,callback) { removeClass: function(classNames,speed,easing,callback) {
@ -165,6 +190,7 @@ $.fn.extend({
switchClass: function() { switchClass: function() {
return this.morph.apply(this, arguments); return this.morph.apply(this, arguments);
}, },
// helper functions // helper functions
cssUnit: function(key) { cssUnit: function(key) {
var style = this.css(key), val = []; var style = this.css(key), val = [];
@ -184,18 +210,18 @@ $.fn.extend({
// We override the animation for all of these color styles // We override the animation for all of these color styles
$.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){ $.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 ) { if ( fx.state == 0 ) {
fx.start = getColor( fx.elem, attr ); fx.start = getColor( fx.elem, attr );
fx.end = getRGB( fx.end ); fx.end = getRGB( fx.end );
} }
fx.elem.style[attr] = "rgb(" + [ 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[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]), 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]), 255), 0) Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2],10), 255), 0)
].join(",") + ")"; ].join(",") + ")";
} };
}); });
// Color Conversion functions from highlightFade // Color Conversion functions from highlightFade
@ -212,7 +238,7 @@ function getRGB(color) {
// Look for rgb(num,num,num) // 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)) 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%) // 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)) if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))