From 6e08b03cced26aa0b7af90b8f65bf5851c1aba71 Mon Sep 17 00:00:00 2001
From: Mikel Maron <mikelmaron@Mikels-Air.verizon.net>
Date: Fri, 18 Nov 2022 15:19:11 -0500
Subject: [PATCH] auto advance config option

---
 README.md              |  2 ++
 src/config.js.template |  1 +
 src/index.html         | 16 +++++++++++++++-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 2eb2b15..c6a27da 100644
--- a/README.md
+++ b/README.md
@@ -215,6 +215,8 @@ Note: items in bold are **required**.
 
 `projection`: Set the Map object's [projection parameter](https://docs.mapbox.com/mapbox-gl-js/example/projections/) to create a map with a non-Mercator projection.. (Optional)
 
+`auto`: Enables automatic advancement through the chapters. (Optional)
+
 `title`: The title of the overall story. (Optional)
 
 `subtitle`: A subtitle for the story. (Optional)
diff --git a/src/config.js.template b/src/config.js.template
index 9a2ff87..8dd54a0 100644
--- a/src/config.js.template
+++ b/src/config.js.template
@@ -9,6 +9,7 @@ var config = {
     inset: true,
     theme: 'dark',
     use3dTerrain: false, //set true for enabling 3D maps.
+    auto: false,
     title: 'The Title Text of this Story',
     subtitle: 'A descriptive and interesting subtitle to draw in the reader',
     byline: 'By a Digital Storyteller',
diff --git a/src/index.html b/src/index.html
index 1adf2f9..948dda4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -341,9 +341,12 @@
         progress: true
     })
     .onStepEnter(async response => {
-        var chapter = config.chapters.find(chap => chap.id === response.element.id);
+        var current_chapter = config.chapters.findIndex(chap => chap.id === response.element.id);
+        var chapter = config.chapters[current_chapter];
+        
         response.element.classList.add('active');
         map[chapter.mapAnimation || 'flyTo'](chapter.location);
+
         // Incase you do not want to have a dynamic inset map,
         // rather want to keep it a static view but still change the
         // bbox as main map move: comment out the below if section.
@@ -374,6 +377,12 @@
                 });
             });
         }
+        if (config.auto) {
+             var next_chapter = (current_chapter + 1) % config.chapters.length;
+             map.once('moveend', () => {
+                 document.querySelectorAll('[data-scrollama-index="' + next_chapter.toString() + '"]')[0].scrollIntoView();
+             });
+        }
     })
     .onStepExit(response => {
         var chapter = config.chapters.find(chap => chap.id === response.element.id);
@@ -382,6 +391,11 @@
             chapter.onChapterExit.forEach(setLayerOpacity);
         }
     });
+
+
+    if (config.auto) {
+        document.querySelectorAll('[data-scrollama-index="0"]')[0].scrollIntoView();
+    }
 });
 
 //Helper functions for insetmap