// ==UserScript==
// @name 剪贴板 FillText
// @namespace http://tampermonkey.net/
// @version 1.13
// @description 快速填写预设文本到输入框，适用于所有https网站。
// @author Unitiny
// @match https://*/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant unsafeWindow
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_addValueChangeListener
// @license MIT
// ==/UserScript==
let Global = {};
let GlobalDoms = {};
const GlobalKey = "fillTextGlobal";
const CSS = {
flex: {
bs: "space-between", start: "flex-start", end: "flex-end", center: "center", column: "column", row: "row"
},
};
(function () {
Global = getGlobal()
Global.renderStatus = 1
loadResource()
initStyle()
setInputDom()
operationBoard()
Global.renderStatus = 0
getGlobalHook()
})();
/**
* 初始化
*/
//设置input节点
function setInputDom() {
let t = setInterval(() => {
let downingKeys = [];
let editKey = "";
let inputDoms = document.querySelectorAll('input');
inputDoms.forEach(function (dom, i) {
dom.setAttribute(Global.attributeName, i)
dom.addEventListener("click", function (event) {
let d = event.target
Global.curInputDom = d.getAttribute(Global.attributeName)
if (Global.order === 1) {
d.value = getSpanText(Global.curSpan)
}
})
dom.addEventListener("keydown", function (event) {
//快捷键模式，按下Alt开始
if (event.key === "Alt") {
downingKeys = []
downingKeys.push(event.key)
editKey = event.key
return
}
if (downingKeys.length > 0) {
if (downingKeys.indexOf(event.key) !== -1) return;
downingKeys.push(event.key)
editKey += "+" + event.key
getCurCateVal().spans.map(v => {
if (editKey === v.key) {
dom.value = getSpanText(v.index) || dom.value
event.preventDefault()
downingKeys = []
editKey = ""
}
})
return;
}
//编辑模式
let str = dom.value + event.key
getCurCateVal().spans.map(v => {
if (str === v.key.split("+").join("")) {
dom.value = getSpanText(v.index) || dom.value
event.preventDefault() //阻止写入该字符
}
})
})
dom.addEventListener("keyup", function (event) {
let i = downingKeys.indexOf(event.key)
i !== -1 ? downingKeys.splice(i, 1) : null
if (event.key === "Alt") {
downingKeys = []
editKey = ""
}
})
})
GlobalDoms.inputDoms = inputDoms
//有拿到inputDoms
if (inputDoms.length > 0) {
clearInterval(t)
}
}, 1000)
}
/**
* 工具函数
*/
function isOnline() {
return !window.location.host.includes("localhost") && !window.location.host.includes("127.0.0.1")
}
//添加前缀来防止与原页面id重复
function prefixStr(str) {
return `${Global.prefix}-${str}`
}
function getLink() {
let link = document.createElement("link");
link.rel = "stylesheet";
link.href = "https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0";
return link
}
function loadResource() {
document.head.appendChild(getLink());
}
function containKeys(a, b) {
const aKeys = Object.keys(a);
const bKeys = Object.keys(b);
return aKeys.length >= bKeys.length && bKeys.every(key => aKeys.includes(key));
}
function domCtl(showDoms, hiddenDoms) {
showDoms?.forEach(v => {
showDom(v)
})
hiddenDoms?.forEach(v => {
hiddenDom(v)
})
}
function emptyFunc() {
}
function getCloseSpan() {
let close = document.createElement("span")
close.style = CSS.iconStyle
close.style.cssText += `
position: absolute;
right: -9px;
top: -14px;`
close.innerText = "×"
return close
}
/**
* 样式区
*/
function initStyle() {
CSS.parentBoardStyle = `
${flexStyle({jc: CSS.flex.start})}
position: absolute;
left: 0px;
top: 0px;
width: auto;
overflow: auto;
z-index:999;`
CSS.boardStyle = `
${flexStyle({jc: CSS.flex.bs, fd: CSS.flex.column})}
position: relative;
left: 0px;
top: 0px;
width: 330px;
height: 400px;
margin: 10px;
background: white;
border: 5px solid ${themeColor()};
border-radius: 5px;
overflow: auto;
z-index:999;`
CSS.rightBoardStyle = `
${flexStyle({jc: CSS.flex.end, fd: CSS.flex.column})}
position: relative;
left: 0px;
top: 0px;
width: 330px;
height: 400px;
margin: 10px;
background: white;
border: 5px solid ${themeColor()};
border-radius: 5px;
overflow: auto;
z-index:999;`
CSS.hiddenBoardStyle = `
${flexStyle({})}
position: absolute;
left: 0px;
top: 0px;
width: 40px;
height: 40px;
margin: 10px;
border: 5px solid skyblue;
border-radius: 50%;
overflow: auto;
color: white;
background: skyblue;
z-index:999;
display: none;`
CSS.divStyle = `
${flexStyle({fd: CSS.flex.column})}
width: 300px;
height: 400px;
margin: 10px;
border: 1px solid skyblue;
border-radius: 5px;
overflow: auto`
CSS.cateSpanStyle = `
margin: 3px;
padding: 5px 12px;
width: auto;
height: 35px;
border: 1px solid ${themeColor()};
border-radius: 5px;
background: white;
font-size: 16px;
text-align: center;
line-height: 33px;
margin-right: 10px;`
CSS.spanStyle = `
${flexStyle({jc: CSS.flex.center, ai: CSS.flex.start, fd: CSS.flex.column})}
flex-grow: 0;
flex-shrink: 0;
min-width: 250px;
max-width: 250px;
min-height: 100px;
max-height: 100px;
margin: 10px 20px;
border: 1px solid ${themeColor()};
border-radius: 7px;
height: 70px;
padding: 0 10px 0 10px;`
CSS.pStyle = `
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;`
CSS.operationStyle = `
padding: 0 12px 0 12px;
margin: 5px;
width: auto;
height: 35px;
border-radius: 5px;
background: #4bb84b;
color: white;
font-size: 16px;
text-align: center;
line-height: 33px;
margin-right: 10px;`
CSS.textArea = `
border: 1px solid ${themeColor()};
border-radius: 5px;
flex-grow: 0;
flex-shrink: 0;
min-width: 90%;
max-width: 90%;
min-height: 100px;
max-height: 100px;
margin: 10px 5px 10px 5px;`
CSS.iconStyle = `
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;`
CSS.spanSettingStyle = `
width: 100%;
${flexStyle({jc: CSS.flex.end})}
`
CSS.displayNone = "display: none;"
CSS.displayFlex = "display: flex;"
CSS.borderRed = "border: 1px solid red;"
CSS.borderSkyblue = "border: 1px solid skyblue;"
}
function themeColor() {
return Global.theme ? "skyblue" : "black"
}
function isShow(show) {
return show ? "" : CSS.displayNone
}
function showDom(dom, add = CSS.displayFlex) {
dom.style.cssText = dom.style.cssText.replace(isShow(false), "")
dom.style.cssText += add
}
function hiddenDom(dom) {
dom.style.cssText += isShow(false)
}
function replaceStyle(dom, key, value) {
let list = dom.style.cssText.split(";");
for (let i = 0; i < list.length; i++) {
if (list[i].includes(key + ":")) {
list[i] = `${key}:${value}`
break
}
}
dom.style.cssText = list.join(";")
}
function flexStyle({jc = CSS.flex.center, ai = CSS.flex.center, fd = CSS.flex.row}) {
return `display: flex;
justify-content: ${jc};
align-items: ${ai};
flex-direction: ${fd};`
}
/**
* Global
*/
function defaultGlobal() {
return {
id: 0,
version: Date.now(),
renderStatus: 0, //1渲染中
order: 0,
style: {},
parentShow: 0,
show: 0,
theme: true,
curSpan: 0,
curInputDom: 0,
prefix: "fillText",
attributeName: "data-fillText",
hiddenKey: "Alt+q",
inputDoms: [],
boardChildNodes: 3,
curCate: "default",
category: [
{
name: "default",
setting: {},
spans: randSpans()
},
{
name: "常用",
setting: {},
spans: []
}
]
}
}
function checkGlobal(data) {
return data && JSON.stringify(data) !== "{}" && containKeys(data, defaultGlobal())
}
function saveGlobalInterval() {
setInterval(function () {
saveGlobal()
}, 1000 * 30)
}
function getGlobalHook() {
if (!isOnline()) {
return
}
GM_addValueChangeListener(GlobalKey, function(name, old_value, new_value, remote) {
console.log(name, old_value, new_value, remote)
if(remote) {
Global = getGlobal()
Global.renderStatus = 1
//重新渲染
document.body.removeChild(GlobalDoms.parentBoard)
document.body.removeChild(GlobalDoms.hiddenBoard)
loadResource()
initStyle()
setInputDom()
operationBoard()
Global.renderStatus = 0
}
})
}
function saveGlobal(g = Global) {
if (!isOnline() || Global.renderStatus === 1) {
return false
}
console.log("saveGlobal", g)
let lastG = GM_getValue(GlobalKey)
if (!checkGlobal(lastG)) {
g.version = Date.now()
GM_setValue(GlobalKey, g)
return true
}
if (checkGlobal(g)) {
g.version = Date.now()
GM_setValue(GlobalKey, g)
return true
}
return false
}
function getGlobal() {
if (!isOnline()) {
return defaultGlobal();
}
let data = GM_getValue(GlobalKey)
if (!checkGlobal(data)) {
saveGlobal(defaultGlobal())
return defaultGlobal()
}
return data
}
/**
* 分类
*/
function getCurCateVal() {
for (const v of Global.category) {
if (v.name === Global.curCate) {
return v
}
}
return Global.category[0]
}
function showCateInput() {
let divDom = GlobalDoms.categoryAreaDom.getElementsByTagName("div")[0];
if (divDom.getElementsByClassName("cateInput").length > 0) {
return
}
let el = document.createElement("input");
el.className = "cateInput"
el.placeholder = "请输入内容，按回车添加"
el.style.cssText = CSS.textArea
replaceStyle(el, "border", `1px solid ${themeColor()}`)
el.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
if (addCategory(event.target.value)) {
renderCateSpan()
renderBoard(renderSpan())
// alert("添加分类成功!")
event.stopImmediatePropagation()
}
}
})
divDom.insertBefore(el, divDom.childNodes[0])
}
function addCategory(name) {
if (name.length > 10) {
alert("分类名过长")
return false
}
let has = false
Global.category.forEach((v, i) => {
if (v.name === name) {
alert("已存在该分类")
has = true
return
}
})
if (has) return
Global.category.push({
name: name,
spansText: [],
setting: {},
spans: []
})
Global.curCate = name
saveGlobal()
changeCurCateText()
return true
}
function delCategory(name) {
if (Global.category.length <= 1) {
alert("必须有一个分类存在")
return false
}
let index = 0
Global.category.map((v, i) => {
if (v.name === name) {
index = i
}
})
Global.category.splice(index, 1)
if (name === Global.curCate) {
Global.curCate = Global.category[0].name
}
saveGlobal()
changeCurCateText()
return true
}
function categoryList() {
let divDom = GlobalDoms.categoryAreaDom.getElementsByTagName("div")[0];
if (divDom.getElementsByClassName(prefixStr("categoryList")).length > 0) {
return
}
let list = []
for (let i = 0; i < Global.category.length; i++) {
list.push(getCategorySpan(i, Global.category[i]))
}
let div = document.createElement("div")
div.className = prefixStr("categoryList")
div.setAttribute("id", prefixStr("categoryList"))
div.style.cssText = `${flexStyle({jc: CSS.flex.start})}flex-flow:row wrap;width:80%; margin: 0 20px 10px 0px;`
div.append(...list)
divDom.insertBefore(div, divDom.childNodes[0])
toBottom()
}
function getCategorySpan(i, cate) {
let close = getCloseSpan()
close.addEventListener("click", function (event) {
let curCate = Global.curCate
if (delCategory(cate.name)) {
if (cate.name === curCate) {
renderBoard(renderSpan())
}
renderCateSpan()
event.stopImmediatePropagation()
}
})
let span = document.createElement("span")
span.innerText = cate.name
span.style.cssText = CSS.cateSpanStyle
span.style.cssText += `position: relative;`
span.addEventListener("click", function (event) {
Global.curSpan = 0
Global.curCate = cate.name
renderBoard(renderSpan())
changeCurCateText()
})
span.appendChild(close)
return span
}
function changeCurCateText() {
document.getElementById(prefixStr("curCate")).innerText = `当前分类：${Global.curCate}`
}
function renderCateSpan() {
let list = []
for (let i = 0; i < Global.category.length; i++) {
list.push(getCategorySpan(i, Global.category[i]))
}
let div = document.getElementById(prefixStr("categoryList"))
div.innerHTML = ""
div.append(...list)
return div
}
/**
* 文本栏
*/
//输入栏添加span
function showInput() {
// if (GlobalDoms.board.childNodes.length > GlobalDoms.boardChildNodes + 1) {
// return
// }
let el = document.createElement("input");
el.placeholder = "请输入内容，按回车添加"
el.style.cssText = CSS.textArea
replaceStyle(el, "border", `1px solid ${themeColor()}`)
el.addEventListener("keydown", function (event) {
if (event.key === "Enter") {
addSpan(event.target.value, {index: getCurCateVal().spans.length})
renderBoard(renderSpan())
toBottom()
saveGlobal()
}
})
let divDom = GlobalDoms.textAreaDom.getElementsByTagName("div")[0];
divDom.insertBefore(el, divDom.childNodes[0])
toBottom()
}
function addSpan(text, {
cancel = false,
editKey = "",
finish = false,
index = 0,
input = false,
key = "",
set = false,
show = false
}) {
let s = createSpanData(text, getCurCateVal().spans.length)
s.show = show
s.input = input
s.set = set
s.finish = finish
s.cancel = cancel
s.index = index
s.key = key
s.editKey = editKey
getCurCateVal().spans.push(s)
}
function createSpanData(text, i = 0) {
return {
text: text,
cancel: false,
editKey: "",
finish: false,
index: i,
input: false,
key: "",
set: false,
show: false,
}
}
function randSpans() {
if (isOnline()) {
return [
createSpanData("账号: 123456"),
createSpanData("密码: 123456"),
createSpanData("点击输入框，再点击任意文本即可自动填写。也可设置快捷键填写。")
]
}
let list = []
for (let i = 0; i < Math.round(Math.random() * 10 + 3); i++) {
let s = ""
for (let j = 0; j < Math.round(Math.random() * 50 + 10); j++) {
s += Math.round(Math.random() * 10).toString()
}
list.push(createSpanData(s, i))
}
return list
}
function getSpanText(index) {
return getCurCateVal().spans[index].text
}
function getSpans() {
let list = []
for (let i = 0; i < getCurCateVal().spans.length; i++) {
list.push(getSpan(i, getSpanText(i)))
}
return list
}
function getSpan(i, text) {
let span = document.createElement("span")
span.tabIndex = 0
span.innerHTML = `
<p style="${CSS.pStyle}">${text}</p>
<div style="${CSS.spanSettingStyle}${isShow(getSpanData(i).show)}">
<input id="settingInput${i}" style="width: 80%; height: 30px;${isShow(getSpanData(i).input)}" type="text" placeholder="请按键设置" readonly>
<span style="${CSS.iconStyle}${isShow(getSpanData(i).set)}">settings</span>
<span style="${CSS.iconStyle}${isShow(getSpanData(i).finish)}">done</span>
<span style="${CSS.iconStyle}${isShow(getSpanData(i).cancel)}">close</span>
</div>
`
span.style.cssText = CSS.spanStyle
replaceStyle(span, "border", `1px solid ${themeColor()}`)
span.addEventListener("click", function (event) {
selectSpan(i)
span.removeEventListener("keydown", moveSpan)
span.addEventListener("keydown", moveSpan)
if (Global.order === 0) {
let target = `${Global.attributeName}="${Global.curInputDom}"`
let element = document.querySelector(`input[${target}]`);
element.value = text
}
})
let childSpan = span.getElementsByTagName("span")
childSpan[0].addEventListener("click", function () {
settingCtl({input: true, set: false, finish: true, cancel: true, index: i})
})
childSpan[1].addEventListener("click", function () {
saveKey(i)
})
childSpan[2].addEventListener("click", function () {
cancel(i)
})
return span
}
function selectSpan(i = Global.curSpan) {
let spanList = getCurCateVal().spanList
if (spanList.length === 0 || spanList.childNodes.length === 0) {
return
}
let spanNodes = spanList.childNodes
replaceStyle(spanNodes[Global.curSpan], "border", `1px solid ${themeColor()}`)
Global.curSpan = i
replaceStyle(spanNodes[Global.curSpan], "border", "1px solid red")
}
function moveSpan(event) {
if (event.altKey) {
let arrow = 0
if (event.key === 'ArrowDown') {
if (Global.curSpan >= getCurCateVal().spans.length - 1) {
return
}
arrow = 1
} else if (event.key === 'ArrowUp') {
if (Global.curSpan <= 0) {
return
}
arrow = -1
}
if (arrow !== 0) {
let target = Global.curSpan + arrow
let s = getCurCateVal().spans[Global.curSpan]
getCurCateVal().spans.splice(Global.curSpan, 1)
getCurCateVal().spans.splice(target, 0, s)
exchangeSpanText(Global.curSpan, target)
selectSpan(target)
Global.curSpan = target
// moveSpan无法多次触发问题，好bug，找了好久
// 由于之前selectSpan()写法会先移除moveSpan事件，导致当前执行的moveSpan直接return了，
// 无法触发后面添加moveSpan逻辑。
}
}
}
function exchangeSpanText(i, j) {
let spanNodes = getCurCateVal().spanList.childNodes
let a = spanNodes[i].getElementsByTagName("p")[0]
let b = spanNodes[j].getElementsByTagName("p")[0]
let t = a.innerText
a.innerText = b.innerText
b.innerText = t
}
function delSpan() {
getCurCateVal().spans.splice(Global.curSpan, 1)
Global.curSpan = 0
renderBoard(renderSpan())
saveGlobal()
}
function delAllSpan() {
getCurCateVal().spans = []
renderBoard(renderSpan())
saveGlobal()
}
function renderSpan() {
let div = document.createElement("div");
div.setAttribute("id", "textSpanList")
div.style.cssText = flexStyle({fd: CSS.flex.column})
div.append(...getSpans())
getCurCateVal().spanList = div
return div
}
function getSpanData(index) {
return index >= 0 ? getCurCateVal().spans[index] : getCurCateVal().setting
}
/**
* 快捷键
*/
function changeOrder() {
let d = document.getElementById(prefixStr("orderOperation"))
d.innerText = d.innerText === "先填后选" ? "先选后填" : "先填后选"
Global.order = Global.order ? 0 : 1
saveGlobal()
}
function editKey() {
settingCtl({show: !getCurCateVal().setting.show, set: !getCurCateVal().setting.set})
}
function settingCtl({show = true, input = false, set = true, finish = false, cancel = false, index = -1}) {
if (index !== -1) {
//单span控制
let span = getCurCateVal().spans[index]
getCurCateVal().spans[index].show = show
getCurCateVal().spans[index].input = input
getCurCateVal().spans[index].set = set
getCurCateVal().spans[index].finish = finish
getCurCateVal().spans[index].cancel = cancel
} else {
//全局控制
getCurCateVal().setting.show = show
getCurCateVal().setting.input = input
getCurCateVal().setting.set = set
getCurCateVal().setting.finish = finish
getCurCateVal().setting.cancel = cancel
getCurCateVal().spans.map(v => {
v.show = show
v.input = input
v.set = set
v.finish = finish
v.cancel = cancel
})
}
renderBoard(renderSpan())
if (input) {
listenKey(index)
}
//阻止冒泡
let event = window.event || arguments.callee.caller.arguments[0];
event.stopPropagation()
}
function listenKey(index) {
let ss = getSpanData(index)
let input = document.getElementById("settingInput" + index);
input.focus()
input.value = ss.key
ss.editKey = ss.key
let downingKeys = [] //按下未松开的keys
input.addEventListener("keydown", function (event) {
if (event.key === "Backspace") {
//如果存在，则移除按下中的key
let i = downingKeys.indexOf(event.key)
i !== -1 ? downingKeys.splice(i, 1) : null
let arr = ss.editKey.split("+")
arr.pop()
ss.editKey = arr.join("+")
} else if (!downingKeys.includes(event.key)) {
if (ss.editKey === "") {
ss.editKey += event.key
} else {
ss.editKey += "+" + event.key
}
downingKeys.push(event.key)
}
input.value = ss.editKey
});
input.addEventListener("keyup", function (event) {
if (event.key !== "Backspace") {
let i = downingKeys.indexOf(event.key)
i !== -1 ? downingKeys.splice(i, 1) : null
}
});
let event = window.event || arguments.callee.caller.arguments[0];
event.stopPropagation()
}
function saveKey(index) {
let ss = getSpanData(index)
let has = false
getCurCateVal().spans.map(v => {
if (v.key === ss.editKey && v.index !== ss.index) {
alert(`文本 ${getSpanText(v.index)} 已设置该快捷键`)
has = true
}
})
if (!has) {
ss.key = ss.editKey
ss.editKey = ""
settingCtl({index: index})
}
saveGlobal()
}
function cancel(index) {
let ss = getSpanData(index)
ss.editKey = ""
settingCtl({index: index})
}
/**
* 右侧操作面板
*/
function rightOperateBoard() {
let b = document.createElement("div");
b.style.cssText = CSS.rightBoardStyle
b.setAttribute("id", "fillTextOperateBoard")
GlobalDoms.textAreaDom = textArea()
GlobalDoms.categoryAreaDom = categoryArea()
GlobalDoms.settingAreaDom = settingArea()
domCtl([], [GlobalDoms.textAreaDom, GlobalDoms.categoryAreaDom, GlobalDoms.settingAreaDom])
b.appendChild(GlobalDoms.textAreaDom)
b.appendChild(GlobalDoms.categoryAreaDom)
b.appendChild(GlobalDoms.settingAreaDom)
GlobalDoms.rightBoard = b
return b
}
function textArea() {
let operation = document.createElement("div")
operation.style.width = "100%"
operation.style.cssText += flexStyle({})
operation.innerHTML = `
<div id="${prefixStr("bottomOperation")}">
<div style="${flexStyle({jc: CSS.flex.start})}margin: 0 20px 10px 0px;flex-flow:row wrap;">
<span style="${CSS.operationStyle}" >快捷键</span>
<span style="${CSS.operationStyle}">添加</span>
<span style="${CSS.operationStyle}background: #ea5c5c;">删除</span>
<span style="${CSS.operationStyle}margin-right: 0px;background: #ea5c5c;">清空</span>
</div>
<div style="${flexStyle({jc: CSS.flex.start})}flex-flow:row wrap;">
<span style="${CSS.operationStyle}">隐藏</span>
</div>
</div>`
let list = [editKey, showInput, delSpan, delAllSpan, domCtl]
list.forEach((v, i) => {
if (v.name === "domCtl") {
operation.getElementsByTagName("span")[i].addEventListener("click", function () {
v([], [GlobalDoms.rightBoard])
})
return
}
operation.getElementsByTagName("span")[i].addEventListener("click", v)
})
return operation
}
function categoryArea() {
let operation = document.createElement("div")
operation.style.width = "100%"
operation.style.cssText += flexStyle({})
operation.style.cssText += "flex-flow:row wrap;"
operation.innerHTML = `
<div id="${prefixStr("bottomOperation")}">
<div style="${flexStyle({jc: CSS.flex.start})}margin: 0 20px 10px 0px;flex-flow:row wrap;">
<span style="${CSS.operationStyle}">添加分类</span>
<span style="${CSS.operationStyle}margin-right: 0px;">分类列表</span>
<span id="${prefixStr("curCate")}" style="${CSS.operationStyle}">当前分类：${Global.curCate}</span>
</div>
<div style="${flexStyle({jc: CSS.flex.start})}flex-flow:row wrap;">
<span style="${CSS.operationStyle}">隐藏</span>
</div>
</div>`
let list = [showCateInput, categoryList, emptyFunc, domCtl]
list.forEach((v, i) => {
if (v.name === "domCtl") {
operation.getElementsByTagName("span")[i].addEventListener("click", function () {
v([], [GlobalDoms.rightBoard])
})
return
}
operation.getElementsByTagName("span")[i].addEventListener("click", v)
})
return operation
}
function settingArea() {
let operation = document.createElement("div")
operation.style.width = "100%"
operation.style.cssText += flexStyle({})
operation.style.cssText += "flex-flow:row wrap;"
operation.innerHTML = `
<div id="${prefixStr("bottomOperation")}">
<div style="${flexStyle({jc: CSS.flex.start})}margin: 0 20px 10px 0px;flex-flow:row wrap;">
<span style="${CSS.operationStyle}">⬆</span>
<span style="${CSS.operationStyle}">⬇</span>
<span style="${CSS.operationStyle}">说明</span>
<span id="${prefixStr("orderOperation")}" style="${CSS.operationStyle}">先填后选</span>
<span id="${prefixStr("orderOperation")}" style="${CSS.operationStyle}margin-right: 0px;">编辑隐藏快捷键</span>
</div>
<div style="${flexStyle({jc: CSS.flex.start})}flex-flow:row wrap;">
<span style="${CSS.operationStyle}">隐藏</span>
</div>
</div>`
let list = [changeBoardHeight, changeBoardHeight, doc, changeOrder, showEditKeyInput, domCtl]
list.forEach((v, i) => {
if (v.name === "changeBoardHeight") {
operation.getElementsByTagName("span")[i].addEventListener("click", function () {
i % 2 === 0 ? v(40) : v(-40)
})
} else if (v.name === "domCtl") {
operation.getElementsByTagName("span")[i].addEventListener("click", function () {
v([], [GlobalDoms.rightBoard])
})
} else if (v.name === "showEditKeyInput") {
operation.getElementsByTagName("span")[i].addEventListener("click", v)
} else {
operation.getElementsByTagName("span")[i].addEventListener("click", v)
}
})
return operation
}
function showEditKeyInput() {
let divDom = GlobalDoms.settingAreaDom.getElementsByTagName("div")[0];
if (divDom.getElementsByClassName("editKeyInput").length > 0) {
return
}
let inputDom = document.createElement("div");
inputDom.className = "editKeyInput"
inputDom.innerHTML = `
<input id="editKeyInput" style="width: 80%; height: 30px;" type="text" value="${Global.hiddenKey}"
placeholder="请按键设置" readOnly>
`
divDom.insertBefore(inputDom, divDom.childNodes[0])
listenHiddenKey()
}
function listenHiddenKey() {
let input = GlobalDoms.settingAreaDom.getElementsByTagName("input")[0]
input.focus()
input.value = Global.hiddenKey
let editKey = ""
let downingKeys = [] //按下未松开的keys
input.addEventListener("keydown", function (event) {
if (event.key === "Backspace") {
//如果存在，则移除按下中的key
let i = downingKeys.indexOf(event.key)
i !== -1 ? downingKeys.splice(i, 1) : null
let arr = editKey.split("+")
arr.pop()
editKey = arr.join("+")
} else if(event.key === "Enter") {
let arr = editKey.split("+")
if(arr.length === 2 && arr[0] === "Alt" && arr[1] !== "Alt") {
Global.hiddenKey = editKey
let divDom = GlobalDoms.settingAreaDom.getElementsByTagName("div")[0]
divDom.removeChild(divDom.getElementsByTagName("div")[0])
saveGlobal()
} else {
alert("只能设置为Alt+任意键，长度为2")
}
} else if (!downingKeys.includes(event.key)) {
if (editKey === "") {
editKey += event.key
} else {
editKey += "+" + event.key
}
downingKeys.push(event.key)
}
input.value = editKey
});
input.addEventListener("keyup", function (event) {
if (event.key !== "Backspace") {
let i = downingKeys.indexOf(event.key)
i !== -1 ? downingKeys.splice(i, 1) : null
}
});
let event = window.event || arguments.callee.caller.arguments[0];
event.stopPropagation()
}
/**
* 控制面板
*/
function changeBoardHeight(h) {
GlobalDoms.board.style.height = parseInt(GlobalDoms.board.style.height) + h + "px"
}
function renderBoard(spanListDom) {
GlobalDoms.board.replaceChild(spanListDom, GlobalDoms.board.childNodes[1])
let l = GlobalDoms.board.childNodes.length
if (l > GlobalDoms.boardChildNodes) {
for (let i = GlobalDoms.boardChildNodes; i < l; i++) {
GlobalDoms.board.removeChild(GlobalDoms.board.lastChild)
}
}
selectSpan()
}
function modeCtl() {
if (Global.theme) {
Global.theme = false
replaceStyle(GlobalDoms.board, "border", `5px solid ${themeColor()}`)
getCurCateVal().spanList.childNodes.forEach(v => {
replaceStyle(v, "border", `1px solid ${themeColor()}`)
})
return
}
Global.theme = true
replaceStyle(GlobalDoms.board, "border", `5px solid ${themeColor()}`)
getCurCateVal().spanList.childNodes.forEach(v => {
replaceStyle(v, "border", `1px solid ${themeColor()}`)
})
saveGlobal()
}
function topOperation() {
let operation = document.createElement("div")
operation.style.width = "100%"
operation.innerHTML = `
<div id="${prefixStr("topOperation")}" style="${flexStyle({jc: CSS.flex.end})}margin: 0 20px 10px 0px;">
<span style="${CSS.iconStyle}font-size: 20px;">light_mode</span>
<span style="${CSS.iconStyle}">expand_more</span>
<span style="${CSS.iconStyle}">remove</span>
</div>`
let childSpan = operation.getElementsByTagName("span")
childSpan[0].addEventListener("click", modeCtl)
childSpan[1].addEventListener("click", toBottom)
childSpan[2].addEventListener("click", function () {
parentBoardCtl(1)
})
return operation
}
function bottomOperation() {
let operation = document.createElement("div")
operation.style.width = "100%"
operation.innerHTML = `
<div id="${prefixStr("bottomOperation")}">
<div style="${flexStyle({jc: CSS.flex.end})}margin: 0 20px 10px 0px;">
<span style="${CSS.operationStyle}" >快捷键</span>
<span style="${CSS.operationStyle}">添加</span>
<span style="${CSS.operationStyle}background: #ea5c5c;">删除</span>
<span style="${CSS.operationStyle}margin-right: 0px;background: #ea5c5c;">清空</span>
</div>
<div style="${flexStyle({jc: CSS.flex.end})}margin: 0 20px 10px 0px;">
<span style="${CSS.operationStyle}">说明</span>
<span style="${CSS.operationStyle}">保存配置</span>
<span id="${prefixStr("orderOperation")}" style="${CSS.operationStyle}margin-right: 0px;">先填后选</span>
</div>
<div style="${flexStyle({jc: CSS.flex.end})}margin: 0 20px 10px 0px;">
<span style="${CSS.operationStyle}">⬆</span>
<span style="${CSS.operationStyle}">⬇</span>
<span style="${CSS.operationStyle}">添加分类</span>
<span style="${CSS.operationStyle}margin-right: 0px;">分类列表</span>
</div>
<div style="${flexStyle({jc: CSS.flex.end})}margin: 0 20px 10px 0px;">
<span id="${prefixStr("curCate")}" style="${CSS.operationStyle}margin-right: 0px;">当前分类：${Global.curCate}</span>
</div>
</div>`
let list = [editKey, showInput, delSpan, delAllSpan, doc, saveGlobal, changeOrder, changeBoardHeight, changeBoardHeight, showCateInput, categoryList]
list.forEach((v, i) => {
if (v.name === "changeBoardHeight") {
operation.getElementsByTagName("span")[i].addEventListener("click", function () {
i % 2 === 0 ? v(40) : v(-40)
})
} else if (v.name === "saveGlobal") {
operation.getElementsByTagName("span")[i].addEventListener("click", function () {
if (saveGlobal()) {
alert(`保存成功!`)
} else {
alert(`配置数据太旧，无法保存。请刷新页面后再编辑保存`)
}
})
} else {
operation.getElementsByTagName("span")[i].addEventListener("click", v)
}
})
return operation
}
function bottomOperationV2() {
let operation = document.createElement("div")
operation.style.width = "100%"
operation.innerHTML = `
<div id="${prefixStr("bottomOperationV2")}">
<div style="${flexStyle({jc: CSS.flex.end})}margin: 0 20px 10px 0px;">
<span style="${CSS.operationStyle}" >文本</span>
<span style="${CSS.operationStyle}">分类</span>
<span style="${CSS.operationStyle}margin-right: 0px;">设置</span>
</div>
</div>`
let list = [domCtl, domCtl, domCtl]
list.forEach((v, i) => {
if (i === 0) {
operation.getElementsByTagName("span")[i].addEventListener("click", function () {
v([GlobalDoms.rightBoard], [])
v([GlobalDoms.textAreaDom], [GlobalDoms.categoryAreaDom, GlobalDoms.settingAreaDom])
})
} else if (i === 1) {
operation.getElementsByTagName("span")[i].addEventListener("click", function () {
v([GlobalDoms.rightBoard], [])
v([GlobalDoms.categoryAreaDom], [GlobalDoms.textAreaDom, GlobalDoms.settingAreaDom])
})
} else if (i === 2) {
operation.getElementsByTagName("span")[i].addEventListener("click", function () {
v([GlobalDoms.rightBoard], [])
v([GlobalDoms.settingAreaDom], [GlobalDoms.textAreaDom, GlobalDoms.categoryAreaDom])
})
}
})
return operation
}
function board() {
let b = document.createElement("div");
b.style.cssText = CSS.boardStyle
b.setAttribute("id", "fillTextBoard")
b.appendChild(topOperation())
b.appendChild(renderSpan())
b.appendChild(bottomOperationV2())
GlobalDoms.board = b
return b
}
function hiddenBoard() {
let hb = document.createElement("div")
hb.style.cssText = CSS.hiddenBoardStyle
hb.setAttribute("id", "fillTextHiddenBoard")
hb.innerHTML = `<span style="${CSS.iconStyle}font-size:30px;pointer-events: none;">add</span>`
hb.addEventListener("click", function () {
parentBoardCtl(0)
})
GlobalDoms.hiddenBoard = hb
return hb
}
// 两个boardCtl优化为domCtl方法
function boardCtl(show) {
if (show === 0) {
hiddenDom(GlobalDoms.hiddenBoard)
showDom(GlobalDoms.board)
} else if (show === 1) {
hiddenDom(GlobalDoms.board)
showDom(GlobalDoms.hiddenBoard)
} else if (show === -1) {
hiddenDom(GlobalDoms.board)
hiddenDom(GlobalDoms.hiddenBoard)
}
Global.show = show
saveGlobal()
}
function parentBoardCtl(show) {
if (show === 0) {
hiddenDom(GlobalDoms.hiddenBoard)
showDom(GlobalDoms.parentBoard)
} else if (show === 1) {
hiddenDom(GlobalDoms.parentBoard)
showDom(GlobalDoms.hiddenBoard)
} else if (show === -1) {
hiddenDom(GlobalDoms.parentBoard)
hiddenDom(GlobalDoms.hiddenBoard)
}
Global.parentShow = show
saveGlobal()
}
function parentBoard() {
let b = document.createElement("div");
b.style.cssText = CSS.parentBoardStyle
b.setAttribute("id", "fillTextParentBoard")
b.appendChild(board())
b.appendChild(rightOperateBoard())
GlobalDoms.parentBoard = b
return b
}
//操作面板
function operationBoard() {
document.body.appendChild(parentBoard())
document.body.appendChild(hiddenBoard())
document.body.removeEventListener("keydown", listenBodyKey)
document.body.addEventListener("keydown", listenBodyKey)
parentBoardCtl(Global.parentShow)
moveDom(GlobalDoms.parentBoard)
domCtl([GlobalDoms.board], [GlobalDoms.rightBoard])
}
/**
* 响应事件区
*/
function listenBodyKey (event) {
if (event.altKey) {
if ("Alt+" + event.key === Global.hiddenKey) {
Global.parentShow === -1 ? parentBoardCtl(0) : parentBoardCtl(-1)
}
}
}
function toBottom() {
GlobalDoms.board.scrollTop = GlobalDoms.board.scrollHeight
}
function moveDom(dom) {
let isDragging = false;
let x, y;
dom.addEventListener("mousedown", function (event) {
isDragging = true;
x = event.x;
y = event.y;
});
dom.addEventListener("mousemove", function (event) {
if (isDragging) {
let offsetX = event.x - x;
let offsetY = event.y - y;
dom.style.left = parseInt(dom.style.left) + offsetX + "px";
dom.style.top = parseInt(dom.style.top) + offsetY + "px";
x = event.x
y = event.y
}
});
dom.addEventListener("mouseup", function () {
isDragging = false;
});
}
function doc() {
alert("面板隐藏快捷键默认为Alt+q，可自行更改（只能设置为Alt+任意键，修改后按下Enter保存）\n快捷键建议Alt开头或纯字母数字，如：Alt+1、qq、11\n")
}
