修复颜色未能转换的问题
This commit is contained in:
parent
3a1c60495e
commit
b04341aaa0
|
|
@ -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') {//卡片头像
|
||||
|
|
|
|||
32
script.js
32
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;
|
||||
formationBox.querySelector(".title-box .title-code").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(".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;
|
||||
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);
|
||||
|
|
|
|||
37
style.css
37
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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue