Advertisement
Guest User

Untitled

a guest
Feb 20th, 2020
99
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Scrubber component
  2. // Lets the user change an input field value by dragging the mouse left/right.
  3. // Manual text input is still possible.
  4.  
  5. Vue.component('scrubber', {
  6.   data: function() {
  7.     return {
  8.       isMouseDown: false,
  9.       initialMouse: null,
  10.       value: 0
  11.     }
  12.   },
  13.   computed: {
  14.    
  15.     // returns the number of decimals based on the step value
  16.     // e.g. "0.25" returns "2"
  17.     decimals: function() {
  18.       return this.steps.toString().substr((this.steps).toString().indexOf(".")).length - 1;
  19.     },
  20.    
  21.     // every time the value changes, we need to make sure it stays inside the min/max
  22.     constrainedValue: function() {
  23.       return this.constrain(this.value, this.min, this.max, this.decimals);
  24.     }
  25.   },
  26.  
  27.   // props that the scrubber can receive
  28.   // value: initial value
  29.   // min: minimum value
  30.   // max: maximum value
  31.   // steps: increments for each pixel the mouse is moved
  32.   props: ["value", "min", "max", "steps"],
  33.  
  34.   // the template
  35.   template: "<input class='vue-scrubber' v-model='constrainedValue' v-on:mousedown='handleMouseDown' v-on:keypress='handleInput' v-on:keydown.up='handleKeyCodeUp' v-on:keydown.down='handleKeyCodeDown' v-on:change='handleChange' />",
  36.  
  37.   methods: {
  38.    
  39.     // constrains a number to not exceed the min/max
  40.     // decimals: rounding precision
  41.     constrain: function(value, min, max, decimals) {
  42.       decimals = typeof decimals !== 'undefined' ? decimals : 0;
  43.  
  44.       if (min != undefined && max != undefined) {
  45.         return this.round(Math.min(Math.max(parseFloat(value), min), max), decimals);
  46.       } else {
  47.         return value;
  48.       }
  49.     },
  50.    
  51.     // method to round a number to given decimals
  52.     round: function(value, decimals) {
  53.       return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
  54.     },
  55.     handleInput: function (event) {
  56.       // only allow numeric keys
  57.       if (event.keyCode < 48 || event.keyCode > 57) {
  58.         event.preventDefault();
  59.       }
  60.     },
  61.    
  62.     handleChange: function (event) {
  63.  
  64.       this.value = isNaN(parseFloat(event.target.value)) ? 0 : parseFloat(event.target.value);
  65.     },
  66.    
  67.     handleKeyCodeUp: function (event) {
  68.       event.preventDefault();
  69.         this.value += parseFloat(this.steps);
  70.     },
  71.    
  72.     handleKeyCodeDown: function (event) {
  73.       event.preventDefault();
  74.         this.value -= parseFloat(this.steps);
  75.     },
  76.    
  77.     // mouse handler
  78.     handleMouseDown: function(event) {
  79.  
  80.       // enable scrubbing
  81.       this.mouseDown = true;
  82.  
  83.       // remember the initial mouse position when the scubbing started
  84.       this.initialMouse = {
  85.         x: event.clientX,
  86.         y: event.clientY
  87.       }
  88.  
  89.       // remember the initial value
  90.       this.initialValue = this.value;
  91.  
  92.       // register global event handlers because now we are not bound to the component anymore
  93.       document.addEventListener("mousemove", this.handleMouseMove)
  94.  
  95.       // global mouse up listener
  96.       document.addEventListener("mouseup", this.handleMouseUp)
  97.      
  98.     },
  99.     handleMouseUp: function($event) {
  100.  
  101.       // disable scrubbing
  102.       this.mouseDown = false;
  103.      
  104.       document.removeEventListener("mousemove", this.handleMouseMove)
  105.       document.removeEventListener("mouseup", this.handleMouseUp)
  106.  
  107.     },
  108.    
  109.     // the actual translation of mouse movement to value change…
  110.     handleMouseMove: function(event) {
  111.  
  112.       // scrub if the mouse is being pressed
  113.       if (this.mouseDown) {
  114.         var newValue = this.initialValue + ((event.clientX - this.initialMouse.x) * this.steps)
  115.  
  116.         // constrain the value to the min/max
  117.         this.value = this.constrain(newValue, this.min, this.max, this.decimals);
  118.  
  119.       }
  120.     }
  121.   }
  122. })
  123.  
  124. // demo app with global data properties that get passed down the a few scrubbers
  125.  
  126. var app = new Vue({
  127.   el: "#app",
  128.   data: {
  129.     min: 0,
  130.     max: 200,
  131.     steps: 1,
  132.     value: 100,
  133.     demo: "<scrubber :min='10' :max='100' :steps='1' :value='50'></scrubber>"
  134.   }
  135. })
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement