An overview of slides

This provides the user with a visual overview of the slides, as shown in the following screenshot:

The presentation slides will be recreated in a new full screen Div element. This is styled using the fullScreen class in the CSS stylesheet located in the SlideShowApp constructor:

overviewScreen = new DivElement();
overviewScreen.classes.toggle("fullScreen");
overviewScreen.onClick.listen((e) => overviewScreen.remove());

The HTML for the slides will be identical. To shrink the slides, the list of slides is iterated over, the HTML element object is obtained, and the CSS class for the slide is set:

currentSlideShow.slides.forEach((s) {
  aSlide = s.getSlideContents();
  aSlide.classes.toggle("slideOverview");
  aSlide.classes.toggle("shrink");
...

The CSS hover class is set to scale the slide when the mouse enters so a slide can be focused on for review. The classes are set with the toggle method, which either adds if not present or removes if they are. This method has an optional parameter:

aSlide.classes.toggle('className', condition);

The second parameter, named shouldAdd, is true if the class is always to be added and false if the class is always to be removed.