Separated the 2 ways of updating element, adding and styling, see #7

basshelal · Aug 15, 2019 · 6f7e72f · 6f7e72f
1 parent f7c61cf
commit 6f7e72f
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 16 deletions.
diff --git a/chrome/main.js b/chrome/main.js
@@ -4,6 +4,7 @@
  */
 var arabicRegEx = new RegExp('([\u0600-\u06FF\u0750-\u077F\u08a0-\u08ff\uFB50-\uFDFF\uFE70-\uFEFF]+(' +
     ' [\u0600-\u06FF\u0750-\u077F\u08a0-\u08ff\uFB50-\uFDFF\uFE70-\uFEFF\W\d]+)*)', 'g');
+// TODO figure out a way to have common code in one place instead of all this duplicated code
 // TODO change customSettings to be a Set so that we guarantee no duplicates!
 //  maybe same for whiteListed but that would mean a db migration
 /** The keys of the {@linkcode chrome.storage.sync} */
@@ -136,23 +137,39 @@ function updateNode(node, textSize, lineHeight, font) {
         var newSize = textSize / 100;
         var newHeight = lineHeight / 100;
         var newHTML = void 0;
-        // TODO can we just update the styling instead of changing all the HTML??
+        var element = node.parentElement;
         if (font === "Original") {
             newHTML = "<span wudooh='true'' style='" +
                 "font-size:" + newSize + "em;" +
                 "line-height:" + newHeight + "em;" +
                 "'>$&</span>";
+            var text = node.nodeValue.replace(arabicRegEx, newHTML);
+            setNodeHtml(node, text);
         } else {
-            newHTML = "<span wudooh='true' style='" +
-                "font-size:" + newSize + "em;" +
-                "line-height:" + newHeight + "em;" +
-                "font-family:" + "\"" + font + "\"" + "," + "sans-serif;" +
-                "'>$&</span>";
+            updateByStyle(element, newSize, newHeight, font);
+            updateByAdding(node, newSize, newHeight, font);
         }
-        var text = node.nodeValue.replace(arabicRegEx, newHTML);
-        setNodeHtml(node, text);
     }
 }
+
+// TODO remove this later
+function updateByStyle(element, textSize, lineHeight, font) {
+    element.style.fontSize = textSize + "em";
+    element.style.lineHeight = lineHeight + "em";
+    element.style.fontFamily = "\"" + font + "\"" + "," + "sans-serif";
+    element.setAttribute("wudooh", "true");
+}
+
+// TODO remove this later
+function updateByAdding(node, textSize, lineHeight, font) {
+    var newHTML = "<span wudooh='true' style='" +
+        "font-size:" + textSize + "em;" +
+        "line-height:" + lineHeight + "em;" +
+        "font-family:" + "\"" + font + "\"" + "," + "sans-serif;" +
+        "'>$&</span>";
+    var text = node.nodeValue.replace(arabicRegEx, newHTML);
+    setNodeHtml(node, text);
+}
 /**
  * Updates all Arabic script nodes in this document's body by calling updateNode() on each node in this document
  * with Arabic script

diff --git a/chrome/main.ts b/chrome/main.ts
@@ -7,6 +7,8 @@
 const arabicRegEx = new RegExp('([\u0600-\u06FF\u0750-\u077F\u08a0-\u08ff\uFB50-\uFDFF\uFE70-\uFEFF]+(' +
     ' [\u0600-\u06FF\u0750-\u077F\u08a0-\u08ff\uFB50-\uFDFF\uFE70-\uFEFF\W\d]+)*)', 'g');
 
+// TODO figure out a way to have common code in one place instead of all this duplicated code
+
 // TODO change customSettings to be a Set so that we guarantee no duplicates!
 //  maybe same for whiteListed but that would mean a db migration
 
@@ -172,24 +174,42 @@ function updateNode(node: Node, textSize: number, lineHeight: number, font: stri
         let newSize: number = textSize / 100;
         let newHeight: number = lineHeight / 100;
         let newHTML: string;
-        // TODO can we just update the styling instead of changing all the HTML??
+        let element: HTMLElement = node.parentElement;
+
         if (font === "Original") {
             newHTML = "<span wudooh='true'' style='" +
                 "font-size:" + newSize + "em;" +
                 "line-height:" + newHeight + "em;" +
                 "'>$&</span>";
+            let text: string = node.nodeValue.replace(arabicRegEx, newHTML);
+            setNodeHtml(node, text);
         } else {
-            newHTML = "<span wudooh='true' style='" +
-                "font-size:" + newSize + "em;" +
-                "line-height:" + newHeight + "em;" +
-                "font-family:" + "\"" + font + "\"" + "," + "sans-serif;" +
-                "'>$&</span>";
+            updateByStyle(element, newSize, newHeight, font);
+            updateByAdding(node, newSize, newHeight, font);
         }
-        let text: string = node.nodeValue.replace(arabicRegEx, newHTML);
-        setNodeHtml(node, text);
     }
 }
 
+// TODO remove this later
+function updateByStyle(element: HTMLElement, textSize: number, lineHeight: number, font: string) {
+    element.style.fontSize = textSize + "em";
+    element.style.lineHeight = lineHeight + "em";
+    element.style.fontFamily = "\"" + font + "\"" + "," + "sans-serif";
+    element.setAttribute("wudooh", "true");
+}
+
+// TODO remove this later
+function updateByAdding(node: Node, textSize: number, lineHeight: number, font: string) {
+    let newHTML = "<span wudooh='true' style='" +
+        "font-size:" + textSize + "em;" +
+        "line-height:" + lineHeight + "em;" +
+        "font-family:" + "\"" + font + "\"" + "," + "sans-serif;" +
+        "'>$&</span>";
+
+    let text: string = node.nodeValue.replace(arabicRegEx, newHTML);
+    setNodeHtml(node, text);
+}
+
 /**
  * Updates all Arabic script nodes in this document's body by calling updateNode() on each node in this document
  * with Arabic script

diff --git a/index.html b/index.html
@@ -10,5 +10,15 @@
 </head>
 <body>
 <h1>Wudooh 😊</h1>
+<h2>🏗️ This page is still under construction 🏗️</h2>
+
+<!--TODO-->
+<h2>🔮 Future Sections: 🔮</h2>
+<h3>Frequently Asked Questions</h3>
+<h3>Future Features</h3>
+<h3>What's new in version ${latest-version}</h3>
+<h3>About</h3>
+<h3>Contact</h3>
+
 </body>
 </html>