feat(lib/html): adding vertical slides to export to html (#602)

Author: daughterOfSpring

CHANGELOG.md

@@ -10,6 +10,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 (unreleased)=
 ## [Unreleased](https://github.com/jeertmans/manim-slides/compare/v5.5.4...HEAD)
 
+### Added
+
+- Added vertical slide implementation to html exports of presentations. [@DaughterOfSpring](https://github.com/daughterOfSpring) [#602](https://github.com/jeertmans/manim-slides/pull/602)
+
 (v5.5.4)=
 ## [v5.5.4](https://github.com/jeertmans/manim-slides/compare/v5.5.3...v5.5.4)
 

docs/source/reference/html.md

@@ -35,6 +35,72 @@ or printed with the `--show-template` option.
 If you wish to use another template, you can do so with the
 `--use-template FILE` option.
 
+## Vertical Slides
+
+Slides default to a "horizontal" arrangement by default. This means that each
+slide follows the next in a linear progression. If you instead wish to add
+an additional dimension to your slides and have "vertical" groupings under a
+given "horizontal" slide, you may pass the keyword argument "direction" to the
+{meth}`next_slide<manim_slides.slide.Slide.next_slide>`
+method and give it the argument "vertical". The "horizontal" slides
+will be the main progression of your presentation accessible by tabbing left
+or right using those arrow keys. For "vertical" slides you move to the "horizontal"
+parent slide and use the up and down keys to navigate through the slides that are
+grouped under the initial slide. You may still use the left/right navigation to
+move from any slide in the vertical stack to the next "horizontal" slide.
+
+In the following example we have only the linear "horizontal" slides.
+Note that no direction argument is passed to
+{meth}`self.next_slide()<manim_slides.slide.Slide.next_slide>`.
+
+```{eval-rst}
+.. manim-slides:: HorizontalSlides
+    :config_options: slide_number=true
+
+    from manim import *
+    from manim_slides import Slide
+
+    class HorizontalSlides(Slide):
+        def construct(self):
+            circle = Circle(radius=3, color=BLUE)
+            dot = Dot()
+
+            self.play(GrowFromCenter(circle))
+
+            self.next_slide(loop=True)
+            self.play(MoveAlongPath(dot, circle), run_time=2, rate_func=linear)
+            self.next_slide()
+
+            self.play(dot.animate.move_to(ORIGIN))
+```
+
+In this example the second slide is a "vertical" slide so the left right progression
+moves from slide 1 to slide 3, while to access slide 2 you must be on slide 1 and
+press the down key.
+
+```{eval-rst}
+.. manim-slides:: VerticalAndHorizontalSlides
+    :config_options: slide_number=true
+
+    from manim import *
+    from manim_slides import Slide
+
+    class VerticalAndHorizontalSlides(Slide):
+        def construct(self):
+            circle = Circle(radius=3, color=BLUE)
+            dot = Dot()
+
+            self.play(GrowFromCenter(circle))
+
+            self.next_slide(direction="vertical", loop=True)
+            self.play(MoveAlongPath(dot, circle), run_time=2, rate_func=linear)
+            self.next_slide(direction="vertical")
+
+            self.play(dot.animate.move_to(ORIGIN))
+```
+
+For more information about vertical slides see <https://revealjs.com/vertical-slides/>.
+
 ## More about HTML Slides
 
 You can read more about HTML slides in the [sharing](/reference/sharing) section.

manim_slides/config.py

@@ -4,7 +4,7 @@
 from inspect import Parameter, signature
 from pathlib import Path
 from textwrap import dedent
-from typing import Any, Callable, Optional
+from typing import Any, Callable, Literal, Optional
 
 import rtoml
 from pydantic import (
@@ -162,6 +162,7 @@ class BaseSlideConfig(BaseModel):  # type: ignore
     dedent_notes: bool = True
     skip_animations: bool = False
     src: Optional[FilePath] = None
+    direction: Literal["horizontal", "vertical"] = "horizontal"
 
     @classmethod
     def wrapper(cls, arg_name: str) -> Callable[..., Any]:

manim_slides/slide/base.py

@@ -353,6 +353,12 @@ def next_slide(
 
             The video will be copied into the output folder, but no rescaling
             is applied.
+        :param direction:
+            Optional variable used to set slide direction.
+
+            .. warning::
+
+                Only supported by ``manim-slides convert --to=html``.
         :param kwargs:
             Keyword arguments passed to
             :meth:`Scene.next_section<manim.scene.scene.Scene.next_section>`,

manim_slides/templates/revealjs.html

@@ -19,13 +19,25 @@
     <div class="reveal">
       <div class="slides">
         {% for presentation_config in presentation_configs -%}
+        {% set ns = namespace(open_stack=false) %}
           {%- set outer_loop = loop %}
           {% for slide_config in presentation_config.slides %}
             {% if one_file %}
               {% set file = file_to_data_uri(slide_config.file) %}
             {% else %}
               {% set file = assets_dir / (prefix(outer_loop.index0) + slide_config.file.name) %}
             {% endif %}
+            {% if slide_config.direction == "vertical" %}
+              {% if not ns.open_stack %}
+              <section>
+              {% set ns.open_stack = true %}
+            {% endif %}
+            {% else %}
+              {% if ns.open_stack %}
+              </section>
+              {% set ns.open_stack = false %}
+            {% endif %}
+          {% endif %}
         <section
           data-background-size={{ background_size }}
           data-background-color="{{ presentation_config.background_color }}"
@@ -45,6 +57,9 @@
           {% endif %}
         </section>
           {% endfor %}
+        {% if ns.open_stack %}
+         </section>
+        {% endif %}
         {% endfor %}
       </div>
     </div>