ng2-slide-down
Version:
A slide down directive for Angular 2+
3 lines (2 loc) • 4.3 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core")):"function"==typeof define&&define.amd?define(["exports","@angular/core"],t):t(e["ng2-slide-down"]={},e.ng.core)}(this,function(e,i){"use strict";function n(e,t){var i="function"==typeof Symbol&&e[Symbol.iterator];if(!i)return e;var n,r,o=i.call(e),s=[];try{for(;(void 0===t||0<t--)&&!(n=o.next()).done;)s.push(n.value)}catch(a){r={error:a}}finally{try{n&&!n.done&&(i=o["return"])&&i.call(o)}finally{if(r)throw r.error}}return s}function t(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(n(arguments[t]));return e}var r=function(){function e(e,t){this.elRef=e,this.renderer=t,this._initialized=!1,this.animated=!0,this.duration=.25,this.easing="ease-out",this.slideStart=new i.EventEmitter,this.slideEnd=new i.EventEmitter}return Object.defineProperty(e.prototype,"slideDown",{set:function(e){this._visible!==e&&(this._visible=e,this.showOrHide(),this._initialized=!0)},enumerable:!0,configurable:!0}),e.prototype.showOrHide=function(){this._visible?this.show():this.hide(),this.slideStart.emit(this._visible)},e.prototype.show=function(){var e=this;this.clearAnimationTimer();var t=this.shouldAnimate(),i=t?this.durationMs:0;this.renderer.setStyle(this.element,"overflowY","hidden"),t&&(this.renderer.setStyle(this.element,"transitionProperty","height"),this.renderer.setStyle(this.element,"transitionDuration",this.durationMs+"ms"),this.renderer.setStyle(this.element,"transitionTimingFunction",this.easing)),this.waitDOMRender(function(){e.renderer.setStyle(e.element,"height",e.getHeight()+"px"),e._animationTimeout=window.setTimeout(function(){e.renderer.setStyle(e.element,"overflowY",null),e.renderer.setStyle(e.element,"transition",null),e.renderer.setStyle(e.element,"height",null),e.slideEnd.emit(e._visible)},i)})},e.prototype.hide=function(){var e=this;this.clearAnimationTimer();var t=this.shouldAnimate(),i=t?this.durationMs:0;this.renderer.setStyle(this.element,"overflowY","hidden"),this.renderer.setStyle(this.element,"height",this.getHeight()+"px"),t&&(this.renderer.setStyle(this.element,"transitionProperty","height"),this.renderer.setStyle(this.element,"transitionDuration",this.durationMs+"ms"),this.renderer.setStyle(this.element,"transitionTimingFunction",this.easing)),this.waitDOMRender(function(){e.renderer.setStyle(e.element,"height","0px"),e._animationTimeout=window.setTimeout(function(){e.renderer.setStyle(e.element,"transition",null),e.slideEnd.emit(e._visible)},i)})},e.prototype.getHeight=function(){var t=0;return this.elementChildren.forEach(function(e){return t+=e.getBoundingClientRect().height}),t},e.prototype.shouldAnimate=function(){return this._initialized&&this.animated},e.prototype.clearAnimationTimer=function(){this._animationTimeout!==undefined&&(window.clearTimeout(this._animationTimeout),this._animationTimeout=undefined)},e.prototype.waitDOMRender=function(e){requestAnimationFrame(function(){requestAnimationFrame(function(){e()})})},Object.defineProperty(e.prototype,"element",{get:function(){return this.elRef.nativeElement},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"elementChildren",{get:function(){return Array.prototype.slice.call(this.element.children)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"durationMs",{get:function(){return 1e3*this.duration},enumerable:!0,configurable:!0}),e.prototype.ngOnDestroy=function(){this.clearAnimationTimer()},e}();r.decorators=[{type:i.Directive,args:[{selector:"[slide-down]"}]}],r.ctorParameters=function(){return[{type:i.ElementRef},{type:i.Renderer2}]},r.propDecorators={animated:[{type:i.Input,args:["slide-down-animated"]}],duration:[{type:i.Input,args:["slide-down-duration"]}],easing:[{type:i.Input,args:["slide-down-easing"]}],slideDown:[{type:i.Input,args:["slide-down"]}],slideStart:[{type:i.Output,args:["slide-start"]}],slideEnd:[{type:i.Output,args:["slide-end"]}]};var o=[r],s=function(){function e(){}return e.forRoot=function(){return{ngModule:e}},e}();s.decorators=[{type:i.NgModule,args:[{imports:[],declarations:t(o),exports:t(o)}]}],s.ctorParameters=function(){return[]},e.Ng2SlideDownModule=s,e.Ng2SlideDownDirective=r,Object.defineProperty(e,"__esModule",{value:!0})});
//# sourceMappingURL=ng2-slide-down.umd.min.js.map