@duoduo-oba/ng-devui
Version:
DevUI components based on Angular
2 lines • 9.74 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/forms"),require("rxjs"),require("rxjs/operators"),require("@angular/common"),require("ng-devui/popover")):"function"==typeof define&&define.amd?define("ng-devui/slider",["exports","@angular/core","@angular/forms","rxjs","rxjs/operators","@angular/common","ng-devui/popover"],t):t(((e=e||self)["ng-devui"]=e["ng-devui"]||{},e["ng-devui"].slider={}),e.ng.core,e.ng.forms,e.rxjs,e.rxjs.operators,e.ng.common,e["ng-devui"].popover)}(this,(function(e,t,i,r,s,o,n){"use strict";var a={provide:i.NG_VALUE_ACCESSOR,useExisting:t.forwardRef((function(){return d})),multi:!0},d=function(){function e(e){this.cdr=e,this.isDragging=!1,this.isHovering=!1,this.showValuePopover=!1,this.max=100,this.min=0,this.step=1,this.disabled=!1,this.tipsRenderer=function(e){return""+e},this.onTouchedCallback=function(e){},this.onChangeCallback=function(e){}}return e.prototype.ngOnInit=function(){this.checkRangeValues(this.min,this.max),this.checkStepValue(),this.toggleDisabled(this.disabled),null===this.value&&this.setValue(this.ensureValueInRange(null))},e.prototype.ngOnChanges=function(e){(e.hasOwnProperty("min")||e.hasOwnProperty("max")||e.hasOwnProperty("step"))&&(this.checkRangeValues(this.min,this.max),this.checkStepValue())},e.prototype.ngAfterViewInit=function(){this.registerMouseEventsListeners(),this.registerHandleHoverPopoverListener(),this.toggleDisabled(this.disabled)},e.prototype.registerOnChange=function(e){this.onChangeCallback=e},e.prototype.registerOnTouched=function(e){this.onTouchedCallback=e},e.prototype.setDisabledState=function(e){this.disabled=e,this.toggleDisabled(e)},e.prototype.writeValue=function(e){this.setValue(this.ensureValueInRange(e))},e.prototype.checkRangeValues=function(e,t){if(t<=e)throw new Error("max value must be greater than min value")},e.prototype.checkStepValue=function(){if(this.step<0||!this.step)throw new Error("step value must be greater than 0.");if((this.max-this.min)%this.step)throw new Error("(max - min) must be divisible by step.")},e.prototype.ratioToValue=function(e,t,i,r){var s=(i-t)*e+t;return r>0&&(s=Math.round(s/r)*r),this.clamp(t,s,i)},e.prototype.convertHandlePositionToRatio=function(e,t,i){return this.clamp(0,(e-t)/i,1)},e.prototype.clamp=function(e,t,i){return Math.max(e,Math.min(t,i))},e.prototype.updateStyle=function(e){e=Math.min(1,Math.max(0,e)),this.sliderTrack.nativeElement.style.width=100*e+"%",this.sliderHandle.nativeElement.style.left=100*e+"%"},e.prototype.registerMouseEventsListeners=function(){var e=this;this.dragStartListener=r.fromEvent(this.slider.nativeElement,"mousedown").pipe(s.tap((function(e){e.stopPropagation(),e.preventDefault()})),s.pluck("pageX"),s.map((function(t){return e.mousePositionToAdaptiveValue(t)}))),this.dragEndListener=r.fromEvent(document,"mouseup"),this.dragMoveListener=r.fromEvent(document,"mousemove").pipe(s.tap((function(e){e.stopPropagation(),e.preventDefault()})),s.pluck("pageX"),s.distinctUntilChanged(),s.map((function(t){return e.mousePositionToAdaptiveValue(t)})),s.distinctUntilChanged(),s.takeUntil(this.dragEndListener))},e.prototype.getSliderPagePosition=function(){var e=this.slider.nativeElement.getBoundingClientRect(),t=this.slider.nativeElement.ownerDocument.defaultView;return e.left+t.pageXOffset},e.prototype.getRailLength=function(){return this.sliderRail.nativeElement.clientWidth},e.prototype.mousePositionToAdaptiveValue=function(e){var t=this.getSliderPagePosition(),i=this.getRailLength(),r=this.convertHandlePositionToRatio(e,t,i),s=this.ratioToValue(r,this.min,this.max,this.step);return parseFloat(s.toFixed(this.getDecimals(this.step)))},e.prototype.getDecimals=function(e){var t=e.toString(),i=t.indexOf(".")+1;return i>=0?t.length-i:0},e.prototype.mouseStartMoving=function(e){this.handleController(!0),this.setValue(e)},e.prototype.mouseMoving=function(e){this.setValue(e),this.cdr.markForCheck()},e.prototype.mouseStopMoving=function(){this.handleController(!1),this.cdr.markForCheck()},e.prototype.subscribeMouseActions=function(e){void 0===e&&(e=["start","move","end"]),-1!==e.indexOf("start")&&this.dragStartListener&&!this.dragStartHandler&&(this.dragStartHandler=this.dragStartListener.subscribe(this.mouseStartMoving.bind(this))),-1!==e.indexOf("move")&&this.dragMoveListener&&!this.dragMoveHandler&&(this.dragMoveHandler=this.dragMoveListener.subscribe(this.mouseMoving.bind(this))),-1!==e.indexOf("end")&&this.dragEndListener&&!this.dragEndHandler&&(this.dragEndHandler=this.dragEndListener.subscribe(this.mouseStopMoving.bind(this)))},e.prototype.unsubscribeMouseActions=function(e){void 0===e&&(e=["start","move","end"]),-1!==e.indexOf("start")&&this.dragStartHandler&&(this.dragStartHandler.unsubscribe(),this.dragStartHandler=null),-1!==e.indexOf("move")&&this.dragMoveHandler&&(this.dragMoveHandler.unsubscribe(),this.dragMoveHandler=null),-1!==e.indexOf("end")&&this.dragEndHandler&&(this.dragEndHandler.unsubscribe(),this.dragEndHandler=null)},e.prototype.handleController=function(e){e?(this.isDragging=!0,this.showValuePopover=this.showValuePopoverController(),this.subscribeMouseActions(["move","end"])):(this.isDragging=!1,this.showValuePopover=this.showValuePopoverController(),this.unsubscribeMouseActions(["move","end"]))},e.prototype.toggleDisabled=function(e){e?this.unsubscribeMouseActions():this.subscribeMouseActions(["start"])},e.prototype.setValue=function(e){this.value!==e&&(this.value=e,this.updateTrackAndHandle()),this.onChangeCallback(this.value)},e.prototype.ensureValueInRange=function(e){return this.valueMustBeValid(e)?this.clamp(this.min,e,this.max):this.min},e.prototype.updateTrackAndHandle=function(){var e=this.value,t=this.valueToOffset(e);this.updateStyle(t/100),this.cdr.markForCheck()},e.prototype.valueMustBeValid=function(e){return!isNaN("number"!=typeof e?parseFloat(e):e)},e.prototype.valueToOffset=function(e){return(e-this.min)/(this.max-this.min)*100},e.prototype.registerHandleHoverPopoverListener=function(){var e=r.fromEvent(this.sliderHandle.nativeElement,"mouseover"),t=r.fromEvent(this.sliderHandle.nativeElement,"mouseout");this.mouseOverHandler=e.subscribe(this.sliderHandlePopoverOnMouseHover.bind(this)),this.mouseLeaveHandler=t.subscribe(this.sliderHandlePopoverOnMouseLeave.bind(this))},e.prototype.sliderHandlePopoverOnMouseHover=function(){this.isHovering=!0,this.showValuePopover=this.showValuePopoverController(),this.cdr.markForCheck()},e.prototype.sliderHandlePopoverOnMouseLeave=function(){this.isHovering=!1,this.showValuePopover=this.showValuePopoverController(),this.cdr.markForCheck()},e.prototype.unregisterHandleHoverTooltip=function(){this.mouseOverHandler.unsubscribe(),this.mouseLeaveHandler.unsubscribe()},e.prototype.showValuePopoverController=function(){return this.isDragging||this.isHovering},e.prototype.ngOnDestroy=function(){this.unsubscribeMouseActions(),this.unregisterHandleHoverTooltip()},e.decorators=[{type:t.Component,args:[{selector:"d-slider",template:'<div class="devui-slider" #slider [ngClass]="{ disabled: disabled }">\r\n <div class="devui-slider-rail" #sliderRail [ngClass]="{ disabled: disabled }"></div>\r\n <div class="devui-slider-track" #sliderTrack [ngClass]="{ disabled: disabled }"></div>\r\n <div\r\n class="devui-slider-handle"\r\n #sliderHandle\r\n [ngClass]="{ disabled: disabled }"\r\n dPopover\r\n position="top"\r\n [content]="showValuePopover && tipsRenderer ? tipsRenderer(value) : \'\'"\r\n [showAnimate]="false"\r\n [visible]="tipsRenderer && showValuePopover"\r\n ></div>\r\n</div>\r\n',providers:[a],changeDetection:t.ChangeDetectionStrategy.OnPush,styles:[":host{display:block}.devui-slider{position:relative;width:100%;padding:5px 0;margin:5px 0;cursor:pointer;box-sizing:border-box;height:15px}.devui-slider .devui-slider-rail{position:absolute;background-color:#f8f8f8;height:5px;width:100%;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}.devui-slider .devui-slider-rail.disabled,.devui-slider:hover .devui-slider-rail:not(.disabled){background-color:#f8f8f8}.devui-slider:hover .devui-slider-track:not(.disabled){background-color:#344899}.devui-slider:hover .devui-slider-handle:not(.disabled){border-color:#344899}.devui-slider .devui-slider-track{position:absolute;background-color:#5e7ce0;height:5px;width:0}.devui-slider .devui-slider-handle{position:absolute;background-color:#fff;width:14px;height:14px;border-radius:50%;margin-left:-7px;margin-top:-5px;left:0;-webkit-transition:-webkit-transform .2s ease-in-out;transition:transform .2s ease-in-out;transition:transform .2s ease-in-out,-webkit-transform .2s ease-in-out;border:2px solid #5e7ce0}.devui-slider .devui-slider-handle:not(.disabled):active,.devui-slider .devui-slider-handle:not(.disabled):hover{-webkit-transform:scale(1.3);transform:scale(1.3)}.devui-slider.disabled{cursor:not-allowed;opacity:.3}"]}]}],e.ctorParameters=function(){return[{type:t.ChangeDetectorRef}]},e.propDecorators={slider:[{type:t.ViewChild,args:["slider",{static:!0}]}],sliderHandle:[{type:t.ViewChild,args:["sliderHandle",{static:!0}]}],sliderTrack:[{type:t.ViewChild,args:["sliderTrack",{static:!0}]}],sliderRail:[{type:t.ViewChild,args:["sliderRail",{static:!0}]}],max:[{type:t.Input}],min:[{type:t.Input}],step:[{type:t.Input}],disabled:[{type:t.Input}],tipsRenderer:[{type:t.Input}]},e}();var l=function(){function e(){}return e.decorators=[{type:t.NgModule,args:[{imports:[o.CommonModule,i.FormsModule,n.PopoverModule],exports:[d],declarations:[d],providers:[]}]}],e}();e.SliderComponent=d,e.SliderModule=l,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=ng-devui-slider.umd.min.js.map