Merge branch '7-criacao-das-tags-do-slideshow' into 'master'

criacao, testes e finalizacao das tags do carousel #7

Closes #7

See merge request !9

dsgov/templatetags/br_carousel_tags.py

+from django import template
+from django.utils.safestring import mark_safe
+
+register = template.Library()
+
+# --- br_carousel_row ---
+@register.tag
+def br_carousel_row(parser, token):
+    """
+    Inicia um contêiner de linha (row) para o carousel.
+
+    Uso no template:
+        {% br_carousel_row %}
+            ... conteúdo do carousel ...
+        {% end_br_carousel_row %}
+    """
+    bits = token.split_contents()
+    col_class = "col-sm-12 col-md-8"
+    for bit in bits[1:]:
+        if bit.startswith("cols="):
+            col_class = bit.split("=", 1)[1].strip('"\'')
+    nodelist = parser.parse(('end_br_carousel_row',))
+    parser.delete_first_token()
+    return CarouselRowNode(nodelist, col_class)
+
+class CarouselRowNode(template.Node):
+    def __init__(self, nodelist, col_class):
+        self.nodelist = nodelist
+        self.col_class = col_class
+
+    def render(self, context):
+        return mark_safe(f'''
+            <div class="row">
+              <div class="{self.col_class}">
+                {self.nodelist.render(context)}
+              </div>
+            </div>
+        ''')
+
+# --- br_carousel ---
+@register.tag
+def br_carousel(parser, token):
+    """
+    Estrutura principal do carousel, incluindo botões de navegação.
+
+    Uso no template:
+        {% br_carousel %}
+            ... conteúdo (stage e steps) ...
+        {% end_br_carousel %}
+    """
+    nodelist = parser.parse(('end_br_carousel',))
+    parser.delete_first_token()
+    return CarouselNode(nodelist)
+
+class CarouselNode(template.Node):
+    def __init__(self, nodelist):
+        self.nodelist = nodelist
+
+    def render(self, context):
+        return mark_safe(f'''
+            <div class="br-carousel" data-circular="true" aria-label="Carrossel de Exemplo" aria-roledescription="carousel">
+              <div class="carousel-button">
+                <button class="br-button carousel-btn-prev terciary circle" type="button" aria-label="Anterior">
+                  <i class="fas fa-chevron-left" aria-hidden="true"></i>
+                </button>
+              </div>
+              {self.nodelist.render(context)}
+              <div class="carousel-button">
+                <button class="br-button carousel-btn-next terciary circle" type="button" aria-label="Próximo">
+                  <i class="fas fa-chevron-right" aria-hidden="true"></i>
+                </button>
+              </div>
+            </div>
+          ''')
+
+# --- br_carousel_stage ---
+@register.tag
+def br_carousel_stage(parser, token):
+    """
+    Container que agrupa todas as páginas do carousel.
+
+    Uso no template:
+        {% br_carousel_stage %}
+            {% br_carousel_page %} ... {% end_br_carousel_page %}
+        {% end_br_carousel_stage %}
+    """
+    nodelist = parser.parse(('end_br_carousel_stage',))
+    parser.delete_first_token()
+    return CarouselStageNode(nodelist)
+
+class CarouselStageNode(template.Node):
+    def __init__(self, nodelist):
+        self.nodelist = nodelist
+
+    def render(self, context):
+        return mark_safe(f'''
+            <div class="carousel-stage">
+              {self.nodelist.render(context)}
+            </div>
+          ''')
+
+# --- br_carousel_page ---
+@register.tag
+def br_carousel_page(parser, token):
+    """
+    Representa uma página (slide) do carousel.
+
+    A primeira página recebe automaticamente o atributo active="active".
+
+    Uso no template:
+        {% br_carousel_page %}
+            {% br_carousel_page_content class="bg-blue-10" %}
+                Título ou conteúdo
+            {% end_br_carousel_page_content %}
+        {% end_br_carousel_page %}
+    """
+    nodelist = parser.parse(('end_br_carousel_page',))
+    parser.delete_first_token()
+    return CarouselPageNode(nodelist)
+
+class CarouselPageNode(template.Node):
+    def __init__(self, nodelist):
+        self.nodelist = nodelist
+
+    def render(self, context):
+        # Determina se é a primeira página (para aplicar active="active")
+        if 'carousel_page_counter' not in context:
+            context['carousel_page_counter'] = 1
+        else:
+            context['carousel_page_counter'] += 1
+
+        active_attr = 'active="active"' if context['carousel_page_counter'] == 1 else ''
+        return mark_safe(f'''
+            <div class="carousel-page" role="group" aria-roledescription="slide" aria-live="polite" {active_attr}>
+              {self.nodelist.render(context)}
+            </div>
+          ''')
+
+# --- br_carousel_page_content ---
+@register.tag
+def br_carousel_page_content(parser, token):
+    """
+    Conteúdo interno de uma página do carousel.
+
+    Args:
+        class (str): Classe CSS extra para customizar o background.
+
+    Uso no template:
+        {% br_carousel_page_content class="bg-blue-10" %}
+            Texto ou HTML do título
+        {% end_br_carousel_page_content %}
+    """
+    nodelist = parser.parse(('end_br_carousel_page_content',))
+    parser.delete_first_token()
+
+    # Pega o argumento class="..."
+    bits = token.split_contents()
+    css_class = ""
+    for bit in bits[1:]:
+        if bit.startswith("class="):
+            css_class = bit.split("=", 1)[1].strip('"\'')
+    return CarouselPageContentNode(nodelist, css_class)
+
+class CarouselPageContentNode(template.Node):
+    def __init__(self, nodelist, css_class):
+        self.nodelist = nodelist
+        self.css_class = css_class
+
+    def render(self, context):
+        content = self.nodelist.render(context).strip()
+        class_attr = f"carousel-content{(' ' + self.css_class) if self.css_class else ''}"
+        return mark_safe(f'''
+            <div class="{class_attr}">
+              <div class="h3 carousel-title">{content}</div>
+            </div>
+        ''')
+
+# --- br_carousel_step ---
+@register.tag
+def br_carousel_step(parser, token):
+    """
+    Container que agrupa os botões de passo (step buttons) do carousel.
+
+    Uso no template:
+        {% br_carousel_step %}
+            {% br_step_button text="Rótulo 1" aria_posinset=1 aria_setsize=5 %}
+            ...
+        {% end_br_carousel_step %}
+    """
+    nodelist = parser.parse(('end_br_carousel_step',))
+    parser.delete_first_token()
+    return CarouselStepNode(nodelist)
+
+class CarouselStepNode(template.Node):
+    def __init__(self, nodelist):
+        self.nodelist = nodelist
+
+    def render(self, context):
+        return mark_safe(f'''
+            <div class="carousel-step">
+              <nav class="br-step" data-initial="1" data-type="simple" role="none">
+                <div class="step-progress" role="listbox" aria-orientation="horizontal" aria-label="Lista de Opções">
+                  {self.nodelist.render(context)}
+                </div>
+              </nav>
+            </div>
+          ''')
+
+# --- br_step_button ---
+@register.simple_tag
+def br_step_button(text, aria_posinset, aria_setsize):
+    """
+    Gera um botão de etapa para o carousel step.
+
+    Args:
+        text (str): Texto/label visível do botão.
+        aria_posinset (int): Posição do item no conjunto.
+        aria_setsize (int): Total de itens no conjunto.
+    """
+    return mark_safe(f'''
+      <button class="step-progress-btn" role="option" aria-posinset="{aria_posinset}" aria-setsize="{aria_setsize}" type="button">
+        <span class="step-info">{text}</span>
+      </button>
+    ''')

tests/django_dsgov_test1/django_dsgov_test1/urls.py

@@ -30,13 +30,7 @@ urlpatterns = [
                 {'label': 'Link de acesso 4'}
             ]}), name="headers"),
     path("footer/", TemplateView.as_view(template_name = 'examples_footer.html'), name="footer"),
-    path("carousel/", TemplateView.as_view(template_name = 'examples_carousel.html', extra_context = {"imagens":[
-                {'legenda': 'Bem vindo a UFRPE', 'image': 'https://s2.glbimg.com/KU72T67vVh5Pdgv5Ls2TT4dv09k=/0x0:1920x1080/984x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2019/S/d/t7a9OdQ1AUyswqkYCJSg/urfpe-recife.jpg'},
-                {'legenda': 'Testando Imagem', 'image': 'https://s2-g1.glbimg.com/8AWiNTCt0_3fRLaCj7nFeisLb2U=/0x0:1280x960/984x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2022/D/6/cBnRd8QmuP1kXgcpdu9A/codai-sao-lourenco.jpeg'},
-                {'legenda': 'Imagem terceira', 'image': 'https://tallos-chat.s3.tallos.com.br/medias/faq/61367692a91f24b1f9c3c5bc-image-22-09-2021-15-50-35-como-acessar-o-ava-ufrpe-613fb3b83d09ec001c55b3fc-71.webp'},
-                {'legenda': 'Imagem quarta', 'image': 'https://tallos-chat.s3.tallos.com.br/medias/faq/61367692a91f24b1f9c3c5bc-image-13-06-2022-10-53-16-como-realizar-primeiro-acesso-auto-cadastro-no-sigaa-aluno-613fb3b83d09ec001c55b3fc-35-7c4.webp'},
-                {'legenda': 'Imagem quinta', 'image': 'https://www.pebsp.com/wp-content/uploads/2024/07/Graduacao-EAD-UFRPE-Universidade-Federal.jpg'},
-            ]}), name="carousel"),
+    path("carousel/", TemplateView.as_view(template_name = 'examples_carousel.html'), name="carousel"),
     path("menu/", TemplateView.as_view(template_name = 'examples_menu.html'), name="menu"),
     path("list/", TemplateView.as_view(template_name = 'examples_list.html', extra_context = {"lista":[
                 {'icon': 'fas fa-heartbeat', 'content': 'Texto principal 1', 'meta': 'Meta 1'},

tests/django_dsgov_test1/templates/examples_carousel.html

 {% extends "dsgov/base.html" %}
-{% load br_components %}
+{% load br_carousel_tags %}
 {% load static %}
 
 {% block title %}
@@ -7,7 +7,49 @@
 {% endblock %}
 
 {% block content %}
-    <div class="container">
-        {% br_carousel imagens=imagens %}
-    </div>
+    <br><br>
+    {# Pode ser adicionado cols="col-12" ao {% br_carousel_row cols="col-12" %} para controlar a largura do carousel #}
+    {% br_carousel_row %}
+        {% br_carousel %}
+            {% br_carousel_stage %}
+                {% br_carousel_page %}
+                    {% br_carousel_page_content class="bg-blue-10" %}
+                        Página 1
+                    {% end_br_carousel_page_content %}
+                {% end_br_carousel_page %}
+                
+                {% br_carousel_page %}
+                    {% br_carousel_page_content class="bg-violet-warm-10" %}
+                        Página 2
+                    {% end_br_carousel_page_content %}
+                {% end_br_carousel_page %}
+
+                {% br_carousel_page %}
+                    {% br_carousel_page_content class="bg-yellow-5" %}
+                        Página 3
+                    {% end_br_carousel_page_content %}
+                {% end_br_carousel_page %}
+
+                {% br_carousel_page %}
+                    {% br_carousel_page_content class="bg-green-cool-10" %}
+                        Página 4
+                    {% end_br_carousel_page_content %}
+                {% end_br_carousel_page %}
+
+                {% br_carousel_page %}
+                    {% br_carousel_page_content class="bg-orange-vivid-10" %}
+                        Página 5
+                    {% end_br_carousel_page_content %}
+                {% end_br_carousel_page %}
+            {% end_br_carousel_stage %}
+
+            {% br_carousel_step %}
+                {% br_step_button text="Exemplo de Rótulo 1" aria_posinset=1 aria_setsize=5 %}
+                {% br_step_button text="Exemplo de Rótulo 2" aria_posinset=2 aria_setsize=5 %}
+                {% br_step_button text="Exemplo de Rótulo 3" aria_posinset=3 aria_setsize=5 %}
+                {% br_step_button text="Exemplo de Rótulo 4" aria_posinset=4 aria_setsize=5 %}
+                {% br_step_button text="Exemplo de Rótulo 5" aria_posinset=5 aria_setsize=5 %}
+            {% end_br_carousel_step %}
+        {% end_br_carousel %}
+    {% end_br_carousel_row %}
 {% endblock %}