Fix footer image, autoscroll GUI tabs into view, and update README.md
This commit is contained in:
your_username
parent
2f9e66e813
commit
4f29801925
3 changed files with 48 additions and 36 deletions
|
|
@ -2,7 +2,9 @@
|
|||
|
||||
Visualize embed or message content from JSON input or provided GUI editor.
|
||||
|
||||
This can be used for bot embed commands. Not everyone understands JSON, thus GUI.
|
||||
This can be used for discord bot embed commands. It can also be intergreted into your Discord bot's website.
|
||||
|
||||
Aside the JSON editor, it also includes a GUI editor which converts to JSON for simplicity.
|
||||
You can look into the [project boards](https://github.com/Glitchii/embedbuilder/projects/3) if you want to see what is being worked on or want to contribute.
|
||||
<br>
|
||||
<br>
|
||||
|
|
|
|||
|
|
@ -848,6 +848,7 @@ body.gui .top>.CodeMirror {
|
|||
scrollbar-width: thin;
|
||||
scrollbar-width: 7px;
|
||||
margin-top: 15px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.top>.gui>* {
|
||||
|
|
@ -884,8 +885,7 @@ body:not(.gui) .top>.gui, body:not(.gui) .bottom, body:not(.gui) .pickerToggle {
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/*
|
||||
body.gui .chooser>.gui {
|
||||
/* body.gui .chooser>.gui {
|
||||
background: #41444a;
|
||||
}
|
||||
|
||||
|
|
@ -1276,7 +1276,7 @@ textarea {
|
|||
}
|
||||
|
||||
.linkName, .linkName .txtCol, .linkName .txtCol>input[type="text"] {
|
||||
width: 100%;
|
||||
width: 93%;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
|
@ -1513,6 +1513,7 @@ body {
|
|||
transform: translateY(40px);
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
transform: translateY(40px);
|
||||
}
|
||||
}
|
||||
|
|
@ -1524,7 +1525,8 @@ body {
|
|||
border-radius: 5px;
|
||||
animation: hexAn .4s ease-in-out;
|
||||
box-shadow: 0px -2px 10px 0px #0000001f;
|
||||
right: 0;
|
||||
right: 0px;
|
||||
/* right: 50px; */
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
|
@ -1748,6 +1750,9 @@ body.emptyEmbed.emptyContent .emptyTxt {
|
|||
.pickerToggle>svg {
|
||||
width: 17px;
|
||||
}
|
||||
.main .side1 {
|
||||
border-right: none;
|
||||
}
|
||||
.side1 .item.top {
|
||||
padding-top: 10px;
|
||||
transform: translateY(10px);
|
||||
|
|
@ -1755,13 +1760,6 @@ body.emptyEmbed.emptyContent .emptyTxt {
|
|||
}
|
||||
|
||||
@media screen and (max-width: 530px) {
|
||||
.msgEmbed {
|
||||
margin: 20px 0px;
|
||||
padding: 0.125rem 0 20px 65px;
|
||||
}
|
||||
.avatar {
|
||||
left: 10px;
|
||||
}
|
||||
.main .side1 {
|
||||
padding: 10px;
|
||||
}
|
||||
|
|
@ -1771,4 +1769,11 @@ body.emptyEmbed.emptyContent .emptyTxt {
|
|||
.emptyTxt {
|
||||
display: none!important;
|
||||
}
|
||||
}
|
||||
.msgEmbed {
|
||||
margin: 20px 0px;
|
||||
padding: 0.125rem 0 20px 65px;
|
||||
}
|
||||
.avatar {
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -186,12 +186,11 @@ window.onload = () => {
|
|||
<input class="editAuthorLink" type="text" value="${encodeHTML(object.embed?.author?.icon_url || '')}" placeholder="Icon URL" autocomplete="off"/>
|
||||
</div>
|
||||
<div class="editName">
|
||||
<input class="editAuthorName" maxlength="256" type="text" value="${encodeHTML(object.embed?.author?.name || '')}" placeholder="Author name" autocomplete="off" />
|
||||
<input class="editAuthorName" type="text" value="${encodeHTML(object.embed?.author?.name || '')}" placeholder="Author name" autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<input class="browserAuthorLink" type="file" name="file" id="file2" accept="image/png,image/gif,image/jpeg,image/webp" autocomplete="off" />
|
||||
<button type="submit"></button>
|
||||
<label for="file2">
|
||||
<div class="browse">
|
||||
<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 64 64" xml:space="preserve">
|
||||
|
|
@ -239,7 +238,6 @@ window.onload = () => {
|
|||
<input class="editThumbnailLink" type="text" value="${encodeHTML(object.embed?.thumbnail?.url || '')}" placeholder="Thumbnail URL" autocomplete="off" />
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<input class="browseThumbLink" type="file" name="file" id="file3" accept="image/png,image/gif,image/jpeg,image/webp" autocomplete="off" />
|
||||
<button type="submit"></button>
|
||||
<label for="file3">
|
||||
<div class="browse">
|
||||
<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 64 64" xml:space="preserve">
|
||||
|
|
@ -276,7 +274,6 @@ window.onload = () => {
|
|||
<input class="editImageLink" type="text" value="${encodeHTML(object.embed?.image?.url || '')}" placeholder="Image URL" autocomplete="off" />
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<input class="browseImageLink" type="file" name="file" id="file4" accept="image/png,image/gif,image/jpeg,image/webp" autocomplete="off" />
|
||||
<button type="submit"></button>
|
||||
<label for="file4">
|
||||
<div class="browse">
|
||||
<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 64 64" xml:space="preserve">
|
||||
|
|
@ -317,7 +314,6 @@ window.onload = () => {
|
|||
</div>
|
||||
<form method="post" enctype="multipart/form-data">
|
||||
<input class="browserFooterLink" type="file" name="file" id="file" accept="image/png,image/gif,image/jpeg,image/webp" autocomplete="off" />
|
||||
<button type="submit"></button>
|
||||
<label for="file">
|
||||
<div class="browse">
|
||||
<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 64 64" xml:space="preserve">
|
||||
|
|
@ -443,6 +439,14 @@ window.onload = () => {
|
|||
})
|
||||
})
|
||||
|
||||
// Scroll into view when tabs are opened in the GUI.
|
||||
let lastTabs = Array.from(document.querySelectorAll('.footer.rows2, .image.largeImg')),
|
||||
requiresView = matchMedia('(max-width: 1015px), (max-height: 845px)');
|
||||
document.querySelectorAll('.gui>.item:not(.fields)').forEach(e => e.addEventListener('click', () => {
|
||||
if (lastTabs.includes(e) || requiresView.matches)
|
||||
e.scrollIntoView({ behavior: 'smooth', block: "center" })
|
||||
}));
|
||||
|
||||
content = gui.querySelector('.editContent');
|
||||
title = gui.querySelector('.editTitle');
|
||||
authorName = gui.querySelector('.editAuthorName');
|
||||
|
|
@ -509,17 +513,8 @@ window.onload = () => {
|
|||
last.scrollIntoView({ behavior: "smooth", block: "center" });
|
||||
}
|
||||
|
||||
let files = document.querySelectorAll('input[type="file"]');
|
||||
files.forEach(f => f.addEventListener('change', e => {
|
||||
if (f.files) {
|
||||
e.target.nextElementSibling.click();
|
||||
e.target.closest('.edit').querySelector('.browse').classList.add('loading');
|
||||
}
|
||||
}))
|
||||
|
||||
document.querySelectorAll('form').forEach(form => form.addEventListener('submit', e => {
|
||||
e.preventDefault();
|
||||
let formData = new FormData(e.target);
|
||||
let upload = form => {
|
||||
let formData = new FormData(form);
|
||||
formData.append('file', files.files);
|
||||
formData.append('datetime', '10m');
|
||||
fetch('https://tempfile.site/api/files', {
|
||||
|
|
@ -528,23 +523,31 @@ window.onload = () => {
|
|||
})
|
||||
.then(res => res.json())
|
||||
.then(res => {
|
||||
let browse = e.target.closest('.edit').querySelector('.browse');
|
||||
let browse = form.closest('.edit').querySelector('.browse');
|
||||
browse.classList.remove('loading');
|
||||
if (!res.ok) {
|
||||
console.log(res.error);
|
||||
browse.classList.add('error');
|
||||
return setTimeout(() => browse.classList.remove('error'), 5000)
|
||||
}
|
||||
imgSrc(e.target.previousElementSibling.querySelector('.editIcon > .imgParent') || e.target.closest('.editIcon').querySelector('.imgParent'), res.link);
|
||||
let input = e.target.previousElementSibling.querySelector('.editIcon > input') || e.target.previousElementSibling;
|
||||
imgSrc(form.previousElementSibling.querySelector('.editIcon > .imgParent') || form.closest('.editIcon').querySelector('.imgParent'), res.link);
|
||||
let input = form.previousElementSibling.querySelector('.editIcon > input') || form.previousElementSibling;
|
||||
input.value = res.link;
|
||||
if (input === authorLink) ((json.embed ??= {}).author ??= {}).icon_url = res.link;
|
||||
else if (input === thumbLink) ((json.embed ??= {}).thumbnail ??= {}).url = res.link;
|
||||
else if (input === imgLink) ((json.embed ??= {}).image ??= {}).url = res.link;
|
||||
else ((json.embed ??= {}).footer ??= {}).url = res.link;
|
||||
else ((json.embed ??= {}).footer ??= {}).icon_url = res.link;
|
||||
update(json);
|
||||
console.info(`Image (${res.link}) will be deleted in 10 minutes. To delete it now, go to ${res.link.replace('/files', '/del')} and enter this code: ${res.authkey}`);
|
||||
}).catch(err => error(`Request to tempfile.site failed with error: ${err}`, 5000))
|
||||
}
|
||||
|
||||
let files = document.querySelectorAll('input[type="file"]');
|
||||
files.forEach(f => f.addEventListener('change', e => {
|
||||
if (f.files) {
|
||||
upload(e.target.parentElement);
|
||||
e.target.closest('.edit').querySelector('.browse').classList.add('loading');
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
|
|
@ -661,10 +664,10 @@ window.onload = () => {
|
|||
typingHex = false;
|
||||
removePicker();
|
||||
})
|
||||
window.picker = picker
|
||||
|
||||
picker.on('exit', removePicker);
|
||||
picker.on('enter', () => {
|
||||
if (json?.embed?.color){
|
||||
if (json?.embed?.color) {
|
||||
hexInput.value = json.embed.color.toString(16).padStart(6, '0');
|
||||
document.querySelector('.hex.incorrect')?.classList.remove('incorrect');
|
||||
}
|
||||
|
|
@ -733,8 +736,10 @@ window.onload = () => {
|
|||
update(json);
|
||||
|
||||
document.body.addEventListener('click', e => {
|
||||
if (e.target.classList.contains('low') || e.target.classList.contains('top'))
|
||||
if (e.target.classList.contains('low') || (e.target.classList.contains('top') && colrs.classList.contains('display')))
|
||||
togglePicker();
|
||||
// else if (e.target === picker.source && document.querySelector('.colrs.picking'))
|
||||
// removePicker();
|
||||
})
|
||||
|
||||
document.querySelector('.colrs .hex>div').addEventListener('input', e => {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue