overte/scripts/system/html/js/draggableNumber.js

//  draggableNumber.js
//
//  Created by David Back on 7 Nov 2018
//  Copyright 2018 High Fidelity, Inc.
//
//  Distributed under the Apache License, Version 2.0.
//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html

const DELTA_X_FOCUS_THRESHOLD = 1;
const ENTER_KEY = 13;

function DraggableNumber(min, max, step, decimals, dragStart, dragEnd) {
    this.min = min;
    this.max = max;
    this.step = step !== undefined ? step : 1;
    this.multiDiffModeEnabled = false;
    this.decimals = decimals;
    this.dragStartFunction = dragStart;
    this.dragEndFunction = dragEnd;
    this.dragging = false;
    this.initialMouseEvent = null;
    this.lastMouseEvent = null;
    this.valueChangeFunction = null;
    this.multiDiffStepFunction = null;
    this.initialize();
}

DraggableNumber.prototype = {
    showInput: function() {
        this.elText.style.visibility = "hidden";
        this.elLeftArrow.style.visibility = "hidden";
        this.elRightArrow.style.visibility = "hidden";
        this.elInput.style.opacity = 1;
    },

    hideInput: function() {
        this.elText.style.visibility = "visible";
        this.elLeftArrow.style.visibility = "visible";
        this.elRightArrow.style.visibility = "visible";
        this.elInput.style.opacity = 0;
    },

    mouseDown: function(event) {
        if (event.target === this.elText && !this.isDisabled()) {
            this.initialMouseEvent = event;
            this.lastMouseEvent = event;
            document.addEventListener("mousemove", this.onDocumentMouseMove);
            document.addEventListener("mouseup", this.onDocumentMouseUp);
        }
    },
    
    mouseUp: function(event) {
        if (!this.dragging && event.target === this.elText && this.initialMouseEvent) {
            let dx = event.clientX - this.initialMouseEvent.clientX;
            if (Math.abs(dx) <= DELTA_X_FOCUS_THRESHOLD) {
                this.showInput();
                this.elInput.focus();
            }
            this.initialMouseEvent = null;
        }
    },
    
    documentMouseMove: function(event) {
        if (!this.dragging && this.initialMouseEvent) {
            let dxFromInitial = event.clientX - this.initialMouseEvent.clientX;
            if (Math.abs(dxFromInitial) > DELTA_X_FOCUS_THRESHOLD) {
                if (this.dragStartFunction) {
                    this.dragStartFunction();
                }
                this.dragging = true;
            }
            this.lastMouseEvent = event;
        }
        if (this.dragging && this.lastMouseEvent) {
            let dragDelta = event.clientX - this.lastMouseEvent.clientX;
            if (dragDelta !== 0) {
                if (this.multiDiffModeEnabled) {
                    if (this.multiDiffStepFunction) {
                        this.multiDiffStepFunction(dragDelta * this.step);
                    }
                } else {
                    if (dragDelta > 0) {
                        this.elInput.stepUp(dragDelta);
                    } else {
                        this.elInput.stepDown(-dragDelta);
                    }
                    this.inputChange();
                    if (this.valueChangeFunction) {
                        this.valueChangeFunction();
                    }
                }
            }
            this.lastMouseEvent = event;
        }
    },
    
    documentMouseUp: function(event) {
        if (this.dragging) {
            if (this.dragEndFunction) {
                this.dragEndFunction();
            }
            this.dragging = false;
        }
        this.lastMouseEvent = null;
        document.removeEventListener("mousemove", this.onDocumentMouseMove);
        document.removeEventListener("mouseup", this.onDocumentMouseUp);
    },
    
    stepUp: function() {
        if (!this.isDisabled()) {
            if (this.multiDiffModeEnabled) {
                if (this.multiDiffStepFunction) {
                    this.multiDiffStepFunction(this.step, true);
                }
            } else {
                this.elInput.value = parseFloat(this.elInput.value) + this.step;
                this.inputChange();
                if (this.valueChangeFunction) {
                    this.valueChangeFunction();
                }
            }
        }
    },
    
    stepDown: function() {
        if (!this.isDisabled()) {
            if (this.multiDiffModeEnabled) {
                if (this.multiDiffStepFunction) {
                    this.multiDiffStepFunction(-this.step, true);
                }
            } else {
                this.elInput.value = parseFloat(this.elInput.value) - this.step;
                this.inputChange();
                if (this.valueChangeFunction) {
                    this.valueChangeFunction();
                }
            }
        }
    },
    
    setValue: function(newValue, isMultiDiff) {
        if (isMultiDiff !== undefined) {
            this.setMultiDiff(isMultiDiff);
        }

        if (isNaN(newValue)) {
            console.error("DraggableNumber.setValue() > " + newValue + " is not a number.");
            return;
        }

        if (newValue !== "" && this.decimals !== undefined) {
            this.elInput.value = parseFloat(newValue).toFixed(this.decimals);
        } else {
            this.elInput.value = newValue;
        }
        this.elText.firstChild.data = this.elInput.value;
    },

    setMultiDiff: function(isMultiDiff) {
        this.multiDiffModeEnabled = isMultiDiff;
        if (isMultiDiff) {
            this.elDiv.classList.add('multi-diff');
        } else {
            this.elDiv.classList.remove('multi-diff');
        }
    },

    setValueChangeFunction: function(valueChangeFunction) {
        this.valueChangeFunction = valueChangeFunction.bind(this.elInput);
        this.elInput.addEventListener("change", this.valueChangeFunction);
    },

    setMultiDiffStepFunction: function (multiDiffStepFunction) {
        this.multiDiffStepFunction = multiDiffStepFunction;
    },

    inputChange: function() {
        let value = this.elInput.value;
        if (this.max !== undefined) {
            value = Math.min(this.max, value);
        }
        if (this.min !== undefined) {
            value = Math.max(this.min, value);
        }
        this.setValue(value);
    },
    
    inputBlur: function(ev) {
        this.hideInput();
    },

    keyPress: function(event) {
        if (event.keyCode === ENTER_KEY) {
            if (this.valueChangeFunction) {
                this.valueChangeFunction();
            }
            this.inputBlur();
        }
    },
    
    isDisabled: function() {
        return this.elText.getAttribute("disabled") === "disabled";
    },
    
    updateMinMax: function(min, max) {
        this.min = min;
        this.max = max;
        if (this.min !== undefined) {
            this.elInput.setAttribute("min", this.min);
        }
        if (this.max !== undefined) {
            this.elInput.setAttribute("max", this.max);
        }
    },
    
    initialize: function() {
        this.onMouseDown = this.mouseDown.bind(this);
        this.onMouseUp = this.mouseUp.bind(this);
        this.onDocumentMouseMove = this.documentMouseMove.bind(this);
        this.onDocumentMouseUp = this.documentMouseUp.bind(this);
        this.onStepUp = this.stepUp.bind(this);
        this.onStepDown = this.stepDown.bind(this);
        this.onInputChange = this.inputChange.bind(this);
        this.onInputBlur = this.inputBlur.bind(this);
        this.onKeyPress = this.keyPress.bind(this);
        
        this.elDiv = document.createElement('div');
        this.elDiv.className = "draggable-number";
        
        this.elText = document.createElement('span');
        this.elText.className = "text";
        this.elText.innerText = " ";
        this.elText.style.visibility = "visible";
        this.elText.addEventListener("mousedown", this.onMouseDown);
        this.elText.addEventListener("mouseup", this.onMouseUp);
        
        this.elLeftArrow = document.createElement('span');
        this.elRightArrow = document.createElement('span');
        this.elLeftArrow.className = 'left-arrow';
        this.elLeftArrow.innerHTML = 'D';
        this.elLeftArrow.addEventListener("click", this.onStepDown);
        this.elRightArrow.className = 'right-arrow';
        this.elRightArrow.innerHTML = 'D';
        this.elRightArrow.addEventListener("click", this.onStepUp);

        this.elMultiDiff = document.createElement('span');
        this.elMultiDiff.className = 'multi-diff';

        this.elInput = document.createElement('input');
        this.elInput.className = "input";
        this.elInput.setAttribute("type", "number");
        this.updateMinMax(this.min, this.max);
        if (this.step !== undefined) {
            this.elInput.setAttribute("step", this.step);
        }
        this.elInput.style.opacity = 0;
        this.elInput.addEventListener("change", this.onInputChange);
        this.elInput.addEventListener("blur", this.onInputBlur);
        this.elInput.addEventListener("keypress", this.onKeyPress);
        this.elInput.addEventListener("focus", this.showInput.bind(this));
        
        this.elDiv.appendChild(this.elLeftArrow);
        this.elDiv.appendChild(this.elText);
        this.elDiv.appendChild(this.elInput);
        this.elDiv.appendChild(this.elMultiDiff);
        this.elDiv.appendChild(this.elRightArrow);
    }
};