| 7 | goog.provide("ngmaterial.components.slider"),goog.require("ngmaterial.core"),SliderDirective.$inject=["$$rAF","$window","$mdAria","$mdUtil","$mdConstant","$mdTheming","$mdGesture","$parse","$log","$timeout"],angular.module("material.components.slider",["material.core"]).directive("mdSlider",SliderDirective).directive("mdSliderContainer",SliderContainerDirective);var stepPageSize=10,modifierMultiplier=4;function SliderContainerDirective(){return{controller:function(){},compile:function(e){var t=e.find("md-slider");if(t)return void 0!==t.attr("md-vertical")&&e.attr("md-vertical",""),t.attr("flex")||t.attr("flex",""),function(e,l,t,n){function a(e){l.children().attr("disabled",e),l.find("input").attr("disabled",e)}l.addClass("_md");var o,i=angular.noop;t.disabled?a(!0):t.ngDisabled&&(i=e.$watch(t.ngDisabled,function(e){a(e)})),e.$on("$destroy",function(){i()}),n.fitInputWidthToTextLength=function(e){var t=l[0].querySelector("md-input-container");if(t){var n=getComputedStyle(t),a=parseInt(n.minWidth),i=parseInt(n.paddingLeft)+parseInt(n.paddingRight);o=o||parseInt(n.maxWidth);var r=Math.max(o,a+i+a/2*e);t.style.maxWidth=r+"px"}}}}}}function SliderDirective(B,G,i,K,U,X,H,j,J,Q){return{scope:{},require:["?ngModel","?^mdSliderContainer"],template:'<div class="md-slider-wrapper"><div class="md-slider-content"><div class="md-track-container"><div class="md-track"></div><div class="md-track md-track-fill"></div><div class="md-track-ticks"></div></div><div class="md-thumb-container"><div class="md-thumb"></div><div class="md-focus-thumb"></div><div class="md-focus-ring"></div><div class="md-sign"><span class="md-thumb-text"></span></div><div class="md-disabled-thumb"></div></div></div></div>',compile:function(e,t){var n=angular.element(e[0].getElementsByClassName("md-slider-wrapper")),a=t.tabindex||0;n.attr("tabindex",a),(t.disabled||t.ngDisabled)&&n.attr("tabindex",-1);return n.attr("role","slider"),i.expect(e,"aria-label"),r}};function r(n,a,i,e){X(a);var r=e[0]||{$setViewValue:function(e){this.$viewValue=e,this.$viewChangeListeners.forEach(function(e){e()})},$parsers:[],$formatters:[],$viewChangeListeners:[]},l=e[1],o=(angular.element(K.getClosest(a,"_md-slider-container",!0)),i.ngDisabled?angular.bind(null,j(i.ngDisabled),n.$parent):function(){return a[0].hasAttribute("disabled")}),t=angular.element(a[0].querySelector(".md-thumb")),s=angular.element(a[0].querySelector(".md-thumb-text")),d=t.parent(),u=angular.element(a[0].querySelector(".md-track-container")),c=angular.element(a[0].querySelector(".md-track-fill")),m=angular.element(a[0].querySelector(".md-track-ticks")),f=angular.element(a[0].getElementsByClassName("md-slider-wrapper")),v=(angular.element(a[0].getElementsByClassName("md-slider-content")),K.throttle(P,5e3)),g=angular.isDefined(i.mdVertical),p=angular.isDefined(i.mdDiscrete),h=angular.isDefined(i.mdInvert);angular.isDefined(i.min)?i.$observe("min",V):V(0),angular.isDefined(i.max)?i.$observe("max",E):E(100),angular.isDefined(i.step)?i.$observe("step",k):k(1),angular.isDefined(i.round)?i.$observe("round",M):M(3);angular.noop;function $(){P(),I()}i.ngDisabled&&n.$parent.$watch(i.ngDisabled,function(){a.attr("aria-disabled",!!o())}),H.register(f,"drag",{horizontal:!g}),n.mouseActive=!1,f.on("keydown",function(e){if(o())return;var t,n=U.KEY_CODE;switch(e.keyCode){case n.DOWN_ARROW:case n.LEFT_ARROW:e.preventDefault(),t=-D;break;case n.UP_ARROW:case n.RIGHT_ARROW:e.preventDefault(),t=D;break;case n.PAGE_DOWN:e.preventDefault(),t=-D*stepPageSize;break;case n.PAGE_UP:e.preventDefault(),t=D*stepPageSize;break;case n.HOME:e.preventDefault(),e.stopPropagation(),N(b);break;case n.END:e.preventDefault(),e.stopPropagation(),N(w)}t&&(t=h?-t:t,(e.metaKey||e.ctrlKey||e.altKey)&&(t*=modifierMultiplier),e.preventDefault(),e.stopPropagation(),N(r.$viewValue+t))}).on("mousedown",function(){(function(){if(!p||o())return;if(angular.isUndefined(D))return;if(D<=0){var e="Slider step value must be greater than zero when in discrete mode";throw J.error(e),new Error(e)}var t=Math.floor((w-b)/D);x||(x=angular.element("<canvas>").css("position","absolute"),m.append(x),y=x[0].getContext("2d"));var n,a=R();!a||a.height||a.width||(P(),a=A);x[0].width=a.width,x[0].height=a.height;for(var i=0;i<=t;i++){var r=G.getComputedStyle(m[0]);y.fillStyle=r.color||"black",n=Math.floor((g?a.height:a.width)*(i/t)),y.fillRect(g?0:n-1,g?n-1:0,g?a.width:2,g?2:a.height)}})(),n.mouseActive=!0,f.removeClass("md-focused"),Q(function(){n.mouseActive=!1},100)}).on("focus",function(){!1===n.mouseActive&&f.addClass("md-focused")}).on("blur",function(){f.removeClass("md-focused"),a.removeClass("md-active"),function(){if(x&&y){var e=R();y.clearRect(0,0,e.width,e.height)}}()}).on("$md.pressdown",function(e){if(o())return;a.addClass("md-active"),a[0].focus(),P();var t=T(_(F(z(g?e.srcEvent.clientY:e.srcEvent.clientX))));n.$apply(function(){W(t),q(Y(t))})}).on("$md.pressup",function(e){if(o())return;a.removeClass("md-dragging");var t=T(_(F(z(g?e.srcEvent.clientY:e.srcEvent.clientX))));n.$apply(function(){W(t),I()})}).on("$md.dragstart",function(e){if(o())return;L=!0,e.stopPropagation(),a.addClass("md-dragging"),O(e)}).on("$md.drag",function(e){if(!L)return;e.stopPropagation(),O(e)}).on("$md.dragend",function(e){if(!L)return;e.stopPropagation(),L=!1}),setTimeout($,0);var b,w,D,C,x,y,S=B.throttle($);function V(e){b=parseFloat(e),r.$viewValue=T(r.$modelValue,b,w),f.attr("aria-valuemin",e),$()}function E(e){w=parseFloat(e),r.$viewValue=T(r.$modelValue,b,w),f.attr("aria-valuemax",e),$()}function k(e){D=parseFloat(e)}function M(e){C=T(parseInt(e),0,6)}angular.element(G).on("resize",S),n.$on("$destroy",function(){angular.element(G).off("resize",S)}),r.$render=I,r.$viewChangeListeners.push(I),r.$formatters.push(T),r.$formatters.push(_);var A={};function P(){A=u[0].getBoundingClientRect()}function R(){return v(),A}function N(e){n.$evalAsync(function(){W(e)})}function W(e){r.$setViewValue(T(_(e)))}function I(){isNaN(r.$viewValue)&&(r.$viewValue=r.$modelValue),r.$viewValue=T(r.$viewValue);var e=Y(r.$viewValue);n.modelValue=r.$viewValue,f.attr("aria-valuenow",r.$viewValue),q(e),s.text(r.$viewValue)}function T(e,t,n){if(angular.isNumber(e))return t=angular.isNumber(t)?t:b,n=angular.isNumber(n)?n:w,Math.max(t,Math.min(n,e))}function _(e){if(angular.isNumber(e)){var t=Math.round((e-b)/D)*D+b;return t=Math.round(t*Math.pow(10,C))/Math.pow(10,C),l&&l.fitInputWidthToTextLength&&K.debounce(function(){l.fitInputWidthToTextLength(t.toString().length)},100)(),t}}function q(e){var t=100*(e=function(e){return Math.max(0,Math.min(e||0,1))}(e))+"%",n=h?100*(1-e)+"%":t;g?d.css("bottom",t):K.bidiProperty(d,"left","right",t),c.css(g?"height":"width",n),a.toggleClass(h?"md-max":"md-min",0===e),a.toggleClass(h?"md-min":"md-max",1===e)}P();var L=!1;function O(e){p?function(e){var t=T(_(F(z(e))));q(z(e)),s.text(t)}(g?e.srcEvent.clientY:e.srcEvent.clientX):function(e){n.$evalAsync(function(){W(F(z(e)))})}(g?e.srcEvent.clientY:e.srcEvent.clientX)}function z(e){var t=(e-(g?A.top:A.left))/(g?A.height:A.width);return!g&&K.isRtl(i)&&(t=1-t),Math.max(0,Math.min(1,g?1-t:t))}function F(e){return b+(h?1-e:e)*(w-b)}function Y(e){var t=(e-b)/(w-b);return h?1-t:t}}}ngmaterial.components.slider=angular.module("material.components.slider"); |
|---|
