[Summary view] [Print] [Text view]

   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);