-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fixes and mouse-drag-increment feature (#19)
* Small Vue fixes: Correct number of arguments in store() and poperty type correction. * add incrementInput method to simplify onUp and onDown * Small vue fix : Correct the color validator * Add mouse-drag colorinput increment capabilities by dragging the grey unit name vertically. (all except hex) * Cleaning * Restore meta key functionality for onUp & onDown * Also enable shift as a modifier key, plus wrap the condition in a method. * Document changes in readme for #19
- Loading branch information
1 parent
30abf57
commit f457166
Showing
6 changed files
with
86 additions
and
35 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,55 +1,101 @@ | ||
| export default { | ||
| data: function(){ | ||
| return { | ||
| // Data used to handle mouse-drag | ||
| dragActive: false, | ||
| dragStart: null, | ||
| dragAmount: 0, | ||
| dragInputRef: null, | ||
| dragValue: null, | ||
| } | ||
| }, | ||
| created(){ | ||
| // Bind to the document, as it will not be fired when there is no hover on the item. | ||
| document.addEventListener('mouseup', this.onMouseUp); | ||
| document.addEventListener('mousemove', this.onMouseDrag); | ||
| }, | ||
| methods: { | ||
| onInput(event) { | ||
| this.store(event.target.value); | ||
| }, | ||
|
|
||
| onUp(event) { | ||
| const input = event.target; | ||
| const max = input.getAttribute('max'); | ||
| incrementInput(inputEl, step=1){ | ||
| const max = inputEl.getAttribute('max'); | ||
|
|
||
| if (!max) { | ||
| return; | ||
| } | ||
|
|
||
| let value = parseInt(input.value, 10); | ||
| let step = 1; | ||
|
|
||
| if (event.metaKey) { | ||
| step = 10; | ||
| } | ||
| let value = parseInt(inputEl.value, 10); | ||
|
|
||
| value = Math.min(value + step, max); | ||
|
|
||
| if (value < 0) { | ||
| value = 0; | ||
| } | ||
|
|
||
| this.store(value, input); | ||
| this.store(value, inputEl); | ||
| }, | ||
|
|
||
| amplifyStepFromEvent(e, step=1, amplification=10){ | ||
| return (event && (event.metaKey || event.shiftKey)) ? (step*amplification) : step; | ||
| }, | ||
|
|
||
| // Keyboard up arrow press | ||
| onUp(event) { | ||
| const input = event.target; | ||
| this.incrementInput(input, this.amplifyStepFromEvent(event,1)); | ||
| return; | ||
| }, | ||
|
|
||
| // Keyboard down arrow press | ||
| onDown(event) { | ||
| const input = event.target; | ||
| const min = input.getAttribute('min'); | ||
| this.incrementInput(input, this.amplifyStepFromEvent(event,-1)); | ||
| return; | ||
| }, | ||
|
|
||
| if (!min) { | ||
| return; | ||
| // Function to handle changing values by incrementing with the mouse | ||
| onMouseDown(e, inputRef){ | ||
| if(!this.dragActive && inputRef && e.pageY){ | ||
| this.dragActive = true; | ||
| this.dragInputRef = inputRef; | ||
| this.dragStart = e.pageY; | ||
| this.dragValue = parseInt(inputRef.value, 10); | ||
| } | ||
| }, | ||
| onMouseUp(e){ | ||
| if(this.dragActive && this.dragInputRef && e.pageY){ | ||
| // Get value | ||
| this.dragAmount = this.dragStart - e.pageY; | ||
|
|
||
| let value = parseInt(input.value, 10); | ||
| let step = 1; | ||
| // Apply color to store | ||
| this.dragInputRef.value = this.dragValue; // Needs to be reset so increment works. Note: Creates a lag in the value change. | ||
| if(this.dragInputRef && this.dragAmount!==0) this.incrementInput(this.dragInputRef, this.dragAmount); | ||
|
|
||
| if (event.metaKey) { | ||
| step = 10; | ||
| // Reset | ||
| this.dragActive = false; | ||
| this.dragAmount = 0; | ||
| this.dragInputRef = null; | ||
| this.dragValue = null; | ||
| } | ||
|
|
||
| value = Math.max(min, value - step); | ||
| }, | ||
| onMouseDrag(e){ | ||
| if(this.dragActive && this.dragInputRef && e.pageY){ | ||
|
|
||
| // Calc value | ||
| const max = this.dragInputRef.getAttribute('max'); | ||
| if (!max) return; | ||
| this.dragAmount = this.dragStart - e.pageY; | ||
| let newValue = Math.min(this.dragValue + this.dragAmount, max); | ||
| if (newValue < 0) newValue = 0; | ||
|
|
||
| // Visually change the value without changing the store | ||
| this.dragInputRef.value = newValue; | ||
|
|
||
| if (value < 0) { | ||
| value = 0; | ||
| } | ||
|
|
||
| this.store(value, input); | ||
| } | ||
| }, | ||
| } | ||
| }; |