diff options
| author | Melonai <einebeere@gmail.com> | 2020-05-07 04:29:30 +0200 |
|---|---|---|
| committer | Melonai <einebeere@gmail.com> | 2020-05-07 04:29:30 +0200 |
| commit | 1e06820480fb2d9cf9db1373817d5980a891d5b4 (patch) | |
| tree | 63d0d45190f95b40f20dfd8a718a912434286db3 /client | |
| parent | 385fcdd46b536d28094a96f3f6be0e87496277a1 (diff) | |
| download | shorest-1e06820480fb2d9cf9db1373817d5980a891d5b4.tar.zst shorest-1e06820480fb2d9cf9db1373817d5980a891d5b4.zip | |
interaction between API and client
Diffstat (limited to 'client')
| -rw-r--r-- | client/index.html | 12 | ||||
| -rw-r--r-- | client/main.js | 13 | ||||
| -rw-r--r-- | client/static/main.css (renamed from client/main.css) | 1 | ||||
| -rw-r--r-- | client/static/main.js | 30 |
4 files changed, 38 insertions, 18 deletions
diff --git a/client/index.html b/client/index.html index a8aa831..5b8459e 100644 --- a/client/index.html +++ b/client/index.html @@ -2,9 +2,11 @@ <html lang="en"> <head> <meta charset="UTF-8"> - <title>Shor</title> - <link rel="stylesheet" href="main.css"> - <script src="main.js"></script> + <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/validate.js/0.13.1/validate.min.js"></script> + <script src="static/main.js"></script> </head> <body> <div class="active"> @@ -12,11 +14,11 @@ <a><b>sho.rest</b><br></a> <a>Made with ❤ by <b>Mel</b></a> </div> - <form class="form-inline" onsubmit="onFormSubmit(); return false;"> + <form id="form"> <div class="input-group" id="form-group"> <div class="input-container"> <a class="input-field-text">https://</a> - <input oninput="inputUpdate()" pattern="(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?" class="input-field" id="url" required> + <input class="input-field" id="url" required> </div> <div class="btn-container"> <input type="submit" value="→" class="btn"> diff --git a/client/main.js b/client/main.js deleted file mode 100644 index 652776a..0000000 --- a/client/main.js +++ /dev/null @@ -1,13 +0,0 @@ -function onFormSubmit() { - return false; -} - -function inputUpdate() { - const pattern = /^(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?&/; - const userInput = document.getElementById('url').value; - if (pattern.test(userInput)) { - document.getElementById('form-group').style.borderColor = '#E0E0E0'; - } else { - document.getElementById('form-group').style.borderColor = '#FFBCBC'; - } -} \ No newline at end of file diff --git a/client/main.css b/client/static/main.css index 8f84f71..1726881 100644 --- a/client/main.css +++ b/client/static/main.css @@ -86,6 +86,7 @@ html * { touch-action: manipulation; cursor: pointer; background-image: none; + background-color: #fff; padding: 4px 5vw; height: 10vh; -webkit-user-select: none; diff --git a/client/static/main.js b/client/static/main.js new file mode 100644 index 0000000..aa823c0 --- /dev/null +++ b/client/static/main.js @@ -0,0 +1,30 @@ +$(document).ready(function() { + $('#form').on('submit', onFormSubmit); + $('#url').on({'input': inputUpdate, 'paste': pasteTrim}); +}); + +function onFormSubmit() { + const urlField = document.getElementById('url'); + const data = JSON.stringify({'url': 'https://' + urlField.value}); + $.ajax('/', {method: 'POST', data: data, contentType: 'application/json'}).then(function (r) { + urlField.value = 'sho.rest/' + r.hash; + }) + return false; +} + +function inputUpdate() { + const userInput = document.getElementById('url').value; + if (!validate({website: 'https://' + userInput}, {website: {url: true}})) { + $('#form-group').css('border-color', '#E0E0E0'); + } else { + $('#form-group').css('border-color', '#FFBCBC'); + } +} + +function pasteTrim() { + const pattern = /^https?:\/\//; + setTimeout(() => { + const element = $('#url'); + element.value = element.value.replace(pattern, ''); + }, 0); +} \ No newline at end of file |