[Summary view] [Print] [Text view]

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