Skip to content
Permalink
Browse files

Add sections plugin

- Use data-section to assign steps to 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 66f98696bf200d50b62b77775abdb5ddac31f0d5
Showing with 195 additions and 0 deletions.
  1. +73 −0 src/plugins/sections/README.md
  2. +122 −0 src/plugins/sections/sections.js
@@ -0,0 +1,73 @@
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;
}
```

Author
------

Copyright 2019: Marc Schreiber (@schrieveslaach)
@@ -0,0 +1,122 @@
/**
* Sections Plugin
*
* Copyright 2019 Marc Schreiber (@schrieveslaach)
* Released under the MIT license.
*/
/* global window, document */

(function (document, window) {
"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];
}

if (slide.section == null) {
var currentSection = slides[currentIndex - 1].section;
slide.section = currentSection;
}

return accumulatedSlides.concat([slide]);
}, []);

return {
sectionIndices: slides.reduce(function (sectionIndices, slide) {
var section = sectionIndices[slide.section];

if (section == null) {
sectionIndices[slide.section] = {
index: Object.keys(sectionIndices).length + 1,
steps: [slide.id]
};
} else {
section.steps = section.steps.concat([slide.id]);
}

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;
});
}
});


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 = {
name: indexedSteps.slideSectionMapping[slideId].section,
indices: indexedSteps.sectionIndices[indexedSteps.slideSectionMapping[slideId].section]
};

if (currentSection != null) {
currentSection.innerText = section.name;
}

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);
if (section.indices.steps.indexOf(stepId) >= 0) {
step.classList.add('active-section');
step.classList.remove('hidden-section');
} else {
step.classList.remove('active-section');
step.classList.add('hidden-section');
}
});
}

})(document, window);

0 comments on commit 66f9869

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