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

Ir para navegação Ir para pesquisar

Widget:Test3 (ver código-fonte)

Edição das 00h43min de 4 de setembro de 2024

804 bytes removidos ,  4 setembro
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 15: Linha 15:


         .maps__select,
         .maps__select,
         .input-group input[type="text"] {
         .input-group input[type="text"],
        .input-group button {
             width: 100%;
             width: 100%;
             padding: 10px;
             padding: 10px;
Linha 60: Linha 61:
             background-color: #15864e;
             background-color: #15864e;
             color: #fff;
             color: #fff;
        }
        .tag-button.disabled {
            background-color: #ddd;
            color: #999;
            cursor: not-allowed;
         }
         }


Linha 134: Linha 129:
         <label for="filterType">Filtrar Por</label>
         <label for="filterType">Filtrar Por</label>
         <select id="filterType" class="maps__select">
         <select id="filterType" class="maps__select">
            <option value="">Escolha uma Opção</option>
             <option value="number">Filtrar por Número</option>
             <option value="number">Filtrar por Número</option>
         </select>
         </select>
         <input type="text" id="searchIds" placeholder="Digite os números separados por vírgula">
         <input type="text" id="searchIds" placeholder="Digite os números separados por vírgula">
        <button id="filterButton" class="maps__select">Filtrar</button>
     </div>
     </div>


Linha 149: Linha 144:


     <script>
     <script>
        const tagMap = {
            'Areia': 'Areia',
            'Gelo': 'Gelo',
            'Grama': 'Grama',
            'Pedra': 'Pedra',
            'Subaquático': 'Água',
            'Terra': 'Terra',
            'Pisos': 'Piso'
        };
         const specificOptions = {
         const specificOptions = {
             1: { // Mapa Vermelho
             1: { // Mapa Vermelho
Linha 183: Linha 168:
         const enableFilter = document.getElementById('enableFilter');
         const enableFilter = document.getElementById('enableFilter');
         const searchIdsInput = document.getElementById('searchIds');
         const searchIdsInput = document.getElementById('searchIds');
        const filterButton = document.getElementById('filterButton');


         function updateTags() {
         function updateTags() {
Linha 204: Linha 190:
                 button.classList.add('tag-button');
                 button.classList.add('tag-button');
                 button.addEventListener('click', () => {
                 button.addEventListener('click', () => {
                     if (!button.classList.contains('disabled')) {
                     button.classList.toggle('selected');
                        button.classList.toggle('selected');
                    filterImages();
                        filterImages();
                    }
                 });
                 });
                 tagButtons.appendChild(button);
                 tagButtons.appendChild(button);
             });
             });
            // Automatically disable the tag corresponding to the selected option
            if (selectedOption && tagMap[selectedOption]) {
                const autoDisabledTag = tagMap[selectedOption];
                const tagButton = Array.from(tagButtons.children).find(btn => btn.textContent === autoDisabledTag);
                if (tagButton) {
                    tagButton.classList.add('disabled');
                    tagButton.removeEventListener('click', () => {
                        // Prevent clicks on the disabled button
                    });
                }
            }


             tagButtons.classList.toggle('hidden', tags.length === 0);
             tagButtons.classList.toggle('hidden', tags.length === 0);
Linha 243: Linha 214:
                     if (selectedOption && options[selectedOption]) {
                     if (selectedOption && options[selectedOption]) {
                         itemsToFilter = options[selectedOption];
                         itemsToFilter = options[selectedOption];
                    }
                }
            } else {
                // If no map type is selected, gather items from all map types
                for (const mapType in specificOptions) {
                    for (const local in specificOptions[mapType]) {
                        itemsToFilter = itemsToFilter.concat(specificOptions[mapType][local]);
                     }
                     }
                 }
                 }
Linha 256: Linha 234:
             }
             }


            itemsToFilter.forEach(item => {
                          itemsToFilter.forEach(item => {
                const imgItem = document.createElement('div');
                    const imgItem = document.createElement('div');
                imgItem.classList.add('image-item');
                    imgItem.classList.add('image-item');
                imgItem.innerHTML = `
                    imgItem.innerHTML = `
                    <img src="${item.imageUrl}" alt="Mapa">
                        <img src="${item.imageUrl}" alt="Mapa">
                    <div class="image-info">
                        <div class="image-info">
                        <p><strong>Número:</strong> ${item.id}</p>
                            <p><strong>Número:</strong> ${item.id}</p>
                        <p><strong>Local:</strong> ${item.local}</p>
                            <p><strong>Local:</strong> ${item.local}</p>
                        <p><strong>Coordenada:</strong> ${item.coordinates}</p>
                            <p><strong>Coordenada:</strong> ${item.coordinates}</p>
                        <p><strong>Tag(s):</strong> ${item.tags.join(', ')}</p>
                            <p><strong>Tag(s):</strong> ${item.tags.join(', ')}</p>
                    </div>
                        </div>
                `;
                    `;
                imageContainer.appendChild(imgItem);
                    imageContainer.appendChild(imgItem);
            });
                });
         }
         }


         mapTypeSelect.addEventListener('change', updateTags);
         function toggleFilter() {
        specificOptionSelect.addEventListener('change', updateTags);
            const isChecked = enableFilter.checked;
            filterOptions.classList.toggle('hidden', !isChecked);
            mapTypeSelect.disabled = isChecked;
            specificOptionSelect.disabled = isChecked;
            tagButtons.classList.toggle('hidden', !isChecked);
            searchIdsInput.value = '';
            imageContainer.innerHTML = ''; // Clear images when filter is enabled
        }


         enableFilter.addEventListener('change', () => {
         function resetFilter() {
             const isActive = enableFilter.checked;
             enableFilter.checked = false;
             document.querySelectorAll('.input-group select').forEach(select => {
             toggleFilter();
                select.disabled = isActive;
            mapTypeSelect.value = '';
                if (isActive) select.value = ''; // Reset selects
            specificOptionSelect.value = '';
             });
            searchIdsInput.value = '';
             filterImages();
        }


            if (isActive) {
        enableFilter.addEventListener('change', toggleFilter);
                filterOptions.classList.remove('hidden');
        filterButton.addEventListener('click', () => {
                tagButtons.classList.add('hidden');
            filterImages();
                searchIdsInput.addEventListener('input', filterImages);
                filterImages(); // Inicialmente não exibe mapas
            } else {
                filterOptions.classList.add('hidden');
                tagButtons.classList.remove('hidden');
                searchIdsInput.value = '';
                document.querySelectorAll('.tag-button.selected').forEach(button => {
                    button.classList.remove('selected');
                });
                filterImages(); // Exibe todos os mapas
            }
         });
         });


         searchIdsInput.addEventListener('input', filterImages);
         // Initialize with the filter deactivated
        toggleFilter();
     </script>
     </script>
</body>
</body>
</html>
</html>
Renee
Administradores
5 805

edições

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

Menu de navegação