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

Ir para navegação Ir para pesquisar

Widget:Test (ver código-fonte)

Edição das 11h45min de 23 de agosto de 2024

109 bytes adicionados ,  23 agosto
sem sumário de edição
Sem resumo de edição
Sem resumo de edição
Linha 17: Linha 17:
         }
         }
         .image-container .image-item {
         .image-container .image-item {
             flex: 1 0 45%;
             flex: 1 0 30%;
             max-width: 45%;
             max-width: 45%;
             text-align: center;
             text-align: center;
         }
         }
         .image-container img {
         .image-container img {
             width: 200px;
             width: 320px;
            height: 200px;
             margin-bottom: 5px;
            object-fit: cover;
             margin-bottom: 10px;
         }
         }
         .image-info {
         .image-info {
             margin-top: 5px;
             margin-top: 2px;
         }
         }
         select, input[type="text"] {
         select, input[type="text"] {
Linha 36: Linha 34:
</head>
</head>
<body>
<body>
     <h1>Selecione o Tipo de Mapa</h1>
     <h1>Selecione o Tipo de Mapa ou Busque por ID</h1>


     <form id="mapForm">
     <form id="mapForm">
Linha 63: Linha 61:
         </div>
         </div>


         <div id="searchById" class="hidden">
         <div id="searchById">
             <label for="searchIds">Buscar por ID(s):</label>
             <label for="searchIds">Buscar por ID(s):</label>
             <input type="text" id="searchIds" placeholder="Digite os IDs separados por vírgula">
             <input type="text" id="searchIds" placeholder="Digite os IDs separados por vírgula">
Linha 114: Linha 112:
                 });
                 });
                 document.getElementById('specificOptions').classList.remove('hidden');
                 document.getElementById('specificOptions').classList.remove('hidden');
                document.getElementById('searchById').classList.remove('hidden');
             } else {
             } else {
                 document.getElementById('specificOptions').classList.add('hidden');
                 document.getElementById('specificOptions').classList.add('hidden');
                document.getElementById('searchById').classList.add('hidden');
             }
             }
         });
         });
Linha 163: Linha 159:


         document.getElementById('searchButton').addEventListener('click', function() {
         document.getElementById('searchButton').addEventListener('click', function() {
            const selectedMapType = document.getElementById('mapType').value;
             const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim());
             const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim());
             const imageContainer = document.getElementById('imageContainer');
             const imageContainer = document.getElementById('imageContainer');


             if (selectedMapType && searchIds.length > 0) {
             if (searchIds.length > 0) {
                 let imagesHtml = '';
                 let imagesHtml = '';
                 const mapOptions = specificOptions[selectedMapType];
                 let allImages = [];
 
                // Recolhe todas as imagens que correspondem aos IDs
                Object.keys(specificOptions).forEach(mapType => {
                    const mapOptions = specificOptions[mapType];
                    Object.keys(mapOptions).forEach(option => {
                        const images = mapOptions[option].filter(image => searchIds.includes(image.id));
                        allImages = allImages.concat(images);
                    });
                });
 
                // Ordena as imagens pelo nome do local
                allImages.sort((a, b) => a.local.localeCompare(b.local));


                 Object.keys(mapOptions).forEach(option => {
                 // Gera o HTML para exibir as imagens ordenadas
                    const images = mapOptions[option].filter(image => searchIds.includes(image.id));
                allImages.forEach(image => {
                    images.forEach(image => {
                    imagesHtml += `
                        imagesHtml += `
                        <div class="image-item">
                            <div class="image-item">
                            <img src="${image.imageUrl}" alt="Imagem ID ${image.id}">
                                <img src="${image.imageUrl}" alt="${option}">
                            <div class="image-info">
                                <div class="image-info">
                                ID: ${image.id} <br>
                                    ID: ${image.id} <br>
                                Local: ${image.local} <br>
                                    Local: ${image.local} <br>
                                Coordenada: ${image.coordinates}
                                    Coordenada: ${image.coordinates}
                                </div>
                             </div>
                             </div>
                         `;
                         </div>
                     });
                     `;
                 });
                 });


Renee
Administradores
5 802

edições

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

Menu de navegação