summaryrefslogtreecommitdiff
path: root/framework/Web/Javascripts/js/debug/colorpicker.js
diff options
context:
space:
mode:
Diffstat (limited to 'framework/Web/Javascripts/js/debug/colorpicker.js')
-rw-r--r--framework/Web/Javascripts/js/debug/colorpicker.js357
1 files changed, 56 insertions, 301 deletions
diff --git a/framework/Web/Javascripts/js/debug/colorpicker.js b/framework/Web/Javascripts/js/debug/colorpicker.js
index 914c2d75..a48e6dc5 100644
--- a/framework/Web/Javascripts/js/debug/colorpicker.js
+++ b/framework/Web/Javascripts/js/debug/colorpicker.js
@@ -1,253 +1,8 @@
-//-------------------- ricoColor.js
-if(typeof(Rico) == "undefined") Rico = {};
-
-Rico.Color = Class.create();
-
-Rico.Color.prototype = {
-
- initialize: function(red, green, blue) {
- this.rgb = { r: red, g : green, b : blue };
- },
-
- setRed: function(r) {
- this.rgb.r = r;
- },
-
- setGreen: function(g) {
- this.rgb.g = g;
- },
-
- setBlue: function(b) {
- this.rgb.b = b;
- },
-
- setHue: function(h) {
-
- // get an HSB model, and set the new hue...
- var hsb = this.asHSB();
- hsb.h = h;
-
- // convert back to RGB...
- this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b);
- },
-
- setSaturation: function(s) {
- // get an HSB model, and set the new hue...
- var hsb = this.asHSB();
- hsb.s = s;
-
- // convert back to RGB and set values...
- this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, hsb.b);
- },
-
- setBrightness: function(b) {
- // get an HSB model, and set the new hue...
- var hsb = this.asHSB();
- hsb.b = b;
-
- // convert back to RGB and set values...
- this.rgb = Rico.Color.HSBtoRGB( hsb.h, hsb.s, hsb.b );
- },
-
- darken: function(percent) {
- var hsb = this.asHSB();
- this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.max(hsb.b - percent,0));
- },
-
- brighten: function(percent) {
- var hsb = this.asHSB();
- this.rgb = Rico.Color.HSBtoRGB(hsb.h, hsb.s, Math.min(hsb.b + percent,1));
- },
-
- blend: function(other) {
- this.rgb.r = Math.floor((this.rgb.r + other.rgb.r)/2);
- this.rgb.g = Math.floor((this.rgb.g + other.rgb.g)/2);
- this.rgb.b = Math.floor((this.rgb.b + other.rgb.b)/2);
- },
-
- isBright: function() {
- var hsb = this.asHSB();
- return this.asHSB().b > 0.5;
- },
-
- isDark: function() {
- return ! this.isBright();
- },
-
- asRGB: function() {
- return "rgb(" + this.rgb.r + "," + this.rgb.g + "," + this.rgb.b + ")";
- },
-
- asHex: function() {
- return "#" + this.rgb.r.toColorPart() + this.rgb.g.toColorPart() + this.rgb.b.toColorPart();
- },
-
- asHSB: function() {
- return Rico.Color.RGBtoHSB(this.rgb.r, this.rgb.g, this.rgb.b);
- },
-
- toString: function() {
- return this.asHex();
- }
-
-};
-
-Rico.Color.createFromHex = function(hexCode) {
-
- if ( hexCode.indexOf('#') == 0 )
- hexCode = hexCode.substring(1);
-
- var red = "ff", green = "ff", blue="ff";
- if(hexCode.length > 4)
- {
- red = hexCode.substring(0,2);
- green = hexCode.substring(2,4);
- blue = hexCode.substring(4,6);
- }
- else if(hexCode.length > 0 & hexCode.length < 4)
- {
- var r = hexCode.substring(0,1);
- var g = hexCode.substring(1,2);
- var b = hexCode.substring(2);
- red = r+r;
- green = g+g;
- blue = b+b;
- }
- return new Rico.Color( parseInt(red,16), parseInt(green,16), parseInt(blue,16) );
-}
-
-/**
- * Factory method for creating a color from the background of
- * an HTML element.
- */
-Rico.Color.createColorFromBackground = function(elem) {
-
- var actualColor = Element.getStyle($(elem), "background-color");
- if ( actualColor == "transparent" && elem.parent )
- return Rico.Color.createColorFromBackground(elem.parent);
-
- if ( actualColor == null )
- return new Rico.Color(255,255,255);
-
- if ( actualColor.indexOf("rgb(") == 0 ) {
- var colors = actualColor.substring(4, actualColor.length - 1 );
- var colorArray = colors.split(",");
- return new Rico.Color( parseInt( colorArray[0] ),
- parseInt( colorArray[1] ),
- parseInt( colorArray[2] ) );
-
- }
- else if ( actualColor.indexOf("#") == 0 ) {
- return Rico.Color.createFromHex(actualColor);
- }
- else
- return new Rico.Color(255,255,255);
-}
-
-Rico.Color.HSBtoRGB = function(hue, saturation, brightness) {
-
- var red = 0;
- var green = 0;
- var blue = 0;
-
- if (saturation == 0) {
- red = parseInt(brightness * 255.0 + 0.5);
- green = red;
- blue = red;
- }
- else {
- var h = (hue - Math.floor(hue)) * 6.0;
- var f = h - Math.floor(h);
- var p = brightness * (1.0 - saturation);
- var q = brightness * (1.0 - saturation * f);
- var t = brightness * (1.0 - (saturation * (1.0 - f)));
-
- switch (parseInt(h)) {
- case 0:
- red = (brightness * 255.0 + 0.5);
- green = (t * 255.0 + 0.5);
- blue = (p * 255.0 + 0.5);
- break;
- case 1:
- red = (q * 255.0 + 0.5);
- green = (brightness * 255.0 + 0.5);
- blue = (p * 255.0 + 0.5);
- break;
- case 2:
- red = (p * 255.0 + 0.5);
- green = (brightness * 255.0 + 0.5);
- blue = (t * 255.0 + 0.5);
- break;
- case 3:
- red = (p * 255.0 + 0.5);
- green = (q * 255.0 + 0.5);
- blue = (brightness * 255.0 + 0.5);
- break;
- case 4:
- red = (t * 255.0 + 0.5);
- green = (p * 255.0 + 0.5);
- blue = (brightness * 255.0 + 0.5);
- break;
- case 5:
- red = (brightness * 255.0 + 0.5);
- green = (p * 255.0 + 0.5);
- blue = (q * 255.0 + 0.5);
- break;
- }
- }
-
- return { r : parseInt(red), g : parseInt(green) , b : parseInt(blue) };
-}
-
-Rico.Color.RGBtoHSB = function(r, g, b) {
-
- var hue;
- var saturaton;
- var brightness;
-
- var cmax = (r > g) ? r : g;
- if (b > cmax)
- cmax = b;
-
- var cmin = (r < g) ? r : g;
- if (b < cmin)
- cmin = b;
-
- brightness = cmax / 255.0;
- if (cmax != 0)
- saturation = (cmax - cmin)/cmax;
- else
- saturation = 0;
-
- if (saturation == 0)
- hue = 0;
- else {
- var redc = (cmax - r)/(cmax - cmin);
- var greenc = (cmax - g)/(cmax - cmin);
- var bluec = (cmax - b)/(cmax - cmin);
-
- if (r == cmax)
- hue = bluec - greenc;
- else if (g == cmax)
- hue = 2.0 + redc - bluec;
- else
- hue = 4.0 + greenc - redc;
-
- hue = hue / 6.0;
- if (hue < 0)
- hue = hue + 1.0;
- }
-
- return { h : hue, s : saturation, b : brightness };
-}
-
-
-
Prado.WebUI.TColorPicker = Class.create();
Object.extend(Prado.WebUI.TColorPicker,
{
- palettes:
+ palettes:
{
Small : [["fff", "fcc", "fc9", "ff9", "ffc", "9f9", "9ff", "cff", "ccf", "fcf"],
["ccc", "f66", "f96", "ff6", "ff3", "6f9", "3ff", "6ff", "99f", "f9f"],
@@ -262,7 +17,7 @@ Object.extend(Prado.WebUI.TColorPicker,
["808080"/*gray*/, "ff0000"/*red*/, "800080"/*purple*/, "000000"/*black*/]]
},
- UIImages :
+ UIImages :
{
'button.gif' : 'button.gif',
// 'target_black.gif' : 'target_black.gif',
@@ -273,11 +28,11 @@ Object.extend(Prado.WebUI.TColorPicker,
}
});
-Object.extend(Prado.WebUI.TColorPicker.prototype,
+Object.extend(Prado.WebUI.TColorPicker.prototype,
{
initialize : function(options)
{
- var basics =
+ var basics =
{
Palette : 'Small',
ClassName : 'TColorPicker',
@@ -286,7 +41,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
CancelButtonText : 'Cancel',
ShowColorPicker : true
}
-
+
this.element = null;
this.showing = false;
@@ -302,10 +57,10 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
updatePicker : function(e)
{
- var color = Rico.Color.createFromHex(this.input.value);
+ var color = Rico.Color.createFromHex(this.input.value);
this.button.style.backgroundColor = color.toString();
},
-
+
buttonOnClick : function(event)
{
var mode = this.options['Mode'];
@@ -329,7 +84,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
this.initializeFullPicker();
}
this.show(mode);
- },
+ },
show : function(type)
{
@@ -341,14 +96,14 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
this.element.style.top = (pos[1]-1) + "px";
this.element.style.left = pos[0] + "px";
this.element.style.display = "block";
-
+
this.ieHack(type);
//observe for clicks on the document body
this._documentClickEvent = this.hideOnClick.bindEvent(this, type);
this._documentKeyDownEvent = this.keyPressed.bindEvent(this, type);
Event.observe(document.body, "click", this._documentClickEvent);
- Event.observe(document,"keydown", this._documentKeyDownEvent);
+ Event.observe(document,"keydown", this._documentKeyDownEvent);
this.showing = true;
if(type == "Full")
@@ -360,7 +115,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
}
}
},
-
+
hide : function(event)
{
if(this.showing)
@@ -371,11 +126,11 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
this.element.style.display = "none";
this.showing = false;
Event.stopObserving(document.body, "click", this._documentClickEvent);
- Event.stopObserving(document,"keydown", this._documentKeyDownEvent);
-
+ Event.stopObserving(document,"keydown", this._documentKeyDownEvent);
+
if(this._observingMouseMove)
- {
- Event.stopObserving(document.body, "mousemove", this._onMouseMove);
+ {
+ Event.stopObserving(document.body, "mousemove", this._onMouseMove);
this._observingMouseMove = false;
}
}
@@ -397,16 +152,16 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
within = within || el == this.button;
within = within || el == this.input;
if(within) break;
- el = el.parentNode;
+ el = el.parentNode;
}
while(el);
if(!within) this.hide(ev);
},
- ieHack : function()
+ ieHack : function()
{
// IE hack
- if(this.iePopUp)
+ if(this.iePopUp)
{
this.iePopUp.style.display = "block";
this.iePopUp.style.top = (this.element.offsetTop) + "px";
@@ -449,7 +204,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
cellOnClick : function(e)
{
- var el = Event.element(e);
+ var el = Event.element(e);
if(el.tagName.toLowerCase() != "img")
return;
var color = Rico.Color.createColorFromBackground(el);
@@ -465,15 +220,15 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
},
getFullPickerContainer : function(pickerID)
- {
+ {
//create the 3 buttons
- this.buttons =
+ this.buttons =
{
//Less : INPUT({value:'Less Colors', className:'button', type:'button'}),
OK : INPUT({value:this.options.OKButtonText, className:'button', type:'button'}),
Cancel : INPUT({value:this.options.CancelButtonText, className:'button', type:'button'})
};
-
+
//create the 6 inputs
var inputs = {};
['H','S','V','R','G','B'].each(function(type)
@@ -484,13 +239,13 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
//create the HEX input
inputs['HEX'] = INPUT({className:'hex',type:'text',size:'6',maxlength:'6'});
this.inputs = inputs;
-
+
var images = Prado.WebUI.TColorPicker.UIImages;
this.inputs['currentColor'] = SPAN({className:'currentColor'});
this.inputs['oldColor'] = SPAN({className:'oldColor'});
- var inputsTable =
+ var inputsTable =
TABLE({className:'inputs'}, TBODY(null,
TR(null,
TD({className:'currentcolor',colSpan:2},
@@ -503,30 +258,30 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
TR(null,
TD(null,'S:'),
TD(null,this.inputs['S'], '%')),
-
- TR(null,
+
+ TR(null,
TD(null,'V:'),
TD(null,this.inputs['V'], '%')),
-
- TR(null,
+
+ TR(null,
TD({className:'gap'},'R:'),
TD({className:'gap'},this.inputs['R'])),
-
- TR(null,
+
+ TR(null,
TD(null,'G:'),
TD(null, this.inputs['G'])),
- TR(null,
+ TR(null,
TD(null,'B:'),
TD(null, this.inputs['B'])),
- TR(null,
+ TR(null,
TD({className:'gap'},'#'),
TD({className:'gap'},this.inputs['HEX']))
));
- var UIimages =
- {
+ var UIimages =
+ {
selector : SPAN({className:'selector'}),
background : SPAN({className:'colorpanel'}),
slider : SPAN({className:'slider'}),
@@ -539,23 +294,23 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
var filter = "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader";
UIimages['background'] = SPAN({className:'colorpanel',style:filter+"(src='"+images['background.png']+"' sizingMethod=scale);"})
}
-
+
this.inputs = Object.extend(this.inputs, UIimages);
- var pickerTable =
+ var pickerTable =
TABLE(null,TBODY(null,
TR({className:'selection'},
TD({className:'colors'},UIimages['selector'],UIimages['background']),
TD({className:'hue'},UIimages['slider'],UIimages['hue']),
TD({className:'inputs'}, inputsTable)
),
- TR({className:'options'},
- TD({colSpan:3},
- this.buttons['OK'],
+ TR({className:'options'},
+ TD({colSpan:3},
+ this.buttons['OK'],
this.buttons['Cancel'])
)
));
-
+
return DIV({className:this.options['ClassName']+" FullColorPicker",
id:pickerID+"_picker"},pickerTable);
},
@@ -566,16 +321,16 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
this.inputs.oldColor.style.backgroundColor = color.asHex();
this.setColor(color,true);
- var i = 0;
+ var i = 0;
for(var type in this.inputs)
{
- Event.observe(this.inputs[type], "change",
+ Event.observe(this.inputs[type], "change",
this.onInputChanged.bindEvent(this,type));
i++;
if(i > 6) break;
}
-
+
this.isMouseDownOnColor = false;
this.isMouseDownOnHue = false;
@@ -588,9 +343,9 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
Event.observe(this.inputs.selector, "mousedown", this._onColorMouseDown);
Event.observe(this.inputs.hue, "mousedown", this._onHueMouseDown);
Event.observe(this.inputs.slider, "mousedown", this._onHueMouseDown);
-
+
Event.observe(document.body, "mouseup", this._onMouseUp);
-
+
this.observeMouseMovement();
Event.observe(this.buttons.Cancel, "click", this.hide.bindEvent(this,this.options['Mode']));
@@ -603,7 +358,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
{
Event.observe(document.body, "mousemove", this._onMouseMove);
this._observingMouseMove = true;
- }
+ }
},
onColorMouseDown : function(ev)
@@ -634,15 +389,15 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
if(this.isMouseDownOnHue)
this.changeH(ev);
Event.stop(ev);
- },
+ },
changeSV : function(ev)
{
var px = Event.pointerX(ev);
var py = Event.pointerY(ev);
var pos = Position.cumulativeOffset(this.inputs.background);
-
- var x = this.truncate(px - pos[0],0,255);
+
+ var x = this.truncate(px - pos[0],0,255);
var y = this.truncate(py - pos[1],0,255);
@@ -651,7 +406,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
var current_s = parseInt(this.inputs.S.value);
var current_b = parseInt(this.inputs.V.value);
-
+
if(current_s == parseInt(s*100) && current_b == parseInt(b*100)) return;
var h = this.truncate(this.inputs.H.value,0,360)/360;
@@ -662,7 +417,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
this.inputs.selector.style.left = x+"px";
this.inputs.selector.style.top = y+"px";
-
+
this.inputs.currentColor.style.backgroundColor = color.asHex();
return this.setColor(color);
@@ -673,7 +428,7 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
var py = Event.pointerY(ev);
var pos = Position.cumulativeOffset(this.inputs.background);
var y = this.truncate(py - pos[1],0,255);
-
+
var h = (255-y)/255;
var current_h = this.truncate(this.inputs.H.value,0,360);
current_h = current_h == 0 ? 360 : current_h;
@@ -744,12 +499,12 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
this.inputs.G.value = color.rgb.g;
this.inputs.B.value = color.rgb.b;
this.inputs.HEX.value = color.asHex().substring(1).toUpperCase();
-
+
var images = Prado.WebUI.TColorPicker.UIImages;
var changeCss = color.isBright() ? 'removeClassName' : 'addClassName';
Element[changeCss](this.inputs.selector, 'target_white');
-
+
if(update)
this.updateSelectors(color);
},
@@ -758,11 +513,11 @@ Object.extend(Prado.WebUI.TColorPicker.prototype,
{
var hsb = color.asHSB();
var pos = [hsb.s*255, hsb.b*255, hsb.h*255];
-
+
this.inputs.selector.style.left = this.truncate(pos[0],0,255)+"px";
this.inputs.selector.style.top = this.truncate(255-pos[1],0,255)+"px";
this.inputs.slider.style.top = this.truncate(255-pos[2],0,255)+"px";
-
+
var hue = new Rico.Color(color.rgb.r,color.rgb.g,color.rgb.b);
hue.setSaturation(1); hue.setBrightness(1);
this.inputs.background.style.backgroundColor = hue.asHex();
generated by cgit v1.2.3 (git 2.39.1) at 2024-08-13 15:49:27 +0000