Improve RSS preview

2 files changed, 118 insertions, 80 deletions

diff --git a/popup/index.js b/popup/index.js
index c674f39..4944e9f 100644
--- a/popup/index.js
+++ b/popup/index.js
@@ -8,114 +8,149 @@ function subscribe_link(reader, feed_url){
   }
 }
 
+function insertElementsIntoRow(rowElement, elements){
+    let tdElement = document.createElement("td")
+    elements.forEach( el => tdElement.append(el))
+    rowElement.append(tdElement)
+}
+
+function insertElementIntoRow(rowElement, element){
+    let tdElement = document.createElement("td")
+    tdElement.append(element)
+    rowElement.append(tdElement)
+}
+
+function wrapInDiv(element){
+    let wrapperDiv = document.createElement("div")
+    wrapperDiv.append(element)
+    return wrapperDiv
+}
+
+let itemMap = {
+    "updated": "pubDate",
+    "summary": "description",
+}
+function parseCollection(collection, entries){
+    for(const child of collection){
+        feedEntry = {"link": "", "title": "", "pubDate": "", "description": ""}
+        for(const c of child.children){
+            if(c.tagName == "link" && c.getAttribute("href")){
+                feedEntry["link"] = c.getAttribute("href")
+            } else {
+                feedEntry[c.tagName] = c.innerHTML
+            }
+        }
+        // Copy keys to normalized version
+        for(const key in itemMap){
+            if(feedEntry[key]){
+                feedEntry[itemMap[key]] = feedEntry[key]
+            }
+        }
+        entries.push(feedEntry)
+    }
+}
+
+function previewOnclick(item){
+    return function(){
+        fetch(item.url)
+            .then( r => r.text() )
+            .then(r => new window.DOMParser().parseFromString(r, "text/xml"))
+            .then(p => {
+                let entries = []
+                parseCollection(p.getElementsByTagName("entry"), entries)
+                parseCollection(p.getElementsByTagName("item"), entries)
+
+                let tableEl = document.createElement("table")
+                tableEl.classList.add("preview")
+                entries.forEach(entry => {
+                    let trEl = document.createElement("tr")
+                    tableEl.append(trEl)
+
+                    let titleEl = document.createElement("a")
+                    titleEl.href = entry["link"]
+                    titleEl.innerHTML = entry["title"]
+
+                    let wrapperDiv2 = document.createElement("div")
+                    wrapperDiv2.innerText = entry["pubDate"]
+
+                    insertElementsIntoRow(trEl, [
+                        wrapInDiv(titleEl), wrapperDiv2
+                    ])
+
+                    let td3El = document.createElement("td")
+                    td3El.innerHTML = entry["description"]
+                    trEl.append(td3El)
+                })
+                feeds.append(tableEl)
+            })
+    }
+}
+
 window.onload = async function () {
     let settings = await browser.storage.sync.get(["rb", "reader", "instance"]);
     base_reader = settings.instance;
     let base_rb = settings.rb;
-    let feeds = document.getElementById('feeds');
-    feeds.innerText = "Loading..."
+    let feedsElement = document.getElementById('feeds');
+    feedsElement.innerText = "Loading..."
     browser.tabs.query({ active: true, currentWindow: true }, function (tabs) {
         browser.tabs.sendMessage(tabs[0].id, {}).then(
-            function (feed_urls) {
-                feeds.innerText = ""
+            function (feeds) {
+                feedsElement.innerText = ""
                 if(!base_rb) {
                     let newSettingsLink = document.createElement("a")
                     newSettingsLink["href"] = "/options.html"
                     newSettingsLink.innerText = "RSS-bridge instance not set! Click here to open options.";
                     let newDiv = document.createElement('div');
                     newDiv.append(newSettingsLink);
-                    feeds.appendChild(newDiv);
+                    feedsElement.appendChild(newDiv);
 
                     let newP = document.createElement('p')
-                    newP.innerText = `Found ${feed_urls.length} feeds`
-                    feeds.append(newP)
+                    newP.innerText = `Found ${feeds.length} feeds`
+                    feedsElement.append(newP)
                     return;
                 }
 
-                feed_urls.forEach(item => {
-                    let newLink = document.createElement('a');
-                    newLink["href"] = item.url
-                    newLink.innerText = item.type;
-
+                let table = document.createElement("table")
+                table.classList.add("feeds")
+                feedsElement.append(table)
+                feeds.forEach(feed => {
+                    let newRow = document.createElement("tr")
+                    table.append(newRow)
 
-                    let newDiv = document.createElement('div');
-                    newDiv.append(newLink)
+                    let newLink = document.createElement('a');
+                    newLink["href"] = feed.url
+                    newLink.innerText = feed.name;
+                    insertElementIntoRow(newRow, newLink)
 
                     let previewLink = document.createElement('a');
-                    previewLink["onclick"] = function(){
-                        fetch(item.url)
-                            .then( r => r.text() )
-                            .then(r => new window.DOMParser().parseFromString(r, "text/xml"))
-                            .then(p => {
-                                let channelTitle = "Items"
-                                let description = undefined
-                                let items = []
-                                let lastBuild = undefined
-                                console.log(p.firstChild.children)
-                                for(const channel of p.firstChild.children) {
-                                    //p.firstChild.children.forEach(channel => {
-                                    for(const child of channel.children) {
-                                        //channel.children.forEach(child => {
-                                        if(child.tagName == "title"){
-                                            channelTitle = child.textContent
-                                        } else if (child.tagName == "lastBuildDate") {
-                                            lastBuild = child.textContent
-                                        } else if (child.tagName == "description") {
-                                            description = child.textContent
-                                        } else if (child.tagName == "item") {
-                                            item = {}
-                                            for(const c of child.children){
-                                                //child.children.forEach(c => {
-                                                item[c.tagName] = c.innerHTML
-                                            }
-                                            items.push(item)
-                                        }
-                                    }
-                                }
-                                console.log(items)
-                                let tableEl = document.createElement("table")
-                                items.forEach(item => {
-                                    let trEl = document.createElement("tr")
-                                    tableEl.append(trEl)
-
-                                    let tdEl = document.createElement("td")
-
-                                    let titleEl = document.createElement("a")
-                                    titleEl.href = item["link"]
-                                    titleEl.innerText = item["title"]
-                                    let wrapperDiv = document.createElement("div")
-                                    wrapperDiv.append(titleEl)
-                                    let wrapperDiv2 = document.createElement("div")
-                                    wrapperDiv2.innerText = item["pubDate"]
-                                    tdEl.append(wrapperDiv)
-                                    tdEl.append(wrapperDiv2)
-                                    trEl.append(tdEl)
-
-                                    let td3El = document.createElement("td")
-                                    td3El.innerHTML = item["description"]
-                                    trEl.append(td3El)
-
-                                })
-                                feeds.append(tableEl)
-                            })
-                    }
+                    previewLink["onclick"] = previewOnclick(feed)
                     previewLink["href"] = "#"
                     previewLink.innerText = "preview";
-                    newDiv.append(previewLink)
+
+                    let newPreviewData = document.createElement("td")
+                    // Preview only works for XML feeds
+                    if(
+                        feed.type.toLowerCase().includes("rss") ||
+                        feed.type.toLowerCase().includes("xml") ||
+                        feed.type.toLowerCase().includes("atom")
+                    ){
+                        newPreviewData.append(previewLink)
+                    }
+                    newRow.append(newPreviewData)
 
                     if(base_reader){
                         let subLink = document.createElement('a');
-                        subLink["href"] = subscribe_link(settings.reader, item.url)
+                        subLink["href"] = subscribe_link(settings.reader, feed.url)
                         subLink.innerText = "subscribe";
-                        newDiv.append(subLink)
+                        let newSubData = document.createElement("td")
+                        newSubData.append(subLink)
+                        newRow.append(newSubData)
                     }
-
-                    feeds.append(newDiv)
                 })
-                if(feed_urls.length == 0) {
+                if(feeds.length == 0) {
                     let newP = document.createElement('p')
                     newP.innerText = "No feeds found"
-                    feeds.append(newP)
+                    feedsElement.append(newP)
                 }
             });
     });
diff --git a/popup/main.html b/popup/main.html
index 81f8f06..6c57d10 100644
--- a/popup/main.html
+++ b/popup/main.html
@@ -6,12 +6,15 @@
             div a {
                 margin: 1em;
             }
-            table td a {
+            table.preview td a {
                 margin: 0em;
             }
-            td {
+            table.preview td {
                 border: 1px solid black;
             }
+            table.feeds tr td {
+                //border-bottom: 1px solid black;
+            }
         </style>
     </head>
     <body>