From ad26e4835a30fb58abba41e0cee53745266ec13c Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Tue, 25 Jan 2011 15:10:40 -0700 Subject: [PATCH 1/2] Fixed constraints on slider and made fixes to css --- controllers/controller.number.js | 9 ++++++--- controllers/slider.js | 14 ++++++++++---- demo.css | 1 - gui.css | 23 +++++++++++++++-------- index.html | 6 +++--- 5 files changed, 34 insertions(+), 19 deletions(-) diff --git a/controllers/controller.number.js b/controllers/controller.number.js index 933e60f..d9e45e6 100644 --- a/controllers/controller.number.js +++ b/controllers/controller.number.js @@ -8,8 +8,9 @@ var NumberController = function() { var _this = this; // If we simply click and release a number field, we want to highlight it. - // This variable keeps track of whether or not we've draggedNumberField. + // This variable keeps track of whether or not we've dragged var draggedNumberField = false; + var clickedNumberField = false; var y = py = 0; @@ -99,6 +100,8 @@ var NumberController = function() { var dy = py - y; var newVal = _this.getValue() + dy*step; _this.updateValue(newVal); + + console.log(newVal); return false; } @@ -106,9 +109,9 @@ var NumberController = function() { val = parseFloat(val); - if (min && val <= min) { + if (min != undefined && val <= min) { val = min; - } else if (max && val >= max) { + } else if (max != undefined && val >= max) { val = max; } _this.setValue(val); diff --git a/controllers/slider.js b/controllers/slider.js index b3f21a8..b495547 100644 --- a/controllers/slider.js +++ b/controllers/slider.js @@ -13,15 +13,17 @@ var Slider = function(numberController, min, max, step, initValue) { var x, px; this.domElement = document.createElement('div'); - this.domElement.setAttribute('class', 'guidat-slider-bg'); - this.fg = document.createElement('div'); + this.domElement.setAttribute('class', 'guidat-slider-bg'); this.fg.setAttribute('class', 'guidat-slider-fg'); this.domElement.appendChild(this.fg); var map = function(v, i1, i2, o1, o2) { - return o1 + (o2 - o1) * ((v - i1) / (i2 - i1)); + var v = o1 + (o2 - o1) * ((v - i1) / (i2 - i1)); + if (v < o1) v = o1; + else if (v > o2) v = o2; + return v; } var findPos = function(obj) { @@ -53,11 +55,15 @@ var Slider = function(numberController, min, max, step, initValue) { this.domElement.addEventListener('mousedown', function(e) { clicked = true; x = px = e.pageX; + _this.domElement.setAttribute('class', 'guidat-slider-bg active'); + _this.fg.setAttribute('class', 'guidat-slider-fg active'); onDrag(e); }, false); - this.domElement.addEventListener('mouseup', function(e) { + document.addEventListener('mouseup', function(e) { + _this.domElement.setAttribute('class', 'guidat-slider-bg'); + _this.fg.setAttribute('class', 'guidat-slider-fg'); clicked = false; }, false); diff --git a/demo.css b/demo.css index ebdad16..1ebee73 100644 --- a/demo.css +++ b/demo.css @@ -18,7 +18,6 @@ h1 { font-weight: 900; text-transform: lowercase; line-height: 80px; - text-shadow: 2px 2px 2px #ccc; margin: 20px 0 20px 0; } diff --git a/gui.css b/gui.css index 2b95151..12a86cb 100644 --- a/gui.css +++ b/gui.css @@ -1,12 +1,12 @@ #guidat { color: #fff; position: fixed; - width: 320px; + width: 280px; z-index: 200; opacity: 0.97; top: 0; left: 100%; - margin-left: -340px; + margin-left: -300px; background-color: #fff; -moz-transition: margin-top .2s ease-out; -webkit-transition: margin-top .2s ease-out; @@ -85,7 +85,7 @@ border: 0; color: #1ed36f; margin-right: 2px; -width: 170px; +width: 53%; } .guidat-controller.boolean { @@ -103,12 +103,9 @@ width: 170px; color: #00aeff; } -.guidat-controller.number input[type=slider] { - width: 50%; -} - #guidat .guidat-controller.boolean input { margin-top: 6px; + margin-right: 2px; font-size: 20px; } @@ -126,10 +123,20 @@ width: 170px; display: inline-block; } + +.guidat-slider-bg:hover { +background-color: #444; +} + +.guidat-slider-bg:hover +.guidat-slider-fg { +background-color: #52c8ff; +} + .guidat-slider-bg { background-color: #222; cursor: ew-resize; - width: 130px; +width: 40%; margin-top: 2px; float: right; height: 21px; diff --git a/index.html b/index.html index 581c2d6..cbec712 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ { numberProperty: 20, constrainedNum: 0, - notchedNum: 240, + notchedNum: 200, textProperty: "a string", anotherTextProperty: "another string", booleanProperty: false, @@ -43,7 +43,7 @@ GUI.add(controllableObject, "constrainedNum", -100, 100) // Creates a slider with notches - GUI.add(controllableObject, "notchedNum", 0, 800, 20) + GUI.add(controllableObject, "notchedNum", 0, 800, 100) // Creates a text field GUI.add(controllableObject, "textProperty"); @@ -89,7 +89,7 @@ window.onload = function() { GUI.add(controllableObject, "constrainedNum", -100, 100) // Creates a slider with notches - GUI.add(controllableObject, "notchedNum", 0, 800, 20) + GUI.add(controllableObject, "notchedNum", 0, 800, 100) // Creates a text field GUI.add(controllableObject, "textProperty"); From 091a01bbaac360b8eabc2e98f366bef971687a30 Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Tue, 25 Jan 2011 15:24:35 -0700 Subject: [PATCH 2/2] CSS3 hover transitions --- controllers/controller.number.js | 2 -- gui.css | 16 +++++++++++++--- 2 files changed, 13 insertions(+), 5 deletions(-) diff --git a/controllers/controller.number.js b/controllers/controller.number.js index d9e45e6..169546b 100644 --- a/controllers/controller.number.js +++ b/controllers/controller.number.js @@ -100,8 +100,6 @@ var NumberController = function() { var dy = py - y; var newVal = _this.getValue() + dy*step; _this.updateValue(newVal); - - console.log(newVal); return false; } diff --git a/gui.css b/gui.css index 12a86cb..005ec90 100644 --- a/gui.css +++ b/gui.css @@ -51,6 +51,15 @@ background-color: #111; } +.guidat-controller, +.guidat-controller input, +.guidat-slider-bg, +.guidat-slider-fg { + -moz-transition: background-color 0.15s linear; + -webkit-transition: background-color 0.15s linear; + transition: background-color 0.15s linear; +} + .guidat-controller.boolean:hover, .guidat-controller.function:hover { background-color: #000; @@ -124,12 +133,13 @@ width: 53%; } -.guidat-slider-bg:hover { +.guidat-slider-bg:hover, +.guidat-slider-bg.active { background-color: #444; } -.guidat-slider-bg:hover -.guidat-slider-fg { +.guidat-slider-bg:hover .guidat-slider-fg, +.guidat-slider-bg.active .guidat-slider-fg { background-color: #52c8ff; }