diff options
Diffstat (limited to 'client')
| -rw-r--r-- | client/index.html | 15 | ||||
| -rw-r--r-- | client/static/main.css | 39 | ||||
| -rw-r--r-- | client/static/main.js | 49 |
3 files changed, 90 insertions, 13 deletions
diff --git a/client/index.html b/client/index.html index 9099972..07478ee 100644 --- 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> \ No newline at end of file diff --git a/client/static/main.css b/client/static/main.css index 2964681..a3182f9 100644 --- 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; } \ No newline at end of file diff --git a/client/static/main.js b/client/static/main.js index 25ac3bd..cd7c922 100644 --- 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}}); } \ No newline at end of file |