diff options
Diffstat (limited to 'module/web/static/js/utils/animations.js')
-rw-r--r-- | module/web/static/js/utils/animations.js | 55 |
1 files changed, 53 insertions, 2 deletions
diff --git a/module/web/static/js/utils/animations.js b/module/web/static/js/utils/animations.js index 9b1448f61..18360c526 100644 --- a/module/web/static/js/utils/animations.js +++ b/module/web/static/js/utils/animations.js @@ -10,9 +10,58 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) { }; }); + // TODO: sloppy chaining + // in functions not possible without previous out + + jQuery.fn.zapIn = function(speed, easing, callback) { + var height = this.data('height') || '100%'; + this.transition({ + height: height, + scale: [1, 1], + opacity: 'show' + }, speed, easing, callback); + + }; + + jQuery.fn.zapOut = function(speed, easing, callback) { + if (!this.data('height')) { + var height = this.height(); + this.css({height: height}); + this.data('height', height) + } + this.transition({ + height: '0px', + scale: [1, 0], + opacity: 'hide' + }, speed, easing, callback); + + }; + + jQuery.fn.slideIn = function(speed, easing, callback) { + var height = this.data('height') || '100%'; + this.transition({ + height: height, + opacity: 'show' + }, speed, easing, callback); + + }; + + jQuery.fn.slideOut = function(speed, easing, callback) { + if (!this.data('height')) { + var height = this.height(); + this.css({height: height, overflow: 'hidden'}); + this.data('height', height) + } + this.transition({ + height: '0px', + opacity: 'hide' + }, speed, easing, callback); + + }; + jQuery.fn._transit = jQuery.fn.transit; - // Over riding transit plugin to support hide and show + // Overriding transit plugin to support hide and show // Props retains it properties across multiple calls, therefore props.show value is introduced jQuery.fn.transit = jQuery.fn.transition = function(props, duration, easing, callback) { var self = this; @@ -23,7 +72,9 @@ define(['jquery', 'underscore', 'transit'], function(jQuery, _) { callback = function() { self.css({display: 'none'}); - if (typeof cb === 'function') { cb.apply(self); } + if (typeof cb === 'function') { + cb.apply(self); + } }; } else if (props && (props.opacity === 'show' || (props.opacity === 1 && props.show === true))) { props.opacity = 1; |