diff --git a/src/DAT/GUI/ControllerNumber.js b/src/DAT/GUI/ControllerNumber.js index 61a5c77..84026f1 100644 --- a/src/DAT/GUI/ControllerNumber.js +++ b/src/DAT/GUI/ControllerNumber.js @@ -95,7 +95,7 @@ DAT.GUI.ControllerNumber = function() { var slider; var addSlider = function() { - slider = new DAT.GUI.Slider(_this, min, max, step, _this.getValue()); + slider = new DAT.GUI.ControllerNumberSlider(_this, min, max, step, _this.getValue()); _this.domElement.appendChild(slider.domElement); }; diff --git a/src/DAT/GUI/ControllerNumberSlider.js b/src/DAT/GUI/ControllerNumberSlider.js new file mode 100644 index 0000000..d5521d2 --- /dev/null +++ b/src/DAT/GUI/ControllerNumberSlider.js @@ -0,0 +1,64 @@ +DAT.GUI.ControllerNumberSlider = function(numberController, min, max, step, initValue) { + + var clicked = false; + var _this = this; + + var x, px; + + this.domElement = document.createElement('div'); + this.domElement.setAttribute('class', 'guidat-slider-bg'); + + this.fg = document.createElement('div'); + this.fg.setAttribute('class', 'guidat-slider-fg'); + + this.domElement.appendChild(this.fg); + + var onDrag = function(e) { + if (!clicked) return; + var pos = findPos(_this.domElement); + var val = DAT.GUI.map(e.pageX, pos[0], pos[0] + _this.domElement + .offsetWidth, numberController.getMin(), numberController.getMax()); + val = Math.round(val / numberController.getStep()) * numberController + .getStep(); + numberController.setValue(val); + }; + + this.domElement.addEventListener('mousedown', function(e) { + clicked = true; + x = px = e.pageX; + DAT.GUI.addClass(numberController.domElement, 'active'); + onDrag(e); + document.addEventListener('mouseup', mouseup, false); + }, false); + + var mouseup = function(e) { + DAT.GUI.removeClass(numberController.domElement, 'active'); + clicked = false; + if (numberController.finishChangeFunction != null) { + numberController.finishChangeFunction.call(this, + numberController.getValue()); + } + document.removeEventListener('mouseup', mouseup, false); + }; + + var findPos = function(obj) { + var curleft = 0, curtop = 0; + if (obj.offsetParent) { + do { + curleft += obj.offsetLeft; + curtop += obj.offsetTop; + } while ((obj = obj.offsetParent)); + return [curleft,curtop]; + } + }; + + this.__defineSetter__('value', function(e) { + this.fg.style.width = DAT.GUI.map(e, numberController.getMin(), + numberController.getMax(), 0, 100) + "%"; + }); + + document.addEventListener('mousemove', onDrag, false); + + this.value = initValue; + +}; \ No newline at end of file diff --git a/src/DAT/GUI/Slider.js b/src/DAT/GUI/Slider.js index e8df2ae..112c431 100644 --- a/src/DAT/GUI/Slider.js +++ b/src/DAT/GUI/Slider.js @@ -1,4 +1,5 @@ -DAT.GUI.Slider = function(numberController, min, max, step, initValue) { +// Standalone GUI element +DAT.GUI.Slider = function(object, property, min, max, step) { var clicked = false; var _this = this; @@ -16,28 +17,21 @@ DAT.GUI.Slider = function(numberController, min, max, step, initValue) { var onDrag = function(e) { if (!clicked) return; var pos = findPos(_this.domElement); - var val = DAT.GUI.map(e.pageX, pos[0], pos[0] + _this.domElement - .offsetWidth, numberController.getMin(), numberController.getMax()); - val = Math.round(val / numberController.getStep()) * numberController - .getStep(); - numberController.setValue(val); + var val = map(e.pageX, pos[0], pos[0] + _this.domElement + .offsetWidth, getMin(), getMax()); + val = Math.round(val / getStep()) * getStep(); + setValue(val); }; this.domElement.addEventListener('mousedown', function(e) { clicked = true; x = px = e.pageX; - DAT.GUI.addClass(numberController.domElement, 'active'); onDrag(e); document.addEventListener('mouseup', mouseup, false); }, false); var mouseup = function(e) { - DAT.GUI.removeClass(numberController.domElement, 'active'); clicked = false; - if (numberController.finishChangeFunction != null) { - numberController.finishChangeFunction.call(this, - numberController.getValue()); - } document.removeEventListener('mouseup', mouseup, false); }; @@ -52,13 +46,59 @@ DAT.GUI.Slider = function(numberController, min, max, step, initValue) { } }; + // Overridden methods + var map = function(v, i1, i2, o1, o2) { + return o1 + (o2 - o1) * ((v - i1) / (i2 - i1)); + }; + + var getMin = function() { + return min; + }; + + var getMax = function() { + return max; + }; + + var getStep = function() { + return step; + }; + + var setValue = function(val) { + + val = parseFloat(val); + + if (min != undefined && val <= min) { + val = min; + } else if (max != undefined && val >= max) { + val = max; + } + + object[propertyName] = val; + _this.value = getValue(); + }; + + var getValue = function() { + return object[propertyName]; + }; + + // Public methods + this.min = function(n) { + min = n; + }; + this.max = function(n) { + max = n; + }; + this.step = function(n) }{ + step = n; + }; + this.__defineSetter__('value', function(e) { - this.fg.style.width = DAT.GUI.map(e, numberController.getMin(), - numberController.getMax(), 0, 100) + "%"; + this.fg.style.width = DAT.GUI.map(e, getMin(), + getMax(), 0, 100) + "%"; }); document.addEventListener('mousemove', onDrag, false); - this.value = initValue; + this.value = getValue(); };