Add sections plugin

- Use data-section to assign steps to sections
- Use data-sub-section to assign steps to sub-sections
- Optional divs showing the section progress
- active-section and hidden-section are classes to mark steps as active and
  hidden section element.

src/plugins/sections/README.md

@@ -0,0 +1,76 @@
+Sections plugin
+===============
+
+Sections for impress.js presentations
+
+Usage
+-----
+
+Add `data-section="Intro"` to your steps as you can see here:
+
+```html
+<div data-section="Section Name" id="title" class="step">
+    <h1>Title of Slide</h1>
+</div>
+
+<div id="agenda" class="agenda" class="step"> <!-- no data-section required -->
+
+</div>
+
+<div data-section="A new section" id="first-slide" class="step"> 
+
+</div>
+```
+
+The section name and the current index of the section will be displayed in your presentation. 
+Therefore, add a div for displaying the current section and/or progress as you can see it here:
+
+
+```html
+<div class="impress-section-overview">
+    <div class="impress-section-numbers"></div>
+    <div class="impress-current-section"></div>
+</div>
+```
+
+```css
+.impress-section-overview {
+    display: flex;
+    align-items: flex-end;
+    justify-content: flex-end;
+}
+
+.impress-section-numbers {
+    display: inline-block;
+    margin-top: .25em;
+    padding: .1em .25em;
+    color: white;
+    background: #aaa;
+}
+
+.impress-current-section {
+    padding-left: 5px;
+}
+```
+
+Feel free to change the style of your section overview as you like by editing the CSS file.
+
+Additionally, the plugin will generate an agenda outline for you if you want it to. Therefore, add the a class `agenda` 
+to any of your divs of the presentation (as shown in the aforementioned HTML snippet).
+
+Furthermore, this plugin adds the class `active-section` to all steps of the action section and `hidden-section` to all
+steps that do not belong to this section. You can use this classes, e.g. to hide the steps of another section:
+
+```css
+.impress-enabled .hidden-section {
+    opacity: 0 !important;
+}
+```
+
+The sections plugin supports also sub section. Therefore, add the attribute `data-sub-section="…"` to your subsection. 
+The agenda list and also the section overview will show the sub sections.
+
+Author
+------
+
+Copyright 2019: Marc Schreiber (@schrieveslaach)

src/plugins/sections/sections.js

@@ -0,0 +1,158 @@
+/**
+ * Sections Plugin
+ *
+ * Copyright 2019 Marc Schreiber (@schrieveslaach)
+ * Released under the MIT license.
+ */
+/* global document */
+
+( function( document ) {
+    "use strict";
+    var root, api, gc;
+
+    var indexedSteps;
+
+    var agenda = document.querySelector( "div.agenda ul" );
+    var currentSection = document.querySelector(
+        "div.impress-section-overview .impress-current-section" );
+    var sectionNumbers = document.querySelector(
+        "div.impress-section-overview .impress-section-numbers" );
+
+    function indexSteps() {
+        var slides = Array.prototype.slice.call( root.querySelectorAll( ".step" ) )
+            .map( function( step ) {
+                return {
+                    id: step.id,
+                    section: step.dataset.section,
+                    subSection: step.dataset.subSection
+                };
+            } )
+            .reduce( function( accumulatedSlides, slide, currentIndex, slides ) {
+                if ( currentIndex === 0 ) {
+                    return [ slide ];
+                }
+
+                let previousSlide = slides[ currentIndex - 1 ];
+                if ( slide.section == null ) {
+                    var currentSection = previousSlide.section;
+                    slide.section = currentSection;
+                }
+
+                if ( slide.subSection == null && previousSlide.section === slide.section ) {
+                    var currentSubSection = previousSlide.subSection;
+                    slide.subSection = currentSubSection;
+                }
+
+                return accumulatedSlides.concat( [ slide ] );
+            }, [] );
+
+        return {
+            sectionIndices: slides.reduce( function( sectionIndices, slide ) {
+                var section = sectionIndices[ slide.section ];
+
+                if ( section == null ) {
+                    section = {
+                        index: Object.keys( sectionIndices ).length + 1,
+                        steps: [ slide.id ],
+                        subSections: []
+                    };
+                    sectionIndices[ slide.section ] = section;
+                } else {
+                    section.steps = section.steps.concat( [ slide.id ] );
+                }
+
+                if ( slide.subSection != null &&
+                    section.subSections.indexOf( slide.subSection ) < 0 ) {
+                    section.subSections = section.subSections.concat( [ slide.subSection ] );
+                }
+
+                return sectionIndices;
+            }, {} ),
+
+            slideSectionMapping: slides.reduce( function( slideSectionMapping, slide ) {
+                slideSectionMapping[ slide.id ] = {
+                    section: slide.section,
+                    subSection: slide.subSection
+                };
+                return slideSectionMapping;
+            }, {} )
+        };
+    }
+
+    document.addEventListener( "impress:init", function( event ) {
+        root = event.target;
+        api = event.detail.api;
+        gc = api.lib.gc;
+
+        indexedSteps = indexSteps();
+
+        if ( agenda != null ) {
+            Object.keys( indexedSteps.sectionIndices ).forEach( function( section ) {
+                var li = document.createElement( "li" );
+                agenda.appendChild( li );
+                li.innerText = section;
+
+                var subSections = indexedSteps.sectionIndices[ section ].subSections;
+                if ( subSections.length > 0 ) {
+                    var ul = document.createElement( "ul" );
+                    li.appendChild( ul );
+
+                    subSections.forEach( function( subSection ) {
+                        var li = document.createElement( "li" );
+                        ul.appendChild( li );
+                        li.innerText = subSection;
+                    } );
+                }
+            } );
+        }
+    } );
+
+    document.addEventListener( "impress:stepleave", function( event ) {
+        updateSectionOverview( event.detail.next.id );
+    } );
+
+    document.addEventListener( "impress:steprefresh", function( event ) {
+        updateSectionOverview( event.target.id );
+    } );
+
+    function updateSectionOverview( slideId ) {
+        if ( indexedSteps == null ) {
+            return;
+        }
+
+        var section = {
+            section: indexedSteps.slideSectionMapping[ slideId ].section,
+            subSection: indexedSteps.slideSectionMapping[ slideId ].subSection,
+            indices: indexedSteps.sectionIndices[
+                indexedSteps.slideSectionMapping[ slideId ].section ]
+        };
+
+        if ( currentSection != null ) {
+            if ( section.subSection == null ) {
+                currentSection.innerText = section.section;
+            } else {
+                currentSection.innerText = section.section + " \u2022 " + section.subSection;
+            }
+        }
+
+        if ( sectionNumbers != null ) {
+            sectionNumbers.innerText = section.indices.index + "/" +
+                Object.keys( indexedSteps.sectionIndices ).length;
+        }
+
+        Object.keys( indexedSteps.slideSectionMapping ).forEach( function( stepId ) {
+            var step = document.getElementById( stepId );
+
+            var subSection = indexedSteps.slideSectionMapping[ stepId ].subSection;
+            if ( section.indices.steps.indexOf( stepId ) >= 0 &&
+                section.subSection === subSection ) {
+                step.classList.add( "active-section" );
+                step.classList.remove( "hidden-section" );
+            } else {
+                step.classList.remove( "active-section" );
+                step.classList.add( "hidden-section" );
+            }
+        } );
+    }
+
+} )( document );