Open modal for internal links (WIP)

webgis/js/components/utils.js

@@ -151,12 +151,13 @@ Utils.buildBibliography = async function(recordUri, recordId) {
  * to Stimulus links
  */
 Utils.parseMarkers = function(text) {
-    const regex = /(?<marker>\[marker coords=\"(?<coords>[\d\s\.]+)\"\](?<content>[\w\s\.;:\-]+)\[\/marker\])/mig;
+    const regex = /(?<marker>\[marker coords=\"(?<coords>[\d\s\.]+)\"\ ?(group=\"(?<group>\w+)\")?](?<content>[\w\s\.;:\-]+)\[\/marker\])/mig;
     let matches = [...text.matchAll(regex)];
 
     if (matches.length) {
         matches.forEach(match => {
-            const replacement = `<a data-action="marker#go modal#close" data-controller="marker" data-marker-coords-value="${match.groups.coords}">
+            const replacement = `<a data-action="marker#go modal#close tabs#reset marker#goAndOpen" data-controller="marker"
+                data-marker-coords-value="${match.groups.coords}" data-marker-group-value="${match.groups.group}">
                 ${match.groups.content}</a>`;
             text = text.replace(match.groups.marker, replacement.trim());
         });

webgis/js/controllers/marker_controller.js

@@ -1,5 +1,6 @@
 import { Controller } from "@hotwired/stimulus";
 import { GisState, getMarkerByCoords } from "../state.js";
+import UI from "../ui.js";
 
 export default class extends Controller {
     static values = {
@@ -8,6 +9,11 @@ export default class extends Controller {
         'id': String,
     };
     
+    uiModals = {
+        sites: '#site-data',
+        notConserved: '#not-conserved-data',
+    };
+
     END_ZOOM = 19;
     // Animation breaks automatic tooltip opening...
     mapAnimate = {
@@ -16,9 +22,6 @@ export default class extends Controller {
         easeLinearity: 0.25
     };
 
-    /**
-     * @param {Event} event 
-     */
     go() {
         let map = GisState.map;
         const coords = this.coordsValue.split(' ');
@@ -31,8 +34,31 @@ export default class extends Controller {
 
         let marker = this.getMarker(map, coords);
         // DEBUG for sites
-        if (this.groupValue) marker = getMarkerByCoords(coords, this.groupValue);
+        //if (this.groupValue) marker = getMarkerByCoords(coords, this.groupValue);
         marker?.openTooltip();
+
+        return marker;
+    }
+    /**
+     * Go to a marker location on the map
+     * and open its modal
+     */
+    goAndOpen() {
+        const marker = this.go();
+        const selector = this.uiModals[this.groupValue];
+        const data = marker.options.data;
+
+        switch(this.groupValue) {
+            case 'sites':
+                UI.openSiteModal(data, selector);
+                break;
+            case 'notConserved':
+                UI.openNotConserModal(data, selector);
+                break;
+            default:
+                console.log('Cannot open modal...');
+                break;
+        }
     }
     /**
      * @param {L.Map} map

webgis/js/gis.js

@@ -200,6 +200,7 @@ GIS.sites = async function () {
         // Populate app state for reuse and avoid window.Sites etc.
         // Municipality (Capri, Anacapri) added for reuse in dynamic menu
         marker.options.municipality = record.municipality;
+        marker.options.data = record;
         const markerIndex = `${record.coordinates[0]} ${record.coordinates[1]}`;
         GisState.markers.sites[markerIndex] = marker;
     }
@@ -230,6 +231,7 @@ GIS.notConserved = async function () {
         // Populate app state for reuse and avoid window.Sites etc.
         const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
         marker.options.municipality = record.municipality;
+        marker.options.data = record;
         GisState.markers.notConserved[markerLabel] = marker;
     }
 
@@ -262,6 +264,7 @@ GIS.findings = async function () {
         findings.addLayer(marker);
         const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
         marker.options.municipality = record.municipality;
+        marker.options.data = record;
         GisState.markers.findings[markerLabel] = marker;
     }
 
@@ -293,6 +296,7 @@ GIS.prehistoric = async function () {
 
         const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
         marker.options.municipality = record.municipality;
+        marker.options.data = record;
         GisState.markers.prehistoric[markerLabel] = marker;
 
         prehistoric.addLayer(marker);
@@ -323,6 +327,7 @@ GIS.underwater = async function () {
             );
 
         const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
+        marker.options.data = record;
         GisState.markers.underwater[markerLabel] = marker;
 
         underwater.addLayer(marker);
@@ -355,6 +360,7 @@ GIS.reuse = async function () {
         const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
         marker.options.municipality = record.municipality;
         marker.options.label = record.label;
+        marker.options.data = record;
         GisState.markers.reuse[markerLabel] = marker;
 
         reuse.addLayer(marker);