Açıklama Yok

effect-size.js 5.3KB

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