Fix footer image, autoscroll GUI tabs into view, and update README.md

README.md

@@ -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>

assets/css/index.css

@@ -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;
+    }
+}

assets/js/script.js

@@ -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"]');
+        let upload = form => {
-        files.forEach(f => f.addEventListener('change', e => {
+            let formData = new FormData(form);
-            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);
             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);
+                    imgSrc(form.previousElementSibling.querySelector('.editIcon > .imgParent') || form.closest('.editIcon').querySelector('.imgParent'), res.link);
-                    let input = e.target.previousElementSibling.querySelector('.editIcon > input') || e.target.previousElementSibling;
+                    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 => {