From 43c63db954e7a8cf27cc7c684030220501bd8774 Mon Sep 17 00:00:00 2001 From: Glitchii Date: Sat, 9 Apr 2022 17:14:03 +0100 Subject: [PATCH] Fix auto-updating data link --- assets/css/index.css | 264 +++++++++++++++++++++++++++++++++++++++++++ assets/js/script.js | 8 +- index.html | 12 +- 3 files changed, 278 insertions(+), 6 deletions(-) diff --git a/assets/css/index.css b/assets/css/index.css index 8c0a183..e0df80d 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -2121,6 +2121,270 @@ body.no-editor .side1 .item.top { body.no-editor .bottom .colrs.display { display: grid; } + +/** Send button and components */ +.done { + position: fixed; + right: -40px; + bottom: 30px; + z-index: 5; + transition: right .50s ease-out; +} + +body.toHook .done { + right: -150px; +} + +.done:not(.sent):hover { + right: 10px; + transition: right .30s ease-in; +} + +.done.position { + right: 30px; +} + +.done:not(.sent).position:hover { + right: 75px; +} + +.done .in { + position: relative; + border-radius: 3px; + background: linear-gradient(30deg, #202225, #202225); + padding: 10px 20px; + box-shadow: 0px 0px 20px 0px #0000002b; + display: flex; + cursor: pointer; + width: 105px; + max-width: 150px; + /* transition: max-width .50s ease-out; */ + overflow: hidden; + color: #dcdddec7; +} + +.done:not(.sent):hover .in { + width: auto; + max-width: 500px; + transition: max-width .30 ease-in; +} + +.done .in span { + font-family: var(--font2); + pointer-events: none; + transition: .5s ease-in-out; + color: #dcdddec7; +} + +.done .in svg { + width: 16px; + height: 100%; + margin-left: 10px; + pointer-events: none; +} + +.done .in svg path { + transition: .5s ease-in-out; + fill: #dcdddec7; +} + +.done .item { + position: relative; + background: linear-gradient(30deg, #202225, #202225); + box-shadow: 0px 0px 20px 0px #0000002b; + color: #dcddde; + border-top-right-radius: 4px; + border-top-left-radius: 4px; + max-height: 0; + transition: 0s ease-out; + overflow: hidden; +} + + +.done .item:not(.hidden) { + display: flex; +} + +.done:not(.sent):hover .item { + max-height: 500px; + transition: max-height .50s ease-in; + scrollbar-color: #36393f #202225; + scrollbar-color: #2c2d33 #202225; +} + +.done * ::-webkit-scrollbar { + background: #202225 !important; +} + +.done * ::-webkit-scrollbar-thumb { + background: #2c2d33 !important; +} + +.selectOptions>* { + padding: 7px 12px; +} + +.done:not(.sent):hover .in span { + color: #dcddde; +} + +.done:not(.sent):hover .in svg path { + fill: #dcdddeea; +} + +.done .channels .selectOptions { + padding: 5px 0; +} + +h5.title { + font-weight: 600; + text-transform: uppercase; + font-size: 13px; + line-height: 16px; + color: #8e9297ad; + padding-bottom: 5px; + font-family: var(--font2); +} + +.done .channels .selectOptions .channel { + min-width: 220px; + max-width: 250px; + cursor: pointer; + display: flex; + padding: 5px 22px 5px 22px; +} + +.done .channels .selectOptions .hook { + min-width: 220px; + max-width: 250px; + /* cursor: pointer; */ + /* display: flex; */ + /* margin-top: 5px; */ + /* margin-bottom: 5px; */ + margin: 5px 10px 5px 10px; + padding: 0; +} + +body.toHook .done .channels .selectOptions .hook input { + width: 100%; +} + +body.toHook .done .channels .selectOptions .hook { + width: 320px; + max-width: 320px; + margin: 10px 10px 10px 10px; +} + +.done .channels .selectOptions .hook input { + /* background: #26292d; */ + padding: 10px 22px 10px 11px; + /* border-radius: 4px; */ + border-bottom: 1px solid #44464a; + border-top-right-radius: 4px; + border-top-left-radius: 4px; + padding-left: 2px; +} + +.done .channels .selectOptions .channel:hover { + background-color: #2c2f33; + border-radius: 4px; +} + +.done .channels .selectOptions .channel img { + width: 16px; + filter: contrast(.3); + position: relative; + top: -4px; + pointer-events: none; + transform: translateY(3.5px); +} + +.done .channels .selectOptions .channel span { + padding-left: 6px; + pointer-events: none; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.selectOptions { + overflow: auto; + overflow-x: hidden; +} + +.done .in>span::after { + content: "Send"; +} + +.done:not(.sent):hover .in>span::after { + content: "Send to"; +} + +.done.sent .in>span::after { + content: "Embed sent"; + color: #44ee95; +} + +.done.sent .in { + max-width: 200px; + background: transparent; + box-shadow: none; + width: auto; + transform: translateX(-15px); +} + +.done.sent .in svg { + display: none; +} + +.done.sent .channels { + background: transparent; + box-shadow: none; + opacity: .5; +} + +.done:not(.sent):hover .in { + border-radius: 0; + border-bottom-right-radius: 4px; + border-bottom-left-radius: 4px; + width: 100%; +} + +.done:not(.sent):hover .in>svg { + width: 16px; + height: 100%; + margin-left: 10px; + transition: .5s ease; + transform: rotate(-90deg); +} + +@media screen and (max-width: 1015px) { + .done { + right: -100px; + } +} + +/* Send button and components **/ + + + + + + + + + + + + + + + + + + + + ::-webkit-scrollbar { width: 7px; diff --git a/assets/js/script.js b/assets/js/script.js index 730c4d1..837f80b 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -35,7 +35,7 @@ var params = currentURL().searchParams, data = btoa(escape((JSON.stringify(typeof jsonCode === 'object' ? jsonCode : json)))); if (withURL) { const url = currentURL(); - url.searchParams.append('data', data); + url.searchParams.set('data', data); if (redirect) window.top.location.href = url; // Replace %3D ('=' url encoded) with '=' data = url.href.replace(/data=\w+(?:%3D)+/g, 'data=' + data); @@ -64,11 +64,12 @@ var params = currentURL().searchParams, if (autoParams) isReversed ? urlOptions({ set: ['reverse', ''] }) : urlOptions({ remove: 'reverse' }); }, urlOptions = ({ remove, set }) => { - const url = currentURL(), href = url.href.replace(/=&|=$/g, x => x === '=' ? '' : '&'); + console.log(remove, set); + const url = currentURL(); if (remove) url.searchParams.delete(remove); if (set) url.searchParams.set(set[0], set[1]); try { - history.replaceState(null, null, href); + history.replaceState(null, null, url.href.replace(/=&|=$/g, x => x === '=' ? '' : '&')); } catch (e) { // Most likely embeded in iframe console.message(`${e.name}: ${e.message}`, e); @@ -976,6 +977,7 @@ addEventListener('DOMContentLoaded', () => { if (input) input.checked = !input.checked; if (e.target.closest('.item.auto')) { + console.log('Burv'); autoUpdateURL = document.body.classList.toggle('autoUpdateURL'); if (autoUpdateURL) localStorage.setItem('autoUpdateURL', true); else localStorage.removeItem('autoUpdateURL'); diff --git a/index.html b/index.html index f2f2e7b..90ad0b6 100644 --- a/index.html +++ b/index.html @@ -207,8 +207,8 @@ - - + + @@ -248,7 +248,13 @@
- + + + + + + +

Embed Colour