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
 
(41 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>
         .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,
         .variations-container {
        #searchButton img {
            border-radius: 12px;
            width: auto;
            height: auto;
        }
 
         .mw-body-content {
             display: flex;
             display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 1em;
         }
         }


         .mw-parser-output {
         .variation-item {
             display: inline-block;
             width: 30%;
            padding: .5rem 2rem;
             box-sizing: border-box;
            margin: 0 auto;
             margin: 10px;
            border: 30px solid transparent;
             text-align: center;
            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;
             border: 1px solid #ccc;
            appearance: none;
            background-color: #fff;
            box-sizing: border-box;
        }
        .input-group input[type="text"] {
            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;
             width: 100px;
             top: -18px;
             height: 100px;
             background: none;
             display: block;
             padding: 0 5px;
             margin: 0 auto 10px;
            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/2/2d/Comvip.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>
     <div class="container">
     <form id="imageForm">
         <div class="filters">
         <div class="input-group">
            <div class="input-group">
            <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">
                <label for="typeMap" class="maps__label">Tipo de Mapa:</label>
            <div id="dropdown" class="dropdown"></div>
                <select id="typeMap" class="maps__select">
        </div>
                    <option value="">Selecione um tipo</option>
                    <option value="1">Mapa Vermelho</option>
                    <option value="2">Mapa Verde</option>
                    <option value="3">Mapa Roxo</option>
                </select>
            </div>


            <div class="input-group">
        <div id="imageContainer" class="image-container hidden">
                <label for="specificLocation" class="maps__label">Local do X:</label>
            <!-- As imagens e suas informações serão exibidas aqui -->
                <select id="specificLocation" class="maps__select">
                    <option value="">Selecione um local</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 class="filter-container">
                <input type="checkbox" id="toggleFilter">
                <label for="toggleFilter" class="filter-label">Ativar Filtro</label>
            </div>
 
            <div id="filterOptions" class="hidden">
                <div class="input-group">
                    <label for="filterBy" class="maps__label">Filtrar por:</label>
                    <select id="filterBy" class="maps__select">
                        <option value="">Selecione uma opção</option>
                        <option value="number">Número</option>
                        <option value="tag">Tag</option>
                    </select>
                </div>
 
                <div class="input-group">
                    <input type="text" id="filterValue" placeholder="Digite o valor">
                    <button id="filterButton" class="hover-minimize">Filtrar</button>
                </div>
            </div>
         </div>
         </div>
 
     </form>
        <div id="mapsContainer" class="image-container"></div>
 
        <div id="errorMessage" class="error-message"></div>
     </div>


     <script>
     <script>
         const specificOptions = {
         const imageList = {
             1: {
             'Charmander': {  
                 Areia: [
                 imageUrl: 'https://wiki.pokexgames.com/images/6/65/004-Charmander.png',
                     { id: '7007', local: 'Pirâmide nos Cacturne', coordinates: '5631, 5589, 7', tag: 'Areia', imageUrl: 'https://wiki.pokexgames.com/images/9/93/Mapa_Verde_ADV_-_5631%2C_5589%2C_7.webp' },
                variations: [
                     { id: '7008', local: 'Praia da Areia', coordinates: '4500, 5000, 8', tag: 'Areia', imageUrl: 'https://wiki.pokexgames.com/images/b/bc/BagOfPollem.png' }
                     {  
                ],
                        imageUrl: 'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',
                Gelo: [
                        description: 'Charmander XXX',
                    // Mapas de Gelo para o Mapa Vermelho
                        obtain: {
                ],
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                // Outras categorias conforme necessário
                            text: 'Estilista'
            },
                        },
            2: {
                        additionalImages: [
                Areia: [
                            'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png', // Frente
                     // Mapas de Areia para o Mapa Verde
                            'https://example.com/left1.png',  // Lado Esquerdo
                 ],
                            'https://wiki.pokexgames.com/images/3/3b/Clefable_Lovely-_Accessory.png',  // Costas
                // Outras categorias conforme necessário
                            '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
                        ]
                     }
                 ]
             },
             },
            3: {
                Areia: [
                    // Mapas de Areia para o Mapa Roxo
                ],
                // Outras categorias conforme necessário
            }
         };
         };


         const mapsContainer = document.getElementById('mapsContainer');
         const imageSearch = document.getElementById('imageSearch');
         const errorMessage = document.getElementById('errorMessage');
         const dropdown = document.getElementById('dropdown');
         const typeMapSelect = document.getElementById('typeMap');
         const imageContainer = document.getElementById('imageContainer');
        const specificLocationSelect = document.getElementById('specificLocation');
        const filterOptions = document.getElementById('filterOptions');
        const toggleFilter = document.getElementById('toggleFilter');
        const filterBySelect = document.getElementById('filterBy');
        const filterValueInput = document.getElementById('filterValue');
        const filterButton = document.getElementById('filterButton');


         let currentType = '';
         imageSearch.addEventListener('input', function() {
        let currentLocation = '';
            const searchValue = this.value.trim().toLowerCase();
            dropdown.innerHTML = '';


        function updateMaps() {
            if (searchValue) {
            mapsContainer.innerHTML = '';
                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);
                    }
                });


             if (!currentType || !currentLocation) {
                dropdown.style.display = dropdown.childNodes.length ? 'block' : 'none';
                 return;
             } else {
                 dropdown.style.display = 'none';
             }
             }
        });


            const maps = specificOptions[currentType][currentLocation] || [];
        document.addEventListener('click', function(event) {
            maps.forEach(map => {
            if (!imageSearch.contains(event.target) && !dropdown.contains(event.target)) {
                const img = document.createElement('img');
                 dropdown.style.display = 'none';
                img.src = map.imageUrl;
             }
                img.alt = map.local;
         });
                 mapsContainer.appendChild(img);
             });
         }


         function applyFilter() {
         function showImageInfo(imageName) {
             const filterType = filterBySelect.value;
             const imageInfo = imageList[imageName];
             const filterValue = filterValueInput.value.toLowerCase();
             let imagesHtml = `
             const maps = specificOptions[currentType][currentLocation] || [];
                <div class="image-item">
                    <img src="${imageInfo.imageUrl}" alt="${imageName}">
                </div>
                <div class="variations-container">
             `;


             const filteredMaps = maps.filter(map => {
             imageInfo.variations.forEach((variation, index) => {
                 if (filterType === 'number') {
                 imagesHtml += `
                    return map.id.includes(filterValue);
                    <div class="variation-item">
                } else if (filterType === 'tag') {
                        <img src="${variation.additionalImages[0]}" alt="Variation Image" class="variation-image" data-variation-index="${index}">
                    return map.tag.toLowerCase().includes(filterValue);
                          <div class="swap-button" data-variation-index="${index}"></div>
                }
                        <div class="image-info">
                 return true;
                            <b>Nome do Addon</b>: ${variation.description}
                            <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                        </div>
                    </div>
                 `;
             });
             });


             mapsContainer.innerHTML = '';
             imagesHtml += '</div>';
            filteredMaps.forEach(map => {
                const img = document.createElement('img');
                img.src = map.imageUrl;
                img.alt = map.local;
                mapsContainer.appendChild(img);
            });
        }


        typeMapSelect.addEventListener('change', () => {
            imageContainer.innerHTML = imagesHtml;
             currentType = typeMapSelect.value;
             imageContainer.classList.remove('hidden');
            updateMaps();
        });


        specificLocationSelect.addEventListener('change', () => {
             // Alternar imagens ao clicar no botão de troca
             currentLocation = specificLocationSelect.value;
             const swapButtons = document.querySelectorAll('.swap-button');
             updateMaps();
        });
 
        toggleFilter.addEventListener('change', () => {
            filterOptions.classList.toggle('hidden', !toggleFilter.checked);
            if (!toggleFilter.checked) {
                filterValueInput.value = '';
                applyFilter();
            }
        });


        filterButton.addEventListener('click', () => {
            swapButtons.forEach(button => {
            if (toggleFilter.checked) {
                const index = button.getAttribute('data-variation-index');
                if (!currentType || !currentLocation) {
                 const variation = imageInfo.variations[index];
                    errorMessage.textContent = 'Selecione pelo menos um tipo de mapa e local do X';
                 let currentImageIndex = 0;
                    return;
                 }
                errorMessage.textContent = '';
                 applyFilter();
            }
        });


                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”