Skip to content
Permalink
Browse files

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.
  • Loading branch information...
schrieveslaach committed May 1, 2019
1 parent c61403d commit 7f1c25f5cd109482fc3991de79f0cb401d0fae72
Showing with 234 additions and 0 deletions.
  1. +76 −0 src/plugins/sections/README.md
  2. +158 −0 src/plugins/sections/sections.js
@@ -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)
@@ -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 );

0 comments on commit 7f1c25f

Please sign in to comment.
You can’t perform that action at this time.