Typing Text On HomePage with Orderable

home page models

"""Home page."""
from django.db import models

from modelcluster.fields import ParentalKey
from wagtail.admin.edit_handlers import (
    FieldPanel,
    InlinePanel,
    MultiFieldPanel,
)
from wagtail.core.models import Orderable, Page


class BannerTypingText(Orderable):
    """Select 'popular posts'."""

    page = ParentalKey("home.HomePage", related_name="typing_text")
    text = models.CharField(max_length=40, blank=False, null=False)
    panels = [FieldPanel("text")]

    def __str__(self):
        """String representation of this class."""
        return self.text


class HomePage(Page):
    """A home page class."""

    template = "home/home_page.html"
    parent_page_types = ["wagtailcore.Page"]
    max_count = 1

    banner_description = models.CharField(
        max_length=180,
        help_text="Auto-typing text will appear where you place {typed} in the text.",
        blank=False,
        null=False,
    )

    content_panels = Page.content_panels + [
        MultiFieldPanel(
            [
                FieldPanel("banner_description"),
                InlinePanel("typing_text", min_num=0, max_num=3, label="Typing Text"),
            ],
            heading="Banner Settings",
        ),
    ]

    settings_panels = []

    class Meta:
        """Meta information."""

        verbose_name = "Home Page"
        verbose_name_plural = "Home Pages"

    def get_context(self, request, *args, **kwargs):
        """Replace {typed} in the banner_description with proper HTML."""
        context = super().get_context(request, *args, **kwargs)
        typing_text = "<span class='text-primary'><strong class='u-text-animation " \
                      "u-text-animation--typing'></strong></span>"
        context["banner_description"] = self.banner_description.replace(
            "{typed}", typing_text
        )
        return context

home_page template

{% block extra_js %}
  {{ block.super }}

  {% if self.typing_text.count > 0 %}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/typed.min.js"></script>

    <script>
      var typed = new Typed(".u-text-animation.u-text-animation--typing", {
        strings: [{% for text in self.typing_text.all %}"{{ text.text }}"{% if not forloop.last %}, {% endif %}{% endfor %}],
        typeSpeed: 60,
        loop: true,
        backSpeed: 25,
        backDelay: 1500
      });
    </script>
  {% endif %}
{% endblock extra_js %}