Skip to content

Commit

Permalink
🔨[refractor][made changes for tests] (#409)
Browse files Browse the repository at this point in the history 
* 🔨[refractor][made changes for tests]

* 🔨[refractor][changed npm to pnpm in config]

* 🔨[refractor][installed pnpm locally]

* 🔨[refractor][added condition for page to be stable]
  • Loading branch information
@Ankitv003
Ankitv003 authored Nov 6, 2024
1 parent da7b44e commit 45f5e1c
Show file tree
Hide file tree
Showing 19 changed files with 2,190 additions and 204 deletions.
4 changes: 4 additions & 0 deletions javascript/dwa-starter-vanillajs-vite/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DWA Starter</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
<link rel="manifest" href="/manifest.json" />
</head>
<body>
<nav>
Expand Down
197 changes: 129 additions & 68 deletions javascript/dwa-starter-vanillajs-vite/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,162 @@
// Function to create and render the toggle button
function createThemeToggleButton() {
console.log('Creating theme toggle button');
const nav = document.querySelector('nav');
const button = document.createElement('button');
button.id = 'theme-toggle';
button.textContent = 'Toggle Theme';
button.setAttribute('aria-label', 'Toggle Dark Mode');
button.classList.add('theme-toggle-btn');
nav.appendChild(button);
button.addEventListener('click', toggleTheme);
console.log('Theme toggle button created and added to nav');
console.log("Creating theme toggle button");
const nav = document.querySelector("nav");
const button = document.createElement("button");
button.id = "theme-toggle";
button.textContent = "Toggle Theme";
button.setAttribute("aria-label", "Toggle Dark Mode");
button.classList.add("theme-toggle-btn");
nav.appendChild(button);
button.addEventListener("click", toggleTheme);
console.log("Theme toggle button created and added to nav");
}

function toggleTheme() {
console.log('Toggle theme function called');
const body = document.body;
const isDarkMode = body.classList.contains('dark-mode');
console.log('Current mode is dark:', isDarkMode);

if (isDarkMode) {
body.classList.remove('dark-mode');
body.classList.add('light-mode');
console.log('Switched to light mode:', body.classList); // Log class list
} else {
body.classList.remove('light-mode');
body.classList.add('dark-mode');
console.log('Switched to dark mode:', body.classList); // Log class list
}
localStorage.setItem('theme', isDarkMode ? 'light' : 'dark');
}
console.log("Toggle theme function called");
const body = document.body;
const isDarkMode = body.classList.contains("dark-mode");
console.log("Current mode is dark:", isDarkMode);

if (isDarkMode) {
body.classList.remove("dark-mode");
body.classList.add("light-mode");
console.log("Switched to light mode:", body.classList); // Log class list
} else {
body.classList.remove("light-mode");
body.classList.add("dark-mode");
console.log("Switched to dark mode:", body.classList); // Log class list
}
localStorage.setItem("theme", isDarkMode ? "light" : "dark");
}

// Apply stored theme preference or system preference on load
function applyStoredTheme() {
console.log('Applying stored theme');
const storedTheme = localStorage.getItem('theme');
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
const body = document.body;

console.log('Stored theme:', storedTheme);
console.log('System prefers dark scheme:', prefersDarkScheme.matches);

if (storedTheme === 'dark' || (storedTheme === null && prefersDarkScheme.matches)) {
body.classList.add('dark-mode');
console.log('Applied dark mode');
} else {
body.classList.add('light-mode');
console.log('Applied light mode');
}
console.log("Applying stored theme");
const storedTheme = localStorage.getItem("theme");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
const body = document.body;

console.log("Stored theme:", storedTheme);
console.log("System prefers dark scheme:", prefersDarkScheme.matches);

if (
storedTheme === "dark" ||
(storedTheme === null && prefersDarkScheme.matches)
) {
body.classList.add("dark-mode");
console.log("Applied dark mode");
} else {
body.classList.add("light-mode");
console.log("Applied light mode");
}
}

// Initial setup on DOM content loaded
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM content loaded');
applyStoredTheme(); // Apply the stored theme or system preference
createThemeToggleButton(); // Create the theme toggle button and attach to nav
// Initial routing setup (if using navigation in your app)
router();
console.log('Initial setup completed');
document.addEventListener("DOMContentLoaded", () => {
console.log("DOM content loaded");
applyStoredTheme(); // Apply the stored theme or system preference
createThemeToggleButton(); // Create the theme toggle button and attach to nav
// Initial routing setup (if using navigation in your app)
router();
console.log("Initial setup completed");
});

// Import your components for routing (if necessary)
import { Home, About, Settings, NotFound } from './components.js';
import { Home, About, Settings, NotFound } from "./components.js";

// Define routes and their corresponding components (if necessary)
const routes = {
'/': Home,
'/about': About,
'/settings': Settings,
"/": Home,
"/about": About,
"/settings": Settings,
};

// Function to handle navigation (if necessary)
function navigateTo(url) {
console.log('Navigating to:', url);
history.pushState(null, null, url);
router();
console.log("Navigating to:", url);
history.pushState(null, null, url);
router();
}

// Router function to render components based on the current URL
function router() {
console.log('Router function called');
const path = window.location.pathname;
console.log('Current path:', path);
const route = routes[path] || NotFound;
route();
console.log("Router function called");
const path = window.location.pathname;
console.log("Current path:", path);
const route = routes[path] || NotFound;
route();
}

// Event delegation for link clicks (if necessary)
document.addEventListener('click', (e) => {
if (e.target.matches('[data-link]')) {
console.log('Link clicked:', e.target.href);
e.preventDefault();
navigateTo(e.target.href);
}
document.addEventListener("click", (e) => {
if (e.target.matches("[data-link]")) {
console.log("Link clicked:", e.target.href);
e.preventDefault();
navigateTo(e.target.href);
}
});

// Listen to popstate event (back/forward navigation) (if necessary)
window.addEventListener('popstate', router);
window.addEventListener("popstate", router);

console.log("Script loaded");

// Service worker registration
if ("serviceWorker" in navigator) {
window.addEventListener("load", () => {
navigator.serviceWorker
.register("sw.js")
.then((reg) => {
console.log("Service Worker: Registered");

// Check if a new SW is waiting to activate
reg.onupdatefound = () => {
const newWorker = reg.installing;
newWorker.onstatechange = () => {
if (
newWorker.state === "installed" &&
navigator.serviceWorker.controller
) {
// Notify user about new version availability
if (
confirm(
"A new version of the app is available. Would you like to update?"
)
) {
newWorker.postMessage({ action: "skipWaiting" });
}
}
};
};
})
.catch((err) => console.log(`Service Worker Error: ${err}`));

console.log('Script loaded');
// Listen for `controllerchange` to reload the page when the new SW takes control
navigator.serviceWorker.addEventListener("controllerchange", () => {
window.location.reload();
});
});
}

let deferredPrompt;

window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault();
deferredPrompt = e;

// Show custom install button or UI (ensure an element with id="install-button" exists in your HTML)
const addToHomeScreen = document.querySelector("#install-button");
addToHomeScreen.style.display = "block";

addToHomeScreen.addEventListener("click", () => {
// Show the install prompt
deferredPrompt.prompt();
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === "accepted") {
console.log("User accepted the install prompt");
}
deferredPrompt = null;
});
});
});
25 changes: 25 additions & 0 deletions javascript/dwa-starter-vanillajs-vite/manifest.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"name": "dwa-starter-vanillajs-vite",
"display": "standalone",
"scope": "/",
"start_url": "/index.html",
"theme_color": "#ffffff",
"background_color": "#ffffff",
"icons": [
{
"purpose": "maskable",
"sizes": "512x512",
"src": "./public/maskable-icon-512x512.png",
"type": "image/png"
},
{
"purpose": "any",
"sizes": "512x512",
"src": "./public/pwa-512x512.png",
"type": "image/png"
}
],
"orientation": "any",
"dir": "auto",
"lang": "en-US"
}
Loading

0 comments on commit 45f5e1c

Please sign in to comment.