effect-size.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233
  1. /*!
  2. * jQuery UI Effects Size 1.11.2
  3. * http://jqueryui.com
  4. *
  5. * Copyright 2014 jQuery Foundation and other contributors
  6. * Released under the MIT license.
  7. * http://jquery.org/license
  8. *
  9. * http://api.jqueryui.com/size-effect/
  10. */
  11. (function( factory ) {
  12. if ( typeof define === "function" && define.amd ) {
  13. // AMD. Register as an anonymous module.
  14. define([
  15. "jquery",
  16. "./effect"
  17. ], factory );
  18. } else {
  19. // Browser globals
  20. factory( jQuery );
  21. }
  22. }(function( $ ) {
  23. return $.effects.effect.size = function( o, done ) {
  24. // Create element
  25. var original, baseline, factor,
  26. el = $( this ),
  27. props0 = [ "position", "top", "bottom", "left", "right", "width", "height", "overflow", "opacity" ],
  28. // Always restore
  29. props1 = [ "position", "top", "bottom", "left", "right", "overflow", "opacity" ],
  30. // Copy for children
  31. props2 = [ "width", "height", "overflow" ],
  32. cProps = [ "fontSize" ],
  33. vProps = [ "borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom" ],
  34. hProps = [ "borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight" ],
  35. // Set options
  36. mode = $.effects.setMode( el, o.mode || "effect" ),
  37. restore = o.restore || mode !== "effect",
  38. scale = o.scale || "both",
  39. origin = o.origin || [ "middle", "center" ],
  40. position = el.css( "position" ),
  41. props = restore ? props0 : props1,
  42. zero = {
  43. height: 0,
  44. width: 0,
  45. outerHeight: 0,
  46. outerWidth: 0
  47. };
  48. if ( mode === "show" ) {
  49. el.show();
  50. }
  51. original = {
  52. height: el.height(),
  53. width: el.width(),
  54. outerHeight: el.outerHeight(),
  55. outerWidth: el.outerWidth()
  56. };
  57. if ( o.mode === "toggle" && mode === "show" ) {
  58. el.from = o.to || zero;
  59. el.to = o.from || original;
  60. } else {
  61. el.from = o.from || ( mode === "show" ? zero : original );
  62. el.to = o.to || ( mode === "hide" ? zero : original );
  63. }
  64. // Set scaling factor
  65. factor = {
  66. from: {
  67. y: el.from.height / original.height,
  68. x: el.from.width / original.width
  69. },
  70. to: {
  71. y: el.to.height / original.height,
  72. x: el.to.width / original.width
  73. }
  74. };
  75. // Scale the css box
  76. if ( scale === "box" || scale === "both" ) {
  77. // Vertical props scaling
  78. if ( factor.from.y !== factor.to.y ) {
  79. props = props.concat( vProps );
  80. el.from = $.effects.setTransition( el, vProps, factor.from.y, el.from );
  81. el.to = $.effects.setTransition( el, vProps, factor.to.y, el.to );
  82. }
  83. // Horizontal props scaling
  84. if ( factor.from.x !== factor.to.x ) {
  85. props = props.concat( hProps );
  86. el.from = $.effects.setTransition( el, hProps, factor.from.x, el.from );
  87. el.to = $.effects.setTransition( el, hProps, factor.to.x, el.to );
  88. }
  89. }
  90. // Scale the content
  91. if ( scale === "content" || scale === "both" ) {
  92. // Vertical props scaling
  93. if ( factor.from.y !== factor.to.y ) {
  94. props = props.concat( cProps ).concat( props2 );
  95. el.from = $.effects.setTransition( el, cProps, factor.from.y, el.from );
  96. el.to = $.effects.setTransition( el, cProps, factor.to.y, el.to );
  97. }
  98. }
  99. $.effects.save( el, props );
  100. el.show();
  101. $.effects.createWrapper( el );
  102. el.css( "overflow", "hidden" ).css( el.from );
  103. // Adjust
  104. if (origin) { // Calculate baseline shifts
  105. baseline = $.effects.getBaseline( origin, original );
  106. el.from.top = ( original.outerHeight - el.outerHeight() ) * baseline.y;
  107. el.from.left = ( original.outerWidth - el.outerWidth() ) * baseline.x;
  108. el.to.top = ( original.outerHeight - el.to.outerHeight ) * baseline.y;
  109. el.to.left = ( original.outerWidth - el.to.outerWidth ) * baseline.x;
  110. }
  111. el.css( el.from ); // set top & left
  112. // Animate
  113. if ( scale === "content" || scale === "both" ) { // Scale the children
  114. // Add margins/font-size
  115. vProps = vProps.concat([ "marginTop", "marginBottom" ]).concat(cProps);
  116. hProps = hProps.concat([ "marginLeft", "marginRight" ]);
  117. props2 = props0.concat(vProps).concat(hProps);
  118. el.find( "*[width]" ).each( function() {
  119. var child = $( this ),
  120. c_original = {
  121. height: child.height(),
  122. width: child.width(),
  123. outerHeight: child.outerHeight(),
  124. outerWidth: child.outerWidth()
  125. };
  126. if (restore) {
  127. $.effects.save(child, props2);
  128. }
  129. child.from = {
  130. height: c_original.height * factor.from.y,
  131. width: c_original.width * factor.from.x,
  132. outerHeight: c_original.outerHeight * factor.from.y,
  133. outerWidth: c_original.outerWidth * factor.from.x
  134. };
  135. child.to = {
  136. height: c_original.height * factor.to.y,
  137. width: c_original.width * factor.to.x,
  138. outerHeight: c_original.height * factor.to.y,
  139. outerWidth: c_original.width * factor.to.x
  140. };
  141. // Vertical props scaling
  142. if ( factor.from.y !== factor.to.y ) {
  143. child.from = $.effects.setTransition( child, vProps, factor.from.y, child.from );
  144. child.to = $.effects.setTransition( child, vProps, factor.to.y, child.to );
  145. }
  146. // Horizontal props scaling
  147. if ( factor.from.x !== factor.to.x ) {
  148. child.from = $.effects.setTransition( child, hProps, factor.from.x, child.from );
  149. child.to = $.effects.setTransition( child, hProps, factor.to.x, child.to );
  150. }
  151. // Animate children
  152. child.css( child.from );
  153. child.animate( child.to, o.duration, o.easing, function() {
  154. // Restore children
  155. if ( restore ) {
  156. $.effects.restore( child, props2 );
  157. }
  158. });
  159. });
  160. }
  161. // Animate
  162. el.animate( el.to, {
  163. queue: false,
  164. duration: o.duration,
  165. easing: o.easing,
  166. complete: function() {
  167. if ( el.to.opacity === 0 ) {
  168. el.css( "opacity", el.from.opacity );
  169. }
  170. if ( mode === "hide" ) {
  171. el.hide();
  172. }
  173. $.effects.restore( el, props );
  174. if ( !restore ) {
  175. // we need to calculate our new positioning based on the scaling
  176. if ( position === "static" ) {
  177. el.css({
  178. position: "relative",
  179. top: el.to.top,
  180. left: el.to.left
  181. });
  182. } else {
  183. $.each([ "top", "left" ], function( idx, pos ) {
  184. el.css( pos, function( _, str ) {
  185. var val = parseInt( str, 10 ),
  186. toRef = idx ? el.to.left : el.to.top;
  187. // if original was "auto", recalculate the new value from wrapper
  188. if ( str === "auto" ) {
  189. return toRef + "px";
  190. }
  191. return val + toRef + "px";
  192. });
  193. });
  194. }
  195. }
  196. $.effects.removeWrapper( el );
  197. done();
  198. }
  199. });
  200. };
  201. }));