@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
2 lines • 5.53 kB
JavaScript
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core")):"function"==typeof define&&define.amd?define("ng-devui/sticky",["exports","@angular/core"],e):e(((t=t||self)["ng-devui"]=t["ng-devui"]||{},t["ng-devui"].sticky={}),t.ng.core)}(this,(function(t,e){"use strict";var n=function(){function t(t){var n=this;this.el=t,this.hostPosition="relative",this.statusChange=new e.EventEmitter,this._prevStatus=void 0,this._status="normal",this.THROTTLE_DELAY=16,this.THROTTLE_TRIGGER=100,this.throttle=function(){var t=n.scrollAndResizeHock,e=Date.now();n.scrollTimer&&clearTimeout(n.scrollTimer),n.scrollPreStart||(n.scrollPreStart=e),e-n.scrollPreStart>n.THROTTLE_TRIGGER?(t(),n.scrollPreStart=null,n.scrollTimer=null):n.scrollTimer=setTimeout((function(){t(),n.scrollPreStart=null,n.scrollTimer=null}),n.THROTTLE_DELAY)},this.scrollAndResizeHock=function(){n.container.getBoundingClientRect().left-(n.containerLeft||0)!=0?(n.status="stay",n.containerLeft=n.container.getBoundingClientRect().left):n.scrollHandler()},this.scrollHandler=function(){var t=window.getComputedStyle(n.container);n.parentNode.getBoundingClientRect().top>(n.view&&n.view.top||0)?n.status="normal":n.container.getBoundingClientRect().top+parseInt(t.paddingTop,10)+parseInt(t.borderTopWidth,10)>=(n.view&&n.view.top||0)?n.status="normal":n.container.getBoundingClientRect().bottom-parseInt(t.paddingBottom,10)-parseInt(t.borderBottomWidth,10)-n.wrapper.nativeElement.getBoundingClientRect().height<(n.view&&n.view.top||0)+(n.view&&n.view.bottom||0)?n.status="remain":n.container.getBoundingClientRect().top+parseInt(t.paddingTop,10)<(n.view&&n.view.top||0)&&(n.status="follow")}}return Object.defineProperty(t.prototype,"status",{get:function(){return this._status},set:function(t){t!==this._status&&(this._prevStatus=this._status,this._status=t,this.statusProcess(this._status))},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){this.parentNode=this.el.nativeElement.parentNode,this.container||(this.container=this.parentNode)},t.prototype.ngAfterViewInit=function(){this.scrollTarget=this.scrollTarget||window,this.scrollTarget.addEventListener("scroll",this.throttle),this.initScrollStatus(this.scrollTarget)},t.prototype.ngOnDestroy=function(){this.scrollTarget.removeEventListener("scroll",this.throttle)},t.prototype.statusProcess=function(t){switch(t){case"normal":this.wrapper.nativeElement.style.top="auto",this.wrapper.nativeElement.style.left="auto",this.wrapper.nativeElement.style.position="static";break;case"follow":this.wrapper.nativeElement.style.top=(this.view&&this.view.top||0)+"px",this.wrapper.nativeElement.style.left=this.wrapper.nativeElement.getBoundingClientRect().left+"px",this.wrapper.nativeElement.style.position="fixed";break;case"stay":this.wrapper.nativeElement.style.top=this.calculateRelativePosition(this.wrapper.nativeElement,this.parentNode,"top")+"px",this.wrapper.nativeElement.style.left="auto",this.wrapper.nativeElement.style.position="relative";break;case"remain":"fixed"===this.wrapper.nativeElement.style.position&&"absolute"===this.wrapper.nativeElement.style.position||(this.wrapper.nativeElement.style.top=this.calculateRelativePosition(this.wrapper.nativeElement,this.parentNode,"top")+"px",this.wrapper.nativeElement.style.left="auto",this.wrapper.nativeElement.style.position="absolute"),this.wrapper.nativeElement.style.top=this.calculateRemainPosition(this.wrapper.nativeElement,this.parentNode,this.container)+"px",this.wrapper.nativeElement.style.left=this.calculateRelativePosition(this.wrapper.nativeElement,this.parentNode,"left")+"px",this.wrapper.nativeElement.style.position="relative"}},t.prototype.calculateRelativePosition=function(t,e,n){var i={left:["left","Left"],top:["top","Top"]};if(window&&window.getComputedStyle){var o=window.getComputedStyle(e);return t.getBoundingClientRect()[i[n][0]]-e.getBoundingClientRect()[i[n][0]]-parseInt(o["padding"+i[n][1]],10)-parseInt(o["border"+i[n][1]+"Width"],10)}},t.prototype.calculateRemainPosition=function(t,e,n){if(window&&window.getComputedStyle){var i=window.getComputedStyle(n),o=n.getBoundingClientRect().height-t.getBoundingClientRect().height+n.getBoundingClientRect().top-e.getBoundingClientRect().top-parseInt(i.paddingTop,10)-parseInt(i.borderTopWidth,10)-parseInt(i.paddingBottom,10)-parseInt(i.borderBottomWidth,10);return o<0?0:o}},t.prototype.initScrollStatus=function(t){var e=t===window?[document.documentElement,document.body]:[t],n=!1;e.forEach((function(t){t.scrollTop&&t.scrollTop>0&&(n=!0)})),n&&setTimeout(this.scrollHandler)},t.prototype.recalculatePosition=function(){this.initScrollStatus(this.scrollTarget)},t.decorators=[{type:e.Component,args:[{selector:"d-sticky",template:'\n <div #stickyWrapper [style.zIndex]="zIndex">\n <ng-content></ng-content>\n </div>\n '}]}],t.ctorParameters=function(){return[{type:e.ElementRef}]},t.propDecorators={hostPosition:[{type:e.HostBinding,args:["style.position"]}],zIndex:[{type:e.Input}],container:[{type:e.Input}],view:[{type:e.Input}],scrollTarget:[{type:e.Input}],statusChange:[{type:e.Output}],wrapper:[{type:e.ViewChild,args:["stickyWrapper",{static:!0}]}],throttle:[{type:e.HostListener,args:["window:resize"]}]},t}();var i=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[],declarations:[n],exports:[n]}]}],t}();t.StickyComponent=n,t.StickyModule=i,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-sticky.umd.min.js.map