@piumaz/pull-to-refresh/bundles/piumaz-pull-to-refresh.umd.min.js

It provides an Angular component and a service, for the Pull-To-Refresh feature.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("rxjs"),require("@angular/common")):"function"==typeof define&&define.amd?define("@piumaz/pull-to-refresh",["exports","@angular/core","rxjs","@angular/common"],e):e(((t="undefined"!=typeof globalThis?globalThis:t||self).piumaz=t.piumaz||{},t.piumaz["pull-to-refresh"]={}),t.ng.core,t.rxjs,t.ng.common)}(this,(function(t,e,i,s){"use strict";var r=function(){function t(){this.refresh=new i.Subject,this.reset=new i.Subject}return t.prototype.refresh$=function(){return this.refresh.asObservable()},t.prototype.pull=function(){this.refresh.next(!0)},t.prototype.reset$=function(){return this.reset.asObservable()},t.prototype.dismiss=function(){this.reset.next(!0)},t}();r.ɵprov=e.ɵɵdefineInjectable({factory:function(){return new r},token:r,providedIn:"root"}),r.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],r.ctorParameters=function(){return[]};var o=function(){function t(t,i,s){this.refreshService=t,this.changeDetectorRef=i,this.document=s,this.pullToRefresh=90,this.color="#353535",this.target="body",this.disabled=!1,this.autoDismiss=!0,this.refresh=new e.EventEmitter,this.activated=!1,this.rotation=0,this.spin=!1,this.startY=0,this.startX=0,this.moveY=0,this.moveX=0,this.pull=0,this.pullFirst=0,this.maxPull=138,this.maxFirstPull=60,this.animateY=80,this.radiusLeft=0,this.radiusRight=0,this.isFirstTime=!0,this.window=this.document.defaultView}return t.prototype.ngOnInit=function(){var t=this;this.elementScrollable=this.document.querySelector(this.target),this.autoDismiss||(this.resetSub=this.refreshService.reset$().subscribe((function(){t.dismiss()})))},t.prototype.ngOnDestroy=function(){this.resetSub&&this.resetSub.unsubscribe()},t.prototype.getScrollTop=function(){return"body"===this.target?this.window.pageYOffset||this.document.documentElement.scrollTop||this.document.body.scrollTop||0:this.elementScrollable.scrollTop},t.prototype.onTouchStart=function(t){this.disabled||this.activated||(this.reset(),this.startY=t.touches[0].pageY,this.startX=t.touches[0].pageX)},t.prototype.onToucMove=function(t){var e=this;if(!this.disabled){this.moveY=t.touches[0].pageY,this.moveX=t.touches[0].pageX,this.getScrollTop()>0&&(this.isFirstTime=!0);var i=this.moveY-this.startY,s=this.moveX-this.startX,r=Math.abs(s)/Math.abs(i);if(0===this.getScrollTop()&&this.moveY>=this.startY&&r<=.3)if(setTimeout((function(){e.elementScrollable.style.overflowY="hidden"})),this.isFirstTime){this.pullFirst=i>=this.maxFirstPull?this.maxFirstPull:i;var o=this.elementScrollable.offsetWidth,n=parseInt((100*this.moveX/o).toString(),10),a=void 0,l=void 0;n<=50?(l=100-n,a=n):(l=100-n,a=100-(100-n)),this.radiusLeft=a<0?0:a,this.radiusRight=l<0?0:l}else{var h=i/2;this.pull=h>=this.maxPull?this.maxPull:h+.5*(this.maxPull-h),this.rotation=360*this.pull/this.maxPull,this.activated=this.pull>=this.pullToRefresh}}},t.prototype.onTouchEnd=function(t){this.disabled||(this.activated?(this.spin=!0,this.pull=this.animateY,this.document.dispatchEvent(new Event("pull-to-refresh")),this.refreshService.pull(),this.refresh.emit(),this.autoDismiss&&this.dismiss()):this.reset())},t.prototype.dismiss=function(){var t=this;setTimeout((function(){t.reset()}),1500)},t.prototype.reset=function(){this.elementScrollable.style.overflowY="",this.isFirstTime=!1,this.startY=9999999,this.moveY=0,this.rotation=0,this.spin=!1,this.activated=!1,this.pull=0,this.pullFirst=0,this.changeDetectorRef.detectChanges()},t}();o.decorators=[{type:e.Component,args:[{selector:"pull-to-refresh",template:'\r\n<div class="pull" [ngStyle]="{\'transform\': \'translateY(\' + pull + \'px)\'}" [hidden]="disabled || pullFirst">\r\n\r\n    <span class="rotate" [ngStyle]="{\'transform\': \'rotate(\' + rotation + \'deg)\'}">\r\n\r\n        <span class="spinner" [class.spin-animation]="spin" [ngStyle]="{\'opacity\': (rotation/360) - 0.1}">\r\n\r\n            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">\r\n                <g>\r\n                    <path d="M50 15A35 35 0 1 0 74.74873734152916 25.251262658470843" fill="none" [attr.stroke]="color" stroke-width="10" ></path>\r\n                    <path d="M49 3L49 27L61 15L49 3" [attr.fill]="color" [attr.stroke]="color" stroke-width="4"></path>\r\n                </g>\r\n            </svg>\r\n\r\n        </span>\r\n\r\n    </span>\r\n\r\n</div>\r\n\r\n<div class="pull first"\r\n     [ngStyle]="{\'transform\': \'translateY(\' + pullFirst + \'px)\', \'border-bottom-right-radius\': radiusRight + \'%\', \'border-bottom-left-radius\': radiusLeft + \'%\'}"\r\n     [hidden]="disabled || pull"></div>\r\n',changeDetection:e.ChangeDetectionStrategy.OnPush,styles:["::ng-deep body,::ng-deep html{overscroll-behavior-y:none}.pull{display:flex;justify-content:space-around;align-items:center;position:absolute;z-index:1060;width:100%;padding:0;left:0;right:0;text-align:center;overflow:hidden;transform:translateY(-60px);transition:transform .2s;will-change:transform,opacity}.pull,.pull.first{height:60px;top:-60px}.pull.first{transition:transform .3s;background-color:rgba(53,53,53,.3);opacity:.5;border-radius:0/0 0 0 0}.pull .rotate{transition:transform .3s;will-change:transform,opacity;background-color:#fff;border:1px solid rgba(53,53,53,.3);box-shadow:0 0 4px 0 rgba(0,0,0,.2);border-radius:100px;padding:6px;box-sizing:content-box}.pull .rotate,.pull .spinner{height:25px;width:25px;display:inline-block}.pull .spinner svg{height:100%;width:100%}.pull .spinner.spin-animation{-webkit-animation-name:spin;animation-name:spin;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}@-webkit-keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}"]}]}],o.ctorParameters=function(){return[{type:r},{type:e.ChangeDetectorRef},{type:void 0,decorators:[{type:e.Inject,args:[s.DOCUMENT]}]}]},o.propDecorators={pullToRefresh:[{type:e.Input,args:["sensitivity"]}],color:[{type:e.Input}],target:[{type:e.Input}],disabled:[{type:e.Input}],autoDismiss:[{type:e.Input}],refresh:[{type:e.Output}],onTouchStart:[{type:e.HostListener,args:["window:touchstart",["$event"]]}],onToucMove:[{type:e.HostListener,args:["window:touchmove",["$event"]]}],onTouchEnd:[{type:e.HostListener,args:["window:touchend",["$event"]]},{type:e.HostListener,args:["window:touchcancel",["$event"]]}]};var n=function(){};n.decorators=[{type:e.NgModule,args:[{declarations:[o],imports:[s.CommonModule],exports:[s.CommonModule,o]}]}],t.PullToRefreshComponent=o,t.PullToRefreshModule=n,t.PullToRefreshService=r,Object.defineProperty(t,"__esModule",{value:!0})}));
//# sourceMappingURL=piumaz-pull-to-refresh.umd.min.js.map