Skip to content

Commit

Permalink
feat: optimize handling of ol list label in vertical reading mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@plateaukao
plateaukao committed Nov 25, 2024
1 parent 489eb0d commit 20cb9ed
Show file tree
Hide file tree
Showing 2 changed files with 128 additions and 18 deletions.
113 changes: 112 additions & 1 deletion app/src/main/assets/process_text_nodes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,4 +63,115 @@ function isLetter(char) {
return /[a-zA-Z]/.test(char); // Returns true if the character is a letter
}

convertToVerticalStyle(document.body);
function convertListLabelToVertical(node) {
const listItems = node.querySelectorAll('li');
listItems.forEach(listItem => {
const label = listItem.querySelector('span.vertical');
if (label) {
label.classList.add('listLabel');
}
});
}

convertToVerticalStyle(document.body);

// Helper function to get the list based on the list style type
function convertListLabel(node) {
function getList(listType) {
const lists = {
"upper-alpha": ["\u30A2","\u30A4","\u30A6","\u30A8","\u30AA","\u30AB","\u30AD","\u30AF","\u30B1","\u30B3","\u30B5","\u30B7","\u30B9","\u30BB","\u30BD","\u30BF","\u30C1","\u30C4","\u30C6","\u30C8","\u30CA","\u30CB","\u30CC","\u30CD","\u30CE","\u30CF","\u30D2","\u30D5","\u30D8","\u30DB","\u30DE","\u30DF","\u30E0","\u30E1","\u30E2","\u30E4","\u30E6","\u30E8","\u30E9","\u30EA","\u30EB","\u30EC","\u30ED","\u30EF","\u30F0","\u30F1","\u30F2","\u30F3"],
"hiragana": ["\u3042","\u3044","\u3046","\u3048","\u304A","\u304B","\u304D","\u304F","\u3051","\u3053","\u3055","\u3057","\u3059","\u305B","\u305D","\u305F","\u3061","\u3064","\u3066","\u3068","\u306A","\u306B","\u306C","\u306D","\u306E","\u306F","\u3072","\u3075","\u3078","\u307B","\u307E","\u307F","\u3080","\u3081","\u3082","\u3084","\u3086","\u3088","\u3089","\u308A","\u308B","\u308C","\u308D","\u308F","\u3090","\u3091","\u3092","\u3093"],
"katakana-iroha": ["\u30A4","\u30ED","\u30CF","\u30CB","\u30DB","\u30D8","\u30C8","\u30C1","\u30EA","\u30CC","\u30EB","\u30F2","\u30EF","\u30AB","\u30E8","\u30BF","\u30EC","\u30BD","\u30C4","\u30CD","\u30CA","\u30E9","\u30E0","\u30A6","\u30F0","\u30CE","\u30AA","\u30AF","\u30E4","\u30DE","\u30B1","\u30D5","\u30B3","\u30A8","\u30C6","\u30A2","\u30B5","\u30AD","\u30E6","\u30E1","\u30DF","\u30B7","\u30F1","\u30D2","\u30E2","\u30BB","\u30B9"],
"hiragana-iroha": ["\u3044","\u308D","\u306F","\u306B","\u307B","\u3078","\u3068","\u3061","\u308A","\u306C","\u308B","\u3092","\u308F","\u304B","\u3088","\u305F","\u308C","\u305D","\u3064","\u306D","\u306A","\u3089","\u3080","\u3046","\u3090","\u306E","\u304A","\u304F","\u3084","\u307E","\u3051","\u3075","\u3053","\u3048","\u3066","\u3042","\u3055","\u304D","\u3086","\u3081","\u307F","\u3057","\u3091","\u3072","\u3082","\u305B","\u3059"],
"upper-roman": ["I","II","III","IV","V","VI","VII","VIII","IX","X","XI","XII","XIII","XIV","XV","XVI","XVII","XVIII","XIX","XX"],
"lower-roman": ["i","ii","iii","iv","v","vi","vii","viii","ix","x","xi","xii","xiii","xiv","xv","xvi","xvii","xviii","xix","xx"],
"decimal": ["1","2","3","4","5","6","7","8","9","10"],
"cjk-ideographic": ["\u4E00","\u4E8C","\u4E09","\u56DB","\u4E94","\u516D","\u4E03","\u516B","\u4E5D","\u5341"],
"\u58F1": ["\u58F1","\u5F10","\u53C2","\u56DB","\u4F0D","\u516D","\u4E03","\u516B","\u4E5D","\u62FE"]
};

if (listType == "A" || listType == "\u30A2" || listType == "upper-latin" || listType == "katakana") {
return lists["upper-alpha"];
} else if (listType == "a" || listType == "\u3042" || listType == "lower-latin" || listType == "hiragana") {
return lists["hiragana"];
} else if (listType == "\u30A4" || listType == "katakana-iroha") {
return lists["katakana-iroha"];
} else if (listType == "\u3044" || listType == "hiragana-iroha") {
return lists["hiragana-iroha"];
} else if (listType == "I" || listType == "upper-roman") {
return lists["upper-roman"];
} else if (listType == "i" || listType == "lower-roman") {
return lists["lower-roman"];
} else if (listType == "none" || listType == "1" || listType == "decimal" || listType == "\u4E00" || listType == "cjk-ideographic" || listType == "\u58F1") {
return (listType == "\u58F1") ? lists["\u58F1"] : lists["cjk-ideographic"];
} else {
return [];
}
}

// Function to convert a single label based on the given list style type and index
function convertLabel(listType, index) {
let list = getList(listType);
if (list.length === 0) {
return "";
}
if (listType == "none" || listType == "1" || listType == "decimal") {
return `${index+1}.`;
} else if (listType == "\u4E00" || listType == "cjk-ideographic" || listType == "\u58F1") {
return index <= 10 ? `(${list[index]})` : `(${index}).`;
}
return `(${list[index]})`;
}

// Main function logic
const olLists = node.querySelectorAll("ol");

olLists.forEach((ol) => {
const listStyleType = window.getComputedStyle(ol).listStyleType;
console.log(listStyleType);
const listItems = ol.querySelectorAll("li");
listItems.forEach((li, index) => {
console.log(li.textContent);
const marker = convertLabel(listStyleType, index);
li.setAttribute("data-marker", marker);
});
});
}

// const ulLists = node.querySelectorAll("ul");
// ulLists.forEach((ul) => {
// const listStyleType = ul.style.listStyleType;
// const listItems = ul.querySelectorAll("li");
// listItems.forEach((li, index) => {
// const marker = convertLabel(listStyleType, index);
// li.setAttribute("data-marker", marker);
// });
// });

// Run the function on the document body
convertListLabel(document.body);

function changeOlToOlCjk(node) {
const olElements = node.querySelectorAll("ol");

olElements.forEach((ol) => {
const newOl = document.createElement("ol");
newOl.classList.add("cjk");

// Copy all attributes from old ol to new ol
for (let attr of ol.attributes) {
newOl.setAttribute(attr.name, attr.value);
}

// Move all children from old ol to new ol
while (ol.firstChild) {
newOl.appendChild(ol.firstChild);
}

// Replace old ol with new ol
ol.parentNode.replaceChild(newOl, ol);
});
}

changeOlToOlCjk(document.body);

33 changes: 16 additions & 17 deletions app/src/main/assets/verticalReaderview.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,23 +239,6 @@
border-left: 2px solid !important;
}

.mozac-readerview-content ul,
.mozac-readerview-content ol {
margin: 0px !important;
margin-left: 20px !important;
padding: 0px !important;
}

.mozac-readerview-content ul {
padding-inline-start: 30px !important;
list-style: disc !important;
}

.mozac-readerview-content ol {
padding-inline-start: 35px !important;
list-style: decimal !important;
}

/* Hide elements with common "hidden" class names */
.mozac-readerview-content .visually-hidden,
.mozac-readerview-content .visuallyhidden,
Expand Down Expand Up @@ -289,4 +272,20 @@
.verticalSingleChr {
writing-mode: vertical-rl;
text-orientation: upright;
}
ol.cjk {
list-style-type: none;
}
ol.cjk li:before {
content: attr(data-marker);
display: -moz-inline-block;
display: inline-block;
width: 2em;
text-align: center;
margin: 0 -0.1em 0.8em 0;
font-size: 0.8em;
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform:rotate(-90deg);
}

0 comments on commit 20cb9ed

Please sign in to comment.