Save
This commit is contained in:
Roman Pyrih
@@ -13,12 +13,13 @@
|
||||
*/
|
||||
|
||||
function register_hello_world_widget( $widgets_manager ) {
|
||||
|
||||
require_once( __DIR__ . '/widgets/images-list.php' );
|
||||
require_once( __DIR__ . '/widgets/acf-product-parameters.php' );
|
||||
require_once( __DIR__ . '/widgets/places-map.php' );
|
||||
|
||||
$widgets_manager->register( new \Elementor_Images_List() );
|
||||
$widgets_manager->register( new \Elementor_ACF_Product_Parameters() );
|
||||
$widgets_manager->register( new \Elementor_Places_Map() );
|
||||
}
|
||||
add_action( 'elementor/widgets/register', 'register_hello_world_widget' );
|
||||
|
||||
|
||||
629
wp-content/plugins/elementor-addon/widgets/places-map.php
Normal file
629
wp-content/plugins/elementor-addon/widgets/places-map.php
Normal file
@@ -0,0 +1,629 @@
|
||||
<?php
|
||||
if (!defined('ABSPATH')) {
|
||||
exit;
|
||||
}
|
||||
|
||||
use Elementor\Controls_Manager;
|
||||
use Elementor\Icons_Manager;
|
||||
use Elementor\Repeater;
|
||||
use Elementor\Utils;
|
||||
|
||||
class Elementor_Places_Map extends \Elementor\Widget_Base
|
||||
{
|
||||
|
||||
public function get_name()
|
||||
{
|
||||
return 'places-map';
|
||||
}
|
||||
|
||||
public function get_title()
|
||||
{
|
||||
return esc_html__('Places Map', 'elementor-addon');
|
||||
}
|
||||
|
||||
public function get_icon()
|
||||
{
|
||||
return 'eicon-code';
|
||||
}
|
||||
|
||||
public function get_categories()
|
||||
{
|
||||
return ['basic'];
|
||||
}
|
||||
|
||||
public function get_keywords()
|
||||
{
|
||||
return ['map', 'places'];
|
||||
}
|
||||
|
||||
protected function register_controls()
|
||||
{
|
||||
$this->start_controls_section(
|
||||
'list_section',
|
||||
[
|
||||
'label' => esc_html__('List', 'elementor-addon'),
|
||||
]
|
||||
);
|
||||
|
||||
|
||||
$this->end_controls_section();
|
||||
}
|
||||
|
||||
public function get_script_depends() {
|
||||
$google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
|
||||
wp_register_script(
|
||||
'google-maps-api',
|
||||
'https://maps.googleapis.com/maps/api/js?key=' . $google_map_api,
|
||||
[],
|
||||
null,
|
||||
true
|
||||
);
|
||||
return [ 'google-maps-api' ];
|
||||
}
|
||||
|
||||
|
||||
protected function render()
|
||||
{
|
||||
$settings = $this->get_settings_for_display();
|
||||
|
||||
$wojewodztwa = [
|
||||
'dolnoslaskie' => [
|
||||
'id' => 1,
|
||||
'name' => 'Dolnośląskie',
|
||||
],
|
||||
'kujawsko-pomorskie' => [
|
||||
'id' => 2,
|
||||
'name' => 'Kujawsko-Pomorskie',
|
||||
],
|
||||
'lubelskie' => [
|
||||
'id' => 3,
|
||||
'name' => 'Lubelskie',
|
||||
],
|
||||
'lubuskie' => [
|
||||
'id' => 4,
|
||||
'name' => 'Lubuskie',
|
||||
],
|
||||
'lodzkie' => [
|
||||
'id' => 5,
|
||||
'name' => 'Łódzkie',
|
||||
],
|
||||
'malopolskie' => [
|
||||
'id' => 6,
|
||||
'name' => 'Małopolskie',
|
||||
],
|
||||
'mazowieckie' => [
|
||||
'id' => 7,
|
||||
'name' => 'Mazowieckie',
|
||||
],
|
||||
'opolskie' => [
|
||||
'id' => 8,
|
||||
'name' => 'Opolskie',
|
||||
],
|
||||
'podkarpackie' => [
|
||||
'id' => 9,
|
||||
'name' => 'Podkarpackie',
|
||||
],
|
||||
'podlaskie' => [
|
||||
'id' => 10,
|
||||
'name' => 'Podlaskie',
|
||||
],
|
||||
'pomorskie' => [
|
||||
'id' => 11,
|
||||
'name' => 'Pomorskie',
|
||||
],
|
||||
'slaskie' => [
|
||||
'id' => 12,
|
||||
'name' => 'Śląskie',
|
||||
],
|
||||
'swietokrzyskie' => [
|
||||
'id' => 13,
|
||||
'name' => 'Świętokrzyskie',
|
||||
],
|
||||
'warminsko-mazurskie' => [
|
||||
'id' => 14,
|
||||
'name' => 'Warmińsko-Mazurskie',
|
||||
],
|
||||
'wielkopolskie' => [
|
||||
'id' => 15,
|
||||
'name' => 'Wielkopolskie',
|
||||
],
|
||||
'zachodniopomorskie' => [
|
||||
'id' => 16,
|
||||
'name' => 'Zachodniopomorskie',
|
||||
],
|
||||
];
|
||||
|
||||
$places_list = [
|
||||
[
|
||||
'id' => 1,
|
||||
'name' => "Bajdy",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => 49.761567564930246,
|
||||
'lng' => 21.683291268864682
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => '
|
||||
<p><strong>INWEST-PROFIL Spółka z ograniczoną odpowiedzialnością sp. k.</strong></p>
|
||||
<p>Bajdy 206</p>
|
||||
<p>38-471 Wojaszówka</p>
|
||||
<br/>
|
||||
<p>Krzysztof Szumlański</p>
|
||||
<p>tel. +48 13 43 850 38<br/>
|
||||
+48 13 43 858 75 wew. 45<br/>
|
||||
+48 695 874 548</p>
|
||||
<p>e-mail: <a href="mailto:szumlanskikrzysztof@inwestprofil.pl">szumlanskikrzysztof@inwestprofil.pl</a></p>
|
||||
<br/>
|
||||
<p>Dominik Ziomek</p>
|
||||
<p>tel. +48 13 43 850 38<br/>
|
||||
+48 13 43 858 75 wew. 44<br/>
|
||||
+48 695 874 548</p>
|
||||
<p>e-mail: <a href="mailto:ziomekdominik@inwestprofil.pl">ziomekdominik@inwestprofil.pl</a></p>
|
||||
'
|
||||
],
|
||||
[
|
||||
'id' => 2,
|
||||
'name' => "Jasło",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 3,
|
||||
'name' => "Krosno",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 4,
|
||||
'name' => "Rzeszów",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 5,
|
||||
'name' => "Brzozów",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 6,
|
||||
'name' => "Dębica",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 7,
|
||||
'name' => "Gorlice",
|
||||
'voivodeship' => $wojewodztwa['malopolskie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 8,
|
||||
'name' => "Jarosław",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 9,
|
||||
'name' => "Kolbuszowa",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 10,
|
||||
'name' => "Leżańsk",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 11,
|
||||
'name' => "Łańcut",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 12,
|
||||
'name' => "Mielec",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 13,
|
||||
'name' => "Przeworsk",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 14,
|
||||
'name' => "Ropczyce - Sędziszów",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 15,
|
||||
'name' => "Sanok",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 16,
|
||||
'name' => "Strzyżów",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 17,
|
||||
'name' => "Ustrzyki Dolne",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
];
|
||||
?>
|
||||
<section id="custom-places-map">
|
||||
<div class="s-content s-style-1">
|
||||
<div class="s-left-col">
|
||||
<div class="map-point-info">
|
||||
<div class="map-point-info--head">
|
||||
<h3><strong>znajdź</strong> <br /> najbliższy salon</h3>
|
||||
<div class="select-wrapper">
|
||||
<select name="voivodeship" id="voivodeship">
|
||||
<option value="" disabled selected>Województwa</option>
|
||||
<?php foreach ($wojewodztwa as $wojewodztwo): ?>
|
||||
<option value="<?= $wojewodztwo['name'] ?>">
|
||||
<?= $wojewodztwo['name'] ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-point-info--body">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="s-right-col">
|
||||
<div id="places-mapa" style="width: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
const voivodeship = <?= json_encode($wojewodztwa); ?>;
|
||||
const placesList = <?= json_encode($places_list); ?>;
|
||||
|
||||
// function initMap() {
|
||||
const mapOptions = {
|
||||
// center: { lat: 50.0411, lng: 21.9991 },
|
||||
center: {
|
||||
lat: 51.9194,
|
||||
lng: 19.1451
|
||||
},
|
||||
// zoom: 11.2,
|
||||
zoom: 6,
|
||||
styles: [{
|
||||
"featureType": "all",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "administrative",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "landscape",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "landscape.man_made",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"visibility": "on"
|
||||
},
|
||||
{
|
||||
"saturation": "-100"
|
||||
},
|
||||
{
|
||||
"gamma": "1"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
},
|
||||
{
|
||||
"visibility": "simplified"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "labels",
|
||||
"stylers": [{
|
||||
"visibility": "simplified"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
},
|
||||
{
|
||||
"weight": "6.61"
|
||||
},
|
||||
{
|
||||
"lightness": "0"
|
||||
},
|
||||
{
|
||||
"gamma": "1.5"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
},
|
||||
{
|
||||
"gamma": "1.5"
|
||||
},
|
||||
{
|
||||
"weight": "0.01"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "road",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "road.highway",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "transit",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "transit",
|
||||
"elementType": "labels.text",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "transit",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "water",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
}
|
||||
]
|
||||
};
|
||||
// }
|
||||
|
||||
const map1 = new google.maps.Map(document.getElementById("places-mapa"), mapOptions);
|
||||
|
||||
setupMapSection({
|
||||
map: map1,
|
||||
locations: placesList,
|
||||
mapWrapperId: 'custom-places-map',
|
||||
voivodeships: voivodeship
|
||||
});
|
||||
|
||||
function setupMapSection({
|
||||
map,
|
||||
locations,
|
||||
mapWrapperId,
|
||||
voivodeships
|
||||
}) {
|
||||
const wrapper = document.getElementById(mapWrapperId);
|
||||
const select = wrapper.querySelector("select[name='voivodeship']");
|
||||
const listContainer = wrapper.querySelector(".map-point-info--body");
|
||||
|
||||
const bounds = new google.maps.LatLngBounds();
|
||||
const markers = [];
|
||||
|
||||
|
||||
locations.forEach(loc => {
|
||||
if (loc.position && loc.position.lat && loc.position.lng) {
|
||||
const marker = new google.maps.Marker({
|
||||
position: loc.position,
|
||||
map: map,
|
||||
title: loc.name,
|
||||
icon: loc.icon || undefined
|
||||
});
|
||||
|
||||
marker.addListener("click", () => {
|
||||
const voivKey = Object.keys(voivodeships).find(k => voivodeships[k].id === loc.voivodeship.id);
|
||||
console.log(voivodeships);
|
||||
console.log(voivodeships[voivKey].name);
|
||||
|
||||
if (voivKey) {
|
||||
select.value = voivodeships[voivKey].name;
|
||||
renderList(voivodeships[voivKey].name);
|
||||
|
||||
setTimeout(() => {
|
||||
const itemEl = listContainer.querySelector(`.location-item[data-id="${loc.id}"]`);
|
||||
if (itemEl) {
|
||||
const itemRect = itemEl.getBoundingClientRect();
|
||||
const containerRect = listContainer.getBoundingClientRect();
|
||||
const offsetTop = itemRect.top - containerRect.top;
|
||||
console.log('itemRect.top: ', itemRect.top);
|
||||
console.log('containerRect.top: ', containerRect.top);
|
||||
console.log('offsetTop: ', offsetTop);
|
||||
|
||||
if (offsetTop != 0) {
|
||||
listContainer.scrollTo({
|
||||
top: offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
itemEl.classList.add('highlight');
|
||||
setTimeout(() => itemEl.classList.remove('highlight'), 1000);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
markers.push(marker);
|
||||
bounds.extend(loc.position);
|
||||
}
|
||||
});
|
||||
|
||||
if (markers.length) {
|
||||
map.fitBounds(bounds);
|
||||
}
|
||||
|
||||
select.addEventListener("change", (e) => {
|
||||
renderList(e.target.value);
|
||||
});
|
||||
|
||||
function renderList(selectedVoivName) {
|
||||
listContainer.innerHTML = '';
|
||||
|
||||
const filtered = locations.filter(loc => loc.voivodeship.name === selectedVoivName);
|
||||
|
||||
if (!filtered.length) {
|
||||
const div = document.createElement("div");
|
||||
div.className = "location-item empty";
|
||||
div.innerHTML = "<p>Brak salonów w tym województwie.</p>";
|
||||
listContainer.appendChild(div);
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach(loc => {
|
||||
const div = document.createElement("div");
|
||||
div.className = "location-item";
|
||||
div.dataset.id = loc.id;
|
||||
div.innerHTML = `<h4>${loc.name}</h4>`;
|
||||
div.innerHTML += `${loc.description || ''}`;
|
||||
listContainer.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
select.value = voivodeships.podkarpackie.name;
|
||||
renderList(voivodeships.podkarpackie.name);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user