From 92a13fd869b2094e3ae371019fdfa5789f01008d Mon Sep 17 00:00:00 2001 From: George Michael Brower Date: Mon, 18 Apr 2011 12:06:19 -0700 Subject: [PATCH] Changed tabs to two spaces. Happy? --- demo/demo.js | 406 +++++++++++++++++----------------- src/controllers/boolean.js | 79 +++---- src/controllers/controller.js | 113 +++++----- src/controllers/function.js | 51 ++--- src/controllers/number.js | 278 +++++++++++------------ src/controllers/slider.js | 108 ++++----- src/controllers/string.js | 62 +++--- 7 files changed, 550 insertions(+), 547 deletions(-) diff --git a/demo/demo.js b/demo/demo.js index 72f4c7a..de2585e 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -1,227 +1,227 @@ function FizzyText(message) { - var that = this; + var that = this; - // These are the variables that we manipulate with gui-dat. - // Notice they're all defined with "this". That makes them public. - // Otherwise, gui-dat can't see them. + // These are the variables that we manipulate with gui-dat. + // Notice they're all defined with "this". That makes them public. + // Otherwise, gui-dat can't see them. - this.growthSpeed = 0.5; // how fast do particles change size? - this.maxSize = 3.2; // how big can they get? - this.noiseStrength = 10; // how turbulent is the flow? - this.speed = 0.4; // how fast do particles move? - this.displayOutline = false; // should we draw the message as a stroke? - this.framesRendered = 0; + this.growthSpeed = 0.5; // how fast do particles change size? + this.maxSize = 3.2; // how big can they get? + this.noiseStrength = 10; // how turbulent is the flow? + this.speed = 0.4; // how fast do particles move? + this.displayOutline = true; // should we draw the message as a stroke? + this.framesRendered = 0; - // __defineGetter__ and __defineSetter__ makes JavaScript believe that - // we've defined a variable 'this.message'. This way, whenever we - // change the message variable, we can call some more functions. - - this.__defineGetter__("message", function () { - return message; - }); + // __defineGetter__ and __defineSetter__ makes JavaScript believe that + // we've defined a variable 'this.message'. This way, whenever we + // change the message variable, we can call some more functions. - this.__defineSetter__("message", function (m) { - message = m; - createBitmap(message); - }); + this.__defineGetter__("message", function () { + return message; + }); - // We can even add functions to the DAT.GUI! As long as they have - // 0 arguments, we can call them from the dat-gui panel. - - this.explode = function() { - var mag = Math.random()*30+30; - for (var i in particles) { - var angle= Math.random()*Math.PI*2; - particles[i].vx = Math.cos(angle)*mag; - particles[i].vy = Math.sin(angle)*mag; - } - }; + this.__defineSetter__("message", function (m) { + message = m; + createBitmap(message); + }); - //////////////////////////////////////////////////////////////// + // We can even add functions to the DAT.GUI! As long as they have + // 0 arguments, we can call them from the dat-gui panel. - var _this = this; + this.explode = function() { + var mag = Math.random() * 30 + 30; + for (var i in particles) { + var angle = Math.random() * Math.PI * 2; + particles[i].vx = Math.cos(angle) * mag; + particles[i].vy = Math.sin(angle) * mag; + } + }; - var width = 550; - var height = 200; - var textAscent = 101; - var textOffsetLeft = 80; - var noiseScale = 300; - var frameTime = 30; - - var colors = ["#00aeff", "#0fa954", "#54396e", "#e61d5f"]; - - // This is the context we use to get a bitmap of text using - // the getImageData function. - var r = document.createElement('canvas'); - var s = r.getContext('2d'); + //////////////////////////////////////////////////////////////// - // This is the context we actually use to draw. - var c = document.createElement('canvas'); - var g = c.getContext('2d'); + var _this = this; - r.setAttribute('width', width); - c.setAttribute('width', width); - r.setAttribute('height', height); - c.setAttribute('height', height); + var width = 550; + var height = 200; + var textAscent = 101; + var textOffsetLeft = 80; + var noiseScale = 300; + var frameTime = 30; - // Add our demo to the HTML - document.getElementById('helvetica-demo').appendChild(c); + var colors = ["#00aeff", "#0fa954", "#54396e", "#e61d5f"]; - // Stores bitmap image - var pixels = []; - - // Stores a list of particles - var particles = []; + // This is the context we use to get a bitmap of text using + // the getImageData function. + var r = document.createElement('canvas'); + var s = r.getContext('2d'); - // Set g.font to the same font as the bitmap canvas, incase we - // want to draw some outlines. - s.font = g.font = "800 82px helvetica, arial, sans-serif"; + // This is the context we actually use to draw. + var c = document.createElement('canvas'); + var g = c.getContext('2d'); - // Instantiate some particles - for (var i = 0; i < 1000; i++) { - particles.push(new Particle(Math.random() * width, Math.random() * height)); + r.setAttribute('width', width); + c.setAttribute('width', width); + r.setAttribute('height', height); + c.setAttribute('height', height); + + // Add our demo to the HTML + document.getElementById('helvetica-demo').appendChild(c); + + // Stores bitmap image + var pixels = []; + + // Stores a list of particles + var particles = []; + + // Set g.font to the same font as the bitmap canvas, incase we + // want to draw some outlines. + s.font = g.font = "800 82px helvetica, arial, sans-serif"; + + // Instantiate some particles + for (var i = 0; i < 1000; i++) { + particles.push(new Particle(Math.random() * width, Math.random() * height)); + } + + // This function creates a bitmap of pixels based on your message + // It's called every time we change the message property. + var createBitmap = function (msg) { + + s.fillStyle = "#fff"; + s.fillRect(0, 0, width, height); + + s.fillStyle = "#222"; + s.fillText(msg, textOffsetLeft, textAscent); + + // Pull reference + var imageData = s.getImageData(0, 0, width, height); + pixels = imageData.data; + + }; + + // Called once per frame, updates the animation. + var render = function () { + + that.framesRendered ++; + + g.clearRect(0, 0, width, height); + + if (_this.displayOutline) { + g.globalCompositeOperation = "source-over"; + g.strokeStyle = "#000"; + g.lineWidth = .5; + g.strokeText(message, textOffsetLeft, textAscent); } - // This function creates a bitmap of pixels based on your message - // It's called every time we change the message property. - var createBitmap = function (msg) { - - s.fillStyle = "#fff"; - s.fillRect(0, 0, width, height); + g.globalCompositeOperation = "darker"; - s.fillStyle = "#222"; - s.fillText(msg, textOffsetLeft, textAscent); - - // Pull reference - var imageData = s.getImageData(0, 0, width, height); - pixels = imageData.data; - - }; - - // Called once per frame, updates the animation. - var render = function () { - - that.framesRendered ++; - - g.clearRect(0, 0, width, height); - - if (_this.displayOutline) { - g.globalCompositeOperation = "source-over"; - g.strokeStyle = "#000"; - g.lineWidth = .5; - g.strokeText(message, textOffsetLeft, textAscent); - } - - g.globalCompositeOperation = "darker"; - - for (var i = 0; i < particles.length; i++) { - g.fillStyle = colors[i % colors.length]; - particles[i].render(); - } - - }; - - // Returns x, y coordinates for a given index in the pixel array. - var getPosition = function (i) { - return { - x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4, - y: Math.floor(i / (width * 4)) - }; - }; - - // Returns a color for a given pixel in the pixel array. - var getColor = function (x, y) { - var base = (Math.floor(y) * width + Math.floor(x)) * 4; - var c = { - r: pixels[base + 0], - g: pixels[base + 1], - b: pixels[base + 2], - a: pixels[base + 3] - }; - - return "rgb(" + c.r + "," + c.g + "," + c.b + ")"; - }; - - // This calls the setter we've defined above, so it also calls - // the createBitmap function. - this.message = message; - - var loop = function() { - // Don't render if we don't see it. - // Would be cleaner if I dynamically acquired the top of the canvas. - if (document.body.scrollTop < height + 20) { - render(); - } + for (var i = 0; i < particles.length; i++) { + g.fillStyle = colors[i % colors.length]; + particles[i].render(); } - - // This calls the render function every 30 milliseconds. - setInterval(loop, frameTime); - // This class is responsible for drawing and moving those little - // colored dots. - function Particle(x, y, c) { - - // Position - this.x = x; - this.y = y; - - // Size of particle - this.r = 0; - - // This velocity is used by the explode function. - this.vx = 0; - this.vy = 0; - - // Called every frame - this.render = function () { - - // What color is the pixel we're sitting on top of? - var c = getColor(this.x, this.y); - - // Where should we move? - var angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength; - - // Are we within the boundaries of the image? - var onScreen = this.x > 0 && this.x < width && - this.y > 0 && this.y < height; - - var isBlack = c != "rgb(255,255,255)" && onScreen; - - // If we're on top of a black pixel, grow. - // If not, shrink. - if (isBlack) { - this.r += _this.growthSpeed; - } else { - this.r -= _this.growthSpeed; - } - - // This velocity is used by the explode function. - this.vx *= 0.5; - this.vy *= 0.5; - - // Change our position based on the flow field and our - // explode velocity. - this.x += Math.cos(angle) * _this.speed + this.vx; - this.y += -Math.sin(angle) * _this.speed + this.vy; - - this.r = DAT.GUI.constrain(this.r, 0, _this.maxSize); - - // If we're tiny, keep moving around until we find a black - // pixel. - if (this.r <= 0) { - this.x = Math.random() * width; - this.y = Math.random() * height; - return; // Don't draw! - } - - // Draw the circle. - g.beginPath(); - g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false); - g.fill(); - - } - + }; + + // Returns x, y coordinates for a given index in the pixel array. + var getPosition = function (i) { + return { + x: (i - (width * 4) * Math.floor(i / (width * 4))) / 4, + y: Math.floor(i / (width * 4)) + }; + }; + + // Returns a color for a given pixel in the pixel array. + var getColor = function (x, y) { + var base = (Math.floor(y) * width + Math.floor(x)) * 4; + var c = { + r: pixels[base + 0], + g: pixels[base + 1], + b: pixels[base + 2], + a: pixels[base + 3] + }; + + return "rgb(" + c.r + "," + c.g + "," + c.b + ")"; + }; + + // This calls the setter we've defined above, so it also calls + // the createBitmap function. + this.message = message; + + var loop = function() { + // Don't render if we don't see it. + // Would be cleaner if I dynamically acquired the top of the canvas. + if (document.body.scrollTop < height + 20) { + render(); } + } + + // This calls the render function every 30 milliseconds. + setInterval(loop, frameTime); + + // This class is responsible for drawing and moving those little + // colored dots. + function Particle(x, y, c) { + + // Position + this.x = x; + this.y = y; + + // Size of particle + this.r = 0; + + // This velocity is used by the explode function. + this.vx = 0; + this.vy = 0; + + // Called every frame + this.render = function () { + + // What color is the pixel we're sitting on top of? + var c = getColor(this.x, this.y); + + // Where should we move? + var angle = noise(this.x / noiseScale, this.y / noiseScale) * _this.noiseStrength; + + // Are we within the boundaries of the image? + var onScreen = this.x > 0 && this.x < width && + this.y > 0 && this.y < height; + + var isBlack = c != "rgb(255,255,255)" && onScreen; + + // If we're on top of a black pixel, grow. + // If not, shrink. + if (isBlack) { + this.r += _this.growthSpeed; + } else { + this.r -= _this.growthSpeed; + } + + // This velocity is used by the explode function. + this.vx *= 0.5; + this.vy *= 0.5; + + // Change our position based on the flow field and our + // explode velocity. + this.x += Math.cos(angle) * _this.speed + this.vx; + this.y += -Math.sin(angle) * _this.speed + this.vy; + + this.r = DAT.GUI.constrain(this.r, 0, _this.maxSize); + + // If we're tiny, keep moving around until we find a black + // pixel. + if (this.r <= 0) { + this.x = Math.random() * width; + this.y = Math.random() * height; + return; // Don't draw! + } + + // Draw the circle. + g.beginPath(); + g.arc(this.x, this.y, this.r, 0, Math.PI * 2, false); + g.fill(); + + } + + } } diff --git a/src/controllers/boolean.js b/src/controllers/boolean.js index d85e35d..9024846 100644 --- a/src/controllers/boolean.js +++ b/src/controllers/boolean.js @@ -1,47 +1,48 @@ DAT.GUI.BooleanController = function() { - this.type = "boolean"; - DAT.GUI.Controller.apply(this, arguments); + this.type = "boolean"; + DAT.GUI.Controller.apply(this, arguments); - var _this = this; - var input = document.createElement('input'); - input.setAttribute('type', 'checkbox'); + var _this = this; + var input = document.createElement('input'); + input.setAttribute('type', 'checkbox'); - if(arguments[3]) { - input.checked = true; - this.setValue(true); - } else { - input.checked = false; - this.setValue(false); + if (arguments[3]) { + input.checked = true; + this.setValue(true); + } else { + input.checked = false; + this.setValue(false); + } + + this.domElement.addEventListener('click', function(e) { + input.checked = !input.checked; + e.preventDefault(); + _this.setValue(input.checked); + }, false); + + input.addEventListener('mouseup', function(e) { + input.checked = !input.checked; // counteracts default. + }, false); + + this.domElement.style.cursor = "pointer"; + this.propertyNameElement.style.cursor = "pointer"; + this.domElement.appendChild(input); + + this.updateDisplay = function() { + input.checked = _this.getValue(); + }; + + + this.setValue = function(val) { + if (typeof val != "boolean") { + try { + val = eval(val); + } catch (e) { + } } - - this.domElement.addEventListener('click', function(e) { - input.checked = !input.checked; - e.preventDefault(); - _this.setValue(input.checked); - }, false); - - input.addEventListener('mouseup', function(e) { - input.checked = !input.checked; // counteracts default. - }, false); - - this.domElement.style.cursor = "pointer"; - this.propertyNameElement.style.cursor = "pointer"; - this.domElement.appendChild(input); - - this.updateDisplay = function() { - input.checked = _this.getValue(); - }; - - - this.setValue = function(val) { - if (typeof val != "boolean") { - try { - val = eval(val); - } catch (e) {} - } - return DAT.GUI.Controller.prototype.setValue.call(this, val); - }; + return DAT.GUI.Controller.prototype.setValue.call(this, val); + }; }; DAT.GUI.extendController(DAT.GUI.BooleanController); diff --git a/src/controllers/controller.js b/src/controllers/controller.js index d5f2165..89f1e2f 100644 --- a/src/controllers/controller.js +++ b/src/controllers/controller.js @@ -1,20 +1,20 @@ DAT.GUI.Controller = function() { - this.parent = arguments[0]; - this.object = arguments[1]; - this.propertyName = arguments[2]; + this.parent = arguments[0]; + this.object = arguments[1]; + this.propertyName = arguments[2]; - if (arguments.length > 0) this.initialValue = this.propertyName[this.object]; + if (arguments.length > 0) this.initialValue = this.propertyName[this.object]; - this.domElement = document.createElement('div'); - this.domElement.setAttribute('class', 'guidat-controller ' + this.type); + this.domElement = document.createElement('div'); + this.domElement.setAttribute('class', 'guidat-controller ' + this.type); - this.propertyNameElement = document.createElement('span'); - this.propertyNameElement.setAttribute('class', 'guidat-propertyname'); - this.name(this.propertyName); - this.domElement.appendChild(this.propertyNameElement); + this.propertyNameElement = document.createElement('span'); + this.propertyNameElement.setAttribute('class', 'guidat-propertyname'); + this.name(this.propertyName); + this.domElement.appendChild(this.propertyNameElement); - DAT.GUI.makeUnselectable(this.domElement); + DAT.GUI.makeUnselectable(this.domElement); }; @@ -22,76 +22,77 @@ DAT.GUI.Controller.prototype.changeFunction = null; DAT.GUI.Controller.prototype.finishChangeFunction = null; DAT.GUI.Controller.prototype.name = function(n) { - this.propertyNameElement.innerHTML = n; - return this; + this.propertyNameElement.innerHTML = n; + return this; }; DAT.GUI.Controller.prototype.reset = function() { - this.setValue(this.initialValue); - return this; + this.setValue(this.initialValue); + return this; }; DAT.GUI.Controller.prototype.listen = function() { - this.parent.listenTo(this); - return this; + this.parent.listenTo(this); + return this; }; DAT.GUI.Controller.prototype.unlisten = function() { - this.parent.unlistenTo(this); // <--- hasn't been tested yet - return this; + this.parent.unlistenTo(this); // <--- hasn't been tested yet + return this; }; DAT.GUI.Controller.prototype.setValue = function(n) { - this.object[this.propertyName] = n; - if (this.changeFunction != null) { - this.changeFunction.call(this, n); - } - this.updateDisplay(); - return this; + this.object[this.propertyName] = n; + if (this.changeFunction != null) { + this.changeFunction.call(this, n); + } + this.updateDisplay(); + return this; }; DAT.GUI.Controller.prototype.getValue = function() { - return this.object[this.propertyName]; + return this.object[this.propertyName]; }; -DAT.GUI.Controller.prototype.updateDisplay = function() {}; +DAT.GUI.Controller.prototype.updateDisplay = function() { +}; DAT.GUI.Controller.prototype.onChange = function(fnc) { - this.changeFunction = fnc; - return this; + this.changeFunction = fnc; + return this; }; DAT.GUI.Controller.prototype.onFinishChange = function(fnc) { - this.finishChangeFunction = fnc; - return this; + this.finishChangeFunction = fnc; + return this; }; DAT.GUI.Controller.prototype.options = function() { - var _this = this; - var select = document.createElement('select'); - if (arguments.length == 1) { - var arr = arguments[0]; - for (var i in arr) { - var opt = document.createElement('option'); - opt.innerHTML = i; - opt.setAttribute('value', arr[i]); - select.appendChild(opt); - } - } else { - for (var i = 0; i < arguments.length; i++) { - var opt = document.createElement('option'); - opt.innerHTML = arguments[i]; - opt.setAttribute('value', arguments[i]); - select.appendChild(opt); - } + var _this = this; + var select = document.createElement('select'); + if (arguments.length == 1) { + var arr = arguments[0]; + for (var i in arr) { + var opt = document.createElement('option'); + opt.innerHTML = i; + opt.setAttribute('value', arr[i]); + select.appendChild(opt); } + } else { + for (var i = 0; i < arguments.length; i++) { + var opt = document.createElement('option'); + opt.innerHTML = arguments[i]; + opt.setAttribute('value', arguments[i]); + select.appendChild(opt); + } + } - select.addEventListener('change', function() { - _this.setValue(this.value); - if (_this.finishChangeFunction != null) { - _this.finishChangeFunction.call(this, _this.getValue()); - } - }, false); - _this.domElement.appendChild(select); - return this; + select.addEventListener('change', function() { + _this.setValue(this.value); + if (_this.finishChangeFunction != null) { + _this.finishChangeFunction.call(this, _this.getValue()); + } + }, false); + _this.domElement.appendChild(select); + return this; }; diff --git a/src/controllers/function.js b/src/controllers/function.js index ae2e132..f014804 100644 --- a/src/controllers/function.js +++ b/src/controllers/function.js @@ -1,29 +1,30 @@ DAT.GUI.FunctionController = function() { - - this.type = "function"; - - var _this = this; - - DAT.GUI.Controller.apply(this, arguments); - - this.domElement.addEventListener('click', function() { - _this.fire(); - }, false); - - this.domElement.style.cursor = "pointer"; - this.propertyNameElement.style.cursor = "pointer"; - - var fireFunction = null; - this.onFire = function(fnc) { - fireFunction = fnc; - return this; + + this.type = "function"; + + var _this = this; + + DAT.GUI.Controller.apply(this, arguments); + + this.domElement.addEventListener('click', function() { + _this.fire(); + }, false); + + this.domElement.style.cursor = "pointer"; + this.propertyNameElement.style.cursor = "pointer"; + + var fireFunction = null; + this.onFire = function(fnc) { + fireFunction = fnc; + return this; + } + + this.fire = function() { + if (fireFunction != null) { + fireFunction.call(this); } - - this.fire = function() { - if (fireFunction != null) { - fireFunction.call(this); - } - _this.object[_this.propertyName].call(_this.object); - }; + _this.object[_this.propertyName].call(_this.object); + }; + }; DAT.GUI.extendController(DAT.GUI.FunctionController); diff --git a/src/controllers/number.js b/src/controllers/number.js index 7f819a1..a5b7720 100644 --- a/src/controllers/number.js +++ b/src/controllers/number.js @@ -1,156 +1,156 @@ DAT.GUI.NumberController = function() { - this.type = "number"; + this.type = "number"; - DAT.GUI.Controller.apply(this, arguments); + DAT.GUI.Controller.apply(this, arguments); - var _this = this; + 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 dragged - var draggedNumberField = false; + // If we simply click and release a number field, we want to highlight it. + // This variable keeps track of whether or not we've dragged + var draggedNumberField = false; - var clickedNumberField = false; + var clickedNumberField = false; - var y = 0, py = 0; + var y = 0, py = 0; - var min = arguments[3]; - var max = arguments[4]; - var step = arguments[5]; - - if (!step) { - if (min != undefined && max != undefined) { - step = (max-min)*0.01; - } else { - step = 1; - } - } - - var numberField = document.createElement('input'); - numberField.setAttribute('id', this.propertyName); - numberField.setAttribute('type', 'text'); - numberField.setAttribute('value', this.getValue()); - - if (step) numberField.setAttribute('step', step); - - this.domElement.appendChild(numberField); - - var slider; + var min = arguments[3]; + var max = arguments[4]; + var step = arguments[5]; + if (!step) { if (min != undefined && max != undefined) { - slider = new DAT.GUI.Slider(this, min, max, step, this.getValue()); - this.domElement.appendChild(slider.domElement); + step = (max - min) * 0.01; + } else { + step = 1; + } + } + + var numberField = document.createElement('input'); + numberField.setAttribute('id', this.propertyName); + numberField.setAttribute('type', 'text'); + numberField.setAttribute('value', this.getValue()); + + if (step) numberField.setAttribute('step', step); + + this.domElement.appendChild(numberField); + + var slider; + + if (min != undefined && max != undefined) { + slider = new DAT.GUI.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)) { + _this.setValue(val); + } + }, false); + + numberField.addEventListener('mousewheel', function(e) { + e.preventDefault(); + _this.setValue(_this.getValue() + Math.abs(e.wheelDeltaY) / e.wheelDeltaY * step); + return false; + }, false); + + numberField.addEventListener('mousedown', function(e) { + py = y = e.pageY; + clickedNumberField = true; + document.addEventListener('mousemove', dragNumberField, false); + document.addEventListener('mouseup', mouseup, false); + }, false); + + // Handle up arrow and down arrow + numberField.addEventListener('keydown', function(e) { + var newVal; + switch (e.keyCode) { + case 13: // enter + newVal = parseFloat(this.value); + _this.setValue(newVal); + break; + case 38: // up + newVal = _this.getValue() + step; + _this.setValue(newVal); + break; + case 40: // down + newVal = _this.getValue() - step; + _this.setValue(newVal); + break; + } + }, false); + + var mouseup = function(e) { + document.removeEventListener('mousemove', dragNumberField, false); + DAT.GUI.makeSelectable(_this.parent.domElement); + DAT.GUI.makeSelectable(numberField); + if (clickedNumberField && !draggedNumberField) { + numberField.focus(); + numberField.select(); + } + if (slider) slider.domElement.className = slider.domElement.className.replace(' active', ''); + draggedNumberField = false; + clickedNumberField = false; + if (_this.finishChangeFunction != null) { + _this.finishChangeFunction.call(this, _this.getValue()); + } + document.removeEventListener('mouseup', mouseup, false); + }; + + var dragNumberField = function(e) { + + draggedNumberField = true; + e.preventDefault(); + + // We don't want to be highlighting this field as we scroll. + // Or any other fields in this gui for that matter ... + // TODO: Make makeUselectable go through each element and child element. + + DAT.GUI.makeUnselectable(_this.parent.domElement); + DAT.GUI.makeUnselectable(numberField); + + if (slider) slider.domElement.className += ' active'; + + py = y; + y = e.pageY; + var dy = py - y; + var newVal = _this.getValue() + dy * step; + _this.setValue(newVal); + return false; + }; + + this.options = function() { + _this.noSlider(); + _this.domElement.removeChild(numberField); + return DAT.GUI.Controller.prototype.options.apply(this, arguments); + }; + + this.noSlider = function() { + if (slider) { + _this.domElement.removeChild(slider.domElement); + } + return this; + }; + + this.setValue = function(val) { + + val = parseFloat(val); + + if (min != undefined && val <= min) { + val = min; + } else if (max != undefined && val >= max) { + val = max; } - numberField.addEventListener('blur', function(e) { - var val = parseFloat(this.value); - if (!isNaN(val)) { - _this.setValue(val); - } - }, false); + return DAT.GUI.Controller.prototype.setValue.call(this, val); - numberField.addEventListener('mousewheel', function(e) { - e.preventDefault(); - _this.setValue(_this.getValue() + Math.abs(e.wheelDeltaY)/e.wheelDeltaY*step); - return false; - }, false); + }; - numberField.addEventListener('mousedown', function(e) { - py = y = e.pageY; - clickedNumberField = true; - document.addEventListener('mousemove', dragNumberField, false); - document.addEventListener('mouseup', mouseup, false); - }, false); - - // Handle up arrow and down arrow - numberField.addEventListener('keydown', function(e) { - var newVal; - switch(e.keyCode) { - case 13: // enter - newVal = parseFloat(this.value); - _this.setValue(newVal); - break; - case 38: // up - newVal = _this.getValue() + step; - _this.setValue(newVal); - break; - case 40: // down - newVal = _this.getValue() - step; - _this.setValue(newVal); - break; - } - }, false); - - var mouseup = function(e) { - document.removeEventListener('mousemove', dragNumberField, false); - DAT.GUI.makeSelectable(_this.parent.domElement); - DAT.GUI.makeSelectable(numberField); - if (clickedNumberField && !draggedNumberField) { - numberField.focus(); - numberField.select(); - } - if(slider) slider.domElement.className = slider.domElement.className.replace(' active', ''); - draggedNumberField = false; - clickedNumberField = false; - if (_this.finishChangeFunction != null) { - _this.finishChangeFunction.call(this, _this.getValue()); - } - document.removeEventListener('mouseup', mouseup, false); - }; - - var dragNumberField = function(e) { - - draggedNumberField = true; - e.preventDefault(); - - // We don't want to be highlighting this field as we scroll. - // Or any other fields in this gui for that matter ... - // TODO: Make makeUselectable go through each element and child element. - - DAT.GUI.makeUnselectable(_this.parent.domElement); - DAT.GUI.makeUnselectable(numberField); - - if(slider) slider.domElement.className += ' active'; - - py = y; - y = e.pageY; - var dy = py - y; - var newVal = _this.getValue() + dy*step; - _this.setValue(newVal); - return false; - }; - - this.options = function() { - _this.noSlider(); - _this.domElement.removeChild(numberField); - return DAT.GUI.Controller.prototype.options.apply(this, arguments); - }; - - this.noSlider = function() { - if (slider) { - _this.domElement.removeChild(slider.domElement); - } - return this; - }; - - this.setValue = function(val) { - - val = parseFloat(val); - - if (min != undefined && val <= min) { - val = min; - } else if (max != undefined && val >= max) { - val = max; - } - - return DAT.GUI.Controller.prototype.setValue.call(this, val); - - }; - - this.updateDisplay = function() { - numberField.value = DAT.GUI.roundToDecimal(_this.getValue(), 4); - if (slider) slider.value = _this.getValue(); - }; + this.updateDisplay = function() { + numberField.value = DAT.GUI.roundToDecimal(_this.getValue(), 4); + if (slider) slider.value = _this.getValue(); + }; }; DAT.GUI.extendController(DAT.GUI.NumberController); diff --git a/src/controllers/slider.js b/src/controllers/slider.js index d9cc958..fd8a51c 100644 --- a/src/controllers/slider.js +++ b/src/controllers/slider.js @@ -1,66 +1,66 @@ DAT.GUI.Slider = function(numberController, min, max, step, initValue) { - var clicked = false; - var _this = this; + var clicked = false; + var _this = this; - var x, px; + var x, px; - this.domElement = document.createElement('div'); - this.domElement.setAttribute('class', 'guidat-slider-bg'); + 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.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, min, max); - val = Math.round(val/step)*step; - numberController.setValue(val); - }; - - this.domElement.addEventListener('mousedown', function(e) { - clicked = true; - x = px = e.pageX; - _this.domElement.className += ' active'; - _this.fg.className += ' active'; - numberController.domElement.className += ' active'; - onDrag(e); - document.addEventListener('mouseup', mouseup, false); - }, false); - - var mouseup = function(e) { - _this.domElement.className = _this.domElement.className.replace(' active', ''); - _this.fg.className = _this.fg.className.replace(' active', ''); - numberController.domElement.className = numberController.domElement.className.replace(' active', ''); - clicked = false; - if (numberController.finishChangeFunction != null) { - numberController.finishChangeFunction.call(this, numberController.getValue()); - } - document.removeEventListener('mouseup', mouseup, false); - }; + this.domElement.appendChild(this.fg); - 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]; - } - }; + 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, min, max); + val = Math.round(val / step) * step; + numberController.setValue(val); + }; - this.__defineSetter__('value', function(e) { - var pct = DAT.GUI.map(e, min, max, 0, 100); - this.fg.style.width = pct+"%"; - }); + this.domElement.addEventListener('mousedown', function(e) { + clicked = true; + x = px = e.pageX; + _this.domElement.className += ' active'; + _this.fg.className += ' active'; + numberController.domElement.className += ' active'; + onDrag(e); + document.addEventListener('mouseup', mouseup, false); + }, false); - document.addEventListener('mousemove', onDrag, false); + var mouseup = function(e) { + _this.domElement.className = _this.domElement.className.replace(' active', ''); + _this.fg.className = _this.fg.className.replace(' active', ''); + numberController.domElement.className = numberController.domElement.className.replace(' active', ''); + clicked = false; + if (numberController.finishChangeFunction != null) { + numberController.finishChangeFunction.call(this, numberController.getValue()); + } + document.removeEventListener('mouseup', mouseup, false); + }; - this.value = initValue; + 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) { + var pct = DAT.GUI.map(e, min, max, 0, 100); + this.fg.style.width = pct + "%"; + }); + + document.addEventListener('mousemove', onDrag, false); + + this.value = initValue; }; diff --git a/src/controllers/string.js b/src/controllers/string.js index 55a884a..285c93b 100644 --- a/src/controllers/string.js +++ b/src/controllers/string.js @@ -1,46 +1,46 @@ DAT.GUI.StringController = function() { - this.type = "string"; + this.type = "string"; - var _this = this; - DAT.GUI.Controller.apply(this, arguments); + var _this = this; + DAT.GUI.Controller.apply(this, arguments); - var input = document.createElement('input'); + var input = document.createElement('input'); - var initialValue = this.getValue(); + var initialValue = this.getValue(); - input.setAttribute('value', initialValue); - input.setAttribute('spellcheck', 'false'); + input.setAttribute('value', initialValue); + input.setAttribute('spellcheck', 'false'); - this.domElement.addEventListener('mouseup', function() { - input.focus(); - input.select(); - }, false); + this.domElement.addEventListener('mouseup', function() { + input.focus(); + input.select(); + }, false); - // TODO: getting messed up on ctrl a - input.addEventListener('keyup', function(e) { - if (e.keyCode == 13 && _this.finishChangeFunction != null) { - _this.finishChangeFunction.call(this, _this.getValue()); - } - _this.setValue(input.value); - }, false); + // TODO: getting messed up on ctrl a + input.addEventListener('keyup', function(e) { + if (e.keyCode == 13 && _this.finishChangeFunction != null) { + _this.finishChangeFunction.call(this, _this.getValue()); + } + _this.setValue(input.value); + }, false); - input.addEventListener('blur', function() { - if (_this.finishChangeFunction != null) { - _this.finishChangeFunction.call(this, _this.getValue()); - } - }, false); + input.addEventListener('blur', function() { + if (_this.finishChangeFunction != null) { + _this.finishChangeFunction.call(this, _this.getValue()); + } + }, false); - this.updateDisplay = function() { - input.value = _this.getValue(); - }; + this.updateDisplay = function() { + input.value = _this.getValue(); + }; - this.options = function() { - _this.domElement.removeChild(input); - return DAT.GUI.Controller.prototype.options.apply(this, arguments); - }; + this.options = function() { + _this.domElement.removeChild(input); + return DAT.GUI.Controller.prototype.options.apply(this, arguments); + }; - this.domElement.appendChild(input); + this.domElement.appendChild(input); };