diff --git a/CHANGELOG.md b/CHANGELOG.md index cb63141e..5d2ca763 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/docs/source/reference/html.md b/docs/source/reference/html.md index 24785c0d..e58f9256 100644 --- a/docs/source/reference/html.md +++ b/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` +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()`. + +```{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 . + ## More about HTML Slides You can read more about HTML slides in the [sharing](/reference/sharing) section. diff --git a/manim_slides/config.py b/manim_slides/config.py index cf2b3352..1c9f5db6 100644 --- a/manim_slides/config.py +++ b/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]: diff --git a/manim_slides/slide/base.py b/manim_slides/slide/base.py index 72383e3f..c5219b4d 100644 --- a/manim_slides/slide/base.py +++ b/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`, diff --git a/manim_slides/templates/revealjs.html b/manim_slides/templates/revealjs.html index 094ad320..823f06b0 100644 --- a/manim_slides/templates/revealjs.html +++ b/manim_slides/templates/revealjs.html @@ -19,6 +19,7 @@
{% 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 %} @@ -26,6 +27,17 @@ {% else %} {% set file = assets_dir / (prefix(outer_loop.index0) + slide_config.file.name) %} {% endif %} + {% if slide_config.direction == "vertical" %} + {% if not ns.open_stack %} +
+ {% set ns.open_stack = true %} + {% endif %} + {% else %} + {% if ns.open_stack %} +
+ {% set ns.open_stack = false %} + {% endif %} + {% endif %}
{% endfor %} + {% if ns.open_stack %} +
+ {% endif %} {% endfor %}