Widget:Test: mudanças entre as edições

De PokeXGames
Ir para navegação Ir para pesquisar
Sem resumo de edição
Etiqueta: Reversão manual
Sem resumo de edição
 
(186 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: {
                "whoDrops": [
                            url: 'https://wiki.pokexgames.com/index.php/Craft_Profissões_-_Estilista#Rank_E',
                    {
                            text: 'Estilista'
                        "id": 1,
                        },
                        "icon": "https://wiki.pokexgames.com/images/5/5c/001-Bulbasaur.png",
                        additionalImages: [
                        "link": "https://wiki.pokexgames.com/index.php/Bulbasaur",
                            { url: 'https://wiki.pokexgames.com/images/d/dd/Squirtle_Purple_Ninja_Pack_Frente.png'}, // Frente
                         "name": "Bulbasaur"
                            { 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
                         ]
                     },
                     },
                     // outros dados omitidos para simplicidade...
                     { 
                        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”