From 78af0c8c7232707bec1d65dcbc1ac144b45598d0 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Sat, 14 Aug 2021 15:21:47 +0200
Subject: [PATCH] Split of js to comply with chrome

---
 index.html | 64 ++++++++++++++++--------------------------------------
 main.js    | 49 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 45 deletions(-)
 create mode 100644 main.js

diff --git a/index.html b/index.html
index e7823f2..a0cd682 100644
--- a/index.html
+++ b/index.html
@@ -6,7 +6,7 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>LinkyLinky</title>
-	<link rel="stylesheet" href="https://tailwindui.com/css/components-v2.css">
+	<link rel="stylesheet" href="./tailwind.css">
 	<style>
 		body {
 			min-width: 300px;
@@ -19,20 +19,19 @@
 		<div class="w-full max-w-xs mx-auto">
 			<h1 class="text-lg text-center">LinkyLinky</h1>
 			<div>
-				<label for="company_website" class="block text-sm font-medium text-gray-700">
-					Custom Shorturl
-				</label>
-				<div class="mt-1 flex rounded-md shadow-sm">
-					<span
-						class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
-						https://kauf.es/
-					</span>
-					<input type="text" name="shortcode" id="shortcode"
-						class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300"
-						placeholder="custom url" />
+				<div id="shortcode_container">
+					<div class="mt-1 flex rounded-md shadow-sm">
+						<span
+							class="inline-flex items-center px-3 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm">
+							https://kauf.es/
+						</span>
+						<input type="text" name="shortcode" id="shortcode"
+							class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300"
+							placeholder="custom url" />
+					</div>
 				</div>
 				<div class="hidden" name="shorturl_container" id="shorturl_container">
-					<div class="inline-flex" id="shorturl_copy" data-clipboard-target="#shorturl">
+					<div class="inline-flex w-full" id="shorturl_copy" data-clipboard-target="#shorturl">
 						<p name="shorturl" id="shorturl" class:bg-green-200={copied}
 							class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 p-2">
 							link
@@ -50,45 +49,20 @@
 						Click to copy url to keyboard
 					</p>
 				</div>
-				<button type="button" onclick="createUrl()"
-					class="items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+				<button type="button" id="create"
+					class="mt-1 w-full items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
 					Create
 				</button>
+				<button type="button" id="reset"
+					class="hidden mt-1 w-full items-center px-4 py-2 border shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+					Reset
+				</button>
 			</div>
 		</div>
 	</div>
 
 	<script src="./clipboard.min.js"></script>
-	<script>
-		//Clipboard stuff
-		const baseurl = "https://kauft.es";
-		const btn = document.getElementById("shorturl_copy");
-		const clipboard = new ClipboardJS(btn);
-
-		// Calls the api to create a new short url
-		function createUrl() {
-			shorturl = {
-				target: window.location.href,
-				shortcode: document.getElementById("shortcode").value
-			};
-			if (shorturl.shortcode == "" | !shorturl.shortcode) {
-				delete shorturl.shortcode;
-			}
-
-			fetch(`${baseurl}/api`, {
-				method: "POST",
-				body: JSON.stringify(shorturl),
-				headers: new Headers({
-					'Content-Type': 'application/json'
-				})
-			})
-				.then(res => res.json())
-				.then(res => {
-					document.getElementById("shorturl").innerText=res.url;
-					document.getElementById("shorturl_container").className="";
-				});
-		}
-	</script>
+	<script src="./main.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..76ad266
--- /dev/null
+++ b/main.js
@@ -0,0 +1,49 @@
+//Clipboard stuff
+const baseurl = "https://kauft.es";
+const btn = document.getElementById("shorturl_copy");
+const clipboard = new ClipboardJS(btn);
+clipboard.on('success', function (e) {
+    console.info('Action:', e.action);
+    console.info('Text:', e.text);
+    new Notification('Notification title', {
+        icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
+        body: 'Hey there! You\'ve been notified!',
+    });
+});
+
+document.getElementById("create").onclick = createUrl;
+// Calls the api to create a new short url
+function createUrl() {
+    shorturl = {
+        target: window.location.href,
+        shortcode: document.getElementById("shortcode").value
+    };
+    if (shorturl.shortcode == "" | !shorturl.shortcode) {
+        delete shorturl.shortcode;
+    }
+
+    fetch(`${baseurl}/api`, {
+        method: "POST",
+        body: JSON.stringify(shorturl),
+        headers: new Headers({
+            'Content-Type': 'application/json'
+        })
+    })
+        .then(res => res.json())
+        .then(res => {
+            document.getElementById("shorturl").innerText = res.url;
+            document.getElementById("shorturl_container").className = "";
+            document.getElementById("shortcode_container").className = "hidden";
+            document.getElementById("create").classList.add("hidden");
+            document.getElementById("reset").classList.remove("hidden");
+        });
+}
+
+document.getElementById("reset").onclick = reset;
+function reset() {
+    document.getElementById("shorturl").innerText = "";
+    document.getElementById("shortcode_container").className = "";
+    document.getElementById("shorturl_container").className = "hidden";
+    document.getElementById("reset").classList.add("hidden");
+    document.getElementById("create").classList.remove("hidden");
+}
\ No newline at end of file