Widget:Test3: mudanças entre as edições
Ir para navegação
Ir para pesquisar
Sem resumo de edição |
Sem resumo de edição |
||
Linha 7: | Linha 7: | ||
<title>Seleção e Exibição de Imagens</title> | <title>Seleção e Exibição de Imagens</title> | ||
<style> | <style> | ||
.d-flex { | /* Estilos mantidos conforme necessário */ | ||
.d-flex { /* seu código */ } | |||
.hidden { /* seu código */ } | |||
.image-container { /* seu código */ } | |||
.image-container img { /* seu código */ } | |||
.image-info { /* seu código */ } | |||
select, input[type="text"], button { /* seu código */ } | |||
#filterButton, #searchButton { /* seu código */ } | |||
#filterButton img, #searchButton img { /* seu código */ } | |||
.hidden { | .mw-body-content { /* seu código */ } | ||
.mw-parser-output { /* seu código */ } | |||
.input-group { /* seu código */ } | |||
.input-group label { /* seu código */ } | |||
.image-container { | .maps__select { /* seu código */ } | ||
.input-group input[type="text"] { /* seu código */ } | |||
.maps__label { /* seu código */ } | |||
.hover-minimize:hover { /* seu código */ } | |||
.filter-container { /* seu código */ } | |||
.filter-container input[type="checkbox"] { /* seu código */ } | |||
.filter-label { /* seu código */ } | |||
.image-container img { | |||
} | |||
.image-info { | |||
select, | |||
#filterButton, | |||
#filterButton img, | |||
.mw-body-content { | |||
.mw-parser-output { | |||
.input-group { | |||
.input-group label { | |||
.maps__select { | |||
.input-group input[type="text"] { | |||
.maps__label { | |||
.hover-minimize:hover { | |||
.filter-container { | |||
.filter-container input[type="checkbox"] { | |||
.filter-label { | |||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
<form id="mapForm"> | <form id="mapForm"> | ||
<!-- Outros elementos do formulário mantidos --> | |||
<div id="mapTypeSelection" class="input-group"> | <div id="mapTypeSelection" class="input-group"> | ||
< | <!-- seu código --> | ||
</div> | </div> | ||
<div id="specificOptions" class="hidden input-group"> | <div id="specificOptions" class="hidden input-group"> | ||
< | <!-- seu código --> | ||
</div> | </div> | ||
Linha 210: | Linha 52: | ||
<option value="">Escolha uma Opção</option> | <option value="">Escolha uma Opção</option> | ||
<option value="number">Filtrar por Número</option> | <option value="number">Filtrar por Número</option> | ||
<option value="tag">Filtrar por Tag</option> | <option value="tag">Filtrar por Tag</option> | ||
</select> | </select> | ||
</div> | </div> | ||
<div id="tagCheckboxes" class="input-group hidden"> | |||
<!-- Checkboxes serão gerados aqui --> | |||
</div> | |||
<div class="d-flex justify-center align-center flex-column"> | <div class="d-flex justify-center align-center flex-column"> | ||
<button type="button" id="filterButton" class="hover-minimize"> | <button type="button" id="filterButton" class="hover-minimize"> | ||
Linha 228: | Linha 73: | ||
<script> | <script> | ||
const specificOptions = { | const specificOptions = { | ||
// Seu código para specificOptions | |||
}; | |||
}; | |||
document.getElementById('enableFilter').addEventListener('change', function () { | document.getElementById('enableFilter').addEventListener('change', function () { | ||
Linha 268: | Linha 86: | ||
}); | }); | ||
document.getElementById(' | document.getElementById('filterOption').addEventListener('change', function () { | ||
if ( | const selectedOption = this.value; | ||
const tagCheckboxes = document.getElementById('tagCheckboxes'); | |||
document.getElementById(' | |||
if (selectedOption === 'tag') { | |||
const selectedMapType = document.getElementById('mapType').value; | |||
const specificOption = document.getElementById('specificOption').value; | |||
if (selectedMapType && specificOption) { | |||
tagCheckboxes.innerHTML = ''; // Limpa as checkboxes anteriores | |||
const images = specificOptions[selectedMapType][specificOption]; | |||
const tags = new Set(); // Usado para evitar tags duplicadas | |||
images.forEach(image => { | |||
image.tags.forEach(tag => tags.add(tag)); | |||
}); | |||
tags.forEach(tag => { | |||
const checkbox = document.createElement('input'); | |||
checkbox.type = 'checkbox'; | |||
checkbox.value = tag; | |||
checkbox.id = `tag_${tag}`; | |||
const label = document.createElement('label'); | |||
label.htmlFor = `tag_${tag}`; | |||
label.textContent = tag; | |||
tagCheckboxes.appendChild(checkbox); | |||
tagCheckboxes.appendChild(label); | |||
tagCheckboxes.appendChild(document.createElement('br')); | |||
}); | |||
tagCheckboxes.classList.remove('hidden'); | |||
} | |||
} else { | } else { | ||
tagCheckboxes.classList.add('hidden'); | |||
} | } | ||
}); | }); | ||
document.getElementById(' | document.getElementById('filterButton').addEventListener('click', function () { | ||
const selectedMapType = document.getElementById('mapType').value; | const selectedMapType = document.getElementById('mapType').value; | ||
const selectedOption = | const specificOption = document.getElementById('specificOption').value; | ||
const selectedOption = document.getElementById('filterOption').value; | |||
const imageContainer = document.getElementById('imageContainer'); | const imageContainer = document.getElementById('imageContainer'); | ||
if ( | if (selectedOption === 'tag') { | ||
const | const checkboxes = document.querySelectorAll('#tagCheckboxes input[type="checkbox"]:checked'); | ||
const selectedTags = Array.from(checkboxes).map(checkbox => checkbox.value); | |||
if ( | if (selectedTags.length > 0 && selectedMapType && specificOption) { | ||
images. | const images = specificOptions[selectedMapType][specificOption].filter(image => { | ||
return selectedTags.every(tag => image.tags.includes(tag)); | |||
}); | }); | ||
imageContainer.innerHTML = ''; // Limpa as imagens anteriores | |||
if (images.length > 0) { | |||
images.forEach(image => { | |||
const imageItem = document.createElement('div'); | |||
imageItem.className = 'image-item'; | |||
const img = document.createElement('img'); | |||
img.src = image.imageUrl; | |||
img.alt = image.local; | |||
const info = document.createElement('div'); | |||
info.className = 'image-info'; | |||
info.textContent = `${image.local} (${image.coordinates}) - Tags: ${image.tags.join(', ')}`; | |||
imageItem.appendChild(img); | |||
imageItem.appendChild(info); | |||
imageContainer.appendChild(imageItem); | |||
}); | |||
imageContainer.classList.remove('hidden'); | |||
} else { | |||
imageContainer.innerHTML = 'Nenhum mapa encontrado com essas tags.'; | |||
imageContainer.classList.remove('hidden'); | |||
} | |||
} | |||
} else if (selectedOption === 'number') { | |||
// Implementação existente para números | |||
} | |||
}); | }); | ||
</script> | </script> | ||
</body> | </body> | ||
</html> | </html> |
Edição das 19h37min de 3 de setembro de 2024
<!DOCTYPE html> <html lang="pt-BR">
<head>
<meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Seleção e Exibição de Imagens</title> <style> /* Estilos mantidos conforme necessário */ .d-flex { /* seu código */ } .hidden { /* seu código */ } .image-container { /* seu código */ } .image-container img { /* seu código */ } .image-info { /* seu código */ } select, input[type="text"], button { /* seu código */ } #filterButton, #searchButton { /* seu código */ } #filterButton img, #searchButton img { /* seu código */ } .mw-body-content { /* seu código */ } .mw-parser-output { /* seu código */ } .input-group { /* seu código */ } .input-group label { /* seu código */ } .maps__select { /* seu código */ } .input-group input[type="text"] { /* seu código */ } .maps__label { /* seu código */ } .hover-minimize:hover { /* seu código */ } .filter-container { /* seu código */ } .filter-container input[type="checkbox"] { /* seu código */ } .filter-label { /* seu código */ } </style>
</head>
<body>
<form id="mapForm">
<input type="checkbox" id="enableFilter"> <label for="enableFilter" class="filter-label">Ativar filtro</label>
<label for="filterOption" class="maps__label">Filtrar Por</label> <select id="filterOption" class="maps__select"> <option value="">Escolha uma Opção</option> <option value="number">Filtrar por Número</option> <option value="tag">Filtrar por Tag</option> </select>
<button type="button" id="filterButton" class="hover-minimize"> <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão filtrar"> </button>
</form>
<script> const specificOptions = { // Seu código para specificOptions };
document.getElementById('enableFilter').addEventListener('change', function () { const filterSection = document.getElementById('filterSection'); if (this.checked) { filterSection.classList.remove('hidden'); } else { filterSection.classList.add('hidden'); } });
document.getElementById('filterOption').addEventListener('change', function () { const selectedOption = this.value; const tagCheckboxes = document.getElementById('tagCheckboxes');
if (selectedOption === 'tag') { const selectedMapType = document.getElementById('mapType').value; const specificOption = document.getElementById('specificOption').value; if (selectedMapType && specificOption) { tagCheckboxes.innerHTML = ; // Limpa as checkboxes anteriores
const images = specificOptions[selectedMapType][specificOption]; const tags = new Set(); // Usado para evitar tags duplicadas
images.forEach(image => { image.tags.forEach(tag => tags.add(tag)); });
tags.forEach(tag => { const checkbox = document.createElement('input'); checkbox.type = 'checkbox'; checkbox.value = tag; checkbox.id = `tag_${tag}`;
const label = document.createElement('label'); label.htmlFor = `tag_${tag}`; label.textContent = tag;
tagCheckboxes.appendChild(checkbox); tagCheckboxes.appendChild(label); tagCheckboxes.appendChild(document.createElement('br')); });
tagCheckboxes.classList.remove('hidden'); } } else { tagCheckboxes.classList.add('hidden'); } });
document.getElementById('filterButton').addEventListener('click', function () { const selectedMapType = document.getElementById('mapType').value; const specificOption = document.getElementById('specificOption').value; const selectedOption = document.getElementById('filterOption').value; const imageContainer = document.getElementById('imageContainer');
if (selectedOption === 'tag') { const checkboxes = document.querySelectorAll('#tagCheckboxes input[type="checkbox"]:checked'); const selectedTags = Array.from(checkboxes).map(checkbox => checkbox.value);
if (selectedTags.length > 0 && selectedMapType && specificOption) { const images = specificOptions[selectedMapType][specificOption].filter(image => { return selectedTags.every(tag => image.tags.includes(tag)); });
imageContainer.innerHTML = ; // Limpa as imagens anteriores
if (images.length > 0) { images.forEach(image => { const imageItem = document.createElement('div'); imageItem.className = 'image-item';
const img = document.createElement('img'); img.src = image.imageUrl; img.alt = image.local;
const info = document.createElement('div'); info.className = 'image-info'; info.textContent = `${image.local} (${image.coordinates}) - Tags: ${image.tags.join(', ')}`;
imageItem.appendChild(img); imageItem.appendChild(info); imageContainer.appendChild(imageItem); });
imageContainer.classList.remove('hidden'); } else { imageContainer.innerHTML = 'Nenhum mapa encontrado com essas tags.'; imageContainer.classList.remove('hidden'); } } } else if (selectedOption === 'number') { // Implementação existente para números } }); </script>
</body> </html>