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
 
(191 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>Item Search</title>
     <title>Busca de Imagens por Nome</title>
     <style>
     <style>
         .suggest-icon {
         .input-group { margin-bottom: 1em; position: relative; }
             max-width: 20px;
        .dropdown {
             max-height: 20px;
            border: 1px solid #ccc;
            display: none;
            position: absolute;
             background-color: #fff;
            z-index: 1000;
             max-height: 150px;
            overflow-y: auto;
            width: 100%;
         }
         }
 
         .dropdown-item {
         #suggest {
             padding: 8px;
             max-height: 300px;
             cursor: pointer;
             max-width: 300px;
            overflow-y: scroll;
            overflow-x: hidden;
        }
 
        .item-name {
             display: flex;
             display: flex;
             align-items: center;
             align-items: center;
         }
         }
 
         .dropdown-item img {
         .item-name-icon {
             margin-right: 10px;
            max-width: 30px;
             margin-right: 8px;
         }
         }
 
         .dropdown-item:hover {
         .craft p {
             background-color: #f0f0f0;
             margin: 0;
         }
         }
 
         .image-container {
         .materials {
             display: flex;
             display: flex;
            flex-direction: column;
             align-items: center;
             align-items: center;
             flex-wrap: wrap;
             justify-content: center;
             gap: 8px;
        }
        .image-item {
            margin-bottom: 1em;
            text-align: center;
        }
        .image-item img {
            display: block;
             margin: 0 auto;
         }
         }


         .item-from-craft {
         .variations-container {
             display: flex;
             display: flex;
             align-items: center;
             flex-wrap: wrap;
             padding: 8px 12px;
             justify-content: center;
            border: 1px solid #ccc;
             margin-top: 1em;
             border-radius: 8px;
         }
         }


         .material-icon-container {
         .variation-item {
             display: flex;
             width: 35%;
             align-items: center;
             box-sizing: border-box;
             justify-content: center;
            margin: 5px;
             width: 30px;
             text-align: center;
             height: 30px;
             border: 1px solid ;
             padding: 10px;
         }
         }


         .who-drops {
         .variation-item img {
             display: flex;
             display: block;
             flex-wrap: wrap;
             margin: 0 auto 10px;
            gap: 8px;
         }
         }


         .who-drops-item {
         .swap-button {
             display: flex;
            margin-top: 10px;
             align-items: center;
            cursor: pointer;
             padding: 8px;
            width: 15px;
             border: 1px solid #ccc;
             height: 15px;
             border-radius: 8px;
             background: url('https://wiki.pokexgames.com/images/f/fb/SwapButtonAddons.png') no-repeat center;
             background-size: contain;
             display: block;
             margin: 0 auto;
         }
         }
     </style>
     </style>
</head>
</head>
<body>
<body>
     <input type="text" id="search" placeholder="Busque um item..." />
     <form id="imageForm">
    <div id="suggest"></div>
        <div class="input-group">
    <div id="content"></div>
            <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>
     <script>
        // Base de dados local
         const imageList = {
         const allData = [
             'Squirtle': {  
             {
                 imageUrl: 'https://wiki.pokexgames.com/images/7/7a/007-Squirtle.png',  
                 "id": 18,
                 variations: [
                 "name": "Bag of Pollen",
                    {
                "icon": "https://wiki.pokexgames.com/images/b/bc/BagOfPollem.png",
                        description: 'Squirtle Purple Ninja Pack',
                "link": "https://wiki.pokexgames.com/index.php/Bag_Of_Pollem",
                        descriptionIMG: 'https://wiki.pokexgames.com/images/c/c1/Purple_Stripe.png',
                "isNightmare": false,
                        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
                        ]
                    }
                 ]
                 ]
             },
             },
            {
        };
                "id": 1884,
                "name": "Anya Outfit (female)",
                "icon": "https://wiki.pokexgames.com/images/8/8a/Anya_Outfit_Designer.png",
                "link": null,
                "isNightmare": false,
                "craft": {
                    "quantity": 1,
                    "skill": "100",
                    "cooldownText": "5 dias",
                    "rank": "S",
                    "profession": "Stylist",
                    "materials": [
                        {
                            "name": "Lovely Topknot",
                            "icon": "https://wiki.pokexgames.com/images/e/e9/Lovely_Topknot.png",
                            "isNightmare": true,
                            "quantity": 10,
                            "id": 532
                        },
                        // outros materiais omitidos para simplicidade...
                    ]
                }
            },
            {
                "id": 1912,
                "name": "Catcher Token",
                "icon": "https://wiki.pokexgames.com/images/f/fd/Catcher_Token.png",
                "link": "https://wiki.pokexgames.com/index.php/Tokens",
                "isNightmare": false
            }
        ];


         const search = document.getElementById("search");
         const imageSearch = document.getElementById('imageSearch');
         const suggest = document.getElementById("suggest");
         const dropdown = document.getElementById('dropdown');
         const content = document.getElementById("content");
         const imageContainer = document.getElementById('imageContainer');


         const clearSuggestions = () => {
         imageSearch.addEventListener('input', function() {
             suggest.innerHTML = "";
            const searchValue = this.value.trim().toLowerCase();
        };
             dropdown.innerHTML = '';


        const setItem = (id) => {
            if (searchValue) {
            const data = allData.find((data) => data.id == id);
                Object.keys(imageList).forEach(imageName => {
            if (!data) return;
                    if (imageName.toLowerCase().includes(searchValue)) {
            clearSuggestions();
                        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 (data.name === "Bag of Pollen") {
                dropdown.style.display = dropdown.childNodes.length ? 'block' : 'none';
                content.innerHTML = `
                <div class="item-name">
                    <span>{{:Bag_Of_Pollen}}</span>
                </div>`;
             } else {
             } else {
                 content.innerHTML = `
                 dropdown.style.display = 'none';
                <div class="item-name">
            }
                    <img class="item-name-icon" src="${data.icon}" />
        });
                    <span>${data.name}</span>
 
                </div>`;
        document.addEventListener('click', function(event) {
            if (!imageSearch.contains(event.target) && !dropdown.contains(event.target)) {
                dropdown.style.display = 'none';
            }
        });


                if (data.craft) {
function showImageInfo(imageName) {
                    content.innerHTML += `
    const imageInfo = imageList[imageName];
                    <h3>Craft</h3>
    let imagesHtml = `
                    <div class="craft">
        <div class="image-item">
                        <p><b>Quantidade:</b> ${data.craft.quantity}</p>
            <img src="${imageInfo.imageUrl}" alt="${imageName}">
                        <p><b>Skill:</b> ${data.craft.skill} - Rank ${data.craft.rank}</p>
        </div>
                        <p><b>Tempo de Craft:</b> ${data.craft.cooldownText}</p>
        <div class="variations-container">
                        <p><b>Profissão:</b> ${data.craft.profession}</p>
    `;
                        <p><b>Materiais:</b></p>
                        <div class="materials">
                            ${data.craft.materials.map((material) => `
                            <div class="item-from-craft">
                                <div class="material-icon-container">
                                    <img class="item-name-icon" src="${material.icon}" />
                                </div>
                                ${material.quantity}x ${material.name}
                            </div>`).join("")}
                        </div>
                    </div>`;
                }


                if (data.whoDrops) {
    imageInfo.variations.forEach((variation, index) => {
                    content.innerHTML += `
        imagesHtml += `
                    <h3>Quem Droppa</h3>
            <div class="variation-item">
                    <div class="who-drops">
                <img src="${variation.additionalImages[0].url}" alt="Variation Image" class="variation-image" data-variation-index="${index}" style="width: ${variation.additionalImages[0].width}px;">
                        ${data.whoDrops.map((drop) => `
                <div class="swap-button" data-variation-index="${index}"></div><br>
                        <div class="who-drops-item">
                <div class="image-info">
                            <a href="${drop.link}" target="_blank" rel="noopener noreferrer">
                    <img src="${variation.descriptionIMG}" alt="Description Image" style="margin-right: 5px; display: inline-block;"> <!-- Exibe a imagem antes da descrição -->
                                <img class="item-name-icon" src="${drop.icon}" />
                    <br> ${variation.description} <br> <!-- Descrição após a imagem -->
                                ${drop.name}
                    <b>Como Obter</b>: <a href="${variation.obtain.url}" target="_blank">${variation.obtain.text}</a>
                            </a>
                </div>
                        </div>`).join("")}
            </div>
                    </div>`;
        `;
                }
    });


                const materialTo = allData.filter((item) => {
    imagesHtml += '</div>';
                    if (!item.craft?.materials) return false;
 
                    return item.craft.materials.some((m) => m.id == id);
    imageContainer.innerHTML = imagesHtml;
                });
    imageContainer.classList.remove('hidden');
 
    // Alternar imagens ao clicar no botão de troca
    const swapButtons = document.querySelectorAll('.swap-button');


                if (materialTo.length) {
    swapButtons.forEach(button => {
                    content.innerHTML += `
        const index = button.getAttribute('data-variation-index');
                    <h3>Usado para craftar</h3>
        const variation = imageInfo.variations[index];
                    <div class="materials">
         let currentImageIndex = 0;
                        ${materialTo.map((material) => `
                        <div class="item-from-craft">
                            <div class="material-icon-container">
                                <img class="item-name-icon" src="${material.icon}" />
                            </div>
                            ${material.name}
                        </div>`).join("")}
                    </div>`;
                }
            }
         };


         document.addEventListener("click", (e) => {
         button.addEventListener('click', () => {
             if (e.target.classList.contains("suggest-item")) {
             currentImageIndex = (currentImageIndex + 1) % variation.additionalImages.length;
                e.preventDefault();
            const variationImage = button.previousElementSibling; // Atualiza a imagem da variação
                setItem(e.target.dataset.itemId);
            variationImage.src = variation.additionalImages[currentImageIndex].url;
             }
             variationImage.style.width = `${variation.additionalImages[currentImageIndex].width}px`;
         });
         });
    });
}


        search.addEventListener("input", () => {
            const value = search.value?.toLowerCase();
            suggest.innerHTML = "";
            allData.forEach((data) => {
                if (data.name.toLowerCase().includes(value)) {
                    const div = document.createElement("div");
                    div.innerHTML = `
                    <img src="${data.icon}" class="suggest-icon" lazy />
                    <a class="suggest-item" href="#" data-item-id="${data.id}">${data.name}</a>`;
                    suggest.appendChild(div);
                }
            });
        });
     </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”