From 43096f29e0b9b04633c74a224b224a24a510202a Mon Sep 17 00:00:00 2001
From: Glitchii <hello@tempfile.site>
Date: Mon, 7 Mar 2022 22:01:09 +0000
Subject: [PATCH] Show selected menu options in menu

---
 assets/css/index.css | 28 +++++++++++++++++++----
 assets/js/script.js  |  6 ++---
 index.html           | 54 ++++++++++++++++++++++++++++++++------------
 3 files changed, 65 insertions(+), 23 deletions(-)

diff --git a/assets/css/index.css b/assets/css/index.css
index b631043..0a2c95f 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -71,6 +71,10 @@ body.no-user .msgEmbed>.contents {
     display: none;
 }
 
+.hidden {
+    display: none;
+}
+
 .main {
     position: absolute;
     width: 100%;
@@ -1865,11 +1869,8 @@ body {
     transform: translateX(-50%);
 }
 
-/* .top-btn.menu>.box .item>svg {
-    transform: translateY(3px);
-} */
-
-.top-btn.menu>.box .item>* {
+.top-btn.menu>.box .item> :is(*, *>svg) {
+    display: flex;
     align-self: flex-end;
     margin: 0;
 }
@@ -1877,6 +1878,23 @@ body {
 .top-btn.menu>.box .item>input {
     pointer-events: none;
 }
+.top-btn.menu > .box .item > .icon::after {
+    display: none;
+	position: absolute;
+	content: "";
+	width: 4px;
+	height: 4px;
+	background: #00bb9c;
+	z-index: 1000000;
+	border-radius: 100%;
+	left: 7px;
+	transform: translateY(7px);
+}
+
+body.autoUpdateURL .top-btn.menu > .box .item.auto > .icon::after,
+body.reversed .top-btn.menu > .box .item.reverse > .icon::after {
+    display: block;
+}
 
 .top-btn.menu.active {
     background: var(--bgc);
diff --git a/assets/js/script.js b/assets/js/script.js
index bd340d8..12b38dd 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -146,7 +146,7 @@ addEventListener('DOMContentLoaded', () => {
     if (reverseColumns || localStorage.getItem('reverseColumns'))
         reverse();
     if (autoUpdateURL)
-        document.querySelector('.top-btn.menu .item.auto input').checked = true;
+        document.body.classList.add('autoUpdateURL');
     if (autoParams)
         document.querySelector('.auto-params > input').checked = true;
     document.querySelectorAll('.clickable > img')
@@ -931,8 +931,8 @@ addEventListener('DOMContentLoaded', () => {
         if (input) input.checked = !input.checked;
 
         if (e.target.closest('.item.auto')) {
-            autoUpdateURL = input.checked;
-            if (input.checked) localStorage.setItem('autoUpdateURL', true);
+            autoUpdateURL = document.body.classList.toggle('autoUpdateURL');
+            if (autoUpdateURL) localStorage.setItem('autoUpdateURL', true);
             else localStorage.removeItem('autoUpdateURL');
             update(json);
         } else if (e.target.closest('.item.reverse')) {
diff --git a/index.html b/index.html
index 7c64d90..aac3376 100644
--- a/index.html
+++ b/index.html
@@ -98,31 +98,55 @@
                             <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/>
                         </svg>
                         <div class="box">
-                            <div class="item datalink">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
-                                    <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>
+                            <div class="item normal datalink">
+                                <div class="icon">
+                                    <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" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve" height="16" width="16">
+                                        <g>
+                                            <path xmlns="http://www.w3.org/2000/svg" d="m17.47 11.293a1 1 0 1 0 1.414 1.414l1.544-1.544a5.368 5.368 0 0 0 -7.591-7.591l-1.544 1.544a1 1 0 1 0 1.414 1.414l1.544-1.544a3.368 3.368 0 1 1 4.763 4.763z" fill="#ffffff"></path>
+                                            <path xmlns="http://www.w3.org/2000/svg" d="m6.53 12.707a1 1 0 1 0 -1.414-1.414l-1.544 1.544a5.368 5.368 0 0 0 7.591 7.591l1.544-1.544a1 1 0 0 0 -1.414-1.414l-1.544 1.544a3.368 3.368 0 0 1 -4.763-4.763z" fill="#ffffff"></path>
+                                            <path xmlns="http://www.w3.org/2000/svg" d="m8.205 15.8a1 1 0 0 0 1.414 0l6.181-6.181a1 1 0 1 0 -1.414-1.414l-6.181 6.176a1 1 0 0 0 0 1.419z" fill="#ffffff"></path>
+                                        </g>
+                                    </svg>
+                                </div>
                                 <div>Get data link</div>
                             </div>
-                            <div class="item auto">
-                                <input type="checkbox" id="auto" name="auto" autocomplete="off">
+                            <div class="item normal auto">
+                                <!-- <input type="checkbox" id="auto" name="auto" autocomplete="off" class="hidden"> -->
+                                <div class="icon">
+                                    <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" x="0" y="0" viewBox="0 0 48 48" xml:space="preserve" width="16" height="16">
+                                        <g>
+                                            <g xmlns="http://www.w3.org/2000/svg">
+                                                <path d="m40.26 7.74a23 23 0 0 0 -29.26-2.74h.37a2 2 0 0 1 1.63.55c.9.92.53 2 .4 3.13a18.61 18.61 0 0 1 25.85 26l-1.34-1.34c-.2 1.74-.66 6-.77 7l7-.77-1.72-1.72a23 23 0 0 0 -2.16-30.11z" fill="#ffffff"></path>
+                                                <path d="m37.17 42.26a2 2 0 0 1 -2-2.22l.14-1.26a18.61 18.61 0 0 1 -25.93-26.3l1.45 1.45c.3-2.64-.05.5.78-7l-7 .78 1.66 1.65a23 23 0 0 0 31.81 32.81 6.29 6.29 0 0 1 -.91.09z" fill="#ffffff"></path>
+                                                <path d="m28 18h4l-4-4z" fill="#ffffff"></path>
+                                                <path d="m26 13h-9a2 2 0 0 0 -2 2v18a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2c0-14.55.08-13-.18-13h-5.82a1 1 0 0 1 -1-1c0-6.35 0-5.83 0-6zm-1 18h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2zm0-4h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2zm0-4h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2z" fill="#ffffff"></path>
+                                            </g>
+                                        </g>
+                                    </svg>
+                                </div>
                                 <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>
+                            <div class="item normal reverse">
+                                <div class="icon">
+                                    <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>
-                                    </g>
-                                </svg>
+                                    </svg>
+                                </div>
                                 <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">
+                                <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" x="0" y="0" viewBox="0 0 512 512" xml:space="preserve" width="16" height="16" fill="currentColor" style="display: none;">
+                                    <g>
+                                        <path xmlns="http://www.w3.org/2000/svg" d="M200,24a24,24,0,1,1-24,24A24,24,0,0,1,200,24ZM32,192a24,24,0,1,0,24-24A24,24,0,0,0,32,192Zm53-91a24,24,0,1,0,24-24A24,24,0,0,0,85,101Zm354.039,7.273A237.668,237.668,0,0,0,315.461,24.881a24,24,0,1,0-12.883,46.238,189.368,189.368,0,0,1,98.448,66.463A185.963,185.963,0,0,1,440,252.116C440,355.716,355.629,440,251.922,440a186.451,186.451,0,0,1-114.189-38.577,188.962,188.962,0,0,1-36.191-36.548L88,361.865v59.956a236.16,236.16,0,0,0,330.847-2.9,235.762,235.762,0,0,0,20.192-310.646ZM72,456V341.919l114.794,25.51a24,24,0,1,0,10.412-46.858l-144-32A24,24,0,0,0,24,312V456a24,24,0,0,0,48,0Z"></path>
+                                    </g>
+                                </svg>
                                 <div>Auto-update URL options</div>
                             </div>
                         </div>