updateweb
This commit is contained in:
Local Server
@@ -1,427 +1,350 @@
|
||||
// Sky Art Shop - Main JavaScript File
|
||||
|
||||
// ====================================
|
||||
// Mobile Navigation Toggle
|
||||
// ====================================
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const navToggle = document.querySelector(".nav-toggle");
|
||||
const navMenu = document.querySelector("#navDropdown");
|
||||
|
||||
if (navToggle && navMenu) {
|
||||
// Hover to open dropdown
|
||||
navToggle.addEventListener("mouseenter", function () {
|
||||
navMenu.classList.add("active");
|
||||
this.setAttribute("aria-expanded", "true");
|
||||
|
||||
const spans = this.querySelectorAll("span");
|
||||
spans[0].style.transform = "rotate(45deg) translate(7px, 7px)";
|
||||
spans[1].style.opacity = "0";
|
||||
spans[2].style.transform = "rotate(-45deg) translate(7px, -7px)";
|
||||
});
|
||||
|
||||
// Keep dropdown open when hovering over it
|
||||
navMenu.addEventListener("mouseenter", function () {
|
||||
this.classList.add("active");
|
||||
});
|
||||
|
||||
// Close when mouse leaves both hamburger and dropdown
|
||||
navToggle.addEventListener("mouseleave", function (e) {
|
||||
// Delay closing to allow moving to dropdown
|
||||
setTimeout(() => {
|
||||
if (!navMenu.matches(":hover") && !navToggle.matches(":hover")) {
|
||||
navMenu.classList.remove("active");
|
||||
navToggle.setAttribute("aria-expanded", "false");
|
||||
|
||||
const spans = navToggle.querySelectorAll("span");
|
||||
spans[0].style.transform = "none";
|
||||
spans[1].style.opacity = "1";
|
||||
spans[2].style.transform = "none";
|
||||
}
|
||||
}, 200);
|
||||
});
|
||||
|
||||
navMenu.addEventListener("mouseleave", function () {
|
||||
setTimeout(() => {
|
||||
if (!navMenu.matches(":hover") && !navToggle.matches(":hover")) {
|
||||
navMenu.classList.remove("active");
|
||||
navToggle.setAttribute("aria-expanded", "false");
|
||||
|
||||
const spans = navToggle.querySelectorAll("span");
|
||||
spans[0].style.transform = "none";
|
||||
spans[1].style.opacity = "1";
|
||||
spans[2].style.transform = "none";
|
||||
}
|
||||
}, 200);
|
||||
});
|
||||
|
||||
// Click to toggle (for mobile/touch)
|
||||
navToggle.addEventListener("click", function (e) {
|
||||
e.stopPropagation();
|
||||
const isActive = navMenu.classList.toggle("active");
|
||||
this.setAttribute("aria-expanded", isActive ? "true" : "false");
|
||||
|
||||
// Animate hamburger menu
|
||||
const spans = this.querySelectorAll("span");
|
||||
if (isActive) {
|
||||
spans[0].style.transform = "rotate(45deg) translate(7px, 7px)";
|
||||
spans[1].style.opacity = "0";
|
||||
spans[2].style.transform = "rotate(-45deg) translate(7px, -7px)";
|
||||
} else {
|
||||
spans[0].style.transform = "none";
|
||||
spans[1].style.opacity = "1";
|
||||
spans[2].style.transform = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Close dropdown when clicking on a link
|
||||
const dropdownLinks = navMenu.querySelectorAll("a");
|
||||
dropdownLinks.forEach((link) => {
|
||||
link.addEventListener("click", function () {
|
||||
navMenu.classList.remove("active");
|
||||
navToggle.setAttribute("aria-expanded", "false");
|
||||
const spans = navToggle.querySelectorAll("span");
|
||||
spans[0].style.transform = "none";
|
||||
spans[1].style.opacity = "1";
|
||||
spans[2].style.transform = "none";
|
||||
});
|
||||
});
|
||||
|
||||
// Close dropdown when clicking outside
|
||||
document.addEventListener("click", function (event) {
|
||||
// Don't close if clicking on cart/wishlist dropdowns
|
||||
if (
|
||||
event.target.closest(".dropdown-container") ||
|
||||
event.target.closest(".icon-dropdown")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const isClickInside =
|
||||
navToggle.contains(event.target) || navMenu.contains(event.target);
|
||||
if (!isClickInside && navMenu.classList.contains("active")) {
|
||||
navMenu.classList.remove("active");
|
||||
navToggle.setAttribute("aria-expanded", "false");
|
||||
const spans = navToggle.querySelectorAll("span");
|
||||
spans[0].style.transform = "none";
|
||||
spans[1].style.opacity = "1";
|
||||
spans[2].style.transform = "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// ====================================
|
||||
// Smooth Scrolling for Anchor Links
|
||||
// ====================================
|
||||
document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
|
||||
anchor.addEventListener("click", function (e) {
|
||||
const href = this.getAttribute("href");
|
||||
if (href !== "#" && href !== "#instagram" && href !== "#wishlist") {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(href);
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: "smooth",
|
||||
block: "start",
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// ====================================
|
||||
// Shop Page Filtering
|
||||
// ====================================
|
||||
const categoryFilter = document.getElementById("category-filter");
|
||||
const sortFilter = document.getElementById("sort-filter");
|
||||
|
||||
if (categoryFilter) {
|
||||
categoryFilter.addEventListener("change", function () {
|
||||
const selectedCategory = this.value;
|
||||
const productCards = document.querySelectorAll(".product-card");
|
||||
|
||||
productCards.forEach((card) => {
|
||||
if (selectedCategory === "all") {
|
||||
card.style.display = "block";
|
||||
} else {
|
||||
const cardCategory = card.getAttribute("data-category");
|
||||
if (cardCategory === selectedCategory) {
|
||||
card.style.display = "block";
|
||||
} else {
|
||||
card.style.display = "none";
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (sortFilter) {
|
||||
sortFilter.addEventListener("change", function () {
|
||||
const sortValue = this.value;
|
||||
const productsGrid = document.querySelector(".products-grid");
|
||||
const productCards = Array.from(document.querySelectorAll(".product-card"));
|
||||
|
||||
if (sortValue === "price-low") {
|
||||
productCards.sort((a, b) => {
|
||||
const priceA = parseFloat(
|
||||
a.querySelector(".price").textContent.replace("$", "")
|
||||
);
|
||||
const priceB = parseFloat(
|
||||
b.querySelector(".price").textContent.replace("$", "")
|
||||
);
|
||||
return priceA - priceB;
|
||||
});
|
||||
} else if (sortValue === "price-high") {
|
||||
productCards.sort((a, b) => {
|
||||
const priceA = parseFloat(
|
||||
a.querySelector(".price").textContent.replace("$", "")
|
||||
);
|
||||
const priceB = parseFloat(
|
||||
b.querySelector(".price").textContent.replace("$", "")
|
||||
);
|
||||
return priceB - priceA;
|
||||
});
|
||||
}
|
||||
|
||||
// Re-append sorted cards
|
||||
productCards.forEach((card) => {
|
||||
productsGrid.appendChild(card);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// ====================================
|
||||
// Add to Cart Functionality (Basic)
|
||||
// ====================================
|
||||
document.querySelectorAll(".product-card .btn").forEach((button) => {
|
||||
button.addEventListener("click", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get product details
|
||||
const productCard = this.closest(".product-card");
|
||||
const productName = productCard.querySelector("h3").textContent;
|
||||
const productPrice = productCard.querySelector(".price").textContent;
|
||||
|
||||
// Show notification
|
||||
showNotification(`${productName} added to cart!`);
|
||||
|
||||
// You can expand this to actually store cart items
|
||||
// For example, using localStorage or sending to a server
|
||||
});
|
||||
});
|
||||
|
||||
// ====================================
|
||||
// Contact Form Handling
|
||||
// ====================================
|
||||
const contactForm = document.getElementById("contactForm");
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener("submit", function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Get form values
|
||||
const name = document.getElementById("name").value;
|
||||
const email = document.getElementById("email").value;
|
||||
const phone = document.getElementById("phone").value;
|
||||
const subject = document.getElementById("subject").value;
|
||||
const message = document.getElementById("message").value;
|
||||
|
||||
// Basic validation
|
||||
if (!name || !email || !subject || !message) {
|
||||
showNotification("Please fill in all required fields!", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
// Email validation
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(email)) {
|
||||
showNotification("Please enter a valid email address!", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
// Here you would typically send the form data to a server
|
||||
// For now, we'll just show a success message
|
||||
showNotification(
|
||||
"Thank you! Your message has been sent. We'll get back to you soon.",
|
||||
"success"
|
||||
);
|
||||
|
||||
// Reset form
|
||||
contactForm.reset();
|
||||
});
|
||||
}
|
||||
|
||||
// ====================================
|
||||
// Notification System
|
||||
// ====================================
|
||||
function showNotification(message, type = "success") {
|
||||
// Create notification element
|
||||
const notification = document.createElement("div");
|
||||
notification.className = `notification notification-${type}`;
|
||||
notification.textContent = message;
|
||||
|
||||
// Style the notification
|
||||
notification.style.cssText = `
|
||||
position: fixed;
|
||||
top: 100px;
|
||||
right: 20px;
|
||||
background-color: ${type === "success" ? "#4CAF50" : "#F44336"};
|
||||
color: white;
|
||||
padding: 15px 25px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
z-index: 10000;
|
||||
animation: slideIn 0.3s ease-out;
|
||||
`;
|
||||
|
||||
// Add animation
|
||||
const style = document.createElement("style");
|
||||
style.textContent = `
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateX(400px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes slideOut {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: translateX(400px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Add to page
|
||||
document.body.appendChild(notification);
|
||||
|
||||
// Remove after 3 seconds
|
||||
setTimeout(() => {
|
||||
notification.style.animation = "slideOut 0.3s ease-out";
|
||||
setTimeout(() => {
|
||||
notification.remove();
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// ====================================
|
||||
// Image Lazy Loading (Optional Enhancement)
|
||||
// ====================================
|
||||
if ("IntersectionObserver" in window) {
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
img.src = img.dataset.src || img.src;
|
||||
img.classList.add("loaded");
|
||||
observer.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll("img").forEach((img) => {
|
||||
imageObserver.observe(img);
|
||||
});
|
||||
}
|
||||
|
||||
// ====================================
|
||||
// Scroll to Top Button
|
||||
// ====================================
|
||||
function createScrollToTopButton() {
|
||||
const button = document.createElement("button");
|
||||
button.innerHTML = "↑";
|
||||
button.className = "scroll-to-top";
|
||||
button.style.cssText = `
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
right: 30px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-color: #6B4E9B;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
font-size: 24px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
|
||||
`;
|
||||
|
||||
document.body.appendChild(button);
|
||||
|
||||
// Show/hide button based on scroll position
|
||||
window.addEventListener("scroll", () => {
|
||||
if (window.pageYOffset > 300) {
|
||||
button.style.display = "block";
|
||||
} else {
|
||||
button.style.display = "none";
|
||||
}
|
||||
});
|
||||
|
||||
// Scroll to top when clicked
|
||||
button.addEventListener("click", () => {
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth",
|
||||
});
|
||||
});
|
||||
|
||||
// Hover effect
|
||||
button.addEventListener("mouseenter", () => {
|
||||
button.style.backgroundColor = "#5a3e82";
|
||||
button.style.transform = "translateY(-3px)";
|
||||
});
|
||||
|
||||
button.addEventListener("mouseleave", () => {
|
||||
button.style.backgroundColor = "#6B4E9B";
|
||||
button.style.transform = "translateY(0)";
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize scroll to top button
|
||||
createScrollToTopButton();
|
||||
|
||||
// ====================================
|
||||
// Portfolio Gallery Hover Effects
|
||||
// ====================================
|
||||
document.querySelectorAll(".portfolio-category").forEach((category) => {
|
||||
category.addEventListener("mouseenter", function () {
|
||||
this.style.transition = "all 0.3s ease";
|
||||
});
|
||||
});
|
||||
|
||||
// ====================================
|
||||
// Active Navigation Link Highlighting
|
||||
// ====================================
|
||||
function highlightActiveNavLink() {
|
||||
const currentPage = window.location.pathname.split("/").pop() || "index.html";
|
||||
const navLinks = document.querySelectorAll(".nav-menu a");
|
||||
|
||||
navLinks.forEach((link) => {
|
||||
const linkPage = link.getAttribute("href").split("/").pop().split("#")[0];
|
||||
if (linkPage === currentPage) {
|
||||
link.classList.add("active");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
highlightActiveNavLink();
|
||||
|
||||
// ====================================
|
||||
// Print console message
|
||||
// ====================================
|
||||
console.log(
|
||||
"%c Sky Art Shop Website ",
|
||||
"background: #6B4E9B; color: white; font-size: 20px; padding: 10px;"
|
||||
);
|
||||
console.log("Welcome to Sky Art Shop! 🎨");
|
||||
/**
|
||||
* Main Application JavaScript
|
||||
* Handles global state management, API integration, and core functionality
|
||||
*/
|
||||
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
// Global state management
|
||||
window.AppState = {
|
||||
cart: [],
|
||||
wishlist: [],
|
||||
products: [],
|
||||
settings: null,
|
||||
user: null,
|
||||
|
||||
// Initialize state from localStorage
|
||||
init() {
|
||||
this.loadCart();
|
||||
this.loadWishlist();
|
||||
this.updateUI();
|
||||
},
|
||||
|
||||
// Cart management
|
||||
loadCart() {
|
||||
try {
|
||||
const saved = localStorage.getItem("cart");
|
||||
this.cart = saved ? JSON.parse(saved) : [];
|
||||
} catch (error) {
|
||||
console.error("Error loading cart:", error);
|
||||
this.cart = [];
|
||||
}
|
||||
},
|
||||
|
||||
saveCart() {
|
||||
try {
|
||||
localStorage.setItem("cart", JSON.stringify(this.cart));
|
||||
this.updateUI();
|
||||
} catch (error) {
|
||||
console.error("Error saving cart:", error);
|
||||
}
|
||||
},
|
||||
|
||||
addToCart(product, quantity = 1) {
|
||||
const existing = this.cart.find((item) => item.id === product.id);
|
||||
if (existing) {
|
||||
existing.quantity += quantity;
|
||||
} else {
|
||||
this.cart.push({ ...product, quantity });
|
||||
}
|
||||
this.saveCart();
|
||||
this.showNotification("Added to cart", "success");
|
||||
},
|
||||
|
||||
removeFromCart(productId) {
|
||||
this.cart = this.cart.filter((item) => item.id !== productId);
|
||||
this.saveCart();
|
||||
this.showNotification("Removed from cart", "info");
|
||||
},
|
||||
|
||||
updateCartQuantity(productId, quantity) {
|
||||
const item = this.cart.find((item) => item.id === productId);
|
||||
if (item) {
|
||||
item.quantity = Math.max(1, quantity);
|
||||
this.saveCart();
|
||||
}
|
||||
},
|
||||
|
||||
getCartTotal() {
|
||||
return this.cart.reduce(
|
||||
(sum, item) => sum + item.price * item.quantity,
|
||||
0
|
||||
);
|
||||
},
|
||||
|
||||
getCartCount() {
|
||||
return this.cart.reduce((sum, item) => sum + item.quantity, 0);
|
||||
},
|
||||
|
||||
// Wishlist management
|
||||
loadWishlist() {
|
||||
try {
|
||||
const saved = localStorage.getItem("wishlist");
|
||||
this.wishlist = saved ? JSON.parse(saved) : [];
|
||||
} catch (error) {
|
||||
console.error("Error loading wishlist:", error);
|
||||
this.wishlist = [];
|
||||
}
|
||||
},
|
||||
|
||||
saveWishlist() {
|
||||
try {
|
||||
localStorage.setItem("wishlist", JSON.stringify(this.wishlist));
|
||||
this.updateUI();
|
||||
} catch (error) {
|
||||
console.error("Error saving wishlist:", error);
|
||||
}
|
||||
},
|
||||
|
||||
addToWishlist(product) {
|
||||
if (!this.wishlist.find((item) => item.id === product.id)) {
|
||||
this.wishlist.push(product);
|
||||
this.saveWishlist();
|
||||
this.showNotification("Added to wishlist", "success");
|
||||
}
|
||||
},
|
||||
|
||||
removeFromWishlist(productId) {
|
||||
this.wishlist = this.wishlist.filter((item) => item.id !== productId);
|
||||
this.saveWishlist();
|
||||
this.showNotification("Removed from wishlist", "info");
|
||||
},
|
||||
|
||||
isInWishlist(productId) {
|
||||
return this.wishlist.some((item) => item.id === productId);
|
||||
},
|
||||
|
||||
// UI updates
|
||||
updateUI() {
|
||||
this.updateCartUI();
|
||||
this.updateWishlistUI();
|
||||
},
|
||||
|
||||
updateCartUI() {
|
||||
const count = this.getCartCount();
|
||||
const badge = document.getElementById("cartCount");
|
||||
if (badge) {
|
||||
badge.textContent = count;
|
||||
badge.style.display = count > 0 ? "flex" : "none";
|
||||
}
|
||||
},
|
||||
|
||||
updateWishlistUI() {
|
||||
const count = this.wishlist.length;
|
||||
const badge = document.getElementById("wishlistCount");
|
||||
if (badge) {
|
||||
badge.textContent = count;
|
||||
badge.style.display = count > 0 ? "flex" : "none";
|
||||
}
|
||||
},
|
||||
|
||||
// Notifications
|
||||
showNotification(message, type = "info") {
|
||||
const notification = document.createElement("div");
|
||||
notification.className = `notification notification-${type}`;
|
||||
notification.textContent = message;
|
||||
notification.setAttribute("role", "alert");
|
||||
notification.setAttribute("aria-live", "polite");
|
||||
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => notification.classList.add("show"), 10);
|
||||
setTimeout(() => {
|
||||
notification.classList.remove("show");
|
||||
setTimeout(() => notification.remove(), 300);
|
||||
}, 3000);
|
||||
},
|
||||
};
|
||||
|
||||
// API Client
|
||||
window.API = {
|
||||
baseURL: "/api",
|
||||
|
||||
async request(endpoint, options = {}) {
|
||||
try {
|
||||
const response = await fetch(this.baseURL + endpoint, {
|
||||
...options,
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...options.headers,
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error("API request failed:", error);
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
|
||||
// Product endpoints
|
||||
async getProducts(filters = {}) {
|
||||
const params = new URLSearchParams(filters);
|
||||
return this.request(`/products?${params}`);
|
||||
},
|
||||
|
||||
async getProduct(id) {
|
||||
return this.request(`/products/${id}`);
|
||||
},
|
||||
|
||||
async getFeaturedProducts() {
|
||||
return this.request("/products/featured");
|
||||
},
|
||||
|
||||
// Settings endpoint
|
||||
async getSettings() {
|
||||
return this.request("/settings");
|
||||
},
|
||||
|
||||
// Homepage endpoint
|
||||
async getHomepageSettings() {
|
||||
return this.request("/homepage/settings");
|
||||
},
|
||||
|
||||
// Menu endpoint
|
||||
async getMenu() {
|
||||
return this.request("/menu");
|
||||
},
|
||||
|
||||
// Blog endpoints
|
||||
async getBlogPosts() {
|
||||
return this.request("/blog");
|
||||
},
|
||||
|
||||
async getBlogPost(id) {
|
||||
return this.request(`/blog/${id}`);
|
||||
},
|
||||
|
||||
// Portfolio endpoints
|
||||
async getPortfolioProjects() {
|
||||
return this.request("/portfolio");
|
||||
},
|
||||
|
||||
async getPortfolioProject(id) {
|
||||
return this.request(`/portfolio/${id}`);
|
||||
},
|
||||
|
||||
// Pages endpoints
|
||||
async getPages() {
|
||||
return this.request("/pages");
|
||||
},
|
||||
|
||||
async getPage(slug) {
|
||||
return this.request(`/pages/${slug}`);
|
||||
},
|
||||
};
|
||||
|
||||
// Utility functions
|
||||
window.Utils = {
|
||||
// Format currency
|
||||
formatCurrency(amount) {
|
||||
return new Intl.NumberFormat("en-US", {
|
||||
style: "currency",
|
||||
currency: "USD",
|
||||
}).format(amount);
|
||||
},
|
||||
|
||||
// Format date
|
||||
formatDate(date) {
|
||||
return new Intl.DateTimeFormat("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
}).format(new Date(date));
|
||||
},
|
||||
|
||||
// Debounce function
|
||||
debounce(func, wait) {
|
||||
let timeout;
|
||||
return function executedFunction(...args) {
|
||||
const later = () => {
|
||||
clearTimeout(timeout);
|
||||
func(...args);
|
||||
};
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(later, wait);
|
||||
};
|
||||
},
|
||||
|
||||
// Get URL parameter
|
||||
getUrlParameter(name) {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
return params.get(name);
|
||||
},
|
||||
|
||||
// Safe HTML encode
|
||||
escapeHtml(text) {
|
||||
const div = document.createElement("div");
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
},
|
||||
|
||||
// Show loading state
|
||||
showLoading(element) {
|
||||
if (element) {
|
||||
element.classList.add("loading");
|
||||
element.setAttribute("aria-busy", "true");
|
||||
}
|
||||
},
|
||||
|
||||
hideLoading(element) {
|
||||
if (element) {
|
||||
element.classList.remove("loading");
|
||||
element.setAttribute("aria-busy", "false");
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
// Initialize on DOM ready
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
window.AppState.init();
|
||||
});
|
||||
} else {
|
||||
window.AppState.init();
|
||||
}
|
||||
|
||||
// Add notification styles if not exists
|
||||
if (!document.getElementById("notification-styles")) {
|
||||
const style = document.createElement("style");
|
||||
style.id = "notification-styles";
|
||||
style.textContent = `
|
||||
.notification {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
padding: 15px 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
||||
z-index: 10000;
|
||||
opacity: 0;
|
||||
transform: translateX(400px);
|
||||
transition: all 0.3s ease;
|
||||
max-width: 300px;
|
||||
}
|
||||
.notification.show {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
.notification-success {
|
||||
border-left: 4px solid #28a745;
|
||||
}
|
||||
.notification-error {
|
||||
border-left: 4px solid #dc3545;
|
||||
}
|
||||
.notification-info {
|
||||
border-left: 4px solid #17a2b8;
|
||||
}
|
||||
.notification-warning {
|
||||
border-left: 4px solid #ffc107;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user