proper response management

melnary · May 8, 2020 · 634fa9b · 634fa9b
1 parent 417a3db
commit 634fa9b
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 13 deletions.
diff --git a/client/index.html b/client/index.html
@@ -4,27 +4,34 @@
     <meta charset="UTF-8">
     <title>Shorest</title>
     <link rel="stylesheet" href="static/main.css">
-    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
     <script src="static/main.js"></script>
 </head>
 <body>
-<div class="active">
+<div class="active" id="main">
     <div class="title">
         <a><b>sho.rest</b><br></a>
         <a>Made with ❤ by <b>Mel</b></a>
     </div>
     <form id="form">
         <div class="input-group" id="form-group">
-            <div class="input-container" id="left">
+            <div class="input-container" id="left" style="border-right: none;">
                 <a class="input-field-text">https://</a>
                 <input class="input-field" id="url" required>
             </div>
             <div class="button-container">
-                <input type="submit" value="→" class="button" id="btn">
+                <input type="submit" value class="button" id="btn">
             </div>
         </div>
     </form>
+    <div id="responses"></div>
 </div>
+<template id="response-template">
+    <div class="response-container">
+        <div class="title response-text"></div>
+        <a class="copy-text"><strong>Copy Link</strong></a>
+    </div>
+</template>
 </body>
 </html>
diff --git a/client/static/main.css b/client/static/main.css
@@ -18,13 +18,39 @@ html * {
     color: #E0E0E0;
 }
 
+.response-text {
+    margin-bottom: 0;
+}
+
+.copy-text {
+    color: #E0E0E0;
+    padding-right: 30px;
+    text-align: right;
+    -webkit-touch-callout: none !important;
+    -webkit-user-select: none !important;
+    -moz-user-select: none !important;
+    -ms-user-select: none !important;
+    user-select: none !important;
+}
+
 .input-group {
     position: relative;
     display: table;
+    border-color: #E0E0E0;
     border-collapse: separate;
     transition: border-color 1s;
 }
 
+.response-container {
+    display: flex;
+    align-items: center;
+    border: 2px solid #E0E0E0;
+    margin: 15px 30px 0 30px;
+    height: 14vh;
+    justify-content: space-between;
+    border-radius: 0 5vh 5vh 5vh;
+}
+
 .input-field {
     position: relative;
     z-index: 2;
@@ -54,7 +80,7 @@ html * {
     align-items: center;
     position: relative;
     padding: 0;
-    border-radius: 100px 0 0 100px;
+    border-radius: 5vh 0 0 5vh;
     border: 2px solid;
     border-color: inherit;
     margin: 0;
@@ -94,9 +120,18 @@ html * {
     -moz-user-select: none;
     -ms-user-select: none;
     user-select: none;
-    border-radius: 0 100px 100px 0;
+    border-radius: 0 5vh 5vh 0;
     border: 2px solid;
     border-color: inherit;
     border-left: none;
     transition: color 1s;
+}
+
+strong {
+    font-weight: normal;
+    color: #727272;
+}
+
+a {
+    text-decoration: none;
 }
diff --git a/client/static/main.js b/client/static/main.js
@@ -10,13 +10,26 @@ function onFormSubmit() {
     const urlField = $('#url');
     if (validateURL(urlField.val())) {
         const data = JSON.stringify({'url': 'https://' + urlField.val()});
-        $.ajax('/', {method: 'POST', data: data, contentType: 'application/json'}).then(function (r) {
-            urlField.val('sho.rest/' + r.hash);
-        })
+        $.ajax('/', {method: 'POST', data: data, contentType: 'application/json'}).then(onSuccess);
     }
     return false;
 }
 
+function onSuccess(response) {
+    const responseDiv = $('#response-template')[0].content.querySelector('div');
+    const node = document.importNode(responseDiv, true);
+    const urlField = $('#url');
+    let text;
+    if (urlField.val().length < 20 ) {
+        text = 'The short link for <strong>' + urlField.val() + '</strong> is<br><strong>sho.rest/' + response.hash + '</strong>';
+    } else {
+        text = 'The short link for your URL is<br><strong>sho.rest/' + response.hash + '</strong>';
+    }
+    node.querySelector('.response-text').innerHTML = text;
+    $(node).find('.copy-text').on('click', copyClick);
+    $('#responses')[0].prepend(node);
+}
+
 function inputUpdate() {
     const userInput = $('#url').val();
     setButtonVisible(validateURL(userInput));
@@ -34,12 +47,12 @@ function setButtonVisible(visible) {
     const left = $('#left');
     const formGroup = $('#form-group');
 
-    const values = visible ? valuesEnabled : valuesDisabled;
+    let values;
     if (visible) {
-        const values = valuesEnabled;
+        values = valuesEnabled;
         form.removeAttr('disabled');
     } else {
-        const values = valuesDisabled;
+        values = valuesDisabled;
         form[0].setAttribute('disabled', '');
     }
 
@@ -54,10 +67,32 @@ function pasteTrim() {
     const pattern = /^https?:\/\//;
     setTimeout(() => {
         const element = $('#url');
-        element.value = element.value.replace(pattern, '');
+        element.val(element.val().replace(pattern, ''));
+        inputUpdate();
     }, 0);
 }
 
+function copyClick(event) {
+    const target = $(event.target);
+    if (target.hasClass('copied')) return;
+    const copyText = target.closest('.copy-text');
+    const previousCopied = $('.copied');
+
+    previousCopied.removeClass('copied');
+    previousCopied.html('<strong>Copy Link</strong>');
+    copyText.html('Link Copied!');
+    copyText.addClass('copied');
+
+    const link = copyText.parent().find('.response-text strong').last();
+
+    const range = document.createRange();
+    range.selectNode(link[0]);
+    window.getSelection().removeAllRanges();
+    window.getSelection().addRange(range);
+    document.execCommand('copy');
+    window.getSelection().removeAllRanges();
+}
+
 function validateURL(url) {
     return !validate({website: 'https://' + url}, {website: {url: true}});
 }