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

De PokeXGames
Ir para navegação Ir para pesquisar
Sem resumo de edição
Sem resumo de edição
 
(73 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="pt-BR">
<html lang="pt-BR">
<head>
<head>
     <meta charset="UTF-8">
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Seleção e Exibição de Imagens</title>
     <title>Busca de Imagens por Nome</title>
     <style>
     <style>
         .d-flex {
         .input-group { margin-bottom: 1em; position: relative; }
        .dropdown {
            border: 1px solid #ccc;
            display: none;
            position: absolute;
            background-color: #fff;
            z-index: 1000;
            max-height: 150px;
            overflow-y: auto;
            width: 100%;
        }
        .dropdown-item {
            padding: 8px;
            cursor: pointer;
             display: flex;
             display: flex;
            justify-content: center;
             align-items: center;
             align-items: center;
            flex-direction: column;
            margin-top: -15px;
         }
         }
 
        .dropdown-item img {
         .hidden {
            margin-right: 10px;
             display: none;
        }
         .dropdown-item:hover {
             background-color: #f0f0f0;
         }
         }
         .image-container {
         .image-container {
             display: flex;
             display: flex;
             flex-wrap: wrap;
             flex-direction: column;
            align-items: center;
             justify-content: center;
             justify-content: center;
            gap: 10px;
            margin-top: 5px;
         }
         }
 
         .image-item {  
         .image-container .image-item {
             margin-bottom: 1em;  
             flex: 1 0 30%;
             text-align: center;
             text-align: center;
         }
         }
 
         .image-item img {
         .image-container img {
             display: block;
             object-fit: cover;
             margin: 0 auto;
             margin-bottom: 5px;
        }
 
        .image-info {
            margin-top: 5px;
        }
 
        select,
        input[type="text"],
        button {
            margin: 5px;
        }
 
        #filterButton,
        #searchButton {
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            margin-top: 5px;
        }
 
        #filterButton img,
        #searchButton img {
            border-radius: 12px;
            width: auto;
            height: auto;
         }
         }


         .mw-body-content {
         .variations-container {
             display: flex;
             display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 1em;
         }
         }


         .mw-parser-output {
         .variation-item {
             display: inline-block;
             width: 35%;
            padding: .5rem 2rem;
            margin: 0 auto;
            border: 30px solid transparent;
            border-image: url(https://wiki.pokexgames.com/images/3/37/Calculadora-de-Boost.png) 38;
            min-width: 340px;
            min-height: 270px;
        }
 
        .input-group {
            position: relative;
            margin: 20px 0;
        }
 
        .input-group label {
            position: absolute;
            top: -18px;
            background: none;
            padding: 0 5px;
            font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
        }
 
        .maps__select {
            width: 100%;
            padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
            appearance: none;
            background-color: #fff;
             box-sizing: border-box;
             box-sizing: border-box;
        }
            margin: 5px;
 
            text-align: center;
        .input-group input[type="text"] {
             border: 1px solid ;
             width: 100%;
             padding: 10px;
             padding: 10px;
            font-size: 16px;
            border-radius: 5px;
            border: 1px solid #ccc;
            box-sizing: border-box;
         }
         }


         .maps__label {
         .variation-item img {
             position: absolute;
             display: block;
            top: -18px;
             margin: 0 auto 10px;
            background: none;
             padding: 0 5px;
            font-size: 14px;
            font-weight: bold;
            color: #0d0d0d;
         }
         }


         .hover-minimize:hover {
         .swap-button {  
             transform: scale(0.95);
             margin-top: 10px;
        }
             cursor: pointer;
 
             width: 15px;
        .filter-container {
             height: 15px;
            display: flex;
             background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center;
            align-items: center;
             background-size: contain;
        }
             display: block;
 
             margin: 0 auto;
        .filter-container input[type="checkbox"] {
            margin: 0;
             padding: 0;
             width: auto;
             height: auto;
             vertical-align: middle;
        }
 
        .filter-label {
            margin-left: 10px;
             font-size: 14px;
             font-weight: bold;
             color: #0d0d0d;
            line-height: 1.5;
         }
         }
     </style>
     </style>
</head>
</head>
<body>
<body>
     <form id="mapForm">
     <form id="imageForm">
         <div id="mapTypeSelection" class="input-group">
         <div class="input-group">
            <select id="mapType" class="maps__select">
             <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">
                <option value="">Selecione um mapa</option>
             <div id="dropdown" class="dropdown"></div>
                <option value="1">Mapa Vermelho</option>
                <option value="2">Mapa Verde</option>
                <option value="3">Mapa Roxo</option>
            </select>
            <label class="maps__label" for="mapType">Tipo de Mapa</label>
        </div>
 
        <div id="specificOptions" class="hidden input-group">
            <select id="specificOption" class="maps__select">
                <option value="">Selecione uma opção</option>
                <option value="Areia">Areia</option>
                <option value="Gelo">Gelo</option>
                <option value="Grama">Grama</option>
                <option value="Pedra">Pedra</option>
                <option value="Subaquático">Subaquático</option>
                <option value="Terra">Terra</option>
                <option value="Pisos">Pisos</option>
            </select>
            <label class="maps__label" for="specificOption">Local do X</label>
        </div>
 
        <div class="filter-container">
             <input type="checkbox" id="enableFilter">
            <label for="enableFilter" class="filter-label">Ativar filtro</label>
        </div>
 
        <div id="filterSection" class="hidden">
            <div id="filterOptions" class="hidden">
                <label for="filterMode" class="maps__label">Modo de Filtro:</label>
                <select id="filterMode" class="maps__select">
                    <option value="number">Filtrar por Número</option>
                    <option value="tag">Filtrar por Tag</option>
                </select>
            </div>
 
            <div id="filterById" class="input-group">
                <label for="searchIds" class="maps__label">Buscar por Nº do Mapa:</label>
                <input type="text" id="searchIds" placeholder="Digite os números separados por vírgula" class="maps__select">
             </div>
 
            <div class="d-flex justify-center align-center flex-column">
                <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>
            </div>
         </div>
         </div>


Linha 207: Linha 90:


     <script>
     <script>
         const specificOptions = {
         const imageList = {
             1: {
             'Squirtle': {  
                 'Areia': [
                 imageUrl: 'https://wiki.pokexgames.com/images/7/7a/007-Squirtle.png',
                     { id: '101', local: 'Green Island', coordinates: '3780, 3326, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                variations: [
                ],
                     {  
            },
                        description: 'Squirtle Purple Ninja Pack',
            2: {
                        descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                'Areia': [
                        obtain: {
                     { id: '1001', local: 'Outland Water', tag: 'agua', coordinates: '2847, 2827, 6', imageUrl: 'https://wiki.pokexgames.com/images/b/b9/Mapa_Verde_ADV_-_2847%2C_2827%2C_6.webp' },
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                    { id: '1002', local: 'Outland Water', coordinates: '2863, 2850, 6', imageUrl: 'https://wiki.pokexgames.com/images/c/c9/Mapa_Verde_ADV_-_2863%2C_2850%2C_6.webp' },
                            text: 'Estilista'
                 ],
                        },
                        additionalImages: [
                            { url: 'https://wiki.pokexgames.com/images/d/dd/Squirtle_Purple_Ninja_Pack_Frente.png'}, // Frente
                            { url: 'https://wiki.pokexgames.com/images/5/50/Squirtle_Purple_Ninja_Pack_Esquerda.png'}, // Lado Esquerdo
                            { url: 'https://wiki.pokexgames.com/images/a/af/Squirtle_Purple_Ninja_Pack_Direita.png'}, // Costas
                            { url: 'https://wiki.pokexgames.com/images/5/5d/Squirtle_Purple_Ninja_Pack_Costas.png'}  // Lado Direito
                        ]
                    },
                     {
                        description: 'Squirtle Red Ninja Pack',
                        descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                        obtain: {
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                            text: 'Estilista'
                        },
                        additionalImages: [
                            { url: 'https://wiki.pokexgames.com/images/1/13/Squirtle_Red_Ninja_Pack_Frente.png'}, // Frente
                            { url: 'https://wiki.pokexgames.com/images/1/1e/Squirtle_Red_Ninja_Pack_Esquerda.png'}, // Lado Esquerdo
                            { url: 'https://wiki.pokexgames.com/images/0/01/Squirtle_Red_Ninja_Pack_Costas.png'}, // Costas
                            { url: 'https://wiki.pokexgames.com/images/f/fd/Squirtle_Red_Ninja_Pack_Direita.png'} // Lado Direito
                        ]
                    }
                 ]
             },
             },
            3: {
                // Adicionar dados para o Mapa Roxo aqui
            }
         };
         };


         document.getElementById('enableFilter').addEventListener('change', function () {
         const imageSearch = document.getElementById('imageSearch');
            const filterSection = document.getElementById('filterSection');
        const dropdown = document.getElementById('dropdown');
            const filterOptions = document.getElementById('filterOptions');
         const imageContainer = document.getElementById('imageContainer');
            if (this.checked) {
                filterSection.classList.remove('hidden');
                filterOptions.classList.remove('hidden');
            } else {
                filterSection.classList.add('hidden');
                filterOptions.classList.add('hidden');
            }
        });
 
         document.getElementById('filterMode').addEventListener('change', function () {
            const filterMode = this.value;
            const searchIds = document.getElementById('searchIds');
            if (filterMode === 'number') {
                searchIds.placeholder = "Digite os números separados por vírgula";
            } else if (filterMode === 'tag') {
                searchIds.placeholder = "Digite as tags separadas por vírgula";
            }
        });


         document.getElementById('mapType').addEventListener('change', function () {
         imageSearch.addEventListener('input', function() {
             const selectedMapType = this.value;
             const searchValue = this.value.trim().toLowerCase();
             const specificOptionSelect = document.getElementById('specificOption');
             dropdown.innerHTML = '';


             if (selectedMapType) {
             if (searchValue) {
                 specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>';
                 Object.keys(imageList).forEach(imageName => {
                const options = Object.keys(specificOptions[selectedMapType]);
                    if (imageName.toLowerCase().includes(searchValue)) {
                options.forEach(option => {
                        const dropdownItem = document.createElement('div');
                    specificOptionSelect.innerHTML += `<option value="${option}">${option}</option>`;
                        dropdownItem.classList.add('dropdown-item');
                       
                        const imgElement = document.createElement('img');
                        imgElement.src = imageList[imageName].imageUrl;
                        imgElement.alt = imageName;
                       
                        dropdownItem.appendChild(imgElement);
                        dropdownItem.appendChild(document.createTextNode(imageName));
                       
                        dropdownItem.addEventListener('click', function() {
                            showImageInfo(imageName);
                            dropdown.style.display = 'none';
                        });
                        dropdown.appendChild(dropdownItem);
                    }
                 });
                 });
                 document.getElementById('specificOptions').classList.remove('hidden');
 
                 dropdown.style.display = dropdown.childNodes.length ? 'block' : 'none';
             } else {
             } else {
                 document.getElementById('specificOptions').classList.add('hidden');
                 dropdown.style.display = 'none';
             }
             }
         });
         });


         document.getElementById('filterButton').addEventListener('click', function () {
         document.addEventListener('click', function(event) {
             const filterMode = document.getElementById('filterMode').value;
             if (!imageSearch.contains(event.target) && !dropdown.contains(event.target)) {
            const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim());
                dropdown.style.display = 'none';
            const selectedMapType = document.getElementById('mapType').value;
            const selectedOption = document.getElementById('specificOption').value;
            const imageContainer = document.getElementById('imageContainer');
 
            if (!selectedMapType || !selectedOption) {
                alert("Selecione pelo menos um tipo de mapa");
                return;
             }
             }
        });


            if (filterMode === 'number') {
function showImageInfo(imageName) {
                // Filtrar por número
    const imageInfo = imageList[imageName];
                if (searchIds.length > 0) {
    let imagesHtml = `
                    let imagesHtml = '';
        <div class="image-item">
                    let allImages = [];
            <img src="${imageInfo.imageUrl}" alt="${imageName}">
        </div>
        <div class="variations-container">
    `;


                    // Recolhe todas as imagens que correspondem aos IDs
    imageInfo.variations.forEach((variation, index) => {
                    Object.keys(specificOptions).forEach(mapType => {
        imagesHtml += `
                        const mapOptions = specificOptions[mapType];
            <div class="variation-item">
                        Object.keys(mapOptions).forEach(option => {
                <img src="${variation.additionalImages[0].url}" alt="Variation Image" class="variation-image" data-variation-index="${index}" style="width: ${variation.additionalImages[0].width}px;">
                            const images = mapOptions[option].filter(image => searchIds.includes(image.id));
                <div class="swap-button" data-variation-index="${index}"></div><br>
                            allImages = allImages.concat(images);
                <div class="image-info">
                        });
                    <img src="${variation.descriptionIMG}" alt="Description Image" style="margin-right: 5px; display: inline-block;"> <!-- Exibe a imagem antes da descrição -->
                    });
                    <br> ${variation.description} <br> <!-- Descrição após a imagem -->
                    <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                </div>
            </div>
        `;
    });


                    // Ordena as imagens pelo nome do local
    imagesHtml += '</div>';
                    allImages.sort((a, b) => a.local.localeCompare(b.local));


                    // Gera o HTML para exibir as imagens ordenadas
    imageContainer.innerHTML = imagesHtml;
                    allImages.forEach(image => {
    imageContainer.classList.remove('hidden');
                        imagesHtml += `
                            <div class="image-item">
                                <img src="${image.imageUrl}" alt="Imagem ID ${image.id}">
                                <div class="image-info">
                                    <b>Número do Mapa</b>: ${image.id} <br>
                                    <b>Local</b>: ${image.local} <br>
                                    <b>Coordenada</b>: ${image.coordinates}
                                    <b>Tag</b>: ${image.tag} <br>
                                </div>
                            </div>
                        `;
                    });


                    imageContainer.innerHTML = imagesHtml || 'Nenhuma imagem encontrada com os números fornecidos.';
    // Alternar imagens ao clicar no botão de troca
                    imageContainer.classList.remove('hidden');
    const swapButtons = document.querySelectorAll('.swap-button');
                } else {
                    imageContainer.classList.add('hidden');
                }
            } else if (filterMode === 'tag') {
                // Filtrar por tag
                if (searchIds.length > 0) {
                    let imagesHtml = '';
                    let allImages = [];


                    // Recolhe todas as imagens que correspondem às tags
    swapButtons.forEach(button => {
                    Object.keys(specificOptions).forEach(mapType => {
        const index = button.getAttribute('data-variation-index');
                        const mapOptions = specificOptions[mapType];
        const variation = imageInfo.variations[index];
                        Object.keys(mapOptions).forEach(option => {
        let currentImageIndex = 0;
                            const images = mapOptions[option].filter(image => searchIds.includes(image.tag));
                            allImages = allImages.concat(images);
                        });
                    });


                    // Ordena as imagens pelo nome do local
        button.addEventListener('click', () => {
                    allImages.sort((a, b) => a.local.localeCompare(b.local));
            currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
            const variationImage = button.previousElementSibling; // Atualiza a imagem da variação
            variationImage.src = variation.additionalImages[currentImageIndex].url;
            variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`;
        });
    });
}


                    // Gera o HTML para exibir as imagens ordenadas
                    allImages.forEach(image => {
                        imagesHtml += `
                            <div class="image-item">
                                <img src="${image.imageUrl}" alt="Imagem Tag ${image.tag}">
                                <div class="image-info">
                                    <b>Número do Mapa</b>: ${image.id} <br>
                                    <b>Local</b>: ${image.local} <br>
                                    <b>Coordenada</b>: ${image.coordinates}
                                    <b>Tag</b>: ${image.tag} <br>
                                </div>
                            </div>
                        `;
                    });
                    imageContainer.innerHTML = imagesHtml || 'Nenhuma imagem encontrada com as tags fornecidas.';
                    imageContainer.classList.remove('hidden');
                } else {
                    imageContainer.classList.add('hidden');
                }
            }
        });
     </script>
     </script>
</body>
</body>
</html>
</html>

Edição atual tal como às 23h45min de 16 de outubro 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>Busca de Imagens por Nome</title>
   <style>
       .input-group { margin-bottom: 1em; position: relative; }
       .dropdown {
           border: 1px solid #ccc;
           display: none;
           position: absolute;
           background-color: #fff;
           z-index: 1000;
           max-height: 150px;
           overflow-y: auto;
           width: 100%;
       }
       .dropdown-item {
           padding: 8px;
           cursor: pointer;
           display: flex;
           align-items: center;
       }
       .dropdown-item img {
           margin-right: 10px;
       }
       .dropdown-item:hover {
           background-color: #f0f0f0;
       }
       .image-container {
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
       }
       .image-item { 
           margin-bottom: 1em; 
           text-align: center;
       }
       .image-item img {
           display: block;
           margin: 0 auto;
       }
       .variations-container {
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           margin-top: 1em;
       }
       .variation-item {
           width: 35%;
           box-sizing: border-box;
           margin: 5px;
           text-align: center;
           border: 1px solid ;
           padding: 10px;
       }
       .variation-item img {
           display: block;
           margin: 0 auto 10px;
       }
       .swap-button { 
           margin-top: 10px;
           cursor: pointer;
           width: 15px;
           height: 15px;
           background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center;
           background-size: contain;
           display: block;
           margin: 0 auto;
       }
   </style>

</head> <body>

   <form id="imageForm">
           <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">
   </form>
   <script>
       const imageList = {
           'Squirtle': { 
               imageUrl: 'https://wiki.pokexgames.com/images/7/7a/007-Squirtle.png', 
               variations: [
                   { 
                       description: 'Squirtle Purple Ninja Pack',
                       descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                       obtain: {
                           url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                           text: 'Estilista'
                       },
                       additionalImages: [
                           { url: 'https://wiki.pokexgames.com/images/d/dd/Squirtle_Purple_Ninja_Pack_Frente.png'}, // Frente
                           { url: 'https://wiki.pokexgames.com/images/5/50/Squirtle_Purple_Ninja_Pack_Esquerda.png'}, // Lado Esquerdo
                           { url: 'https://wiki.pokexgames.com/images/a/af/Squirtle_Purple_Ninja_Pack_Direita.png'}, // Costas
                           { url: 'https://wiki.pokexgames.com/images/5/5d/Squirtle_Purple_Ninja_Pack_Costas.png'}  // Lado Direito
                       ]
                   },
                   {  
                       description: 'Squirtle Red Ninja Pack',
                       descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                       obtain: {
                           url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                           text: 'Estilista'
                       },
                       additionalImages: [
                           { url: 'https://wiki.pokexgames.com/images/1/13/Squirtle_Red_Ninja_Pack_Frente.png'}, // Frente
                           { url: 'https://wiki.pokexgames.com/images/1/1e/Squirtle_Red_Ninja_Pack_Esquerda.png'}, // Lado Esquerdo
                           { url: 'https://wiki.pokexgames.com/images/0/01/Squirtle_Red_Ninja_Pack_Costas.png'}, // Costas
                           { url: 'https://wiki.pokexgames.com/images/f/fd/Squirtle_Red_Ninja_Pack_Direita.png'}  // Lado Direito
                       ]
                   }
               ]
           },
       };
       const imageSearch = document.getElementById('imageSearch');
       const dropdown = document.getElementById('dropdown');
       const imageContainer = document.getElementById('imageContainer');
       imageSearch.addEventListener('input', function() {
           const searchValue = this.value.trim().toLowerCase();
           dropdown.innerHTML = ;
           if (searchValue) {
               Object.keys(imageList).forEach(imageName => {
                   if (imageName.toLowerCase().includes(searchValue)) {
                       const dropdownItem = document.createElement('div');
                       dropdownItem.classList.add('dropdown-item');
                       
                       const imgElement = document.createElement('img');
                       imgElement.src = imageList[imageName].imageUrl;
                       imgElement.alt = imageName;
                       
                       dropdownItem.appendChild(imgElement);
                       dropdownItem.appendChild(document.createTextNode(imageName));
                       
                       dropdownItem.addEventListener('click', function() {
                           showImageInfo(imageName);
                           dropdown.style.display = 'none';
                       });
                       dropdown.appendChild(dropdownItem);
                   }
               });
               dropdown.style.display = dropdown.childNodes.length ? 'block' : 'none';
           } else {
               dropdown.style.display = 'none';
           }
       });
       document.addEventListener('click', function(event) {
           if (!imageSearch.contains(event.target) && !dropdown.contains(event.target)) {
               dropdown.style.display = 'none';
           }
       });

function showImageInfo(imageName) {

   const imageInfo = imageList[imageName];
   let imagesHtml = `
           <img src="${imageInfo.imageUrl}" alt="${imageName}">
   `;
   imageInfo.variations.forEach((variation, index) => {
       imagesHtml += `
                <img src="${variation.additionalImages[0].url}" alt="Variation Image" class="variation-image" data-variation-index="${index}" style="width: ${variation.additionalImages[0].width}px;">

                   <img src="${variation.descriptionIMG}" alt="Description Image" style="margin-right: 5px; display: inline-block;"> 
                   
${variation.description}
Como Obter: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
       `;
   });
imagesHtml += '

';

   imageContainer.innerHTML = imagesHtml;
   imageContainer.classList.remove('hidden');
   // Alternar imagens ao clicar no botão de troca
   const swapButtons = document.querySelectorAll('.swap-button');
   swapButtons.forEach(button => {
       const index = button.getAttribute('data-variation-index');
       const variation = imageInfo.variations[index];
       let currentImageIndex = 0;
       button.addEventListener('click', () => {
           currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
           const variationImage = button.previousElementSibling; // Atualiza a imagem da variação
           variationImage.src = variation.additionalImages[currentImageIndex].url;
           variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`;
       });
   });

}

   </script>

</body> </html>