ALiIcon Evolved enhancements

用于强化阿里本地图标库的操作

// ==UserScript==
// @name         ALiIcon Evolved enhancements
// @namespace    http://tampermonkey.net/
// @namespace    ALiIcon_Evolved_enhancements
// @version      1.1
// @description  用于强化阿里本地图标库的操作
// @require	http://libs.baidu.com/jquery/2.0.0/jquery.min.js
// @author      https://github.com/wuhao1477
// @match        file:///*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=qq.com
// @charset	UTF-8
// @license      AGPL License
// @original-license  AGPL License
// @original-script   https://greasyfork.org/zh-CN/scripts/456372
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Function to copy text to clipboard
    // 绑定双击事件处理程序
    $('.icon_lists .dib').on('dblclick', function () {
        // 查找当前元素下 class 为 code-name 的元素
        var codeNameElement = $(this).find('.code-name');
        // 获取元素的文本值并过滤掉空格
        var codeName = codeNameElement.text().trim();
        // 将结果复制到粘贴板中
        navigator.clipboard.writeText(codeName);
        // 在控制台中打印结果
        console.log(codeName);
        // 创建提示框
        var message = $('<div class="message">已复制到粘贴板</div>');
        // 设置提示框的样式
        message.css({
            position: 'fixed',
            zIndex: '9999',
            top: '50%',
            left: '50%',
            transform: 'translate(-50%, -50%)',
            padding: '10px',
            borderRadius: '5px',
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            color: '#fff',
            fontSize: '14px',
            opacity: '0',
            transition: 'opacity 0.5s ease-in-out'
        });
        // 将提示框添加到页面中
        $('body').append(message);
        // 动画过渡显示提示框
        setTimeout(function () {
            message.css('opacity', '1');
        }, 10);
        // 动画过渡隐藏提示框
        setTimeout(function () {
            message.css('opacity', '0');
            setTimeout(function () {
                message.remove();
            }, 500);
        }, 1000);
    });

    // 绑定鼠标进入事件处理程序
    $('.icon_lists .dib').on('mouseenter', function (event) {
        // 创建提示框
        var tooltip = $('<div class="tooltip">双击复制到粘贴板</div>');
        // 设置提示框的样式
        tooltip.css({
            position: 'absolute',
            zIndex: '9999',
            padding: '5px',
            borderRadius: '5px',
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            color: '#fff',
            fontSize: '12px',
            opacity: '0',
            transition: 'opacity 0.5s ease-in-out'
        });
        // 将提示框添加到当前元素中
        $(this).append(tooltip);
        // 延迟一段时间后显示提示框
        setTimeout(function () {
            var tooltipWidth = tooltip.outerWidth();
            var tooltipHeight = tooltip.outerHeight();
            var left = "5%";
            var top = "5%";
            tooltip.css({
                left: left + 'px',
                top: top + 'px',
                opacity: '1'
            });
        }.bind(this), 10);
    });

    // 绑定鼠标离开事件处理程序
    $('.icon_lists .dib').on('mouseleave', function () {
        // 查找当前元素下 class 为 tooltip 的元素,并删除它
        var tooltip = $(this).find('.tooltip');
        if (tooltip.length > 0) {
            tooltip.remove();
        }
        // 取消悬浮状态和阴影效果
        $(this).css({
            position: '',
            boxShadow: '',
            zIndex: ''
        });
    });

    // 绑定鼠标悬浮事件处理程序
    $('.icon_lists .dib').on('mouseover', function () {
        // 添加阴影效果
        $(this).css({
            boxShadow: '0 0 10px rgba(0, 0, 0, 0.5)',
            zIndex: '999'
        });
    });

    // 绑定鼠标离开事件处理程序
    $('.icon_lists .dib').on('mouseout', function () {
        // 取消阴影效果
        $(this).css('boxShadow', '');
    });

    // 创建设置按钮
    var inlet = document.createElement("div");
    // inlet.className = "inlet";
    inlet.style.position = "fixed";
    inlet.style.bottom = "12%";
    inlet.style.left = "0";
    inlet.style.padding = "10px";
    inlet.style.transform = "translateX(-50%)";
    var inletButton = document.createElement("div");
    // inletButton.className = "inlet-button";
    inletButton.style.width = "50px";
    inletButton.style.height = "50px";
    inletButton.style.background = "#fff";
    inletButton.style.borderRadius = "50%";
    inletButton.style.boxShadow = "0 0 10px rgba(0, 0, 0, .5)";
    inletButton.style.display = "flex";
    inletButton.style.justifyContent = "center";
    inletButton.style.alignItems = "center";
    inletButton.innerHTML = '<svg t="1688800791106" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1486" width="32" height="32"><path d="M512 328c-100.8 0-184 83.2-184 184S411.2 696 512 696 696 612.8 696 512 612.8 328 512 328z m0 320c-75.2 0-136-60.8-136-136s60.8-136 136-136 136 60.8 136 136-60.8 136-136 136z" p-id="1487"></path><path d="M857.6 572.8c-20.8-12.8-33.6-35.2-33.6-60.8s12.8-46.4 33.6-60.8c14.4-9.6 20.8-27.2 16-44.8-8-27.2-19.2-52.8-32-76.8-8-14.4-25.6-24-43.2-19.2-24 4.8-48-1.6-65.6-19.2-17.6-17.6-24-41.6-19.2-65.6 3.2-16-4.8-33.6-19.2-43.2-24-14.4-51.2-24-76.8-32-16-4.8-35.2 1.6-44.8 16-12.8 20.8-35.2 33.6-60.8 33.6s-46.4-12.8-60.8-33.6c-9.6-14.4-27.2-20.8-44.8-16-27.2 8-52.8 19.2-76.8 32-14.4 8-24 25.6-19.2 43.2 4.8 24-1.6 49.6-19.2 65.6-17.6 17.6-41.6 24-65.6 19.2-16-3.2-33.6 4.8-43.2 19.2-14.4 24-24 51.2-32 76.8-4.8 16 1.6 35.2 16 44.8 20.8 12.8 33.6 35.2 33.6 60.8s-12.8 46.4-33.6 60.8c-14.4 9.6-20.8 27.2-16 44.8 8 27.2 19.2 52.8 32 76.8 8 14.4 25.6 22.4 43.2 19.2 24-4.8 49.6 1.6 65.6 19.2 17.6 17.6 24 41.6 19.2 65.6-3.2 16 4.8 33.6 19.2 43.2 24 14.4 51.2 24 76.8 32 16 4.8 35.2-1.6 44.8-16 12.8-20.8 35.2-33.6 60.8-33.6s46.4 12.8 60.8 33.6c8 11.2 20.8 17.6 33.6 17.6 3.2 0 8 0 11.2-1.6 27.2-8 52.8-19.2 76.8-32 14.4-8 24-25.6 19.2-43.2-4.8-24 1.6-49.6 19.2-65.6 17.6-17.6 41.6-24 65.6-19.2 16 3.2 33.6-4.8 43.2-19.2 14.4-24 24-51.2 32-76.8 4.8-17.6-1.6-35.2-16-44.8z m-56 92.8c-38.4-6.4-76.8 6.4-104 33.6-27.2 27.2-40 65.6-33.6 104-17.6 9.6-36.8 17.6-56 24-22.4-30.4-57.6-49.6-97.6-49.6-38.4 0-73.6 17.6-97.6 49.6-19.2-6.4-38.4-14.4-56-24 6.4-38.4-6.4-76.8-33.6-104-27.2-27.2-65.6-40-104-33.6-9.6-17.6-17.6-36.8-24-56 30.4-22.4 49.6-57.6 49.6-97.6 0-38.4-17.6-73.6-49.6-97.6 6.4-19.2 14.4-38.4 24-56 38.4 6.4 76.8-6.4 104-33.6 27.2-27.2 40-65.6 33.6-104 17.6-9.6 36.8-17.6 56-24 22.4 30.4 57.6 49.6 97.6 49.6 38.4 0 73.6-17.6 97.6-49.6 19.2 6.4 38.4 14.4 56 24-6.4 38.4 6.4 76.8 33.6 104 27.2 27.2 65.6 40 104 33.6 9.6 17.6 17.6 36.8 24 56-30.4 22.4-49.6 57.6-49.6 97.6 0 38.4 17.6 73.6 49.6 97.6-6.4 19.2-14.4 38.4-24 56z" p-id="1488"></path></svg>'
    inlet.appendChild(inletButton);
    document.body.appendChild(inlet);

    // 光标悬停时完全展示,并有0.3s的过度动画
    inlet.addEventListener("mouseover", function () {
        inlet.style.transform = "translateX(0)";
        inlet.style.transition = "transform 0.3s";
        inlet.style.cursor = "pointer";
    });

    // 光标移开时隐藏提示框并取消过度动画
    inlet.addEventListener("mouseout", function () {
        inlet.style.transform = "translateX(-50%)";
    });

    // 添加点击事件监听器
    inlet.addEventListener("click", function(event) {

        // 将其背景颜色设置为红色
        inletButton.style.background = "red";

        // 在 0.3 秒后将背景颜色还原为原始颜色
        setTimeout(function() {
            inletButton.style.background = "";
        }, 300);
    });

})();