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
 
(141 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 4: Linha 4:
     <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>
         .hidden {
         .input-group { margin-bottom: 1em; position: relative; }
        .dropdown {
            border: 1px solid #ccc;
             display: none;
             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 {
         .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: 20px;
         }
         }
         .image-container .image-item {
         .image-item {  
             flex: 1 0 45%;
             margin-bottom: 1em;  
            max-width: 45%;
             text-align: center;
             text-align: center;
         }
         }
         .image-container img {
         .image-item img {
             width: 200px;
             display: block;
            height: 200px;
             margin: 0 auto;
            object-fit: cover;
             margin-bottom: 10px;
         }
         }
         .image-info {
 
             margin-top: 5px;
         .variations-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
             margin-top: 1em;
         }
         }
         select, input[type="text"], button {
 
             margin: 5px;
         .variation-item {
            width: 30%;
            box-sizing: border-box;
             margin: 10px;
            text-align: center;
            border: 1px solid #ccc;
            padding: 10px;
         }
         }
         #searchButton {
 
             background: none; /* Remove o fundo do botão */
         .variation-item img {
             border: none; /* Remove a borda do botão */
             width: 100px;
             padding: 0; /* Remove o padding do botão */
             height: 100px;
             cursor: pointer; /* Mostra o cursor de ponteiro ao passar sobre o botão */
             display: block;
             margin: 0 auto 10px;
         }
         }
         #searchButton img {
 
             width: 12px;
         .swap-button {
             vertical-align: middle;
            margin-top: 10px;
            cursor: pointer;
             width: 15px;
             height: 15px;
            background: url('https://wiki.pokexgames.com/images/2/2d/Comvip.png') no-repeat center;
            background-size: contain;
            display: block;
            margin: 0 auto;
         }
         }
     </style>
     </style>
</head>
</head>
<body>
<body>
    <h1>Selecione o Tipo de Mapa ou Busque por ID</h1>
     <form id="imageForm">
 
         <div class="input-group">
     <form id="mapForm">
             <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">
         <div id="mapTypeSelection">
            <div id="dropdown" class="dropdown"></div>
            <label for="mapType">Tipo de Mapa:</label>
            <select id="mapType">
                <option value="">Selecione um mapa</option>
                <option value="1">Mapa Vermelho</option>
                <option value="2">Mapa Verde</option>
                <option value="3">Mapa Roxo</option>
            </select>
        </div>
 
        <div id="specificOptions" class="hidden">
            <label for="specificOption">Local do X:</label>
            <select id="specificOption">
                <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>
        </div>
 
        <div id="searchById">
            <label for="searchIds">Buscar por ID(s):</label>
             <input type="text" id="searchIds" placeholder="Digite os IDs separados por vírgula">
            <button type="button" id="searchButton">
                <img src="https://wiki.pokexgames.com/images/8/8e/Poke-ball%281%29.png" alt="Buscar">
            </button>
         </div>
         </div>


Linha 87: Linha 92:


     <script>
     <script>
         const specificOptions = {
         const imageList = {
             1: { // Mapa Vermelho
             'Charmander': {  
                 'Areia': [
                imageUrl: 'https://wiki.pokexgames.com/images/6/65/004-Charmander.png',
                     { id: '1001', local: 'Green Island', coordinates: '3780, 3326, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                 variations: [
                    { id: '1002', local: 'Wildwind Island', coordinates: '3969, 3300, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                     {  
                    { id: '1003', local: 'Wildwind Island', coordinates: '4002, 3320, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                        imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                    { id: '1004', local: 'Hurricane Island', coordinates: '4166, 3302, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                        description: 'Charmander XXX',
                    { id: '1005', local: 'Shell Island', coordinates: '4266, 3359, 7', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' },
                        obtain: {
                    { id: '1006', local: 'Shell Island', coordinates: '4299, 3333, 6', imageUrl: 'https://wiki.pokexgames.com/images/d/db/3780%2C_3326%2C_7.png' }
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                 ],
                            text: 'Estilista'
                // Outras opções do Mapa Vermelho
                        },
                        additionalImages: [
                            'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png', // Frente
                            'https://example.com/left1.png',   // Lado Esquerdo
                            'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',   // Costas
                            'https://example.com/right1.png'   // Lado Direito
                        ]
                    },
                    { 
                        imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                        description: 'Charmander brabo.',
                        obtain: {
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                            text: 'Estilista'
                        },
                        additionalImages: [
                            'https://example.com/front2.png', // Frente
                            'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',   // Lado Esquerdo
                            'https://example.com/back2.png',   // Costas
                            'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png'   // Lado Direito
                        ]
                    }
                 ]
             },
             },
            2: { // Mapa Verde
                // Adicionar dados para o Mapa Verde aqui
            },
            3: { // Mapa Roxo
                // Adicionar dados para o Mapa Roxo aqui
            }
         };
         };


         document.getElementById('mapType').addEventListener('change', function() {
         const imageSearch = document.getElementById('imageSearch');
            const selectedMapType = this.value;
        const dropdown = document.getElementById('dropdown');
            const specificOptionSelect = document.getElementById('specificOption');
        const imageContainer = document.getElementById('imageContainer');


             if (selectedMapType) {
        imageSearch.addEventListener('input', function() {
                specificOptionSelect.innerHTML = '<option value="">Selecione uma opção</option>';
             const searchValue = this.value.trim().toLowerCase();
                 const options = Object.keys(specificOptions[selectedMapType]);
            dropdown.innerHTML = '';
                options.forEach(option => {
 
                     specificOptionSelect.innerHTML += `<option value="${option}">${option}</option>`;
            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);
                    }
                 });
                 });
                 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('specificOption').addEventListener('change', function() {
         document.addEventListener('click', function(event) {
             const selectedMapType = document.getElementById('mapType').value;
             if (!imageSearch.contains(event.target) && !dropdown.contains(event.target)) {
            const selectedOption = this.value;
                dropdown.style.display = 'none';
             const imageContainer = document.getElementById('imageContainer');
             }
           
        });
            if (selectedMapType && selectedOption) {
 
                const images = specificOptions[selectedMapType][selectedOption];
        function showImageInfo(imageName) {
                let imagesHtml = '';
            const imageInfo = imageList[imageName];
            let imagesHtml = `
                <div class="image-item">
                    <img src="${imageInfo.imageUrl}" alt="${imageName}">
                </div>
                <div class="variations-container">
            `;


                if (Array.isArray(images)) {
            imageInfo.variations.forEach((variation, index) => {
                    images.forEach(image => {
                imagesHtml += `
                        imagesHtml += `
                    <div class="variation-item">
                            <div class="image-item">
                        <img src="${variation.additionalImages[0]}" alt="Variation Image" class="variation-image" data-variation-index="${index}">
                                <img src="${image.imageUrl}" alt="${selectedOption}">
                          <div class="swap-button" data-variation-index="${index}"></div>
                                <div class="image-info">
                         <div class="image-info">
                                    ID: ${image.id} <br>
                             <b>Nome do Addon</b>: ${variation.description}  
                                    Local: ${image.local} <br>
                             <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                                    Coordenada: ${image.coordinates}
                                </div>
                            </div>
                        `;
                    });
                } else {
                    imagesHtml = `
                         <div class="image-item">
                             <img src="${images.imageUrl}" alt="${selectedOption}">
                             <div class="image-info">
                                ID: ${images.id} <br>
                                Local: ${images.local} <br>
                                Coordenada: ${images.coordinates}
                            </div>
                         </div>
                         </div>
                     `;
                     </div>
                 }
                 `;
                imageContainer.innerHTML = imagesHtml;
             });
                imageContainer.classList.remove('hidden');
             } else {
                imageContainer.classList.add('hidden');
            }
        });


        document.getElementById('searchButton').addEventListener('click', function() {
             imagesHtml += '</div>';
             const searchIds = document.getElementById('searchIds').value.split(',').map(id => id.trim());
            const imageContainer = document.getElementById('imageContainer');


             if (searchIds.length > 0) {
             imageContainer.innerHTML = imagesHtml;
                let imagesHtml = '';
            imageContainer.classList.remove('hidden');
                let allImages = [];


                // Recolhe todas as imagens que correspondem aos IDs
            // Alternar imagens ao clicar no botão de troca
                Object.keys(specificOptions).forEach(mapType => {
            const swapButtons = document.querySelectorAll('.swap-button');
                    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
            swapButtons.forEach(button => {
                 allImages.sort((a, b) => a.local.localeCompare(b.local));
                 const index = button.getAttribute('data-variation-index');
                const variation = imageInfo.variations[index];
                let currentImageIndex = 0;


                 // Gera o HTML para exibir as imagens ordenadas
                 button.addEventListener('click', () => {
                allImages.forEach(image => {
                     currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
                     imagesHtml += `
                    const variationImage = button.previousElementSibling;
                        <div class="image-item">
                    variationImage.src = variation.additionalImages[currentImageIndex];
                            <img src="${image.imageUrl}" alt="Imagem ID ${image.id}">
                            <div class="image-info">
                                ID: ${image.id} <br>
                                Local: ${image.local} <br>
                                Coordenada: ${image.coordinates}
                            </div>
                        </div>
                    `;
                 });
                 });
 
             });
                imageContainer.innerHTML = imagesHtml || 'Nenhuma imagem encontrada com os IDs fornecidos.';
         }
                imageContainer.classList.remove('hidden');
             } else {
                imageContainer.classList.add('hidden');
            }
         });
     </script>
     </script>
</body>
</body>
</html>
</html>

Edição atual tal como às 03h33min de 17 de setembro 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: 30%;
           box-sizing: border-box;
           margin: 10px;
           text-align: center;
           border: 1px solid #ccc;
           padding: 10px;
       }

       .variation-item img {
           width: 100px;
           height: 100px;
           display: block;
           margin: 0 auto 10px;
       }

       .swap-button {
           margin-top: 10px;
           cursor: pointer;
           width: 15px;
           height: 15px;
           background: url('https://wiki.pokexgames.com/images/2/2d/Comvip.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 = {
           'Charmander': { 
               imageUrl: 'https://wiki.pokexgames.com/images/6/65/004-Charmander.png', 
               variations: [
                   { 
                       imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                       description: 'Charmander XXX',
                       obtain: {
                           url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                           text: 'Estilista'
                       },
                       additionalImages: [
                           'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',  // Frente
                           'https://example.com/left1.png',   // Lado Esquerdo
                           'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',   // Costas
                           'https://example.com/right1.png'   // Lado Direito
                       ]
                   },
                   {  
                       imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                       description: 'Charmander brabo.',
                       obtain: {
                           url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                           text: 'Estilista'
                       },
                       additionalImages: [
                           'https://example.com/front2.png',  // Frente
                           'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',   // Lado Esquerdo
                           'https://example.com/back2.png',   // Costas
                           'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.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]}" alt="Variation Image" class="variation-image" data-variation-index="${index}">

                           Nome do Addon: ${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;
                   variationImage.src = variation.additionalImages[currentImageIndex];
               });
           });
       }
   </script>

</body> </html>

Disponível em “https://wiki.pokexgames.com/index.php?title=Widget:Test&oldid=87075”