Add reverse and uodated URL options to menu, fix timestamp issue on start
This commit is contained in:
Glitchii
parent
3693b4d947
commit
a8f2e1b35a
4 changed files with 108 additions and 39 deletions
|
|
@ -43,6 +43,7 @@ placeholders=errors This also disables automatic insertion of 'http' for url
|
|||
Except, warnings won't be silenced. The user will still see a warning that a url or timestamp (etc.) is incorrect for 5 seconds.
|
||||
|
||||
```
|
||||
<small>Case matters, all parameters should be lowercase.</small>
|
||||
### Example URL with all* the above parameters:
|
||||
https://glitchii.github.io/embedbuilder/?username=Troy&verified&reverse&guitabs=image,footer&avatar=https://cdn.discordapp.com/avatars/663074487335649292/576eb5f13519b9da10ba7807bdd83fab.webp
|
||||
|
||||
|
|
|
|||
|
|
@ -1009,7 +1009,7 @@ u {
|
|||
color: #8c4949;
|
||||
display: none;
|
||||
width: 100%;
|
||||
z-index: 5;
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.col.cm-string.cm-property::before {
|
||||
|
|
@ -1845,14 +1845,37 @@ body {
|
|||
margin-bottom: 5px;
|
||||
font-size: 13px;
|
||||
transition: .5s ease;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
text-align: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
.top-btn.menu>.box .item:hover {
|
||||
background: #35373f;
|
||||
}
|
||||
|
||||
.top-btn.menu>.box .item.datalink>svg {
|
||||
.vs {
|
||||
background: linear-gradient(to left, #3b3c4400, #44444d, #3b3c4400);
|
||||
margin: 10px 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
left: 50%;
|
||||
position: relative;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
/* .top-btn.menu>.box .item>svg {
|
||||
transform: translateY(3px);
|
||||
} */
|
||||
|
||||
.top-btn.menu>.box .item>* {
|
||||
align-self: flex-end;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.top-btn.menu>.box .item>input {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.top-btn.menu.active {
|
||||
|
|
|
|||
|
|
@ -11,12 +11,20 @@ var params = new URL(location).searchParams,
|
|||
guiTabs = params.get('guitabs'),
|
||||
useJsonEditor = params.get('editor') === 'json',
|
||||
botVerified = hasParam('verified'),
|
||||
reverseColmns = hasParam('reverse'),
|
||||
reverseColumns = hasParam('reverse'),
|
||||
noUser = hasParam('nouser'),
|
||||
onlyEmbed = hasParam('embed'),
|
||||
activeFields, colNum = 1, num = 0, validationError,
|
||||
allowPlaceholders = hasParam('placeholders'),
|
||||
autoUpdateURL = localStorage.getItem('autoUpdateURL'),
|
||||
autoParams = hasParam('autoparams') || localStorage.getItem('autoParams'),
|
||||
toggleStored = item => {
|
||||
const found = localStorage.getItem(item);
|
||||
if (!found) return localStorage.setItem(item, true);
|
||||
|
||||
localStorage.removeItem(item);
|
||||
return found;
|
||||
},
|
||||
jsonToBase64 = (jsonCode, withURL, redirect) => {
|
||||
data = btoa(escape((JSON.stringify(typeof jsonCode === 'object' ? jsonCode : json))));
|
||||
if (withURL) {
|
||||
|
|
@ -40,6 +48,21 @@ var params = new URL(location).searchParams,
|
|||
hex = hex.replace('#', '').match(/.{1,2}/g)
|
||||
return [parseInt(hex[0], 16), parseInt(hex[1], 16), parseInt(hex[2], 16), 1];
|
||||
},
|
||||
reverse = (reversed, callback) => {
|
||||
const side = document.querySelector(reversed ? '.side2' : '.side1');
|
||||
if (side.nextElementSibling) side.parentElement.insertBefore(side.nextElementSibling, side);
|
||||
else side.parentElement.insertBefore(side, side.parentElement.firstElementChild);
|
||||
|
||||
const isReversed = document.body.classList.toggle('reversed');
|
||||
if (autoParams) isReversed ? urlOptions({ set: ['reverse', ''] }) : urlOptions({ remove: 'reverse' });
|
||||
},
|
||||
urlOptions = ({ remove, set }) => {
|
||||
const url = new URL(location.href);
|
||||
if (remove) url.searchParams.delete(remove);
|
||||
if (set) url.searchParams.set(set[0], set[1]);
|
||||
// history.replaceState(null, null, url.href);
|
||||
history.replaceState(null, null, url.href.replace(/=&|=$/g, x => x === '=' ? '' : '&'));
|
||||
},
|
||||
mainKeys = ["author", "footer", "color", "thumbnail", "image", "fields", "title", "description", "url", "timestamp"],
|
||||
jsonKeys = ["embed", "content", ...mainKeys],
|
||||
json = {
|
||||
|
|
@ -105,7 +128,7 @@ if (dataSpecified)
|
|||
if (allowPlaceholders)
|
||||
allowPlaceholders = params.get('placeholders') === 'errors' ? 1 : 2;
|
||||
|
||||
addEventListener('load', () => {
|
||||
addEventListener('DOMContentLoaded', () => {
|
||||
if (onlyEmbed)
|
||||
document.body.classList.add('only-embed');
|
||||
else {
|
||||
|
|
@ -120,14 +143,12 @@ addEventListener('load', () => {
|
|||
if (botIcon) document.querySelector('.avatar').src = botIcon;
|
||||
if (botVerified) document.querySelector('.msgEmbed > .contents').classList.add('verified');
|
||||
}
|
||||
if (reverseColmns) {
|
||||
const side1 = document.querySelector('.side1');
|
||||
side1.parentElement.insertBefore(side1.nextElementSibling, side1);
|
||||
document.body.classList.add('reversed');
|
||||
};
|
||||
if (reverseColumns || localStorage.getItem('reverseColumns'))
|
||||
reverse();
|
||||
if (autoUpdateURL)
|
||||
document.querySelector('.top-btn.menu .item.auto input').checked = true;
|
||||
|
||||
if (autoParams)
|
||||
document.querySelector('.auto-params > input').checked = true;
|
||||
document.querySelectorAll('.clickable > img')
|
||||
.forEach(e => e.parentElement.addEventListener('mouseup', el => window.open(el.target.src)));
|
||||
|
||||
|
|
@ -182,10 +203,11 @@ addEventListener('load', () => {
|
|||
return false;
|
||||
}, allGood = e => {
|
||||
let invalid, err, str = JSON.stringify(e, null, 4), re = /("(?:icon_)?url": *")((?!\w+?:\/\/).+)"/g.exec(str);
|
||||
if (e.timestamp && new Date(e.timestamp).toString() === "Invalid Date")
|
||||
if (e.timestamp && new Date(e.timestamp).toString() === "Invalid Date") {
|
||||
if (allowPlaceholders === 2) return true;
|
||||
if (!allowPlaceholders) invalid = true, err = 'Timestamp is invalid';
|
||||
else if (re) { // If a URL is found without a protocol
|
||||
if (!allowPlaceholders)
|
||||
invalid = true, err = 'Timestamp is invalid';
|
||||
} else if (re) { // If a URL is found without a protocol
|
||||
if (!/\w+:|\/\/|^\//g.exec(re[2]) && re[2].includes('.')) {
|
||||
let activeInput = document.querySelector('input[class$="link" i]:focus')
|
||||
if (activeInput && !allowPlaceholders) {
|
||||
|
|
@ -538,7 +560,7 @@ addEventListener('load', () => {
|
|||
} else if (txt && !smallerScreen.matches)
|
||||
txt.focus();
|
||||
if (elm.classList.contains('fields')) {
|
||||
if (reverseColmns && smallerScreen.matches)
|
||||
if (reverseColumns && smallerScreen.matches)
|
||||
// return elm.nextElementSibling.scrollIntoView({ behavior: 'smooth', block: "end" });
|
||||
return elm.parentNode.scrollTop = elm.offsetTop;
|
||||
elm.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
|
|
@ -552,7 +574,7 @@ addEventListener('load', () => {
|
|||
requiresView = matchMedia(`${smallerScreen.media}, (max-height: 845px)`);
|
||||
document.querySelectorAll('.gui>.item:not(.fields)').forEach(e => e.addEventListener('click', () => {
|
||||
if (lastTabs.includes(e) || requiresView.matches) {
|
||||
if (!reverseColmns || !smallerScreen.matches) e.scrollIntoView({ behavior: 'smooth', block: "center" });
|
||||
if (!reverseColumns || !smallerScreen.matches) e.scrollIntoView({ behavior: 'smooth', block: "center" });
|
||||
else if (e.nextElementSibling.classList.contains('edit') && e.classList.contains('active'))
|
||||
// e.nextElementSibling.scrollIntoView({ behavior: 'smooth', block: "end" });
|
||||
e.parentNode.scrollTop = e.offsetTop;
|
||||
|
|
@ -779,12 +801,8 @@ addEventListener('load', () => {
|
|||
} else document.body.classList.add('emptyEmbed');
|
||||
if (!embedCont.innerText) document.body.classList.add('emptyEmbed');
|
||||
json = data;
|
||||
if (autoUpdateURL) {
|
||||
// Update data param in url.
|
||||
const url = new URL(location.href);
|
||||
url.searchParams.set('data', jsonToBase64(json));
|
||||
history.replaceState(null, null, url.href);
|
||||
}
|
||||
if (autoUpdateURL)
|
||||
urlOptions({ set: ['data', jsonToBase64(json)] })
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
error(e);
|
||||
|
|
@ -907,16 +925,27 @@ addEventListener('load', () => {
|
|||
|
||||
document.querySelector('.top-btn.menu').addEventListener('click', e => {
|
||||
if (e.target.closest('.item.datalink'))
|
||||
prompt('Here\'s the current URL with base64 embed data:', jsonToBase64(json, true));
|
||||
else if (e.target.closest('.item.auto')) {
|
||||
const input = e.target.closest('.item.auto').querySelector('input');
|
||||
input.checked = e.target === input ? input.checked : !input.checked;
|
||||
return prompt('Here\'s the current URL with base64 embed data:', jsonToBase64(json, true));
|
||||
|
||||
const input = e.target.closest('.item')?.querySelector('input');
|
||||
if (input) input.checked = !input.checked;
|
||||
|
||||
if (e.target.closest('.item.auto')) {
|
||||
autoUpdateURL = input.checked;
|
||||
if (input.checked) localStorage.setItem('autoUpdateURL', true);
|
||||
else localStorage.removeItem('autoUpdateURL');
|
||||
update(json);
|
||||
}
|
||||
} else if (e.target.closest('.item.reverse')) {
|
||||
reverse(reverseColumns);
|
||||
reverseColumns = !reverseColumns;
|
||||
toggleStored('reverseColumns');
|
||||
} else if (e.target.closest('.item.auto-params')) {
|
||||
if (input.checked) localStorage.setItem('autoParams', true);
|
||||
else localStorage.removeItem('autoParams');
|
||||
autoParams = input.checked;
|
||||
|
||||
console.log(input?.checked, e.target.closest('.item.auto-params'))
|
||||
}
|
||||
e.target.closest('.top-btn').classList.toggle('active')
|
||||
})
|
||||
|
||||
|
|
|
|||
20
index.html
20
index.html
|
|
@ -103,11 +103,27 @@
|
|||
<path d="M4.715 6.542 3.343 7.914a3 3 0 1 0 4.243 4.243l1.828-1.829A3 3 0 0 0 8.586 5.5L8 6.086a1.002 1.002 0 0 0-.154.199 2 2 0 0 1 .861 3.337L6.88 11.45a2 2 0 1 1-2.83-2.83l.793-.792a4.018 4.018 0 0 1-.128-1.287z"/>
|
||||
<path d="M6.586 4.672A3 3 0 0 0 7.414 9.5l.775-.776a2 2 0 0 1-.896-3.346L9.12 3.55a2 2 0 1 1 2.83 2.83l-.793.792c.112.42.155.855.128 1.287l1.372-1.372a3 3 0 1 0-4.243-4.243L6.586 4.672z"/>
|
||||
</svg>
|
||||
<span>Get data link</span>
|
||||
<div>Get data link</div>
|
||||
</div>
|
||||
<div class="item auto">
|
||||
<input type="checkbox" id="auto" name="auto" autocomplete="off">
|
||||
<span>Auto-update data link in URL</span>
|
||||
<div>Auto-update data link in URL</div>
|
||||
</div>
|
||||
<div class="item reverse">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="16" height="16" x="0" y="0" viewBox="0 0 20 20" xml:space="preserve">
|
||||
<g>
|
||||
<g xmlns="http://www.w3.org/2000/svg" fill="#2b2a3d">
|
||||
<path d="m14.6 8.6 1.4 1.4 4-4-4-4-1.4 1.4 1.6 1.6h-16.2v2h16.2z" fill="#ffffff"></path>
|
||||
<path d="m5.4 11.4-1.4-1.4-4 4 4 4 1.4-1.4-1.6-1.6h16.2v-2h-16.2z" fill="#ffffff"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<div>Reverse editor and preview</div>
|
||||
</div>
|
||||
<div class="vs"></div>
|
||||
<div class="item auto-params">
|
||||
<input id="auto" name="auto" autocomplete="off" type="checkbox">
|
||||
<div>Auto-update URL options</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue