library-mirrors/dat.gui
1
0
Fork 0
mirror of https://github.com/dataarts/dat.gui.git synced 2024-12-12 04:08:27 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

abstracting slider to be a standalone gui. Slider->ControllerNumberSlider.js and needs to extend Slider and add dependency to build script.

Browse Source
This commit is contained in:
Jono Brandel 2011-04-19 13:48:04 -07:00
parent 5cf2b71ae2
commit 4bc98f5d97
3 changed files with 120 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/DAT/GUI/ControllerNumber.js
View File

@ -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);
};

64
src/DAT/GUI/ControllerNumberSlider.js Normal file
View File

@ -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;
};

70
src/DAT/GUI/Slider.js
View File

@ -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();
};