Add reverse and uodated URL options to menu, fix timestamp issue on start

README.md

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

assets/css/index.css

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

assets/js/script.js

@@ -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) {
+    if (reverseColumns || localStorage.getItem('reverseColumns'))
-        const side1 = document.querySelector('.side1');
+        reverse();
-        side1.parentElement.insertBefore(side1.nextElementSibling, side1);
-        document.body.classList.add('reversed');
-    };
     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';
+                if (!allowPlaceholders)
-            else if (re) { // If a URL is found without a protocol
+                    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) {
+            if (autoUpdateURL)
-                // Update data param in url.
+                urlOptions({ set: ['data', jsonToBase64(json)] })
-                const url = new URL(location.href);
-                url.searchParams.set('data', jsonToBase64(json));
-                history.replaceState(null, null, url.href);
-            }
         } 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));
+            return 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');
+        const input = e.target.closest('.item')?.querySelector('input');
-            input.checked = e.target === input ? input.checked : !input.checked;
+        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')
     })
 

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>