diff --git a/package-lock.json b/package-lock.json index c69ad91..223454a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4,6 +4,9 @@ "requires": true, "packages": { "": { + "dependencies": { + "@alpinejs/focus": "^3.14.1" + }, "devDependencies": { "@tailwindcss/forms": "^0.5.7", "@tailwindcss/typography": "^0.5.10", @@ -31,6 +34,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@alpinejs/focus": { + "version": "3.14.1", + "resolved": "https://registry.npmjs.org/@alpinejs/focus/-/focus-3.14.1.tgz", + "integrity": "sha512-z4xdpK6X1LB2VitsWbL61tmABoOORuEhE5v2tnUX/be6/nAygXyeDxZ1x9s1u+bOEYlIOXXLmjdmTlhchUVWxw==", + "license": "MIT", + "dependencies": { + "focus-trap": "^6.9.4", + "tabbable": "^5.3.3" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", @@ -1276,6 +1289,15 @@ "node": ">=8" } }, + "node_modules/focus-trap": { + "version": "6.9.4", + "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz", + "integrity": "sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==", + "license": "MIT", + "dependencies": { + "tabbable": "^5.3.3" + } + }, "node_modules/follow-redirects": { "version": "1.15.6", "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", @@ -2421,6 +2443,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tabbable": { + "version": "5.3.3", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz", + "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==", + "license": "MIT" + }, "node_modules/tailwindcss": { "version": "3.4.4", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz", diff --git a/package.json b/package.json index 5359373..5b5e9fa 100644 --- a/package.json +++ b/package.json @@ -17,5 +17,8 @@ "prettier-plugin-tailwindcss": "^0.6.5", "tailwindcss": "^3.4.0", "vite": "^5.0" + }, + "dependencies": { + "@alpinejs/focus": "^3.14.1" } } diff --git a/resources/js/app.js b/resources/js/app.js index d42163c..efade33 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -1,57 +1,3 @@ -import "./bootstrap"; - -import.meta.glob(["../video/**"]); - -document.addEventListener("DOMContentLoaded", function() { - const themeToggleIcon = { - dark: document.getElementById("theme-toggle-dark-icon"), - light: document.getElementById("theme-toggle-light-icon") - }; - - // Make sure the theme toggle icons are available. - if (themeToggleIcon.dark === null || themeToggleIcon.light === null) { - console.log("Theme toggle icons not found."); - return; - } - - // Function to update the visibility of the theme icons based on the theme - function updateIconVisibility(theme) { - if (theme === "dark") { - themeToggleIcon.dark.classList.add("hidden"); - themeToggleIcon.light.classList.remove("hidden"); - } else { - themeToggleIcon.dark.classList.remove("hidden"); - themeToggleIcon.light.classList.add("hidden"); - } - } - - // Function to update the theme - function updateTheme(theme) { - // Update the document element class - document.documentElement.classList.remove("light", "dark"); - document.documentElement.classList.add(theme); - - // Update local storage - localStorage.setItem("forge-theme", theme); - - // Update icon visibility - updateIconVisibility(theme); - } - - // Initial setup: Determine the current theme and set icon visibility - const initialTheme = - localStorage.getItem("forge-theme") || - (window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"); - document.documentElement.classList.add(initialTheme); // Ensure the class is set - updateIconVisibility(initialTheme); - - // Set up the theme toggle button - const themeToggleBtn = document.getElementById("theme-toggle"); - themeToggleBtn.addEventListener("click", function() { - // Determine the current theme by checking the classList of documentElement - const currentTheme = document.documentElement.classList.contains("dark") ? "dark" : "light"; - const newTheme = currentTheme === "light" ? "dark" : "light"; - - updateTheme(newTheme); - }); -}); +import "./registerViteAssets"; +import "./registerAlpineLivewire"; +import "./themeToggle"; diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js deleted file mode 100644 index f63c129..0000000 --- a/resources/js/bootstrap.js +++ /dev/null @@ -1,4 +0,0 @@ -import axios from "axios"; - -window.axios = axios; -window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"; diff --git a/resources/js/registerAlpineLivewire.js b/resources/js/registerAlpineLivewire.js new file mode 100644 index 0000000..772cfb3 --- /dev/null +++ b/resources/js/registerAlpineLivewire.js @@ -0,0 +1,6 @@ +import { Alpine, Livewire } from "../../vendor/livewire/livewire/dist/livewire.esm"; +import focus from "@alpinejs/focus"; + +Alpine.plugin(focus); + +Livewire.start(); diff --git a/resources/js/registerViteAssets.js b/resources/js/registerViteAssets.js new file mode 100644 index 0000000..00badd3 --- /dev/null +++ b/resources/js/registerViteAssets.js @@ -0,0 +1,2 @@ +// Register all site assets for Vite to include in the build. +import.meta.glob(["../video/**"]); diff --git a/resources/js/themeToggle.js b/resources/js/themeToggle.js new file mode 100644 index 0000000..3a0ca5f --- /dev/null +++ b/resources/js/themeToggle.js @@ -0,0 +1,53 @@ +document.addEventListener("DOMContentLoaded", function() { + const themeToggleIcon = { + dark: document.getElementById("theme-toggle-dark-icon"), + light: document.getElementById("theme-toggle-light-icon") + }; + + // Make sure the theme toggle icons are available. + if (themeToggleIcon.dark === null || themeToggleIcon.light === null) { + console.log("Theme toggle icons not found."); + return; + } + + // Function to update the visibility of the theme icons based on the theme + function updateIconVisibility(theme) { + if (theme === "dark") { + themeToggleIcon.dark.classList.add("hidden"); + themeToggleIcon.light.classList.remove("hidden"); + } else { + themeToggleIcon.dark.classList.remove("hidden"); + themeToggleIcon.light.classList.add("hidden"); + } + } + + // Function to update the theme + function updateTheme(theme) { + // Update the document element class + document.documentElement.classList.remove("light", "dark"); + document.documentElement.classList.add(theme); + + // Update local storage + localStorage.setItem("forge-theme", theme); + + // Update icon visibility + updateIconVisibility(theme); + } + + // Initial setup: Determine the current theme and set icon visibility + const initialTheme = + localStorage.getItem("forge-theme") || + (window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark"); + document.documentElement.classList.add(initialTheme); // Ensure the class is set + updateIconVisibility(initialTheme); + + // Set up the theme toggle button + const themeToggleBtn = document.getElementById("theme-toggle"); + themeToggleBtn.addEventListener("click", function() { + // Determine the current theme by checking the classList of documentElement + const currentTheme = document.documentElement.classList.contains("dark") ? "dark" : "light"; + const newTheme = currentTheme === "light" ? "dark" : "light"; + + updateTheme(newTheme); + }); +}); diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 11e17a4..65eb5f5 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -56,6 +56,6 @@ @livewire('global-search') @stack('modals') -@livewireScripts +@livewireScriptConfig diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php index cbbed21..1281504 100644 --- a/resources/views/layouts/guest.blade.php +++ b/resources/views/layouts/guest.blade.php @@ -35,6 +35,6 @@ {{ $slot }} -@livewireScripts +@livewireScriptConfig