public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor: cleaned ColorConverter

Browse Source 
Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>
This commit is contained in:
Corentin Thomasset 2020-06-06 15:00:54 +02:00 committed by Corentin THOMASSET
parent 3e5a26c54c
commit 9f4a257599
1 changed files with 115 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/routes/tools/ColorConverter.vue
View File

@ -10,7 +10,7 @@
canvas-height="300" canvas-height="300"
hide-inputs hide-inputs
mode="rgba" mode="rgba"
v-model="rgb" v-model="rgbPicker"
/> />
</v-col> </v-col>
<v-col cols="12" sm="6" align="center"> <v-col cols="12" sm="6" align="center">
@ -18,7 +18,8 @@
outlined outlined
ref="hex" ref="hex"
label="hex" label="hex"
v-model="_hex" :value="hex"
@input="(v) => updateColors(v, 'hex')"
:rules="rules.hex" :rules="rules.hex"
dense dense
/> />
@ -26,7 +27,8 @@
outlined outlined
label="rgb" label="rgb"
ref="rgb" ref="rgb"
v-model="_rgb" :value="rgb"
@input="(v) => updateColors(v, 'rgb')"
:rules="rules.rgb" :rules="rules.rgb"
dense dense
/> />
@ -34,17 +36,19 @@
outlined outlined
label="hsl" label="hsl"
ref="hsl" ref="hsl"
v-model="_hsl" :value="hsl"
:rules="rules.hsl" :rules="rules.hsl"
@input="(v) => updateColors(v, 'hsl')"
dense dense
/> />
<v-autocomplete <v-combobox
v-model="_keyword" :value="keyword"
outlined outlined
label="css keyword" label="css keyword"
ref="keyword" ref="keyword"
:items="colorsName" :items="colorsName"
:rules="rules.keyword" :rules="rules.keyword"
@change="(v) => updateColors(v, 'keyword')"
no-data-text="This is not an authorized color name." no-data-text="This is not an authorized color name."
dense dense
/> />
@ -63,7 +67,7 @@
export default { export default {
name: "ColorConverter", name: "ColorConverter",
data: () => ({ data: () => ({
rgb: { rgbPicker: {
"r": 76, "r": 76,
"g": 175, "g": 175,
"b": 80 "b": 80
@ -87,62 +91,123 @@
required, required,
v => !!colors[v] || 'Value should be from the list' v => !!colors[v] || 'Value should be from the list'
] ]
} },
hex: '#4CAF50',
rgb: undefined,
hsl: undefined,
keyword: undefined,
}), }),
computed: { mounted() {
_hex: { this.updateColors(this.hex, 'hex');
get() { },
const result = convert.rgb.hex(this.rgb.r, this.rgb.g, this.rgb.b) methods: {
return `#${result}` setHSL(r, g, b) {
}, const [h, s, l] = convert.rgb.hsl(r, g, b)
set(value) { this.hsl = `hsl(${Math.floor(h)}, ${Math.floor(s)}%, ${Math.floor(l)}%)`;
if (this.$refs.hex.validate()) {
const [r, g, b] = convert.hex.rgb(value.replace(/#/g, ''))
this.rgb = {r, g, b}
}
}
}, },
_rgb: { setRGB(r, g, b) {
get() { this.rgb = `rgb(${r}, ${g}, ${b})`;
return `rgb(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b})` },
}, setHEX(r, g, b) {
set(value) { const result = convert.rgb.hex(r, g, b);
if (this.$refs.rgb.validate()) { this.hex = `#${result}`
},
setKeyword(r, g, b) {
this.keyword = convert.rgb.keyword(r, g, b);
},
updateColors(value, fromType) {
if (this.$refs[fromType].validate()) {
if (fromType === 'rgb') {
const [r, g, b] = value.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(v => parseInt(v)); const [r, g, b] = value.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(v => parseInt(v));
this.rgb = {r, g, b} this.rgbPicker = {r, g, b}
}
} this.setHEX(r, g, b);
}, this.setHSL(r, g, b);
_hsl: { this.setKeyword(r, g, b);
get() { } else if (fromType === 'hex') {
const [h, s, l] = convert.rgb.hsl(this.rgb.r, this.rgb.g, this.rgb.b) const [r, g, b] = convert.hex.rgb(value.replace(/#/g, ''));
return `hsl(${Math.floor(h)}, ${Math.floor(s)}%, ${Math.floor(l)}%)` this.rgbPicker = {r, g, b}
},
set(value) { this.setRGB(r, g, b);
if (this.$refs.hsl.validate()) { this.setHSL(r, g, b);
this.setKeyword(r, g, b);
} else if (fromType === 'hsl') {
const [h, s, l] = value.match(/^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/).slice(1).map(v => parseInt(v)); const [h, s, l] = value.match(/^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/).slice(1).map(v => parseInt(v));
const [r, g, b] = convert.hsl.rgb(h, s, l) const [r, g, b] = convert.hsl.rgb(h, s, l)
this.rgbPicker = {r, g, b}
this.rgb = {r, g, b} this.setRGB(r, g, b);
} this.setHEX(r, g, b);
} this.setKeyword(r, g, b);
}, } else if (fromType === 'keyword') {
_keyword: {
get() {
return convert.rgb.keyword(this.rgb.r, this.rgb.g, this.rgb.b)
},
set(value) {
if (this.$refs.keyword.validate()) {
try { try {
const [r, g, b] = convert.keyword.rgb(value) const [r, g, b] = convert.keyword.rgb(value);
this.rgb = {r, g, b} this.rgbPicker = {r, g, b}
this.setRGB(r, g, b);
this.setHEX(r, g, b);
this.setHSL(r, g, b);
} catch (ignored) { } catch (ignored) {
// ignored // ignored
} }
} }
} }
} }
} },
// computed: {
// _hex: {
// get() {
// const result = convert.rgb.hex(this.rgb.r, this.rgb.g, this.rgb.b)
// return `#${result}`
// },
// set(value) {
// if (this.$refs.hex.validate()) {
// const [r, g, b] = convert.hex.rgb(value.replace(/#/g, ''))
// this.rgb = {r, g, b}
// }
// }
// },
// _rgb: {
// get() {
// return `rgb(${this.rgb.r}, ${this.rgb.g}, ${this.rgb.b})`
// },
// set(value) {
// if (this.$refs.rgb.validate()) {
// const [r, g, b] = value.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(v => parseInt(v));
// this.rgb = {r, g, b}
// }
// }
// },
// _hsl: {
// get() {
// const [h, s, l] = convert.rgb.hsl(this.rgb.r, this.rgb.g, this.rgb.b)
// return `hsl(${Math.floor(h)}, ${Math.floor(s)}%, ${Math.floor(l)}%)`
// },
// set(value) {
// if (this.$refs.hsl.validate()) {
// const [h, s, l] = value.match(/^hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)$/).slice(1).map(v => parseInt(v));
// const [r, g, b] = convert.hsl.rgb(h, s, l)
//
// this.rgb = {r, g, b}
// }
// }
// },
// _keyword: {
// get() {
// return convert.rgb.keyword(this.rgb.r, this.rgb.g, this.rgb.b)
// },
// set(value) {
// if (this.$refs.keyword.validate()) {
// try {
// const [r, g, b] = convert.keyword.rgb(value)
// this.rgb = {r, g, b}
// } catch (ignored) {
// // ignored
// }
// }
// }
// }
// }
} }
</script> </script>