all files / src/domUtil/ range-change.ts

18.87% Statements 10/53
0% Branches 0/22
0% Functions 0/10
18.87% Lines 10/53
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147                                                                                                                                                                                                                                                                                  
import provide from '../util/provide';
import $ = require('jquery');
 
const nm = provide('domUtil');
 
let mouseIn = false;
let mouseDown = false;
let timeout = null;
let dragged = false;
let lastVal;
 
 
/**
 * callback on range change interaction, context of this is the firing dom element
 * @callback rangeChangeCallback
 * @param {number} newValue
 * @param {number} ratio value from 0 to 1 relative of the value to the min and max
 * @param {object} evt
 */
 
/***
 * callback funcion after the slider has been moved
 */
export interface rangeChangedCallback{
    /**
     *
     * @param newValue new value of the slider
     * @param ratio ratio from low to high, 0 to 1
     * @param evt the original event
     */
    (newValue: number, ratio: number, evt: Event): any
}
 
 
/**
 * Created by gavorhes on 11/2/2015.
 */
 
function triggerCallback(callback: rangeChangedCallback, evt) {
    "use strict";
 
    let val = parseFloat(this.value);
    let min = parseFloat(this.min);
    let max = parseFloat(this.max);
    let step = parseFloat(this.step);
 
    if (max - val < step){
        val = max;
    }
 
    let percent =  (val - min) / (max - min);
 
    if (typeof lastVal == 'number' && val ==  lastVal){
        return;
    }
    lastVal = val;
    callback(val, percent, evt);
}
 
 
 
/**
 * Add a variety of listeners for range inputs applied to a common callback
 * @param  $slider - jquery reference to the slider
 * @param {rangeChangeCallback} callback - the callback
 * @param {number} [changeTimeout=75] before the callback is called
 * @this {jQuery}
 * @returns {jQuery} the jQuery object
 */
export function rangeChange ($slider: JQuery, callback: rangeChangedCallback, changeTimeout: number) {
 
    changeTimeout = typeof  changeTimeout == 'number' ? changeTimeout : 75;
 
    $slider.mouseenter(function () {
        mouseIn = true;
    });
 
    $slider.mouseleave(function () {
        mouseIn = false;
        mouseDown = false;
    });
 
    $slider.mousedown(function () {
        mouseDown = true;
    });
 
    $slider.mouseup(function () {
        mouseDown = false;
    });
 
    $slider.mousemove(
        /**
         *
         * @param {object} evt - event properties
         * @this {HTMLElement}
         */
        function (evt) {
        if (!(mouseIn && mouseDown)) {
            return;
        }
 
        dragged = true;
 
        if (lastVal == this['value']) {
            return;
        }
        lastVal = this['value'];
 
        if (timeout != null) {
            clearTimeout(timeout);
        }
 
        let _this = this;
 
        timeout = setTimeout(function () {
            triggerCallback.call(_this, callback, evt);
            timeout = null;
 
        }, changeTimeout);
    });
 
    $slider.keyup(
        /**
         *
         * @param {object} evt - event properties
         */
        function (evt) {
        if (evt.keyCode == 37 || evt.keyCode == 39) {
            triggerCallback.call(this, callback, evt);
        }
    });
 
    $slider.change(function (evt) {
        if (dragged) {
            dragged = false;
 
            return;
        }
        triggerCallback.call(this, callback, evt);
    });
 
    return this;
}
 
nm.rangeChange = rangeChange;