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
 
(158 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%;
         }
         }
         .image-container img {
        .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;
             width: 100px;
             height: 100px;
             height: 100px;
             margin: 5px;
            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>
     </style>
</head>
</head>
<body>
<body>
    <h1>Selecione o Tipo de Mapa</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><input type="radio" name="mapType" value="1" class="map-type"> Tipo de Mapa 1</label>
             <label><input type="radio" name="mapType" value="2" class="map-type"> Tipo de Mapa 2</label>
             <label><input type="radio" name="mapType" value="3" class="map-type"> Tipo de Mapa 3</label>
        </div>
 
        <div id="specificOptions" class="hidden">
            <!-- Opções específicas aparecerão aqui -->
         </div>
         </div>


         <div id="imageContainer" class="image-container hidden">
         <div id="imageContainer" class="image-container hidden">
             <!-- As imagens filtradas serão exibidas aqui -->
             <!-- As imagens e suas informações serão exibidas aqui -->
         </div>
         </div>
     </form>
     </form>


     <script>
     <script>
         const specificOptions = {
         const imageList = {
             1: ['Option 1-1', 'Option 1-2', 'Option 1-3'],
             'Charmander': {
            2: ['Option 2-1', 'Option 2-2', 'Option 2-3', 'Option 2-4'],
                imageUrl: 'https://wiki.pokexgames.com/images/6/65/004-Charmander.png',
            3: ['Option 3-1', 'Option 3-2']
                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 images = {
         const imageSearch = document.getElementById('imageSearch');
            'Option 1-1': 'https://wiki.pokexgames.com/images/b/bc/BagOfPollem.png',
        const dropdown = document.getElementById('dropdown');
            'Option 1-2': 'https://wiki.pokexgames.com/images/4/43/AnotherImage.png',
        const imageContainer = document.getElementById('imageContainer');
            'Option 1-3': 'https://wiki.pokexgames.com/images/3/34/DifferentImage.png',
 
            'Option 2-1': 'https://wiki.pokexgames.com/images/c/c4/ExampleImage.png',
        imageSearch.addEventListener('input', function() {
            'Option 2-2': 'https://wiki.pokexgames.com/images/5/56/AnotherExample.png',
             const searchValue = this.value.trim().toLowerCase();
            'Option 2-3': 'https://wiki.pokexgames.com/images/a/a6/SampleImage.png',
             dropdown.innerHTML = '';
             'Option 2-4': 'https://wiki.pokexgames.com/images/d/d7/FinalExample.png',
             'Option 3-1': 'https://wiki.pokexgames.com/images/e/e8/MapType3Option1.png',
            'Option 3-2': 'https://wiki.pokexgames.com/images/f/f9/MapType3Option2.png'
        };


        document.querySelectorAll('.map-type').forEach(radio => {
            if (searchValue) {
            radio.addEventListener('change', function() {
                Object.keys(imageList).forEach(imageName => {
                const selectedMapType = this.value;
                    if (imageName.toLowerCase().includes(searchValue)) {
                const optionsDiv = document.getElementById('specificOptions');
                        const dropdownItem = document.createElement('div');
                const imageContainer = document.getElementById('imageContainer');
                        dropdownItem.classList.add('dropdown-item');
               
                       
                optionsDiv.innerHTML = '';
                        const imgElement = document.createElement('img');
                imageContainer.innerHTML = '';
                        imgElement.src = imageList[imageName].imageUrl;
               
                        imgElement.alt = imageName;
                if (selectedMapType) {
                       
                    const options = specificOptions[selectedMapType];
                        dropdownItem.appendChild(imgElement);
                    options.forEach(option => {
                        dropdownItem.appendChild(document.createTextNode(imageName));
                         optionsDiv.innerHTML += `
                       
                             <label>
                         dropdownItem.addEventListener('click', function() {
                                <input type="radio" name="specificOption" value="${option}" class="specific-option"> ${option}
                             showImageInfo(imageName);
                            </label>
                            dropdown.style.display = 'none';
                         `;
                        });
                     });
                         dropdown.appendChild(dropdownItem);
                     }
                });


                    optionsDiv.classList.remove('hidden');
                dropdown.style.display = dropdown.childNodes.length ? 'block' : 'none';
                }
            } else {
                  
                 dropdown.style.display = 'none';
                imageContainer.classList.add('hidden');
             }
             });
         });
         });


         document.getElementById('specificOptions').addEventListener('change', function() {
         document.addEventListener('click', function(event) {
             const selectedOption = document.querySelector('input[name="specificOption"]:checked');
             if (!imageSearch.contains(event.target) && !dropdown.contains(event.target)) {
            const imageContainer = document.getElementById('imageContainer');
                 dropdown.style.display = 'none';
           
            imageContainer.innerHTML = '';
           
            if (selectedOption) {
                 const optionValue = selectedOption.value;
                if (images[optionValue]) {
                    imageContainer.innerHTML = `<img src="${images[optionValue]}" alt="${optionValue}">`;
                    imageContainer.classList.remove('hidden');
                }
             }
             }
         });
         });
        function showImageInfo(imageName) {
            const imageInfo = imageList[imageName];
            let imagesHtml = `
                <div class="image-item">
                    <img src="${imageInfo.imageUrl}" alt="${imageName}">
                </div>
                <div class="variations-container">
            `;
            imageInfo.variations.forEach((variation, index) => {
                imagesHtml += `
                    <div class="variation-item">
                        <img src="${variation.additionalImages[0]}" alt="Variation Image" class="variation-image" data-variation-index="${index}">
                          <div class="swap-button" data-variation-index="${index}"></div>
                        <div class="image-info">
                            <b>Nome do Addon</b>: ${variation.description}
                            <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                        </div>
                    </div>
                `;
            });
            imagesHtml += '</div>';
            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>
     </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”