☰

iconfont-svg-copy

适用于 iconfont 快速复制 SVG 代码

当前为 2023-04-17 提交的版本，查看 最新版本。

// ==UserScript==
// @name         iconfont-svg-copy
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  适用于 iconfont 快速复制 SVG 代码
// @author       [email protected]
// @match        https://www.iconfont.cn/collections/detail*
// @require      https://cdn.bootcdn.net/ajax/libs/sweetalert2/11.7.3/sweetalert2.all.min.js
// @icon         http://img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg
// @grant        none
// @license      GPL-3.0-only
// ==/UserScript==


(function() {
    "use strict";


    /**
     * 异步的等待 delay_ms 毫秒
     * @param {number} delay_ms 
     * @returns {Promise<void>}
     */
    function sleep(delay_ms) {
        return new Promise(
            resolve => setTimeout(resolve, delay_ms)
        );
    }


    /**
     * 使用xhr异步GET请求目标url，返回响应体blob
     * @param {string} url 
     * @returns {Promise<Blob>} blob
     */
    async function xhrGetBlob(url) {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.responseType = "blob";
        
        return new Promise((resolve, reject) => {
            xhr.onload = () => {
                const code = xhr.status;
                if (code >= 200 && code <= 299) {
                    resolve(xhr.response);
                }
                else {
                    reject(new Error(`Network Error: ${code}`));
                }
            }
            xhr.send();
        });
    }


    /**
     * 加载CDN脚本
     * @param {string} url 
     */
    async function loadWebScript(url) {
        try {
            // xhr+eval方式
            Function(
                await (await xhrGetBlob(url)).text()
            )();
        } catch(e) {
            console.error(e);
            // 嵌入<script>方式
            const script = document.createElement("script");
            script.src = url;
            document.body.append(script);
        }
    }


    /**
     * 安全元素选择器，直到元素存在时才返回元素列表，最多等待5秒
     * @param {string} selector 选择器
     * @returns {Promise<Array<HTMLElement>>} 元素列表
     */
    async function $$(selector) {
        const self = this?.querySelectorAll ? this : document;

        for (let i = 0; i < 10; i++) {
            let elems = [...self.querySelectorAll(selector)];
            if (elems.length > 0) {
                return elems;
            }
            await sleep(500);
        }
        throw Error(`"${selector}" not found in 5s`);
    }


    function addStyle() {
        const style = document.createElement("style");
        style.innerHTML = `
            .block-icon-list li:hover div.icon-cover {
                display: grid;
                grid-template-columns: auto auto;
            }

            .block-icon-list li .icon-cover span.cover-item-line {
                height: auto;
                line-height: 50px;
            }

            .copy-icon {
                border: none !important;
                margin: 0 1.25em !important;
            }

            .copy-container {
                margin: 0.5em 4em 0.5em 2em !important;
                padding: 0 !important;
            }
            
            .copy-popup {
                height: 2.5em !important;
                font-size: small !important;
                width: fit-content !important;
                padding: 0 !important;
            }
        `;
        document.head.append(style);
    }


    /**
     * 为 elem 切换 class 以变化图标
     * @param {HTMLElement} elem 
     */
    function switchCopyIcon(elem) {
        elem.classList.toggle("icon-fuzhidaima");
        elem.classList.toggle("icon-fuzhichenggong");
    }


    /**
     * 显示复制成功
     * @param {HTMLElement} elem 
     */
    async function showCopySuccess(elem) {
        switchCopyIcon(elem);
        Swal.fire({
            text: "复制成功，可以粘贴咯~",
            toast: true,
            timer: 2000,
            showConfirmButton: false,
            icon: "success",
            position: "top",
            heightAuto: false,
            customClass: {
                popup: "copy-popup",
                htmlContainer: "copy-container",
                icon: "copy-icon"
            }
        });
        await sleep(2000);
        switchCopyIcon(elem);
    }


    /**
     * 当点击复制图标时复制 svg 到剪贴板
     * @param {PointerEvent} event 
     */
    async function copy(event) {
        // 取得svg
        const card = event.target.closest("li");
        const svg = card.querySelector("svg");
        const svg_str = new XMLSerializer().serializeToString(svg);

        // 复制到剪贴板
        try {
            navigator.clipboard.writeText(svg_str);
        } catch (err) {
            console.error(err);
            console.log(svg_str);
        }

        showCopySuccess(event.target);
    }


    async function importSweetAlert() {
        if (!window.Swal) {
            return loadWebScript(
                "https://cdn.bootcdn.net/ajax/libs/sweetalert2/11.7.3/sweetalert2.all.min.js"
            );
        }
    }


    async function main() {
        // 添加样式表
        addStyle();

        // 为图标卡片增加复制按钮
        const cards = await $$("li[class*='J_icon_id_']");
        const template = document.createElement("span");
        template.title = "复制SVG";
        template.classList.add(
            "cover-item", "iconfont", "cover-item-line", "icon-fuzhidaima"
        );
        
        cards.forEach(card => {
            // 添加复制图标
            const icon_copy = template.cloneNode();
            // 增加复制功能
            icon_copy.addEventListener("click", copy, true);
            card.querySelector(".icon-cover").append(icon_copy);
        });

        // 导入 sweet alert
        try {
            await importSweetAlert();
        } catch(err) {
            console.error(err);
            console.log("sweet alert 导入失败，没有提示弹窗了");
        }
    }


    main();
})();