From b04341aaa09c2987744fe66b3db35cd22db0c38d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=AB=E8=B0=B7=E5=89=91=E4=BB=99?= Date: Wed, 14 Dec 2022 02:21:34 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A2=9C=E8=89=B2=E6=9C=AA?= =?UTF-8?q?=E8=83=BD=E8=BD=AC=E6=8D=A2=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script-universal_function.js | 18 ++++++++++++++++++ script.js | 30 ++++++++++++++++++++++++----- style.css | 37 ++++++++++++++++++++---------------- 3 files changed, 64 insertions(+), 21 deletions(-) diff --git a/script-universal_function.js b/script-universal_function.js index 77009761..5f23cc82 100644 --- a/script-universal_function.js +++ b/script-universal_function.js @@ -858,6 +858,24 @@ function searchCollab(event) { showSearch(Cards.filter(card => card.collabId == collabId)); return false; } +function rgbToHex(str) { //RGB(A)颜色转换为HEX十六进制的颜色值 + let res = /rgba?\((\d{1,3}),(\d{1,3}),(\d{1,3})(,([.\d]+))?\)/ig.exec(str.replace(/\s/g,'')); + if (res) { + let [,r,g,b,a] = res; + let rgb = [r,g,b].map(s=>parseInt(s,10)); + if (a) { + rgb.push(Math.round(Number(a) * 255)); + } + return rgb.map(n=>n.toString(16).padStart(2,'0')).join(''); + } + else if (res = /#([a-fA-F0-9]{6,8})/i.exec(str)) + { + return res[1]; + } + else { + return '000000'; + } +} //创建序号类图标 function createIndexedIcon(type, index) { if (type == 'card') {//卡片头像 diff --git a/script.js b/script.js index 46589c47..14b1f722 100644 --- a/script.js +++ b/script.js @@ -2243,7 +2243,7 @@ function initialize() { const docObj = range.extractContents(); //移动了Range 中的内容从文档树到DocumentFragment（文档片段对象)。 let dom if (color === "#000000") { - dom = document.createTextNode(docObj); + dom = document.createTextNode(docObj.textContent); } else { dom = document.createElement('span'); dom.style.color = color; @@ -2323,13 +2323,11 @@ function initialize() { } const range = docSelection.getRangeAt(0); let target; - console.log(range); if (target = (txtTitleDisplay.contains(range.commonAncestorContainer) && txtTitleDisplay) || (txtDetailDisplay.contains(range.commonAncestorContainer) && txtDetailDisplay)) { let dom = createIndexedIcon(type, id); range.insertNode(dom); - console.log(target); target.onblur(); } else if (target = (txtTitle.contains(range.commonAncestorContainer) && txtTitle) || (txtDetail.contains(range.commonAncestorContainer) && txtDetail)) @@ -2361,9 +2359,19 @@ function initialize() { function richTextToCode(parentElement){ let code = []; for (let node of parentElement.childNodes) { - if (node.nodeName == "#text"){ + if (node.nodeName == "#text"){ //纯文本 code.push(node.nodeValue); continue; + } else if (node.nodeName == "SPAN" && node.style.color) { //文字颜色 + let colorStr = rgbToHex(node.style.color); + code.push(`^${colorStr}^${node.textContent}^p`); + continue; + } else if (node.nodeName == "DIV") { + code.push(richTextToCode(node)+'\n'); + continue; + } else if (node.nodeName == "BR") { + code.push('\n'); + continue; } let type, id; if(node.classList.contains("detail-mon")) { //卡片头像 @@ -2397,7 +2405,17 @@ function initialize() { formationBox.refreshDocumentTitle(); creatNewUrl(); } + //标题凡是输入就删除所有的换行 + txtTitleDisplay.oninput = function(){ + for (let node of this.children) { + if (node.nodeName == "BR") node.remove(); + } + } txtDetailDisplay.onblur = function(){ + //没有内容或者只有一个换行时，清空内容 + if (this.textContent.length == 0 || this.textContent == "\n") { + this.innerHTML = ''; + } formation.detail = txtDetail.value = richTextToCode(this); creatNewUrl(); } @@ -5633,9 +5651,11 @@ function fastShowSkill(event) { function localisation($tra) { if (!$tra) return; document.title = $tra.webpage_title; + controlBox.querySelector(".datasource-updatetime").title = $tra.force_reload_data; formationBox.querySelector(".title-box .title-code").placeholder = $tra.title_blank; + formationBox.querySelector(".title-box .title-display").dataset.placeholder = $tra.title_blank; formationBox.querySelector(".detail-box .detail-code").placeholder = $tra.detail_blank; - controlBox.querySelector(".datasource-updatetime").title = $tra.force_reload_data; + formationBox.querySelector(".detail-box .detail-display").dataset.placeholder = $tra.detail_blank; const s_sortList = editBox.querySelector(".search-box .sort-div .sort-list"); const sortOptions = Array.from(s_sortList.options); diff --git a/style.css b/style.css index 8bb61a74..23d5fe7d 100644 --- a/style.css +++ b/style.css @@ -91,7 +91,12 @@ details>summary { } #rich-text-tools button { - height: 32px; + min-width: 64px; +} +#rich-text-tools button, +#rich-text-tools input +{ + height: 40px; vertical-align: middle; text-align: center; } @@ -115,42 +120,37 @@ label[for="siwtch-code-mode"] { margin: 0 0 0 5px; } label[for="siwtch-code-mode"]::after { - font-size: 1.5em; + font-size: 1.7em; font-family: var(--icon-font-family); content: "\f121"; vertical-align: middle; } #set-font-color::before { content: "A"; - font-size: 1.5em; + font-size: 1.7em; } #color-chooser { - width: 20px; - vertical-align: middle; + width: 30px; } #insert-card-avatar::before { width: 100px; height: 100px; background-image: url(images/CARDFRAME2.PNG), url(images/CARDFRAME2.PNG); background-position: -102px -104px, 0 0; - transform: scale(calc(25 / 100)); - margin: calc(-100px * (1 - (25 / 100)) / 2); + transform: scale(calc(32 / 100)); + margin: calc(-100px * (1 - (32 / 100)) / 2); } #insert-type-icon::before { width: 32px; height: 32px; background-image: url(images/type.png); background-position-y: calc(-32px * 4); - transform: scale(calc(25 / 32)); - margin: calc(-32px * (1 - (25 / 32)) / 2); } #insert-awoken-icon::before { width: 32px; height: 32px; background-image: url(images/awoken.png); background-position-y: calc(-32px * 43); - transform: scale(calc(25 / 32)); - margin: calc(-32px * (1 - (25 / 32)) / 2); } #insert-latent-icon::before { width: 32px; @@ -163,15 +163,13 @@ label[for="siwtch-code-mode"]::after { background-image: url(images/icon-latent.png); background-position-x: -2px; background-position-y: calc(-32px * 11 - 2px); - transform: scale(calc(25 / 32)); - margin: calc(-32px * (1 - (25 / 32)) / 2); } #insert-orb-icon::before { width: 36px; height: 36px; background-image: url(images/icon-orbs.png); - transform: scale(calc(25 / 36)); - margin: calc(-36px * (1 - (25 / 36)) / 2); + transform: scale(calc(32 / 36)); + margin: calc(-36px * (1 - (32 / 36)) / 2); } #rich-text-tools>ul icon { cursor: pointer; @@ -217,7 +215,14 @@ label[for="siwtch-code-mode"]::after { margin: 0; white-space: break-spaces; } - +:where( + .title-display, + .detail-display, +):empty::before{ + color: grey; + position: absolute; + content: attr(data-placeholder); +} .guide-mod .control-box>div.status { display: block;