一些通用方法基础组件库
当前为
此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/494214/1371712/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，并附加样式，时间
};
// ---------------------将函数添加到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 myStyle = document.createElement("style")
myStyle.type="text/css";
myStyle.id = "TKButtonStyle";
// myStyle.innerText = style;
myStyle.innerHTML = style;
document.head.appendChild(myStyle)
// var head = document.getElementsByTagName('head')[0];
// 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组件
**/
var isInitToast = false;
function initToast(){
if (isInitToast == true) {
return;
}
isInitToast = true;
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("toast-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-------------------------------