Skip to content
Permalink
Browse files

effects.*: Style Guidance

  • Loading branch information...
gnarf committed Mar 7, 2011
1 parent 7a60bc6 commit 9c771b8f8b49a95da2b2234fdc0bd19c26a91038
Showing with 259 additions and 162 deletions.
  1. +179 −109 ui/jquery.effects.scale.js
  2. +36 −29 ui/jquery.effects.shake.js
  3. +40 −21 ui/jquery.effects.slide.js
  4. +4 −3 ui/jquery.effects.transfer.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();
}});
});

});

0 comments on commit 9c771b8

Please sign in to comment.
You can’t perform that action at this time.