GODZINY OTWARCIA:
- Wskazówki dojazdu + Wskazówki dojazdu + Strona salonu - `; + ` - injectStyles(); + injectStyles() - let map; - let markers = []; - let places = []; + let map + let markers = [] + let places = [] var iconB = 'https://moodo.pl/data/include/cms/salony-1/mark2.png' var iconW = 'https://moodo.pl/data/include/cms/salony-1/markw2.png' - fetch(API_URL) - .then(r => r.json()) - .then(data => { - places = data; - initMap(); - buildSuggestList(); - renderList(data); - renderMarkers(data); - }); + fetch(API_URL) + .then((r) => r.json()) + .then((data) => { + places = data + initMap() + buildSuggestList() + // renderList(data) + renderMarkers(data) + }) - - function prepareToCompare(str) { return convertSpecialsCharacters(str.toString().toLowerCase().trim()) } - function convertSpecialsCharacters(str) { + function convertSpecialsCharacters(str) { const conversions = {} conversions.a = 'ą' conversions.e = 'ę' @@ -91,101 +90,132 @@ return str } - - // ---------------- MAP ---------------- - function initMap() { - map = new google.maps.Map(document.getElementById('map'), { - zoom: 6, - center: { lat: 52.1, lng: 19.4 }, - mapTypeId: 'roadmap' - }); - } - function renderMarkers(data) { - data.forEach(place => { - place.shops.forEach(shop => { - if (!shop.lat || !shop.lng) return; + // ---------------- MAP ---------------- + function initMap() { + map = new google.maps.Map(document.getElementById('map'), { + zoom: 6, + center: { lat: 52.1, lng: 19.4 }, + mapTypeId: 'roadmap', + }) + } - const marker = new google.maps.Marker({ - map, - icon: iconB, - position: { lat: +shop.lat, lng: +shop.lng } - }); + function renderMarkers(data) { + data.forEach((place) => { + place.shops.forEach((shop) => { + if (!shop.lat || !shop.lng) return - marker.addListener('click', () => { - map.setZoom(16); - map.panTo(marker.getPosition()); - filterList(place.name); - }); + const marker = new google.maps.Marker({ + map, + icon: iconB, + position: { lat: +shop.lat, lng: +shop.lng }, + }) - markers.push(marker); - }); - }); - } + marker.shopLat = +shop.lat + marker.shopLng = +shop.lng - // ---------------- LIST ---------------- - function renderList(data) { - const list = document.getElementById('shopList'); - list.querySelectorAll('.place:not(.forCloning)').forEach(el => el.remove()); + marker.addListener('click', () => { + map.setZoom(16) + map.panTo(marker.getPosition()) + filterList(place.name) + highlightMarker(marker) + }) - let count = 0; + markers.push(marker) + }) + }) + } + function highlightMarker(selectedMarker) { + markers.forEach((marker) => { + marker.setIcon(marker === selectedMarker ? iconW : iconB) + }) + } - data.forEach(place => { - place.shops.forEach(shop => { - const clone = list.querySelector('.forCloning').cloneNode(true); - clone.classList.remove('forCloning'); + // ---------------- LIST ---------------- + function renderList(data) { + const list = document.getElementById('shopList') + list + .querySelectorAll('.place:not(.forCloning)') + .forEach((el) => el.remove()) - clone.querySelector('.lat').textContent = shop.lat; - clone.querySelector('.lng').textContent = shop.lng; - clone.querySelector('.shopAddress').textContent = - `${place.name} - ${shop.address || ''}`; - clone.querySelector('.shopHours').textContent = - shop.open_hours || '—'; + let count = 0 - clone.querySelector('.link').href = shop.map_url || '#'; + data.forEach((place) => { + place.shops.forEach((shop) => { + const clone = list.querySelector('.forCloning').cloneNode(true) + clone.classList.remove('forCloning') - clone.addEventListener('click', (e) => { - map.setZoom(16); - map.panTo({ lat: +shop.lat, lng: +shop.lng }); + clone.querySelector('.lat').textContent = shop.lat + clone.querySelector('.lng').textContent = shop.lng + clone.querySelector('.shopAddress').textContent = `${place.name} - ${ + shop.address || '' + }` + clone.querySelector('.shopHours').textContent = shop.open_hours || '—' - const ancestor = e.target.closest('.place') - ancestor.classList.add('active') - ancestor.getElementsByTagName('INPUT')[0].checked = true - }); + // GOOGLE LINK + const googleLink = clone.querySelector('.googleLink') + if (shop.urlAddress) { + googleLink.href = shop.urlAddress + } else { + googleLink.remove() + } - list.appendChild(clone); - count++; - }); - }); + // MOODO LINK + const moodoLink = clone.querySelector('.moodoLink') + if (shop.shopUrl) { + moodoLink.href = shop.shopUrl + } else { + moodoLink.remove() + } - document.querySelector('.dynamic').textContent = count; - document.querySelector('.resultQ').classList.add('active'); - } + clone.addEventListener('click', (e) => { + map.setZoom(16) + map.panTo({ lat: +shop.lat, lng: +shop.lng }) - // ---------------- SEARCH ---------------- - function buildSuggestList() { - const ul = document.querySelector('.suggestList'); + document + .querySelectorAll('#shopList .place.active') + .forEach((el) => el.classList.remove('active')) - places.forEach(p => { - const li = document.createElement('li'); - li.textContent = p.name; - li.onclick = () => { - document.getElementById('tinp').value = p.name; - filterList(p.name); - }; - ul.appendChild(li); - }); - } + const ancestor = e.target.closest('.place') + ancestor.classList.add('active') + ancestor.getElementsByTagName('INPUT')[0].checked = true - function filterList(val) { - renderList( - places.filter(p => - p.name.toLowerCase().includes(val.toLowerCase()) - ) - ); - } + const markerToHighlight = markers.find( + (m) => m.shopLat === +shop.lat && m.shopLng === +shop.lng + ) + if (markerToHighlight) highlightMarker(markerToHighlight) + }) + + list.appendChild(clone) + count++ + }) + }) + + document.querySelector('.dynamic').textContent = count + document.querySelector('.resultQ').classList.add('active') + } + + // ---------------- SEARCH ---------------- + function buildSuggestList() { + const ul = document.querySelector('.suggestList') + + places.forEach((p) => { + const li = document.createElement('li') + li.textContent = p.name + li.onclick = () => { + document.getElementById('tinp').value = p.name + filterList(p.name) + } + ul.appendChild(li) + }) + } + + function filterList(val) { + renderList( + places.filter((p) => p.name.toLowerCase().includes(val.toLowerCase())) + ) + } - function filterAvailablePlaces(actualVal) { let listElements = document.querySelectorAll('.suggestList li') for (const element of listElements) { @@ -201,7 +231,7 @@ } } - const searchInp = document.getElementById('tinp') + const searchInp = document.getElementById('tinp') searchInp.onfocus = function (e) { e.target.closest('.searchCont').classList.add('active') } @@ -211,7 +241,7 @@ targ.closest('.searchCont').classList.remove('active') }, 200) }) - searchInp.onkeyup = function (e) { + searchInp.onkeyup = function (e) { if (e.keyCode == 13) { document.getElementById('search').click() } else { @@ -219,15 +249,15 @@ } } - document.getElementById('search').onclick = () => { - filterList(document.getElementById('tinp').value); - }; + document.getElementById('search').onclick = () => { + filterList(document.getElementById('tinp').value) + } - // ---------------- STYLES ---------------- + // ---------------- STYLES ---------------- - function injectStyles() { - const style = document.createElement('style'); - style.innerHTML = ` + function injectStyles() { + const style = document.createElement('style') + style.innerHTML = ` #salony-widget *{ margin: 0; padding: 0; @@ -423,7 +453,7 @@ font-weight: 300; font-size: 14px; } - `; - document.head.appendChild(style); - } -})(); + ` + document.head.appendChild(style) + } +})()