https://www.seehafen-stade.de/s/tc-www/js/modules/colorpicker/ColorValuePicker.js

1/*
2Copyright (c) 2007 John Dyer (http://johndyer.name)
3MIT style license
4*/
5
6if (!window.Refresh) Refresh = {};
7if (!Refresh.Web) Refresh.Web = {};
8
9Refresh.Web.ColorValuePicker = Class.create();
10Refresh.Web.ColorValuePicker.prototype = {
11	initialize: function(id) {
12
13		this.id = id;
14
15		this.onValuesChanged = null;
16
17		this._hueInput = $(this.id + '_Hue');
18		this._valueInput = $(this.id + '_Brightness');
19		this._saturationInput = $(this.id + '_Saturation');
20
21		this._redInput = $(this.id + '_Red');
22		this._greenInput = $(this.id + '_Green');
23		this._blueInput = $(this.id + '_Blue');
24
25		this._hexInput = $(this.id + '_Hex');
26
27		// assign events
28
29		// events
30		this._event_onHsvKeyUp = this._onHsvKeyUp.bindAsEventListener(this);
31		this._event_onHsvBlur = this._onHsvBlur.bindAsEventListener(this);
32		this._event_onRgbKeyUp = this._onRgbKeyUp.bindAsEventListener(this);
33		this._event_onRgbBlur = this._onRgbBlur.bindAsEventListener(this);
34		this._event_onHexKeyUp = this._onHexKeyUp.bindAsEventListener(this);
35		
36		// HSB
37		Event.observe( this._hueInput,'keyup', this._event_onHsvKeyUp);
38		Event.observe( this._valueInput,'keyup',this._event_onHsvKeyUp);
39		Event.observe( this._saturationInput,'keyup',this._event_onHsvKeyUp);
40		Event.observe( this._hueInput,'blur', this._event_onHsvBlur);
41		Event.observe( this._valueInput,'blur',this._event_onHsvBlur);
42		Event.observe( this._saturationInput,'blur',this._event_onHsvBlur);
43
44		// RGB
45		Event.observe( this._redInput,'keyup', this._event_onRgbKeyUp);
46		Event.observe( this._greenInput,'keyup', this._event_onRgbKeyUp);
47		Event.observe( this._blueInput,'keyup', this._event_onRgbKeyUp);
48		Event.observe( this._redInput,'blur', this._event_onRgbBlur);
49		Event.observe( this._greenInput,'blur', this._event_onRgbBlur);
50		Event.observe( this._blueInput,'blur', this._event_onRgbBlur);
51
52		// HEX
53		Event.observe( this._hexInput,'keyup', this._event_onHexKeyUp);
54		
55		this.color = new Refresh.Web.Color();
56		
57		// get an initial value
58		if (this._hexInput.value != '')
59			this.color.setHex(this._hexInput.value);
60			
61			
62		// set the others based on initial value
63		this._hexInput.value = this.color.hex;
64		
65		this._redInput.value = this.color.r;
66		this._greenInput.value = this.color.g;
67		this._blueInput.value = this.color.b;
68		
69		this._hueInput.value = this.color.h;
70		this._saturationInput.value = this.color.s;
71		this._valueInput.value = this.color.v;		
72
73	},
74	_onHsvKeyUp: function(e) {
75		if (e.target.value == '') return;
76		this.validateHsv(e);
77		this.setValuesFromHsv();
78		if (this.onValuesChanged) this.onValuesChanged(this);
79	},
80	_onRgbKeyUp: function(e) {
81		if (e.target.value == '') return;
82		this.validateRgb(e);
83		this.setValuesFromRgb();
84		if (this.onValuesChanged) this.onValuesChanged(this);
85	},
86	_onHexKeyUp: function(e) {
87		if (e.target.value == '') return;
88		this.validateHex(e);
89		this.setValuesFromHex();
90		if (this.onValuesChanged) this.onValuesChanged(this);
91	},
92	_onHsvBlur: function(e) {
93		if (e.target.value == '')
94			this.setValuesFromRgb();
95	},
96	_onRgbBlur: function(e) {
97		if (e.target.value == '')
98			this.setValuesFromHsv();
99	},
100	HexBlur: function(e) {
101		if (e.target.value == '')
102			this.setValuesFromHsv();
103	},
104	validateRgb: function(e) {
105		if (!this._keyNeedsValidation(e)) return e;
106		this._redInput.value = this._setValueInRange(this._redInput.value,0,255);
107		this._greenInput.value = this._setValueInRange(this._greenInput.value,0,255);
108		this._blueInput.value = this._setValueInRange(this._blueInput.value,0,255);
109	},
110	validateHsv: function(e) {
111		if (!this._keyNeedsValidation(e)) return e;
112		this._hueInput.value = this._setValueInRange(this._hueInput.value,0,359);
113		this._saturationInput.value = this._setValueInRange(this._saturationInput.value,0,100);
114		this._valueInput.value = this._setValueInRange(this._valueInput.value,0,100);
115	},
116	validateHex: function(e) {
117		if (!this._keyNeedsValidation(e)) return e;
118		var hex = new String(this._hexInput.value).toUpperCase();
119		hex = hex.replace(/[^A-F0-0]/g, '0');
120		if (hex.length > 6) hex = hex.substring(0, 6);
121		this._hexInput.value = hex;
122	},
123	_keyNeedsValidation: function(e) {
124
125		if (e.keyCode == 9  || // TAB
126			e.keyCode == 16  || // Shift
127			e.keyCode == 38 || // Up arrow
128			e.keyCode == 29 || // Right arrow
129			e.keyCode == 40 || // Down arrow
130			e.keyCode == 37    // Left arrow
131		) return false;
132
133		return true;
134	},
135	_setValueInRange: function(value,min,max) {
136		if (value == '' || isNaN(value)) 		
137			return min;
138		
139		value = parseInt(value);
140		if (value > max) 
141			return max;
142		if (value < min) 
143			return min;
144		
145		return value;
146	},
147	setValuesFromRgb: function() {
148		this.color.setRgb(this._redInput.value, this._greenInput.value, this._blueInput.value);
149		this._hexInput.value = this.color.hex;
150		this._hueInput.value = this.color.h;
151		this._saturationInput.value = this.color.s;
152		this._valueInput.value = this.color.v;
153	},
154	setValuesFromHsv: function() {
155        this._hueInput.value = this._setValueInRange(this._hueInput.value,0,359);
156        this._saturationInput.value = this._setValueInRange(this._saturationInput.value,0,100);
157        this._valueInput.value = this._setValueInRange(this._valueInput.value,0,100);
158
159		this.color.setHsv(this._hueInput.value, this._saturationInput.value, this._valueInput.value);		
160		
161		this._hexInput.value = this.color.hex;
162		this._redInput.value = this.color.r;
163		this._greenInput.value = this.color.g;
164		this._blueInput.value = this.color.b;
165	},
166	setValuesFromHex: function() {
167		this.color.setHex(this._hexInput.value);
168
169		this._redInput.value = this.color.r;
170		this._greenInput.value = this.color.g;
171		this._blueInput.value = this.color.b;
172		
173		this._hueInput.value = this.color.h;
174		this._saturationInput.value = this.color.s;
175		this._valueInput.value = this.color.v;
176	}
177};