Widget:Test: mudanças entre as edições

Ir para navegação Ir para pesquisar

Widget:Test (ver código-fonte)

Edição das 00h05min de 27 de agosto de 2024

1 878 bytes removidos ,  27 agosto
sem sumário de edição
Sem resumo de edição
Etiqueta: Revertido
Sem resumo de edição
Etiqueta: Revertido
Linha 148: Linha 148:
     </style>
     </style>
</head>
</head>


<body>
<body>
Linha 183: Linha 182:
         <div id="filterSection" class="hidden">
         <div id="filterSection" class="hidden">
             <div id="filterById" class="input-group">
             <div id="filterById" class="input-group">
                 <label for="searchIds" class="maps__label">Buscar por Nº do Mapa:</label>
                 <label for="searchIds" class="mapsCalc__label">Buscar por Nº do Mapa:</label>
                 <input type="text" id="searchIds" placeholder="Digite os números separados por vírgula" class="maps__select">
                 <input type="text" id="searchIds" placeholder="Digite os números separados por vírgula" class="mapsCalc__select">
             </div>
             </div>


             <div id="filterByTag" class="hidden input-group">
             <div id="filterByTag" class="hidden input-group">
                 <label for="searchTag" class="maps__label">Buscar por Tag:</label>
                 <label for="searchTag" class="mapsCalc__label">Buscar por Tag:</label>
                 <input type="text" id="searchTag" placeholder="Digite a tag">
                 <input type="text" id="searchTag" placeholder="Digite a tag">
             </div>
             </div>


             <div class="d-flex">
             <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">
                     <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão filtrar">
                     <img src="https://wiki.pokexgames.com/images/8/82/Botao_Filtrar_Mapas_Adv.png" alt="Imagem botão filtrar">
Linha 201: Linha 200:
             <!-- As imagens e suas informações serão exibidas aqui -->
             <!-- As imagens e suas informações serão exibidas aqui -->
         </div>
         </div>
        <div id="error-message" class="hidden" style="color: red; font-weight: bold; text-align: center;">
            Por favor, selecione "Tipo de Mapa" e "Local do X" antes de buscar por tag.
        </div>
     </form>
     </form>


Linha 288: Linha 285:
             }
             }
         };
         };
   document.getElementById('mapType').addEventListener('change', updateOptions);
   const enableFilterCheckbox = document.getElementById('enableFilter');
         document.getElementById('specificOption').addEventListener('change', updateOptions);
        const filterSection = document.getElementById('filterSection');
         document.getElementById('enableFilter').addEventListener('change', toggleFilter);
         const filterByTag = document.getElementById('filterByTag');
         document.getElementById('filterButton').addEventListener('click', applyFilters);
        const searchTagInput = document.getElementById('searchTag');
         const mapTypeSelect = document.getElementById('mapType');
        const specificOptionSelect = document.getElementById('specificOption');
         const imageContainer = document.getElementById('imageContainer');


         function updateOptions() {
         enableFilterCheckbox.addEventListener('change', () => {
            const mapType = document.getElementById('mapType').value;
             const isChecked = enableFilterCheckbox.checked;
            const specificOption = document.getElementById('specificOption').value;
             filterSection.classList.toggle('hidden', !isChecked);
             const specificOptionsDiv = document.getElementById('specificOptions');
             filterByTag.classList.toggle('hidden', !isChecked);
             const filterSectionDiv = document.getElementById('filterSection');
        });
           
            if (mapType) {
                specificOptionsDiv.classList.remove('hidden');
             } else {
                specificOptionsDiv.classList.add('hidden');
                filterSectionDiv.classList.add('hidden');
                document.getElementById('searchIds').value = '';
                document.getElementById('searchTag').value = '';
            }


            if (mapType && specificOption) {
        document.getElementById('filterButton').addEventListener('click', () => {
                filterSectionDiv.classList.remove('hidden');
             const selectedMapType = mapTypeSelect.value;
             } else {
            const selectedSpecificOption = specificOptionSelect.value;
                filterSectionDiv.classList.add('hidden');
            const searchTag = searchTagInput.value.toLowerCase();
                document.getElementById('searchIds').value = '';
                document.getElementById('searchTag').value = '';
            }
        }


        function toggleFilter() {
             const imagesToShow = [];
             const isFilterEnabled = document.getElementById('enableFilter').checked;
            const filterByTagDiv = document.getElementById('filterByTag');
            const filterByIdDiv = document.getElementById('filterById');


             if (isFilterEnabled) {
             for (const [mapType, options] of Object.entries(specificOptions)) {
                 filterByTagDiv.classList.remove('hidden');
                 for (const [option, images] of Object.entries(options)) {
                filterByIdDiv.classList.remove('hidden');
                    if ((selectedMapType === mapType || !selectedMapType) &&
            } else {
                        (selectedSpecificOption === option || !selectedSpecificOption)) {
                filterByTagDiv.classList.add('hidden');
                        imagesToShow.push(...images.filter(img => searchTag ? img.tag.toLowerCase() === searchTag : true));
                filterByIdDiv.classList.add('hidden');
                    }
                document.getElementById('searchTag').value = '';
                }
                document.getElementById('searchIds').value = '';
             }
             }
        }


        function applyFilters() {
             displayImages(imagesToShow);
             const mapType = document.getElementById('mapType').value;
        });
            const specificOption = document.getElementById('specificOption').value;
            const searchIds = document.getElementById('searchIds').value.trim().split(',').map(id => id.trim());
            const searchTag = document.getElementById('searchTag').value.trim().toLowerCase();
            const imageContainer = document.getElementById('imageContainer');
            const errorMessage = document.getElementById('error-message');


        function displayImages(images) {
             imageContainer.innerHTML = '';
             imageContainer.innerHTML = '';
            errorMessage.classList.add('hidden');


             if (searchTag && (!mapType || !specificOption)) {
             if (images.length === 0) {
                errorMessage.classList.remove('hidden');
                 imageContainer.innerHTML = '<p>Nenhuma imagem encontrada.</p>';
                return;
             } else {
            }
                 images.forEach(img => {
 
                     const imgElement = document.createElement('div');
            let images = [];
                     imgElement.className = 'image-item';
            if (mapType && specificOption) {
                     imgElement.innerHTML = `
                images = specificOptions[mapType][specificOption] || [];
                         <img src="${img.imageUrl}" alt="Mapa">
                if (searchIds.length) {
                    images = images.filter(item => searchIds.includes(item.id));
                 }
                if (searchTag) {
                    images = images.filter(item => item.tag && item.tag.toLowerCase().includes(searchTag));
                }
             }
 
            if (images.length) {
                 images.forEach(item => {
                     const imageElement = document.createElement('div');
                     imageElement.classList.add('image-item');
                     imageElement.innerHTML = `
                         <img src="${item.imageUrl}" alt="Mapa">
                         <div class="image-info">
                         <div class="image-info">
                             <p>ID: ${item.id}</p>
                             <p>ID: ${img.id}</p>
                             <p>Local: ${item.local}</p>
                             <p>Local: ${img.local}</p>
                             <p>Coordenadas: ${item.coordinates}</p>
                             <p>Coordenadas: ${img.coordinates}</p>
                         </div>
                         </div>
                     `;
                     `;
                     imageContainer.appendChild(imageElement);
                     imageContainer.appendChild(imgElement);
                 });
                 });
                 imageContainer.classList.remove('hidden');
                 imageContainer.classList.remove('hidden');
            } else {
                imageContainer.classList.add('hidden');
                errorMessage.classList.remove('hidden');
             }
             }
         }
         }
     </script>
     </script>
</body>
</body>
</html>
</html>
Renee
Administradores
5 801

edições

Disponível em “https://wiki.pokexgames.com/index.php/Especial:MobileDiff/85810”

Menu de navegação