PokeXGames

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

Widget Discussão

Widget:Test (ver código-fonte)

Edição das 04h27min de 27 de agosto de 2024

424 bytes removidos ,  27 agosto
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 316: Linha 316:
         };
         };


        const mapTypeSelect = document.getElementById('mapType');
      function displayMaps(maps) {
        const locationSelect = document.getElementById('location');
            const container = document.getElementById('mapsContainer');
        const filterCheckbox = document.getElementById('filterCheckbox');
            container.innerHTML = ''; // Limpa o container
        const filterOptions = document.getElementById('filterOptions');
        const filterOptionSelect = document.getElementById('filterOption');
        const filterValueInput = document.getElementById('filterValue');
        const filterButton = document.getElementById('filterButton');
        const mapContainer = document.getElementById('mapContainer');


        const updateMaps = () => {
            maps.forEach(map => {
            const selectedType = mapTypeSelect.value;
                const mapElement = document.createElement('div');
            const selectedLocation = locationSelect.value;
                mapElement.className = 'image-item';
            const shouldFilter = filterCheckbox.checked;
                mapElement.innerHTML = `
            const filterOption = filterOptionSelect.value;
                    <img src="${map.imageUrl}" alt="${map.local}" />
            const filterValue = filterValueInput.value.trim().toLowerCase();
                    <div class="image-info">
                        <p>ID: ${map.id}</p>
                        <p>Local: ${map.local}</p>
                        <p>Coordenadas: ${map.coordinates}</p>
                        <p>Tag: ${map.tag}</p>
                    </div>
                `;
                container.appendChild(mapElement);
            });
        }


             mapContainer.innerHTML = ''; // Limpa o container de mapas
        function filterMaps() {
             const filterCheckbox = document.getElementById('filterCheckbox').checked;
            const filterText = document.getElementById('filterInput').value.trim();
            const mapType = document.getElementById('mapType').value;
            const location = document.getElementById('location').value;


             if (selectedType && selectedLocation) {
             const filterTags = filterText.split(',').map(tag => tag.trim().toLowerCase()); // Processa múltiplas tags
                const maps = specificOptions[selectedType][selectedLocation] || [];
 
                const filteredMaps = maps.filter(map => {
            const filteredMaps = Object.keys(specificOptions).reduce((acc, key) => {
                    if (shouldFilter) {
                if ((mapType && !specificOptions[key].type.includes(mapType)) ||
                        if (filterOption === 'number' && filterValue) {
                    (location && !specificOptions[key].location.includes(location))) {
                            return map.id === filterValue;
                    return acc;
                        }
                }
                        if (filterOption === 'tag' && filterValue) {
 
                            return map.tag.toLowerCase().includes(filterValue);
                const mapsToFilter = specificOptions[key].maps;
                        }
                const filtered = mapsToFilter.filter(map => {
                    }
                    const mapTags = map.tag.split(',').map(tag => tag.trim().toLowerCase()); // Tags do mapa
                     return true; // Exibe todos os mapas se o filtro não estiver ativado ou não houver filtro
                     return filterTags.every(tag => mapTags.includes(tag)); // Verifica se todas as tags estão presentes
                 });
                 });


                 filteredMaps.forEach(map => {
                 return [...acc, ...filtered];
                    const mapElement = document.createElement('div');
            }, []);
                    mapElement.className = 'image-item';
 
                    mapElement.innerHTML = `
            displayMaps(filteredMaps);
                        <img src="${map.imageUrl}" alt="${map.local}">
        }
                        <div class="image-info">
 
                            <p>ID: ${map.id}</p>
        document.getElementById('filterButton').addEventListener('click', () => {
                            <p>Local: ${map.local}</p>
            const mapType = document.getElementById('mapType').value;
                            <p>Coordenadas: ${map.coordinates}</p>
            const location = document.getElementById('location').value;
                            <p>Tag: ${map.tag}</p>
 
                        </div>
            if (!mapType || !location) {
                    `;
                alert('Selecione pelo menos um tipo de mapa e um local do X');
                    mapContainer.appendChild(mapElement);
                 return;
                 });
             }
             }
        };


        mapTypeSelect.addEventListener('change', updateMaps);
             filterMaps();
        locationSelect.addEventListener('change', updateMaps);
        filterCheckbox.addEventListener('change', () => {
             filterOptions.classList.toggle('hidden', !filterCheckbox.checked);
            updateMaps();
         });
         });
        filterOptionSelect.addEventListener('change', updateMaps);
        filterValueInput.addEventListener('input', updateMaps);
        filterButton.addEventListener('click', updateMaps);
     </script>
     </script>
</body>
</body>
</html>
</html>
Renee
Administradores
5 801

edições

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