summaryrefslogtreecommitdiff
path: root/client/static
diff options
context:
space:
mode:
authorMelonai <einebeere@gmail.com>2020-05-20 19:52:18 +0200
committerMelonai <einebeere@gmail.com>2020-05-20 19:52:18 +0200
commite58b453f24c8b4081361112862d29c34eb22009d (patch)
tree3437fb38ecb8b22ad5475d88f7e9ca901b320917 /client/static
parenta00a8a867cae381982c7b8b77f07836ab4a504ed (diff)
downloadshorest-e58b453f24c8b4081361112862d29c34eb22009d.tar.zst
shorest-e58b453f24c8b4081361112862d29c34eb22009d.zip
port to react and better error handling in backend
Diffstat (limited to 'client/static')
-rw-r--r--client/static/main.css141
-rw-r--r--client/static/main.js91
2 files changed, 0 insertions, 232 deletions
diff --git a/client/static/main.css b/client/static/main.css
deleted file mode 100644
index e24db3a..0000000
--- a/client/static/main.css
+++ /dev/null
@@ -1,141 +0,0 @@
-html * {
- font-family: Roboto, sans-serif;
- font-size: 3vmin;
-}
-
-.active {
- justify-content: center;
- position: absolute;
- width: 100%;
- box-sizing: border-box;
- top: 40%;
- padding: 0 50px 0 50px;
-}
-
-.title {
- padding-left: 30px;
- margin-bottom: 10px;
- line-height: 1.42857143;
- 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;
- margin-bottom: 0;
- text-indent: 0;
- color: #727272;
- background-color: #fff;
- background-image: none;
- box-sizing: border-box;
- border: none;
- outline: none;
- height: 100%;
- width: 100%;
-}
-
-.input-field-text {
- margin-left: 30px;
- box-sizing: border-box;
- color: #E0E0E0;
-}
-
-.input-container {
- z-index: 2;
- width: 100%;
- float: left;
- display: flex;
- align-items: center;
- position: relative;
- padding: 0;
- border-radius: 5vh 0 0 5vh;
- border: 2px solid;
- border-color: inherit;
- margin: 0;
- box-sizing: border-box;
- height: 10vh;
-}
-
-.button-container {
- display: table-cell;
- position: relative;
- font-size: 0;
- white-space: nowrap;
- width: 1%;
- height: 0;
- vertical-align: middle;
- border-color: inherit;
-}
-
-.button {
- z-index: 2;
- margin-left: -1px;
- display: inline-block;
- margin-bottom: 0;
- font-weight: 400;
- text-align: center;
- white-space: nowrap;
- vertical-align: middle;
- -ms-touch-action: manipulation;
- touch-action: manipulation;
- cursor: pointer;
- background-image: none;
- background-color: #fff;
- color: #727272;
- padding: 4px 5vw;
- height: 10vh;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- border-radius: 0 5vh 5vh 0;
- border: 2px solid;
- border-color: inherit;
- border-left: none;
- transition: color 1s;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
-}
-
-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
deleted file mode 100644
index 5c8f452..0000000
--- a/client/static/main.js
+++ /dev/null
@@ -1,91 +0,0 @@
-$(document).ready(function() {
- 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;
- }
-
- 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);
- }
-
- 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);
- }
-
- function pasteTrim() {
- const pattern = /^https?:\/\//;
- setTimeout(() => {
- URL_FIELD.val(URL_FIELD.val().replace(pattern, ''));
- inputUpdate();
- }, 0);
- }
-
- inputUpdate();
-});
-
-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