UNPKG

@greg-md/ng-elevator

Version:

Make a container to elevate on the screen while scrolling with Angular.

2 lines 4.09 kB
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/common")):"function"==typeof define&&define.amd?define("@greg-md/ng-elevator",["exports","@angular/core","@angular/common"],e):e((t["greg-md"]=t["greg-md"]||{},t["greg-md"]["ng-elevator"]={}),t.ng.core,t.ng.common)}(this,function(t,e,o){"use strict";function c(t){return t&&t.getClientRects().length?(o=t.getBoundingClientRect()).width||o.height?(e=t.ownerDocument.documentElement,{top:o.top+window.pageYOffset-e.clientTop,left:o.left+window.pageXOffset-e.clientLeft}):o:{top:0,left:0};var e,o}var i=function(){function t(t,e,o){this.elementRef=t,this.renderer=e,this.platformId=o,this.lastPosition=0,this.marginTop=0,this.marginBottom=0}return t.prototype.ngAfterViewInit=function(){var t=this;this.initImagesLoad(),setTimeout(function(){return t.reloadPositions(!0)})},t.prototype.windowScroll=function(){this.reloadPositions()},t.prototype.windowResize=function(){this.reloadPositions(!0)},t.prototype.initImagesLoad=function(){var o=this;this.images.forEach(function(t){var e=o.renderer.listen(t,"load",function(){o.reloadPositions(!0),e()})})},t.prototype.reloadPositions=function(t){void 0===t&&(t=!1),o.isPlatformBrowser(this.platformId)&&this.reloadYPositions(t)},t.prototype.reloadYPositions=function(t){void 0===t&&(t=!1);var e=getComputedStyle(this.elementRef.nativeElement),o=parseFloat(e.marginTop),i=parseFloat(e.marginBottom),n=this.elementRef.nativeElement.offsetHeight+o+i;if(n>=this.elementRef.nativeElement.parentNode.clientHeight)this.setPosition();else{var s=window.scrollY>this.lastPosition;this.lastPosition=window.scrollY;var r=window.innerHeight-(n+this.marginTop+this.marginBottom),l=this.elementRef.nativeElement.parentNode.getBoundingClientRect(),a=-1*l.top+this.marginTop,p=l.bottom-window.innerHeight+this.marginBottom,m=this.elementRef.nativeElement.getBoundingClientRect(),g=-1*m.top+o+this.marginTop,d=m.bottom-window.innerHeight+i+this.marginBottom,h=parseFloat(this.elementRef.nativeElement.parentNode.clientWidth)-parseFloat(e.marginLeft)-parseFloat(e.marginRight);(0<=r?a<=0:0<d&&(!this.cssPosition||a<=0))?this.setPosition():0<=r?p+r<=0?this.setPosition("absolute",null,0,h):this.setPosition("fixed",this.marginTop,null,h):(this.setPosition("absolute",c(this.elementRef.nativeElement).top-c(this.elementRef.nativeElement.parentNode).top-o,null,h),s||t?p<=0?this.setPosition("absolute",null,0,h):d<=0&&this.setPosition("fixed",null,this.marginBottom):g<=0&&this.setPosition("fixed",this.marginTop,null,h))}},t.prototype.prepareAbsolutePositions=function(){var t=getComputedStyle(this.elementRef.nativeElement),e=parseFloat(t.marginTop);this.setPosition("absolute",c(this.elementRef.nativeElement).top-c(this.elementRef.nativeElement.parentNode).top-e)},t.prototype.setPosition=function(t,e,o,i){void 0===t&&(t=null),void 0===e&&(e=null),void 0===o&&(o=null),void 0===i&&(i=null),this.cssPosition=t,this.cssTop=e,this.cssBottom=o,this.cssWidth=i},t.decorators=[{type:e.Component,args:[{selector:"greg-elevator",template:"<ng-content></ng-content>",styles:[":host { display: block; }"],changeDetection:e.ChangeDetectionStrategy.OnPush}]}],t.ctorParameters=function(){return[{type:e.ElementRef},{type:e.Renderer2},{type:String,decorators:[{type:e.Inject,args:[e.PLATFORM_ID]}]}]},t.propDecorators={marginTop:[{type:e.Input}],marginBottom:[{type:e.Input}],cssPosition:[{type:e.HostBinding,args:["style.position"]}],cssTop:[{type:e.HostBinding,args:["style.top.px"]}],cssBottom:[{type:e.HostBinding,args:["style.bottom.px"]}],cssWidth:[{type:e.HostBinding,args:["style.width.px"]}],images:[{type:e.ViewChildren,args:["img"]}],windowScroll:[{type:e.HostListener,args:["window:scroll"]}],windowResize:[{type:e.HostListener,args:["window:resize"]}]},t}(),n=function(){function t(){}return t.decorators=[{type:e.NgModule,args:[{imports:[o.CommonModule],declarations:[i],exports:[i]}]}],t}();t.ElevatorComponent=i,t.ElevatorModule=n,Object.defineProperty(t,"__esModule",{value:!0})}); //# sourceMappingURL=greg-md-ng-elevator.umd.min.js.map