created javascript modules

HaWeb/Views/Shared/_Head.cshtml

@@ -20,5 +20,25 @@
 @* Styles *@
 <link rel="stylesheet" href="/dist/style.css" asp-append-version="true" />
 
-@* JavaScript *@
+<script type="module">
-@await Html.PartialAsync("/Views/Shared/_JavaScript.cshtml")
+    import { startup_clipboard, startup_markanchor, startup_mobilemenu, startup_scrollbutton, startup_marginals, startup_theme, startup_menu } from "/dist/scripts.js";
+    startup_marginals();
+    startup_theme();
+    startup_scrollbutton();
+    startup_menu();
+    startup_mobilemenu();
+    startup_markanchor();
+    startup_clipboard();
+</script>
+<script type="module">
+    import "/js/mark.min.js";
+    document.addEventListener("DOMContentLoaded", (event) => {
+        var elements = document.querySelectorAll(".ha-register-body, .ha-searchresultpreview, .ha-commenthead, .ha-entry");
+        if (elements.length < 1000) {
+            var instancesearch = new Mark(elements);
+            instancesearch.mark('@ViewData["Mark"]', { "element": "span", "className": "ha-found", "acrossElements": true, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"] });
+        }
+        var instanceletter = new Mark(document.querySelectorAll(".ha-letterbody"));
+        instanceletter.mark('@ViewData["Mark"]', { "element": "span", "className": "ha-found", "acrossElements": true, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"] });
+    });
+</script>

HaWeb/package-lock.json

@@ -10,6 +10,7 @@
       "devDependencies": {
         "autoprefixer": "^10.4.7",
         "cssnano": "^5.1.11",
+        "mark.js": "^8.11.1",
         "postcss": "^8.4.14",
         "postcss-cli": "^9.1.0",
         "postcss-import": "^14.1.0",
@@ -1480,6 +1481,12 @@
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
       "dev": true
     },
+    "node_modules/mark.js": {
+      "version": "8.11.1",
+      "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
+      "integrity": "sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==",
+      "dev": true
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -3601,6 +3608,12 @@
       "integrity": "sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==",
       "dev": true
     },
+    "mark.js": {
+      "version": "8.11.1",
+      "resolved": "https://registry.npmjs.org/mark.js/-/mark.js-8.11.1.tgz",
+      "integrity": "sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==",
+      "dev": true
+    },
     "mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.14.tgz",

HaWeb/package.json

@@ -9,12 +9,13 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^5.0.8",
     "autoprefixer": "^10.4.7",
     "cssnano": "^5.1.11",
+    "mark.js": "^8.11.1",
     "postcss": "^8.4.14",
     "postcss-cli": "^9.1.0",
     "postcss-import": "^14.1.0",
-    "tailwindcss": "^3.0.24"
+    "tailwindcss": "^3.0.24",
+    "vite": "^5.0.8"
   }
 }

HaWeb/vite.config.js

@@ -6,7 +6,7 @@ export default defineConfig({
 		lib: {
 			entry: resolve(__dirname, 'wwwroot/js/main.js'),
 			name: 'HaWeb',
-			fileName: 'scripts'
+			fileName: 'scripts',
 		},
         outDir: resolve(__dirname, 'wwwroot/dist/'),
 	}

HaWeb/wwwroot/js/anchor.mjs

@@ -19,4 +19,4 @@ const startup_markanchor = function () {
     }
 }
 
-startup_markanchor();
+export { startup_markanchor };

HaWeb/wwwroot/js/clipboard.mjs

@@ -9,5 +9,4 @@ const startup_clipboard = function () {
   });
 }
 
-
+export { startup_clipboard };
-startup_clipboard();

HaWeb/wwwroot/js/main.js

@@ -1 +1,10 @@
-import "../css/site.css";
+import "../css/site.css";
+import { startup_marginals } from "./marginals.mjs";
+import { startup_theme } from "./theme.mjs";
+import { startup_menu } from "./menu.js";
+import { startup_markanchor } from "./anchor.mjs";
+import { startup_mobilemenu } from "./mobilemenu.js";
+import { startup_scrollbutton } from "./scrollbutton.mjs";
+import { startup_clipboard } from "./clipboard.mjs";
+
+export { startup_clipboard, startup_mobilemenu, startup_markanchor, startup_menu, startup_scrollbutton, startup_marginals, startup_theme };

HaWeb/wwwroot/js/marginals.mjs

@@ -154,10 +154,10 @@ const startup_marginals = function () {
         overlappingcollapsebox(".ha-text .ha-marginalbox", true);
     };
 
-    var collapsedboxes = [];
+    let collapsedboxes = [];
 
     const clearcollapsedboxes = function () {
-        var elements = document.querySelectorAll(".ha-text .ha-marginalbox");
+        let elements = document.querySelectorAll(".ha-text .ha-marginalbox");
         elements.forEach(element => {
             element.removeAttribute("style");
         });
@@ -167,7 +167,7 @@ const startup_marginals = function () {
             element.outerHTML = element.outerHTML;
         });
         collapsedboxes = [];
-        var elements = document.querySelectorAll(".ha-btn-collapsed-box");
+        elements = document.querySelectorAll(".ha-btn-collapsed-box");
         elements.forEach(element => {
             element.remove();
         });
@@ -184,10 +184,10 @@ const startup_marginals = function () {
     collapseboxes();
 
     var doit;
-    this.window.addEventListener("resize", function () {
+    window.addEventListener("resize", function () {
-        this.clearTimeout(doit);
+        clearTimeout(doit);
-        doit = this.setTimeout(resetall, 17);
+        doit = setTimeout(resetall, 17);
     });
 };
 
-startup_marginals();
+export { startup_marginals };

HaWeb/wwwroot/js/menu.js

@@ -1,4 +1,4 @@
-const startup_active = function () {
+const startup_menu = function () {
     // Gives active classes to links with active URLs
     // Marks links as active which target URL starts with the current URL
     const markactive_startswith = function (element) {
@@ -65,9 +65,9 @@ const startup_active = function () {
         markactive_menu(document.getElementById("ha-topnav"));
     if (document.getElementById("ha-register-nav") !== null)
         markactive_exact(document.getElementById("ha-register-nav"));
-    if (this.document.getElementById("ha-adminuploadfields") !== null)
+    if (document.getElementById("ha-adminuploadfields") !== null)
         markactive_exact(document.getElementById("ha-adminuploadfields"));
 };
 
 
-startup_active();
+export { startup_menu };

HaWeb/wwwroot/js/mobilemenu.js

@@ -32,4 +32,4 @@ const startup_mobilemenu = function () {
     }
 };
 
-startup_mobilemenu();
+export { startup_mobilemenu };

HaWeb/wwwroot/js/scrollbutton.mjs

@@ -2,7 +2,7 @@ const startup_scrollbutton = function () {
 
     // Script for showing and acting upon the "scroll to top button"
     const scrollFunction = function () {
-        button = document.getElementById("ha-scrollbutton");
+        let button = document.getElementById("ha-scrollbutton");
         if (button !== null) {
             if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
                 // button.style.display = "block";
@@ -28,4 +28,4 @@ const startup_scrollbutton = function () {
     }
 };
 
-startup_scrollbutton();
+export { startup_scrollbutton };

HaWeb/wwwroot/js/theme.mjs

@@ -20,7 +20,7 @@ const startup_theme = function () {
 
     if (
         document.getElementById("ha-togglebright") !== null &&
-        this.document.getElementById("ha-toggledark") !== null
+        document.getElementById("ha-toggledark") !== null
     ) {
         document
             .getElementById("ha-togglebright")
@@ -32,4 +32,4 @@ const startup_theme = function () {
     get_theme_settings("ha-togglebright");
 };
 
-startup_theme();
+export { startup_theme };