Widget:Test2: 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
Linha 1: Linha 1:
<!DOCTYPE html>
// Função para construir os caminhos das imagens dinamicamente
<html lang="pt-BR">
function getMediaWikiImagePath(imageName) {
<style>
    return `https://wiki.pokexgames.com/index.php/Special:FilePath/${encodeURIComponent(imageName)}`;
}
        .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 {
// Exemplo de uso no objeto `imageList`
            margin-top: 10px;
const imageList = {
            cursor: pointer;
    'Squirtle': {
            width: 15px;
        imageUrl: getMediaWikiImagePath('007-Squirtle.png'),
            height: 15px;
        variations: [
            background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center;
            {
            background-size: contain;
                description: 'Squirtle Purple Ninja Pack',
            display: block;
                descriptionIMG: getMediaWikiImagePath('Purple_Stripe.png'),
            margin: 0 auto;
                additionalImages: [
        }
                    { url: getMediaWikiImagePath('Squirtle_Purple_Ninja_Pack_Frente.png') },
</style>
                    { url: getMediaWikiImagePath('Squirtle_Purple_Ninja_Pack_Esquerda.png') },
 
                    { url: getMediaWikiImagePath('Squirtle_Purple_Ninja_Pack_Costas.png') },
<head>
                     { url: getMediaWikiImagePath('Squirtle_Purple_Ninja_Pack_Direita.png') },
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Busca de Imagens por Nome</title>
 
</head>
<body>
    <form id="imageForm">
        <div class="input-group">
            <input type="text" id="imageSearch" placeholder="Digite o nome da imagem" autocomplete="off">
            <div id="dropdown" class="dropdown"></div>
        </div>
 
        <div id="imageContainer" class="image-container hidden">
            <!-- As imagens e suas informações serão exibidas aqui -->
        </div>
    </form>
 
    <script>
        const imageList = {
            'Squirtle': {  
                imageUrl: 'https://wiki.pokexgames.com/images/7/7a/007-Squirtle.png',  
                variations: [
                    {  
                        description: 'Squirtle Purple Ninja Pacnk',
                        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 =
        <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].url}" alt="Variation Image" class="variation-image" data-variation-index="${index}" style="width: ${variation.additionalImages[0].width}px;">
                <div class="swap-button" data-variation-index="${index}"></div><br>
                <div class="image-info">
                    <img src="${variation.descriptionIMG}" alt="Description Image" style="margin-right: 5px; display: inline-block;"> <!-- Exibe a imagem antes da descrição -->
                    <br> ${variation.description} <br> <!-- Descrição após a imagem -->
                    <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                </div>
            </div>
        ;
    });
 
     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; // Atualiza a imagem da variação
            variationImage.src = variation.additionalImages[currentImageIndex].url;
            variationImage.style.width = ${variation.additionalImages[currentImageIndex].width}px;
        });
    });
}
 
    </script>
</body>
</html>

Edição das 03h52min de 23 de dezembro de 2024

// Função para construir os caminhos das imagens dinamicamente function getMediaWikiImagePath(imageName) { 

   return `https://wiki.pokexgames.com/index.php/Special:FilePath/${encodeURIComponent(imageName)}`;

}

// Exemplo de uso no objeto `imageList` const imageList = { 

   'Squirtle': {
       imageUrl: getMediaWikiImagePath('007-Squirtle.png'),
       variations: [
           {
               description: 'Squirtle Purple Ninja Pack',
               descriptionIMG: getMediaWikiImagePath('Purple_Stripe.png'),
               additionalImages: [
                   { url: getMediaWikiImagePath('Squirtle_Purple_Ninja_Pack_Frente.png') },
                   { url: getMediaWikiImagePath('Squirtle_Purple_Ninja_Pack_Esquerda.png') },
                   { url: getMediaWikiImagePath('Squirtle_Purple_Ninja_Pack_Costas.png') },
                   { url: getMediaWikiImagePath('Squirtle_Purple_Ninja_Pack_Direita.png') },
               ]
           }
       ]
   }

};

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