|
|
@@ -0,0 +1,146 @@
|
|
|
+class RGB {
|
|
|
+ #r = 0
|
|
|
+ #g = 0
|
|
|
+ #b = 0
|
|
|
+
|
|
|
+ constructor(){
|
|
|
+ console.log(this.#r, this.#g, this.#b)
|
|
|
+ }
|
|
|
+
|
|
|
+ checkRange(value){
|
|
|
+ return value >= 0 && value <= 255
|
|
|
+ }
|
|
|
+
|
|
|
+ get r(){
|
|
|
+ return this.#r
|
|
|
+ }
|
|
|
+
|
|
|
+ set r(newR){
|
|
|
+ this.#r = this.checkRange(newR) ? newR : this.#r
|
|
|
+ }
|
|
|
+
|
|
|
+ get g(){
|
|
|
+ return this.#g
|
|
|
+ }
|
|
|
+
|
|
|
+ set g(newG){
|
|
|
+ this.#g = this.checkRange(newG) ? newG : this.#g
|
|
|
+ }
|
|
|
+
|
|
|
+ get b(){
|
|
|
+ return this.#b
|
|
|
+ }
|
|
|
+
|
|
|
+ set b(newB){
|
|
|
+ this.#b = this.checkRange(newB) ? newB : this.#b
|
|
|
+ }
|
|
|
+
|
|
|
+ get hex(){
|
|
|
+ const t = a => (a < 16 ? '0' : '') + a.toString(16).toUpperCase()
|
|
|
+
|
|
|
+ return `#${t(this.#r)}${t(this.#g)}${t(this.#b)}`
|
|
|
+ }
|
|
|
+
|
|
|
+ set hex(newHex){
|
|
|
+ const hexRegexp = /^#([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})([0-9A-Fa-f]{2})$/
|
|
|
+ let parsed;
|
|
|
+ if (parsed = newHex.match(hexRegexp)){
|
|
|
+ //console.log(parsed)
|
|
|
+ const [,r,g,b] = parsed
|
|
|
+ this.r = parseInt(r, 16)
|
|
|
+ this.g = parseInt(g, 16)
|
|
|
+ this.b = parseInt(b, 16)
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ throw SyntaxError('wrong hex color')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ get rgb(){
|
|
|
+ const {r,g,b} = this
|
|
|
+ return `rgb(${r},${g},${b})`
|
|
|
+ }
|
|
|
+
|
|
|
+ set rgb(newRGB) {
|
|
|
+ const rgbRegexp = /^\s*rgb\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)\s*$/
|
|
|
+ let parsed;
|
|
|
+ if (parsed = newRGB.match(rgbRegexp)){
|
|
|
+ const [,r,g,b] = parsed
|
|
|
+ this.#r = +r;
|
|
|
+ this.#g = +g;
|
|
|
+ this.#b = +b;
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ throw SyntaxError('wrong rgb color')
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+class RGBA extends RGB {
|
|
|
+ #a = 0;
|
|
|
+
|
|
|
+ constructor() {
|
|
|
+ super();
|
|
|
+ console.log(this.r, this.g, this.b, this.#a)
|
|
|
+ }
|
|
|
+
|
|
|
+ checkAlphaRange(value){
|
|
|
+ return value >= 0 && value <= 1
|
|
|
+ }
|
|
|
+
|
|
|
+ get a(){
|
|
|
+ return this.#a
|
|
|
+ }
|
|
|
+
|
|
|
+ set a(newA){
|
|
|
+ this.#a = this.checkAlphaRange(newA) ? newA : this.#a
|
|
|
+ }
|
|
|
+
|
|
|
+ get rgba(){
|
|
|
+ const {r,g,b,a} = this
|
|
|
+ return `rgba(${r},${g},${b},${a})`
|
|
|
+ }
|
|
|
+
|
|
|
+ set rgba(newRGBA) {
|
|
|
+ const rgbRegexp = /^\s*rgba\s*\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*((0\.\d+)|1|0)\s*\)\s*$/
|
|
|
+ let parsed;
|
|
|
+ if (parsed = newRGBA.match(rgbRegexp)){
|
|
|
+ const [,r,g,b,a] = parsed
|
|
|
+ this.r = +r
|
|
|
+ this.g = +g
|
|
|
+ this.b = +b
|
|
|
+ this.a = +a
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ throw SyntaxError('wrong rgba color')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ set color(color) {
|
|
|
+ if(color.includes('#')) {
|
|
|
+ this.hex = color;
|
|
|
+ } else if(color.includes('rgba')) {
|
|
|
+ this.rgba = color;
|
|
|
+ } else if(color.includes('rgb')) {
|
|
|
+ this.rgb = color;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+let rgb = new RGB;
|
|
|
+let rgb2 = new RGB;
|
|
|
+let rgba = new RGBA;
|
|
|
+let rgba2 = new RGBA;
|
|
|
+let rgba3 = new RGBA;
|
|
|
+let rgba4 = new RGBA;
|
|
|
+rgb.hex = '#eeccee';
|
|
|
+console.log('rgb', rgb);
|
|
|
+rgb2.rgb = 'rgb(238, 204, 238)';
|
|
|
+console.log('rgb2', rgb2);
|
|
|
+console.log('get rgba', rgba.rgba)
|
|
|
+rgba2.color = 'rgb(200, 45, 255)';
|
|
|
+rgba3.color = '#eeeccc';
|
|
|
+rgba4.color = 'rgba(102, 45, 255, 0.7)';
|
|
|
+console.log(rgba2)
|
|
|
+console.log(rgba3)
|
|
|
+console.log(rgba4)
|
