Shorest

sho.rest
Made with ❤ by Mel

+ \ 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 ' + urlField.val() + ' is
sho.rest/' + response.hash + ''; + } else { + text = 'The short link for your URL is
sho.rest/' + response.hash + ''; + } + 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('Copy Link'); + 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 -- cgit 1.4.1