tw-slide-ruler/lib/slide-ruler.js

SlideRuler Component 滑尺数值选择器

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.SlideRuler=e():t.SlideRuler=e()}(window,(function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="/lib/",n(n.s=1)}([function(t,e,n){var r=n(2);"string"==typeof r&&(r=[[t.i,r,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};n(4)(r,o);r.locals&&(t.exports=r.locals)},function(t,e,n){"use strict";n.r(e);var r=n(0),o=n.n(r);function i(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function a(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?i(Object(n),!0).forEach((function(e){s(t,e,n[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function s(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function c(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function u(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}var l=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};c(this,t),this.value="",this.options={canvasWidth:document.body.clientWidth||375,canvasHeight:83,boxColor:"#E4E4E4",scrollLeft:0,heightDecimal:35,heightDigit:18,widthDecimal:2,widthDigit:2,lineWidth:2,colorDecimal:"#E4E4E4",colorDigit:"#E4E4E4",divide:10,precision:1,fontSize:20,fontColor:"#666",fontMarginTop:35,lineMarginTop:0,maxValue:230,minValue:100,currentValue:160,vibrateDuration:100},this.localState={startX:0,startY:0,isTouchEnd:!0,touchPoints:[]},this.browserEnv=window.hasOwnProperty("ontouchstart"),this.supportVibrate=!1,this.options=a(a({},this.options),e),this.init(this.options)}var e,n,r;return e=t,(n=[{key:"_renderBox",value:function(t){var e=document.createElement("div"),n=document.createElement("canvas");this.canvas=n,e.className=o.a.box,e.appendChild(n),t.appendChild(e),this._renderCanvas()}},{key:"_renderCanvas",value:function(){var t=this.options,e=t.canvasWidth,n=t.canvasHeight,r=this.canvas;r.width=2*e,r.height=2*n,r.style.width=e+"px",r.style.height=n+"px",r.className=o.a.canvas,this.browserEnv?(r.ontouchstart=this.touchStart.bind(this),r.ontouchmove=this.touchMove.bind(this),r.ontouchend=this.touchEnd.bind(this)):(r.onmousedown=this.touchStart.bind(this),r.onmousemove=this.touchMove.bind(this),r.onmouseup=this.touchEnd.bind(this)),this.dreawCanvas()}},{key:"touchStart",value:function(t){if(t.preventDefault(),t||this.localState.isTouchEnd){this.touchPoints(t);var e=t.touches&&t.touches[0]||t;this.localState.startX=e.pageX,this.localState.startY=e.pageY,this.localState.startT=(new Date).getTime(),this.localState.isTouchEnd=!1}}},{key:"touchMove",value:function(t){if(this.browserEnv||1===t.which&&0!==t.buttons){this.touchPoints(t);var e=t.touches&&t.touches[0]||t,n=e.pageX-this.localState.startX,r=e.pageY-this.localState.startY;if(Math.abs(n)>Math.abs(r)&&Math.abs(Math.round(n/this.options.divide))>0){if(this.browserEnv&&!this.rebound(n))return;this.moveDreaw(n),this.localState.startX=e.pageX,this.localState.startY=e.pageY}}}},{key:"touchEnd",value:function(){this.moveDreaw(this.browserEnv?this.inertialShift():0),this.localState.isTouchEnd=!0,this.localState.touchPoints=[],this.canvas.style.transform="translate3d(0, 0, 0)"}},{key:"touchPoints",value:function(t){var e=t.touches&&t.touches[0]||t,n=(new Date).getTime(),r=e.pageX;this.localState.touchPoints.push({time:n,shift:r})}},{key:"inertialShift",value:function(){var t=0;if(this.localState.touchPoints.length>=4){var e=this.localState.touchPoints.slice(-4),n=(e[3].shift-e[0].shift)/(e[3].time-e[0].time)*1e3;t=Math.sign(n)*Math.pow(n,2)/12e3}return t}},{key:"rebound",value:function(t){var e=this.options,n=e.currentValue,r=e.maxValue;if(n===e.minValue&&t>0||n===r&&t<0){var o=1.5988*Math.sign(t)*Math.pow(Math.abs(t),.7962);return this.canvas.style.transform="translate3d(".concat(o,"px, 0, 0)"),!1}return!0}},{key:"moveDreaw",value:function(t){var e=this,n=this.options,r=n.divide,o=n.precision,i=Math.round(-t/r),a=Math.abs(i);!function t(){a<1||(e.options.currentValue+=Math.sign(i)*o,e.dreawCanvas(),e.vibrate(),window.requestAnimationFrame(t),a--)}()}},{key:"dreawCanvas",value:function(){var t=this.canvas,e=t.getContext("2d");t.height=t.height;var n=this.options,r=n.canvasWidth,o=(n.canvasHeight,n.maxValue),i=n.minValue,a=n.currentValue,s=n.handleValue,c=n.precision,u=n.divide,l=n.heightDecimal,f=n.heightDigit,h=n.widthDecimal,p=n.widthDigit,d=(n.lineWidth,n.colorDecimal),v=n.colorDigit,b=n.fontSize,m=n.fontColor,g=n.fontMarginTop,y=n.lineMarginTop;a=a>i?a<o?a:o:i,a=Math.round(10*a/c)*c/10,this.options.currentValue=a,s&&s(a);var w=(a-i)*u/c,x=a-Math.floor(r/2/u)*c,S=(x=x>i?x<o?x:o:i)+r/u*c;S=S<o?S:o;var M=w>r/2?2*(r/2-(a-x)*u/c):2*(r/2-w);l*=2,f*=2,h*=2,p*=2,b*=2,g*=2,y*=2,u*=2;for(var O=1/c,j=Math.round(x/c*10)/10;j<=S/c;j++){e.beginPath();var E=(j%10==0?0:l-f)+y;e.moveTo(M+(j-x/c)*u,E),e.lineTo(M+(j-x/c)*u,l+y),e.lineWidth=j%10==0?h:p,e.strokeStyle=j%10==0?d:v,e.stroke(),e.fillStyle=m,e.textAlign="center",e.textBaseline="top",j%10==0&&(e.font="".concat(b,"px Arial"),e.fillText(Math.round(j/10)/(O/10),M+(j-x/c)*u,g)),e.closePath()}}},{key:"goValue",value:function(t){var e=this,n=this.options,r=(n.divide,n.precision,t-this.options.currentValue);!function t(){if(!(Math.abs(r)<1)){var n=Math.sign(r)*Math.floor(Math.sqrt(Math.abs(r)));e.options.currentValue+=n,e.dreawCanvas(),e.vibrate(),window.requestAnimationFrame(t),r-=n}}()}},{key:"init",value:function(t){this._renderBox(t.el),this._checkVibrate()}},{key:"destory",value:function(){this.options.el.innerHTML=""}},{key:"_checkVibrate",value:function(){navigator.vibrate=navigator.vibrate||navigator.webkitVibrate||navigator.mozVibrate||navigator.msVibrate,navigator.vibrate?this.supportVibrate=!0:console.log("不支持震动")}},{key:"vibrate",value:function(){this.supportVibrate&&(navigator.vibrate(0),navigator.vibrate(this.options.vibrateDuration))}}])&&u(e.prototype,n),r&&u(e,r),t}();e.default=l},function(t,e,n){(e=n(3)(!1)).push([t.i,"*{margin:0;padding:0}.slide-ruler_box_1Le{position:relative}.slide-ruler_box_1Le:before{position:absolute;z-index:1;left:50%;top:0;transform:translateX(-50%);content:'';width:3px;height:35px;background-color:#00b0ab}.slide-ruler_canvas_B8Y{display:block;margin:0 auto;transition-duration:300ms}\n",""]),e.locals={box:"slide-ruler_box_1Le",canvas:"slide-ruler_canvas_B8Y"},t.exports=e},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var o=(a=r,s=btoa(unescape(encodeURIComponent(JSON.stringify(a)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s),"/*# ".concat(c," */")),i=r.sources.map((function(t){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(t," */")}));return[n].concat(i).concat([o]).join("\n")}var a,s,c;return[n].join("\n")}(e,t);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n,r){"string"==typeof t&&(t=[[null,t,""]]);var o={};if(r)for(var i=0;i<this.length;i++){var a=this[i][0];null!=a&&(o[a]=!0)}for(var s=0;s<t.length;s++){var c=[].concat(t[s]);r&&o[c[0]]||(n&&(c[2]?c[2]="".concat(n," and ").concat(c[2]):c[2]=n),e.push(c))}},e}},function(t,e,n){var r,o,i={},a=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===o&&(o=r.apply(this,arguments)),o}),s=function(t,e){return e?e.querySelector(t):document.querySelector(t)},c=function(t){var e={};return function(t,n){if("function"==typeof t)return t();if(void 0===e[t]){var r=s.call(this,t,n);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(t){r=null}e[t]=r}return e[t]}}(),u=null,l=0,f=[],h=n(5);function p(t,e){for(var n=0;n<t.length;n++){var r=t[n],o=i[r.id];if(o){o.refs++;for(var a=0;a<o.parts.length;a++)o.parts[a](r.parts[a]);for(;a<r.parts.length;a++)o.parts.push(y(r.parts[a],e))}else{var s=[];for(a=0;a<r.parts.length;a++)s.push(y(r.parts[a],e));i[r.id]={id:r.id,refs:1,parts:s}}}}function d(t,e){for(var n=[],r={},o=0;o<t.length;o++){var i=t[o],a=e.base?i[0]+e.base:i[0],s={css:i[1],media:i[2],sourceMap:i[3]};r[a]?r[a].parts.push(s):n.push(r[a]={id:a,parts:[s]})}return n}function v(t,e){var n=c(t.insertInto);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=f[f.length-1];if("top"===t.insertAt)r?r.nextSibling?n.insertBefore(e,r.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),f.push(e);else if("bottom"===t.insertAt)n.appendChild(e);else{if("object"!=typeof t.insertAt||!t.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var o=c(t.insertAt.before,n);n.insertBefore(e,o)}}function b(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t);var e=f.indexOf(t);e>=0&&f.splice(e,1)}function m(t){var e=document.createElement("style");if(void 0===t.attrs.type&&(t.attrs.type="text/css"),void 0===t.attrs.nonce){var r=function(){0;return n.nc}();r&&(t.attrs.nonce=r)}return g(e,t.attrs),v(t,e),e}function g(t,e){Object.keys(e).forEach((function(n){t.setAttribute(n,e[n])}))}function y(t,e){var n,r,o,i;if(e.transform&&t.css){if(!(i="function"==typeof e.transform?e.transform(t.css):e.transform.default(t.css)))return function(){};t.css=i}if(e.singleton){var a=l++;n=u||(u=m(e)),r=S.bind(null,n,a,!1),o=S.bind(null,n,a,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",g(e,t.attrs),v(t,e),e}(e),r=O.bind(null,n,e),o=function(){b(n),n.href&&URL.revokeObjectURL(n.href)}):(n=m(e),r=M.bind(null,n),o=function(){b(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(e=e||{}).attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=a()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=d(t,e);return p(n,e),function(t){for(var r=[],o=0;o<n.length;o++){var a=n[o];(s=i[a.id]).refs--,r.push(s)}t&&p(d(t,e),e);for(o=0;o<r.length;o++){var s;if(0===(s=r[o]).refs){for(var c=0;c<s.parts.length;c++)s.parts[c]();delete i[s.id]}}}};var w,x=(w=[],function(t,e){return w[t]=e,w.filter(Boolean).join("\n")});function S(t,e,n,r){var o=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=x(e,o);else{var i=document.createTextNode(o),a=t.childNodes;a[e]&&t.removeChild(a[e]),a.length?t.insertBefore(i,a[e]):t.appendChild(i)}}function M(t,e){var n=e.css,r=e.media;if(r&&t.setAttribute("media",r),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}function O(t,e,n){var r=n.css,o=n.sourceMap,i=void 0===e.convertToAbsoluteUrls&&o;(e.convertToAbsoluteUrls||i)&&(r=h(r)),o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var a=new Blob([r],{type:"text/css"}),s=t.href;t.href=URL.createObjectURL(a),s&&URL.revokeObjectURL(s)}},function(t,e){t.exports=function(t){var e="undefined"!=typeof window&&window.location;if(!e)throw new Error("fixUrls requires window.location");if(!t||"string"!=typeof t)return t;var n=e.protocol+"//"+e.host,r=n+e.pathname.replace(/\/[^\/]*$/,"/");return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,(function(t,e){var o,i=e.trim().replace(/^"(.*)"$/,(function(t,e){return e})).replace(/^'(.*)'$/,(function(t,e){return e}));return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(i)?t:(o=0===i.indexOf("//")?i:0===i.indexOf("/")?n+i:r+i.replace(/^\.\//,""),"url("+JSON.stringify(o)+")")}))}}])}));