feat: merge themes & packs into settings button

includes/header.ejs

@@ -85,28 +85,14 @@
     </button>
   </form>
   <a href="https://blacklivesmatters.carrd.co/" target="_blank" rel="noreferrer" data-tippy-content="<strong>Black Lives Matter!</strong><br><br>Click for a collection of links on how to support the fight against racial inequality." class="blm-logo" aria-label="Black Lives Matter"></a>
-  <button id="themes-button" class="expander" aria-expanded="false">
-    <svg viewBox="0 0 24 24">
-      <path fill="currentColor" d="M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z" />
+
+  <button id="settings-button" class="expander" aria-expanded="false">
+    <svg viewBox="0 0 45.973 45.973">
+      <path fill="currentColor" d="M43.454,18.443h-2.437c-0.453-1.766-1.16-3.42-2.082-4.933l1.752-1.756c0.473-0.473,0.733-1.104,0.733-1.774 c0-0.669-0.262-1.301-0.733-1.773l-2.92-2.917c-0.947-0.948-2.602-0.947-3.545-0.001l-1.826,1.815 C30.9,6.232,29.296,5.56,27.529,5.128V2.52c0-1.383-1.105-2.52-2.488-2.52h-4.128c-1.383,0-2.471,1.137-2.471,2.52v2.607 c-1.766,0.431-3.38,1.104-4.878,1.977l-1.825-1.815c-0.946-0.948-2.602-0.947-3.551-0.001L5.27,8.205 C4.802,8.672,4.535,9.318,4.535,9.978c0,0.669,0.259,1.299,0.733,1.772l1.752,1.76c-0.921,1.513-1.629,3.167-2.081,4.933H2.501 C1.117,18.443,0,19.555,0,20.935v4.125c0,1.384,1.117,2.471,2.501,2.471h2.438c0.452,1.766,1.159,3.43,2.079,4.943l-1.752,1.763 c-0.474,0.473-0.734,1.106-0.734,1.776s0.261,1.303,0.734,1.776l2.92,2.919c0.474,0.473,1.103,0.733,1.772,0.733 s1.299-0.261,1.773-0.733l1.833-1.816c1.498,0.873,3.112,1.545,4.878,1.978v2.604c0,1.383,1.088,2.498,2.471,2.498h4.128 c1.383,0,2.488-1.115,2.488-2.498v-2.605c1.767-0.432,3.371-1.104,4.869-1.977l1.817,1.812c0.474,0.475,1.104,0.735,1.775,0.735 c0.67,0,1.301-0.261,1.774-0.733l2.92-2.917c0.473-0.472,0.732-1.103,0.734-1.772c0-0.67-0.262-1.299-0.734-1.773l-1.75-1.77 c0.92-1.514,1.627-3.179,2.08-4.943h2.438c1.383,0,2.52-1.087,2.52-2.471v-4.125C45.973,19.555,44.837,18.443,43.454,18.443z M22.976,30.85c-4.378,0-7.928-3.517-7.928-7.852c0-4.338,3.55-7.85,7.928-7.85c4.379,0,7.931,3.512,7.931,7.85 C30.906,27.334,27.355,30.85,22.976,30.85z" />
     </svg>
-    <span>Themes</span>
+    <span>Settings</span>
   </button>
-  <theme-list id="themes-box" class="expandable list"></theme-list>
-  <% if (page != 'api') { %>
-    <button id="packs-button" class="expander" aria-expanded="false">
-      <svg viewBox="0 0 24 24">
-        <path fill="currentColor" d="M2,10.96C1.5,10.68 1.35,10.07 1.63,9.59L3.13,7C3.24,6.8 3.41,6.66 3.6,6.58L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.66,6.72 20.82,6.88 20.91,7.08L22.36,9.6C22.64,10.08 22.47,10.69 22,10.96L21,11.54V16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V10.96C2.7,11.13 2.32,11.14 2,10.96M12,4.15V4.15L12,10.85V10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V12.69L14,15.59C13.67,15.77 13.3,15.76 13,15.6V19.29L19,15.91M13.85,13.36L20.13,9.73L19.55,8.72L13.27,12.35L13.85,13.36Z" />
-      </svg>
-      <span>Packs</span>
-      <script>
-        if (sessionStorage.getItem("open packs")) {
-          sessionStorage.removeItem("open packs");
-          document.querySelector("#packs-button").setAttribute("aria-expanded", true);
-        }
-      </script>
-    </button>
-    <pack-list id="packs-box" class="expandable list"></pack-list>
-  <% } %>
+  <settings-list id="settings-box" class="expandable list"></settings-list>
 </header>
 <noscript style="
   position: fixed;

public/resources/scss/shared.scss

@@ -533,8 +533,7 @@ input[type="search"]::-webkit-search-cancel-button {
   vertical-align: top;
 }
 
-#packs-button,
-#themes-button {
+#settings-button {
   -webkit-appearance: none;
   appearance: none;
   display: flex;
@@ -566,10 +565,6 @@ input[type="search"]::-webkit-search-cancel-button {
   }
 }
 
-#themes-button svg {
-  transform: translateY(2px);
-}
-
 .banner {
   margin: 0;
   margin-left: calc(-1 * var(--padding));
@@ -709,14 +704,6 @@ input[type="search"]::-webkit-search-cancel-button {
   }
 }
 
-#packs-box {
-  --clip-center: 90% 0;
-}
-
-#themes-box {
-  --clip-center: 65% 0;
-}
-
 @keyframes brighten {
   to {
     filter: brightness(2);
@@ -750,7 +737,8 @@ input[type="search"]::-webkit-search-cancel-button {
       margin-top: 15px;
     }
 
-    .icon {
+    .icon,
+    svg {
       position: absolute;
       top: 8px;
       left: 8px;
@@ -776,7 +764,8 @@ input[type="search"]::-webkit-search-cancel-button {
       }
     }
 
-    .author {
+    .author,
+    .description {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -1162,24 +1151,14 @@ body {
 }
 
 @media (max-width: 745px) {
-  :not(.page-index) > header #themes-button,
-  :not(.page-index) > header #packs-button,
-  .lookup-player.show-user-search ~ #themes-button,
-  .lookup-player.show-user-search ~ #packs-button {
+  :not(.page-index) > header #settings-button,
+  .lookup-player.show-user-search ~ #settings-button {
     span {
       transform: scaleX(0);
       padding: 0;
       font-size: 0;
       opacity: 0;
     }
-
-    & + #packs-box {
-      --clip-center: 100% 0;
-    }
-
-    & + #themes-box {
-      --clip-center: 85% 0;
-    }
   }
 }
 
@@ -1214,19 +1193,10 @@ body {
 }
 
 @media (max-width: 480px) {
-  #themes-button,
-  #packs-button {
+  #settings-button {
     display: none;
   }
 
-  #themes-box,
-  #packs-box {
-    left: env(safe-area-inset-left, 0);
-    right: env(safe-area-inset-right, 0);
-    width: unset;
-    border-radius: 0;
-  }
-
   .page-index header {
     justify-content: center;
   }

public/resources/scss/stats.scss

@@ -384,7 +384,8 @@
       }
     }
 
-    .author {
+    .author,
+    .description {
       color: rgba(var(--text-rgb), 0.6);
 
       span {

public/resources/ts/common-defer.ts

@@ -109,12 +109,8 @@ const expanders = document.querySelectorAll(".expander");
 for (const expander of expanders) {
   expander.addEventListener("click", () => {
     switch (expander.id) {
-      case "packs-button":
-        import("./elements/pack-list");
-        break;
-
-      case "themes-button":
-        import("./elements/theme-list");
+      case "settings-button":
+        import("./elements/settings");
         break;
     }
 

public/resources/ts/elements/settings.ts

@@ -0,0 +1,97 @@
+import { html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators.js";
+import { ThemeList } from "../elements/theme-list";
+
+@customElement("settings-list")
+export class SettingList extends LitElement {
+  constructor() {
+    super();
+  }
+
+  protected render(): TemplateResult {
+    return html`
+      <label class="list-item default-item" @change="${() => this.openModule("theme-list")}">
+        <svg viewBox="0 0 24 24">
+          <path
+            fill="currentColor"
+            d="M19,11.5C19,11.5 17,13.67 17,15A2,2 0 0,0 19,17A2,2 0 0,0 21,15C21,13.67 19,11.5 19,11.5M5.21,10L10,5.21L14.79,10M16.56,8.94L7.62,0L6.21,1.41L8.59,3.79L3.44,8.94C2.85,9.5 2.85,10.47 3.44,11.06L8.94,16.56C9.23,16.85 9.62,17 10,17C10.38,17 10.77,16.85 11.06,16.56L16.56,11.06C17.15,10.47 17.15,9.5 16.56,8.94Z"
+          />
+        </svg>
+
+        <a class="name" target="_blank" rel="noreferrer"> Themes </a>
+        <br />
+        <div class="description">
+          <span>Customize look of the website</span>
+        </div>
+
+        <input type="checkbox" name="pack" value="themes" />
+      </label>
+
+      <br />
+
+      <label class="list-item default-item" @change="${() => this.openModule("pack-list")}">
+        <svg viewBox="0 0 24 24">
+          <path
+            fill="currentColor"
+            d="M2,10.96C1.5,10.68 1.35,10.07 1.63,9.59L3.13,7C3.24,6.8 3.41,6.66 3.6,6.58L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.66,6.72 20.82,6.88 20.91,7.08L22.36,9.6C22.64,10.08 22.47,10.69 22,10.96L21,11.54V16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V10.96C2.7,11.13 2.32,11.14 2,10.96M12,4.15V4.15L12,10.85V10.85L17.96,7.5L12,4.15M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V12.69L14,15.59C13.67,15.77 13.3,15.76 13,15.6V19.29L19,15.91M13.85,13.36L20.13,9.73L19.55,8.72L13.27,12.35L13.85,13.36Z"
+          />
+        </svg>
+
+        <a class="name" target="_blank" rel="noreferrer"> Packs </a>
+        <br />
+        <div class="description">
+          <span>Change the resource pack</span>
+        </div>
+        <input type="checkbox" name="pack" value="packs" />
+      </label>
+    `;
+  }
+
+  private async openModule(moduleName: string) {
+    const moduleInstance = (await this.getModule(moduleName)) as ThemeList;
+    const settingsBox = document.querySelector("#settings-box");
+    if (settingsBox) {
+      settingsBox.innerHTML = "";
+      settingsBox.appendChild(moduleInstance);
+    }
+
+    document.addEventListener("click", this.closeSettings);
+  }
+
+  private async getModule(moduleName: string) {
+    switch (moduleName) {
+      case "theme-list": {
+        const module = await import(`../elements/theme-list`);
+        return new module.ThemeList();
+      }
+
+      case "pack-list": {
+        const module = await import(`../elements/pack-list`);
+        return new module.PackList();
+      }
+
+      default:
+        throw new Error("Module not found");
+    }
+  }
+
+  private closeSettings = (event: MouseEvent) => {
+    const settingsBox = document.querySelector("#settings-box");
+    if (settingsBox && !settingsBox?.contains(event.target as Node)) {
+      settingsBox.innerHTML = "";
+      settingsBox.appendChild(new SettingList());
+      document.removeEventListener("click", this.closeSettings);
+    }
+  };
+
+  // disable shadow root
+  protected createRenderRoot(): Element | ShadowRoot {
+    return this;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "settings-list": SettingList;
+  }
+}