Sequence mode

views/shared/exhibit_layouts/geolocation-map/form.php

@@ -1,4 +1,22 @@
+<?php
+$formStem = $block->getFormStem();
+$options = $block->getOptions();
+?>
 <div class="selected-items">
     <h4><?php echo __('Items'); ?></h4>
     <?php echo $this->exhibitFormAttachments($block); ?>
 </div>
+
+<div class="layout-options">
+    <div class="block-header drawer">
+        <h4><?php echo __('Layout Options'); ?></h4>
+        <button class="drawer-toggle" type="button" data-action-selector="opened" aria-expanded="true" aria-controls="<?php echo $formStem; ?>-layout-options" aria-label="<?php echo __('Show options'); ?>" title="<?php echo __('Show options'); ?>"><span class="icon"></span></button>
+    </div>
+    <div class="drawer-contents" id="<?php echo $formStem; ?>-layout-options">
+        <div class="sequence-mode">
+            <?php echo $this->formLabel($formStem . '[options][sequence]', __('Sequence mode')); ?>
+            <?php echo $this->formCheckbox($formStem . '[options][sequence]', @$options['sequence'], [], ['1', '0']); ?>
+            <p class="instructions"><?php echo __('Step through locations in the arranged order above. For items with multiple locations, the locations will advance in the order which they were added.'); ?></p>
+        </div>
+    </div>
+</div>

views/shared/exhibit_layouts/geolocation-map/layout.css

@@ -2,3 +2,20 @@
     width: 100%;
     height: 450px;
 }
+
+.layout-geolocation-map .geolocation-sequence-nav {
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+.layout-geolocation-map .geolocation-sequence-counter {
+    min-width: 4em;
+    text-align: center;
+}
+
+.layout-geolocation-map .geolocation-sequence-nav button:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+}

views/shared/exhibit_layouts/geolocation-map/layout.php

@@ -33,6 +33,7 @@
         ];
     endforeach;
 endforeach;
+$sequenceMode = !empty($options['sequence']) && count($locations) > 0;
 ?>
 <script type="text/javascript">
 jQuery(window).on('load', function () {
@@ -42,11 +43,60 @@
         <?php echo $this->geolocationMapOptions(); ?>);
     geolocation_map.initMap();
     var map_locations = <?php echo json_encode($locations); ?>;
+<?php if ($sequenceMode): ?>
+    var layers = [];
+    for (var i = 0; i < map_locations.length; i++) {
+        var locationData = map_locations[i];
+        layers.push(geolocation_map.addLayerFromGeometry(JSON.parse(locationData.geometry_json), {}, locationData.html));
+    }
+    var currentIndex = 0;
+    var total = layers.length;
+    var prevBtn = jQuery('#<?php echo $divId; ?>-prev');
+    var nextBtn = jQuery('#<?php echo $divId; ?>-next');
+    var counter = jQuery('#<?php echo $divId; ?>-counter');
+    var pendingPopupOpen = null;
+    function goToStep(index) {
+        currentIndex = index;
+        var layer = layers[currentIndex];
+        var geometry = JSON.parse(map_locations[currentIndex].geometry_json);
+        if (pendingPopupOpen) {
+            geolocation_map.map.off('moveend', pendingPopupOpen);
+        }
+        pendingPopupOpen = function () {
+            pendingPopupOpen = null;
+            layer.openPopup();
+        };
+        geolocation_map.map.once('moveend', pendingPopupOpen);
+        if (geometry.type === 'Point') {
+            geolocation_map.map.flyTo(layer.getLatLng());
+        } else {
+            geolocation_map.map.flyToBounds(layer.getBounds(), {padding: [25, 25]});
+        }
+        counter.text((currentIndex + 1) + ' / ' + total);
+        prevBtn.prop('disabled', currentIndex === 0);
+        nextBtn.prop('disabled', currentIndex === total - 1);
+    }
+    prevBtn.on('click', function () {
+        if (currentIndex > 0) goToStep(currentIndex - 1);
+    });
+    nextBtn.on('click', function () {
+        if (currentIndex < total - 1) goToStep(currentIndex + 1);
+    });
+    goToStep(0);
+<?php else: ?>
     for (var i = 0; i < map_locations.length; i++) {
         var locationData = map_locations[i];
         geolocation_map.addLayerFromGeometry(JSON.parse(locationData.geometry_json), {}, locationData.html);
     }
     geolocation_map.fitLocations();
+<?php endif; ?>
 });
 </script>
+<?php if ($sequenceMode): ?>
+<div class="geolocation-sequence-nav" aria-label="<?php echo __('Location sequence navigation'); ?>">
+    <button id="<?php echo $divId; ?>-prev" class="geolocation-sequence-prev" type="button" disabled><?php echo __('Previous'); ?></button>
+    <span id="<?php echo $divId; ?>-counter" class="geolocation-sequence-counter">1 / <?php echo count($locations); ?></span>
+    <button id="<?php echo $divId; ?>-next" class="geolocation-sequence-next" type="button"<?php if (count($locations) === 1): ?> disabled<?php endif; ?>><?php echo __('Next'); ?></button>
+</div>
+<?php endif; ?>
 <div id="<?php echo $divId; ?>" class="geolocation-map exhibit-geolocation-map"></div>