refactor(static): refactor static module

static/src/app/common/language.ts

@@ -19,7 +19,7 @@
   setLanguage(getPreferredLanguage());
 
   const showActiveLanguage = (language: string, focus = false) => {
-    const languageSwitcher = document.querySelector("#bd-language");
+    const languageSwitcher = document.querySelector<HTMLElement>("#bd-language");
 
     if (!languageSwitcher) {
       return;
@@ -27,24 +27,26 @@
 
     const languageSwitcherText = document.querySelector("#bd-language-text");
     const activeLanguageIcon = document.querySelector(".language-icon-active");
-    const btnToActive = document.querySelector(`[data-bs-language-value="${language}"]`);
+    const btnToActive = document.querySelector<HTMLElement>(`[data-bs-language-value="${language}"]`);
-    const activeLanguageIconClass = btnToActive.querySelector(".fi").className.match(/fi-[\w-]+/)[0];
+    const activeLanguageIconClass = (btnToActive?.querySelector(".fi")?.className.match(/fi-[\w-]+/) || [])[0] || "";
 
     document.querySelectorAll("[data-bs-language-value]").forEach((element) => {
       element.classList.remove("active");
       element.setAttribute("aria-pressed", "false");
     });
 
-    btnToActive.classList.add("active");
+    btnToActive?.classList.add("active");
-    btnToActive.setAttribute("aria-pressed", "true");
+    btnToActive?.setAttribute("aria-pressed", "true");
-    const classesToRemove = Array.from(activeLanguageIcon.classList).filter((className) => className.startsWith("fi-"));
+    const classesToRemove = Array.from(activeLanguageIcon?.classList || []).filter((className) =>
-    activeLanguageIcon.classList.remove(...classesToRemove);
+      className.startsWith("fi-"),
-    activeLanguageIcon.classList.add(activeLanguageIconClass);
+    );
-    const languageSwitcherLabel = `${languageSwitcherText.textContent} (${btnToActive.dataset.bsLanguageValue})`;
+    activeLanguageIcon?.classList.remove(...classesToRemove);
+    activeLanguageIcon?.classList.add(activeLanguageIconClass);
+    const languageSwitcherLabel = `${languageSwitcherText?.textContent} (${btnToActive?.dataset.bsLanguageValue})`;
     languageSwitcher.setAttribute("aria-label", languageSwitcherLabel);
 
     if (focus) {
-      languageSwitcher.focus();
+      languageSwitcher?.focus();
     }
   };
 

static/src/app/common/theme.ts

@@ -25,7 +25,7 @@
   setTheme(getPreferredTheme());
 
   const showActiveTheme = (theme: string, focus = false) => {
-    const themeSwitcher = document.querySelector("#bd-theme");
+    const themeSwitcher = document.querySelector<HTMLElement>("#bd-theme");
 
     if (!themeSwitcher) {
       return;
@@ -33,24 +33,26 @@
 
     const themeSwitcherText = document.querySelector("#bd-theme-text");
     const activeThemeIcon = document.querySelector(".theme-icon-active");
-    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`);
+    const btnToActive = document.querySelector<HTMLElement>(`[data-bs-theme-value="${theme}"]`);
-    const activeThemeIconClass = btnToActive.querySelector(".bi").className.match(/bi-[\w-]+/)[0];
+    const activeThemeIconClass = (btnToActive?.querySelector(".bi")?.className.match(/bi-[\w-]+/) || [])[0] || "";
 
     document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
       element.classList.remove("active");
       element.setAttribute("aria-pressed", "false");
     });
 
-    btnToActive.classList.add("active");
+    btnToActive?.classList.add("active");
-    btnToActive.setAttribute("aria-pressed", "true");
+    btnToActive?.setAttribute("aria-pressed", "true");
-    const classesToRemove = Array.from(activeThemeIcon.classList).filter((className) => className.startsWith("bi-"));
+    const classesToRemove = Array.from(activeThemeIcon?.classList || []).filter((className) =>
-    activeThemeIcon.classList.remove(...classesToRemove);
+      className.startsWith("bi-"),
-    activeThemeIcon.classList.add(activeThemeIconClass);
+    );
-    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`;
+    activeThemeIcon?.classList.remove(...classesToRemove);
+    activeThemeIcon?.classList.add(activeThemeIconClass);
+    const themeSwitcherLabel = `${themeSwitcherText?.textContent} (${btnToActive?.dataset.bsThemeValue})`;
     themeSwitcher.setAttribute("aria-label", themeSwitcherLabel);
 
     if (focus) {
-      themeSwitcher.focus();
+      themeSwitcher?.focus();
     }
   };
 
@@ -66,7 +68,7 @@
 
     document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
       toggle.addEventListener("click", () => {
-        const theme = toggle.getAttribute("data-bs-theme-value") || '';
+        const theme = toggle.getAttribute("data-bs-theme-value") || "";
         setStoredTheme(theme);
         setTheme(theme);
         showActiveTheme(theme, true);

static/src/app/common/tooltips.ts

@@ -0,0 +1,6 @@
+import { Tooltip } from "bootstrap";
+
+document.addEventListener("DOMContentLoaded", (event) => {
+  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+  const tooltipList = [...tooltipTriggerList].map((tooltipTriggerEl) => new Tooltip(tooltipTriggerEl));
+});

static/src/app/schedule.ts

@@ -108,4 +108,3 @@ declare global {
 
 window.scheduleChannelStorage = new ScheduleChannelStorage();
 window.scheduleChannelManager = new ScheduleChannelManager();
-console.log("ok");

static/src/index.ts

@@ -1,11 +1,6 @@
-import * as bootstrap from "bootstrap";
+import "./app/common/language";
-import "./components";
+import "./app/common/theme";
-import "./language";
+import "./app/common/tooltips";
-import "./theme";
+import "./app/components/app-link";
-import "./weather/weather";
+import "./app/schedule";
-import "./schedule/schedule";
+import "./app/weather";
-
-document.addEventListener("DOMContentLoaded", (event) => {
-  const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-  const tooltipList = [...tooltipTriggerList].map((tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl));
-});

static/src/lib/flag-icons.scss

@@ -1,12 +1,5 @@
 @use "flag-icons/sass/flag-icons" with (
   $flag-icons-path: "flag-icons/flags",
-  $flag-icons-included-countries: (
-    "gb",
-    "ru",
-    "by",
-    "ua",
-    "kz",
-  )
 );
 
 .fir {

static/src/main.scss

@@ -3,38 +3,7 @@
 @import "./lib/bootstrap-icons";
 @import "./lib/weather-icons";
 
-@import "./widget.scss";
+@import "./styles/weather.scss";
-@import "./weather/weather.scss";
+@import "./styles/app";
-
+@import "./styles/widget.scss";
-.table.table-compact {
+@import "./styles/mobile";
-  td {
-    padding: 0.1rem 0.4rem;
-  }
-}
-
-.icon-header {
-  @include font-size($h4-font-size);
-}
-
-.app-header {
-  display: flex;
-  flex-direction: row;
-
-  > .link-list {
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-
-    app-link {
-      display: flex;
-      align-items: center;
-
-      &:not(:last-child)::after {
-        margin-left: 1rem;
-        content: "|";
-      }
-    }
-  }
-}
-
-@import "./mobile";

static/src/styles/app.scss

@@ -0,0 +1,32 @@
+@import "../lib/bootstrap";
+
+.table.table-compact {
+  td {
+    padding: 0.1rem 0.4rem;
+  }
+}
+
+.icon-header {
+  @include font-size($h4-font-size);
+}
+
+.app-header {
+  display: flex;
+  flex-direction: row;
+
+  > .link-list {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+
+    app-link {
+      display: flex;
+      align-items: center;
+
+      &:not(:last-child)::after {
+        margin-left: 1rem;
+        content: "|";
+      }
+    }
+  }
+}

static/src/styles/mobile.scss

@@ -1,4 +1,4 @@
-@import "./lib/bootstrap";
+@import "../lib/bootstrap";
 
 $default-space: 2;
 

static/webpack.config.ts

@@ -17,9 +17,6 @@ const config: webpack.Configuration = {
         test: /\.tsx?$/,
         use: {
           loader: "ts-loader",
-          options: {
-            transpileOnly: true, // TODO: fix errors
-          },
         },
         exclude: /node_modules/,
       },
@@ -63,6 +60,10 @@ const config: webpack.Configuration = {
           from: "./node_modules/flag-icons/flags/1x1/*.svg",
           to: "flag-icons/flags/1x1/[name][ext]",
         },
+        {
+          from: "./node_modules/flag-icons/flags/4x3/*.svg",
+          to: "flag-icons/flags/4x3/[name][ext]",
+        },
       ],
     }),
   ],