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
 
(65 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: 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>
     <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">
                <label for="specificLocation" class="maps__label">Local do X:</label>
                <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">
        <div id="imageContainer" class="image-container hidden">
                    <input type="text" id="filterValue" placeholder="Digite o valor">
             <!-- As imagens e suas informações serão exibidas aqui -->
                    <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: {
             'Squirtle': {  
                 Areia: [
                 imageUrl: 'https://wiki.pokexgames.com/images/7/7a/007-Squirtle.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' }
                     {  
                ],
                        description: 'Squirtle Purple Ninja Pack',
                Gelo: [
                        descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                    // 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'
                        },
                        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
                        ]
                    }
                 ]
             },
             },
            2: {
                Areia: [
                    // Mapas de Areia para o Mapa Verde
                ],
                // Outras categorias conforme necessário
            },
            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].url}" alt="Variation Image" class="variation-image" data-variation-index="${index}" style="width: ${variation.additionalImages[0].width}px;">
                     return map.tag.toLowerCase().includes(filterValue);
                <div class="swap-button" data-variation-index="${index}"></div><br>
                 }
                 <div class="image-info">
                return true;
                    <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>
        `;
    });


            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', () => {
    swapButtons.forEach(button => {
            filterOptions.classList.toggle('hidden', !toggleFilter.checked);
        const index = button.getAttribute('data-variation-index');
            if (!toggleFilter.checked) {
        const variation = imageInfo.variations[index];
                filterValueInput.value = '';
         let currentImageIndex = 0;
                applyFilter();
            }
         });


         filterButton.addEventListener('click', () => {
         button.addEventListener('click', () => {
             if (toggleFilter.checked) {
             currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
                if (!currentType || !currentLocation) {
            const variationImage = button.previousElementSibling; // Atualiza a imagem da variação
                    errorMessage.textContent = 'Selecione pelo menos um tipo de mapa e local do X';
            variationImage.src = variation.additionalImages[currentImageIndex].url;
                    return;
             variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`;
                }
                errorMessage.textContent = '';
                applyFilter();
             }
         });
         });
    });
}


     </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>

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