brian/batch-color-converter
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding a click to copy function, needs indication that it was successful

Browse Source
This commit is contained in:
Brian 2021-08-03 14:37:36 -06:00
parent bb060ea691
commit 772913e702
Signed by: brian
GPG Key ID: DE1A5390A3B84CD8
2 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
index.php
View File

@ -53,10 +53,12 @@
</head> </head>
<body class="font-open-sans antialiased"> <body class="font-open-sans antialiased">
<div id="app" class="flex flex-col items-center justify-center w-full min-h-screen"> <div id="app" class="flex flex-col items-center justify-center w-full min-h-screen">
<div class="w-1/2"> <div class="w-3/5">
<h1 class="text-center text-2xl font-bold">Batch Color Converter</h1> <h1 class="text-center text-2xl font-bold">Batch Color Converter</h1>
<button type="button" class="w-full py-4 uppercase font-bold text-white bg-pink-600 rounded my-8" v-on:click="batchConvert()">Convert</button> <p class="mt-6">Click a particular cell in the table with HSL, RGB, or hex to copy that value.</p>
<button type="button" class="block w-full py-4 uppercase font-bold text-white bg-pink-600 rounded mt-6 mb-8" v-on:click="batchConvert()">Convert</button>
<div class="flex flex-row mb-8"> <div class="flex flex-row mb-8">
<div class="flex w-1/3 mr-4"> <div class="flex w-1/3 mr-4">
@ -78,9 +80,9 @@
<td v-show="!color.error"> <td v-show="!color.error">
<div class="block mx-2 my-4" style="height: 25px;" :style="{ background: color.hex }"></div> <div class="block mx-2 my-4" style="height: 25px;" :style="{ background: color.hex }"></div>
</td> </td>
<td v-show="!color.error" class="text-center px-2 py-4">{{ color.hex }}</td> <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.hex)">{{ color.hex }}</div></td>
<td v-show="!color.error" class="text-center px-2 py-4">{{ color.rgb }}</td> <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.rgb)">{{ color.rgb }}</div></td>
<td v-show="!color.error" class="text-center px-2 py-4">{{ color.hsl }}</td> <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.hsl)">{{ color.hsl }}</div></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>

13
js/app.js
View File

@ -1,3 +1,5 @@
const clipboard = navigator.clipboard;
let app = new Vue({ let app = new Vue({
el: '#app', el: '#app',
@ -10,6 +12,8 @@ let app = new Vue({
], ],
inputBox: "ccc\n#4f46e5\n#db2777aa\n", inputBox: "ccc\n#4f46e5\n#db2777aa\n",
copyInput: "",
hexRegex: /^\#?[a-f0-9]{3,9}/i, hexRegex: /^\#?[a-f0-9]{3,9}/i,
rgbRegex: /^rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)/i, rgbRegex: /^rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)/i,
rgbaRegex: /^rgba\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*(0(\.[0-9])?|1(\.0)?)\s*\)/i, rgbaRegex: /^rgba\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*(0(\.[0-9])?|1(\.0)?)\s*\)/i,
@ -108,6 +112,7 @@ let app = new Vue({
blue = Number.parseInt(blue); blue = Number.parseInt(blue);
converted.hex = "#" + this.rgbaToHexa(red, green, blue, alpha); converted.hex = "#" + this.rgbaToHexa(red, green, blue, alpha);
converted.rgb = "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")"; converted.rgb = "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")";
let hsl = this.rgbToHsl(red, green, blue); let hsl = this.rgbToHsl(red, green, blue);
@ -367,6 +372,12 @@ console.error('hexa to HSLa not implemented yet');
} }
return alpha.toFixed(1); return alpha.toFixed(1);
} },
updateClipboard: function (text) {
clipboard.writeText(text).then(() => {
console.log('text copied!');
});
},
}, },
}); });