diff --git a/build/DAT.GUI.js b/build/DAT.GUI.js index 1b6e2bc..50113e4 100644 --- a/build/DAT.GUI.js +++ b/build/DAT.GUI.js @@ -745,6 +745,111 @@ DAT.GUI.removeClass = function(domElement, className) { if (DAT.GUI.getVarFromURL('saveString') != null) { DAT.GUI.load(DAT.GUI.getVarFromURL('saveString')); } +// Standalone GUI element +DAT.GUI.Slider = function(object, property, min, max, step) { + + 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 = 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; + onDrag(e); + document.addEventListener('mouseup', mouseup, false); + }, false); + + var mouseup = function(e) { + clicked = false; + 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]; + } + }; + + // 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, getMin(), + getMax(), 0, 100) + "%"; + }); + + document.addEventListener('mousemove', onDrag, false); + + this.value = getValue(); + +}; + DAT.GUI.Controller = function() { this.parent = arguments[0]; @@ -1023,7 +1128,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); }; @@ -1162,65 +1267,7 @@ DAT.GUI.ControllerNumber = function() { DAT.GUI.extendController(DAT.GUI.ControllerNumber); -DAT.GUI.ControllerString = function() { - - this.type = "string"; - - var _this = this; - DAT.GUI.Controller.apply(this, arguments); - - var input = document.createElement('input'); - - var initialValue = this.getValue(); - - input.setAttribute('value', initialValue); - input.setAttribute('spellcheck', '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()); - input.blur(); - } - _this.setValue(input.value); - }, false); - - input.addEventListener('mousedown', function(e) { - DAT.GUI.makeSelectable(input); - }); - - input.addEventListener('blur', function() { - DAT.GUI.supressHotKeys = false; - if (_this.finishChangeFunction != null) { - _this.finishChangeFunction.call(this, _this.getValue()); - } - }, false); - - input.addEventListener('focus', function() { - DAT.GUI.supressHotKeys = true; - }, false); - - this.updateDisplay = function() { - input.value = _this.getValue(); - }; - - this.options = function() { - _this.domElement.removeChild(input); - return DAT.GUI.Controller.prototype.options.apply(this, arguments); - }; - - this.domElement.appendChild(input); - -}; - -DAT.GUI.extendController(DAT.GUI.ControllerString); - -DAT.GUI.Slider = function(numberController, min, max, step, initValue) { +DAT.GUI.ControllerNumberSlider = function(numberController, min, max, step, initValue) { var clicked = false; var _this = this; @@ -1284,4 +1331,61 @@ DAT.GUI.Slider = function(numberController, min, max, step, initValue) { this.value = initValue; }; +DAT.GUI.ControllerString = function() { + + this.type = "string"; + + var _this = this; + DAT.GUI.Controller.apply(this, arguments); + + var input = document.createElement('input'); + + var initialValue = this.getValue(); + + input.setAttribute('value', initialValue); + input.setAttribute('spellcheck', '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()); + input.blur(); + } + _this.setValue(input.value); + }, false); + + input.addEventListener('mousedown', function(e) { + DAT.GUI.makeSelectable(input); + }); + + input.addEventListener('blur', function() { + DAT.GUI.supressHotKeys = false; + if (_this.finishChangeFunction != null) { + _this.finishChangeFunction.call(this, _this.getValue()); + } + }, false); + + input.addEventListener('focus', function() { + DAT.GUI.supressHotKeys = true; + }, false); + + this.updateDisplay = function() { + input.value = _this.getValue(); + }; + + this.options = function() { + _this.domElement.removeChild(input); + return DAT.GUI.Controller.prototype.options.apply(this, arguments); + }; + + this.domElement.appendChild(input); + +}; + +DAT.GUI.extendController(DAT.GUI.ControllerString); DAT.GUI.inlineCSS = '#guidat { position: fixed; top: 0; right: 0; width: auto; z-index: 1001; text-align: right; } .guidat { color: #fff; opacity: 0.97; text-align: left; float: right; margin-right: 20px; margin-bottom: 20px; background-color: #fff; } .guidat, .guidat input { font: 9.5px Lucida Grande, sans-serif; } .guidat-controllers { height: 300px; overflow-y: auto; overflow-x: hidden; background-color: rgba(0, 0, 0, 0.1); } a.guidat-toggle:link, a.guidat-toggle:visited, a.guidat-toggle:active { text-decoration: none; cursor: pointer; color: #fff; background-color: #222; text-align: center; display: block; padding: 5px; } a.guidat-toggle:hover { background-color: #000; } .guidat-controller { padding: 3px; height: 25px; clear: left; border-bottom: 1px solid #222; 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; } .guidat-controller input { float: right; outline: none; border: 0; padding: 4px; margin-top: 2px; background-color: #222; } .guidat-controller select { margin-top: 4px; float: right; } .guidat-controller input:hover { background-color: #444; } .guidat-controller input:focus, .guidat-controller.active input { background-color: #555; color: #fff; } .guidat-controller.number { border-left: 5px solid #00aeff; } .guidat-controller.string { border-left: 5px solid #1ed36f; } .guidat-controller.string input { border: 0; color: #1ed36f; margin-right: 2px; width: 148px; } .guidat-controller.boolean { border-left: 5px solid #54396e; } .guidat-controller.function { border-left: 5px solid #e61d5f; } .guidat-controller.number input[type=text] { width: 35px; margin-left: 5px; margin-right: 2px; color: #00aeff; } .guidat .guidat-controller.boolean input { margin-top: 6px; margin-right: 2px; font-size: 20px; } .guidat-controller:last-child { border-bottom: none; -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 { padding: 5px; padding-top: 7px; cursor: default; display: inline-block; } .guidat-controller .guidat-slider-bg:hover, .guidat-controller.active .guidat-slider-bg { background-color: #444; } .guidat-controller .guidat-slider-bg .guidat-slider-fg:hover, .guidat-controller.active .guidat-slider-bg .guidat-slider-fg { background-color: #52c8ff; } .guidat-slider-bg { background-color: #222; cursor: ew-resize; width: 40%; margin-top: 2px; float: right; height: 21px; } .guidat-slider-fg { cursor: ew-resize; background-color: #00aeff; height: 21px; } '; diff --git a/build/DAT.GUI.min.js b/build/DAT.GUI.min.js index 6e57f48..7f8dc77 100644 --- a/build/DAT.GUI.min.js +++ b/build/DAT.GUI.min.js @@ -10,41 +10,4 @@ * * http://www.apache.org/licenses/LICENSE-2.0 */ -var DAT=DAT||{}; -DAT.GUI=function(a){a==void 0&&(a={});var b=!1;a.height==void 0?a.height=300:b=!0;var d=[],c=[],i=!0,f,h,j=this,g=!0,e=280;if(a.width!=void 0)e=a.width;var q=!1,k,p,n=0,r;this.domElement=document.createElement("div");this.domElement.setAttribute("class","guidat");this.domElement.style.width=e+"px";var l=a.height,m=document.createElement("div");m.setAttribute("class","guidat-controllers");m.style.height=l+"px";m.addEventListener("DOMMouseScroll",function(a){var b=this.scrollTop;a.wheelDelta?b+=a.wheelDelta: -a.detail&&(b+=a.detail);a.preventDefault&&a.preventDefault();a.returnValue=!1;m.scrollTop=b},!1);var o=document.createElement("a");o.setAttribute("class","guidat-toggle");o.setAttribute("href","#");o.innerHTML=g?"Close Controls":"Open Controls";var t=!1,C=0,x=0,u=!1,v,y,w,z,D=function(a){y=v;z=w;v=a.pageY;w=a.pageX;a=v-y;if(!g)if(a>0)g=!0,l=k=1,o.innerHTML=p||"Close Controls";else return;var b=z-w;if(a>0&&l>h){var d=DAT.GUI.map(l,h,h+100,1,0);a*=d}t=!0;C+=a;k+=a;l+=a;m.style.height=k+"px";x+=b;e+= -b;e=DAT.GUI.constrain(e,240,500);j.domElement.style.width=e+"px";A()};o.addEventListener("mousedown",function(a){y=v=a.pageY;z=w=a.pageX;u=!0;a.preventDefault();C=x=0;document.addEventListener("mousemove",D,!1);return!1},!1);o.addEventListener("click",function(a){a.preventDefault();return!1},!1);document.addEventListener("mouseup",function(a){u&&!t&&j.toggle();if(u&&t)if(x==0&&B(),k>h)clearTimeout(r),k=n=h,s();else if(m.children.length>=1){var b=m.children[0].offsetHeight;clearTimeout(r);n=Math.round(l/ -b)*b-1;n<=0?(j.close(),k=b*2):(k=n,s())}document.removeEventListener("mousemove",D,!1);a.preventDefault();return u=t=!1},!1);this.domElement.appendChild(m);this.domElement.appendChild(o);if(a.domElement)a.domElement.appendChild(this.domElement);else if(DAT.GUI.autoPlace){if(DAT.GUI.autoPlaceContainer==null)DAT.GUI.autoPlaceContainer=document.createElement("div"),DAT.GUI.autoPlaceContainer.setAttribute("id","guidat"),document.body.appendChild(DAT.GUI.autoPlaceContainer);DAT.GUI.autoPlaceContainer.appendChild(this.domElement)}this.autoListenIntervalTime= -1E3/60;var E=function(){f=setInterval(function(){j.listen()},this.autoListenIntervalTime)};this.__defineSetter__("autoListen",function(a){(i=a)?c.length>0&&E():clearInterval(f)});this.__defineGetter__("autoListen",function(){return i});this.listenTo=function(a){c.length==0&&E();c.push(a)};this.unlistenTo=function(a){for(var b=0;bk?"auto":"hidden"},G={number:DAT.GUI.ControllerNumber,string:DAT.GUI.ControllerString,"boolean":DAT.GUI.ControllerBoolean,"function":DAT.GUI.ControllerFunction};this.reset=function(){};this.toggle=function(){g?this.close():this.open()};this.open=function(){o.innerHTML=p||"Close Controls";n=k;clearTimeout(r);s();B();g=!0};this.close=function(){o.innerHTML=p||"Open Controls";n=0;clearTimeout(r);s();B();g=!1};this.name=function(a){p=a;o.innerHTML=a}; -this.appearanceVars=function(){return[g,e,k,m.scrollTop]};var s=function(){l=m.offsetHeight;l+=(n-l)*0.6;Math.abs(l-n)<1?l=n:r=setTimeout(s,1E3/30);m.style.height=Math.round(l)+"px";A()},B=function(){j.domElement.style.width=e-1+"px";setTimeout(function(){j.domElement.style.width=e+"px"},1)};if(DAT.GUI.guiIndex-1)document.body.scrollTop=DAT.GUI.scrollTop;n=k;this.open()}DAT.GUI.guiIndex++}DAT.GUI.allGuis.push(this);if(DAT.GUI.allGuis.length==1&&(window.addEventListener("keyup",function(a){!DAT.GUI.supressHotKeys&&a.keyCode==72&&DAT.GUI.toggleHide()},!1),DAT.GUI.inlineCSS))a=document.createElement("style"),a.setAttribute("type", -"text/css"),a.innerHTML=DAT.GUI.inlineCSS,document.head.insertBefore(a,document.head.firstChild)};DAT.GUI.hidden=!1;DAT.GUI.autoPlace=!0;DAT.GUI.autoPlaceContainer=null;DAT.GUI.allControllers=[];DAT.GUI.allGuis=[];DAT.GUI.supressHotKeys=!1;DAT.GUI.toggleHide=function(){DAT.GUI.hidden?DAT.GUI.open():DAT.GUI.close()};DAT.GUI.open=function(){DAT.GUI.hidden=!1;for(var a in DAT.GUI.allGuis)DAT.GUI.allGuis[a].domElement.style.display="block"}; -DAT.GUI.close=function(){DAT.GUI.hidden=!0;for(var a in DAT.GUI.allGuis)DAT.GUI.allGuis[a].domElement.style.display="none"};DAT.GUI.saveURL=function(){var a=DAT.GUI.replaceGetVar("saveString",DAT.GUI.getSaveString());window.location=a};DAT.GUI.scrollTop=-1;DAT.GUI.load=function(a){var a=a.split(","),b=parseInt(a[0]);DAT.GUI.scrollTop=parseInt(a[1]);for(var d=0;dd&&(a=d);return a};DAT.GUI.error=function(a){typeof console.error=="function"&&console.error("[DAT.GUI ERROR] "+a)};DAT.GUI.roundToDecimal=function(a,b){var d=Math.pow(10,b);return Math.round(a*d)/d};DAT.GUI.extendController=function(a){a.prototype=new DAT.GUI.Controller;a.prototype.constructor=a};DAT.GUI.addClass=function(a,b){DAT.GUI.hasClass(a,b)||(a.className+=" "+b)}; -DAT.GUI.hasClass=function(a,b){return a.className.indexOf(b)!=-1};DAT.GUI.removeClass=function(a,b){a.className=a.className.replace(RegExp(" "+b,"g"),"")};DAT.GUI.getVarFromURL("saveString")!=null&&DAT.GUI.load(DAT.GUI.getVarFromURL("saveString")); -DAT.GUI.Controller=function(){this.parent=arguments[0];this.object=arguments[1];this.propertyName=arguments[2];if(arguments.length>0)this.initialValue=this.propertyName[this.object];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); -DAT.GUI.makeUnselectable(this.domElement)};DAT.GUI.Controller.prototype.changeFunction=null;DAT.GUI.Controller.prototype.finishChangeFunction=null;DAT.GUI.Controller.prototype.name=function(a){this.propertyNameElement.innerHTML=a;return this};DAT.GUI.Controller.prototype.reset=function(){this.setValue(this.initialValue);return this};DAT.GUI.Controller.prototype.listen=function(){this.parent.listenTo(this);return this};DAT.GUI.Controller.prototype.unlisten=function(){this.parent.unlistenTo(this);return this}; -DAT.GUI.Controller.prototype.setValue=function(a){this.object[this.propertyName]=a;this.changeFunction!=null&&this.changeFunction.call(this,a);this.updateDisplay();return this};DAT.GUI.Controller.prototype.getValue=function(){return this.object[this.propertyName]};DAT.GUI.Controller.prototype.updateDisplay=function(){};DAT.GUI.Controller.prototype.onChange=function(a){this.changeFunction=a;return this};DAT.GUI.Controller.prototype.onFinishChange=function(a){this.finishChangeFunction=a;return this}; -DAT.GUI.Controller.prototype.options=function(){var a=this,b=document.createElement("select");if(arguments.length==1){var d=arguments[0],c;for(c in d){var i=document.createElement("option");i.innerHTML=c;i.setAttribute("value",d[c]);if(arguments[c]==this.getValue())i.selected=!0;b.appendChild(i)}}else for(c=0;c=h&&(a=h);return DAT.GUI.Controller.prototype.setValue.call(this,a)};this.updateDisplay=function(){g.value=DAT.GUI.roundToDecimal(a.getValue(), -4);if(e)e.value=a.getValue()}};DAT.GUI.extendController(DAT.GUI.ControllerNumber); -DAT.GUI.ControllerString=function(){this.type="string";var a=this;DAT.GUI.Controller.apply(this,arguments);var b=document.createElement("input"),d=this.getValue();b.setAttribute("value",d);b.setAttribute("spellcheck","false");this.domElement.addEventListener("mouseup",function(){b.focus();b.select()},!1);b.addEventListener("keyup",function(c){c.keyCode==13&&a.finishChangeFunction!=null&&(a.finishChangeFunction.call(this,a.getValue()),b.blur());a.setValue(b.value)},!1);b.addEventListener("mousedown", -function(){DAT.GUI.makeSelectable(b)});b.addEventListener("blur",function(){DAT.GUI.supressHotKeys=!1;a.finishChangeFunction!=null&&a.finishChangeFunction.call(this,a.getValue())},!1);b.addEventListener("focus",function(){DAT.GUI.supressHotKeys=!0},!1);this.updateDisplay=function(){b.value=a.getValue()};this.options=function(){a.domElement.removeChild(b);return DAT.GUI.Controller.prototype.options.apply(this,arguments)};this.domElement.appendChild(b)};DAT.GUI.extendController(DAT.GUI.ControllerString); -DAT.GUI.Slider=function(a,b,d,c,i){var f=!1,h=this;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 j=function(b){if(f){var c;c=h.domElement;var d=0,g=0;if(c.offsetParent){do d+=c.offsetLeft,g+=c.offsetTop;while(c=c.offsetParent);c=[d,g]}else c=void 0;b=DAT.GUI.map(b.pageX,c[0],c[0]+h.domElement.offsetWidth,a.getMin(), -a.getMax());b=Math.round(b/a.getStep())*a.getStep();a.setValue(b)}};this.domElement.addEventListener("mousedown",function(b){f=!0;DAT.GUI.addClass(a.domElement,"active");j(b);document.addEventListener("mouseup",g,!1)},!1);var g=function(){DAT.GUI.removeClass(a.domElement,"active");f=!1;a.finishChangeFunction!=null&&a.finishChangeFunction.call(this,a.getValue());document.removeEventListener("mouseup",g,!1)};this.__defineSetter__("value",function(b){this.fg.style.width=DAT.GUI.map(b,a.getMin(),a.getMax(), -0,100)+"%"});document.addEventListener("mousemove",j,!1);this.value=i};DAT.GUI.inlineCSS="#guidat { position: fixed; top: 0; right: 0; width: auto; z-index: 1001; text-align: right; } .guidat { color: #fff; opacity: 0.97; text-align: left; float: right; margin-right: 20px; margin-bottom: 20px; background-color: #fff; } .guidat, .guidat input { font: 9.5px Lucida Grande, sans-serif; } .guidat-controllers { height: 300px; overflow-y: auto; overflow-x: hidden; background-color: rgba(0, 0, 0, 0.1); } a.guidat-toggle:link, a.guidat-toggle:visited, a.guidat-toggle:active { text-decoration: none; cursor: pointer; color: #fff; background-color: #222; text-align: center; display: block; padding: 5px; } a.guidat-toggle:hover { background-color: #000; } .guidat-controller { padding: 3px; height: 25px; clear: left; border-bottom: 1px solid #222; 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; } .guidat-controller input { float: right; outline: none; border: 0; padding: 4px; margin-top: 2px; background-color: #222; } .guidat-controller select { margin-top: 4px; float: right; } .guidat-controller input:hover { background-color: #444; } .guidat-controller input:focus, .guidat-controller.active input { background-color: #555; color: #fff; } .guidat-controller.number { border-left: 5px solid #00aeff; } .guidat-controller.string { border-left: 5px solid #1ed36f; } .guidat-controller.string input { border: 0; color: #1ed36f; margin-right: 2px; width: 148px; } .guidat-controller.boolean { border-left: 5px solid #54396e; } .guidat-controller.function { border-left: 5px solid #e61d5f; } .guidat-controller.number input[type=text] { width: 35px; margin-left: 5px; margin-right: 2px; color: #00aeff; } .guidat .guidat-controller.boolean input { margin-top: 6px; margin-right: 2px; font-size: 20px; } .guidat-controller:last-child { border-bottom: none; -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 { padding: 5px; padding-top: 7px; cursor: default; display: inline-block; } .guidat-controller .guidat-slider-bg:hover, .guidat-controller.active .guidat-slider-bg { background-color: #444; } .guidat-controller .guidat-slider-bg .guidat-slider-fg:hover, .guidat-controller.active .guidat-slider-bg .guidat-slider-fg { background-color: #52c8ff; } .guidat-slider-bg { background-color: #222; cursor: ew-resize; width: 40%; margin-top: 2px; float: right; height: 21px; } .guidat-slider-fg { cursor: ew-resize; background-color: #00aeff; height: 21px; } "; + diff --git a/index.html b/index.html index b69396d..0525270 100644 --- a/index.html +++ b/index.html @@ -134,12 +134,12 @@
  • Download the minified source - [19.4kb] + [0.4kb]
  • Download the uncompressed source - [33.4kb] + [35.6kb]
  • 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(); }; diff --git a/utils/build.py b/utils/build.py index 47aa524..c0856ac 100644 --- a/utils/build.py +++ b/utils/build.py @@ -22,7 +22,7 @@ SRC_ROOT= os.path.join(PREFIX,'src') BUILD_ROOT = os.path.join(PREFIX,'build') INDEX = os.path.join(PREFIX,'index.html') BUILD_NAME = 'DAT.GUI' -ALL_JS = ['DAT.GUI.js','DAT.GUI'] +ALL_JS = ['DAT.GUI.js','DAT.GUI.Slider.js','DAT.GUI'] LICENSE = """/** * dat.gui Javascript Controller Library @@ -59,7 +59,11 @@ def expand(path, globby): path.insert(0,SRC_ROOT) filename = "%s.%s"%(path[-2],path[-1]) if fnmatch.fnmatch(filename, globby): - path[-1] = filename + tmppath = os.path.join(*(path[:-1]+[filename])) + if os.path.exists(tmppath): + path[-1] = filename + else: + path = path[:-2]+[filename] path = os.path.join(*path) if os.path.isdir(path): for root, dirnames, filenames in os.walk(path):