[Summary view] [Print] [Text view]

   1  /*!
   2   * jQuery UI Effects Size 1.13.1
   3   * http://jqueryui.com
   4   *
   5   * Copyright jQuery Foundation and other contributors
   6   * Released under the MIT license.
   7   * http://jquery.org/license
   8   */
   9  
  10  //>>label: Size Effect
  11  //>>group: Effects
  12  //>>description: Resize an element to a specified width and height.
  13  //>>docs: http://api.jqueryui.com/size-effect/
  14  //>>demos: http://jqueryui.com/effect/
  15  
  16  ( function( factory ) {
  17      "use strict";
  18  
  19      if ( typeof define === "function" && define.amd ) {
  20  
  21          // AMD. Register as an anonymous module.
  22          define( [
  23              "jquery",
  24              "./effect"
  25          ], factory );
  26      } else {
  27  
  28          // Browser globals
  29          factory( jQuery );
  30      }
  31  } )( function( $ ) {
  32  "use strict";
  33  
  34  return $.effects.define( "size", function( options, done ) {
  35  
  36      // Create element
  37      var baseline, factor, temp,
  38          element = $( this ),
  39  
  40          // Copy for children
  41          cProps = [ "fontSize" ],
  42          vProps = [ "borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom" ],
  43          hProps = [ "borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight" ],
  44  
  45          // Set options
  46          mode = options.mode,
  47          restore = mode !== "effect",
  48          scale = options.scale || "both",
  49          origin = options.origin || [ "middle", "center" ],
  50          position = element.css( "position" ),
  51          pos = element.position(),
  52          original = $.effects.scaledDimensions( element ),
  53          from = options.from || original,
  54          to = options.to || $.effects.scaledDimensions( element, 0 );
  55  
  56      $.effects.createPlaceholder( element );
  57  
  58      if ( mode === "show" ) {
  59          temp = from;
  60          from = to;
  61          to = temp;
  62      }
  63  
  64      // Set scaling factor
  65      factor = {
  66          from: {
  67              y: from.height / original.height,
  68              x: from.width / original.width
  69          },
  70          to: {
  71              y: to.height / original.height,
  72              x: to.width / original.width
  73          }
  74      };
  75  
  76      // Scale the css box
  77      if ( scale === "box" || scale === "both" ) {
  78  
  79          // Vertical props scaling
  80          if ( factor.from.y !== factor.to.y ) {
  81              from = $.effects.setTransition( element, vProps, factor.from.y, from );
  82              to = $.effects.setTransition( element, vProps, factor.to.y, to );
  83          }
  84  
  85          // Horizontal props scaling
  86          if ( factor.from.x !== factor.to.x ) {
  87              from = $.effects.setTransition( element, hProps, factor.from.x, from );
  88              to = $.effects.setTransition( element, hProps, factor.to.x, to );
  89          }
  90      }
  91  
  92      // Scale the content
  93      if ( scale === "content" || scale === "both" ) {
  94  
  95          // Vertical props scaling
  96          if ( factor.from.y !== factor.to.y ) {
  97              from = $.effects.setTransition( element, cProps, factor.from.y, from );
  98              to = $.effects.setTransition( element, cProps, factor.to.y, to );
  99          }
 100      }
 101  
 102      // Adjust the position properties based on the provided origin points
 103      if ( origin ) {
 104          baseline = $.effects.getBaseline( origin, original );
 105          from.top = ( original.outerHeight - from.outerHeight ) * baseline.y + pos.top;
 106          from.left = ( original.outerWidth - from.outerWidth ) * baseline.x + pos.left;
 107          to.top = ( original.outerHeight - to.outerHeight ) * baseline.y + pos.top;
 108          to.left = ( original.outerWidth - to.outerWidth ) * baseline.x + pos.left;
 109      }
 110      delete from.outerHeight;
 111      delete from.outerWidth;
 112      element.css( from );
 113  
 114      // Animate the children if desired
 115      if ( scale === "content" || scale === "both" ) {
 116  
 117          vProps = vProps.concat( [ "marginTop", "marginBottom" ] ).concat( cProps );
 118          hProps = hProps.concat( [ "marginLeft", "marginRight" ] );
 119  
 120          // Only animate children with width attributes specified
 121          // TODO: is this right? should we include anything with css width specified as well
 122          element.find( "*[width]" ).each( function() {
 123              var child = $( this ),
 124                  childOriginal = $.effects.scaledDimensions( child ),
 125                  childFrom = {
 126                      height: childOriginal.height * factor.from.y,
 127                      width: childOriginal.width * factor.from.x,
 128                      outerHeight: childOriginal.outerHeight * factor.from.y,
 129                      outerWidth: childOriginal.outerWidth * factor.from.x
 130                  },
 131                  childTo = {
 132                      height: childOriginal.height * factor.to.y,
 133                      width: childOriginal.width * factor.to.x,
 134                      outerHeight: childOriginal.height * factor.to.y,
 135                      outerWidth: childOriginal.width * factor.to.x
 136                  };
 137  
 138              // Vertical props scaling
 139              if ( factor.from.y !== factor.to.y ) {
 140                  childFrom = $.effects.setTransition( child, vProps, factor.from.y, childFrom );
 141                  childTo = $.effects.setTransition( child, vProps, factor.to.y, childTo );
 142              }
 143  
 144              // Horizontal props scaling
 145              if ( factor.from.x !== factor.to.x ) {
 146                  childFrom = $.effects.setTransition( child, hProps, factor.from.x, childFrom );
 147                  childTo = $.effects.setTransition( child, hProps, factor.to.x, childTo );
 148              }
 149  
 150              if ( restore ) {
 151                  $.effects.saveStyle( child );
 152              }
 153  
 154              // Animate children
 155              child.css( childFrom );
 156              child.animate( childTo, options.duration, options.easing, function() {
 157  
 158                  // Restore children
 159                  if ( restore ) {
 160                      $.effects.restoreStyle( child );
 161                  }
 162              } );
 163          } );
 164      }
 165  
 166      // Animate
 167      element.animate( to, {
 168          queue: false,
 169          duration: options.duration,
 170          easing: options.easing,
 171          complete: function() {
 172  
 173              var offset = element.offset();
 174  
 175              if ( to.opacity === 0 ) {
 176                  element.css( "opacity", from.opacity );
 177              }
 178  
 179              if ( !restore ) {
 180                  element
 181                      .css( "position", position === "static" ? "relative" : position )
 182                      .offset( offset );
 183  
 184                  // Need to save style here so that automatic style restoration
 185                  // doesn't restore to the original styles from before the animation.
 186                  $.effects.saveStyle( element );
 187              }
 188  
 189              done();
 190          }
 191      } );
 192  
 193  } );
 194  
 195  } );