From a00a8a867cae381982c7b8b77f07836ab4a504ed Mon Sep 17 00:00:00 2001 From: Melonai Date: Sun, 10 May 2020 01:46:29 +0200 Subject: js restructure --- Cargo.toml | 2 +- client/static/main.js | 123 ++++++++++++++++++++++++-------------------------- 2 files changed, 59 insertions(+), 66 deletions(-) diff --git a/Cargo.toml b/Cargo.toml index db5fa3f..6e44c76 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "shorest" -version = "0.1.0" +version = "0.1.1" authors = ["Melonai "] edition = "2018" 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 ' + urlField.val() + ' is
sho.rest/' + response.hash + ''; - } else { - text = 'The short link for your URL is
sho.rest/' + response.hash + ''; + 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 ' + URL_FIELD.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); } - 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); -- cgit 1.4.1