Refactor: Adiciona CarouselPlugin editável no CMS

app/contrib/frontend/landpage/cms_plugins.py

@@ -1,12 +1,14 @@
 from django import forms
 from django.db.models import Q
+from django.contrib import admin
+
 
 from cms.plugin_base import CMSPluginBase
 from cms.plugin_pool import plugin_pool
 
 from contrib.bonde.models import Community
 
-from .models import Navbar, Footer
+from .models import Navbar, CarouselPlugin, CarouselItem, Footer
 from .forms import LayoutBlockForm, LayoutBlockPressureForm
 
 # from .layouts import Layout
@@ -82,6 +84,27 @@ def render(self, context, instance, placeholder):
         return context
 
 
+class CarouselItemInline(admin.StackedInline):
+    model = CarouselItem
+
+
+@plugin_pool.register_plugin
+class CarouselPlugin(CMSPluginBase):
+    model = CarouselPlugin
+    name = "Bloco de Carousel"
+    inlines = [CarouselItemInline]
+    render_template = "frontend/landpage/plugins/carousel.html"
+
+    def render(self, context, instance, placeholder):
+        ctx = super().render(context, instance, placeholder)
+        items = instance.carousel_item.all()
+
+        ctx.update({
+            'items': items,
+        })
+        return ctx
+
+
 @plugin_pool.register_plugin
 class FooterPlugin(CMSPluginBase):
     name = "Rodapé (Padrão)"

app/contrib/frontend/landpage/migrations/0008_auto_20231020_1841.py

@@ -0,0 +1,65 @@
+# Generated by Django 3.2 on 2023-10-20 18:41
+
+import colorfield.fields
+from django.conf import settings
+from django.db import migrations, models
+import django.db.models.deletion
+import filer.fields.image
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('cms', '0022_auto_20180620_1551'),
+        migrations.swappable_dependency(settings.FILER_IMAGE_MODEL),
+        ('landpage', '0007_merge_0006_auto_20230821_2039_0006_auto_20230822_1436'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='CarouselPlugin',
+            fields=[
+                ('cmsplugin_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, related_name='landpage_carouselplugin', serialize=False, to='cms.cmsplugin')),
+                ('title', models.CharField(max_length=120, verbose_name='Título')),
+                ('description', models.CharField(blank=True, max_length=120, null=True, verbose_name='Descrição')),
+            ],
+            options={
+                'abstract': False,
+            },
+            bases=('cms.cmsplugin',),
+        ),
+        migrations.AlterField(
+            model_name='block',
+            name='background_color',
+            field=colorfield.fields.ColorField(blank=True, default=None, image_field=None, max_length=25, null=True, samples=[('#FFFFFF', 'white'), ('#000000', 'black')]),
+        ),
+        migrations.AlterField(
+            model_name='footer',
+            name='background_color',
+            field=colorfield.fields.ColorField(blank=True, default=None, image_field=None, max_length=25, null=True, samples=[('#FFFFFF', 'white'), ('#000000', 'black')], verbose_name='Cor de fundo'),
+        ),
+        migrations.AlterField(
+            model_name='footer',
+            name='color',
+            field=colorfield.fields.ColorField(blank=True, default=None, image_field=None, max_length=25, null=True, samples=[('#FFFFFF', 'white'), ('#000000', 'black')], verbose_name='Cor da fonte'),
+        ),
+        migrations.AlterField(
+            model_name='navbar',
+            name='background_color',
+            field=colorfield.fields.ColorField(blank=True, default=None, image_field=None, max_length=25, null=True, samples=[('#FFFFFF', 'white'), ('#000000', 'black')], verbose_name='Cor de fundo'),
+        ),
+        migrations.AlterField(
+            model_name='navbar',
+            name='color',
+            field=colorfield.fields.ColorField(blank=True, default=None, image_field=None, max_length=25, null=True, samples=[('#FFFFFF', 'white'), ('#000000', 'black')], verbose_name='Cor da fonte'),
+        ),
+        migrations.CreateModel(
+            name='CarouselItem',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('text', models.TextField(verbose_name='Texto do item')),
+                ('image', filer.fields.image.FilerImageField(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, to=settings.FILER_IMAGE_MODEL, verbose_name='Imagem do item')),
+                ('plugin', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='carousel_item', to='landpage.carouselplugin')),
+            ],
+        ),
+    ]

app/contrib/frontend/landpage/migrations/0009_auto_20231020_1853.py

@@ -0,0 +1,21 @@
+# Generated by Django 3.2 on 2023-10-20 18:53
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('landpage', '0008_auto_20231020_1841'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='carouselplugin',
+            name='description',
+        ),
+        migrations.RemoveField(
+            model_name='carouselplugin',
+            name='title',
+        ),
+    ]

app/contrib/frontend/landpage/models.py

@@ -118,8 +118,22 @@ class Meta:
         abstract = False
 
 
+class CarouselPlugin(CMSPlugin):
+    def copy_relations(self, oldinstance):
+        self.carousel_item.all().delete()
+
+        for carousel_item in oldinstance.carousel_item.all():
+            carousel_item.pk = None
+            carousel_item.plugin = self
+            carousel_item.save()
+
+
+class CarouselItem(models.Model):
+    plugin = models.ForeignKey(CarouselPlugin, related_name='carousel_item', on_delete=models.CASCADE)
+    image = FilerImageField(verbose_name="Imagem do item", null=True, blank=True, on_delete=models.SET_NULL)
+    text = models.TextField("Texto do item")
+
+
 class Footer(BlockElementStyled, CMSPlugin):
     class Meta:
         abstract = False
-
-

app/contrib/frontend/landpage/plugin_base.py

@@ -17,7 +17,8 @@ class BlockPluginBase(CMSPluginBase):
         "ButtonPlugin",
         "VideoPlayerPlugin",
         "SnippetPlugin",
-        "LeafletMapPlugin"
+        "LeafletMapPlugin",
+        "CarouselPlugin"
     ]
     prepopulated_fields = {"slug": ("title",)}
     fieldsets = [

app/contrib/frontend/landpage/templates/frontend/landpage/plugins/carousel.html

@@ -0,0 +1,55 @@
+{% load cms_tags sekizai_tags static %}
+
+{% addtoblock "css" %}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css" />
+{% endaddtoblock %}
+
+  <div class="container px-5 mx-auto md:px-4">
+    <div class="swiper mySwiper md:min-h-[300px]">
+      <div class="swiper-wrapper">
+        <!-- Slides -->
+        {% for item in items %}
+          <div class="swiper-slide">
+            <img src="{{ item.image.url }}" alt="{{ item.image.default_alt_text }}">
+            <p>{{ item.text }}</p>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+    <div class="swiper-pagination"></div>
+    <div class="swiper-button-prev mt-14 md:mx-5 md:mt-10"></div>
+    <div class="swiper-button-next mt-14 md:mx-5 md:mt-10"></div>
+  </div>
+
+
+{% addtoblock "js" %}
+  <script src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
+  <script>
+    var swiper = new Swiper(".mySwiper", {
+      slidesPerView: 1,
+      spaceBetween: 10,
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+      navigation: {
+        nextEl: ".swiper-button-next",
+        prevEl: ".swiper-button-prev",
+      },
+      breakpoints: {
+        640: {
+          slidesPerView: 2,
+          spaceBetween: 20,
+        },
+        768: {
+          slidesPerView: 4,
+          spaceBetween: 40,
+        },
+        1024: {
+          slidesPerView: 5,
+          spaceBetween: 50,
+        },
+      },
+    });
+  </script>
+{% endaddtoblock %}

app/tailwind/static/tailwind/tailwindcss/carousel.css

@@ -0,0 +1,29 @@
+
+.swiper {
+  @apply w-full h-full;
+}
+
+.swiper-slide {
+  @apply flex flex-col gap-4 content-center items-center px-8 text-center md:px-4;
+}
+
+.swiper-button-next, 
+.swiper-button-prev {
+  @apply top-1/2 text-neutral-50;
+}
+
+.swiper-button-next::after,
+.swiper-button-prev::after {
+  text-shadow: 1px 0px 5px rgba(52,52,52,0.6);
+}
+
+
+.swiper-pagination-bullet {
+  @apply bg-[rgba(250,250,250,1)];
+}
+
+.swiper-horizontal > .swiper-pagination-bullets,
+.swiper-pagination-bullets.swiper-pagination-horizontal,
+.swiper-pagination-custom, .swiper-pagination-fraction {
+  @apply bottom-auto;
+}

app/tailwind/static/tailwind/tailwindcss/page.css

@@ -4,3 +4,4 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 @import "./eleicao.css";
+@import "./carousel.css";