FEATURE Introducing the map component
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Antoine M 2025-10-02 14:22:58 +02:00
parent 0a7f77568f
commit da65a622b4
25 changed files with 22679 additions and 0 deletions

View File

@ -0,0 +1,18 @@
# This file is for unifying the coding style for different editors and IDEs
# editorconfig.org
# WordPress Coding Standards
# https://make.wordpress.org/core/handbook/coding-standards/
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = tab
[*.{yml,yaml}]
indent_style = space
indent_size = 2

View File

@ -0,0 +1,30 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Coverage directory used by tools like istanbul
coverage
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Output of `npm pack`
*.tgz
# Output of `wp-scripts plugin-zip`
*.zip
# dotenv environment variables file
.env

View File

@ -0,0 +1,26 @@
<?php
// This file is generated. Do not modify it manually.
return array(
'localisation-map' => array(
'$schema' => 'https://schemas.wp.org/trunk/block.json',
'apiVersion' => 3,
'name' => 'carhop-blocks/localisation-map',
'version' => '0.1.0',
'title' => 'Localisation Map',
'category' => 'carhop-blocks',
'icon' => 'smiley',
'description' => 'Example block scaffolded with Create Block tool.',
'example' => array(
),
'supports' => array(
'html' => false
),
'textdomain' => 'localisation-map',
'editorScript' => 'file:./index.js',
'editorStyle' => 'file:./index.css',
'style' => 'file:./style-index.css',
'viewScript' => 'file:./view.js',
'render' => 'file:./render.php'
)
);

View File

@ -0,0 +1,20 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "carhop-blocks/localisation-map",
"version": "0.1.0",
"title": "Localisation Map",
"category": "carhop-blocks",
"icon": "smiley",
"description": "Example block scaffolded with Create Block tool.",
"example": {},
"supports": {
"html": false
},
"textdomain": "localisation-map",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"viewScript": "file:./view.js",
"render": "file:./render.php"
}

View File

@ -0,0 +1 @@
<?php return array('dependencies' => array('react-jsx-runtime', 'wp-block-editor', 'wp-blocks', 'wp-server-side-render'), 'version' => '5bed954e24f5013c97aa');

View File

@ -0,0 +1,646 @@
/******/ (() => { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./src/localisation-map/block.json":
/*!*****************************************!*\
!*** ./src/localisation-map/block.json ***!
\*****************************************/
/***/ ((module) => {
"use strict";
module.exports = /*#__PURE__*/JSON.parse('{"$schema":"https://schemas.wp.org/trunk/block.json","apiVersion":3,"name":"carhop-blocks/localisation-map","version":"0.1.0","title":"Localisation Map","category":"carhop-blocks","icon":"smiley","description":"Example block scaffolded with Create Block tool.","example":{},"supports":{"html":false},"textdomain":"localisation-map","editorScript":"file:./index.js","editorStyle":"file:./index.css","style":"file:./style-index.css","viewScript":"file:./view.js","render":"file:./render.php"}');
/***/ }),
/***/ "./src/localisation-map/edit.js":
/*!**************************************!*\
!*** ./src/localisation-map/edit.js ***!
\**************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "default": () => (/* binding */ Edit)
/* harmony export */ });
/* harmony import */ var _wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/server-side-render */ "@wordpress/server-side-render");
/* harmony import */ var _wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
/* harmony import */ var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__);
function Edit(props) {
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div", {
...(0,_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_1__.useBlockProps)(),
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)((_wordpress_server_side_render__WEBPACK_IMPORTED_MODULE_0___default()), {
block: "carhop-blocks/localisation-map",
attributes: props.attributes
})
});
}
/***/ }),
/***/ "./src/localisation-map/index.js":
/*!***************************************!*\
!*** ./src/localisation-map/index.js ***!
\***************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/blocks */ "@wordpress/blocks");
/* harmony import */ var _wordpress_blocks__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _style_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./style.scss */ "./src/localisation-map/style.scss");
/* harmony import */ var _edit__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./edit */ "./src/localisation-map/edit.js");
/* harmony import */ var _block_json__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./block.json */ "./src/localisation-map/block.json");
/* harmony import */ var _view_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./view.js */ "./src/localisation-map/view.js");
/* harmony import */ var _view_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_view_js__WEBPACK_IMPORTED_MODULE_4__);
// Import the view script to load map handling on the backend
(0,_wordpress_blocks__WEBPACK_IMPORTED_MODULE_0__.registerBlockType)(_block_json__WEBPACK_IMPORTED_MODULE_3__.name, {
edit: _edit__WEBPACK_IMPORTED_MODULE_2__["default"]
});
/***/ }),
/***/ "./src/localisation-map/style.scss":
/*!*****************************************!*\
!*** ./src/localisation-map/style.scss ***!
\*****************************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
"use strict";
__webpack_require__.r(__webpack_exports__);
// extracted by mini-css-extract-plugin
/***/ }),
/***/ "./src/localisation-map/view.js":
/*!**************************************!*\
!*** ./src/localisation-map/view.js ***!
\**************************************/
/***/ (() => {
/**
* Google Maps initialization for Carhop Localisation Map block
*/
// Configuration
const GOOGLE_MAPS_CONFIG = {
apiKey: "AIzaSyBs-owKPe4qiYLb2baCTAptLeNNJX7bTQk",
center: {
lat: 50.61036915572659,
lng: 4.151529499893204
},
zoom: 11,
marker: {
title: "Carhop",
// Options de couleur : 'red', 'blue', 'green', 'yellow', 'purple', 'orange'
color: "green"
},
styles: [{
featureType: "administrative",
elementType: "geometry",
stylers: [{
color: "#19464b"
}]
}, {
featureType: "administrative",
elementType: "labels.text.fill",
stylers: [{
color: "#ffffff"
}, {
gamma: "1.00"
}, {
lightness: "0"
}, {
saturation: "0"
}, {
visibility: "on"
}, {
weight: "1.5"
}]
}, {
featureType: "administrative",
elementType: "labels.text.stroke",
stylers: [{
color: "#003237"
}, {
weight: "2"
}]
}, {
featureType: "administrative.land_parcel",
elementType: "geometry",
stylers: [{
color: "#19464b"
}]
}, {
featureType: "landscape",
elementType: "all",
stylers: [{
color: "#003237"
}]
}, {
featureType: "landscape",
elementType: "geometry",
stylers: [{
color: "#003237"
}]
}, {
featureType: "landscape.man_made",
elementType: "geometry",
stylers: [{
color: "#003237"
}]
}, {
featureType: "landscape.natural",
elementType: "labels.text.fill",
stylers: [{
color: "#ffffff"
}, {
visibility: "on"
}]
}, {
featureType: "landscape.natural.landcover",
elementType: "geometry",
stylers: [{
color: "#003237"
}]
}, {
featureType: "landscape.natural.terrain",
elementType: "geometry",
stylers: [{
color: "#19464b"
}]
}, {
featureType: "poi",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.attraction",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.business",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.government",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.park",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.school",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.medical",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.place_of_worship",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.sports_complex",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [{
color: "#136f63"
}, {
lightness: "0"
}]
}, {
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [{
visibility: "off"
}]
}, {
featureType: "road.highway",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [{
color: "#ffffff"
}]
}, {
featureType: "road.highway",
elementType: "labels.text.stroke",
stylers: [{
color: "#0a1f14"
}]
}, {
featureType: "road.arterial",
elementType: "geometry",
stylers: [{
color: "#136f63"
}, {
lightness: 18
}]
}, {
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [{
color: "#136f63"
}]
}, {
featureType: "road.arterial",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "road.arterial",
elementType: "labels.text.fill",
stylers: [{
color: "#ffffff"
}]
}, {
featureType: "road.arterial",
elementType: "labels.text.stroke",
stylers: [{
color: "#2c2c2c"
}]
}, {
featureType: "road.local",
elementType: "geometry",
stylers: [{
color: "#136F63"
}, {
lightness: -20
}]
}, {
featureType: "road.local",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "road.local",
elementType: "labels.text.fill",
stylers: [{
color: "#ffffff"
}]
}, {
featureType: "transit",
elementType: "geometry",
stylers: [{
color: "#136F63"
}, {
lightness: -20
}]
}, {
featureType: "water",
elementType: "geometry",
stylers: [{
color: "#136F63"
}, {
lightness: -20
}]
}]
};
/**
* Initialize Google Maps for all map containers on the page
*/
function initializeCarhopMaps() {
// Find all map containers
const mapContainers = document.querySelectorAll(".carhop-localisation-map");
mapContainers.forEach(container => {
const mapElement = container.querySelector(".map-container");
if (!mapElement || mapElement.dataset.initialized === "true") {
return;
}
// Create map
const map = new google.maps.Map(mapElement, {
zoom: GOOGLE_MAPS_CONFIG.zoom,
center: new google.maps.LatLng(GOOGLE_MAPS_CONFIG.center.lat, GOOGLE_MAPS_CONFIG.center.lng),
styles: GOOGLE_MAPS_CONFIG.styles,
// Contrôles de zoom
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
style: google.maps.ZoomControlStyle.DEFAULT
},
// Autres contrôles utiles
mapTypeControl: false,
// Masquer le sélecteur de type de carte
streetViewControl: false,
// Contrôle Street View
fullscreenControl: false // Bouton plein écran
});
const image = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
// Add marker with custom color
new google.maps.Marker({
position: new google.maps.LatLng(GOOGLE_MAPS_CONFIG.center.lat, GOOGLE_MAPS_CONFIG.center.lng),
map: map,
title: GOOGLE_MAPS_CONFIG.marker.title,
icon: image
});
// Mark as initialized
mapElement.dataset.initialized = "true";
});
}
/**
* Load Google Maps API and initialize maps
*/
function loadGoogleMapsAPI() {
// Check if Google Maps is already loaded
if (typeof google !== "undefined" && google.maps) {
initializeCarhopMaps();
return;
}
// Check if script is already loading
if (window.carhopMapsLoading) {
window.carhopMapsCallbacks = window.carhopMapsCallbacks || [];
window.carhopMapsCallbacks.push(initializeCarhopMaps);
return;
}
// Mark as loading
window.carhopMapsLoading = true;
window.carhopMapsCallbacks = [initializeCarhopMaps];
// Create callback function
window.carhopMapsReady = function () {
window.carhopMapsLoading = false;
if (window.carhopMapsCallbacks) {
window.carhopMapsCallbacks.forEach(callback => callback());
window.carhopMapsCallbacks = [];
}
};
// Load Google Maps API
const script = document.createElement("script");
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);
}
// Initialize when DOM is ready
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", loadGoogleMapsAPI);
} else {
loadGoogleMapsAPI();
}
// Also initialize on window load as fallback
window.addEventListener("load", loadGoogleMapsAPI);
/***/ }),
/***/ "@wordpress/block-editor":
/*!*************************************!*\
!*** external ["wp","blockEditor"] ***!
\*************************************/
/***/ ((module) => {
"use strict";
module.exports = window["wp"]["blockEditor"];
/***/ }),
/***/ "@wordpress/blocks":
/*!********************************!*\
!*** external ["wp","blocks"] ***!
\********************************/
/***/ ((module) => {
"use strict";
module.exports = window["wp"]["blocks"];
/***/ }),
/***/ "@wordpress/server-side-render":
/*!******************************************!*\
!*** external ["wp","serverSideRender"] ***!
\******************************************/
/***/ ((module) => {
"use strict";
module.exports = window["wp"]["serverSideRender"];
/***/ }),
/***/ "react/jsx-runtime":
/*!**********************************!*\
!*** external "ReactJSXRuntime" ***!
\**********************************/
/***/ ((module) => {
"use strict";
module.exports = window["ReactJSXRuntime"];
/***/ })
/******/ });
/************************************************************************/
/******/ // The module cache
/******/ var __webpack_module_cache__ = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = __webpack_modules__;
/******/
/************************************************************************/
/******/ /* webpack/runtime/chunk loaded */
/******/ (() => {
/******/ var deferred = [];
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
/******/ if(chunkIds) {
/******/ priority = priority || 0;
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
/******/ deferred[i] = [chunkIds, fn, priority];
/******/ return;
/******/ }
/******/ var notFulfilled = Infinity;
/******/ for (var i = 0; i < deferred.length; i++) {
/******/ var [chunkIds, fn, priority] = deferred[i];
/******/ var fulfilled = true;
/******/ for (var j = 0; j < chunkIds.length; j++) {
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
/******/ chunkIds.splice(j--, 1);
/******/ } else {
/******/ fulfilled = false;
/******/ if(priority < notFulfilled) notFulfilled = priority;
/******/ }
/******/ }
/******/ if(fulfilled) {
/******/ deferred.splice(i--, 1)
/******/ var r = fn();
/******/ if (r !== undefined) result = r;
/******/ }
/******/ }
/******/ return result;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/compat get default export */
/******/ (() => {
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = (module) => {
/******/ var getter = module && module.__esModule ?
/******/ () => (module['default']) :
/******/ () => (module);
/******/ __webpack_require__.d(getter, { a: getter });
/******/ return getter;
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/define property getters */
/******/ (() => {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = (exports, definition) => {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ (() => {
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
/******/ })();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ (() => {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = (exports) => {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ })();
/******/
/******/ /* webpack/runtime/jsonp chunk loading */
/******/ (() => {
/******/ // no baseURI
/******/
/******/ // object to store loaded and loading chunks
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
/******/ var installedChunks = {
/******/ "localisation-map/index": 0,
/******/ "localisation-map/style-index": 0
/******/ };
/******/
/******/ // no chunk on demand loading
/******/
/******/ // no prefetching
/******/
/******/ // no preloaded
/******/
/******/ // no HMR
/******/
/******/ // no HMR manifest
/******/
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
/******/
/******/ // install a JSONP callback for chunk loading
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
/******/ var [chunkIds, moreModules, runtime] = data;
/******/ // add "moreModules" to the modules object,
/******/ // then flag all "chunkIds" as loaded and fire callback
/******/ var moduleId, chunkId, i = 0;
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
/******/ for(moduleId in moreModules) {
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
/******/ }
/******/ }
/******/ if(runtime) var result = runtime(__webpack_require__);
/******/ }
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
/******/ for(;i < chunkIds.length; i++) {
/******/ chunkId = chunkIds[i];
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
/******/ installedChunks[chunkId][0]();
/******/ }
/******/ installedChunks[chunkId] = 0;
/******/ }
/******/ return __webpack_require__.O(result);
/******/ }
/******/
/******/ var chunkLoadingGlobal = globalThis["webpackChunklocalisation_map"] = globalThis["webpackChunklocalisation_map"] || [];
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
/******/ })();
/******/
/************************************************************************/
/******/
/******/ // startup
/******/ // Load entry module and return exports
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["localisation-map/style-index"], () => (__webpack_require__("./src/localisation-map/index.js")))
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
/******/
/******/ })()
;
//# sourceMappingURL=index.js.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,13 @@
<?php
/**
* Render template for Carhop Localisation Map block
*/
// Generate unique ID for this map instance
$unique_id = 'carhop-map-' . uniqid();
?>
<div class="carhop-localisation-map" id="<?php echo esc_attr($unique_id); ?>">
<div class="map-container"></div>
</div>

View File

@ -0,0 +1,23 @@
/*!********************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/localisation-map/style.scss ***!
\********************************************************************************************************************************************************************************************************************************************************/
.carhop-localisation-map .map-container a:after {
content: none !important;
}
.carhop-localisation-map .map-container {
margin: 0 auto;
width: 800px;
height: 500px;
background-color: var(--wp--preset--color--primary);
border-radius: 8px;
overflow: hidden;
}
.carhop-localisation-map .map-container:not([data-initialized=true]) {
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.carhop-localisation-map .map-container:not([data-initialized=true])::before {
content: "Chargement de la carte...";
}

View File

@ -0,0 +1,25 @@
/*!********************************************************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/localisation-map/style.scss ***!
\********************************************************************************************************************************************************************************************************************************************************/
.carhop-localisation-map .map-container a:after {
content: none !important;
}
.carhop-localisation-map .map-container {
margin: 0 auto;
width: 800px;
height: 500px;
background-color: var(--wp--preset--color--primary);
border-radius: 8px;
overflow: hidden;
}
.carhop-localisation-map .map-container:not([data-initialized=true]) {
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.carhop-localisation-map .map-container:not([data-initialized=true])::before {
content: "Chargement de la carte...";
}
/*# sourceMappingURL=style-index.css.map*/

View File

@ -0,0 +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":""}

View File

@ -0,0 +1 @@
<?php return array('dependencies' => array(), 'version' => 'ad74bc94ee25998466c6');

View File

@ -0,0 +1,346 @@
/******/ (() => { // webpackBootstrap
/*!**************************************!*\
!*** ./src/localisation-map/view.js ***!
\**************************************/
/**
* Google Maps initialization for Carhop Localisation Map block
*/
// Configuration
const GOOGLE_MAPS_CONFIG = {
apiKey: "AIzaSyBs-owKPe4qiYLb2baCTAptLeNNJX7bTQk",
center: {
lat: 50.61036915572659,
lng: 4.151529499893204
},
zoom: 11,
marker: {
title: "Carhop",
// Options de couleur : 'red', 'blue', 'green', 'yellow', 'purple', 'orange'
color: "green"
},
styles: [{
featureType: "administrative",
elementType: "geometry",
stylers: [{
color: "#19464b"
}]
}, {
featureType: "administrative",
elementType: "labels.text.fill",
stylers: [{
color: "#ffffff"
}, {
gamma: "1.00"
}, {
lightness: "0"
}, {
saturation: "0"
}, {
visibility: "on"
}, {
weight: "1.5"
}]
}, {
featureType: "administrative",
elementType: "labels.text.stroke",
stylers: [{
color: "#003237"
}, {
weight: "2"
}]
}, {
featureType: "administrative.land_parcel",
elementType: "geometry",
stylers: [{
color: "#19464b"
}]
}, {
featureType: "landscape",
elementType: "all",
stylers: [{
color: "#003237"
}]
}, {
featureType: "landscape",
elementType: "geometry",
stylers: [{
color: "#003237"
}]
}, {
featureType: "landscape.man_made",
elementType: "geometry",
stylers: [{
color: "#003237"
}]
}, {
featureType: "landscape.natural",
elementType: "labels.text.fill",
stylers: [{
color: "#ffffff"
}, {
visibility: "on"
}]
}, {
featureType: "landscape.natural.landcover",
elementType: "geometry",
stylers: [{
color: "#003237"
}]
}, {
featureType: "landscape.natural.terrain",
elementType: "geometry",
stylers: [{
color: "#19464b"
}]
}, {
featureType: "poi",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.attraction",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.business",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.government",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.park",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.school",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.medical",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.place_of_worship",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "poi.sports_complex",
elementType: "all",
stylers: [{
visibility: "off"
}]
}, {
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [{
color: "#136f63"
}, {
lightness: "0"
}]
}, {
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [{
visibility: "off"
}]
}, {
featureType: "road.highway",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [{
color: "#ffffff"
}]
}, {
featureType: "road.highway",
elementType: "labels.text.stroke",
stylers: [{
color: "#0a1f14"
}]
}, {
featureType: "road.arterial",
elementType: "geometry",
stylers: [{
color: "#136f63"
}, {
lightness: 18
}]
}, {
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [{
color: "#136f63"
}]
}, {
featureType: "road.arterial",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "road.arterial",
elementType: "labels.text.fill",
stylers: [{
color: "#ffffff"
}]
}, {
featureType: "road.arterial",
elementType: "labels.text.stroke",
stylers: [{
color: "#2c2c2c"
}]
}, {
featureType: "road.local",
elementType: "geometry",
stylers: [{
color: "#136F63"
}, {
lightness: -20
}]
}, {
featureType: "road.local",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}, {
featureType: "road.local",
elementType: "labels.text.fill",
stylers: [{
color: "#ffffff"
}]
}, {
featureType: "transit",
elementType: "geometry",
stylers: [{
color: "#136F63"
}, {
lightness: -20
}]
}, {
featureType: "water",
elementType: "geometry",
stylers: [{
color: "#136F63"
}, {
lightness: -20
}]
}]
};
/**
* Initialize Google Maps for all map containers on the page
*/
function initializeCarhopMaps() {
// Find all map containers
const mapContainers = document.querySelectorAll(".carhop-localisation-map");
mapContainers.forEach(container => {
const mapElement = container.querySelector(".map-container");
if (!mapElement || mapElement.dataset.initialized === "true") {
return;
}
// Create map
const map = new google.maps.Map(mapElement, {
zoom: GOOGLE_MAPS_CONFIG.zoom,
center: new google.maps.LatLng(GOOGLE_MAPS_CONFIG.center.lat, GOOGLE_MAPS_CONFIG.center.lng),
styles: GOOGLE_MAPS_CONFIG.styles,
// Contrôles de zoom
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
style: google.maps.ZoomControlStyle.DEFAULT
},
// Autres contrôles utiles
mapTypeControl: false,
// Masquer le sélecteur de type de carte
streetViewControl: false,
// Contrôle Street View
fullscreenControl: false // Bouton plein écran
});
const image = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
// Add marker with custom color
new google.maps.Marker({
position: new google.maps.LatLng(GOOGLE_MAPS_CONFIG.center.lat, GOOGLE_MAPS_CONFIG.center.lng),
map: map,
title: GOOGLE_MAPS_CONFIG.marker.title,
icon: image
});
// Mark as initialized
mapElement.dataset.initialized = "true";
});
}
/**
* Load Google Maps API and initialize maps
*/
function loadGoogleMapsAPI() {
// Check if Google Maps is already loaded
if (typeof google !== "undefined" && google.maps) {
initializeCarhopMaps();
return;
}
// Check if script is already loading
if (window.carhopMapsLoading) {
window.carhopMapsCallbacks = window.carhopMapsCallbacks || [];
window.carhopMapsCallbacks.push(initializeCarhopMaps);
return;
}
// Mark as loading
window.carhopMapsLoading = true;
window.carhopMapsCallbacks = [initializeCarhopMaps];
// Create callback function
window.carhopMapsReady = function () {
window.carhopMapsLoading = false;
if (window.carhopMapsCallbacks) {
window.carhopMapsCallbacks.forEach(callback => callback());
window.carhopMapsCallbacks = [];
}
};
// Load Google Maps API
const script = document.createElement("script");
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);
}
// Initialize when DOM is ready
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", loadGoogleMapsAPI);
} else {
loadGoogleMapsAPI();
}
// Also initialize on window load as fallback
window.addEventListener("load", loadGoogleMapsAPI);
/******/ })()
;
//# sourceMappingURL=view.js.map

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,36 @@
<?php
/**
* Plugin Name: Localisation Map
* Description: Example block scaffolded with Create Block tool.
* Version: 0.1.0
* Requires at least: 6.7
* Requires PHP: 7.4
* Author: The WordPress Contributors
* License: GPL-2.0-or-later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
* Text Domain: localisation-map
*
* @package CreateBlock
*/
if (! defined('ABSPATH')) {
exit; // Exit if accessed directly.
}
function create_block_localisation_map_block_init()
{
if (function_exists('wp_register_block_types_from_metadata_collection')) {
wp_register_block_types_from_metadata_collection(__DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php');
return;
}
if (function_exists('wp_register_block_metadata_collection')) {
wp_register_block_metadata_collection(__DIR__ . '/build', __DIR__ . '/build/blocks-manifest.php');
}
$manifest_data = require __DIR__ . '/build/blocks-manifest.php';
foreach (array_keys($manifest_data) as $block_type) {
register_block_type(__DIR__ . "/build/{$block_type}");
}
}
add_action('init', 'create_block_localisation_map_block_init');

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,20 @@
{
"name": "localisation-map",
"version": "0.1.0",
"description": "Example block scaffolded with Create Block tool.",
"author": "The WordPress Contributors",
"license": "GPL-2.0-or-later",
"main": "build/index.js",
"scripts": {
"build": "wp-scripts build --blocks-manifest",
"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"
},
"devDependencies": {
"@wordpress/scripts": "^30.25.0"
}
}

View File

@ -0,0 +1,55 @@
=== Localisation Map ===
Contributors: The WordPress Contributors
Tags: block
Tested up to: 6.7
Stable tag: 0.1.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Example block scaffolded with Create Block tool.
== Description ==
This is the long description. No limit, and you can use Markdown (as well as in the following sections).
For backwards compatibility, if this section is missing, the full length of the short description will be used, and
Markdown parsed.
== Installation ==
This section describes how to install the plugin and get it working.
e.g.
1. Upload the plugin files to the `/wp-content/plugins/localisation-map` directory, or install the plugin through the WordPress plugins screen directly.
1. Activate the plugin through the 'Plugins' screen in WordPress
== Frequently Asked Questions ==
= A question that someone might have =
An answer to that question.
= What about foo bar? =
Answer to foo bar dilemma.
== Screenshots ==
1. This screen shot description corresponds to screenshot-1.(png|jpg|jpeg|gif). Note that the screenshot is taken from
the /assets directory or the directory that contains the stable readme.txt (tags or trunk). Screenshots in the /assets
directory take precedence. For example, `/assets/screenshot-1.png` would win over `/tags/4.3/screenshot-1.png`
(or jpg, jpeg, gif).
2. This is the second screen shot
== Changelog ==
= 0.1.0 =
* Release
== Arbitrary section ==
You may provide arbitrary sections, in the same format as the ones above. This may be of use for extremely complicated
plugins where more information needs to be conveyed that doesn't fit into the categories of "description" or
"installation." Arbitrary sections will be shown below the built-in sections outlined above.

View File

@ -0,0 +1,20 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "carhop-blocks/localisation-map",
"version": "0.1.0",
"title": "Localisation Map",
"category": "carhop-blocks",
"icon": "smiley",
"description": "Example block scaffolded with Create Block tool.",
"example": {},
"supports": {
"html": false
},
"textdomain": "localisation-map",
"editorScript": "file:./index.js",
"editorStyle": "file:./index.css",
"style": "file:./style-index.css",
"viewScript": "file:./view.js",
"render": "file:./render.php"
}

View File

@ -0,0 +1,13 @@
import ServerSideRender from "@wordpress/server-side-render";
import { useBlockProps } from "@wordpress/block-editor";
export default function Edit(props) {
return (
<div {...useBlockProps()}>
<ServerSideRender
block="carhop-blocks/localisation-map"
attributes={props.attributes}
/>
</div>
);
}

View File

@ -0,0 +1,12 @@
import { registerBlockType } from "@wordpress/blocks";
import "./style.scss";
import Edit from "./edit";
import metadata from "./block.json";
// Import the view script to load map handling on the backend
import "./view.js";
registerBlockType(metadata.name, {
edit: Edit,
});

View File

@ -0,0 +1,13 @@
<?php
/**
* Render template for Carhop Localisation Map block
*/
// Generate unique ID for this map instance
$unique_id = 'carhop-map-' . uniqid();
?>
<div class="carhop-localisation-map" id="<?php echo esc_attr($unique_id); ?>">
<div class="map-container"></div>
</div>

View File

@ -0,0 +1,25 @@
.carhop-localisation-map {
.map-container {
a:after {
content: none !important;
}
margin: 0 auto;
width: 800px;
height: 500px;
background-color: var(--wp--preset--color--primary);
border-radius: 8px;
overflow: hidden;
// Loading state
&:not([data-initialized="true"]) {
display: flex;
align-items: center;
justify-content: center;
color: white;
&::before {
content: "Chargement de la carte...";
}
}
}
}

View File

@ -0,0 +1,461 @@
/**
* Google Maps initialization for Carhop Localisation Map block
*/
// Configuration
const GOOGLE_MAPS_CONFIG = {
apiKey: "AIzaSyBs-owKPe4qiYLb2baCTAptLeNNJX7bTQk",
center: {
lat: 50.61036915572659,
lng: 4.151529499893204,
},
zoom: 11,
marker: {
title: "Carhop",
// Options de couleur : 'red', 'blue', 'green', 'yellow', 'purple', 'orange'
color: "green",
},
styles: [
{
featureType: "administrative",
elementType: "geometry",
stylers: [
{
color: "#19464b",
},
],
},
{
featureType: "administrative",
elementType: "labels.text.fill",
stylers: [
{
color: "#ffffff",
},
{
gamma: "1.00",
},
{
lightness: "0",
},
{
saturation: "0",
},
{
visibility: "on",
},
{
weight: "1.5",
},
],
},
{
featureType: "administrative",
elementType: "labels.text.stroke",
stylers: [
{
color: "#003237",
},
{
weight: "2",
},
],
},
{
featureType: "administrative.land_parcel",
elementType: "geometry",
stylers: [
{
color: "#19464b",
},
],
},
{
featureType: "landscape",
elementType: "all",
stylers: [
{
color: "#003237",
},
],
},
{
featureType: "landscape",
elementType: "geometry",
stylers: [
{
color: "#003237",
},
],
},
{
featureType: "landscape.man_made",
elementType: "geometry",
stylers: [
{
color: "#003237",
},
],
},
{
featureType: "landscape.natural",
elementType: "labels.text.fill",
stylers: [
{
color: "#ffffff",
},
{
visibility: "on",
},
],
},
{
featureType: "landscape.natural.landcover",
elementType: "geometry",
stylers: [
{
color: "#003237",
},
],
},
{
featureType: "landscape.natural.terrain",
elementType: "geometry",
stylers: [
{
color: "#19464b",
},
],
},
{
featureType: "poi",
elementType: "all",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "poi.attraction",
elementType: "all",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "poi.business",
elementType: "all",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "poi.government",
elementType: "all",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "poi.park",
elementType: "all",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "poi.school",
elementType: "all",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "poi.medical",
elementType: "all",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "poi.place_of_worship",
elementType: "all",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "poi.sports_complex",
elementType: "all",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "road.highway",
elementType: "geometry.fill",
stylers: [
{
color: "#136f63",
},
{
lightness: "0",
},
],
},
{
featureType: "road.highway",
elementType: "geometry.stroke",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "road.highway",
elementType: "labels",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "road.highway",
elementType: "labels.text.fill",
stylers: [
{
color: "#ffffff",
},
],
},
{
featureType: "road.highway",
elementType: "labels.text.stroke",
stylers: [
{
color: "#0a1f14",
},
],
},
{
featureType: "road.arterial",
elementType: "geometry",
stylers: [
{
color: "#136f63",
},
{
lightness: 18,
},
],
},
{
featureType: "road.arterial",
elementType: "geometry.fill",
stylers: [
{
color: "#136f63",
},
],
},
{
featureType: "road.arterial",
elementType: "labels",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "road.arterial",
elementType: "labels.text.fill",
stylers: [
{
color: "#ffffff",
},
],
},
{
featureType: "road.arterial",
elementType: "labels.text.stroke",
stylers: [
{
color: "#2c2c2c",
},
],
},
{
featureType: "road.local",
elementType: "geometry",
stylers: [
{
color: "#136F63",
},
{
lightness: -20,
},
],
},
{
featureType: "road.local",
elementType: "labels",
stylers: [
{
visibility: "off",
},
],
},
{
featureType: "road.local",
elementType: "labels.text.fill",
stylers: [
{
color: "#ffffff",
},
],
},
{
featureType: "transit",
elementType: "geometry",
stylers: [
{
color: "#136F63",
},
{
lightness: -20,
},
],
},
{
featureType: "water",
elementType: "geometry",
stylers: [
{
color: "#136F63",
},
{
lightness: -20,
},
],
},
],
};
/**
* Initialize Google Maps for all map containers on the page
*/
function initializeCarhopMaps() {
// Find all map containers
const mapContainers = document.querySelectorAll(".carhop-localisation-map");
mapContainers.forEach((container) => {
const mapElement = container.querySelector(".map-container");
if (!mapElement || mapElement.dataset.initialized === "true") {
return;
}
// Create map
const map = new google.maps.Map(mapElement, {
zoom: GOOGLE_MAPS_CONFIG.zoom,
center: new google.maps.LatLng(
GOOGLE_MAPS_CONFIG.center.lat,
GOOGLE_MAPS_CONFIG.center.lng,
),
styles: GOOGLE_MAPS_CONFIG.styles,
// Contrôles de zoom
zoomControl: true,
zoomControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
style: google.maps.ZoomControlStyle.DEFAULT,
},
// Autres contrôles utiles
mapTypeControl: false, // Masquer le sélecteur de type de carte
streetViewControl: false, // Contrôle Street View
fullscreenControl: false, // Bouton plein écran
});
const image =
"https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
// Add marker with custom color
new google.maps.Marker({
position: new google.maps.LatLng(
GOOGLE_MAPS_CONFIG.center.lat,
GOOGLE_MAPS_CONFIG.center.lng,
),
map: map,
title: GOOGLE_MAPS_CONFIG.marker.title,
icon: image,
});
// Mark as initialized
mapElement.dataset.initialized = "true";
});
}
/**
* Load Google Maps API and initialize maps
*/
function loadGoogleMapsAPI() {
// Check if Google Maps is already loaded
if (typeof google !== "undefined" && google.maps) {
initializeCarhopMaps();
return;
}
// Check if script is already loading
if (window.carhopMapsLoading) {
window.carhopMapsCallbacks = window.carhopMapsCallbacks || [];
window.carhopMapsCallbacks.push(initializeCarhopMaps);
return;
}
// Mark as loading
window.carhopMapsLoading = true;
window.carhopMapsCallbacks = [initializeCarhopMaps];
// Create callback function
window.carhopMapsReady = function () {
window.carhopMapsLoading = false;
if (window.carhopMapsCallbacks) {
window.carhopMapsCallbacks.forEach((callback) => callback());
window.carhopMapsCallbacks = [];
}
};
// Load Google Maps API
const script = document.createElement("script");
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);
}
// Initialize when DOM is ready
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", loadGoogleMapsAPI);
} else {
loadGoogleMapsAPI();
}
// Also initialize on window load as fallback
window.addEventListener("load", loadGoogleMapsAPI);