auto advance config option

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)

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',

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