diff --git a/controllers/controller.number.js b/controllers/controller.number.js
index 0e828ce..933e60f 100644
--- a/controllers/controller.number.js
+++ b/controllers/controller.number.js
@@ -39,15 +39,15 @@ var NumberController = function() {
var slider;
- if (min && max) {
- slider = new Slider();
+ if (min != undefined && max != undefined) {
+ slider = new Slider(this, min, max, step, this.getValue());
this.domElement.appendChild(slider.domElement);
}
numberField.addEventListener('blur', function(e) {
var val = parseFloat(this.value);
if (!isNaN(val)) {
- updateValue(val);
+ _this.updateValue(val);
} else {
this.value = _this.getValue();
}
@@ -55,7 +55,7 @@ var NumberController = function() {
numberField.addEventListener('mousewheel', function(e) {
e.preventDefault();
- updateValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
+ this.updateValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step);
return false;
}, false);
@@ -77,7 +77,8 @@ var NumberController = function() {
clickedNumberField = false;
}, false);
- if(navigator.appVersion.indexOf('chrome') != -1) {
+ // Kinda nast
+ if (navigator.appVersion.indexOf('chrome') != -1) {
document.addEventListener('mouseout', function(e) {
document.removeEventListener('mousemove', dragNumberField, false);
}, false);
@@ -97,11 +98,11 @@ var NumberController = function() {
y = e.pageY;
var dy = py - y;
var newVal = _this.getValue() + dy*step;
- updateValue(newVal);
+ _this.updateValue(newVal);
return false;
}
- var updateValue = function(val) {
+ this.updateValue = function(val) {
val = parseFloat(val);
diff --git a/controllers/slider.js b/controllers/slider.js
index 76bedb7..b3f21a8 100644
--- a/controllers/slider.js
+++ b/controllers/slider.js
@@ -1,4 +1,16 @@
-var Slider = function() {
+// TODO: Leaving the window while dragging the slider and then removing the mouse
+// still leaves slider in focus.
+// TODO: Problem with multiple sliders.
+var Slider = function(numberController, min, max, step, initValue) {
+
+ var min = min;
+ var max = max;
+ var step = step;
+
+ var clicked = false;
+ var _this = this;
+
+ var x, px;
this.domElement = document.createElement('div');
this.domElement.setAttribute('class', 'guidat-slider-bg');
@@ -8,4 +20,52 @@ var Slider = function() {
this.domElement.appendChild(this.fg);
+ var map = function(v, i1, i2, o1, o2) {
+ return o1 + (o2 - o1) * ((v - i1) / (i2 - i1));
+ }
+
+ var findPos = function(obj) {
+ var curleft = curtop = 0;
+ if (obj.offsetParent) {
+ do {
+ curleft += obj.offsetLeft;
+ curtop += obj.offsetTop;
+ } while (obj = obj.offsetParent);
+ return [curleft,curtop];
+ }
+ }
+
+ this.__defineSetter__('value', function(e) {
+
+ var pct = map(e, min, max, 0, 100);
+ this.fg.style.width = pct+"%";
+
+ });
+
+ var onDrag = function(e) {
+ if (!clicked) return;
+ var pos = findPos(_this.domElement);
+ var val = map(e.pageX, pos[0], pos[0] + _this.domElement.offsetWidth, min, max);
+ val = Math.round(val/step)*step;
+ numberController.updateValue(val);
+ }
+
+ this.domElement.addEventListener('mousedown', function(e) {
+ clicked = true;
+ x = px = e.pageX;
+ onDrag(e);
+ }, false);
+
+
+ this.domElement.addEventListener('mouseup', function(e) {
+ clicked = false;
+ }, false);
+
+ document.addEventListener('mousemove', onDrag, false);
+
+
+
+
+ this.value = initValue;
+
}
\ No newline at end of file
diff --git a/gui.css b/gui.css
index a8a3680..2b95151 100644
--- a/gui.css
+++ b/gui.css
@@ -3,7 +3,7 @@
position: fixed;
width: 320px;
z-index: 200;
- opacity: 0.95;
+ opacity: 0.97;
top: 0;
left: 100%;
margin-left: -340px;
@@ -65,13 +65,10 @@
background-color: #222;
}
-.guidat-controller input::selection {
-background-color: #000;
-}
-
.guidat-controller input:hover {
background-color: #444;
}
+
.guidat-controller input:focus {
background-color: #555;
}
@@ -87,7 +84,8 @@ background-color: #000;
.guidat-controller.string input {
border: 0;
color: #1ed36f;
- margin-right: 1px;
+ margin-right: 2px;
+width: 170px;
}
.guidat-controller.boolean {
@@ -100,7 +98,7 @@ background-color: #000;
.guidat-controller.number input[type=text] {
width: 35px;
- margin-left: 10px;
+ margin-left: 5px;
margin-right: 2px;
color: #00aeff;
}
@@ -116,9 +114,9 @@ background-color: #000;
.guidat-controller:last-child {
border-bottom: none;
- -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
- -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
- box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
+ -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
+ -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
+ box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}
.guidat-propertyname {
@@ -126,4 +124,18 @@ background-color: #000;
padding-top: 7px;
cursor: default;
display: inline-block;
+}
+
+.guidat-slider-bg {
+ background-color: #222;
+ cursor: ew-resize;
+ width: 130px;
+ margin-top: 2px;
+ float: right;
+ height: 21px;
+}
+
+.guidat-slider-fg {
+ background-color: #00aeff;
+ height: 20px;
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 7f6235b..278a029 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,7 @@
{
numberProperty: 20,
constrainedNum: 0,
+ notchedNum: 240,
textProperty: "a string",
anotherTextProperty: "another string",
booleanProperty: false,
@@ -40,6 +41,9 @@
// Creates a slider (min, max)
GUI.add(controllableObject, "constrainedNum", -100, 100)
+
+ // Creates a slider with notches
+ GUI.add(controllableObject, "notchedNum", 0, 800, 20)
// Creates a text field
GUI.add(controllableObject, "textProperty");
@@ -58,13 +62,16 @@
var controllableObject =
{
- numberProperty: 20,
- constrainedNum: 0,
- textProperty: "a string",
- booleanProperty: false,
- functionProperty: function() {
- alert("I am a function!");
- }
+ numberProperty: 20,
+ constrainedNum: 0,
+ notchedNum: 240,
+ textProperty: "a string",
+ anotherTextProperty: "another string",
+ booleanProperty: false,
+ anotherBooleanProperty: false,
+ functionProperty: function() {
+ alert("I am a function!");
+ }
};
window.onload = function() {
@@ -75,7 +82,10 @@ window.onload = function() {
GUI.add(controllableObject, "numberProperty");
// Creates a slider (min, max)
- GUI.add(controllableObject, "constrainedNum", -100, 100, 0);
+ GUI.add(controllableObject, "constrainedNum", -100, 100)
+
+ // Creates a slider with notches
+ GUI.add(controllableObject, "notchedNum", 0, 800, 20)
// Creates a text field
GUI.add(controllableObject, "textProperty");
@@ -90,7 +100,7 @@ window.onload = function() {
};