fix: Carousel (#100)

* Fix: github actions

* Fix:	remove 4.1 from tests

* Fix setup.py

* Fix .tx/config

* Fix: Allow other classes than "collapse" for fieldsets in tabbed admin

* Fix carousel

* Fix: isort

* Simpler form

* Update tests

Author: fsbraun

djangocms_frontend/contrib/carousel/cms_plugins.py

@@ -6,6 +6,7 @@
 from ... import settings
 from ...cms_plugins import CMSUIPlugin
 from ...common.attributes import AttributesMixin
+from ...common.background import BackgroundMixin
 from .. import carousel
 from ..link.cms_plugins import LinkPluginMixin
 from . import forms, models
@@ -37,7 +38,8 @@ class CarouselPlugin(mixin_factory("Carousel"), AttributesMixin, CMSUIPlugin):
                     ("carousel_aspect_ratio", "carousel_interval"),
                     ("carousel_controls", "carousel_indicators"),
                     ("carousel_keyboard", "carousel_wrap"),
-                    ("carousel_ride", "carousel_pause"),
+                    ("carousel_ride",),
+                    ("carousel_transition", "carousel_pause",),
                 )
             },
         ),
@@ -51,7 +53,7 @@ def get_render_template(self, context, instance, placeholder):
 
 @plugin_pool.register_plugin
 class CarouselSlidePlugin(
-    mixin_factory("CarouselSlide"), AttributesMixin, LinkPluginMixin, CMSUIPlugin
+    mixin_factory("CarouselSlide"), AttributesMixin, BackgroundMixin, LinkPluginMixin, CMSUIPlugin
 ):
     """
     Components > "Carousel Slide" Plugin

djangocms_frontend/contrib/carousel/constants.py

@@ -2,15 +2,8 @@
 from django.utils.translation import gettext_lazy as _
 
 CAROUSEL_PAUSE_CHOICES = (
-    ("hover", "hover"),
-    ("mouseenter", "mouseenter"),
-    ("mouseleave", "mouseleave"),
-    ("false", "off"),
-)
-
-CAROUSEL_RIDE_CHOICES = (
-    ("carousel", "carousel"),
-    ("false", "off"),
+    ("hover", _("On hover")),
+    ("false", _("Never")),
 )
 
 CAROUSEL_TEMPLATE_CHOICES = getattr(
@@ -38,3 +31,8 @@
 CAROUSEL_ASPECT_RATIO_CHOICES = tuple(
     (f"{x}x{y}", f"{x}x{y}") for x, y in CAROUSEL_ASPECT_RATIOS
 )
+
+CAROUSEL_TRANSITION_CHOICES = (
+    ("", _("Slide")),
+    ("carousel-fade", _("Fade")),
+)

djangocms_frontend/contrib/carousel/forms.py

@@ -7,11 +7,13 @@
 
 from djangocms_frontend.fields import (
     AttributesFormField,
+    ButtonGroup,
     TagTypeFormField,
     TemplateChoiceMixin,
 )
 
 from ... import settings
+from ...common.background import BackgroundFormMixin
 from ...fields import HTMLFormField
 from ...helpers import first_choice
 from ...models import FrontendUIItem
@@ -20,8 +22,8 @@
 from .constants import (
     CAROUSEL_ASPECT_RATIO_CHOICES,
     CAROUSEL_PAUSE_CHOICES,
-    CAROUSEL_RIDE_CHOICES,
     CAROUSEL_TEMPLATE_CHOICES,
+    CAROUSEL_TRANSITION_CHOICES,
 )
 
 mixin_factory = settings.get_forms(carousel)
@@ -46,6 +48,7 @@ class Meta:
                 "carousel_pause",
                 "carousel_ride",
                 "carousel_wrap",
+                "carousel_transition",
                 "attributes",
             ]
         }
@@ -93,11 +96,12 @@ class Meta:
             '"mouseleave". If set to "false", hovering over the carousel '
             "won't pause it."
         ),
+        widget=ButtonGroup(attrs=dict(property="text")),
     )
-    carousel_ride = forms.ChoiceField(
-        label=_("Ride"),
-        choices=CAROUSEL_RIDE_CHOICES,
-        initial=first_choice(CAROUSEL_RIDE_CHOICES),
+    carousel_ride = forms.BooleanField(
+        label=_("Auto start"),
+        initial=True,
+        required=False,
         help_text=_(
             "Autoplays the carousel after the user manually cycles the "
             'first item. If "carousel", autoplays the carousel on load.'
@@ -121,6 +125,16 @@ class Meta:
             "according to the selected ratio."
         ),
     )
+    carousel_transition = forms.ChoiceField(
+        label=_("Transition"),
+        choices=CAROUSEL_TRANSITION_CHOICES,
+        required=False,
+        initial=CAROUSEL_TRANSITION_CHOICES[0][0],
+        help_text=_(
+            "Determines if slides change by sliding or fading."
+        ),
+        widget=ButtonGroup(attrs=dict(property="text")),
+    )
     attributes = AttributesFormField(
         excluded_keys=[
             "id",
@@ -135,7 +149,7 @@ class Meta:
 
 
 class CarouselSlideForm(
-    mixin_factory("CarouselSlide"), AbstractLinkForm, EntangledModelForm
+    mixin_factory("CarouselSlide"), AbstractLinkForm, BackgroundFormMixin, EntangledModelForm
 ):
     """
     Components > "Slide" Plugin
@@ -160,6 +174,7 @@ class Meta:
         queryset=Image.objects.all(),
         to_field_name="id",
         label=_("Slide image"),
+        required=False,
     )
     carousel_content = HTMLFormField(
         label=_("Content"),

djangocms_frontend/contrib/carousel/frameworks/bootstrap5.py

@@ -4,6 +4,8 @@
 class CarouselRenderMixin:
     def render(self, context, instance, placeholder):
         instance.add_classes("carousel slide")
+        if instance.config.get("carousel_transition", None):
+            instance.add_classes(instance.carousel_transition)
         return super().render(context, instance, placeholder)
 
 

djangocms_frontend/contrib/carousel/models.py

@@ -27,7 +27,7 @@ def get_short_description(self):
         text += ", {}: {}".format(_("Keyboard"), self.carousel_keyboard)
         text += ", {}: {}".format(_("Pause"), self.carousel_pause)
         text += ", {}: {}".format(_("Ride"), self.carousel_ride)
-        text += "{}: {}".format(_("Wrap"), self.carousel_wrap)
+        text += ", {}: {}".format(_("Wrap"), self.carousel_wrap)
         return text
 
 

djangocms_frontend/contrib/carousel/templates/djangocms_frontend/bootstrap5/carousel/default/carousel.html

@@ -4,7 +4,7 @@
     data-bs-interval="{{ instance.carousel_interval|lower }}"
     data-bs-keyboard="{{ instance.carousel_keyboard|lower }}"
     data-bs-pause="{{ instance.carousel_pause|lower }}"
-    data-bs-ride="{{ instance.carousel_ride|lower }}"
+    data-bs-ride="{% if instance.carousel_ride %}carousel{% else %}false{% endif %}"
     data-bs-wrap="{{ instance.carousel_wrap|lower }}"
     >
     {% if instance.carousel_indicators %}

djangocms_frontend/contrib/carousel/templates/djangocms_frontend/bootstrap5/carousel/default/image.html

@@ -4,6 +4,10 @@
 
         <img class="d-block w-100" src="{{ thumbnail.url }}" alt="{{ instance.rel_image.default_alt_text|default:'' }}" />
     {% else %}
-        <div class="placeholder placeholder-wave d-block w-100"
-            style="aspect-ratio: {{ aspect_ratio }}"></div>
+        <div class="d-block w-100"
+            style="aspect-ratio: {{ aspect_ratio }}">
+            {% for plugin in instance.child_plugin_instances %}
+                {% render_plugin plugin %}
+            {% endfor %}
+        </div>
     {% endif %}{% endspaceless %}

djangocms_frontend/contrib/carousel/templates/djangocms_frontend/bootstrap5/carousel/default/slide.html

@@ -13,13 +13,13 @@
     {% endif %}
 
     <div class="carousel-caption d-none d-md-block">
-        {{ instance.link_target }}
         {% if instance.carousel_content %}
             {{ instance.carousel_content|html_safe }}
         {% endif %}
-
-        {% for plugin in instance.child_plugin_instances %}
-            {% render_plugin plugin %}
-        {% endfor %}
+        {% if instance.rel_image %}
+            {% for plugin in instance.child_plugin_instances %}
+                {% render_plugin plugin %}
+            {% endfor %}
+        {% endif %}
     </div>
     </{{ instance.tag_type }}>{% endspaceless %}

docs/source/components.rst

@@ -32,7 +32,7 @@ each collapsable section.
 .. image:: screenshots/accordion-plugins.png
     :width: 394
 
-Also see Bootstrap 5 `Accordion <https://getbootstrap.com/docs/5.0/components/accordion/>`_
+Also see Bootstrap 5 `Accordion <https://getbootstrap.com/docs/5.3/components/accordion/>`_
 documentation.
 
 .. index::
@@ -58,7 +58,7 @@ the right hand side.
     New features:
         Alerts can have **shadows** to optically lift them.
 
-Also see Bootstrap 5 `Alerts <https://getbootstrap.com/docs/5.0/components/alerts/>`_
+Also see Bootstrap 5 `Alerts <https://getbootstrap.com/docs/5.3/components/alerts/>`_
 documentation.
 
 .. index::
@@ -76,7 +76,7 @@ plugin, badges are useful, e.g., to mark featured or new headers.
 .. image:: screenshots/badge-example.png
     :width: 180
 
-Also see Bootstrap 5 `Badge <https://getbootstrap.com/docs/5.0/components/badge/>`_
+Also see Bootstrap 5 `Badge <https://getbootstrap.com/docs/5.3/components/badge/>`_
 documentation.
 
 .. index::
@@ -146,7 +146,7 @@ Here is an example of the new card **Image overlay** feature:
 .. image:: screenshots/card-overlay-example.png
     :width: 298
 
-Also see Bootstrap 5 `Card <https://getbootstrap.com/docs/5.0/components/card/>`_
+Also see Bootstrap 5 `Card <https://getbootstrap.com/docs/5.3/components/card/>`_
 documentation.
 
 .. index::
@@ -156,15 +156,20 @@ documentation.
 Carousel component
 ******************
 
-A `Carousel <https://getbootstrap.com/docs/5.0/components/carousel/>`_
+A `Carousel <https://getbootstrap.com/docs/5.3/components/carousel/>`_
 is a set of images (potentially with some description) that slide in
 (or fade in) one after the other after a certain amount of time.
 
+Each slide requires a Carousel Slide child plugin. The simplest case specifies an image, potentially a caption and a link which is followed once the slide is clicked.
+
+Since the design of carousels is somewhat opinionated template sets can be specified using the ``DJANGOCMS_FRONTEND_CAROUSEL_TEMPLATES`` setting.
+.. note:: A Carousel Slide plugin can have child plugins itself. If an image is specified the child plugins add to the caption. If no image is specified the child plugins make up the slide.
+
 ******************
 Collapse component
 ******************
 
-The `Collapse <https://getbootstrap.com/docs/5.0/components/collapse/>`_
+The `Collapse <https://getbootstrap.com/docs/5.3/components/collapse/>`_
 hides text behind its headline and offers the user a trigger (e.g., a
 button) to reveal itself.
 

tests/carousel/test_models.py

@@ -22,7 +22,7 @@ def test_carousel_instance(self):
         self.assertEqual(
             instance.get_short_description(),
             "(default) Interval: 5000, Controls: True, Indicators: True, "
-            "Keyboard: True, Pause: hover, Ride: carouselWrap: True",
+            "Keyboard: True, Pause: hover, Ride: True, Wrap: True",
         )
 
     def test_carousel_slide_instance(self):