rename parseCarte → parseMap, fix marker icon size, remove testing checklist

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

TESTING_CHECKLIST.md

@@ -1,276 +0,0 @@
-# Map Editor Plugin - Testing Checklist
-
-## Pre-Testing Setup
-
-1. [ ] Build the frontend: `npm run build`
-2. [ ] Ensure Kirby is running (PHP server)
-3. [ ] Log into Kirby Panel
-4. [ ] Navigate to the map page (e.g., `/panel/pages/map+carte`)
-
-## Phase 1: Multi-Mode Testing (Map Page)
-
-### Basic Marker Operations
-
-1. [ ] **View existing markers**
-   - Open map page in Panel
-   - Verify markers are loaded and displayed on map
-   - Verify markers appear in sidebar list
-
-2. [ ] **Create marker via button**
-   - Click "Add Marker" button in sidebar
-   - Verify marker appears at map center
-   - Verify marker appears in sidebar
-   - Check browser console for errors
-
-3. [ ] **Create marker via map click**
-   - Click anywhere on the map
-   - Verify marker appears at clicked location
-   - Verify marker appears in sidebar
-
-4. [ ] **Select marker**
-   - Click marker in sidebar
-   - Verify map centers on marker
-   - Verify marker is highlighted
-
-5. [ ] **Drag marker**
-   - Drag a marker to new position
-   - Verify position updates in real-time
-   - Reload page and verify position persisted
-
-6. [ ] **Edit marker**
-   - Click "Edit" button for a marker in sidebar
-   - Verify redirect to marker page in Panel
-   - Verify marker page loads correctly
-
-7. [ ] **Delete marker**
-   - Click "Delete" button for a marker
-   - Verify confirmation dialog appears
-   - Confirm deletion
-   - Verify marker removed from map and sidebar
-   - Reload page and verify deletion persisted
-
-### Map Data Persistence
-
-8. [ ] **Map view changes**
-   - Pan and zoom the map
-   - Reload the page
-   - Verify map returns to same view
-
-9. [ ] **Check YAML data**
-   - View the mapdata field source
-   - Verify it contains: background, center, zoom
-   - Verify it does NOT contain markers array
-
-### Edge Cases
-
-10. [ ] **Max markers limit**
-    - Create markers up to the limit (default 50)
-    - Verify "Add Marker" button becomes disabled
-    - Verify map clicks don't create new markers
-
-11. [ ] **Geocode search**
-    - Use the address search in sidebar
-    - Search for an address
-    - Verify map centers on result
-
-12. [ ] **Error handling**
-    - Open browser DevTools Network tab
-    - Try operations with network offline (simulate)
-    - Verify errors are logged to console
-
-## Phase 2: Single-Mode Testing (Marker Page)
-
-### Marker Page Structure
-
-1. [ ] **Create test marker**
-   - In map page sidebar, click "Add Marker"
-   - Click "Edit" to open the marker page
-
-2. [ ] **Content tab**
-   - Verify "Contenu" tab exists
-   - Edit title field
-   - Add blocks (heading, text, image, etc.)
-   - Save and verify content persists
-
-3. [ ] **Position tab**
-   - Switch to "Position" tab
-   - Verify latitude/longitude fields on left
-   - Verify map preview on right
-
-### Single-Mode Map Functionality
-
-4. [ ] **View marker position**
-   - Verify single marker appears on map
-   - Verify marker is at coordinates shown in fields
-
-5. [ ] **Drag marker in single mode**
-   - Drag the marker to a new position
-   - Check browser console for API call
-   - Reload page
-   - Verify new position persisted
-
-6. [ ] **Update coordinates via fields**
-   - Edit latitude field (e.g., 43.8)
-   - Edit longitude field (e.g., 4.3)
-   - Save the page
-   - Verify marker moved on map preview
-
-7. [ ] **Geocode search in single mode**
-   - Use address search (if available)
-   - Verify map centers on result
-   - Drag marker to searched location
-
-### Single-Mode Restrictions
-
-8. [ ] **No CRUD buttons**
-   - Verify no "Add Marker" button
-   - Verify no "Delete" button
-   - Verify no marker list sidebar
-
-9. [ ] **Map size**
-   - Verify map height is smaller (400px) than multi-mode
-
-## Phase 3: Integration Testing
-
-### Subpage Management
-
-1. [ ] **View markers as subpages**
-   - In map page, check sidebar "Marqueurs" section
-   - Verify all markers listed as subpages
-   - Verify ordering by num
-
-2. [ ] **Reorder markers**
-   - Drag markers in Panel pages section
-   - Verify order updates
-   - View map editor
-   - Verify sidebar reflects new order
-
-3. [ ] **Delete marker via Panel**
-   - Delete a marker subpage via Panel (not map editor)
-   - View map page
-   - Verify marker removed from map
-
-4. [ ] **Create marker manually**
-   - Create a new marker subpage via Panel
-   - Set template to "marker"
-   - Add title, latitude, longitude
-   - View map page
-   - Verify marker appears on map
-
-### Multi-Marker Performance
-
-5. [ ] **Create 10 markers**
-   - Create 10 markers via map
-   - Verify performance is acceptable
-   - Check load time
-
-6. [ ] **Create 50 markers** (optional stress test)
-   - Create markers up to limit
-   - Verify UI remains responsive
-   - Check browser memory usage
-
-## Phase 4: Security & API Testing
-
-### Authentication
-
-1. [ ] **Logged out access**
-   - Log out of Panel
-   - Try accessing API directly (e.g., via curl)
-   - Verify 401 Unauthorized response
-
-### CSRF Protection
-
-2. [ ] **Invalid CSRF token**
-   - Use browser DevTools to modify X-CSRF header
-   - Try creating/updating/deleting marker
-   - Verify 403 Forbidden response
-
-### Permissions
-
-3. [ ] **Create restricted user** (optional)
-   - Create user with limited permissions
-   - Log in as that user
-   - Try marker operations
-   - Verify permission checks work
-
-### API Responses
-
-4. [ ] **Check API responses**
-   - Open DevTools Network tab
-   - Perform marker operations
-   - Verify responses match expected format:
-     ```json
-     {
-       "status": "success",
-       "data": { ... }
-     }
-     ```
-
-5. [ ] **Test error responses**
-   - Try invalid coordinates (e.g., lat: 200)
-   - Verify 400 Bad Request response
-   - Verify error message is descriptive
-
-## Phase 5: Build & Deployment
-
-### Build Verification
-
-1. [ ] **Clean build**
-   - Run `npm run build`
-   - Verify no errors or warnings (except font warnings)
-   - Check dist folder created
-
-2. [ ] **Production test**
-   - Test on production server (if available)
-   - Verify all functionality works
-
-### Browser Compatibility
-
-3. [ ] **Test in Chrome**
-4. [ ] **Test in Firefox**
-5. [ ] **Test in Safari**
-6. [ ] **Test in Edge** (optional)
-
-## Common Issues & Solutions
-
-### Issue: Markers not loading
-- **Check**: Browser console for API errors
-- **Check**: Network tab for 401/403 errors
-- **Solution**: Verify user is logged in, CSRF token is valid
-
-### Issue: Drag doesn't update position
-- **Check**: Console for API errors
-- **Check**: Network tab for PATCH request
-- **Solution**: Verify page permissions, CSRF token
-
-### Issue: Redirect to Panel doesn't work
-- **Check**: Console for errors
-- **Check**: panelUrl in API response
-- **Solution**: Verify page ID format is correct
-
-### Issue: Single mode shows multiple markers
-- **Check**: MapEditor component mode prop
-- **Check**: Blueprint field configuration
-- **Solution**: Verify `mode: single` in blueprint
-
-## Test Results Summary
-
-Date: __________
-Tester: __________
-
-| Phase | Tests Passed | Tests Failed | Notes |
-|-------|-------------|--------------|-------|
-| Phase 1: Multi-Mode | __ / 12 | __ | |
-| Phase 2: Single-Mode | __ / 9 | __ | |
-| Phase 3: Integration | __ / 6 | __ | |
-| Phase 4: Security | __ / 5 | __ | |
-| Phase 5: Build | __ / 6 | __ | |
-| **Total** | __ / 38 | __ | |
-
-## Next Steps After Testing
-
-- [ ] Document any bugs found
-- [ ] Create GitHub issues for bugs
-- [ ] Update README with usage instructions
-- [ ] Add user documentation
-- [ ] Consider implementing suggested improvements

public/site/templates/narrative.json.php

@@ -108,7 +108,7 @@ function parseBlocks($blocksField, $page) {
             case 'map':
                 $mapPage = $block->map()->toPages()->first();
                 if ($mapPage) {
-                    $blockData['content'] = parseCarte($mapPage);
+                    $blockData['content'] = parseMap($mapPage);
                 } else {
                     $blockData['content'] = [
                         'map' => $block->map()->value()
@@ -141,7 +141,7 @@ function parseChapter($chapter) {
 }
 
 /**
- * Parse un marqueur
+ * Parse a marker
  */
 function parseMarker($marker) {
     return [
@@ -154,25 +154,25 @@ function parseMarker($marker) {
 }
 
 /**
- * Parse une carte
+ * Parse a map
  */
-function parseCarte($carte) {
+function parseMap($map) {
     $markers = [];
-    foreach ($carte->children()->listed() as $child) {
+    foreach ($map->children()->listed() as $child) {
         if ($child->intendedTemplate()->name() === 'marker') {
             $markers[] = parseMarker($child);
         }
     }
-    $staticImage = $carte->file('map-static.png');
+    $staticImage = $map->file('map-static.png');
     return [
-        'id'       => $carte->id(),
+        'id'       => $map->id(),
-        'uuid'     => $carte->uuid()->toString(),
+        'uuid'     => $map->uuid()->toString(),
         'template' => 'carte',
-        'title'    => $carte->title()->value(),
+        'title'    => $map->title()->value(),
-        'slug'     => $carte->slug(),
+        'slug'     => $map->slug(),
-        'tags'     => $carte->tags()->isNotEmpty() ? $carte->tags()->split() : [],
+        'tags'     => $map->tags()->isNotEmpty() ? $map->tags()->split() : [],
         'image'    => $staticImage ? $staticImage->url() : null,
-        'intro'    => resolveImagesInHtml($carte->text()->value(), $carte),
+        'intro'    => resolveImagesInHtml($map->text()->value(), $map),
         'markers'  => $markers
     ];
 }
@@ -187,7 +187,7 @@ function parseGeoformat($geoformat) {
         if ($template === 'chapter') {
             $children[] = parseChapter($child);
         } elseif ($template === 'map') {
-            $children[] = parseCarte($child);
+            $children[] = parseMap($child);
         }
     }
 
@@ -228,7 +228,7 @@ foreach ($page->children()->listed() as $child) {
     if ($template === 'geoformat') {
         $data['children'][] = parseGeoformat($child);
     } elseif ($template === 'map') {
-        $data['children'][] = parseCarte($child);
+        $data['children'][] = parseMap($child);
     }
 }
 

src/components/PagedJsWrapper.vue

@@ -76,13 +76,12 @@
                 v-if="marker.icon"
                 :src="marker.icon"
                 class="marker-icon"
-                :style="{ width: marker.iconSize + 'px', height: marker.iconSize + 'px' }"
                 alt=""
               />
               <img
                 v-else
                 src="/assets/svg/marker-pin.svg"
-                class="marker-icon marker-icon--default"
+                class="marker-icon"
                 alt=""
               />
               {{ marker.title }}
@@ -235,13 +234,10 @@ const getBlockComponent = (type) => {
 }
 
 .marker-icon {
-  flex-shrink: 0;
-  object-fit: contain;
-}
-
-.marker-icon--default {
   width: 24px;
   height: 24px;
+  flex-shrink: 0;
+  object-fit: contain;
 }
 
 .marker-cover {

src/components/blocks/MapBlock.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="content.template === 'carte'" class="block-map">
+  <div
+    v-if="content.template === 'carte'"
+    class="block-map"
+    :data-slug="content.slug"
+  >
     <h4>{{ content.title }}</h4>
     <img v-if="content.image" :src="content.image" class="carte-image" alt="" />
     <div v-if="content.tags && content.tags.length" class="tags">
@@ -13,18 +17,22 @@
             v-if="marker.icon"
             :src="marker.icon"
             class="marker-icon"
-            :style="{ width: marker.iconSize + 'px', height: marker.iconSize + 'px' }"
             alt=""
           />
           <img
             v-else
             src="/assets/svg/marker-pin.svg"
-            class="marker-icon marker-icon--default"
+            class="marker-icon"
             alt=""
           />
           {{ marker.title }}
         </h5>
-        <img v-if="marker.cover" :src="marker.cover" class="marker-cover" alt="" />
+        <img
+          v-if="marker.cover"
+          :src="marker.cover"
+          class="marker-cover"
+          alt=""
+        />
         <template v-if="marker.blocks">
           <component
             v-for="block in visibleBlocks(marker.blocks)"
@@ -51,8 +59,8 @@ import QuoteBlock from './QuoteBlock.vue';
 defineProps({
   content: {
     type: Object,
-    required: true
+    required: true,
-  }
+  },
 });
 
 const visibleBlocks = (blocks) => {