wagtail-enap-designsystem 1.2.1.204__py3-none-any.whl → 1.2.1.205__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- enap_designsystem/migrations/0475_alter_areaaluno_body_alter_cursoeadpage_curso_and_more.py +65052 -0
- enap_designsystem/migrations/0476_rotapage_capsulaordemrota.py +253 -0
- enap_designsystem/models.py +438 -195
- enap_designsystem/static/enap_designsystem/blocks/capsulas.css +3507 -52
- enap_designsystem/templates/admin/exportar_respostas.html +0 -9
- enap_designsystem/templates/enap_designsystem/blocks/formulario_snippet.html +0 -6
- enap_designsystem/templates/enap_designsystem/blocks/material_externo_block.html +211 -0
- enap_designsystem/templates/enap_designsystem/form_templates/form_report.html +0 -10
- enap_designsystem/templates/enap_designsystem/form_templates/submission_detail.html +0 -9
- enap_designsystem/templates/enap_designsystem/gerador_rotas_page.html +287 -0
- enap_designsystem/templates/enap_designsystem/pages/capsula_index_page.html +563 -464
- enap_designsystem/templates/enap_designsystem/rota_page.html +560 -0
- {wagtail_enap_designsystem-1.2.1.204.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.204.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/RECORD +17 -12
- {wagtail_enap_designsystem-1.2.1.204.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.204.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.204.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/top_level.txt +0 -0
|
@@ -4,8 +4,10 @@
|
|
|
4
4
|
|
|
5
5
|
{% block metadata %}
|
|
6
6
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<!--
|
|
8
|
-
<link rel="stylesheet" href="{% static 'enap_designsystem/css/capsulas-
|
|
7
|
+
<!-- Adicionando novo CSS com nomes de classes personalizados -->
|
|
8
|
+
<link rel="stylesheet" href="{% static 'enap_designsystem/css/acess-capsulas-custom.css' %}">
|
|
9
|
+
<!-- Adicionar fonte de ícones -->
|
|
10
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
9
11
|
{% endblock %}
|
|
10
12
|
|
|
11
13
|
{% block title %}
|
|
@@ -40,281 +42,274 @@
|
|
|
40
42
|
{% endblock %}
|
|
41
43
|
|
|
42
44
|
{% block content %}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
45
|
+
<!-- Seção Hero com Título Centralizado -->
|
|
46
|
+
<div class="acess-hero" role="banner">
|
|
47
|
+
<!-- Ícone de Acessibilidade -->
|
|
48
|
+
<svg class="acess-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
|
49
|
+
<!-- Círculo base -->
|
|
50
|
+
<circle cx="256" cy="256" r="220" fill="#F1F5F9" stroke="#0C326F" stroke-width="16"/>
|
|
51
|
+
|
|
52
|
+
<!-- Figura humana estilizada de acessibilidade -->
|
|
53
|
+
<g fill="#0C326F">
|
|
54
|
+
<!-- Cabeça -->
|
|
55
|
+
<circle cx="256" cy="120" r="48"/>
|
|
56
|
+
|
|
57
|
+
<!-- Corpo -->
|
|
58
|
+
<rect x="236" y="175" width="40" height="140" rx="20"/>
|
|
59
|
+
|
|
60
|
+
<!-- Braços abertos -->
|
|
61
|
+
<path d="M236 220 L130 180 A10 10 0 0 0 125 198 L240 245 Z"/>
|
|
62
|
+
<path d="M276 220 L382 180 A10 10 0 0 1 387 198 L272 245 Z"/>
|
|
63
|
+
|
|
64
|
+
<!-- Pernas -->
|
|
65
|
+
<path d="M236 315 L170 430 A10 10 0 0 0 195 440 L256 340 Z"/>
|
|
66
|
+
<path d="M276 315 L342 430 A10 10 0 0 1 317 440 L256 340 Z"/>
|
|
67
|
+
</g>
|
|
68
|
+
|
|
69
|
+
<!-- Círculos decorativos -->
|
|
70
|
+
<circle cx="120" cy="230" r="24" fill="#2670E8"/>
|
|
71
|
+
<circle cx="392" cy="230" r="24" fill="#2670E8"/>
|
|
72
|
+
<circle cx="256" cy="420" r="24" fill="#2670E8"/>
|
|
73
|
+
</svg>
|
|
74
|
+
|
|
75
|
+
<div class="acess-subtitle">GUIA INTERATIVO</div>
|
|
76
|
+
<h1 class="acess-title-large">Cápsulas de Acessibilidade</h1>
|
|
77
|
+
<p class="acess-description">Encontre o conteúdo específico que você precisa para tornar suas ações educacionais mais acessíveis.</p>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<!-- Container de Filtros com Dropdowns -->
|
|
81
|
+
<div class="acess-filter-container">
|
|
82
|
+
<!-- Filtros organizados em dropdowns -->
|
|
83
|
+
<div class="acess-filter-group">
|
|
84
|
+
<!-- Dropdown de Tipo de Deficiência -->
|
|
85
|
+
<div class="acess-dropdown">
|
|
86
|
+
<button type="button" class="acess-dropdown-btn" data-dropdown="acess-dropdown-def">
|
|
87
|
+
<span>Tipo de Deficiência</span>
|
|
88
|
+
<i class="fas fa-chevron-down"></i>
|
|
89
|
+
</button>
|
|
90
|
+
<div class="acess-dropdown-content" id="acess-dropdown-def">
|
|
91
|
+
<div class="acess-dropdown-inner">
|
|
92
|
+
<div class="acess-options">
|
|
93
|
+
{% for value, label in opcoes_filtros.tipos_deficiencia %}
|
|
94
|
+
<div class="acess-check-item">
|
|
95
|
+
<input type="checkbox"
|
|
96
|
+
name="tipo_deficiencia"
|
|
97
|
+
id="tipo_{{ value }}"
|
|
98
|
+
value="{{ value }}"
|
|
99
|
+
class="acess-checkbox"
|
|
100
|
+
data-filtro-tipo="tipo_deficiencia"
|
|
101
|
+
{% if value in filtros_ativos.tipo_deficiencia %}checked{% endif %}>
|
|
102
|
+
<label for="tipo_{{ value }}" class="acess-check-label">{{ label }}</label>
|
|
103
|
+
</div>
|
|
104
|
+
{% endfor %}
|
|
63
105
|
</div>
|
|
64
|
-
<button type="button" aria-expanded="true" id="toggle-filtros">
|
|
65
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
66
|
-
<path d="M18 15l-6-6-6 6"></path>
|
|
67
|
-
</svg>
|
|
68
|
-
</button>
|
|
69
106
|
</div>
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
{# FORMATO DE AÇÃO #}
|
|
93
|
-
<fieldset class="categoria-filtro">
|
|
94
|
-
<h3 class="categoria-titulo">Formato de Ação de Desenvolvimento</h3>
|
|
95
|
-
<div class="opcoes-filtro">
|
|
96
|
-
{% for value, label in opcoes_filtros.formatos_acao %}
|
|
97
|
-
<div class="checkbox-item">
|
|
98
|
-
<input type="checkbox"
|
|
99
|
-
name="formato_acao"
|
|
100
|
-
id="formato_{{ value }}"
|
|
101
|
-
value="{{ value }}"
|
|
102
|
-
class="filtro-checkbox"
|
|
103
|
-
data-filtro-tipo="formato_acao"
|
|
104
|
-
{% if value in filtros_ativos.formato_acao %}checked{% endif %}>
|
|
105
|
-
<label for="formato_{{ value }}" class="checkbox-label">{{ label }}</label>
|
|
106
|
-
</div>
|
|
107
|
-
{% endfor %}
|
|
108
|
-
</div>
|
|
109
|
-
</fieldset>
|
|
110
|
-
|
|
111
|
-
{# TIPO DE RECURSO #}
|
|
112
|
-
<fieldset class="categoria-filtro">
|
|
113
|
-
<h3 class="categoria-titulo">Tipo de Recurso</h3>
|
|
114
|
-
<div class="opcoes-filtro">
|
|
115
|
-
{% for value, label in opcoes_filtros.tipos_recurso %}
|
|
116
|
-
<div class="checkbox-item">
|
|
117
|
-
<input type="checkbox"
|
|
118
|
-
name="tipo_recurso"
|
|
119
|
-
id="recurso_{{ value }}"
|
|
120
|
-
value="{{ value }}"
|
|
121
|
-
class="filtro-checkbox"
|
|
122
|
-
data-filtro-tipo="tipo_recurso"
|
|
123
|
-
{% if value in filtros_ativos.tipo_recurso %}checked{% endif %}>
|
|
124
|
-
<label for="recurso_{{ value }}" class="checkbox-label">{{ label }}</label>
|
|
125
|
-
</div>
|
|
126
|
-
{% endfor %}
|
|
127
|
-
</div>
|
|
128
|
-
</fieldset>
|
|
129
|
-
|
|
130
|
-
{# PERFIL PROFISSIONAL #}
|
|
131
|
-
<fieldset class="categoria-filtro">
|
|
132
|
-
<h3 class="categoria-titulo">Perfil Profissional</h3>
|
|
133
|
-
<div class="opcoes-filtro">
|
|
134
|
-
{% for value, label in opcoes_filtros.perfis_profissionais %}
|
|
135
|
-
<div class="checkbox-item">
|
|
136
|
-
<input type="checkbox"
|
|
137
|
-
name="perfil_profissional"
|
|
138
|
-
id="perfil_{{ value }}"
|
|
139
|
-
value="{{ value }}"
|
|
140
|
-
class="filtro-checkbox"
|
|
141
|
-
data-filtro-tipo="perfil_profissional"
|
|
142
|
-
{% if value in filtros_ativos.perfil_profissional %}checked{% endif %}>
|
|
143
|
-
<label for="perfil_{{ value }}" class="checkbox-label">{{ label }}</label>
|
|
144
|
-
</div>
|
|
145
|
-
{% endfor %}
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<!-- Dropdown de Formato de Ação -->
|
|
111
|
+
<div class="acess-dropdown">
|
|
112
|
+
<button type="button" class="acess-dropdown-btn" data-dropdown="acess-dropdown-acao">
|
|
113
|
+
<span>Formato de Ação</span>
|
|
114
|
+
<i class="fas fa-chevron-down"></i>
|
|
115
|
+
</button>
|
|
116
|
+
<div class="acess-dropdown-content" id="acess-dropdown-acao">
|
|
117
|
+
<div class="acess-dropdown-inner">
|
|
118
|
+
<div class="acess-options">
|
|
119
|
+
{% for value, label in opcoes_filtros.formatos_acao %}
|
|
120
|
+
<div class="acess-check-item">
|
|
121
|
+
<input type="checkbox"
|
|
122
|
+
name="formato_acao"
|
|
123
|
+
id="formato_{{ value }}"
|
|
124
|
+
value="{{ value }}"
|
|
125
|
+
class="acess-checkbox"
|
|
126
|
+
data-filtro-tipo="formato_acao"
|
|
127
|
+
{% if value in filtros_ativos.formato_acao %}checked{% endif %}>
|
|
128
|
+
<label for="formato_{{ value }}" class="acess-check-label">{{ label }}</label>
|
|
146
129
|
</div>
|
|
147
|
-
|
|
148
|
-
</
|
|
130
|
+
{% endfor %}
|
|
131
|
+
</div>
|
|
149
132
|
</div>
|
|
150
133
|
</div>
|
|
151
|
-
</
|
|
134
|
+
</div>
|
|
152
135
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
136
|
+
<!-- Dropdown de Tipo de Recurso -->
|
|
137
|
+
<div class="acess-dropdown">
|
|
138
|
+
<button type="button" class="acess-dropdown-btn" data-dropdown="acess-dropdown-rec">
|
|
139
|
+
<span>Tipo de Recurso</span>
|
|
140
|
+
<i class="fas fa-chevron-down"></i>
|
|
141
|
+
</button>
|
|
142
|
+
<div class="acess-dropdown-content" id="acess-dropdown-rec">
|
|
143
|
+
<div class="acess-dropdown-inner">
|
|
144
|
+
<div class="acess-options">
|
|
145
|
+
{% for value, label in opcoes_filtros.tipos_recurso %}
|
|
146
|
+
<div class="acess-check-item">
|
|
147
|
+
<input type="checkbox"
|
|
148
|
+
name="tipo_recurso"
|
|
149
|
+
id="recurso_{{ value }}"
|
|
150
|
+
value="{{ value }}"
|
|
151
|
+
class="acess-checkbox"
|
|
152
|
+
data-filtro-tipo="tipo_recurso"
|
|
153
|
+
{% if value in filtros_ativos.tipo_recurso %}checked{% endif %}>
|
|
154
|
+
<label for="recurso_{{ value }}" class="acess-check-label">{{ label }}</label>
|
|
155
|
+
</div>
|
|
156
|
+
{% endfor %}
|
|
157
|
+
</div>
|
|
161
158
|
</div>
|
|
162
|
-
|
|
163
|
-
<button type="button" class="limpar-todos" id="limpar-todos-btn" style="display: none;">
|
|
164
|
-
Limpar todos
|
|
165
|
-
</button>
|
|
166
159
|
</div>
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<!-- Dropdown de Perfil Profissional -->
|
|
163
|
+
<div class="acess-dropdown">
|
|
164
|
+
<button type="button" class="acess-dropdown-btn" data-dropdown="acess-dropdown-perf">
|
|
165
|
+
<span>Perfil Profissional</span>
|
|
166
|
+
<i class="fas fa-chevron-down"></i>
|
|
167
|
+
</button>
|
|
168
|
+
<div class="acess-dropdown-content" id="acess-dropdown-perf">
|
|
169
|
+
<div class="acess-dropdown-inner">
|
|
170
|
+
<div class="acess-options">
|
|
171
|
+
{% for value, label in opcoes_filtros.perfis_profissionais %}
|
|
172
|
+
<div class="acess-check-item">
|
|
173
|
+
<input type="checkbox"
|
|
174
|
+
name="perfil_profissional"
|
|
175
|
+
id="perfil_{{ value }}"
|
|
176
|
+
value="{{ value }}"
|
|
177
|
+
class="acess-checkbox"
|
|
178
|
+
data-filtro-tipo="perfil_profissional"
|
|
179
|
+
{% if value in filtros_ativos.perfil_profissional %}checked{% endif %}>
|
|
180
|
+
<label for="perfil_{{ value }}" class="acess-check-label">{{ label }}</label>
|
|
181
|
+
</div>
|
|
182
|
+
{% endfor %}
|
|
183
|
+
</div>
|
|
171
184
|
</div>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
<!-- Container de Conteúdo Principal -->
|
|
191
|
+
<div class="acess-content">
|
|
192
|
+
<!-- Seção de filtros ativos -->
|
|
193
|
+
<div class="acess-active-filters-wrap" style="display: none;" id="acess-active-filters-wrap">
|
|
194
|
+
<div class="acess-active-filters" id="acess-active-filters">
|
|
195
|
+
<!-- Aqui entram as tags de filtros ativos via JavaScript -->
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<button type="button" class="acess-clear-all" id="acess-clear-all-btn">
|
|
199
|
+
Limpar todos os filtros
|
|
200
|
+
</button>
|
|
201
|
+
</div>
|
|
202
|
+
|
|
203
|
+
<!-- Cabeçalho de resultados -->
|
|
204
|
+
<div class="acess-results-header">
|
|
205
|
+
<div class="acess-results-count" id="acess-results-count">
|
|
206
|
+
{{ total_resultados }} cápsulas encontradas
|
|
207
|
+
</div>
|
|
208
|
+
|
|
209
|
+
<div class="acess-sort-dropdown">
|
|
210
|
+
|
|
211
|
+
</div>
|
|
212
|
+
</div>
|
|
213
|
+
|
|
214
|
+
<!-- Grid de cápsulas -->
|
|
215
|
+
<div class="acess-grid" id="acess-results-grid">
|
|
216
|
+
{% for capsula in capsulas %}
|
|
217
|
+
<a href="{% pageurl capsula %}" class="acess-capsula-link">
|
|
218
|
+
<div class="acess-capsula-card"
|
|
219
|
+
data-tipo-deficiencia="{{ capsula.tipos_deficiencia|join:' ' }}"
|
|
220
|
+
data-formato-acao="{{ capsula.formatos_acao|join:' ' }}"
|
|
221
|
+
data-tipo-recurso="{{ capsula.tipos_recurso|join:' ' }}"
|
|
222
|
+
data-perfil-profissional="{{ capsula.perfis_profissionais|join:' ' }}"
|
|
223
|
+
data-prioridade="{{ capsula.prioridade }}">
|
|
172
224
|
|
|
173
|
-
<div class="
|
|
174
|
-
<
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
<path d="M6 9l6 6 6-6"></path>
|
|
225
|
+
<div class="acess-capsula-content">
|
|
226
|
+
<div class="acess-capsula-icon">
|
|
227
|
+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
228
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
|
178
229
|
</svg>
|
|
179
|
-
</
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
<h2 class="acess-capsula-titulo">
|
|
233
|
+
{{ capsula.title }}
|
|
234
|
+
</h2>
|
|
235
|
+
<p class="acess-capsula-descricao">
|
|
236
|
+
{{ capsula.resumo_card|default:"Aprenda sobre este importante aspecto da acessibilidade digital." }}
|
|
237
|
+
</p>
|
|
180
238
|
</div>
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
data-tipo-recurso="{{ capsula.tipos_recurso|join:' ' }}"
|
|
190
|
-
data-perfil-profissional="{{ capsula.perfis_profissionais|join:' ' }}"
|
|
191
|
-
data-prioridade="{{ capsula.prioridade }}">
|
|
192
|
-
<div class="capsula-conteudo">
|
|
193
|
-
<div class="capsula-icone">
|
|
194
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
195
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
|
196
|
-
</svg>
|
|
239
|
+
<!-- Tipos de deficiência como tags coloridas -->
|
|
240
|
+
{% if capsula.tipos_deficiencia %}
|
|
241
|
+
<div class="acess-capsula-tags">
|
|
242
|
+
{% for tipo_value, tipo_label in opcoes_filtros.tipos_deficiencia %}
|
|
243
|
+
{% if tipo_value in capsula.tipos_deficiencia %}
|
|
244
|
+
<div class="acess-tag {{ tipo_value }}">
|
|
245
|
+
<div class="acess-tag-dot"></div>
|
|
246
|
+
{{ tipo_label }}
|
|
197
247
|
</div>
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
<
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
{% elif recurso_value == 'grafico' %}
|
|
242
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
243
|
-
<line x1="18" y1="20" x2="18" y2="10"></line>
|
|
244
|
-
<line x1="12" y1="20" x2="12" y2="4"></line>
|
|
245
|
-
<line x1="6" y1="20" x2="6" y2="14"></line>
|
|
246
|
-
</svg>
|
|
247
|
-
{% elif recurso_value == 'tabela' %}
|
|
248
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
249
|
-
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
250
|
-
<line x1="3" y1="9" x2="21" y2="9"></line>
|
|
251
|
-
<line x1="3" y1="15" x2="21" y2="15"></line>
|
|
252
|
-
<line x1="9" y1="3" x2="9" y2="21"></line>
|
|
253
|
-
<line x1="15" y1="3" x2="15" y2="21"></line>
|
|
254
|
-
</svg>
|
|
255
|
-
{% else %}
|
|
256
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
257
|
-
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
|
|
258
|
-
<path d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"></path>
|
|
259
|
-
</svg>
|
|
260
|
-
{% endif %}
|
|
261
|
-
{{ recurso_label }}
|
|
262
|
-
</div>
|
|
263
|
-
{% endif %}
|
|
264
|
-
{% endfor %}
|
|
265
|
-
</div>
|
|
266
|
-
{% endif %}
|
|
267
|
-
|
|
268
|
-
<div class="btn large primary">
|
|
269
|
-
Acessar Cápsula
|
|
248
|
+
{% endif %}
|
|
249
|
+
{% endfor %}
|
|
250
|
+
</div>
|
|
251
|
+
{% endif %}
|
|
252
|
+
|
|
253
|
+
<!-- Tipos de recursos como chips -->
|
|
254
|
+
{% if capsula.tipos_recurso %}
|
|
255
|
+
<div class="acess-capsula-recursos">
|
|
256
|
+
{% for recurso_value, recurso_label in opcoes_filtros.tipos_recurso %}
|
|
257
|
+
{% if recurso_value in capsula.tipos_recurso %}
|
|
258
|
+
<div class="acess-recurso-tag">
|
|
259
|
+
{% if recurso_value == 'imagem' %}
|
|
260
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
261
|
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
262
|
+
<circle cx="8.5" cy="8.5" r="1.5"></circle>
|
|
263
|
+
<polyline points="21 15 16 10 5 21"></polyline>
|
|
264
|
+
</svg>
|
|
265
|
+
{% elif recurso_value == 'video' %}
|
|
266
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
267
|
+
<polygon points="23 7 16 12 23 17 23 7"></polygon>
|
|
268
|
+
<rect x="1" y="5" width="15" height="14" rx="2" ry="2"></rect>
|
|
269
|
+
</svg>
|
|
270
|
+
{% elif recurso_value == 'grafico' %}
|
|
271
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
272
|
+
<line x1="18" y1="20" x2="18" y2="10"></line>
|
|
273
|
+
<line x1="12" y1="20" x2="12" y2="4"></line>
|
|
274
|
+
<line x1="6" y1="20" x2="6" y2="14"></line>
|
|
275
|
+
</svg>
|
|
276
|
+
{% elif recurso_value == 'tabela' %}
|
|
277
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
278
|
+
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
279
|
+
<line x1="3" y1="9" x2="21" y2="9"></line>
|
|
280
|
+
<line x1="3" y1="15" x2="21" y2="15"></line>
|
|
281
|
+
<line x1="9" y1="3" x2="9" y2="21"></line>
|
|
282
|
+
<line x1="15" y1="3" x2="15" y2="21"></line>
|
|
283
|
+
</svg>
|
|
284
|
+
{% else %}
|
|
285
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
286
|
+
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
|
|
287
|
+
<polyline points="13 2 13 9 20 9"></polyline>
|
|
288
|
+
</svg>
|
|
289
|
+
{% endif %}
|
|
290
|
+
{{ recurso_label }}
|
|
270
291
|
</div>
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
</
|
|
274
|
-
{%
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
<div id="mensagem-vazia" class="conteudo-vazio" style="display: none;">
|
|
279
|
-
<svg class="conteudo-vazio-icone" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
280
|
-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
281
|
-
</svg>
|
|
282
|
-
<h2>Nenhuma cápsula encontrada</h2>
|
|
283
|
-
<p>Tente ajustar os filtros ou <a href="javascript:void(0)" onclick="limparTodosFiltros()">limpe os filtros</a> para ver todas as cápsulas.</p>
|
|
292
|
+
{% endif %}
|
|
293
|
+
{% endfor %}
|
|
294
|
+
</div>
|
|
295
|
+
{% endif %}
|
|
296
|
+
<div class="btn primary large">
|
|
297
|
+
Acessar Cápsula
|
|
298
|
+
</div>
|
|
284
299
|
</div>
|
|
285
|
-
</
|
|
300
|
+
</a>
|
|
301
|
+
{% endfor %}
|
|
286
302
|
</div>
|
|
303
|
+
|
|
304
|
+
<!-- Mensagem para nenhum resultado -->
|
|
305
|
+
<div id="acess-empty-message" class="acess-empty" style="display: none;">
|
|
306
|
+
<svg class="acess-empty-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
|
307
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
308
|
+
</svg>
|
|
309
|
+
<h2>Nenhuma cápsula encontrada</h2>
|
|
310
|
+
<p>Tente ajustar os filtros ou <a href="javascript:void(0)" id="acess-clear-filters-link">limpe os filtros</a> para ver todas as cápsulas.</p>
|
|
287
311
|
</div>
|
|
288
312
|
</div>
|
|
289
|
-
|
|
290
|
-
<style>
|
|
291
|
-
/* Estilo do esqueleto para efeito de loading */
|
|
292
|
-
.skeleton-card {
|
|
293
|
-
background: #e0e0e0;
|
|
294
|
-
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
295
|
-
min-width: 268px;
|
|
296
|
-
min-height: 450px;
|
|
297
|
-
border-radius: 20px;
|
|
298
|
-
box-shadow: inset 0 0 0 1px #DEE3ED;
|
|
299
|
-
margin-top: 20px;
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
.skeleton-card:nth-child(odd) {
|
|
303
|
-
animation-delay: 0.5s;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
@keyframes skeleton-loading {
|
|
307
|
-
0% {
|
|
308
|
-
background-color: #e0e0e0;
|
|
309
|
-
}
|
|
310
|
-
50% {
|
|
311
|
-
background-color: #f0f0f0;
|
|
312
|
-
}
|
|
313
|
-
100% {
|
|
314
|
-
background-color: #e0e0e0;
|
|
315
|
-
}
|
|
316
|
-
}
|
|
317
|
-
</style>
|
|
318
313
|
{% endblock %}
|
|
319
314
|
|
|
320
315
|
{% block footer %}
|
|
@@ -323,244 +318,348 @@
|
|
|
323
318
|
|
|
324
319
|
{% block scriptinline %}
|
|
325
320
|
<script>
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
321
|
+
document.addEventListener('DOMContentLoaded', function() {
|
|
322
|
+
// Mapeamento de filtros
|
|
323
|
+
const filtroLabels = {
|
|
324
|
+
{% for tipo, opcoes in opcoes_filtros.items %}
|
|
325
|
+
'{{ tipo }}': {
|
|
326
|
+
{% for value, label in opcoes %}
|
|
327
|
+
'{{ value }}': '{{ label }}',
|
|
328
|
+
{% endfor %}
|
|
329
|
+
},
|
|
330
|
+
{% endfor %}
|
|
331
|
+
};
|
|
332
|
+
|
|
333
|
+
// Cache de elementos DOM
|
|
334
|
+
const dropdownBtns = document.querySelectorAll('.acess-dropdown-btn');
|
|
335
|
+
const dropdownContents = document.querySelectorAll('.acess-dropdown-content');
|
|
336
|
+
const checkboxes = document.querySelectorAll('.acess-checkbox');
|
|
337
|
+
const capsulaCards = document.querySelectorAll('.acess-capsula-card');
|
|
338
|
+
const contagemResultados = document.getElementById('acess-results-count');
|
|
339
|
+
const mensagemVazia = document.getElementById('acess-empty-message');
|
|
340
|
+
const filtrosAtivosContainer = document.getElementById('acess-active-filters');
|
|
341
|
+
const filtrosAtivosWrapper = document.getElementById('acess-active-filters-wrap');
|
|
342
|
+
const limparTodosBtn = document.getElementById('acess-clear-all-btn');
|
|
343
|
+
const limparFiltrosLink = document.getElementById('acess-clear-filters-link');
|
|
344
|
+
|
|
345
|
+
// Configurar dropdowns
|
|
346
|
+
dropdownBtns.forEach(btn => {
|
|
347
|
+
btn.addEventListener('click', function(e) {
|
|
348
|
+
e.stopPropagation();
|
|
349
|
+
|
|
350
|
+
const dropdownId = this.getAttribute('data-dropdown');
|
|
351
|
+
const dropdownEl = document.getElementById(dropdownId);
|
|
352
|
+
|
|
353
|
+
// Fechar outros dropdowns
|
|
354
|
+
dropdownContents.forEach(dropdown => {
|
|
355
|
+
if (dropdown.id !== dropdownId) {
|
|
356
|
+
dropdown.style.display = 'none';
|
|
357
|
+
|
|
358
|
+
// Reset icon for other buttons
|
|
359
|
+
const otherBtn = document.querySelector(`[data-dropdown="${dropdown.id}"]`);
|
|
360
|
+
if (otherBtn) {
|
|
361
|
+
const otherIcon = otherBtn.querySelector('i');
|
|
362
|
+
if (otherIcon) {
|
|
363
|
+
otherIcon.className = 'fas fa-chevron-down';
|
|
364
|
+
}
|
|
365
|
+
}
|
|
366
|
+
}
|
|
367
|
+
});
|
|
368
|
+
|
|
369
|
+
// Toggle this dropdown
|
|
370
|
+
if (dropdownEl) {
|
|
371
|
+
if (dropdownEl.style.display === 'block') {
|
|
372
|
+
dropdownEl.style.display = 'none';
|
|
373
|
+
const icon = this.querySelector('i');
|
|
374
|
+
if (icon) {
|
|
375
|
+
icon.className = 'fas fa-chevron-down';
|
|
376
|
+
}
|
|
377
|
+
} else {
|
|
378
|
+
dropdownEl.style.display = 'block';
|
|
379
|
+
const icon = this.querySelector('i');
|
|
380
|
+
if (icon) {
|
|
381
|
+
icon.className = 'fas fa-chevron-up';
|
|
382
|
+
}
|
|
383
|
+
}
|
|
384
|
+
}
|
|
385
|
+
});
|
|
386
|
+
});
|
|
387
|
+
|
|
388
|
+
// Fechar dropdowns ao clicar fora
|
|
389
|
+
document.addEventListener('click', function() {
|
|
390
|
+
dropdownContents.forEach(dropdown => {
|
|
391
|
+
dropdown.style.display = 'none';
|
|
392
|
+
});
|
|
334
393
|
|
|
335
|
-
//
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
394
|
+
// Reset all icons
|
|
395
|
+
dropdownBtns.forEach(btn => {
|
|
396
|
+
const icon = btn.querySelector('i');
|
|
397
|
+
if (icon) {
|
|
398
|
+
icon.className = 'fas fa-chevron-down';
|
|
399
|
+
}
|
|
400
|
+
});
|
|
401
|
+
});
|
|
402
|
+
|
|
403
|
+
// Evitar propagação de cliques dentro dos dropdowns
|
|
404
|
+
dropdownContents.forEach(dropdown => {
|
|
405
|
+
dropdown.addEventListener('click', function(e) {
|
|
406
|
+
e.stopPropagation();
|
|
407
|
+
});
|
|
408
|
+
});
|
|
409
|
+
|
|
410
|
+
// Adicionar eventos aos checkboxes
|
|
411
|
+
checkboxes.forEach(checkbox => {
|
|
412
|
+
checkbox.addEventListener('change', function() {
|
|
413
|
+
aplicarFiltros();
|
|
414
|
+
atualizarFiltrosAtivos();
|
|
415
|
+
atualizarURL();
|
|
416
|
+
});
|
|
417
|
+
});
|
|
418
|
+
|
|
419
|
+
// Evento para limpar todos os filtros
|
|
420
|
+
if (limparTodosBtn) {
|
|
421
|
+
limparTodosBtn.addEventListener('click', limparTodosFiltros);
|
|
422
|
+
}
|
|
423
|
+
|
|
424
|
+
if (limparFiltrosLink) {
|
|
425
|
+
limparFiltrosLink.addEventListener('click', limparTodosFiltros);
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
// Aplicar filtros
|
|
429
|
+
function aplicarFiltros() {
|
|
430
|
+
// Coletar filtros ativos
|
|
431
|
+
const filtrosAtivos = {
|
|
432
|
+
tipo_deficiencia: [],
|
|
433
|
+
formato_acao: [],
|
|
434
|
+
tipo_recurso: [],
|
|
435
|
+
perfil_profissional: []
|
|
344
436
|
};
|
|
345
437
|
|
|
346
|
-
//
|
|
347
|
-
aplicarFiltros();
|
|
348
|
-
atualizarFiltrosAtivos();
|
|
349
|
-
|
|
350
|
-
// Adicionar eventos de mudança para todos os checkboxes
|
|
438
|
+
// Coletar valores dos checkboxes marcados
|
|
351
439
|
checkboxes.forEach(checkbox => {
|
|
352
|
-
checkbox.
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
440
|
+
if (checkbox.checked) {
|
|
441
|
+
const tipoFiltro = checkbox.getAttribute('data-filtro-tipo');
|
|
442
|
+
if (filtrosAtivos[tipoFiltro]) {
|
|
443
|
+
filtrosAtivos[tipoFiltro].push(checkbox.value);
|
|
444
|
+
}
|
|
445
|
+
}
|
|
357
446
|
});
|
|
358
447
|
|
|
359
|
-
//
|
|
360
|
-
|
|
361
|
-
limparTodosBtn.addEventListener('click', function(e) {
|
|
362
|
-
e.preventDefault();
|
|
363
|
-
limparTodosFiltros();
|
|
364
|
-
});
|
|
365
|
-
}
|
|
448
|
+
// Atualizar contadores nos botões de dropdown
|
|
449
|
+
atualizarContadoresDropdown(filtrosAtivos);
|
|
366
450
|
|
|
367
|
-
//
|
|
368
|
-
|
|
369
|
-
if (toggleBtn) {
|
|
370
|
-
toggleBtn.addEventListener('click', function() {
|
|
371
|
-
const container = document.getElementById('filtros-container');
|
|
372
|
-
const button = this;
|
|
373
|
-
|
|
374
|
-
if (button.getAttribute('aria-expanded') === 'true') {
|
|
375
|
-
button.setAttribute('aria-expanded', 'false');
|
|
376
|
-
button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"></path></svg>';
|
|
377
|
-
container.style.display = 'none';
|
|
378
|
-
} else {
|
|
379
|
-
button.setAttribute('aria-expanded', 'true');
|
|
380
|
-
button.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15l-6-6-6 6"></path></svg>';
|
|
381
|
-
container.style.display = 'block';
|
|
382
|
-
}
|
|
383
|
-
});
|
|
384
|
-
}
|
|
451
|
+
// Contar cápsulas visíveis
|
|
452
|
+
let capsulasFiltradas = 0;
|
|
385
453
|
|
|
386
|
-
//
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
const filtrosAtivos = {
|
|
390
|
-
tipo_deficiencia: [],
|
|
391
|
-
formato_acao: [],
|
|
392
|
-
tipo_recurso: [],
|
|
393
|
-
perfil_profissional: [],
|
|
394
|
-
prioridade: null
|
|
395
|
-
};
|
|
454
|
+
// Aplicar filtros aos cards
|
|
455
|
+
capsulaCards.forEach(card => {
|
|
456
|
+
let mostrar = true;
|
|
396
457
|
|
|
397
|
-
//
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
filtrosAtivos[tipoFiltro].push(checkbox.value);
|
|
403
|
-
}
|
|
458
|
+
// Verificar cada tipo de filtro
|
|
459
|
+
if (filtrosAtivos.tipo_deficiencia.length > 0) {
|
|
460
|
+
const tiposDeficiencia = (card.getAttribute('data-tipo-deficiencia') || '').split(' ').filter(t => t);
|
|
461
|
+
if (!filtrosAtivos.tipo_deficiencia.some(tipo => tiposDeficiencia.includes(tipo))) {
|
|
462
|
+
mostrar = false;
|
|
404
463
|
}
|
|
405
|
-
}
|
|
406
|
-
|
|
407
|
-
// Contar cápsulas visíveis para atualizar o contador
|
|
408
|
-
let capsulasFiltradas = 0;
|
|
464
|
+
}
|
|
409
465
|
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
// Verificar cada tipo de filtro
|
|
415
|
-
if (filtrosAtivos.tipo_deficiencia.length > 0) {
|
|
416
|
-
const tiposDeficiencia = (card.getAttribute('data-tipo-deficiencia') || '').split(' ').filter(t => t);
|
|
417
|
-
if (!filtrosAtivos.tipo_deficiencia.some(tipo => tiposDeficiencia.includes(tipo))) {
|
|
418
|
-
mostrar = false;
|
|
419
|
-
}
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
if (mostrar && filtrosAtivos.formato_acao.length > 0) {
|
|
423
|
-
const formatosAcao = (card.getAttribute('data-formato-acao') || '').split(' ').filter(t => t);
|
|
424
|
-
if (!filtrosAtivos.formato_acao.some(formato => formatosAcao.includes(formato))) {
|
|
425
|
-
mostrar = false;
|
|
426
|
-
}
|
|
427
|
-
}
|
|
428
|
-
|
|
429
|
-
if (mostrar && filtrosAtivos.tipo_recurso.length > 0) {
|
|
430
|
-
const tiposRecurso = (card.getAttribute('data-tipo-recurso') || '').split(' ').filter(t => t);
|
|
431
|
-
if (!filtrosAtivos.tipo_recurso.some(recurso => tiposRecurso.includes(recurso))) {
|
|
432
|
-
mostrar = false;
|
|
433
|
-
}
|
|
466
|
+
if (mostrar && filtrosAtivos.formato_acao.length > 0) {
|
|
467
|
+
const formatosAcao = (card.getAttribute('data-formato-acao') || '').split(' ').filter(t => t);
|
|
468
|
+
if (!filtrosAtivos.formato_acao.some(formato => formatosAcao.includes(formato))) {
|
|
469
|
+
mostrar = false;
|
|
434
470
|
}
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
if (mostrar && filtrosAtivos.tipo_recurso.length > 0) {
|
|
474
|
+
const tiposRecurso = (card.getAttribute('data-tipo-recurso') || '').split(' ').filter(t => t);
|
|
475
|
+
if (!filtrosAtivos.tipo_recurso.some(recurso => tiposRecurso.includes(recurso))) {
|
|
476
|
+
mostrar = false;
|
|
441
477
|
}
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
478
|
+
}
|
|
479
|
+
|
|
480
|
+
if (mostrar && filtrosAtivos.perfil_profissional.length > 0) {
|
|
481
|
+
const perfis = (card.getAttribute('data-perfil-profissional') || '').split(' ').filter(t => t);
|
|
482
|
+
if (!filtrosAtivos.perfil_profissional.some(perfil => perfis.includes(perfil))) {
|
|
483
|
+
mostrar = false;
|
|
448
484
|
}
|
|
449
|
-
|
|
450
|
-
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
// Aplicar visibilidade ao card
|
|
488
|
+
const parent = card.closest('.acess-capsula-link');
|
|
489
|
+
if (parent) {
|
|
490
|
+
parent.style.display = mostrar ? 'block' : 'none';
|
|
451
491
|
if (mostrar) {
|
|
452
|
-
card.style.display = 'block';
|
|
453
492
|
capsulasFiltradas++;
|
|
454
|
-
} else {
|
|
455
|
-
card.style.display = 'none';
|
|
456
493
|
}
|
|
457
|
-
});
|
|
458
|
-
|
|
459
|
-
// Atualizar contador de resultados
|
|
460
|
-
if (contagemResultados) {
|
|
461
|
-
contagemResultados.textContent = capsulasFiltradas + ' cápsulas encontradas';
|
|
462
|
-
}
|
|
463
|
-
|
|
464
|
-
// Mostrar mensagem de "nenhum resultado" se necessário
|
|
465
|
-
if (mensagemVazia) {
|
|
466
|
-
mensagemVazia.style.display = capsulasFiltradas === 0 ? 'block' : 'none';
|
|
467
494
|
}
|
|
495
|
+
});
|
|
496
|
+
|
|
497
|
+
// Atualizar contador de resultados
|
|
498
|
+
if (contagemResultados) {
|
|
499
|
+
contagemResultados.textContent = capsulasFiltradas + ' cápsulas encontradas';
|
|
468
500
|
}
|
|
469
501
|
|
|
470
|
-
//
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
502
|
+
// Mostrar mensagem de "nenhum resultado" se necessário
|
|
503
|
+
if (mensagemVazia) {
|
|
504
|
+
mensagemVazia.style.display = capsulasFiltradas === 0 ? 'block' : 'none';
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
// Atualizar contadores nos botões de dropdown
|
|
509
|
+
function atualizarContadoresDropdown(filtrosAtivos) {
|
|
510
|
+
// Para cada tipo de filtro, verificar quantos estão ativos
|
|
511
|
+
const contadores = {
|
|
512
|
+
'acess-dropdown-def': filtrosAtivos.tipo_deficiencia.length,
|
|
513
|
+
'acess-dropdown-acao': filtrosAtivos.formato_acao.length,
|
|
514
|
+
'acess-dropdown-rec': filtrosAtivos.tipo_recurso.length,
|
|
515
|
+
'acess-dropdown-perf': filtrosAtivos.perfil_profissional.length
|
|
516
|
+
};
|
|
517
|
+
|
|
518
|
+
// Atualizar cada botão de dropdown
|
|
519
|
+
Object.keys(contadores).forEach(dropdownId => {
|
|
520
|
+
const count = contadores[dropdownId];
|
|
521
|
+
const btn = document.querySelector(`[data-dropdown="${dropdownId}"]`);
|
|
522
|
+
if (btn) {
|
|
523
|
+
// Remover contador existente
|
|
524
|
+
const contadorExistente = btn.querySelector('.acess-counter');
|
|
525
|
+
if (contadorExistente) {
|
|
526
|
+
contadorExistente.remove();
|
|
527
|
+
}
|
|
480
528
|
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
? filtroLabels[tipoFiltro][checkbox.value]
|
|
487
|
-
: checkbox.value;
|
|
529
|
+
// Adicionar novo contador se necessário
|
|
530
|
+
if (count > 0) {
|
|
531
|
+
const contador = document.createElement('span');
|
|
532
|
+
contador.className = 'acess-counter';
|
|
533
|
+
contador.textContent = count;
|
|
488
534
|
|
|
489
|
-
//
|
|
490
|
-
const
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
496
|
-
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
497
|
-
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
498
|
-
</svg>
|
|
499
|
-
</button>
|
|
500
|
-
`;
|
|
501
|
-
|
|
502
|
-
// Adicionar ao container
|
|
503
|
-
filtrosAtivosContainer.appendChild(tagFiltro);
|
|
504
|
-
});
|
|
505
|
-
});
|
|
506
|
-
|
|
507
|
-
// Adicionar eventos aos botões de remover filtro
|
|
508
|
-
document.querySelectorAll('.remover-filtro-btn').forEach(btn => {
|
|
509
|
-
btn.addEventListener('click', function(e) {
|
|
510
|
-
e.preventDefault();
|
|
511
|
-
const tipo = this.getAttribute('data-tipo');
|
|
512
|
-
const valor = this.getAttribute('data-valor');
|
|
513
|
-
removerFiltro(tipo, valor);
|
|
514
|
-
});
|
|
515
|
-
});
|
|
516
|
-
|
|
517
|
-
// Mostrar ou ocultar botão "Limpar todos"
|
|
518
|
-
if (limparTodosBtn) {
|
|
519
|
-
limparTodosBtn.style.display = temFiltrosAtivos ? 'inline-block' : 'none';
|
|
535
|
+
// Inserir após o texto e antes do ícone
|
|
536
|
+
const spanText = btn.querySelector('span');
|
|
537
|
+
if (spanText) {
|
|
538
|
+
btn.insertBefore(contador, spanText.nextSibling);
|
|
539
|
+
}
|
|
540
|
+
}
|
|
520
541
|
}
|
|
521
|
-
}
|
|
542
|
+
});
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
// Atualizar a exibição de filtros ativos
|
|
546
|
+
function atualizarFiltrosAtivos() {
|
|
547
|
+
if (!filtrosAtivosContainer) return;
|
|
548
|
+
|
|
549
|
+
// Limpar container
|
|
550
|
+
filtrosAtivosContainer.innerHTML = '';
|
|
551
|
+
|
|
552
|
+
let temFiltrosAtivos = false;
|
|
522
553
|
|
|
523
|
-
//
|
|
524
|
-
|
|
525
|
-
const
|
|
554
|
+
// Para cada tipo de filtro, adicionar tags para os valores ativos
|
|
555
|
+
['tipo_deficiencia', 'formato_acao', 'tipo_recurso', 'perfil_profissional'].forEach(tipoFiltro => {
|
|
556
|
+
const checkboxesTipo = document.querySelectorAll(`.acess-checkbox[data-filtro-tipo="${tipoFiltro}"]:checked`);
|
|
526
557
|
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
558
|
+
checkboxesTipo.forEach(checkbox => {
|
|
559
|
+
temFiltrosAtivos = true;
|
|
560
|
+
|
|
561
|
+
// Obter o tipo normalizado para o mapeamento de rótulos
|
|
562
|
+
const tipoNormalizado = tipoFiltro.replace('_', 's_');
|
|
563
|
+
|
|
564
|
+
// Verificar se o label existe
|
|
565
|
+
const valorCheckbox = checkbox.value;
|
|
566
|
+
const labelTexto = filtroLabels[tipoNormalizado] && filtroLabels[tipoNormalizado][valorCheckbox]
|
|
567
|
+
? filtroLabels[tipoNormalizado][valorCheckbox]
|
|
568
|
+
: valorCheckbox;
|
|
569
|
+
|
|
570
|
+
// Criar tag de filtro
|
|
571
|
+
const tagFiltro = document.createElement('div');
|
|
572
|
+
tagFiltro.className = 'acess-filter-tag';
|
|
573
|
+
tagFiltro.innerHTML = `
|
|
574
|
+
${labelTexto}
|
|
575
|
+
<button type="button" class="acess-remove-btn" data-tipo="${tipoFiltro}" data-valor="${valorCheckbox}">
|
|
576
|
+
<i class="fas fa-times"></i>
|
|
577
|
+
</button>
|
|
578
|
+
`;
|
|
579
|
+
|
|
580
|
+
// Adicionar ao container
|
|
581
|
+
filtrosAtivosContainer.appendChild(tagFiltro);
|
|
532
582
|
});
|
|
533
|
-
|
|
534
|
-
// Atualizar URL sem recarregar a página
|
|
535
|
-
const newUrl = window.location.pathname + (urlParams.toString() ? '?' + urlParams.toString() : '');
|
|
536
|
-
history.pushState(null, '', newUrl);
|
|
537
|
-
}
|
|
583
|
+
});
|
|
538
584
|
|
|
539
|
-
//
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
if (checkbox) {
|
|
543
|
-
checkbox.checked = false;
|
|
544
|
-
aplicarFiltros();
|
|
545
|
-
atualizarFiltrosAtivos();
|
|
546
|
-
atualizarURL();
|
|
547
|
-
}
|
|
585
|
+
// Mostrar ou ocultar o wrapper de filtros ativos
|
|
586
|
+
if (filtrosAtivosWrapper) {
|
|
587
|
+
filtrosAtivosWrapper.style.display = temFiltrosAtivos ? 'flex' : 'none';
|
|
548
588
|
}
|
|
549
589
|
|
|
550
|
-
//
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
590
|
+
// Adicionar eventos aos botões de remover
|
|
591
|
+
document.querySelectorAll('.acess-remove-btn').forEach(btn => {
|
|
592
|
+
btn.addEventListener('click', function() {
|
|
593
|
+
const tipo = this.getAttribute('data-tipo');
|
|
594
|
+
const valor = this.getAttribute('data-valor');
|
|
595
|
+
removerFiltro(tipo, valor);
|
|
554
596
|
});
|
|
555
|
-
|
|
597
|
+
});
|
|
598
|
+
}
|
|
599
|
+
|
|
600
|
+
// Atualizar URL com os filtros selecionados
|
|
601
|
+
function atualizarURL() {
|
|
602
|
+
const urlParams = new URLSearchParams();
|
|
603
|
+
|
|
604
|
+
// Coletar todos os filtros ativos
|
|
605
|
+
checkboxes.forEach(checkbox => {
|
|
606
|
+
if (checkbox.checked) {
|
|
607
|
+
urlParams.append(checkbox.getAttribute('data-filtro-tipo'), checkbox.value);
|
|
608
|
+
}
|
|
609
|
+
});
|
|
610
|
+
|
|
611
|
+
// Atualizar URL sem recarregar a página
|
|
612
|
+
const newUrl = window.location.pathname + (urlParams.toString() ? '?' + urlParams.toString() : '');
|
|
613
|
+
history.pushState(null, '', newUrl);
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
// Função para remover um filtro específico
|
|
617
|
+
function removerFiltro(tipo, valor) {
|
|
618
|
+
const checkbox = document.querySelector(`input[data-filtro-tipo="${tipo}"][value="${valor}"]`);
|
|
619
|
+
if (checkbox) {
|
|
620
|
+
checkbox.checked = false;
|
|
556
621
|
aplicarFiltros();
|
|
557
622
|
atualizarFiltrosAtivos();
|
|
558
623
|
atualizarURL();
|
|
559
624
|
}
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
// Função para limpar todos os filtros
|
|
628
|
+
function limparTodosFiltros() {
|
|
629
|
+
checkboxes.forEach(checkbox => {
|
|
630
|
+
checkbox.checked = false;
|
|
631
|
+
});
|
|
560
632
|
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
}
|
|
565
|
-
|
|
633
|
+
aplicarFiltros();
|
|
634
|
+
atualizarFiltrosAtivos();
|
|
635
|
+
atualizarURL();
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
// Inicializar a partir dos parâmetros da URL
|
|
639
|
+
const urlParams = new URLSearchParams(window.location.search);
|
|
640
|
+
let temParametros = false;
|
|
641
|
+
|
|
642
|
+
// Marcar checkboxes baseados nos parâmetros da URL
|
|
643
|
+
for (const [key, value] of urlParams.entries()) {
|
|
644
|
+
const checkbox = document.querySelector(`input[data-filtro-tipo="${key}"][value="${value}"]`);
|
|
645
|
+
if (checkbox) {
|
|
646
|
+
checkbox.checked = true;
|
|
647
|
+
temParametros = true;
|
|
648
|
+
}
|
|
649
|
+
}
|
|
650
|
+
|
|
651
|
+
// Se houver parâmetros, aplicar filtros
|
|
652
|
+
if (temParametros) {
|
|
653
|
+
aplicarFiltros();
|
|
654
|
+
atualizarFiltrosAtivos();
|
|
655
|
+
} else {
|
|
656
|
+
// Aplicar filtros pela primeira vez para inicializar contadores
|
|
657
|
+
aplicarFiltros();
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
// Tornar funções acessíveis globalmente
|
|
661
|
+
window.acessRemoverFiltro = removerFiltro;
|
|
662
|
+
window.acessLimparTodosFiltros = limparTodosFiltros;
|
|
663
|
+
});
|
|
664
|
+
</script>
|
|
566
665
|
{% endblock %}
|