Fix auto-updating data link
This commit is contained in:
Glitchii
parent
7886a34d96
commit
43c63db954
3 changed files with 278 additions and 6 deletions
|
|
@ -2121,6 +2121,270 @@ body.no-editor .side1 .item.top {
|
||||||
body.no-editor .bottom .colrs.display {
|
body.no-editor .bottom .colrs.display {
|
||||||
display: grid;
|
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 {
|
::-webkit-scrollbar {
|
||||||
width: 7px;
|
width: 7px;
|
||||||
|
|
|
||||||
|
|
@ -35,7 +35,7 @@ var params = currentURL().searchParams,
|
||||||
data = btoa(escape((JSON.stringify(typeof jsonCode === 'object' ? jsonCode : json))));
|
data = btoa(escape((JSON.stringify(typeof jsonCode === 'object' ? jsonCode : json))));
|
||||||
if (withURL) {
|
if (withURL) {
|
||||||
const url = currentURL();
|
const url = currentURL();
|
||||||
url.searchParams.append('data', data);
|
url.searchParams.set('data', data);
|
||||||
if (redirect) window.top.location.href = url;
|
if (redirect) window.top.location.href = url;
|
||||||
// Replace %3D ('=' url encoded) with '='
|
// Replace %3D ('=' url encoded) with '='
|
||||||
data = url.href.replace(/data=\w+(?:%3D)+/g, 'data=' + data);
|
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' });
|
if (autoParams) isReversed ? urlOptions({ set: ['reverse', ''] }) : urlOptions({ remove: 'reverse' });
|
||||||
},
|
},
|
||||||
urlOptions = ({ remove, set }) => {
|
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 (remove) url.searchParams.delete(remove);
|
||||||
if (set) url.searchParams.set(set[0], set[1]);
|
if (set) url.searchParams.set(set[0], set[1]);
|
||||||
try {
|
try {
|
||||||
history.replaceState(null, null, href);
|
history.replaceState(null, null, url.href.replace(/=&|=$/g, x => x === '=' ? '' : '&'));
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
// Most likely embeded in iframe
|
// Most likely embeded in iframe
|
||||||
console.message(`${e.name}: ${e.message}`, e);
|
console.message(`${e.name}: ${e.message}`, e);
|
||||||
|
|
@ -976,6 +977,7 @@ addEventListener('DOMContentLoaded', () => {
|
||||||
if (input) input.checked = !input.checked;
|
if (input) input.checked = !input.checked;
|
||||||
|
|
||||||
if (e.target.closest('.item.auto')) {
|
if (e.target.closest('.item.auto')) {
|
||||||
|
console.log('Burv');
|
||||||
autoUpdateURL = document.body.classList.toggle('autoUpdateURL');
|
autoUpdateURL = document.body.classList.toggle('autoUpdateURL');
|
||||||
if (autoUpdateURL) localStorage.setItem('autoUpdateURL', true);
|
if (autoUpdateURL) localStorage.setItem('autoUpdateURL', true);
|
||||||
else localStorage.removeItem('autoUpdateURL');
|
else localStorage.removeItem('autoUpdateURL');
|
||||||
|
|
|
||||||
12
index.html
12
index.html
|
|
@ -207,8 +207,8 @@
|
||||||
<g>
|
<g>
|
||||||
<g xmlns="http://www.w3.org/2000/svg">
|
<g xmlns="http://www.w3.org/2000/svg">
|
||||||
<g>
|
<g>
|
||||||
<path d="M377.314,27.704C360.761,0.494,325.283-8.145,298.076,8.41l-52.561,31.977l-3.607-5.932 c-10.484-17.229-32.947-22.7-50.179-12.218C174.5,32.72,169.032,55.184,179.512,72.415l7.162,11.771L60.314,161.652 c-11.612,7.065-30.483,32.364-35.989,39.95c-2.97,4.09-3.191,9.563-0.565,13.881l24.784,40.738 c2.627,4.317,7.591,6.637,12.587,5.88c9.269-1.402,40.41-6.529,52.024-13.596l126.357-77.467l7.161,11.771 c10.481,17.229,32.946,22.7,50.178,12.217c17.229-10.481,22.699-32.946,12.217-50.177l-3.607-5.93l52.561-31.978 C385.229,90.389,393.868,54.912,377.314,27.704z M100.124,227.084l-0.694-59.882l85.469-52.59 c0.715,8.641,3.392,17.25,8.204,25.161c4.812,7.911,11.229,14.245,18.571,18.853L100.124,227.084z" fill="#ffffff" data-original="#000000"></path>
|
<path d="M377.314,27.704C360.761,0.494,325.283-8.145,298.076,8.41l-52.561,31.977l-3.607-5.932 c-10.484-17.229-32.947-22.7-50.179-12.218C174.5,32.72,169.032,55.184,179.512,72.415l7.162,11.771L60.314,161.652 c-11.612,7.065-30.483,32.364-35.989,39.95c-2.97,4.09-3.191,9.563-0.565,13.881l24.784,40.738 c2.627,4.317,7.591,6.637,12.587,5.88c9.269-1.402,40.41-6.529,52.024-13.596l126.357-77.467l7.161,11.771 c10.481,17.229,32.946,22.7,50.178,12.217c17.229-10.481,22.699-32.946,12.217-50.177l-3.607-5.93l52.561-31.978 C385.229,90.389,393.868,54.912,377.314,27.704z M100.124,227.084l-0.694-59.882l85.469-52.59 c0.715,8.641,3.392,17.25,8.204,25.161c4.812,7.911,11.229,14.245,18.571,18.853L100.124,227.084z" fill="#ffffff"></path>
|
||||||
<path d="M52.666,276.584c-1.823-1.458-4.413-1.459-6.238-0.003C44.745,277.922,5.23,309.82,5.23,343.554 c0,27.909,18.223,47.4,44.314,47.4c26.836,0,46.314-19.936,46.314-47.4C95.859,311.472,54.43,277.995,52.666,276.584z M55.582,378.402c-0.414,0.104-0.829,0.155-1.237,0.155c-2.231,0-4.266-1.506-4.842-3.769c-0.68-2.672,0.931-5.389,3.6-6.075 c0.915-0.241,20.916-5.754,20.913-25.823c0-2.762,2.237-5,4.999-5.001c2.762,0,5.001,2.238,5.001,4.999 C84.02,365.254,65.417,375.898,55.582,378.402z" fill="#ffffff" data-original="#000000"></path>
|
<path d="M52.666,276.584c-1.823-1.458-4.413-1.459-6.238-0.003C44.745,277.922,5.23,309.82,5.23,343.554 c0,27.909,18.223,47.4,44.314,47.4c26.836,0,46.314-19.936,46.314-47.4C95.859,311.472,54.43,277.995,52.666,276.584z M55.582,378.402c-0.414,0.104-0.829,0.155-1.237,0.155c-2.231,0-4.266-1.506-4.842-3.769c-0.68-2.672,0.931-5.389,3.6-6.075 c0.915-0.241,20.916-5.754,20.913-25.823c0-2.762,2.237-5,4.999-5.001c2.762,0,5.001,2.238,5.001,4.999 C84.02,365.254,65.417,375.898,55.582,378.402z" fill="#ffffff"></path>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g xmlns="http://www.w3.org/2000/svg">
|
<g xmlns="http://www.w3.org/2000/svg">
|
||||||
|
|
@ -248,7 +248,13 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="col colRight">
|
<div class="col colRight">
|
||||||
<div class="colBack">
|
<div class="colBack">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" xml:space="preserve"><g><g xmlns="http://www.w3.org/2000/svg"><path d="m377 91h-362c-8.291 0-15 6.709-15 15v30c0 8.291 6.709 15 15 15h362c41.353 0 75 33.647 75 75s-33.647 75-75 75h-121v-45c0-5.742-3.281-10.986-8.452-13.491s-11.323-1.846-15.85 1.714l-94.995 75c-3.604 2.842-5.698 7.192-5.698 11.777s2.095 8.936 5.698 11.777l94.995 75c4.554 3.569 10.688 4.222 15.85 1.714 5.171-2.504 8.452-7.749 8.452-13.491v-45h121c74.443 0 135-60.557 135-135s-60.557-135-135-135z" fill="#ffffff" data-original="#000000"></path></g></g></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" version="1.1" width="512" height="512" x="0" y="0" viewBox="0 0 512 512" xml:space="preserve">
|
||||||
|
<g>
|
||||||
|
<g xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="m377 91h-362c-8.291 0-15 6.709-15 15v30c0 8.291 6.709 15 15 15h362c41.353 0 75 33.647 75 75s-33.647 75-75 75h-121v-45c0-5.742-3.281-10.986-8.452-13.491s-11.323-1.846-15.85 1.714l-94.995 75c-3.604 2.842-5.698 7.192-5.698 11.777s2.095 8.936 5.698 11.777l94.995 75c4.554 3.569 10.688 4.222 15.85 1.714 5.171-2.504 8.452-7.749 8.452-13.491v-45h121c74.443 0 135-60.557 135-135s-60.557-135-135-135z" fill="currentColor"></path>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div class="cTop">
|
<div class="cTop">
|
||||||
<h2>Embed Colour</h2>
|
<h2>Embed Colour</h2>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue