Merge pull request #21 from faraplay/prefs

Format preferences page

.vscode/tasks.json

@@ -0,0 +1,24 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"type": "npm",
+			"script": "wp-build",
+			"group": {
+				"kind": "build",
+				"isDefault": true
+			},
+			"problemMatcher": [],
+			"label": "npm: wp-build",
+			"detail": "webpack"
+		},
+		{
+			"type": "npm",
+			"script": "install",
+			"group": "none",
+			"problemMatcher": [],
+			"label": "npm: install",
+			"detail": "install dependencies from package"
+		}
+	]
+}

css/customUi.css

@@ -38,3 +38,8 @@ form.usertext {
 #header {
     display: none;
 }
+
+div.pref-row {
+    border-top: 1px solid var(--md-sys-color-outline-variant);
+    padding-bottom: 10px;
+}

js/cs.js

@@ -3,4 +3,5 @@ import "./general.js";
 import "./header.js";
 import "./sidebars.js";
 import "./posts";
+import "./preferences.js";
 console.log("Content script loaded.");

js/preferences.js

@@ -0,0 +1,25 @@
+export function formatPrefTable() {
+    const table = document.querySelector("table.preftable");
+    if (!table) {
+        return;
+    }
+    const tableParent = table.parentNode;
+    const prefDiv = document.createElement("div");
+    tableParent.appendChild(prefDiv);
+    tableParent.removeChild(table);
+    const tbody = table.firstChild;
+    for (const row of tbody.childNodes) {
+        const newRow = document.createElement("div");
+        newRow.setAttribute("class", "pref-row");
+        prefDiv.appendChild(newRow);
+
+        const header = document.createElement("h1");
+        header.innerText = row.firstChild.innerText;
+        newRow.appendChild(header);
+
+        const prefright = row.lastChild;
+        newRow.appendChild(prefright);
+    }
+}
+
+formatPrefTable();

js/sidebars.js

@@ -4,10 +4,12 @@ function setupSidebars() {
     const [toggleSub, subSide] = setupSubredditSidebar();
     const [toggleUser, userSide] = setupUserSidebar();
     document.addEventListener("toggleUser", toggleUser);
-    document.addEventListener("toggleSub", toggleSub);
+    if (toggleSub) {
+        document.addEventListener("toggleSub", toggleSub);
+    }
     document.addEventListener("swiped-right", function (e) {
         // sidebar.classList.remove("active");
-        if (subSide.classList.contains("active")) {
+        if (subSide && subSide.classList.contains("active")) {
             toggleSub();
             return;
         }
@@ -21,7 +23,7 @@ function setupSidebars() {
             toggleUser();
             return;
         }
-        if (!subSide.classList.contains("active")) {
+        if (subSide && !subSide.classList.contains("active")) {
             toggleSub();
         }
     });

js/subreddit_sidebar.js

@@ -4,6 +4,9 @@ export default function setupSidebar() {
     const sidebar = document.createElement("div");
     const sidebarToggle = document.createElement("div");
     const actualSidebar = document.querySelector(".side");
+    if (!actualSidebar) {
+        return [null, null];
+    }
     sidebarToggle.id = "sidebar-toggle";
     sidebar.id = "custom-sidebar";
     sidebar.appendChild(sidebarToggle);

js/user.js

@@ -3,5 +3,6 @@ import "./general.js";
 import "./header.js";
 import "./sidebars.js";
 import "./posts";
+import "./preferences.js";
 
 console.log("oldlander user.js loaded");

package.json

@@ -58,4 +58,4 @@
     "webpack-cli": "^5.1.1"
   },
   "packageManager": "[email protected]"
-}
+}