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

fix color pos

Browse Source
This commit is contained in:
Andre Caetano 2015-12-28 19:25:13 -02:00
parent 8f0eba8ade
commit 5376238101
2 changed files with 61 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
build/dat.gui.js
View File

@ -51,7 +51,7 @@ dat.utils.css = (function () {
dat.utils.common = (function () { dat.utils.common = (function () {
var ARR_EACH = Array.prototype.forEach; var ARR_EACH = Array.prototype.forEach;
var ARR_SLICE = Array.prototype.slice; var ARR_SLICE = Array.prototype.slice;
@ -61,38 +61,38 @@ dat.utils.common = (function () {
* http://documentcloud.github.com/underscore/ * http://documentcloud.github.com/underscore/
*/ */
return { return {
BREAK: {}, BREAK: {},
extend: function(target) { extend: function(target) {
this.each(ARR_SLICE.call(arguments, 1), function(obj) { this.each(ARR_SLICE.call(arguments, 1), function(obj) {
for (var key in obj) for (var key in obj)
if (!this.isUndefined(obj[key])) if (!this.isUndefined(obj[key]))
target[key] = obj[key]; target[key] = obj[key];
}, this); }, this);
return target; return target;
}, },
defaults: function(target) { defaults: function(target) {
this.each(ARR_SLICE.call(arguments, 1), function(obj) { this.each(ARR_SLICE.call(arguments, 1), function(obj) {
for (var key in obj) for (var key in obj)
if (this.isUndefined(target[key])) if (this.isUndefined(target[key]))
target[key] = obj[key]; target[key] = obj[key];
}, this); }, this);
return target; return target;
}, },
compose: function() { compose: function() {
var toCall = ARR_SLICE.call(arguments); var toCall = ARR_SLICE.call(arguments);
return function() { return function() {
@ -103,35 +103,35 @@ dat.utils.common = (function () {
return args[0]; return args[0];
} }
}, },
each: function(obj, itr, scope) { each: function(obj, itr, scope) {
if (!obj) return; if (!obj) return;
if (ARR_EACH && obj.forEach && obj.forEach === ARR_EACH) { if (ARR_EACH && obj.forEach && obj.forEach === ARR_EACH) {
obj.forEach(itr, scope); obj.forEach(itr, scope);
} else if (obj.length === obj.length + 0) { // Is number but not NaN } else if (obj.length === obj.length + 0) { // Is number but not NaN
for (var key = 0, l = obj.length; key < l; key++) for (var key = 0, l = obj.length; key < l; key++)
if (key in obj && itr.call(scope, obj[key], key) === this.BREAK) if (key in obj && itr.call(scope, obj[key], key) === this.BREAK)
return; return;
} else { } else {
for (var key in obj) for (var key in obj)
if (itr.call(scope, obj[key], key) === this.BREAK) if (itr.call(scope, obj[key], key) === this.BREAK)
return; return;
} }
}, },
defer: function(fnc) { defer: function(fnc) {
setTimeout(fnc, 0); setTimeout(fnc, 0);
}, },
toArray: function(obj) { toArray: function(obj) {
if (obj.toArray) return obj.toArray(); if (obj.toArray) return obj.toArray();
return ARR_SLICE.call(obj); return ARR_SLICE.call(obj);
@ -140,41 +140,41 @@ dat.utils.common = (function () {
isUndefined: function(obj) { isUndefined: function(obj) {
return obj === undefined; return obj === undefined;
}, },
isNull: function(obj) { isNull: function(obj) {
return obj === null; return obj === null;
}, },
isNaN: function(obj) { isNaN: function(obj) {
return obj !== obj; return obj !== obj;
}, },
isArray: Array.isArray || function(obj) { isArray: Array.isArray || function(obj) {
return obj.constructor === Array; return obj.constructor === Array;
}, },
isObject: function(obj) { isObject: function(obj) {
return obj === Object(obj); return obj === Object(obj);
}, },
isNumber: function(obj) { isNumber: function(obj) {
return obj === obj+0; return obj === obj+0;
}, },
isString: function(obj) { isString: function(obj) {
return obj === obj+''; return obj === obj+'';
}, },
isBoolean: function(obj) { isBoolean: function(obj) {
return obj === false || obj === true; return obj === false || obj === true;
}, },
isFunction: function(obj) { isFunction: function(obj) {
return Object.prototype.toString.call(obj) === '[object Function]'; return Object.prototype.toString.call(obj) === '[object Function]';
} }
}; };
})(); })();
@ -349,7 +349,7 @@ dat.dom.dom = (function (common) {
var dom = { var dom = {
/** /**
* *
* @param elem * @param elem
* @param selectable * @param selectable
*/ */
@ -569,7 +569,7 @@ dat.dom.dom = (function (common) {
// http://stackoverflow.com/posts/2684561/revisions // http://stackoverflow.com/posts/2684561/revisions
/** /**
* *
* @param elem * @param elem
*/ */
isActive: function(elem) { isActive: function(elem) {
@ -935,7 +935,7 @@ dat.controllers.NumberControllerSlider = (function (NumberController, dom, css,
* *
* @extends dat.controllers.Controller * @extends dat.controllers.Controller
* @extends dat.controllers.NumberController * @extends dat.controllers.NumberController
* *
* @param {Object} object The object to be manipulated * @param {Object} object The object to be manipulated
* @param {string} property The name of the property to be manipulated * @param {string} property The name of the property to be manipulated
* @param {Number} minValue Minimum allowed value * @param {Number} minValue Minimum allowed value
@ -952,11 +952,11 @@ dat.controllers.NumberControllerSlider = (function (NumberController, dom, css,
this.__background = document.createElement('div'); this.__background = document.createElement('div');
this.__foreground = document.createElement('div'); this.__foreground = document.createElement('div');
dom.bind(this.__background, 'mousedown', onMouseDown); dom.bind(this.__background, 'mousedown', onMouseDown);
dom.addClass(this.__background, 'slider'); dom.addClass(this.__background, 'slider');
dom.addClass(this.__foreground, 'slider-fg'); dom.addClass(this.__foreground, 'slider-fg');
@ -974,7 +974,7 @@ dat.controllers.NumberControllerSlider = (function (NumberController, dom, css,
var offset = dom.getOffset(_this.__background); var offset = dom.getOffset(_this.__background);
var width = dom.getWidth(_this.__background); var width = dom.getWidth(_this.__background);
_this.setValue( _this.setValue(
map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max) map(e.clientX, offset.left, offset.left + width, _this.__min, _this.__max)
); );
@ -1031,7 +1031,7 @@ dat.controllers.NumberControllerSlider = (function (NumberController, dom, css,
} }
return NumberControllerSlider; return NumberControllerSlider;
})(dat.controllers.NumberController, })(dat.controllers.NumberController,
dat.dom.dom, dat.dom.dom,
dat.utils.css, dat.utils.css,
@ -1079,7 +1079,7 @@ dat.controllers.FunctionController = (function (Controller, dom, common) {
FunctionController.prototype, FunctionController.prototype,
Controller.prototype, Controller.prototype,
{ {
fire: function() { fire: function() {
if (this.__onChange) { if (this.__onChange) {
this.__onChange.call(this); this.__onChange.call(this);
@ -1154,10 +1154,10 @@ dat.controllers.BooleanController = (function (Controller, dom, common) {
}, },
updateDisplay: function() { updateDisplay: function() {
if (this.getValue() === true) { if (this.getValue() === true) {
this.__checkbox.setAttribute('checked', 'checked'); this.__checkbox.setAttribute('checked', 'checked');
this.__checkbox.checked = true; this.__checkbox.checked = true;
} else { } else {
this.__checkbox.checked = false; this.__checkbox.checked = false;
} }
@ -2929,7 +2929,7 @@ dat.controllers.StringController = (function (Controller, dom, common) {
this.blur(); this.blur();
} }
}); });
function onChange() { function onChange() {
_this.setValue(_this.__input.value); _this.setValue(_this.__input.value);
@ -3055,7 +3055,7 @@ dat.controllers.ColorController = (function (Controller, dom, Color, interpret,
borderRadius: '12px', borderRadius: '12px',
zIndex: 1 zIndex: 1
}); });
common.extend(this.__hue_knob.style, { common.extend(this.__hue_knob.style, {
position: 'absolute', position: 'absolute',
width: '15px', width: '15px',
@ -3078,12 +3078,13 @@ dat.controllers.ColorController = (function (Controller, dom, Color, interpret,
height: '100%', height: '100%',
background: 'none' background: 'none'
}); });
linearGradient(value_field, 'top', 'rgba(0,0,0,0)', '#000'); linearGradient(value_field, 'top', 'rgba(0,0,0,0)', '#000');
common.extend(this.__hue_field.style, { common.extend(this.__hue_field.style, {
width: '15px', width: '15px',
height: '100px', height: '100px',
position: 'absolute',
display: 'inline-block', display: 'inline-block',
border: '1px solid #555', border: '1px solid #555',
cursor: 'ns-resize' cursor: 'ns-resize'
@ -3265,16 +3266,16 @@ dat.controllers.ColorController = (function (Controller, dom, Color, interpret,
} }
); );
var vendors = ['-moz-','-o-','-webkit-','-ms-','']; var vendors = ['-moz-','-o-','-webkit-','-ms-',''];
function linearGradient(elem, x, a, b) { function linearGradient(elem, x, a, b) {
elem.style.background = ''; elem.style.background = '';
common.each(vendors, function(vendor) { common.each(vendors, function(vendor) {
elem.style.cssText += 'background: ' + vendor + 'linear-gradient('+x+', '+a+' 0%, ' + b + ' 100%); '; elem.style.cssText += 'background: ' + vendor + 'linear-gradient('+x+', '+a+' 0%, ' + b + ' 100%); ';
}); });
} }
function hueGradient(elem) { function hueGradient(elem) {
elem.style.background = ''; elem.style.background = '';
elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);' elem.style.cssText += 'background: -moz-linear-gradient(top, #ff0000 0%, #ff00ff 17%, #0000ff 34%, #00ffff 50%, #00ff00 67%, #ffff00 84%, #ff0000 100%);'
@ -3660,7 +3661,7 @@ dat.dom.CenteredDiv = (function (dom, common) {
this.domElement.style.left = window.innerWidth/2 - dom.getWidth(this.domElement) / 2 + 'px'; this.domElement.style.left = window.innerWidth/2 - dom.getWidth(this.domElement) / 2 + 'px';
this.domElement.style.top = window.innerHeight/2 - dom.getHeight(this.domElement) / 2 + 'px'; this.domElement.style.top = window.innerHeight/2 - dom.getHeight(this.domElement) / 2 + 'px';
}; };
function lockScroll(e) { function lockScroll(e) {
console.log(e); console.log(e);
} }
@ -3670,4 +3671,4 @@ dat.dom.CenteredDiv = (function (dom, common) {
})(dat.dom.dom, })(dat.dom.dom,
dat.utils.common), dat.utils.common),
dat.dom.dom, dat.dom.dom,
dat.utils.common); dat.utils.common);

4
build/dat.gui.min.js vendored
View File

@ -79,7 +79,7 @@ b&&(b=0);1<e?e=1:0>e&&(e=0);t.__color.v=b;t.__color.s=e;t.setValue(t.__color.toO
this.__selector=document.createElement("div");this.__selector.className="selector";this.__saturation_field=document.createElement("div");this.__saturation_field.className="saturation-field";this.__field_knob=document.createElement("div");this.__field_knob.className="field-knob";this.__field_knob_border="2px solid ";this.__hue_knob=document.createElement("div");this.__hue_knob.className="hue-knob";this.__hue_field=document.createElement("div");this.__hue_field.className="hue-field";this.__input=document.createElement("input"); this.__selector=document.createElement("div");this.__selector.className="selector";this.__saturation_field=document.createElement("div");this.__saturation_field.className="saturation-field";this.__field_knob=document.createElement("div");this.__field_knob.className="field-knob";this.__field_knob_border="2px solid ";this.__hue_knob=document.createElement("div");this.__hue_knob.className="hue-knob";this.__hue_field=document.createElement("div");this.__hue_field.className="hue-field";this.__input=document.createElement("input");
this.__input.type="text";this.__input_textShadow="0 1px 1px ";a.bind(this.__input,"keydown",function(a){13===a.keyCode&&g.call(this)});a.bind(this.__input,"blur",g);a.bind(this.__selector,"mousedown",function(b){a.addClass(this,"drag").bind(window,"mouseup",function(b){a.removeClass(t.__selector,"drag")})});var y=document.createElement("div");c.extend(this.__selector.style,{width:"122px",height:"102px",padding:"3px",backgroundColor:"#222",boxShadow:"0px 1px 3px rgba(0,0,0,0.3)"});c.extend(this.__field_knob.style, this.__input.type="text";this.__input_textShadow="0 1px 1px ";a.bind(this.__input,"keydown",function(a){13===a.keyCode&&g.call(this)});a.bind(this.__input,"blur",g);a.bind(this.__selector,"mousedown",function(b){a.addClass(this,"drag").bind(window,"mouseup",function(b){a.removeClass(t.__selector,"drag")})});var y=document.createElement("div");c.extend(this.__selector.style,{width:"122px",height:"102px",padding:"3px",backgroundColor:"#222",boxShadow:"0px 1px 3px rgba(0,0,0,0.3)"});c.extend(this.__field_knob.style,
{position:"absolute",width:"12px",height:"12px",border:this.__field_knob_border+(.5>this.__color.v?"#fff":"#000"),boxShadow:"0px 1px 3px rgba(0,0,0,0.5)",borderRadius:"12px",zIndex:1});c.extend(this.__hue_knob.style,{position:"absolute",width:"15px",height:"2px",borderRight:"4px solid #fff",zIndex:1});c.extend(this.__saturation_field.style,{width:"100px",height:"100px",border:"1px solid #555",marginRight:"3px",display:"inline-block",cursor:"pointer"});c.extend(y.style,{width:"100%",height:"100%", {position:"absolute",width:"12px",height:"12px",border:this.__field_knob_border+(.5>this.__color.v?"#fff":"#000"),boxShadow:"0px 1px 3px rgba(0,0,0,0.5)",borderRadius:"12px",zIndex:1});c.extend(this.__hue_knob.style,{position:"absolute",width:"15px",height:"2px",borderRight:"4px solid #fff",zIndex:1});c.extend(this.__saturation_field.style,{width:"100px",height:"100px",border:"1px solid #555",marginRight:"3px",display:"inline-block",cursor:"pointer"});c.extend(y.style,{width:"100%",height:"100%",
background:"none"});b(y,"top","rgba(0,0,0,0)","#000");c.extend(this.__hue_field.style,{width:"15px",height:"100px",display:"inline-block",border:"1px solid #555",cursor:"ns-resize"});p(this.__hue_field);c.extend(this.__input.style,{outline:"none",textAlign:"center",color:"#fff",border:0,fontWeight:"bold",textShadow:this.__input_textShadow+"rgba(0,0,0,0.7)"});a.bind(this.__saturation_field,"mousedown",u);a.bind(this.__field_knob,"mousedown",u);a.bind(this.__hue_field,"mousedown",function(b){w(b);a.bind(window, background:"none"});b(y,"top","rgba(0,0,0,0)","#000");c.extend(this.__hue_field.style,{width:"15px",position: 'absolute',height:"100px",display:"inline-block",border:"1px solid #555",cursor:"ns-resize"});p(this.__hue_field);c.extend(this.__input.style,{outline:"none",textAlign:"center",color:"#fff",border:0,fontWeight:"bold",textShadow:this.__input_textShadow+"rgba(0,0,0,0.7)"});a.bind(this.__saturation_field,"mousedown",u);a.bind(this.__field_knob,"mousedown",u);a.bind(this.__hue_field,"mousedown",function(b){w(b);a.bind(window,
"mousemove",w);a.bind(window,"mouseup",k)});this.__saturation_field.appendChild(y);this.__selector.appendChild(this.__field_knob);this.__selector.appendChild(this.__saturation_field);this.__selector.appendChild(this.__hue_field);this.__hue_field.appendChild(this.__hue_knob);this.domElement.appendChild(this.__input);this.domElement.appendChild(this.__selector);this.updateDisplay()};q.superclass=f;c.extend(q.prototype,f.prototype,{updateDisplay:function(){var a=e(this.getValue());if(!1!==a){var f=!1; "mousemove",w);a.bind(window,"mouseup",k)});this.__saturation_field.appendChild(y);this.__selector.appendChild(this.__field_knob);this.__selector.appendChild(this.__saturation_field);this.__selector.appendChild(this.__hue_field);this.__hue_field.appendChild(this.__hue_knob);this.domElement.appendChild(this.__input);this.domElement.appendChild(this.__selector);this.updateDisplay()};q.superclass=f;c.extend(q.prototype,f.prototype,{updateDisplay:function(){var a=e(this.getValue());if(!1!==a){var f=!1;
c.each(d.COMPONENTS,function(b){if(!c.isUndefined(a[b])&&!c.isUndefined(this.__color.__state[b])&&a[b]!==this.__color.__state[b])return f=!0,{}},this);f&&c.extend(this.__color.__state,a)}c.extend(this.__temp.__state,this.__color.__state);this.__temp.a=1;var l=.5>this.__color.v||.5<this.__color.s?255:0,p=255-l;c.extend(this.__field_knob.style,{marginLeft:100*this.__color.s-7+"px",marginTop:100*(1-this.__color.v)-7+"px",backgroundColor:this.__temp.toString(),border:this.__field_knob_border+"rgb("+l+ c.each(d.COMPONENTS,function(b){if(!c.isUndefined(a[b])&&!c.isUndefined(this.__color.__state[b])&&a[b]!==this.__color.__state[b])return f=!0,{}},this);f&&c.extend(this.__color.__state,a)}c.extend(this.__temp.__state,this.__color.__state);this.__temp.a=1;var l=.5>this.__color.v||.5<this.__color.s?255:0,p=255-l;c.extend(this.__field_knob.style,{marginLeft:100*this.__color.s-7+"px",marginTop:100*(1-this.__color.v)-7+"px",backgroundColor:this.__temp.toString(),border:this.__field_knob_border+"rgb("+l+
","+l+","+l+")"});this.__hue_knob.style.marginTop=100*(1-this.__color.h/360)+"px";this.__temp.s=1;this.__temp.v=1;b(this.__saturation_field,"left","#fff",this.__temp.toString());c.extend(this.__input.style,{backgroundColor:this.__input.value=this.__color.toString(),color:"rgb("+l+","+l+","+l+")",textShadow:this.__input_textShadow+"rgba("+p+","+p+","+p+",.7)"})}});var l=["-moz-","-o-","-webkit-","-ms-",""];return q}(dat.controllers.Controller,dat.dom.dom,dat.color.Color=function(f,a,d,e){function c(a, ","+l+","+l+")"});this.__hue_knob.style.marginTop=100*(1-this.__color.h/360)+"px";this.__temp.s=1;this.__temp.v=1;b(this.__saturation_field,"left","#fff",this.__temp.toString());c.extend(this.__input.style,{backgroundColor:this.__input.value=this.__color.toString(),color:"rgb("+l+","+l+","+l+")",textShadow:this.__input_textShadow+"rgba("+p+","+p+","+p+",.7)"})}});var l=["-moz-","-o-","-webkit-","-ms-",""];return q}(dat.controllers.Controller,dat.dom.dom,dat.color.Color=function(f,a,d,e){function c(a,
@ -92,4 +92,4 @@ window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequest
"fixed";this.domElement=document.createElement("div");a.extend(this.domElement.style,{position:"fixed",display:"none",zIndex:"1001",opacity:0,WebkitTransition:"-webkit-transform 0.2s ease-out, opacity 0.2s linear",transition:"transform 0.2s ease-out, opacity 0.2s linear"});document.body.appendChild(this.backgroundElement);document.body.appendChild(this.domElement);var d=this;f.bind(this.backgroundElement,"click",function(){d.hide()})};d.prototype.show=function(){var d=this;this.backgroundElement.style.display= "fixed";this.domElement=document.createElement("div");a.extend(this.domElement.style,{position:"fixed",display:"none",zIndex:"1001",opacity:0,WebkitTransition:"-webkit-transform 0.2s ease-out, opacity 0.2s linear",transition:"transform 0.2s ease-out, opacity 0.2s linear"});document.body.appendChild(this.backgroundElement);document.body.appendChild(this.domElement);var d=this;f.bind(this.backgroundElement,"click",function(){d.hide()})};d.prototype.show=function(){var d=this;this.backgroundElement.style.display=
"block";this.domElement.style.display="block";this.domElement.style.opacity=0;this.domElement.style.webkitTransform="scale(1.1)";this.layout();a.defer(function(){d.backgroundElement.style.opacity=1;d.domElement.style.opacity=1;d.domElement.style.webkitTransform="scale(1)"})};d.prototype.hide=function(){var a=this,c=function(){a.domElement.style.display="none";a.backgroundElement.style.display="none";f.unbind(a.domElement,"webkitTransitionEnd",c);f.unbind(a.domElement,"transitionend",c);f.unbind(a.domElement, "block";this.domElement.style.display="block";this.domElement.style.opacity=0;this.domElement.style.webkitTransform="scale(1.1)";this.layout();a.defer(function(){d.backgroundElement.style.opacity=1;d.domElement.style.opacity=1;d.domElement.style.webkitTransform="scale(1)"})};d.prototype.hide=function(){var a=this,c=function(){a.domElement.style.display="none";a.backgroundElement.style.display="none";f.unbind(a.domElement,"webkitTransitionEnd",c);f.unbind(a.domElement,"transitionend",c);f.unbind(a.domElement,
"oTransitionEnd",c)};f.bind(this.domElement,"webkitTransitionEnd",c);f.bind(this.domElement,"transitionend",c);f.bind(this.domElement,"oTransitionEnd",c);this.backgroundElement.style.opacity=0;this.domElement.style.opacity=0;this.domElement.style.webkitTransform="scale(1.1)"};d.prototype.layout=function(){this.domElement.style.left=window.innerWidth/2-f.getWidth(this.domElement)/2+"px";this.domElement.style.top=window.innerHeight/2-f.getHeight(this.domElement)/2+"px"};return d}(dat.dom.dom,dat.utils.common), "oTransitionEnd",c)};f.bind(this.domElement,"webkitTransitionEnd",c);f.bind(this.domElement,"transitionend",c);f.bind(this.domElement,"oTransitionEnd",c);this.backgroundElement.style.opacity=0;this.domElement.style.opacity=0;this.domElement.style.webkitTransform="scale(1.1)"};d.prototype.layout=function(){this.domElement.style.left=window.innerWidth/2-f.getWidth(this.domElement)/2+"px";this.domElement.style.top=window.innerHeight/2-f.getHeight(this.domElement)/2+"px"};return d}(dat.dom.dom,dat.utils.common),
dat.dom.dom,dat.utils.common); dat.dom.dom,dat.utils.common);