effects.*: Style Guidance

diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js
index fa8087fe3764c72ae22c086df5e4e5203b874284..ec707c2b5963b4429ba8b8047d12458b233f7bc4 100644 (file)
--- a/ui/jquery.effects.scale.js
+++ b/ui/jquery.effects.scale.js
@@ -12,13 +12,17 @@
  */
 (function( $, undefined ) {
 
-$.effects.puff = function(o) {
-       return this.queue(function() {
-               var elem = $(this),
-                       mode = $.effects.setMode(elem, o.mode || 'hide'),
-                       percent = parseInt(o.percent, 10) || 150,
+$.effects.puff = function( o ) {
+       console.log(o);
+       return this.queue( function() {
+               var elem = $( this ),
+                       mode = $.effects.setMode( elem, o.mode || 'hide' ),
+                       percent = parseInt( o.percent, 10 ) || 150,
                        factor = percent / 100,
-                       original = { height: elem.height(), width: elem.width() };
+                       original = { 
+                               height: elem.height(), 
+                               width: elem.width() 
+                       };
 
                $.extend(o, {
                        effect: 'scale',
@@ -32,147 +36,213 @@ $.effects.puff = function(o) {
                                        width: original.width * factor
                                }
                });
-console.log(o);debugger;
-               elem.effect(o);
-               elem.dequeue();
+
+               elem.effect( o ).dequeue();
        });
 };
 
-$.effects.scale = function(o) {
+$.effects.scale = function( o ) {
 
-       return this.queue(function() {
+       return this.queue( function() {
 
                // Create element
-               var el = $(this);
-
-               // Set options
-               var options = $.extend(true, {}, o);
-               var mode = $.effects.setMode(el, o.mode || 'effect'); // Set Mode
-               var percent = parseInt(o.percent,10) || (parseInt(o.percent,10) == 0 ? 0 : (mode == 'hide' ? 0 : 100)); // Set default scaling percent
-               var direction = o.direction || 'both'; // Set default axis
-               var origin = o.origin; // The origin of the scaling
-               if (mode != 'effect') { // Set default origin and restore for show/hide
+               var el = $( this ),
+                       options = $.extend( true, {}, o ),
+                       mode = $.effects.setMode( el, o.mode || 'effect' ),
+                       percent = parseInt( o.percent, 10 ) || ( parseInt( o.percent, 10 ) == 0 ? 0 : ( mode == 'hide' ? 0 : 100 ) ),
+                       direction = o.direction || 'both',
+                       origin = o.origin,
+                       original = { 
+                               height: el.height(), 
+                               width: el.width()
+                       },
+                       factor = {
+                               y: direction != 'horizontal' ? (percent / 100) : 1,
+                               x: direction != 'vertical' ? (percent / 100) : 1
+                       }; 
+
+               // We are going to pass this effect to the size effect:
+               options.effect = "size";
+
+               // Set default origin and restore for show/hide
+               if ( mode != 'effect' ) { 
                        options.origin = origin || ['middle','center'];
                        options.restore = true;
                }
-               var original = {height: el.height(), width: el.width()}; // Save original
-               el.from = o.from || (mode == 'show' ? {height: 0, width: 0} : original); // Default from state
 
-               // Adjust
-               var factor = { // Set scaling factor
-                       y: direction != 'horizontal' ? (percent / 100) : 1,
-                       x: direction != 'vertical' ? (percent / 100) : 1
-               };
-               el.to = {height: original.height * factor.y, width: original.width * factor.x}; // Set to state
+               options.from = o.from || ( mode == 'show' ? { height: 0, width: 0 } : original ); 
+               options.to = {
+                       height: original.height * factor.y, 
+                       width: original.width * factor.x
+               }; 
 
-               if (o.fade) { // Fade option to support puff
-                       if (mode == 'show') {el.from.opacity = 0; el.to.opacity = 1;};
-                       if (mode == 'hide') {el.from.opacity = 1; el.to.opacity = 0;};
+               if ( options.fade ) { // Fade option to support puff
+                       if ( mode == 'show' ) {
+                               options.from.opacity = 0; 
+                               options.to.opacity = 1;
+                       }
+                       if ( mode == 'hide' ) {
+                               options.from.opacity = 1; 
+                               options.to.opacity = 0;
+                       }
                };
 
-               // Animation
-               options.from = el.from; options.to = el.to; options.mode = mode;
-               
-               options.effect = "size";
-
                // Animate
-               el.effect(options);
-               el.dequeue();
+               el.effect(options).dequeue();
        });
 
 };
 
-$.effects.size = function(o) {
-
-       return this.queue(function() {
+$.effects.size = function( o ) {
 
+       return this.queue( function() {
                // Create element
-               var el = $(this), props = ['position','top','bottom','left','right','width','height','overflow','opacity'];
-               var props1 = ['position','top','bottom','left','right','overflow','opacity']; // Always restore
-               var props2 = ['width','height','overflow']; // Copy for children
-               var cProps = ['fontSize'];
-               var vProps = ['borderTopWidth', 'borderBottomWidth', 'paddingTop', 'paddingBottom'];
-               var hProps = ['borderLeftWidth', 'borderRightWidth', 'paddingLeft', 'paddingRight'];
-
-               // Set options
-               var mode = $.effects.setMode(el, o.mode || 'effect'); // Set Mode
-               var restore = o.restore || false; // Default restore
-               var scale = o.scale || 'both'; // Default scale mode
-               var origin = o.origin; // The origin of the sizing
-               var original = {height: el.height(), width: el.width()}; // Save original
-               el.from = o.from || original; // Default from state
-               el.to = o.to || original; // Default to state
+               var el = $( this ), 
+                       props = [ 'position', 'top', 'bottom', 'left', 'right', 'width', 'height', 'overflow', 'opacity' ],
+
+                       // Always restore
+                       props1 = [ 'position', 'top', 'bottom', 'left', 'right', 'overflow', 'opacity' ],
+
+                       // Copy for children
+                       props2 = [ 'width', 'height', 'overflow' ],
+                       cProps = [ 'fontSize' ],
+                       vProps = [ 'borderTopWidth', 'borderBottomWidth', 'paddingTop', 'paddingBottom' ],
+                       hProps = [ 'borderLeftWidth', 'borderRightWidth', 'paddingLeft', 'paddingRight' ],
+
+                       // Set options
+                       mode = $.effects.setMode( el, o.mode || 'effect' ),
+                       restore = o.restore || false,
+                       scale = o.scale || 'both',
+                       origin = o.origin,
+                       original = {
+                               height: el.height(), 
+                               width: el.width()
+                       },
+                       baseline, factor;
+
+               el.from = o.from || original;
+               el.to = o.to || original;
+
                // Adjust
                if (origin) { // Calculate baseline shifts
-                       var baseline = $.effects.getBaseline(origin, original);
-                       el.from.top = (original.height - el.from.height) * baseline.y;
-                       el.from.left = (original.width - el.from.width) * baseline.x;
-                       el.to.top = (original.height - el.to.height) * baseline.y;
-                       el.to.left = (original.width - el.to.width) * baseline.x;
-               };
-               var factor = { // Set scaling factor
-                       from: {y: el.from.height / original.height, x: el.from.width / original.width},
-                       to: {y: el.to.height / original.height, x: el.to.width / original.width}
+                       baseline = $.effects.getBaseline( origin, original );
+                       el.from.top = ( original.height - el.from.height ) * baseline.y;
+                       el.from.left = ( original.width - el.from.width ) * baseline.x;
+                       el.to.top = ( original.height - el.to.height ) * baseline.y;
+                       el.to.left = ( original.width - el.to.width ) * baseline.x;
+               }
+
+               // Set scaling factor
+               factor = {
+                       from: {
+                               y: el.from.height / original.height, 
+                               x: el.from.width / original.width
+                       },
+                       to: {
+                               y: el.to.height / original.height, 
+                               x: el.to.width / original.width
+                       }
                };
-               if (scale == 'box' || scale == 'both') { // Scale the css box
-                       if (factor.from.y != factor.to.y) { // Vertical props scaling
-                               props = props.concat(vProps);
-                               el.from = $.effects.setTransition(el, vProps, factor.from.y, el.from);
-                               el.to = $.effects.setTransition(el, vProps, factor.to.y, el.to);
+
+               // Scale the css box
+               if ( scale == 'box' || scale == 'both' ) {
+
+                       // Vertical props scaling
+                       if ( factor.from.y != factor.to.y ) { 
+                               props = props.concat( vProps );
+                               el.from = $.effects.setTransition( el, vProps, factor.from.y, el.from );
+                               el.to = $.effects.setTransition( el, vProps, factor.to.y, el.to );
                        };
-                       if (factor.from.x != factor.to.x) { // Horizontal props scaling
-                               props = props.concat(hProps);
-                               el.from = $.effects.setTransition(el, hProps, factor.from.x, el.from);
-                               el.to = $.effects.setTransition(el, hProps, factor.to.x, el.to);
+
+                       // Horizontal props scaling
+                       if ( factor.from.x != factor.to.x ) { 
+                               props = props.concat( hProps );
+                               el.from = $.effects.setTransition( el, hProps, factor.from.x, el.from );
+                               el.to = $.effects.setTransition( el, hProps, factor.to.x, el.to );
                        };
                };
-               if (scale == 'content' || scale == 'both') { // Scale the content
-                       if (factor.from.y != factor.to.y) { // Vertical props scaling
-                               props = props.concat(cProps);
-                               el.from = $.effects.setTransition(el, cProps, factor.from.y, el.from);
-                               el.to = $.effects.setTransition(el, cProps, factor.to.y, el.to);
+
+               // Scale the content
+               if ( scale == 'content' || scale == 'both' ) { 
+
+                       // Vertical props scaling
+                       if ( factor.from.y != factor.to.y ) { 
+                               props = props.concat( cProps );
+                               el.from = $.effects.setTransition( el, cProps, factor.from.y, el.from );
+                               el.to = $.effects.setTransition( el, cProps, factor.to.y, el.to );
                        };
                };
-               $.effects.save(el, restore ? props : props1); el.show(); // Save & Show
-               $.effects.createWrapper(el); // Create Wrapper
-               el.css('overflow','hidden').css(el.from); // Shift
+               
+               $.effects.save( el, restore ? props : props1 ); 
+               el.show(); 
+               $.effects.createWrapper( el );
+               el.css( 'overflow', 'hidden' ).css( el.from ); 
 
                // Animate
-               if (scale == 'content' || scale == 'both') { // Scale the children
-                       vProps = vProps.concat(['marginTop','marginBottom']).concat(cProps); // Add margins/font-size
-                       hProps = hProps.concat(['marginLeft','marginRight']); // Add margins
-                       props2 = props.concat(vProps).concat(hProps); // Concat
-                       el.find("*[width]").each(function(){
-                               var child = $(this);
+               if ( scale == 'content' || scale == 'both' ) { // Scale the children
+
+                       // Add margins/font-size
+                       vProps = vProps.concat([ 'marginTop', 'marginBottom' ]).concat(cProps);
+                       hProps = hProps.concat([ 'marginLeft', 'marginRight' ]);
+                       props2 = props.concat(vProps).concat(hProps);
+
+                       el.find( "*[width]" ).each( function(){
+                               var child = $( this ),
+                                       c_original = { 
+                                               height: child.height(), 
+                                               width: child.width()
+                                       };
                                if (restore) $.effects.save(child, props2);
-                               var c_original = {height: child.height(), width: child.width()}; // Save original
-                               child.from = {height: c_original.height * factor.from.y, width: c_original.width * factor.from.x};
-                               child.to = {height: c_original.height * factor.to.y, width: c_original.width * factor.to.x};
-                               if (factor.from.y != factor.to.y) { // Vertical props scaling
-                                       child.from = $.effects.setTransition(child, vProps, factor.from.y, child.from);
-                                       child.to = $.effects.setTransition(child, vProps, factor.to.y, child.to);
+                               
+                               child.from = {
+                                       height: c_original.height * factor.from.y, 
+                                       width: c_original.width * factor.from.x
+                               };
+                               child.to = {
+                                       height: c_original.height * factor.to.y, 
+                                       width: c_original.width * factor.to.x
                                };
-                               if (factor.from.x != factor.to.x) { // Horizontal props scaling
-                                       child.from = $.effects.setTransition(child, hProps, factor.from.x, child.from);
-                                       child.to = $.effects.setTransition(child, hProps, factor.to.x, child.to);
+
+                               // Vertical props scaling
+                               if ( factor.from.y != factor.to.y ) { 
+                                       child.from = $.effects.setTransition( child, vProps, factor.from.y, child.from );
+                                       child.to = $.effects.setTransition( child, vProps, factor.to.y, child.to );
+                               };
+
+                               // Horizontal props scaling
+                               if ( factor.from.x != factor.to.x ) {
+                                       child.from = $.effects.setTransition( child, hProps, factor.from.x, child.from );
+                                       child.to = $.effects.setTransition( child, hProps, factor.to.x, child.to );
                                };
-                               child.css(child.from); // Shift children
-                               child.animate(child.to, o.duration, o.easing, function(){
-                                       if (restore) $.effects.restore(child, props2); // Restore children
-                               }); // Animate children
+
+                               // Animate children
+                               child.css( child.from );
+                               child.animate( child.to, o.duration, o.easing, function() {
+
+                                       // Restore children
+                                       if (restore) $.effects.restore( child, props2 ); 
+                               });
                        });
                };
 
                // Animate
-               el.animate(el.to, { queue: false, duration: o.duration, easing: o.easing, complete: function() {
-                       if (el.to.opacity === 0) {
-                               el.css('opacity', el.from.opacity);
+               el.animate( el.to, { 
+                       queue: false, 
+                       duration: o.duration, 
+                       easing: o.easing, 
+                       complete: function() {
+                               if ( el.to.opacity === 0 ) {
+                                       el.css( 'opacity', el.from.opacity );
+                               }
+                               if( mode == 'hide' ) {
+                                       el.hide();
+                               }
+                               $.effects.restore( el, restore ? props : props1 ); 
+                               $.effects.removeWrapper( el ); 
+                               $.isFunction( o.complete ) && o.complete.apply( this, arguments ); // Callback
+                               el.dequeue();
                        }
-                       if(mode == 'hide') el.hide(); // Hide
-                       $.effects.restore(el, restore ? props : props1); $.effects.removeWrapper(el); // Restore
-                       if(o.complete) o.complete.apply(this, arguments); // Callback
-                       el.dequeue();
-               }});
+               });
 
        });
 

diff --git a/ui/jquery.effects.shake.js b/ui/jquery.effects.shake.js
index 011bd6b54f9da3816af2dadd141200c71a09d753..5e8875abebaef95beefea2bc5c45c10c61f4482a 100644 (file)
--- a/ui/jquery.effects.shake.js
+++ b/ui/jquery.effects.shake.js
@@ -12,44 +12,51 @@
  */
 (function( $, undefined ) {
 
-$.effects.shake = function(o) {
+$.effects.shake = function( o ) {
 
-       return this.queue(function() {
+       return this.queue( function() {
 
-               // Create element
-               var el = $(this), props = ['position','top','bottom','left','right'];
-
-               // Set options
-               var mode = $.effects.setMode(el, o.mode || 'effect'); // Set Mode
-               var direction = o.direction || 'left'; // Default direction
-               var distance = o.distance || 20; // Default distance
-               var times = o.times || 3; // Default # of times
-               var speed = o.duration || o.duration || 140; // Default speed per shake
+               var el = $( this ),
+                       props = [ 'position', 'top', 'bottom', 'left', 'right' ],
+                       mode = $.effects.setMode( el, o.mode || 'effect' ),
+                       direction = o.direction || 'left',
+                       distance = o.distance || 20,
+                       times = o.times || 3,
+                       speed = o.duration || 140,
+                       ref = (direction == 'up' || direction == 'down') ? 'top' : 'left',
+                       motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg',
+                       animation = {},
+                       animation1 = {},
+                       animation2 = {},
+                       i; 
 
                // Adjust
-               $.effects.save(el, props); el.show(); // Save & Show
-               $.effects.createWrapper(el); // Create Wrapper
-               var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
-               var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
+               $.effects.save( el, props ); 
+               el.show(); 
+               $.effects.createWrapper( el ); // Create Wrapper
 
                // Animation
-               var animation = {}, animation1 = {}, animation2 = {};
-               animation[ref] = (motion == 'pos' ? '-=' : '+=')  + distance;
-               animation1[ref] = (motion == 'pos' ? '+=' : '-=')  + distance * 2;
-               animation2[ref] = (motion == 'pos' ? '-=' : '+=')  + distance * 2;
+               animation[ ref ] = ( motion == 'pos' ? '-=' : '+=' ) + distance;
+               animation1[ ref ] = ( motion == 'pos' ? '+=' : '-=' ) + distance * 2;
+               animation2[ ref ] = ( motion == 'pos' ? '-=' : '+=' ) + distance * 2;
 
                // Animate
-               el.animate(animation, speed, o.easing);
-               for (var i = 1; i < times; i++) { // Shakes
-                       el.animate(animation1, speed, o.easing).animate(animation2, speed, o.easing);
+               el.animate( animation, speed, o.easing );
+
+               // Shakes
+               for ( i = 1; i < times; i++ ) { 
+                       el.animate( animation1, speed, o.easing ).animate( animation2, speed, o.easing );
                };
-               el.animate(animation1, speed, o.easing).
-               animate(animation, speed / 2, o.easing, function(){ // Last shake
-                       $.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
-                       if(o.complete) o.complete.apply(this, arguments); // Callback
-               });
-               el.queue('fx', function() { el.dequeue(); });
-               el.dequeue();
+               el
+                       .animate( animation1, speed, o.easing )
+                       .animate( animation, speed / 2, o.easing, function() { 
+
+                               // Last shake
+                               $.effects.restore( el, props ); 
+                               $.effects.removeWrapper( el ); 
+                               $.isFunction( o.complete ) && o.complete.apply( this, arguments ); 
+                       })
+                       .dequeue();
        });
 
 };

diff --git a/ui/jquery.effects.slide.js b/ui/jquery.effects.slide.js
index 57b60290e9684b7e19e5899486dc8ff1ce546252..eeba117cf85ee8e349c0cd67b66f3533ca4ba46a 100644 (file)
--- a/ui/jquery.effects.slide.js
+++ b/ui/jquery.effects.slide.js
@@ -12,36 +12,55 @@
  */
 (function( $, undefined ) {
 
-$.effects.slide = function(o) {
+$.effects.slide = function( o ) {
 
-       return this.queue(function() {
+       return this.queue( function() {
 
                // Create element
-               var el = $(this), props = ['position','top','bottom','left','right'];
-
-               // Set options
-               var mode = $.effects.setMode(el, o.mode || 'show'); // Set Mode
-               var direction = o.direction || 'left'; // Default Direction
+               var el = $( this ),
+                       props = ['position','top','bottom','left','right'],
+                       mode = $.effects.setMode( el, o.mode || 'show' ),
+                       direction = o.direction || 'left',
+                       ref = (direction == 'up' || direction == 'down') ? 'top' : 'left',
+                       motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg',
+                       distance,
+                       animation = {}; 
 
                // Adjust
-               $.effects.save(el, props); el.show(); // Save & Show
-               $.effects.createWrapper(el).css({overflow:'hidden'}); // Create Wrapper
-               var ref = (direction == 'up' || direction == 'down') ? 'top' : 'left';
-               var motion = (direction == 'up' || direction == 'left') ? 'pos' : 'neg';
-               var distance = o.distance || (ref == 'top' ? el.outerHeight({margin:true}) : el.outerWidth({margin:true}));
-               if (mode == 'show') el.css(ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance); // Shift
+               $.effects.save( el, props ); 
+               el.show();
+               $.effects.createWrapper( el ).css({
+                       overflow: 'hidden'
+               }); 
+               
+               distance = o.distance || el[ ref == 'top' ? "outerHeight" : "outerWidth" ]({ 
+                       margin: true 
+               });
+               if (mode == 'show') {
+                       el.css( ref, motion == 'pos' ? (isNaN(distance) ? "-" + distance : -distance) : distance );
+               }
 
                // Animation
-               var animation = {};
-               animation[ref] = (mode == 'show' ? (motion == 'pos' ? '+=' : '-=') : (motion == 'pos' ? '-=' : '+=')) + distance;
+               animation[ ref ] = ( mode == 'show' ? 
+                       (motion == 'pos' ? '+=' : '-=') : 
+                       (motion == 'pos' ? '-=' : '+=')) 
+                       + distance;
 
                // Animate
-               el.animate(animation, { queue: false, duration: o.duration, easing: o.easing, complete: function() {
-                       if(mode == 'hide') el.hide(); // Hide
-                       $.effects.restore(el, props); $.effects.removeWrapper(el); // Restore
-                       if(o.complete) o.complete.apply(this, arguments); // Callback
-                       el.dequeue();
-               }});
+               el.animate( animation, { 
+                       queue: false, 
+                       duration: o.duration, 
+                       easing: o.easing, 
+                       complete: function() {
+                               if ( mode == 'hide' ) {
+                                       el.hide(); 
+                               }
+                               $.effects.restore( el, props );
+                               $.effects.removeWrapper( el );
+                               $.isFunction(o.complete) && o.complete.apply( this, arguments ); 
+                               el.dequeue();
+                       }
+               });
 
        });
 

diff --git a/ui/jquery.effects.transfer.js b/ui/jquery.effects.transfer.js
index b57ac51b9a6c6263311897f15206c19cfcfdd022..79b1577d95e75394527894a6451bc5588607a0a7 100644 (file)
--- a/ui/jquery.effects.transfer.js
+++ b/ui/jquery.effects.transfer.js
@@ -12,8 +12,9 @@
  */
 (function( $, undefined ) {
 
-$.effects.transfer = function(o) {
-       return this.queue(function() {
+$.effects.transfer = function( o ) {
+       
+       return this.queue( function() {
                var elem = $( this ),
                        target = $( o.to ),
                        endPosition = target.offset(),
@@ -36,7 +37,7 @@ $.effects.transfer = function(o) {
                                })
                                .animate( animation, o.duration, o.easing, function() {
                                        transfer.remove();
-                                       (o.complete && o.complete.apply(elem[0], arguments));
+                                       $.isFunction( o.complete ) && o.complete.apply(elem[0], arguments);
                                        elem.dequeue();
                                });
        });