mirror of
https://github.com/dataarts/dat.gui.git
synced 2024-12-12 04:08:27 +00:00
fix color pos
This commit is contained in:
Andre Caetano
parent
8f0eba8ade
commit
5376238101
117
build/dat.gui.js
117
build/dat.gui.js
@ -51,7 +51,7 @@ dat.utils.css = (function () {
|
||||
|
||||
|
||||
dat.utils.common = (function () {
|
||||
|
||||
|
||||
var ARR_EACH = Array.prototype.forEach;
|
||||
var ARR_SLICE = Array.prototype.slice;
|
||||
|
||||
@ -61,38 +61,38 @@ dat.utils.common = (function () {
|
||||
* http://documentcloud.github.com/underscore/
|
||||
*/
|
||||
|
||||
return {
|
||||
|
||||
return {
|
||||
|
||||
BREAK: {},
|
||||
|
||||
|
||||
extend: function(target) {
|
||||
|
||||
|
||||
this.each(ARR_SLICE.call(arguments, 1), function(obj) {
|
||||
|
||||
|
||||
for (var key in obj)
|
||||
if (!this.isUndefined(obj[key]))
|
||||
if (!this.isUndefined(obj[key]))
|
||||
target[key] = obj[key];
|
||||
|
||||
|
||||
}, this);
|
||||
|
||||
|
||||
return target;
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
defaults: function(target) {
|
||||
|
||||
|
||||
this.each(ARR_SLICE.call(arguments, 1), function(obj) {
|
||||
|
||||
|
||||
for (var key in obj)
|
||||
if (this.isUndefined(target[key]))
|
||||
if (this.isUndefined(target[key]))
|
||||
target[key] = obj[key];
|
||||
|
||||
|
||||
}, this);
|
||||
|
||||
|
||||
return target;
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
compose: function() {
|
||||
var toCall = ARR_SLICE.call(arguments);
|
||||
return function() {
|
||||
@ -103,35 +103,35 @@ dat.utils.common = (function () {
|
||||
return args[0];
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
each: function(obj, itr, scope) {
|
||||
|
||||
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);
|
||||
|
||||
|
||||
} else if (obj.length === obj.length + 0) { // Is number but not NaN
|
||||
|
||||
|
||||
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;
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
for (var key in obj)
|
||||
for (var key in obj)
|
||||
if (itr.call(scope, obj[key], key) === this.BREAK)
|
||||
return;
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
|
||||
defer: function(fnc) {
|
||||
setTimeout(fnc, 0);
|
||||
},
|
||||
|
||||
|
||||
toArray: function(obj) {
|
||||
if (obj.toArray) return obj.toArray();
|
||||
return ARR_SLICE.call(obj);
|
||||
@ -140,41 +140,41 @@ dat.utils.common = (function () {
|
||||
isUndefined: function(obj) {
|
||||
return obj === undefined;
|
||||
},
|
||||
|
||||
|
||||
isNull: function(obj) {
|
||||
return obj === null;
|
||||
},
|
||||
|
||||
|
||||
isNaN: function(obj) {
|
||||
return obj !== obj;
|
||||
},
|
||||
|
||||
|
||||
isArray: Array.isArray || function(obj) {
|
||||
return obj.constructor === Array;
|
||||
},
|
||||
|
||||
|
||||
isObject: function(obj) {
|
||||
return obj === Object(obj);
|
||||
},
|
||||
|
||||
|
||||
isNumber: function(obj) {
|
||||
return obj === obj+0;
|
||||
},
|
||||
|
||||
|
||||
isString: function(obj) {
|
||||
return obj === obj+'';
|
||||
},
|
||||
|
||||
|
||||
isBoolean: function(obj) {
|
||||
return obj === false || obj === true;
|
||||
},
|
||||
|
||||
|
||||
isFunction: function(obj) {
|
||||
return Object.prototype.toString.call(obj) === '[object Function]';
|
||||
}
|
||||
|
||||
|
||||
};
|
||||
|
||||
|
||||
})();
|
||||
|
||||
|
||||
@ -349,7 +349,7 @@ dat.dom.dom = (function (common) {
|
||||
var dom = {
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @param elem
|
||||
* @param selectable
|
||||
*/
|
||||
@ -569,7 +569,7 @@ dat.dom.dom = (function (common) {
|
||||
|
||||
// http://stackoverflow.com/posts/2684561/revisions
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @param elem
|
||||
*/
|
||||
isActive: function(elem) {
|
||||
@ -935,7 +935,7 @@ dat.controllers.NumberControllerSlider = (function (NumberController, dom, css,
|
||||
*
|
||||
* @extends dat.controllers.Controller
|
||||
* @extends dat.controllers.NumberController
|
||||
*
|
||||
*
|
||||
* @param {Object} object The object to be manipulated
|
||||
* @param {string} property The name of the property to be manipulated
|
||||
* @param {Number} minValue Minimum allowed value
|
||||
@ -952,11 +952,11 @@ dat.controllers.NumberControllerSlider = (function (NumberController, dom, css,
|
||||
|
||||
this.__background = document.createElement('div');
|
||||
this.__foreground = document.createElement('div');
|
||||
|
||||
|
||||
|
||||
|
||||
dom.bind(this.__background, 'mousedown', onMouseDown);
|
||||
|
||||
|
||||
dom.addClass(this.__background, 'slider');
|
||||
dom.addClass(this.__foreground, 'slider-fg');
|
||||
|
||||
@ -974,7 +974,7 @@ dat.controllers.NumberControllerSlider = (function (NumberController, dom, css,
|
||||
|
||||
var offset = dom.getOffset(_this.__background);
|
||||
var width = dom.getWidth(_this.__background);
|
||||
|
||||
|
||||
_this.setValue(
|
||||
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;
|
||||
|
||||
|
||||
})(dat.controllers.NumberController,
|
||||
dat.dom.dom,
|
||||
dat.utils.css,
|
||||
@ -1079,7 +1079,7 @@ dat.controllers.FunctionController = (function (Controller, dom, common) {
|
||||
FunctionController.prototype,
|
||||
Controller.prototype,
|
||||
{
|
||||
|
||||
|
||||
fire: function() {
|
||||
if (this.__onChange) {
|
||||
this.__onChange.call(this);
|
||||
@ -1154,10 +1154,10 @@ dat.controllers.BooleanController = (function (Controller, dom, common) {
|
||||
},
|
||||
|
||||
updateDisplay: function() {
|
||||
|
||||
|
||||
if (this.getValue() === true) {
|
||||
this.__checkbox.setAttribute('checked', 'checked');
|
||||
this.__checkbox.checked = true;
|
||||
this.__checkbox.checked = true;
|
||||
} else {
|
||||
this.__checkbox.checked = false;
|
||||
}
|
||||
@ -2929,7 +2929,7 @@ dat.controllers.StringController = (function (Controller, dom, common) {
|
||||
this.blur();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
function onChange() {
|
||||
_this.setValue(_this.__input.value);
|
||||
@ -3055,7 +3055,7 @@ dat.controllers.ColorController = (function (Controller, dom, Color, interpret,
|
||||
borderRadius: '12px',
|
||||
zIndex: 1
|
||||
});
|
||||
|
||||
|
||||
common.extend(this.__hue_knob.style, {
|
||||
position: 'absolute',
|
||||
width: '15px',
|
||||
@ -3078,12 +3078,13 @@ dat.controllers.ColorController = (function (Controller, dom, Color, interpret,
|
||||
height: '100%',
|
||||
background: 'none'
|
||||
});
|
||||
|
||||
|
||||
linearGradient(value_field, 'top', 'rgba(0,0,0,0)', '#000');
|
||||
|
||||
common.extend(this.__hue_field.style, {
|
||||
width: '15px',
|
||||
height: '100px',
|
||||
position: 'absolute',
|
||||
display: 'inline-block',
|
||||
border: '1px solid #555',
|
||||
cursor: 'ns-resize'
|
||||
@ -3265,16 +3266,16 @@ dat.controllers.ColorController = (function (Controller, dom, Color, interpret,
|
||||
}
|
||||
|
||||
);
|
||||
|
||||
|
||||
var vendors = ['-moz-','-o-','-webkit-','-ms-',''];
|
||||
|
||||
|
||||
function linearGradient(elem, x, a, b) {
|
||||
elem.style.background = '';
|
||||
common.each(vendors, function(vendor) {
|
||||
elem.style.cssText += 'background: ' + vendor + 'linear-gradient('+x+', '+a+' 0%, ' + b + ' 100%); ';
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function hueGradient(elem) {
|
||||
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%);'
|
||||
@ -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.top = window.innerHeight/2 - dom.getHeight(this.domElement) / 2 + 'px';
|
||||
};
|
||||
|
||||
|
||||
function lockScroll(e) {
|
||||
console.log(e);
|
||||
}
|
||||
@ -3670,4 +3671,4 @@ dat.dom.CenteredDiv = (function (dom, common) {
|
||||
})(dat.dom.dom,
|
||||
dat.utils.common),
|
||||
dat.dom.dom,
|
||||
dat.utils.common);
|
||||
dat.utils.common);
|
||||
|
||||
4
build/dat.gui.min.js
vendored
4
build/dat.gui.min.js
vendored
@ -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.__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%",
|
||||
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;
|
||||
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,
|
||||
@ -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=
|
||||
"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),
|
||||
dat.dom.dom,dat.utils.common);
|
||||
dat.dom.dom,dat.utils.common);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user