Greasy Fork is available in English.

TKBaseSDK

一些通用方法基础组件库

Dieses Skript sollte nicht direkt installiert werden. Es handelt sich hier um eine Bibliothek für andere Skripte, welche über folgenden Befehl in den Metadaten eines Skriptes eingebunden wird // @require https://update.greasyfork.org/scripts/494214/1371786/TKBaseSDK.js 

// ==UserScript==
// @name         TKBaseSDK
// @namespace    https://github.com/RANSAA
// @version      0.0.1
// @description  一些通用方法基础组件库
// @author       sayaDev
// @license      MIT License
// @match        *://*/*
// @grant        none
// ==/UserScript==





// -------------------------------将函数添加到window全局变量上-------------------------------
/**
 * 功能：减函数添加到window全局变量中
 * 使用方法：
 * 1. 先引入本库：
 * 2. 然后直接在脚本中使用TKBaseSDK.XXXX方式调用指定方法
 **/
window.TKBaseSDK = {
    locationURL: window.location.href,       //当前网页地址
    locationTitle: document.title,           //当前网页title标题
    addButtonStyle: addButtonStyle,          //添加button css样式
    createSVGElement: createSVGElement,      //创建SVG
    createItemButton: createItemButton,      //创建包裹SVG的button
    initToast: initToast,                    //初始化toast
    showToast: showToast,                    //显示toast
    showToastWtihTime: showToastWtihTime,    //显示toast，并附加样式，时间
    copyToClipBoard: copyToClipBoard,        //将指定文本拷贝到剪切板
};

// -------------------------------将函数添加到window全局变量上-------------------------------





// -------------------------------Style CSS-------------------------------
/**
 * 添加一个Button CSS
 **/ 
function addButtonStyle(){
    var style = `
    .TKButtonStyle{
        background: #1ca7ee;
        background-color:  #1ca7ee; 
        color: #ffffff;

        //top: 100px;
        height: 44px;
        width:  120px;
        right:  20px;
        position: fixed;
        z-index: 999999;

        border: none;
        cursor: pointer;
        padding: 0; 

        border: 1px solid;
        border-color: #1ca7ee;
        // border-radius: 50% !important;
        box-shadow: 0px 0px 8px #1ca7ee;        
    }

    /* 当按钮被点击时 */
    .TKButtonStyle:active {
        background-color:  #1ca7ee; 

        border: 1px solid;
        border-color: #1ca7ee;
        border-radius: 50% !important;
        box-shadow: 0px 0px 8px #1ca7ee;    
    }

    /* 当鼠标悬停在按钮上时 */
    .TKButtonStyle:hover {
        background-color:  #1ca7ee; 

        border: 1px solid;
        border-color: #1ca7ee;
        border-radius: 50% !important;
        box-shadow: 0px 0px 8px #1ca7ee;    
    }

    `

    var styleId = "TKButtonStyle";
    // 首先查询页面上是否存在具有给定ID的<style>元素
    var existingStyle = document.getElementById(styleId);
    //如果存在则跳过
    if (existingStyle) {
        return;
    }

    var myStyle = document.createElement("style")
    myStyle.type="text/css";
    myStyle.id = styleId;
    // myStyle.innerText = style;
    myStyle.innerHTML = style;
    document.head.appendChild(myStyle)
}


// -------------------------------Style CSS-------------------------------




// -------------------------------SVG Element-------------------------------

/**
 * 使用文字创建SVG Element元素
 * text：SVG显示的文字
 **/ 
function createSVGElement(text){
    var svgElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svgElement.setAttribute("width", "120");
    svgElement.setAttribute("height", "44");
    // svgElement.setAttribute("style", "background-color: transparent"); // 设置透明背景色

    // // 创建一个<circle>元素
    // var circleElement = document.createElementNS("http://www.w3.org/2000/svg", "circle");
    // circleElement.setAttribute("cx", "22");
    // circleElement.setAttribute("cy", "22");
    // circleElement.setAttribute("r", "20");
    // circleElement.setAttribute("fill", "#1ca7ee");

    // 创建一个<text>元素并设置其属性和样式
    var textElement = document.createElementNS("http://www.w3.org/2000/svg", "text");
    textElement.setAttribute("x", "50%"); // 居中对齐
    textElement.setAttribute("y", "50%");
    textElement.setAttribute("text-anchor", "middle"); // 文本居中对齐
    textElement.setAttribute("dominant-baseline", "middle"); // 文本垂直居中对齐
    textElement.setAttribute("fill", "white");
    textElement.setAttribute("font-size", "14px");
    textElement.setAttribute("font-weight", "700"); // 设置字体粗细
    textElement.style.fontFamily = "Arial"; // 设置字体样式，如果需要的话
    // textElement.textContent = "Send URL";
    textElement.textContent = text; //设置显示文字

    // 将<circle>和<text>元素添加到<svg>元素中
    // svgElement.appendChild(circleElement);
    svgElement.appendChild(textElement);

    return svgElement;
}



/**
 * 创建Item Button，并添加到body中。
 * text： 显示的文字
 * top：距离顶部的距离
 * return：返回svg部分
 **/ 
function createItemButton(text,top){
    //根据文字创建SVG
    let itemSVG = createSVGElement(text);
    itemSVG.setAttribute("class","TKButtonStyle");
    //修正，重新设置top的值
    itemSVG.style.top = top;

    // 创建一个包含按钮的DIV元素
    let itemButton = document.createElement("TKButtonItem");
    itemButton.setAttribute("class","TKButtonStyle");
    //修正，重新设置top的值
    itemButton.style.top = top;

    // 将itemSVG添加到itemButton中
    itemButton.appendChild(itemSVG);

    // 添加到body中
    // document.body.appendChild(itemButton);

    // return itemSVG
    return itemButton
}
// -------------------------------SVG Element-------------------------------







// -------------------------------Toast-------------------------------

/**
 * 初始化Toast组件
 **/ 
function initToast(){
    // 首先查询页面上是否存在TKToast元素
    let existingToast = document.querySelector('TKToast');
    if (existingToast) {
        console.log("TKToast元素存在，跳过本次创建。");
        return;
    }


    var snackbarStyleText = `
    #tktoast-tips-snackbar {
        visibility: hidden;
        background-color: #777;
        color: #fff;
        text-align: center;
        font-size: 20px;
        min-width: 250px;
        padding: 26px;
        border-radius: 12px;
        border-width: 0px;

        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        display:block;
        position:fixed;
        z-index:999999;
    }

    /* 绿色背景 */
    #tktoast-tips-snackbar.success {
        visibility: visible;
        background-color: #147F1C;
    }

    /* 红色背景 */
    #tktoast-tips-snackbar.error {
        visibility: visible;
        background-color: #D53617;
    }

    /* 灰色背景 */
    #tktoast-tips-snackbar.show {
        visibility: visible;
        background-color: #777;
    }
    `;


    // 创建一个<style>元素
    const styleElement = document.createElement('style');
    styleElement.type="text/css";
    styleElement.id = "TKToast-Tips-Snackbar";
    // 创建要添加的CSS规则
    let cssNode = document.createTextNode(snackbarStyleText);
    // 将CSS规则添加到<style>元素中
    styleElement.appendChild(cssNode);
    // 将<style>元素添加到<head>中
    document.head.appendChild(styleElement);

    //创建Toast标签节点
    var snackbar = document.createElement("snackbar")
    snackbar.id = "tktoast-tips-snackbar";

    let toast = document.createElement("TKToast")
    toast.appendChild(snackbar);
    document.body.appendChild(toast);
}


/**
 * 显示Toast,并在1.5秒后消失
 * msg：需要显示的提示信息
 * type：Toast显示的样式：0：错误(红色) 1：成功(绿色) 2：常规(灰色)；与指定toast-tips-snackbar的类型相匹配如：success，fail，show
 **/ 
function showToast(msg,type){
    showToastWtihTime(msg,type,2000);
}


/**
 * 显示Toast
 * msg: 需要显示的提示文字
 * type：Toast显示的样式：0：错误(红色) 1：成功(绿色) 2：常规(灰色)；与指定toast-tips-snackbar的类型相匹配如：success，fail，show
 * time: 显示时长
 **/
function showToastWtihTime(msg,type,time){
    //指定toast-tips-snackbar的样式类型如：success，fail，show
    var style = "show";
    if (type == 0) {
        style = "error";
    }else if (type == 1) {
        style = "success";
    }


    var x = document.getElementById("tktoast-tips-snackbar")
    //例如type=success，表示设定样式为toast-tips-snackbar.success
    x.className = style;
    x.innerText = msg;
    setTimeout(function(){ 
        //1.5秒后将样式恢复为：toast-tips-snackbar
        x.className = x.className.replace(style, "");
    }, time);
}
// -------------------------------Toast-------------------------------





// -------------------------------Tool-------------------------------
/**
 * 将文本拷贝到剪切板
 **/
function copyToClipBoard(text){
    if (navigator.clipboard) {
        navigator.clipboard.writeText(text).then(function() {
            console.log('拷贝到剪切板成功! value：',text);
        }).catch(function(err) {
            // 在这里处理复制失败的情况
            console.error('拷贝到剪切板失败! value：', text, 'Error:', err);
        });
    }else{
        let transfer = document.createElement('input');
        document.body.appendChild(transfer);
        transfer.value = text;
        //transfer.focus();
        transfer.select();
        if (document.execCommand('copy')) {
            document.execCommand('copy');
            console.log('拷贝到剪切板成功! value：',text);
        }else{
            console.log('拷贝到剪切板失败! value：',text);
        }
        transfer.blur();
        document.body.removeChild(transfer);
    }
}

// -------------------------------T00l-------------------------------