Merge pull request dteviot#9 from gamebeaker/royalroad-Table-to-Div

royalroad Table to Div better tolino readability
gamebeaker · Oct 8, 2024 · e021ebb · e021ebb
2 parents 80d20f6 + 4d588fd
commit e021ebb
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 0 deletions.
diff --git a/Epub.js b/Epub.js
@@ -352,6 +352,36 @@ class Epub {
         }
         return sequence;
     }
+
+    convertTableToDiv() {
+        let mutator = function(dom, zipObjectName) {
+            function replaceTableToDivHelper(element, elementtoreplace, csstext) {
+                if (element == null || element == undefined) {
+                    return;
+                }
+                for(let node of [...element.querySelectorAll(elementtoreplace)]) {
+                    let elementchildren = [...node.childNodes];
+                    let div = document.createElement("div");
+                    div.append(...elementchildren);
+                    if (elementtoreplace == "table") {
+                        node.parentNode.style.overflow = "visible";
+                    }
+                    if (csstext != "") {
+                        div.style.cssText = csstext;
+                    }
+                    node.replaceWith(div);
+                }
+            }
+            for(let table of [...dom.querySelectorAll("table")]) {
+                replaceTableToDivHelper(table, "td", "flex: 1;padding: 5px;border: 1px solid black;");
+                replaceTableToDivHelper(table, "tr", "display: flex;border: 1px solid black;");
+                replaceTableToDivHelper(table, "tbody", "");
+                replaceTableToDivHelper(table.parentNode, "table", "border-collapse: collapse;width: 100%;");
+            }
+            return true;
+        }
+        return this.processEachXhtmlFile(mutator);
+    }
 
     checkForInvalidXhtml() {
         let sequence = Promise.resolve();

diff --git a/main.html b/main.html
@@ -82,6 +82,10 @@ <h1>Epub Editor</h1>
             <td></td>
             <td><button id="sanitizeButton">Sanitize XHTML</button></td>
         </tr>
+        <tr>
+            <td></td>
+            <td><button id="convertTableToDivButton">Convert royalroad Table to Div (better tolino readability)</button></td>
+        </tr>
     </table>
     <div id="outputTarget">
         <h4 id="listHeader"></h4>

diff --git a/main.js b/main.js
@@ -130,6 +130,12 @@ class Main {
         return epub.sanitizeXhtml()
             .then(() => epub.save(this.fileName, "application/epub+zip"));
     }
+
+    convertTableToDiv() {
+        let epub = this.epub;
+        return epub.convertTableToDiv()
+            .then(() => epub.save(this.fileName, "application/epub+zip"));
+    }
 
     removeZeroSizeImages() {
         return this.removeImages(this.epub.findZeroSizeImages());
@@ -201,6 +207,7 @@ class Main {
         document.getElementById("removeElementsButton").onclick = this.removeElementsMatchingCss.bind(this);
         document.getElementById("cleanChrysanthemumGardenButton").onclick = this.cleanChrysanthemumGarden.bind(this);
         document.getElementById("sanitizeButton").onclick = this.sanitizeXhtml.bind(this);
+        document.getElementById("convertTableToDivButton").onclick = this.convertTableToDiv.bind(this);
         document.getElementById("runScriptButton").onclick = this.runScript.bind(this);
 
         const fileNameInput = document.getElementById('fileNameInput');