slide-ruler
Version:
SlideRuler Component 滑尺数值选择器
1 lines • 12.7 kB
JavaScript
!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);return Object.getOwnPropertySymbols&&n.push.apply(n,Object.getOwnPropertySymbols(t)),e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n}function a(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function s(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 c=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.value="",this.options={canvasWidth:document.body.clientWidth||375,canvasHeight:83,boxColor:"#E4E4E4",scrollLeft:0,heightDecimal:35,heightDigit:18,lineWidth:2,colorDecimal:"#E4E4E4",colorDigit:"#E4E4E4",divide:10,precision:1,fontSize:20,fontColor:"#666",fontMarginTop:35,maxValue:230,minValue:100,currentValue:160},this.localState={startX:0,startY:0,isTouchEnd:!0,touchPoints:[]},this.browserEnv=window.hasOwnProperty("ontouchstart"),this.options=function(t){for(var e=1;e<arguments.length;e++)if(e%2){var n=null!=arguments[e]?arguments[e]:{};i(n,!0).forEach(function(e){a(t,e,n[e])})}else Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(arguments[e])):i(n).forEach(function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(arguments[e],n))});return t}({},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(),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.lineWidth,d=n.colorDecimal,p=n.colorDigit,v=n.fontSize,b=n.fontColor,m=n.fontMarginTop;a=a>i?a<o?a:o:i,a=Math.round(10*a/c)*c/10,this.options.currentValue=a,s&&s(a);var y=(a-i)*u/c,g=a-Math.floor(r/2/u)*c,w=(g=g>i?g<o?g:o:i)+r/u*c;w=w<o?w:o;var x=y>r/2?2*(r/2-(a-g)*u/c):2*(r/2-y);l*=2,f*=2,h*=2,v*=2,m*=2,u*=2;for(var S=1/c,O=Math.round(g/c*10)/10;O<=w/c;O++)e.beginPath(),e.moveTo(x+(O-g/c)*u,0),e.lineTo(x+(O-g/c)*u,O%10==0?l:f),e.lineWidth=h,e.strokeStyle=O%10==0?d:p,e.stroke(),e.fillStyle=b,e.textAlign="center",e.textBaseline="top",O%10==0&&(e.font="".concat(v,"px Arial"),e.fillText(Math.round(O/10)/(S/10),x+(O-g/c)*u,m)),e.closePath()}},{key:"init",value:function(t){this._renderBox(t.el)}}])&&s(e.prototype,n),r&&s(e,r),t}();e.default=c},function(t,e,n){(e=t.exports=n(3)(!1)).push([t.i,".slide-ruler_box_1Le {\n position: relative;\n margin: 0;\n padding: 0; }\n .slide-ruler_box_1Le:before {\n position: absolute;\n z-index: 1;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n content: '';\n width: 3px;\n height: 35px;\n background-color: #00b0ab; }\n\n.slide-ruler_canvas_B8Y {\n display: block;\n margin: 0 auto;\n padding: 0;\n transition-duration: 300ms; }\n",""]),e.locals={box:"slide-ruler_box_1Le",canvas:"slide-ruler_canvas_B8Y"}},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){"string"==typeof t&&(t=[[null,t,""]]);for(var r={},o=0;o<this.length;o++){var i=this[o][0];null!=i&&(r[i]=!0)}for(var a=0;a<t.length;a++){var s=t[a];null!=s[0]&&r[s[0]]||(n&&!s[2]?s[2]=n:n&&(s[2]="(".concat(s[2],") and (").concat(n,")")),e.push(s))}},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){var e={};return function(t,n){if("function"==typeof t)return t();if(void 0===e[t]){var r=function(t,e){return e?e.querySelector(t):document.querySelector(t)}.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]}}(),c=null,u=0,l=[],f=n(5);function h(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 p(t,e){var n=s(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=l[l.length-1];if("top"===t.insertAt)r?r.nextSibling?n.insertBefore(e,r.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),l.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=s(t.insertAt.before,n);n.insertBefore(e,o)}}function v(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t);var e=l.indexOf(t);e>=0&&l.splice(e,1)}function b(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 m(e,t.attrs),p(t,e),e}function m(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=u++;n=c||(c=b(e)),r=x.bind(null,n,a,!1),o=x.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",m(e,t.attrs),p(t,e),e}(e),r=function(t,e,n){var r=n.css,o=n.sourceMap,i=void 0===e.convertToAbsoluteUrls&&o;(e.convertToAbsoluteUrls||i)&&(r=f(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)}.bind(null,n,e),o=function(){v(n),n.href&&URL.revokeObjectURL(n.href)}):(n=b(e),r=function(t,e){var n=e.css,r=e.media;r&&t.setAttribute("media",r);if(t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}.bind(null,n),o=function(){v(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 h(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&&h(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 g,w=(g=[],function(t,e){return g[t]=e,g.filter(Boolean).join("\n")});function x(t,e,n,r){var o=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=w(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(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)+")")})}}])});