32e8301d91
Some checks failed
Deploy / Build and Deploy to Production (push) Has been cancelled
Major refactoring of the map-editor plugin to store markers as Kirby subpages instead of YAML data, enabling extensible block content. Backend Changes: - Add API routes for marker CRUD operations (GET, POST, PATCH, DELETE) - Create marker.yml blueprint with content & position tabs - Add markers section to map.yml blueprint - Update useMapData to only handle center/zoom/background - Create useMarkersApi composable for API communication Frontend Changes: - Refactor MapEditor.vue to support multi/single modes - Multi mode: loads markers via API, redirects to Panel for editing - Single mode: displays single marker for position tab in marker page - Remove MarkerEditor.vue modal (replaced by Panel editing) - Normalize position format handling (lon vs lng) API Features: - Session-based auth for Panel requests (no CSRF needed) - Proper error handling and validation - Markers created as listed pages (not drafts) - Uses Kirby's data() method for JSON parsing Documentation: - Add IMPLEMENTATION_SUMMARY.md with technical details - Add TESTING_CHECKLIST.md with 38 test cases Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com> |
||
|---|---|---|
| .. | ||
| api | ||
| assets/icons | ||
| src | ||
| index.css | ||
| index.js | ||
| index.php | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
Kirby Map Editor Plugin
Plugin d'édition de cartes interactives pour Kirby CMS avec marqueurs enrichis et géocodage.
Structure du code
map-editor/
├── index.php # Enregistrement du plugin Kirby
├── lib/fields/
│ └── map-editor.php # Définition du champ custom
├── src/
│ ├── index.js # Entry point
│ ├── composables/ # Logique métier réutilisable
│ │ ├── useMarkers.js # Gestion des marqueurs (CRUD)
│ │ └── useMapData.js # Gestion des données YAML
│ ├── components/
│ │ ├── field/
│ │ │ └── MapEditor.vue # Composant principal (orchestrateur)
│ │ └── map/
│ │ ├── MapPreview.vue # Carte MapLibre interactive
│ │ ├── MarkerList.vue # Liste des marqueurs (sidebar)
│ │ ├── MarkerEditor.vue # Modal d'édition de marqueur
│ │ └── GeocodeSearch.vue # Recherche d'adresse
│ └── utils/
│ ├── constants.js # Constantes globales
│ ├── api/
│ │ └── nominatim.js # Client API Nominatim
│ └── helpers/
│ └── debounce.js # Fonction de debounce
├── package.json
└── README.md
Composables
useMarkers
Gère l'état et les opérations CRUD sur les marqueurs.
Utilisation : ```javascript import { useMarkers } from '../../composables/useMarkers.js';
const { markers, selectedMarkerId, canAddMarker, addMarker, deleteMarker, } = useMarkers({ maxMarkers: 50 }); ```
useMapData
Gère le chargement/sauvegarde des données de carte en YAML.
Utilisation : ```javascript import { useMapData } from '../../composables/useMapData.js';
const { center, zoom, loadMapData, debouncedSave } = useMapData({ defaultCenter: { lat: 43.836699, lon: 4.360054 }, defaultZoom: 13, onSave: (yamlString) => emit('input', yamlString), }); ```
Build
```bash npm install npm run build ```
Build avec Kirbyup → `/index.js` et `/index.css`
Avantages du refactoring
- Réutilisabilité : Composables utilisables dans d'autres composants
- Testabilité : Fonctions pures testables indépendamment
- Maintenabilité : Code organisé par responsabilité
- Lisibilité : MapEditor réduit de 370 → 230 lignes
- Performance : Auto-save optimisé
Technologies
- Vue 3 Composition API
- MapLibre GL JS 3.6+
- Nominatim API (OpenStreetMap)
- js-yaml pour parsing YAML