FEATURE Updating styles and behaviour
This commit is contained in:
Antoine M
parent
b401e1ef89
commit
f3824f8a91
Binary file not shown.
|
Before Width: | Height: | Size: 848 B |
|
|
@ -1 +1 @@
|
|||
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-server-side-render'), 'version' => '222d888781be4eb372e6');
|
||||
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-server-side-render'), 'version' => '8cd612634bc9c89b25eb');
|
||||
|
|
|
|||
|
|
@ -108,7 +108,10 @@ const GOOGLE_MAPS_CONFIG = {
|
|||
lng: 4.151615298397132,
|
||||
// Position originale du pin
|
||||
title: "Carhop",
|
||||
// Options de couleur : 'red', 'blue', 'green', 'yellow', 'purple', 'orange'
|
||||
address: "Av. de la Houssière 80, 7090 Braine-le-Comte",
|
||||
placeId: "ChIJ41pZLUq1w0cRjXw8zlHnvXI",
|
||||
// Place ID Google Maps (à remplacer par le vrai)
|
||||
|
||||
color: "green"
|
||||
},
|
||||
styles: [{
|
||||
|
|
@ -392,14 +395,40 @@ function initializeCarhopMaps() {
|
|||
// Contrôle Street View
|
||||
fullscreenControl: false // Bouton plein écran
|
||||
});
|
||||
// Chemin vers votre pin personnalisé (à ajuster selon votre structure)
|
||||
const image = "/wp-content/plugins/carhop-blocks/blocks/localisation-map/build/localisation-map/carhop-pin.png";
|
||||
// Chemin vers votre pin personnalisé avec fallback
|
||||
const customPinPath = "/wp-content/plugins/carhop-blocks/blocks/localisation-map/src/localisation-map/carhop-pin.png";
|
||||
|
||||
// Add marker with custom color
|
||||
new google.maps.Marker({
|
||||
const marker = new google.maps.Marker({
|
||||
position: new google.maps.LatLng(GOOGLE_MAPS_CONFIG.marker.lat, GOOGLE_MAPS_CONFIG.marker.lng),
|
||||
map: map,
|
||||
title: GOOGLE_MAPS_CONFIG.marker.title,
|
||||
icon: image
|
||||
icon: {
|
||||
url: customPinPath,
|
||||
scaledSize: new google.maps.Size(40, 40),
|
||||
// Taille du pin
|
||||
origin: new google.maps.Point(0, 0),
|
||||
anchor: new google.maps.Point(20, 40) // Point d'ancrage (centre bas)
|
||||
}
|
||||
});
|
||||
|
||||
// Add click event to open Google Maps place
|
||||
marker.addListener("click", function () {
|
||||
const placeId = GOOGLE_MAPS_CONFIG.marker.placeId;
|
||||
|
||||
// URL pour ouvrir la fiche Google Maps complète
|
||||
let googleMapsUrl;
|
||||
if (placeId && placeId !== "ChIJXXXXXXXXXXXXXXXXXXXX") {
|
||||
// Utiliser le Place ID pour ouvrir la fiche complète
|
||||
googleMapsUrl = `https://www.google.com/maps/place/?q=place_id:${placeId}`;
|
||||
} else {
|
||||
// Fallback avec l'adresse
|
||||
const address = encodeURIComponent(GOOGLE_MAPS_CONFIG.marker.address);
|
||||
googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${address}`;
|
||||
}
|
||||
|
||||
// Ouvrir dans un nouvel onglet
|
||||
window.open(googleMapsUrl, "_blank");
|
||||
});
|
||||
|
||||
// Mark as initialized
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -8,6 +8,6 @@
|
|||
$unique_id = 'carhop-map-' . uniqid();
|
||||
?>
|
||||
|
||||
<div class="carhop-localisation-map" id="<?php echo esc_attr($unique_id); ?>">
|
||||
<section class="carhop-localisation-map alignfull" id="<?php echo esc_attr($unique_id); ?>">
|
||||
<div class="map-container"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -6,10 +6,9 @@
|
|||
}
|
||||
.carhop-localisation-map .map-container {
|
||||
margin: 0 auto;
|
||||
width: 800px;
|
||||
width: 1200px;
|
||||
height: 500px;
|
||||
background-color: var(--wp--preset--color--primary);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.carhop-localisation-map .map-container:not([data-initialized=true]) {
|
||||
|
|
|
|||
|
|
@ -6,10 +6,9 @@
|
|||
}
|
||||
.carhop-localisation-map .map-container {
|
||||
margin: 0 auto;
|
||||
width: 800px;
|
||||
width: 1200px;
|
||||
height: 500px;
|
||||
background-color: var(--wp--preset--color--primary);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.carhop-localisation-map .map-container:not([data-initialized=true]) {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"localisation-map/style-index.css","mappings":";;;AAEE;EACC;AADH;AADC;EAIC;EACA;EACA;EACA;EACA;EACA;AAAF;AAGE;EACC;EACA;EACA;EACA;AADH;AAGG;EACC;AADJ,C","sources":["webpack://localisation-map/./src/localisation-map/style.scss"],"sourcesContent":[".carhop-localisation-map {\n\t.map-container {\n\t\ta:after {\n\t\t\tcontent: none !important;\n\t\t}\n\t\tmargin: 0 auto;\n\t\twidth: 800px;\n\t\theight: 500px;\n\t\tbackground-color: var(--wp--preset--color--primary);\n\t\tborder-radius: 8px;\n\t\toverflow: hidden;\n\n\t\t// Loading state\n\t\t&:not([data-initialized=\"true\"]) {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tcolor: white;\n\n\t\t\t&::before {\n\t\t\t\tcontent: \"Chargement de la carte...\";\n\t\t\t}\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}
|
||||
{"version":3,"file":"localisation-map/style-index.css","mappings":";;;AAEE;EACC;AADH;AADC;EAIC;EACA;EACA;EACA;EACA;AAAF;AAGE;EACC;EACA;EACA;EACA;AADH;AAGG;EACC;AADJ,C","sources":["webpack://localisation-map/./src/localisation-map/style.scss"],"sourcesContent":[".carhop-localisation-map {\n\t.map-container {\n\t\ta:after {\n\t\t\tcontent: none !important;\n\t\t}\n\t\tmargin: 0 auto;\n\t\twidth: 1200px;\n\t\theight: 500px;\n\t\tbackground-color: var(--wp--preset--color--primary);\n\t\toverflow: hidden;\n\n\t\t// Loading state\n\t\t&:not([data-initialized=\"true\"]) {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tcolor: white;\n\n\t\t\t&::before {\n\t\t\t\tcontent: \"Chargement de la carte...\";\n\t\t\t}\n\t\t}\n\t}\n}\n"],"names":[],"sourceRoot":""}
|
||||
|
|
@ -1 +1 @@
|
|||
<?php return array('dependencies' => array(), 'version' => '3b03e043d3968050b29f');
|
||||
<?php return array('dependencies' => array(), 'version' => 'd691e92672b49c2509ce');
|
||||
|
|
|
|||
|
|
@ -19,7 +19,10 @@ const GOOGLE_MAPS_CONFIG = {
|
|||
lng: 4.151615298397132,
|
||||
// Position originale du pin
|
||||
title: "Carhop",
|
||||
// Options de couleur : 'red', 'blue', 'green', 'yellow', 'purple', 'orange'
|
||||
address: "Av. de la Houssière 80, 7090 Braine-le-Comte",
|
||||
placeId: "ChIJ41pZLUq1w0cRjXw8zlHnvXI",
|
||||
// Place ID Google Maps (à remplacer par le vrai)
|
||||
|
||||
color: "green"
|
||||
},
|
||||
styles: [{
|
||||
|
|
@ -303,14 +306,40 @@ function initializeCarhopMaps() {
|
|||
// Contrôle Street View
|
||||
fullscreenControl: false // Bouton plein écran
|
||||
});
|
||||
// Chemin vers votre pin personnalisé (à ajuster selon votre structure)
|
||||
const image = "/wp-content/plugins/carhop-blocks/blocks/localisation-map/build/localisation-map/carhop-pin.png";
|
||||
// Chemin vers votre pin personnalisé avec fallback
|
||||
const customPinPath = "/wp-content/plugins/carhop-blocks/blocks/localisation-map/src/localisation-map/carhop-pin.png";
|
||||
|
||||
// Add marker with custom color
|
||||
new google.maps.Marker({
|
||||
const marker = new google.maps.Marker({
|
||||
position: new google.maps.LatLng(GOOGLE_MAPS_CONFIG.marker.lat, GOOGLE_MAPS_CONFIG.marker.lng),
|
||||
map: map,
|
||||
title: GOOGLE_MAPS_CONFIG.marker.title,
|
||||
icon: image
|
||||
icon: {
|
||||
url: customPinPath,
|
||||
scaledSize: new google.maps.Size(40, 40),
|
||||
// Taille du pin
|
||||
origin: new google.maps.Point(0, 0),
|
||||
anchor: new google.maps.Point(20, 40) // Point d'ancrage (centre bas)
|
||||
}
|
||||
});
|
||||
|
||||
// Add click event to open Google Maps place
|
||||
marker.addListener("click", function () {
|
||||
const placeId = GOOGLE_MAPS_CONFIG.marker.placeId;
|
||||
|
||||
// URL pour ouvrir la fiche Google Maps complète
|
||||
let googleMapsUrl;
|
||||
if (placeId && placeId !== "ChIJXXXXXXXXXXXXXXXXXXXX") {
|
||||
// Utiliser le Place ID pour ouvrir la fiche complète
|
||||
googleMapsUrl = `https://www.google.com/maps/place/?q=place_id:${placeId}`;
|
||||
} else {
|
||||
// Fallback avec l'adresse
|
||||
const address = encodeURIComponent(GOOGLE_MAPS_CONFIG.marker.address);
|
||||
googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${address}`;
|
||||
}
|
||||
|
||||
// Ouvrir dans un nouvel onglet
|
||||
window.open(googleMapsUrl, "_blank");
|
||||
});
|
||||
|
||||
// Mark as initialized
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -6,15 +6,16 @@
|
|||
"license": "GPL-2.0-or-later",
|
||||
"main": "build/index.js",
|
||||
"scripts": {
|
||||
"build": "wp-scripts build --blocks-manifest",
|
||||
"build": "wp-scripts build --blocks-manifest && npm run copy-assets",
|
||||
"copy-assets": "cp src/localisation-map/carhop-pin.png build/localisation-map/",
|
||||
"format": "wp-scripts format",
|
||||
"lint:css": "wp-scripts lint-style",
|
||||
"lint:js": "wp-scripts lint-js",
|
||||
"packages-update": "wp-scripts packages-update",
|
||||
"plugin-zip": "wp-scripts plugin-zip",
|
||||
"start": "wp-scripts start --blocks-manifest"
|
||||
"start": "wp-scripts start --blocks-manifest && npm run copy-assets"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wordpress/scripts": "^30.25.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -8,6 +8,6 @@
|
|||
$unique_id = 'carhop-map-' . uniqid();
|
||||
?>
|
||||
|
||||
<div class="carhop-localisation-map" id="<?php echo esc_attr($unique_id); ?>">
|
||||
<section class="carhop-localisation-map alignfull" id="<?php echo esc_attr($unique_id); ?>">
|
||||
<div class="map-container"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -4,10 +4,9 @@
|
|||
content: none !important;
|
||||
}
|
||||
margin: 0 auto;
|
||||
width: 800px;
|
||||
width: 1200px;
|
||||
height: 500px;
|
||||
background-color: var(--wp--preset--color--primary);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
// Loading state
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ const GOOGLE_MAPS_CONFIG = {
|
|||
title: "Carhop",
|
||||
address: "Av. de la Houssière 80, 7090 Braine-le-Comte",
|
||||
placeId: "ChIJ41pZLUq1w0cRjXw8zlHnvXI", // Place ID Google Maps (à remplacer par le vrai)
|
||||
|
||||
color: "green",
|
||||
},
|
||||
styles: [
|
||||
|
|
@ -424,46 +425,10 @@ function initializeCarhopMaps() {
|
|||
streetViewControl: false, // Contrôle Street View
|
||||
fullscreenControl: false, // Bouton plein écran
|
||||
});
|
||||
// Chemin vers votre pin personnalisé avec fallback
|
||||
const customPinPath =
|
||||
"/wp-content/plugins/carhop-blocks/blocks/localisation-map/src/localisation-map/carhop-pin.png";
|
||||
|
||||
// Créer une InfoWindow pour afficher les informations
|
||||
const infoWindow = new google.maps.InfoWindow();
|
||||
|
||||
// Optionnel : Utiliser le Place ID pour obtenir les détails du lieu
|
||||
const service = new google.maps.places.PlacesService(map);
|
||||
const placeId = GOOGLE_MAPS_CONFIG.marker.placeId;
|
||||
let placeDetails = null;
|
||||
|
||||
if (placeId && placeId !== "ChIJXXXXXXXXXXXXXXXXXXXX") {
|
||||
service.getDetails(
|
||||
{
|
||||
placeId: placeId,
|
||||
fields: [
|
||||
"name",
|
||||
"geometry",
|
||||
"formatted_address",
|
||||
"photos",
|
||||
"rating",
|
||||
"formatted_phone_number",
|
||||
"website",
|
||||
"opening_hours",
|
||||
],
|
||||
},
|
||||
(place, status) => {
|
||||
if (
|
||||
status === google.maps.places.PlacesServiceStatus.OK &&
|
||||
place.geometry
|
||||
) {
|
||||
// Centrer la carte sur le lieu exact
|
||||
map.setCenter(place.geometry.location);
|
||||
placeDetails = place;
|
||||
console.log("Lieu trouvé:", place.name, place.formatted_address);
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
// Chemin vers votre pin personnalisé (à ajuster selon votre structure)
|
||||
const image =
|
||||
"/wp-content/plugins/carhop-blocks/blocks/localisation-map/build/localisation-map/carhop-pin.png";
|
||||
// Add marker with custom color
|
||||
const marker = new google.maps.Marker({
|
||||
position: new google.maps.LatLng(
|
||||
|
|
@ -472,71 +437,33 @@ function initializeCarhopMaps() {
|
|||
),
|
||||
map: map,
|
||||
title: GOOGLE_MAPS_CONFIG.marker.title,
|
||||
icon: image,
|
||||
icon: {
|
||||
url: customPinPath,
|
||||
scaledSize: new google.maps.Size(40, 40), // Taille du pin
|
||||
origin: new google.maps.Point(0, 0),
|
||||
anchor: new google.maps.Point(20, 40), // Point d'ancrage (centre bas)
|
||||
},
|
||||
});
|
||||
|
||||
// Add click event to show InfoWindow
|
||||
// Add click event to open Google Maps place
|
||||
marker.addListener("click", function () {
|
||||
let content = `<div style="max-width: 300px;">`;
|
||||
const placeId = GOOGLE_MAPS_CONFIG.marker.placeId;
|
||||
|
||||
if (placeDetails) {
|
||||
// Utiliser les détails du lieu Google Maps
|
||||
content += `<h3 style="margin: 0 0 10px 0; color: #136f63;">${
|
||||
placeDetails.name || GOOGLE_MAPS_CONFIG.marker.title
|
||||
}</h3>`;
|
||||
|
||||
if (placeDetails.formatted_address) {
|
||||
content += `<p style="margin: 5px 0;"><strong>Adresse:</strong> ${placeDetails.formatted_address}</p>`;
|
||||
}
|
||||
|
||||
if (placeDetails.formatted_phone_number) {
|
||||
content += `<p style="margin: 5px 0;"><strong>Téléphone:</strong> ${placeDetails.formatted_phone_number}</p>`;
|
||||
}
|
||||
|
||||
if (placeDetails.rating) {
|
||||
content += `<p style="margin: 5px 0;"><strong>Note:</strong> ${placeDetails.rating}/5 ⭐</p>`;
|
||||
}
|
||||
|
||||
if (placeDetails.website) {
|
||||
content += `<p style="margin: 5px 0;"><a href="${placeDetails.website}" target="_blank" style="color: #136f63;">Site web</a></p>`;
|
||||
}
|
||||
|
||||
// Bouton pour ouvrir dans Google Maps
|
||||
content += `<div style="margin-top: 10px;">
|
||||
<a href="https://www.google.com/maps/place/?q=place_id:${placeId}" target="_blank"
|
||||
style="background: #136f63; color: white; padding: 8px 12px; text-decoration: none; border-radius: 4px; display: inline-block;">
|
||||
Voir sur Google Maps
|
||||
</a>
|
||||
</div>`;
|
||||
// URL pour ouvrir la fiche Google Maps complète
|
||||
let googleMapsUrl;
|
||||
if (placeId && placeId !== "ChIJXXXXXXXXXXXXXXXXXXXX") {
|
||||
// Utiliser le Place ID pour ouvrir la fiche complète
|
||||
googleMapsUrl = `https://www.google.com/maps/place/?q=place_id:${placeId}`;
|
||||
} else {
|
||||
// Fallback avec les informations de base
|
||||
content += `<h3 style="margin: 0 0 10px 0; color: #136f63;">${GOOGLE_MAPS_CONFIG.marker.title}</h3>`;
|
||||
content += `<p style="margin: 5px 0;"><strong>Adresse:</strong> ${GOOGLE_MAPS_CONFIG.marker.address}</p>`;
|
||||
|
||||
// Bouton pour ouvrir dans Google Maps
|
||||
// Fallback avec l'adresse
|
||||
const address = encodeURIComponent(GOOGLE_MAPS_CONFIG.marker.address);
|
||||
content += `<div style="margin-top: 10px;">
|
||||
<a href="https://www.google.com/maps/search/?api=1&query=${address}" target="_blank"
|
||||
style="background: #136f63; color: white; padding: 8px 12px; text-decoration: none; border-radius: 4px; display: inline-block;">
|
||||
Voir sur Google Maps
|
||||
</a>
|
||||
</div>`;
|
||||
googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${address}`;
|
||||
}
|
||||
|
||||
content += `</div>`;
|
||||
|
||||
infoWindow.setContent(content);
|
||||
infoWindow.open(map, marker);
|
||||
// Ouvrir dans un nouvel onglet
|
||||
window.open(googleMapsUrl, "_blank");
|
||||
});
|
||||
|
||||
// Optionnel : Ouvrir automatiquement l'InfoWindow au chargement
|
||||
// Décommentez les lignes suivantes si vous voulez ouvrir le popup automatiquement
|
||||
/*
|
||||
setTimeout(() => {
|
||||
marker.trigger('click');
|
||||
}, 1500); // Attendre 1.5 secondes après le chargement
|
||||
*/
|
||||
|
||||
// Mark as initialized
|
||||
mapElement.dataset.initialized = "true";
|
||||
});
|
||||
|
|
@ -574,7 +501,7 @@ function loadGoogleMapsAPI() {
|
|||
|
||||
// Load Google Maps API
|
||||
const script = document.createElement("script");
|
||||
script.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_CONFIG.apiKey}&libraries=places&callback=carhopMapsReady`;
|
||||
script.src = `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_CONFIG.apiKey}&callback=carhopMapsReady`;
|
||||
script.async = true;
|
||||
script.defer = true;
|
||||
document.head.appendChild(script);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user