[18953] | 1 | /*! |
---|
[20824] | 2 | * jQuery UI Effects Scale 1.10.1 |
---|
[18953] | 3 | * http://jqueryui.com |
---|
| 4 | * |
---|
[20824] | 5 | * Copyright 2013 jQuery Foundation and other contributors |
---|
[18953] | 6 | * Released under the MIT license. |
---|
| 7 | * http://jquery.org/license |
---|
| 8 | * |
---|
| 9 | * http://api.jqueryui.com/scale-effect/ |
---|
| 10 | * |
---|
| 11 | * Depends: |
---|
| 12 | * jquery.ui.effect.js |
---|
| 13 | */ |
---|
| 14 | (function( $, undefined ) { |
---|
| 15 | |
---|
| 16 | $.effects.effect.puff = function( o, done ) { |
---|
| 17 | var elem = $( this ), |
---|
| 18 | mode = $.effects.setMode( elem, o.mode || "hide" ), |
---|
| 19 | hide = mode === "hide", |
---|
| 20 | percent = parseInt( o.percent, 10 ) || 150, |
---|
| 21 | factor = percent / 100, |
---|
| 22 | original = { |
---|
| 23 | height: elem.height(), |
---|
[20824] | 24 | width: elem.width(), |
---|
| 25 | outerHeight: elem.outerHeight(), |
---|
| 26 | outerWidth: elem.outerWidth() |
---|
[18953] | 27 | }; |
---|
| 28 | |
---|
| 29 | $.extend( o, { |
---|
| 30 | effect: "scale", |
---|
| 31 | queue: false, |
---|
| 32 | fade: true, |
---|
| 33 | mode: mode, |
---|
| 34 | complete: done, |
---|
| 35 | percent: hide ? percent : 100, |
---|
| 36 | from: hide ? |
---|
| 37 | original : |
---|
| 38 | { |
---|
| 39 | height: original.height * factor, |
---|
[20824] | 40 | width: original.width * factor, |
---|
| 41 | outerHeight: original.outerHeight * factor, |
---|
| 42 | outerWidth: original.outerWidth * factor |
---|
[18953] | 43 | } |
---|
| 44 | }); |
---|
| 45 | |
---|
| 46 | elem.effect( o ); |
---|
| 47 | }; |
---|
| 48 | |
---|
| 49 | $.effects.effect.scale = function( o, done ) { |
---|
| 50 | |
---|
| 51 | // Create element |
---|
| 52 | var el = $( this ), |
---|
| 53 | options = $.extend( true, {}, o ), |
---|
| 54 | mode = $.effects.setMode( el, o.mode || "effect" ), |
---|
| 55 | percent = parseInt( o.percent, 10 ) || |
---|
| 56 | ( parseInt( o.percent, 10 ) === 0 ? 0 : ( mode === "hide" ? 0 : 100 ) ), |
---|
| 57 | direction = o.direction || "both", |
---|
| 58 | origin = o.origin, |
---|
| 59 | original = { |
---|
| 60 | height: el.height(), |
---|
| 61 | width: el.width(), |
---|
| 62 | outerHeight: el.outerHeight(), |
---|
| 63 | outerWidth: el.outerWidth() |
---|
| 64 | }, |
---|
| 65 | factor = { |
---|
| 66 | y: direction !== "horizontal" ? (percent / 100) : 1, |
---|
| 67 | x: direction !== "vertical" ? (percent / 100) : 1 |
---|
| 68 | }; |
---|
| 69 | |
---|
| 70 | // We are going to pass this effect to the size effect: |
---|
| 71 | options.effect = "size"; |
---|
| 72 | options.queue = false; |
---|
| 73 | options.complete = done; |
---|
| 74 | |
---|
| 75 | // Set default origin and restore for show/hide |
---|
| 76 | if ( mode !== "effect" ) { |
---|
| 77 | options.origin = origin || ["middle","center"]; |
---|
| 78 | options.restore = true; |
---|
| 79 | } |
---|
| 80 | |
---|
[20824] | 81 | options.from = o.from || ( mode === "show" ? { |
---|
| 82 | height: 0, |
---|
| 83 | width: 0, |
---|
| 84 | outerHeight: 0, |
---|
| 85 | outerWidth: 0 |
---|
| 86 | } : original ); |
---|
[18953] | 87 | options.to = { |
---|
| 88 | height: original.height * factor.y, |
---|
| 89 | width: original.width * factor.x, |
---|
| 90 | outerHeight: original.outerHeight * factor.y, |
---|
| 91 | outerWidth: original.outerWidth * factor.x |
---|
| 92 | }; |
---|
| 93 | |
---|
| 94 | // Fade option to support puff |
---|
| 95 | if ( options.fade ) { |
---|
| 96 | if ( mode === "show" ) { |
---|
| 97 | options.from.opacity = 0; |
---|
| 98 | options.to.opacity = 1; |
---|
| 99 | } |
---|
| 100 | if ( mode === "hide" ) { |
---|
| 101 | options.from.opacity = 1; |
---|
| 102 | options.to.opacity = 0; |
---|
| 103 | } |
---|
| 104 | } |
---|
| 105 | |
---|
| 106 | // Animate |
---|
| 107 | el.effect( options ); |
---|
| 108 | |
---|
| 109 | }; |
---|
| 110 | |
---|
| 111 | $.effects.effect.size = function( o, done ) { |
---|
| 112 | |
---|
| 113 | // Create element |
---|
[20824] | 114 | var original, baseline, factor, |
---|
| 115 | el = $( this ), |
---|
| 116 | props0 = [ "position", "top", "bottom", "left", "right", "width", "height", "overflow", "opacity" ], |
---|
[18953] | 117 | |
---|
| 118 | // Always restore |
---|
| 119 | props1 = [ "position", "top", "bottom", "left", "right", "overflow", "opacity" ], |
---|
| 120 | |
---|
| 121 | // Copy for children |
---|
| 122 | props2 = [ "width", "height", "overflow" ], |
---|
| 123 | cProps = [ "fontSize" ], |
---|
| 124 | vProps = [ "borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom" ], |
---|
| 125 | hProps = [ "borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight" ], |
---|
| 126 | |
---|
| 127 | // Set options |
---|
| 128 | mode = $.effects.setMode( el, o.mode || "effect" ), |
---|
| 129 | restore = o.restore || mode !== "effect", |
---|
| 130 | scale = o.scale || "both", |
---|
| 131 | origin = o.origin || [ "middle", "center" ], |
---|
[20824] | 132 | position = el.css( "position" ), |
---|
| 133 | props = restore ? props0 : props1, |
---|
| 134 | zero = { |
---|
| 135 | height: 0, |
---|
| 136 | width: 0, |
---|
| 137 | outerHeight: 0, |
---|
| 138 | outerWidth: 0 |
---|
| 139 | }; |
---|
[18953] | 140 | |
---|
| 141 | if ( mode === "show" ) { |
---|
| 142 | el.show(); |
---|
| 143 | } |
---|
| 144 | original = { |
---|
| 145 | height: el.height(), |
---|
| 146 | width: el.width(), |
---|
| 147 | outerHeight: el.outerHeight(), |
---|
| 148 | outerWidth: el.outerWidth() |
---|
| 149 | }; |
---|
| 150 | |
---|
[20824] | 151 | if ( o.mode === "toggle" && mode === "show" ) { |
---|
| 152 | el.from = o.to || zero; |
---|
| 153 | el.to = o.from || original; |
---|
| 154 | } else { |
---|
| 155 | el.from = o.from || ( mode === "show" ? zero : original ); |
---|
| 156 | el.to = o.to || ( mode === "hide" ? zero : original ); |
---|
| 157 | } |
---|
[18953] | 158 | |
---|
| 159 | // Set scaling factor |
---|
| 160 | factor = { |
---|
| 161 | from: { |
---|
| 162 | y: el.from.height / original.height, |
---|
| 163 | x: el.from.width / original.width |
---|
| 164 | }, |
---|
| 165 | to: { |
---|
| 166 | y: el.to.height / original.height, |
---|
| 167 | x: el.to.width / original.width |
---|
| 168 | } |
---|
| 169 | }; |
---|
| 170 | |
---|
| 171 | // Scale the css box |
---|
| 172 | if ( scale === "box" || scale === "both" ) { |
---|
| 173 | |
---|
| 174 | // Vertical props scaling |
---|
| 175 | if ( factor.from.y !== factor.to.y ) { |
---|
| 176 | props = props.concat( vProps ); |
---|
| 177 | el.from = $.effects.setTransition( el, vProps, factor.from.y, el.from ); |
---|
| 178 | el.to = $.effects.setTransition( el, vProps, factor.to.y, el.to ); |
---|
| 179 | } |
---|
| 180 | |
---|
| 181 | // Horizontal props scaling |
---|
| 182 | if ( factor.from.x !== factor.to.x ) { |
---|
| 183 | props = props.concat( hProps ); |
---|
| 184 | el.from = $.effects.setTransition( el, hProps, factor.from.x, el.from ); |
---|
| 185 | el.to = $.effects.setTransition( el, hProps, factor.to.x, el.to ); |
---|
| 186 | } |
---|
| 187 | } |
---|
| 188 | |
---|
| 189 | // Scale the content |
---|
| 190 | if ( scale === "content" || scale === "both" ) { |
---|
| 191 | |
---|
| 192 | // Vertical props scaling |
---|
| 193 | if ( factor.from.y !== factor.to.y ) { |
---|
[20824] | 194 | props = props.concat( cProps ).concat( props2 ); |
---|
[18953] | 195 | el.from = $.effects.setTransition( el, cProps, factor.from.y, el.from ); |
---|
| 196 | el.to = $.effects.setTransition( el, cProps, factor.to.y, el.to ); |
---|
| 197 | } |
---|
| 198 | } |
---|
| 199 | |
---|
[20824] | 200 | $.effects.save( el, props ); |
---|
[18953] | 201 | el.show(); |
---|
| 202 | $.effects.createWrapper( el ); |
---|
| 203 | el.css( "overflow", "hidden" ).css( el.from ); |
---|
| 204 | |
---|
| 205 | // Adjust |
---|
| 206 | if (origin) { // Calculate baseline shifts |
---|
| 207 | baseline = $.effects.getBaseline( origin, original ); |
---|
| 208 | el.from.top = ( original.outerHeight - el.outerHeight() ) * baseline.y; |
---|
| 209 | el.from.left = ( original.outerWidth - el.outerWidth() ) * baseline.x; |
---|
| 210 | el.to.top = ( original.outerHeight - el.to.outerHeight ) * baseline.y; |
---|
| 211 | el.to.left = ( original.outerWidth - el.to.outerWidth ) * baseline.x; |
---|
| 212 | } |
---|
| 213 | el.css( el.from ); // set top & left |
---|
| 214 | |
---|
| 215 | // Animate |
---|
| 216 | if ( scale === "content" || scale === "both" ) { // Scale the children |
---|
| 217 | |
---|
| 218 | // Add margins/font-size |
---|
| 219 | vProps = vProps.concat([ "marginTop", "marginBottom" ]).concat(cProps); |
---|
| 220 | hProps = hProps.concat([ "marginLeft", "marginRight" ]); |
---|
[20824] | 221 | props2 = props0.concat(vProps).concat(hProps); |
---|
[18953] | 222 | |
---|
| 223 | el.find( "*[width]" ).each( function(){ |
---|
| 224 | var child = $( this ), |
---|
| 225 | c_original = { |
---|
| 226 | height: child.height(), |
---|
[20824] | 227 | width: child.width(), |
---|
| 228 | outerHeight: child.outerHeight(), |
---|
| 229 | outerWidth: child.outerWidth() |
---|
[18953] | 230 | }; |
---|
| 231 | if (restore) { |
---|
| 232 | $.effects.save(child, props2); |
---|
| 233 | } |
---|
| 234 | |
---|
| 235 | child.from = { |
---|
| 236 | height: c_original.height * factor.from.y, |
---|
[20824] | 237 | width: c_original.width * factor.from.x, |
---|
| 238 | outerHeight: c_original.outerHeight * factor.from.y, |
---|
| 239 | outerWidth: c_original.outerWidth * factor.from.x |
---|
[18953] | 240 | }; |
---|
| 241 | child.to = { |
---|
| 242 | height: c_original.height * factor.to.y, |
---|
[20824] | 243 | width: c_original.width * factor.to.x, |
---|
| 244 | outerHeight: c_original.height * factor.to.y, |
---|
| 245 | outerWidth: c_original.width * factor.to.x |
---|
[18953] | 246 | }; |
---|
| 247 | |
---|
| 248 | // Vertical props scaling |
---|
| 249 | if ( factor.from.y !== factor.to.y ) { |
---|
| 250 | child.from = $.effects.setTransition( child, vProps, factor.from.y, child.from ); |
---|
| 251 | child.to = $.effects.setTransition( child, vProps, factor.to.y, child.to ); |
---|
| 252 | } |
---|
| 253 | |
---|
| 254 | // Horizontal props scaling |
---|
| 255 | if ( factor.from.x !== factor.to.x ) { |
---|
| 256 | child.from = $.effects.setTransition( child, hProps, factor.from.x, child.from ); |
---|
| 257 | child.to = $.effects.setTransition( child, hProps, factor.to.x, child.to ); |
---|
| 258 | } |
---|
| 259 | |
---|
| 260 | // Animate children |
---|
| 261 | child.css( child.from ); |
---|
| 262 | child.animate( child.to, o.duration, o.easing, function() { |
---|
| 263 | |
---|
| 264 | // Restore children |
---|
| 265 | if ( restore ) { |
---|
| 266 | $.effects.restore( child, props2 ); |
---|
| 267 | } |
---|
| 268 | }); |
---|
| 269 | }); |
---|
| 270 | } |
---|
| 271 | |
---|
| 272 | // Animate |
---|
| 273 | el.animate( el.to, { |
---|
| 274 | queue: false, |
---|
| 275 | duration: o.duration, |
---|
| 276 | easing: o.easing, |
---|
| 277 | complete: function() { |
---|
| 278 | if ( el.to.opacity === 0 ) { |
---|
| 279 | el.css( "opacity", el.from.opacity ); |
---|
| 280 | } |
---|
| 281 | if( mode === "hide" ) { |
---|
| 282 | el.hide(); |
---|
| 283 | } |
---|
[20824] | 284 | $.effects.restore( el, props ); |
---|
[18953] | 285 | if ( !restore ) { |
---|
| 286 | |
---|
| 287 | // we need to calculate our new positioning based on the scaling |
---|
| 288 | if ( position === "static" ) { |
---|
| 289 | el.css({ |
---|
| 290 | position: "relative", |
---|
| 291 | top: el.to.top, |
---|
| 292 | left: el.to.left |
---|
| 293 | }); |
---|
| 294 | } else { |
---|
| 295 | $.each([ "top", "left" ], function( idx, pos ) { |
---|
| 296 | el.css( pos, function( _, str ) { |
---|
| 297 | var val = parseInt( str, 10 ), |
---|
| 298 | toRef = idx ? el.to.left : el.to.top; |
---|
| 299 | |
---|
| 300 | // if original was "auto", recalculate the new value from wrapper |
---|
| 301 | if ( str === "auto" ) { |
---|
| 302 | return toRef + "px"; |
---|
| 303 | } |
---|
| 304 | |
---|
| 305 | return val + toRef + "px"; |
---|
| 306 | }); |
---|
| 307 | }); |
---|
| 308 | } |
---|
| 309 | } |
---|
| 310 | |
---|
| 311 | $.effects.removeWrapper( el ); |
---|
| 312 | done(); |
---|
| 313 | } |
---|
| 314 | }); |
---|
| 315 | |
---|
| 316 | }; |
---|
| 317 | |
---|
| 318 | })(jQuery); |
---|