diff options
Diffstat (limited to 'client/static')
| -rw-r--r-- | client/static/main.js | 123 |
1 files changed, 58 insertions, 65 deletions
diff --git a/client/static/main.js b/client/static/main.js index cd7c922..5c8f452 100644 --- a/client/static/main.js +++ b/client/static/main.js @@ -1,76 +1,69 @@ $(document).ready(function() { - const form = $('#form'); - form.on('submit', onFormSubmit); - form.attr("novalidate",true); - $('#url').on({'input': inputUpdate, 'paste': pasteTrim}); - inputUpdate(); -}); - -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(onSuccess); + const FORM = $('#form'); + const URL_FIELD = $('#url'); + + FORM.on('submit', onFormSubmit); + FORM.attr("novalidate",true); + URL_FIELD.on({'input': inputUpdate, 'paste': pasteTrim}); + + function onFormSubmit() { + if (validateURL(URL_FIELD.val())) { + const data = JSON.stringify({'url': 'https://' + URL_FIELD.val()}); + $.ajax('/', {method: 'POST', data: data, contentType: 'application/json'}).then(onSuccess); + } + return false; } - 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>'; + function onSuccess(response) { + const responseDiv = $('#response-template')[0].content.querySelector('div'); + const node = document.importNode(responseDiv, true); + let text; + if (URL_FIELD.val().length < 20 ) { + text = 'The short link for <strong>' + URL_FIELD.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); } - 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)); -} - -function setButtonVisible(visible) { - const form = $('#form'); - - if (!form[0].hasAttribute('disabled') === visible) return; - const valuesDisabled = {borderColor: '#FFBCBC', borderRight: 'none', buttonValue: '', buttonValueColor: '#FFFFFF'}; - const valuesEnabled = {borderColor: '#E0E0E0', borderRight: '', buttonValue: '→', buttonValueColor: '#727272'}; - - const btn = $('#btn'); - const left = $('#left'); - const formGroup = $('#form-group'); - - let values; - if (visible) { - values = valuesEnabled; - form.removeAttr('disabled'); - } else { - values = valuesDisabled; - form[0].setAttribute('disabled', ''); + function inputUpdate() { + const visible = validateURL(URL_FIELD.val()) + if (!FORM[0].hasAttribute('disabled') === visible) return; + + const valuesDisabled = {borderColor: '#FFBCBC', borderRight: 'none', buttonValue: '', buttonValueColor: '#FFFFFF'}; + const valuesEnabled = {borderColor: '#E0E0E0', borderRight: '', buttonValue: '→', buttonValueColor: '#727272'}; + + const btn = $('#btn'); + const left = $('#left'); + const formGroup = $('#form-group'); + + let values; + if (visible) { + values = valuesEnabled; + FORM.removeAttr('disabled'); + } else { + values = valuesDisabled; + FORM[0].setAttribute('disabled', ''); + } + + formGroup.css('border-color', values.borderColor); + left.css('border-right', values.borderRight); + btn.css('color', values.buttonValueColor); + btn.val(values.buttonValue); } - formGroup.css('border-color', values.borderColor); - left.css('border-right', values.borderRight); - btn.css('color', values.buttonValueColor); - btn.val(values.buttonValue); - -} + function pasteTrim() { + const pattern = /^https?:\/\//; + setTimeout(() => { + URL_FIELD.val(URL_FIELD.val().replace(pattern, '')); + inputUpdate(); + }, 0); + } -function pasteTrim() { - const pattern = /^https?:\/\//; - setTimeout(() => { - const element = $('#url'); - element.val(element.val().replace(pattern, '')); - inputUpdate(); - }, 0); -} + inputUpdate(); +}); function copyClick(event) { const target = $(event.target); |
