File Manager

✏️ Edit File: /home/u625410797/domains/monothailand.com/public_html/assets/js/app.js

/**
 * Monothailand - Main Application JavaScript
 * ============================================================
 * ระบบจัดการ Cart, AJAX requests, และ UI interactions
 */

const MonoApp = {
    baseUrl: document.querySelector('meta[name="base-url"]')?.content || '/monothailand/',

/**
     * เริ่มต้นระบบ
     */
    init() {
        this.initScrollEffects();
        this.initProductCards();
        this.initCounterAnimation();
    },

// ============================================================
    // Cart Management
    // ============================================================

/**
     * เพิ่มสินค้าลงตะกร้า
     * @param {number} productId - ID สินค้า
     * @param {number} quantity - จำนวน (default: 1)
     */
    async addToCart(productId, quantity = 1) {
        try {
            const response = await fetch(this.baseUrl + 'api/cart.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    action: 'add',
                    product_id: productId,
                    quantity: quantity
                })
            });

const data = await response.json();

if (data.success) {
                this.updateCartBadge(data.cart_count);
                this.showToast('เพิ่มสินค้าลงตะกร้าแล้ว', 'success');
            } else {
                this.showToast(data.message || 'เกิดข้อผิดพลาด', 'error');
            }
        } catch (error) {
            console.error('Cart error:', error);
            this.showToast('ไม่สามารถเชื่อมต่อเซิร์ฟเวอร์', 'error');
        }
    },

/**
     * อัพเดตจำนวนสินค้าในตะกร้า
     */
    async updateCartItem(cartItemId, quantity) {
        try {
            const response = await fetch(this.baseUrl + 'api/cart.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    action: 'update',
                    item_id: cartItemId,
                    quantity: quantity
                })
            });

/**
     * ลบสินค้าออกจากตะกร้า
     */
    async removeFromCart(cartItemId) {
        if (!confirm('ต้องการลบสินค้านี้ออกจากตะกร้า?')) return;

try {
            const response = await fetch(this.baseUrl + 'api/cart.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    action: 'remove',
                    item_id: cartItemId
                })
            });

/**
     * อัพเดต badge จำนวนสินค้าบน icon ตะกร้า
     */
    updateCartBadge(count) {
        let badge = document.getElementById('cart-badge');

if (count > 0) {
            if (!badge) {
                // สร้าง badge ใหม่
                const cartLink = document.querySelector('a[href*="cart.php"]');
                if (cartLink) {
                    badge = document.createElement('span');
                    badge.id = 'cart-badge';
                    badge.className = 'absolute -top-0.5 -right-0.5 bg-amber-500 text-white text-[10px] font-bold w-5 h-5 rounded-full flex items-center justify-center';
                    cartLink.appendChild(badge);
                }
            }
            if (badge) {
                badge.textContent = count;
                // Bounce animation
                badge.style.transform = 'scale(1.3)';
                setTimeout(() => { badge.style.transform = 'scale(1)'; }, 200);
            }
        } else if (badge) {
            badge.remove();
        }
    },

/**
     * อัพเดตราคารวมในหน้า cart
     */
    updateCartTotal() {
        const rows = document.querySelectorAll('[data-cart-item]');
        if (rows.length === 0) {
            // ตะกร้าว่าง - reload เพื่อแสดง empty state
            location.reload();
        }
    },

// ============================================================
    // UI Interactions
    // ============================================================

/**
     * แสดง Toast notification
     */
    showToast(message, type = 'success') {
        // ลบ toast เก่า
        document.querySelectorAll('.mono-toast').forEach(el => el.remove());

const toast = document.createElement('div');
        toast.className = `mono-toast fixed top-4 right-4 z-[100] px-6 py-3 rounded-lg shadow-lg text-white text-sm font-medium transition-all duration-300 ${
            type === 'error' ? 'bg-red-500' : type === 'warning' ? 'bg-amber-500' : 'bg-green-600'
        }`;
        toast.textContent = message;
        toast.style.transform = 'translateX(120%)';

document.body.appendChild(toast);

// Animate in
        requestAnimationFrame(() => {
            toast.style.transform = 'translateX(0)';
        });

// Auto remove
        setTimeout(() => {
            toast.style.transform = 'translateX(120%)';
            setTimeout(() => toast.remove(), 300);
        }, 3000);
    },

/**
     * Scroll effects สำหรับ header
     */
    initScrollEffects() {
        const header = document.querySelector('header');
        if (!header) return;

/**
     * Product card hover effects (สำหรับ touch devices)
     */
    initProductCards() {
        document.querySelectorAll('.product-card').forEach(card => {
            card.addEventListener('touchstart', function() {
                this.querySelector('.product-actions')?.style.setProperty('opacity', '1');
                this.querySelector('.product-actions')?.style.setProperty('transform', 'translateX(0)');
            }, { passive: true });
        });
    },

/**
     * Counter animation สำหรับ stat numbers
     */
    initCounterAnimation() {
        const counters = document.querySelectorAll('[data-count]');
        if (counters.length === 0) return;

const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const el = entry.target;
                    const target = parseInt(el.dataset.count, 10);
                    const suffix = el.dataset.suffix || '';
                    const duration = 2000;
                    const startTime = performance.now();

// easeOutExpo animation curve
                    const animate = (currentTime) => {
                        const elapsed = currentTime - startTime;
                        const progress = Math.min(elapsed / duration, 1);
                        const eased = 1 - Math.pow(1 - progress, 4);
                        const current = Math.round(target * eased);

el.textContent = current.toLocaleString() + suffix;

if (progress < 1) {
                            requestAnimationFrame(animate);
                        }
                    };

requestAnimationFrame(animate);
                    observer.unobserve(el);
                }
            });
        }, { threshold: 0.3 });

counters.forEach(counter => observer.observe(counter));
    },

/**
     * Image gallery สำหรับ product detail
     */
    initGallery(images) {
        const mainImg = document.getElementById('main-product-image');
        const thumbs = document.querySelectorAll('.gallery-thumb');

thumbs.forEach((thumb, index) => {
            thumb.addEventListener('click', () => {
                mainImg.src = images[index];
                thumbs.forEach(t => t.classList.remove('ring-2', 'ring-green-500'));
                thumb.classList.add('ring-2', 'ring-green-500');
            });
        });
    }
};

// Initialize เมื่อ DOM พร้อม
document.addEventListener('DOMContentLoaded', () => MonoApp.init());

Batal

⬅ Naik ke assets 7 item

Nama	Tipe	Ukuran	Diubah	Aksi
📜admin.js	js	8.6 KB	2026-05-31 16:39	✏️ Edit 👁️ View
📜app.js	js	9.7 KB	2026-05-31 16:39	✏️ Edit 👁️ View
📜lazy-load.js	js	2.9 KB	2026-05-31 16:39	✏️ Edit 👁️ View
📜main.js	js	5.9 KB	2026-05-31 16:39	✏️ Edit 👁️ View
📜rehydration.js	js	4.7 KB	2026-05-31 16:39	✏️ Edit 👁️ View
📜sse-client.js	js	1.7 KB	2026-05-31 16:39	✏️ Edit 👁️ View
📜state-sync.js	js	5.9 KB	2026-05-31 16:39	✏️ Edit 👁️ View