From 9c771b8f8b49a95da2b2234fdc0bd19c26a91038 Mon Sep 17 00:00:00 2001
From: gnarf <gnarf@gnarf.net>
Date: Sun, 6 Mar 2011 18:34:18 -0600
Subject: effects.*: Style Guidance
---
ui/jquery.effects.scale.js | 288 ++++++++++++++++++++++++++----------------
ui/jquery.effects.shake.js | 65 +++++-----
ui/jquery.effects.slide.js | 61 ++++++---
ui/jquery.effects.transfer.js | 7 +-
4 files changed, 259 insertions(+), 162 deletions(-)
diff --git a/ui/jquery.effects.scale.js b/ui/jquery.effects.scale.js
index fa8087fe3..ec707c2b5 100644
--- 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 011bd6b54..5e8875abe 100644
--- 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 57b60290e..eeba117cf 100644
--- 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 b57ac51b9..79b1577d9 100644
--- 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();
});
});
--
cgit v1.2.3