File manager - Edit - /home/webapp69.cm.in.th/u69319090039/Shop39/public/public/js/main.js
Back
// Main JavaScript Handlers for Cart & AJAX document.addEventListener('DOMContentLoaded', () => { console.log('Marketplace App initialized'); }); // Toast notification trigger function showToast(message, type = 'success') { Swal.fire({ toast: true, position: 'top-end', icon: type, title: message, showConfirmButton: false, timer: 3000, timerProgressBar: true }); } // Global store map variables window.storeMapInstance = null; // Leaflet map instance window.storeMapLatLng = null; // Cached latitude/longitude {lat, lon} /** * Geocode the given address using Nominatim (OpenStreetMap). * Returns a promise resolving to {lat, lon} or null on failure. */ function geocodeAddress(address) { return fetch('https://nominatim.openstreetmap.org/search?format=json&q=' + encodeURIComponent(address)) .then(res => res.json()) .then(data => { if (data && data.length > 0) { return { lat: parseFloat(data[0].lat), lon: parseFloat(data[0].lon) }; } console.error('Geocoding failed for address:', address); return null; }) .catch(err => { console.error('Geocoding error:', err); return null; }); } /** * Initialise the Leaflet map (or update it) with the given coordinates. * Applies a clean visual style and a custom store marker. */ function initOrUpdateStoreMap(lat, lon, name, address) { if (!window.storeMapInstance) { // First time: create map const map = L.map('inlineStoreMap', { zoomControl: false }).setView([lat, lon], 15); // Use standard OSM tiles – good contrast, Thai labels, solid performance L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© <a href="https://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors', maxZoom: 19 }).addTo(map); // Custom rounded marker matching the brand colour (primary) const customIcon = L.divIcon({ className: 'custom-marker', html: `<div class="pin"><i class="bi bi-shop"></i></div>`, iconSize: [30, 42], iconAnchor: [15, 42] }); L.marker([lat, lon], { icon: customIcon }) .addTo(map) .bindPopup(`<div class="custom-popup"><strong>${name}</strong><br/>${address}</div>`, { className: 'leaflet-popup-custom' }) .openPopup(); // Minimal zoom control, placed in the top‑right to match UI L.control.zoom({ position: 'topright' }).addTo(map); window.storeMapInstance = map; } else { // Re‑use existing map – just recenter and replace marker window.storeMapInstance.setView([lat, lon], 15); // Remove previous markers window.storeMapInstance.eachLayer(layer => { if (layer instanceof L.Marker) { window.storeMapInstance.removeLayer(layer); } }); const customIcon = L.divIcon({ className: 'custom-marker', html: `<div class="pin"><i class="bi bi-shop"></i></div>`, iconSize: [30, 42], iconAnchor: [15, 42] }); L.marker([lat, lon], { icon: customIcon }) .addTo(window.storeMapInstance) .bindPopup(`<div class="custom-popup"><strong>${name}</strong><br/>${address}</div>`, { className: 'leaflet-popup-custom' }) .openPopup(); } // Ensure proper rendering after the modal becomes visible setTimeout(() => window.storeMapInstance.invalidateSize(), 0); } // Listen for the "ดูแผนที่" button click and load the map lazily document.addEventListener('click', function (e) { if (e.target && e.target.id === 'storeMapBtn') { console.log('Store map button clicked'); const address = e.target.getAttribute('data-address'); const name = e.target.getAttribute('data-name'); const savedLat = e.target.getAttribute('data-lat'); const savedLng = e.target.getAttribute('data-lng'); const mapContainer = document.getElementById('inlineStoreMap'); // Toggle visibility if (mapContainer.classList.contains('map-expanded')) { mapContainer.classList.remove('map-expanded'); mapContainer.classList.add('map-collapsed'); e.target.textContent = 'ดูแผนที่'; console.log('Map collapsed'); return; } mapContainer.classList.remove('map-collapsed'); mapContainer.classList.add('map-expanded'); e.target.textContent = 'ซ่อนแผนที่'; console.log('Map expanded, initializing'); // Delay init to allow CSS transition/layout setTimeout(() => { if (savedLat && savedLng && savedLat !== '' && savedLng !== '') { const coords = { lat: parseFloat(savedLat), lon: parseFloat(savedLng) }; window.storeMapLatLng = coords; initOrUpdateStoreMap(coords.lat, coords.lon, name, address); } else if (window.storeMapLatLng) { initOrUpdateStoreMap(window.storeMapLatLng.lat, window.storeMapLatLng.lon, name, address); } else { geocodeAddress(address).then(coord => { if (coord) { window.storeMapLatLng = coord; initOrUpdateStoreMap(coord.lat, coord.lon, name, address); } else { // Fallback to default location (Bangkok) if geocoding fails const fallback = { lat: 13.7563, lon: 100.5018 }; window.storeMapLatLng = fallback; initOrUpdateStoreMap(fallback.lat, fallback.lon, name, address); } }); } }, 200); } });
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.26 |
proxy
|
phpinfo
|
Settings