resources/lib/jquery.ui/jquery.ui.effect-scale.js

   1 /*!
   2  * jQuery UI Effects Scale 1.9.2
   3  * http://jqueryui.com
   4  *
   5  * Copyright 2012 jQuery Foundation and other contributors
   6  * Released under the MIT license.
   7  * http://jquery.org/license
   8  *
   9  * http://api.jqueryui.com/scale-effect/
  10  *
  11  * Depends:
  12  *      jquery.ui.effect.js
  13  */
  14 (function( $, undefined ) {
  15
  16 $.effects.effect.puff = function( o, done ) {
  17         var elem = $( this ),
  18                 mode = $.effects.setMode( elem, o.mode || "hide" ),
  19                 hide = mode === "hide",
  20                 percent = parseInt( o.percent, 10 ) || 150,
  21                 factor = percent / 100,
  22                 original = {
  23                         height: elem.height(),
  24                         width: elem.width(),
  25                         outerHeight: elem.outerHeight(),
  26                         outerWidth: elem.outerWidth()
  27                 };
  28
  29         $.extend( o, {
  30                 effect: "scale",
  31                 queue: false,
  32                 fade: true,
  33                 mode: mode,
  34                 complete: done,
  35                 percent: hide ? percent : 100,
  36                 from: hide ?
  37                         original :
  38                         {
  39                                 height: original.height * factor,
  40                                 width: original.width * factor,
  41                                 outerHeight: original.outerHeight * factor,
  42                                 outerWidth: original.outerWidth * factor
  43                         }
  44         });
  45
  46         elem.effect( o );
  47 };
  48
  49 $.effects.effect.scale = function( o, done ) {
  50
  51         // Create element
  52         var el = $( this ),
  53                 options = $.extend( true, {}, o ),
  54                 mode = $.effects.setMode( el, o.mode || "effect" ),
  55                 percent = parseInt( o.percent, 10 ) ||
  56                         ( parseInt( o.percent, 10 ) === 0 ? 0 : ( mode === "hide" ? 0 : 100 ) ),
  57                 direction = o.direction || "both",
  58                 origin = o.origin,
  59                 original = {
  60                         height: el.height(),
  61                         width: el.width(),
  62                         outerHeight: el.outerHeight(),
  63                         outerWidth: el.outerWidth()
  64                 },
  65                 factor = {
  66                         y: direction !== "horizontal" ? (percent / 100) : 1,
  67                         x: direction !== "vertical" ? (percent / 100) : 1
  68                 };
  69
  70         // We are going to pass this effect to the size effect:
  71         options.effect = "size";
  72         options.queue = false;
  73         options.complete = done;
  74
  75         // Set default origin and restore for show/hide
  76         if ( mode !== "effect" ) {
  77                 options.origin = origin || ["middle","center"];
  78                 options.restore = true;
  79         }
  80
  81         options.from = o.from || ( mode === "show" ? {
  82                 height: 0,
  83                 width: 0,
  84                 outerHeight: 0,
  85                 outerWidth: 0
  86         } : original );
  87         options.to = {
  88                 height: original.height * factor.y,
  89                 width: original.width * factor.x,
  90                 outerHeight: original.outerHeight * factor.y,
  91                 outerWidth: original.outerWidth * factor.x
  92         };
  93
  94         // Fade option to support puff
  95         if ( options.fade ) {
  96                 if ( mode === "show" ) {
  97                         options.from.opacity = 0;
  98                         options.to.opacity = 1;
  99                 }
 100                 if ( mode === "hide" ) {
 101                         options.from.opacity = 1;
 102                         options.to.opacity = 0;
 103                 }
 104         }
 105
 106         // Animate
 107         el.effect( options );
 108
 109 };
 110
 111 $.effects.effect.size = function( o, done ) {
 112
 113         // Create element
 114         var original, baseline, factor,
 115                 el = $( this ),
 116                 props0 = [ "position", "top", "bottom", "left", "right", "width", "height", "overflow", "opacity" ],
 117
 118                 // Always restore
 119                 props1 = [ "position", "top", "bottom", "left", "right", "overflow", "opacity" ],
 120
 121                 // Copy for children
 122                 props2 = [ "width", "height", "overflow" ],
 123                 cProps = [ "fontSize" ],
 124                 vProps = [ "borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom" ],
 125                 hProps = [ "borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight" ],
 126
 127                 // Set options
 128                 mode = $.effects.setMode( el, o.mode || "effect" ),
 129                 restore = o.restore || mode !== "effect",
 130                 scale = o.scale || "both",
 131                 origin = o.origin || [ "middle", "center" ],
 132                 position = el.css( "position" ),
 133                 props = restore ? props0 : props1,
 134                 zero = {
 135                         height: 0,
 136                         width: 0,
 137                         outerHeight: 0,
 138                         outerWidth: 0
 139                 };
 140
 141         if ( mode === "show" ) {
 142                 el.show();
 143         }
 144         original = {
 145                 height: el.height(),
 146                 width: el.width(),
 147                 outerHeight: el.outerHeight(),
 148                 outerWidth: el.outerWidth()
 149         };
 150
 151         if ( o.mode === "toggle" && mode === "show" ) {
 152                 el.from = o.to || zero;
 153                 el.to = o.from || original;
 154         } else {
 155                 el.from = o.from || ( mode === "show" ? zero : original );
 156                 el.to = o.to || ( mode === "hide" ? zero : original );
 157         }
 158
 159         // Set scaling factor
 160         factor = {
 161                 from: {
 162                         y: el.from.height / original.height,
 163                         x: el.from.width / original.width
 164                 },
 165                 to: {
 166                         y: el.to.height / original.height,
 167                         x: el.to.width / original.width
 168                 }
 169         };
 170
 171         // Scale the css box
 172         if ( scale === "box" || scale === "both" ) {
 173
 174                 // Vertical props scaling
 175                 if ( factor.from.y !== factor.to.y ) {
 176                         props = props.concat( vProps );
 177                         el.from = $.effects.setTransition( el, vProps, factor.from.y, el.from );
 178                         el.to = $.effects.setTransition( el, vProps, factor.to.y, el.to );
 179                 }
 180
 181                 // Horizontal props scaling
 182                 if ( factor.from.x !== factor.to.x ) {
 183                         props = props.concat( hProps );
 184                         el.from = $.effects.setTransition( el, hProps, factor.from.x, el.from );
 185                         el.to = $.effects.setTransition( el, hProps, factor.to.x, el.to );
 186                 }
 187         }
 188
 189         // Scale the content
 190         if ( scale === "content" || scale === "both" ) {
 191
 192                 // Vertical props scaling
 193                 if ( factor.from.y !== factor.to.y ) {
 194                         props = props.concat( cProps ).concat( props2 );
 195                         el.from = $.effects.setTransition( el, cProps, factor.from.y, el.from );
 196                         el.to = $.effects.setTransition( el, cProps, factor.to.y, el.to );
 197                 }
 198         }
 199
 200         $.effects.save( el, props );
 201         el.show();
 202         $.effects.createWrapper( el );
 203         el.css( "overflow", "hidden" ).css( el.from );
 204
 205         // Adjust
 206         if (origin) { // Calculate baseline shifts
 207                 baseline = $.effects.getBaseline( origin, original );
 208                 el.from.top = ( original.outerHeight - el.outerHeight() ) * baseline.y;
 209                 el.from.left = ( original.outerWidth - el.outerWidth() ) * baseline.x;
 210                 el.to.top = ( original.outerHeight - el.to.outerHeight ) * baseline.y;
 211                 el.to.left = ( original.outerWidth - el.to.outerWidth ) * baseline.x;
 212         }
 213         el.css( el.from ); // set top & left
 214
 215         // Animate
 216         if ( scale === "content" || scale === "both" ) { // Scale the children
 217
 218                 // Add margins/font-size
 219                 vProps = vProps.concat([ "marginTop", "marginBottom" ]).concat(cProps);
 220                 hProps = hProps.concat([ "marginLeft", "marginRight" ]);
 221                 props2 = props0.concat(vProps).concat(hProps);
 222
 223                 el.find( "*[width]" ).each( function(){
 224                         var child = $( this ),
 225                                 c_original = {
 226                                         height: child.height(),
 227                                         width: child.width(),
 228                                         outerHeight: child.outerHeight(),
 229                                         outerWidth: child.outerWidth()
 230                                 };
 231                         if (restore) {
 232                                 $.effects.save(child, props2);
 233                         }
 234
 235                         child.from = {
 236                                 height: c_original.height * factor.from.y,
 237                                 width: c_original.width * factor.from.x,
 238                                 outerHeight: c_original.outerHeight * factor.from.y,
 239                                 outerWidth: c_original.outerWidth * factor.from.x
 240                         };
 241                         child.to = {
 242                                 height: c_original.height * factor.to.y,
 243                                 width: c_original.width * factor.to.x,
 244                                 outerHeight: c_original.height * factor.to.y,
 245                                 outerWidth: c_original.width * factor.to.x
 246                         };
 247
 248                         // Vertical props scaling
 249                         if ( factor.from.y !== factor.to.y ) {
 250                                 child.from = $.effects.setTransition( child, vProps, factor.from.y, child.from );
 251                                 child.to = $.effects.setTransition( child, vProps, factor.to.y, child.to );
 252                         }
 253
 254                         // Horizontal props scaling
 255                         if ( factor.from.x !== factor.to.x ) {
 256                                 child.from = $.effects.setTransition( child, hProps, factor.from.x, child.from );
 257                                 child.to = $.effects.setTransition( child, hProps, factor.to.x, child.to );
 258                         }
 259
 260                         // Animate children
 261                         child.css( child.from );
 262                         child.animate( child.to, o.duration, o.easing, function() {
 263
 264                                 // Restore children
 265                                 if ( restore ) {
 266                                         $.effects.restore( child, props2 );
 267                                 }
 268                         });
 269                 });
 270         }
 271
 272         // Animate
 273         el.animate( el.to, {
 274                 queue: false,
 275                 duration: o.duration,
 276                 easing: o.easing,
 277                 complete: function() {
 278                         if ( el.to.opacity === 0 ) {
 279                                 el.css( "opacity", el.from.opacity );
 280                         }
 281                         if( mode === "hide" ) {
 282                                 el.hide();
 283                         }
 284                         $.effects.restore( el, props );
 285                         if ( !restore ) {
 286
 287                                 // we need to calculate our new positioning based on the scaling
 288                                 if ( position === "static" ) {
 289                                         el.css({
 290                                                 position: "relative",
 291                                                 top: el.to.top,
 292                                                 left: el.to.left
 293                                         });
 294                                 } else {
 295                                         $.each([ "top", "left" ], function( idx, pos ) {
 296                                                 el.css( pos, function( _, str ) {
 297                                                         var val = parseInt( str, 10 ),
 298                                                                 toRef = idx ? el.to.left : el.to.top;
 299
 300                                                         // if original was "auto", recalculate the new value from wrapper
 301                                                         if ( str === "auto" ) {
 302                                                                 return toRef + "px";
 303                                                         }
 304
 305                                                         return val + toRef + "px";
 306                                                 });
 307                                         });
 308                                 }
 309                         }
 310
 311                         $.effects.removeWrapper( el );
 312                         done();
 313                 }
 314         });
 315
 316 };
 317
 318 })(jQuery);