Project-Pro/vidok.com
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix map scroll

Browse Source
This commit is contained in:
Roman Pyrih
2025-10-02 13:28:29 +02:00
parent e306f4bfdd
commit 568849228a
2 changed files with 83 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layout/style-css/kontakt-v5.css.map
View File

File diff suppressed because one or more lines are too long

203
templates_user/page-contact-v5.php
View File

@@ -280,7 +280,7 @@ $klienci_indywidualni = [
<br/> <br/>
<p><strong>Godziny otwarcia</strong></p> <p><strong>Godziny otwarcia</strong></p>
<p> <p>
Pon. - pt.: 8:00 - 17:00<br/> Pon. - pt.: 9:00 - 17:00<br/>
Sob.: Nieczynne<br/> Sob.: Nieczynne<br/>
Nd.: Nieczynne Nd.: Nieczynne
</p> </p>
@@ -890,6 +890,64 @@ $klienci_indywidualni = [
<a href="mailto:zapytania@vidok.com">e-mail: zapytania@vidok.com</a> <a href="mailto:zapytania@vidok.com">e-mail: zapytania@vidok.com</a>
' '
], ],
[
'id' => 43,
'name' => "P.H.U. Dekor",
'voivodeship' => $wojewodztwa['swietokrzyskie'],
'position' => [
'lat' => 50.89316490123651,
'lng' => 20.621383677062774
],
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
'description' => '
<p><strong>
ul. Karola Olszewskiego 4,<br/>
25-663 Kielce<br/>
(obok Dek Meble)
</strong></p>
<a href="tel:+48413070304">tel.: (41)307 03 04</a>
<a href="tel:+48792026026">tel.: +48 792 026 026</a>
<a href="tel:+48506118360">tel.: +48 506 118 360</a>
<a href="mailto:biuro@dekorkielce.pl">e-mail: biuro@dekorkielce.pl</a>
<a href="mailto:dekorkielce@op.pl">e-mail: dekorkielce@op.pl</a>
'
],
[
'id' => 44,
'name' => "DOMWILL S.C.",
'voivodeship' => $wojewodztwa['lubelskie'],
'position' => [
'lat' => 51.23591612917327,
'lng' => 22.57658578434196
],
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
'description' => '
<p><strong>
ul. Wolska 11,<br/>
20-411 Lublin<br/>
</strong></p>
<a href="tel:+48509030249">tel.: +48 509 030 249</a>
<a href="mailto:agnieszka@domwill.pl">e-mail: agnieszka@domwill.pl</a>
'
],
[
'id' => 45,
'name' => "Monteria Grzegorz Stawinoga",
'voivodeship' => $wojewodztwa['lubelskie'],
'position' => [
'lat' => 51.445156853861064,
'lng' => 22.60957721133665
],
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
'description' => '
<p><strong>
ul. Przemysłowa 3,<br/>
21-100 Lubartów<br/>
</strong></p>
<a href="tel:+48579637994">tel.: +48 579 637 994</a>
<a href="mailto:biuro@monteria.pl">e-mail: biuro@monteria.pl</a>
'
],
]; ];
$klienci_instytucjonalni = [ $klienci_instytucjonalni = [
@@ -1649,105 +1707,6 @@ $klienci_instytucjonalni = [
}] }]
} }
] ]
// styles: [
// {
// elementType: "geometry",
// stylers: [
// {
// color: "#F4F4F4"
// }
// ]
// },
// {
// elementType: "labels.text.stroke",
// stylers: [{
// color: "F4F4F4"
// }]
// },
// {
// elementType: "labels.text.fill",
// stylers: [{
// color: "#181C1D"
// }]
// },
// // (motorway)
// {
// featureType: "road.highway",
// elementType: "geometry",
// stylers: [{
// color: "#BABABA"
// }]
// }, // Autostrady
// {
// featureType: "road.highway",
// elementType: "geometry.stroke",
// stylers: [{
// color: "#BABABA"
// }]
// }, // Kontur autostrady
// {
// featureType: "road.highway",
// elementType: "labels.text.fill",
// stylers: [{
// color: "#BABABA"
// }]
// }, // tekst
// // (primary, secondary, local)
// {
// featureType: "road.arterial",
// elementType: "geometry",
// stylers: [{
// color: "#BABABA"
// }]
// }, // Główne drogi
// {
// featureType: "road.local",
// elementType: "geometry",
// stylers: [{
// color: "#BABABA"
// }]
// }, // Ulice
// {
// featureType: "road",
// elementType: "labels.text.fill",
// stylers: [{
// color: "#BABABA"
// }]
// }, // tekst
// // Ukryj numery dróg (E40, A4, 92 itp.)
// {
// featureType: "road",
// elementType: "labels.icon",
// stylers: [{
// visibility: "off"
// }]
// }, // Ukryj ikony dróg
// {
// featureType: "road",
// elementType: "labels.text",
// stylers: [{
// visibility: "off"
// }]
// }, // Ukryj tekst dróg
// {
// featureType: "water",
// elementType: "geometry",
// stylers: [{
// color: "#F4F4F4"
// }]
// }, // Woda
// {
// featureType: "landscape",
// elementType: "geometry",
// stylers: [{
// color: "#F4F4F4"
// }]
// }
// ]
}; };
const map1 = new google.maps.Map(document.getElementById("map-klienci-indywidualni"), mapOptions); const map1 = new google.maps.Map(document.getElementById("map-klienci-indywidualni"), mapOptions);
@@ -1766,16 +1725,6 @@ $klienci_instytucjonalni = [
clients: klienciInstytucjonalni, clients: klienciInstytucjonalni,
mapWrapperId: "klienci-instytucjonalni" mapWrapperId: "klienci-instytucjonalni"
}); });
// const overlayMask = new google.maps.Polygon({
// paths: [fullScreenPolygon, polandHolePolygon],
// strokeOpacity: 0,
// strokeWeight: 0,
// fillColor: "#000",
// fillOpacity: 0.6,
// map: map2,
// clickable: false,
// });
} }
function setupMapSection({ function setupMapSection({
@@ -1791,6 +1740,8 @@ $klienci_instytucjonalni = [
const bounds = new google.maps.LatLngBounds(); const bounds = new google.maps.LatLngBounds();
const markers = []; const markers = [];
let selectedLocation = null;
locations.forEach(loc => { locations.forEach(loc => {
if (loc.position && loc.position.lat && loc.position.lng) { if (loc.position && loc.position.lat && loc.position.lng) {
const marker = new google.maps.Marker({ const marker = new google.maps.Marker({
@@ -1801,28 +1752,38 @@ $klienci_instytucjonalni = [
}); });
marker.addListener("click", () => { marker.addListener("click", () => {
// if(loc.id == selectedLocation) {
// return;
// } else {
// selectedLocation = null;
// }
const voivKey = Object.keys(voivodeships).find(k => voivodeships[k].id === loc.voivodeship.id); const voivKey = Object.keys(voivodeships).find(k => voivodeships[k].id === loc.voivodeship.id);
if (voivKey) { if (voivKey) {
select.value = voivodeships[voivKey].name; select.value = voivodeships[voivKey].name;
renderList(voivodeships[voivKey].name); renderList(voivodeships[voivKey].name);
setTimeout(() => { setTimeout(() => {
const itemEl = listContainer.querySelector(`.location-item[data-id="${loc.id}"]`); const itemEl = listContainer.querySelector(`.location-item[data-id="${loc.id}"]`);
if (itemEl) { if (itemEl) {
const itemRect = itemEl.getBoundingClientRect(); const containerTop = listContainer.getBoundingClientRect().top;
const containerRect = listContainer.getBoundingClientRect(); const itemTop = itemEl.getBoundingClientRect().top;
const offsetTop = itemRect.top - containerRect.top; const scrollOffset = listContainer.scrollTop + (itemTop - containerTop);
console.log('itemRect.top: ', itemRect.top);
console.log('containerRect.top: ', containerRect.top);
console.log('offsetTop: ', offsetTop);
if (offsetTop != 0) { if(loc.id == selectedLocation) {
listContainer.scrollTo({ itemEl.classList.add('highlight');
top: offsetTop, setTimeout(() => itemEl.classList.remove('highlight'), 1000);
behavior: 'smooth' return;
}); } else {
selectedLocation = loc.id;
} }
listContainer.scrollTo({
top: scrollOffset,
behavior: 'smooth'
});
itemEl.classList.add('highlight'); itemEl.classList.add('highlight');
setTimeout(() => itemEl.classList.remove('highlight'), 1000); setTimeout(() => itemEl.classList.remove('highlight'), 1000);
} }