effect-size.js 5.3 KB

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