wagtail-enap-designsystem 1.2.1.203__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 +3968 -67
- enap_designsystem/static/enap_designsystem/blocks/hero_animada_block.css +18 -0
- 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 +564 -463
- enap_designsystem/templates/enap_designsystem/pages/capsula_page.html +390 -627
- enap_designsystem/templates/enap_designsystem/rota_page.html +560 -0
- {wagtail_enap_designsystem-1.2.1.203.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/METADATA +1 -1
- {wagtail_enap_designsystem-1.2.1.203.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/RECORD +19 -14
- {wagtail_enap_designsystem-1.2.1.203.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/WHEEL +0 -0
- {wagtail_enap_designsystem-1.2.1.203.dist-info → wagtail_enap_designsystem-1.2.1.205.dist-info}/licenses/LICENSE +0 -0
- {wagtail_enap_designsystem-1.2.1.203.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,279 +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-perfil-profissional="{{ capsula.perfis_profissionais|join:' ' }}"
|
|
190
|
-
data-prioridade="{{ capsula.prioridade }}">
|
|
191
|
-
<div class="capsula-conteudo">
|
|
192
|
-
<div class="capsula-icone">
|
|
193
|
-
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
194
|
-
<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>
|
|
195
|
-
</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 }}
|
|
196
247
|
</div>
|
|
197
|
-
|
|
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
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
249
|
-
<line x1="3" y1="9" x2="21" y2="9"></line>
|
|
250
|
-
<line x1="3" y1="15" x2="21" y2="15"></line>
|
|
251
|
-
<line x1="9" y1="3" x2="9" y2="21"></line>
|
|
252
|
-
<line x1="15" y1="3" x2="15" y2="21"></line>
|
|
253
|
-
</svg>
|
|
254
|
-
{% else %}
|
|
255
|
-
<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">
|
|
256
|
-
<polyline points="22 12 16 12 14 15 10 15 8 12 2 12"></polyline>
|
|
257
|
-
<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>
|
|
258
|
-
</svg>
|
|
259
|
-
{% endif %}
|
|
260
|
-
{{ recurso_label }}
|
|
261
|
-
</div>
|
|
262
|
-
{% endif %}
|
|
263
|
-
{% endfor %}
|
|
264
|
-
</div>
|
|
265
|
-
{% endif %}
|
|
266
|
-
|
|
267
|
-
<a href="{% pageurl capsula %}" class="btn large primary">
|
|
268
|
-
Acessar Cápsula
|
|
269
|
-
</a>
|
|
270
|
-
</div>
|
|
271
|
-
</div>
|
|
272
|
-
{% endfor %}
|
|
273
|
-
</div>
|
|
274
|
-
|
|
275
|
-
<!-- Mensagem para nenhum resultado -->
|
|
276
|
-
<div id="mensagem-vazia" class="conteudo-vazio" style="display: none;">
|
|
277
|
-
<svg class="conteudo-vazio-icone" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
278
|
-
<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>
|
|
279
|
-
</svg>
|
|
280
|
-
<h2>Nenhuma cápsula encontrada</h2>
|
|
281
|
-
<p>Tente ajustar os filtros ou <a href="javascript:void(0)" onclick="limparTodosFiltros()">limpe os filtros</a> para ver todas as cápsulas.</p>
|
|
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 }}
|
|
291
|
+
</div>
|
|
292
|
+
{% endif %}
|
|
293
|
+
{% endfor %}
|
|
294
|
+
</div>
|
|
295
|
+
{% endif %}
|
|
296
|
+
<div class="btn primary large">
|
|
297
|
+
Acessar Cápsula
|
|
298
|
+
</div>
|
|
282
299
|
</div>
|
|
283
|
-
</
|
|
300
|
+
</a>
|
|
301
|
+
{% endfor %}
|
|
284
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>
|
|
285
311
|
</div>
|
|
286
312
|
</div>
|
|
287
|
-
|
|
288
|
-
<style>
|
|
289
|
-
/* Estilo do esqueleto para efeito de loading */
|
|
290
|
-
.skeleton-card {
|
|
291
|
-
background: #e0e0e0;
|
|
292
|
-
animation: skeleton-loading 1.5s infinite ease-in-out;
|
|
293
|
-
min-width: 268px;
|
|
294
|
-
min-height: 450px;
|
|
295
|
-
border-radius: 20px;
|
|
296
|
-
box-shadow: inset 0 0 0 1px #DEE3ED;
|
|
297
|
-
margin-top: 20px;
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
.skeleton-card:nth-child(odd) {
|
|
301
|
-
animation-delay: 0.5s;
|
|
302
|
-
}
|
|
303
|
-
|
|
304
|
-
@keyframes skeleton-loading {
|
|
305
|
-
0% {
|
|
306
|
-
background-color: #e0e0e0;
|
|
307
|
-
}
|
|
308
|
-
50% {
|
|
309
|
-
background-color: #f0f0f0;
|
|
310
|
-
}
|
|
311
|
-
100% {
|
|
312
|
-
background-color: #e0e0e0;
|
|
313
|
-
}
|
|
314
|
-
}
|
|
315
|
-
</style>
|
|
316
313
|
{% endblock %}
|
|
317
314
|
|
|
318
315
|
{% block footer %}
|
|
@@ -321,244 +318,348 @@
|
|
|
321
318
|
|
|
322
319
|
{% block scriptinline %}
|
|
323
320
|
<script>
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
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
|
+
});
|
|
332
393
|
|
|
333
|
-
//
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
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: []
|
|
342
436
|
};
|
|
343
437
|
|
|
344
|
-
//
|
|
345
|
-
aplicarFiltros();
|
|
346
|
-
atualizarFiltrosAtivos();
|
|
347
|
-
|
|
348
|
-
// Adicionar eventos de mudança para todos os checkboxes
|
|
438
|
+
// Coletar valores dos checkboxes marcados
|
|
349
439
|
checkboxes.forEach(checkbox => {
|
|
350
|
-
checkbox.
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
440
|
+
if (checkbox.checked) {
|
|
441
|
+
const tipoFiltro = checkbox.getAttribute('data-filtro-tipo');
|
|
442
|
+
if (filtrosAtivos[tipoFiltro]) {
|
|
443
|
+
filtrosAtivos[tipoFiltro].push(checkbox.value);
|
|
444
|
+
}
|
|
445
|
+
}
|
|
355
446
|
});
|
|
356
447
|
|
|
357
|
-
//
|
|
358
|
-
|
|
359
|
-
limparTodosBtn.addEventListener('click', function(e) {
|
|
360
|
-
e.preventDefault();
|
|
361
|
-
limparTodosFiltros();
|
|
362
|
-
});
|
|
363
|
-
}
|
|
448
|
+
// Atualizar contadores nos botões de dropdown
|
|
449
|
+
atualizarContadoresDropdown(filtrosAtivos);
|
|
364
450
|
|
|
365
|
-
//
|
|
366
|
-
|
|
367
|
-
if (toggleBtn) {
|
|
368
|
-
toggleBtn.addEventListener('click', function() {
|
|
369
|
-
const container = document.getElementById('filtros-container');
|
|
370
|
-
const button = this;
|
|
371
|
-
|
|
372
|
-
if (button.getAttribute('aria-expanded') === 'true') {
|
|
373
|
-
button.setAttribute('aria-expanded', 'false');
|
|
374
|
-
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>';
|
|
375
|
-
container.style.display = 'none';
|
|
376
|
-
} else {
|
|
377
|
-
button.setAttribute('aria-expanded', 'true');
|
|
378
|
-
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>';
|
|
379
|
-
container.style.display = 'block';
|
|
380
|
-
}
|
|
381
|
-
});
|
|
382
|
-
}
|
|
451
|
+
// Contar cápsulas visíveis
|
|
452
|
+
let capsulasFiltradas = 0;
|
|
383
453
|
|
|
384
|
-
//
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
const filtrosAtivos = {
|
|
388
|
-
tipo_deficiencia: [],
|
|
389
|
-
formato_acao: [],
|
|
390
|
-
tipo_recurso: [],
|
|
391
|
-
perfil_profissional: [],
|
|
392
|
-
prioridade: null
|
|
393
|
-
};
|
|
454
|
+
// Aplicar filtros aos cards
|
|
455
|
+
capsulaCards.forEach(card => {
|
|
456
|
+
let mostrar = true;
|
|
394
457
|
|
|
395
|
-
//
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
filtrosAtivos[tipoFiltro].push(checkbox.value);
|
|
401
|
-
}
|
|
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;
|
|
402
463
|
}
|
|
403
|
-
}
|
|
404
|
-
|
|
405
|
-
// Contar cápsulas visíveis para atualizar o contador
|
|
406
|
-
let capsulasFiltradas = 0;
|
|
464
|
+
}
|
|
407
465
|
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
// Verificar cada tipo de filtro
|
|
413
|
-
if (filtrosAtivos.tipo_deficiencia.length > 0) {
|
|
414
|
-
const tiposDeficiencia = (card.getAttribute('data-tipo-deficiencia') || '').split(' ').filter(t => t);
|
|
415
|
-
if (!filtrosAtivos.tipo_deficiencia.some(tipo => tiposDeficiencia.includes(tipo))) {
|
|
416
|
-
mostrar = false;
|
|
417
|
-
}
|
|
418
|
-
}
|
|
419
|
-
|
|
420
|
-
if (mostrar && filtrosAtivos.formato_acao.length > 0) {
|
|
421
|
-
const formatosAcao = (card.getAttribute('data-formato-acao') || '').split(' ').filter(t => t);
|
|
422
|
-
if (!filtrosAtivos.formato_acao.some(formato => formatosAcao.includes(formato))) {
|
|
423
|
-
mostrar = false;
|
|
424
|
-
}
|
|
425
|
-
}
|
|
426
|
-
|
|
427
|
-
if (mostrar && filtrosAtivos.tipo_recurso.length > 0) {
|
|
428
|
-
const tiposRecurso = (card.getAttribute('data-tipo-recurso') || '').split(' ').filter(t => t);
|
|
429
|
-
if (!filtrosAtivos.tipo_recurso.some(recurso => tiposRecurso.includes(recurso))) {
|
|
430
|
-
mostrar = false;
|
|
431
|
-
}
|
|
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;
|
|
432
470
|
}
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
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;
|
|
439
477
|
}
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
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;
|
|
446
484
|
}
|
|
447
|
-
|
|
448
|
-
|
|
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';
|
|
449
491
|
if (mostrar) {
|
|
450
|
-
card.style.display = 'block';
|
|
451
492
|
capsulasFiltradas++;
|
|
452
|
-
} else {
|
|
453
|
-
card.style.display = 'none';
|
|
454
493
|
}
|
|
455
|
-
});
|
|
456
|
-
|
|
457
|
-
// Atualizar contador de resultados
|
|
458
|
-
if (contagemResultados) {
|
|
459
|
-
contagemResultados.textContent = capsulasFiltradas + ' cápsulas encontradas';
|
|
460
|
-
}
|
|
461
|
-
|
|
462
|
-
// Mostrar mensagem de "nenhum resultado" se necessário
|
|
463
|
-
if (mensagemVazia) {
|
|
464
|
-
mensagemVazia.style.display = capsulasFiltradas === 0 ? 'block' : 'none';
|
|
465
494
|
}
|
|
495
|
+
});
|
|
496
|
+
|
|
497
|
+
// Atualizar contador de resultados
|
|
498
|
+
if (contagemResultados) {
|
|
499
|
+
contagemResultados.textContent = capsulasFiltradas + ' cápsulas encontradas';
|
|
466
500
|
}
|
|
467
501
|
|
|
468
|
-
//
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
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
|
+
}
|
|
478
528
|
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
? filtroLabels[tipoFiltro][checkbox.value]
|
|
485
|
-
: checkbox.value;
|
|
486
|
-
|
|
487
|
-
// Criar tag de filtro
|
|
488
|
-
const tagFiltro = document.createElement('div');
|
|
489
|
-
tagFiltro.className = 'tag-filtro';
|
|
490
|
-
tagFiltro.innerHTML = `
|
|
491
|
-
${labelTexto}
|
|
492
|
-
<button type="button" class="remover-filtro-btn" data-tipo="${tipoFiltro}" data-valor="${checkbox.value}">
|
|
493
|
-
<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">
|
|
494
|
-
<line x1="18" y1="6" x2="6" y2="18"></line>
|
|
495
|
-
<line x1="6" y1="6" x2="18" y2="18"></line>
|
|
496
|
-
</svg>
|
|
497
|
-
</button>
|
|
498
|
-
`;
|
|
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;
|
|
499
534
|
|
|
500
|
-
//
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
document.querySelectorAll('.remover-filtro-btn').forEach(btn => {
|
|
507
|
-
btn.addEventListener('click', function(e) {
|
|
508
|
-
e.preventDefault();
|
|
509
|
-
const tipo = this.getAttribute('data-tipo');
|
|
510
|
-
const valor = this.getAttribute('data-valor');
|
|
511
|
-
removerFiltro(tipo, valor);
|
|
512
|
-
});
|
|
513
|
-
});
|
|
514
|
-
|
|
515
|
-
// Mostrar ou ocultar botão "Limpar todos"
|
|
516
|
-
if (limparTodosBtn) {
|
|
517
|
-
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
|
+
}
|
|
518
541
|
}
|
|
519
|
-
}
|
|
542
|
+
});
|
|
543
|
+
}
|
|
544
|
+
|
|
545
|
+
// Atualizar a exibição de filtros ativos
|
|
546
|
+
function atualizarFiltrosAtivos() {
|
|
547
|
+
if (!filtrosAtivosContainer) return;
|
|
520
548
|
|
|
521
|
-
//
|
|
522
|
-
|
|
523
|
-
|
|
549
|
+
// Limpar container
|
|
550
|
+
filtrosAtivosContainer.innerHTML = '';
|
|
551
|
+
|
|
552
|
+
let temFiltrosAtivos = false;
|
|
553
|
+
|
|
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`);
|
|
524
557
|
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
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);
|
|
530
582
|
});
|
|
531
|
-
|
|
532
|
-
// Atualizar URL sem recarregar a página
|
|
533
|
-
const newUrl = window.location.pathname + (urlParams.toString() ? '?' + urlParams.toString() : '');
|
|
534
|
-
history.pushState(null, '', newUrl);
|
|
535
|
-
}
|
|
583
|
+
});
|
|
536
584
|
|
|
537
|
-
//
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
if (checkbox) {
|
|
541
|
-
checkbox.checked = false;
|
|
542
|
-
aplicarFiltros();
|
|
543
|
-
atualizarFiltrosAtivos();
|
|
544
|
-
atualizarURL();
|
|
545
|
-
}
|
|
585
|
+
// Mostrar ou ocultar o wrapper de filtros ativos
|
|
586
|
+
if (filtrosAtivosWrapper) {
|
|
587
|
+
filtrosAtivosWrapper.style.display = temFiltrosAtivos ? 'flex' : 'none';
|
|
546
588
|
}
|
|
547
589
|
|
|
548
|
-
//
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
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);
|
|
552
596
|
});
|
|
553
|
-
|
|
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;
|
|
554
621
|
aplicarFiltros();
|
|
555
622
|
atualizarFiltrosAtivos();
|
|
556
623
|
atualizarURL();
|
|
557
624
|
}
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
// Função para limpar todos os filtros
|
|
628
|
+
function limparTodosFiltros() {
|
|
629
|
+
checkboxes.forEach(checkbox => {
|
|
630
|
+
checkbox.checked = false;
|
|
631
|
+
});
|
|
558
632
|
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
}
|
|
563
|
-
|
|
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>
|
|
564
665
|
{% endblock %}
|