@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
2 lines • 6.81 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("rxjs")):"function"==typeof define&&define.amd?define("ng-devui/anchor",["exports","@angular/core","@angular/common","rxjs"],t):t(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"].anchor={}),e.ng.core,e.ng.common,e.rxjs)}(this,(function(e,t,n,o){"use strict";var r=function(){function e(e){var t=this;this.el=e,this.anchorActive="active",this.activeChangeSubject=new o.ReplaySubject(1),this.REACH_TOP_VISION_OFFSET=50,this.THROTTLE_DELAY=100,this.THROTTLE_TRIGGER=600,this.throttle=function(){var e=t.checkActiveStatus,n=Date.now();t.scrollTimer&&clearTimeout(t.scrollTimer),t.scrollPreStart||(t.scrollPreStart=n),n-t.scrollPreStart>t.THROTTLE_TRIGGER?(e(),t.scrollPreStart=null,t.scrollTimer=null):t.scrollTimer=setTimeout((function(){e(),t.scrollPreStart=null,t.scrollTimer=null}),t.THROTTLE_DELAY)},this.checkActiveStatus=function(e){var n=t.element.getBoundingClientRect().top-(t.boxElement.view&&t.boxElement.view.top||0),o=t.element.getBoundingClientRect().bottom-(t.boxElement.view&&t.boxElement.view.top||0);if(t.anchor===t.boxElement.defaultAnchor)return t.activeChangeBy=e||"scroll",void(t.isActive=o>t.REACH_TOP_VISION_OFFSET);t.activeChangeBy=e||"scroll",t.isActive=o>t.REACH_TOP_VISION_OFFSET&&n<t.REACH_TOP_VISION_OFFSET},this.element=this.el.nativeElement}return Object.defineProperty(e.prototype,"isActive",{get:function(){return this._isActive},set:function(e){this._isActive=e,this.activeChangeSubject.next(e)},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"boxElement",{get:function(){return this._boxElement},set:function(e){this._boxElement=e,this.updateScrollListenTarget()},enumerable:!0,configurable:!0}),e.prototype.ngAfterViewInit=function(){var e=this;this.activeChangeSubscription=this.activeChangeSubject.asObservable().subscribe((function(t){e.lastActiveBy&&e.element.classList.remove(e.lastActiveBy),t?(e.element.classList.add(e.anchorActive),e.lastActiveBy="anchor-active-by-"+e.activeChangeBy,setTimeout((function(){e.element.classList.add(e.lastActiveBy)}),0)):e.element.classList.remove(e.anchorActive)})),setTimeout((function(){e.checkActiveStatus("initial")}))},e.prototype.ngOnDestroy=function(){this.scrollListenTarget.removeEventListener("scroll",this.throttle),this.activeChangeSubscription&&this.activeChangeSubscription.unsubscribe()},e.prototype.beFocused=function(){this.boxElement.forceActiveAnchor(this.anchor,"click-inside")},e.prototype.updateScrollListenTarget=function(){this.scrollListenTarget||(this.boxElement&&(this.scrollListenTarget=this.boxElement.scrollTarget||window),this.scrollListenTarget.addEventListener("scroll",this.throttle,{passive:!0}))},e.decorators=[{type:t.Directive,args:[{selector:"[dAnchor]"}]}],e.ctorParameters=function(){return[{type:t.ElementRef}]},e.propDecorators={anchor:[{type:t.Input,args:["dAnchor"]}],anchorActive:[{type:t.Input}],beFocused:[{type:t.HostListener,args:["click"]}]},e}();var i=function(){function e(){this.refreshAnchorMap=new o.Subject}return Object.defineProperty(e.prototype,"anchorList",{get:function(){return this._anchorList},set:function(e){var t=this;this.anchorMap={},this._anchorList=e,this._anchorList.toArray().forEach((function(e){t.anchorMap[e.anchor]=e,e.boxElement=t})),this.refreshAnchorMap.next()},enumerable:!0,configurable:!0}),e.prototype.forceActiveAnchor=function(e,t,n){var o=this;void 0===t&&(t="scroll"),void 0===n&&(n=!0),this.anchorMap[e].activeChangeBy=t,this.anchorMap[e].isActive=!0,n&&Object.keys(this.anchorMap).filter((function(t){return t!==e})).map((function(e){return o.anchorMap[e]})).forEach((function(e){e.activeChangeBy=t,e.isActive=!1}))},e.decorators=[{type:t.Directive,args:[{selector:"[dAnchorBox]"}]}],e.ctorParameters=function(){return[]},e.propDecorators={view:[{type:t.Input}],defaultAnchor:[{type:t.Input}],scrollTarget:[{type:t.Input}],anchorList:[{type:t.ContentChildren,args:[r,{descendants:!0}]}]},e}();var c=function(){function e(e){var t=this;this.bindAnchorAfterBoxReady=function(){t.boxElement.anchorMap?setTimeout((function(){t.anchorBlock=t.boxElement.anchorMap[t.anchorName]}),0):t.bindingAnchorTimer=setTimeout(t.bindAnchorAfterBoxReady,500)},this.boxElement=e}return Object.defineProperty(e.prototype,"anchorActiveClass",{get:function(){return this.anchorBlock&&this.anchorBlock.isActive&&this.anchorActive||""},enumerable:!0,configurable:!0}),Object.defineProperty(e.prototype,"anchorName",{get:function(){return this._anchorName},set:function(e){this._anchorName=e,this.bindAnchorAfterBoxReady()},enumerable:!0,configurable:!0}),e.prototype.ngOnInit=function(){this.subscribeAnchorMapChange()},e.prototype.ngOnDestroy=function(){this.subscription&&this.subscription.unsubscribe()},e.prototype.subscribeAnchorMapChange=function(){var e=this;this.boxElement&&(this.subscription=this.boxElement.refreshAnchorMap.subscribe((function(){e.bindingAnchorTimer&&(clearTimeout(e.bindingAnchorTimer),e.bindingAnchorTimer=void 0),e.bindAnchorAfterBoxReady()})))},e.prototype.scrollToAnchor=function(){var e=this;if(this.anchorBlock){var t,n,o,r=function(){setTimeout((function(){e.boxElement.forceActiveAnchor(e.anchorName,"anchor-link")}),120)};t=this.boxElement.scrollTarget||document.documentElement,n=this.anchorBlock.element,o=t.scrollTop,t===document.documentElement&&(o+=document.body.scrollTop),e.scrollAnimate(t,o,o+n.getBoundingClientRect().top-(e.boxElement.view&&e.boxElement.view.top||0),void 0,void 0,r)}},e.prototype.scrollAnimate=function(e,t,n,o,r,i){var c=this;void 0===o&&(o=40),void 0===r&&(r=450);var s=Date.now(),a=function(){var l=Date.now()-s;if(l-o>r)e.scrollTop=n,e===document.documentElement&&(document.body.scrollTop=n),i&&i();else{var u=c.easeInOutCubic(l,t,n,r);e.scrollTop=u,e===document.documentElement&&(document.body.scrollTop=u),setTimeout((function(){requestAnimationFrame(a)}),o)}};requestAnimationFrame(a)},e.prototype.easeInOutCubic=function(e,t,n,o){var r=n-t,i=e/(o/2);return i<1?r/2*i*i*i+t:r/2*((i-=2)*i*i+2)+t},e.decorators=[{type:t.Directive,args:[{selector:"[dAnchorLink]"}]}],e.ctorParameters=function(){return[{type:i,decorators:[{type:t.Inject,args:[t.forwardRef((function(){return i}))]}]}]},e.propDecorators={anchorActiveClass:[{type:t.HostBinding,args:["class"]}],anchorName:[{type:t.Input,args:["dAnchorLink"]}],anchorActive:[{type:t.Input}],scrollToAnchor:[{type:t.HostListener,args:["click"]}]},e}();var s=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[n.CommonModule],declarations:[c,i,r],exports:[c,i,r]}]}],e}();e.AnchorBoxDirective=i,e.AnchorDirective=r,e.AnchorLinkDirective=c,e.AnchorModule=s,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-anchor.umd.min.js.map