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

Stupid simple indication of text copied to the clipboard

Browse Source
This commit is contained in:
Brian
2021-08-03 14:46:10 -06:00
parent 772913e702
commit b11b78a521
2 changed files with 17 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.php
View File

@@ -53,6 +53,8 @@
</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 v-show="showStatusMessage" class="w-1/5 text-center px-4 py-3 uppercase font-bold bg-green-300 text-green-600 fixed top-0 mt-4 rounded z-10">Copied!</div>
<div v-show="showErrorMessage" class="w-1/5 text-center px-4 py-3 uppercase font-bold bg-red-300 text-red-600 fixed top-0 mt-4 rounded z-10">Failed to copy</div>
<div class="w-3/5"> <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>

17
js/app.js
View File

@@ -12,7 +12,8 @@ let app = new Vue({
], ],
inputBox: "ccc\n#4f46e5\n#db2777aa\n", inputBox: "ccc\n#4f46e5\n#db2777aa\n",
copyInput: "", showStatusMessage: false,
showErrorMessage: false,
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,
@@ -375,8 +376,20 @@ console.error('hexa to HSLa not implemented yet');
}, },
updateClipboard: function (text) { updateClipboard: function (text) {
let _this = this;
clipboard.writeText(text).then(() => { clipboard.writeText(text).then(() => {
console.log('text copied!'); _this.showErrorMessage = false;
_this.showStatusMessage = true;
setTimeout(() => {
_this.showStatusMessage = false;
}, 1000);
})
.catch(() => {
_this.showStatusMessage = false;
_this.showErrorMessage = true;
setTimeout(() => {
_this.showErrorMessage = false;
}, 1000);
}); });
}, },
}, },