changeset 29:688d75e554e0

Add option to expand feed entries by default
author Guido Berhoerster <guido+feed-preview@berhoerster.name>
date Mon, 21 Jan 2019 15:15:59 +0100
parents 104a1faebd43
children b9dc94ce2eeb
files _locales/de/messages.json _locales/en/messages.json js/background.js js/feed-preview.js options/options.css options/options.html options/options.js
diffstat 7 files changed, 116 insertions(+), 18 deletions(-) [+]
line wrap: on
line diff
--- a/_locales/de/messages.json	Mon Jan 21 08:22:52 2019 +0100
+++ b/_locales/de/messages.json	Mon Jan 21 15:15:59 2019 +0100
@@ -90,5 +90,13 @@
     "missingPlaceholderError": {
         "message": "Bitte die URL zum Abonnieren von Feeds eingeben, die einen Platzhalter \"%s\" für die URL das Feeds enthält.",
         "description": "Error message if the placholder is missing from the subscription URL template."
+    },
+    "feedPreviewTitle": {
+        "message": "Feed-Vorschau",
+        "description": "Title of the feed preview options."
+    },
+    "feedPreviewExpandItemLabel": {
+        "message": "Feed-Einträge standardmäßig aufklappen",
+        "description": "Label of the checkbox for enabling feed entry expansion by default."
     }
 }
--- a/_locales/en/messages.json	Mon Jan 21 08:22:52 2019 +0100
+++ b/_locales/en/messages.json	Mon Jan 21 15:15:59 2019 +0100
@@ -90,5 +90,13 @@
     "missingPlaceholderError": {
         "message": "Please enter a subscription URL which contains a placeholder \"%s\" for the feed URL.",
         "description": "Error message if the placholder is missing from the subscription URL template."
+    },
+    "feedPreviewTitle": {
+        "message": "Feed Preview",
+        "description": "Title of the feed preview options."
+    },
+    "feedPreviewExpandItemLabel": {
+        "message": "Expand feed entries by default",
+        "description": "Label of the checkbox for enabling feed entry expansion by default."
     }
 }
--- a/js/background.js	Mon Jan 21 08:22:52 2019 +0100
+++ b/js/background.js	Mon Jan 21 15:15:59 2019 +0100
@@ -57,6 +57,9 @@
 var tabsFeedPreviews = new Map();
 var fetchingFeedPreview = fetch('web_resources/feed-preview.xhtml')
         .then(response => response.text());
+var feedPreviewOptions = {
+    expandEntries: false
+};
 
 function parseContentType(header) {
     let contentType = {
@@ -103,7 +106,8 @@
     // render the preview document
     let feedPreviewDocument = new DOMParser()
             .parseFromString(await fetchingFeedPreview, 'text/html');
-    renderFeedPreview(feedPreviewDocument, feed);
+    renderFeedPreview(feedPreviewDocument, feed,
+            feedPreviewOptions.expandEntries);
 
     return new XMLSerializer().serializeToString(feedPreviewDocument);
 }
@@ -226,3 +230,20 @@
         browser.storage.sync.set({feedReaders});
     }
 });
+
+browser.storage.sync.get('feedPreview').then(({feedPreview}) => {
+    if (typeof feedPreview !== 'undefined' &&
+            feedPreview === Object(feedPreview)) {
+        feedPreviewOptions.expandEntries = !!feedPreview.expandEntries;
+    }
+});
+browser.storage.onChanged.addListener((changes, areaName) => {
+    if (areaName !== 'sync' || typeof changes.feedPreview === 'undefined') {
+        return;
+    }
+
+    let newValue = changes.feedPreview.newValue;
+    if (typeof newValue !== 'undefined' && newValue === Object(newValue)) {
+        feedPreviewOptions.expandEntries = !!newValue.expandEntries;
+    }
+});
--- a/js/feed-preview.js	Mon Jan 21 08:22:52 2019 +0100
+++ b/js/feed-preview.js	Mon Jan 21 15:15:59 2019 +0100
@@ -8,7 +8,8 @@
 
 'use strict';
 
-export function renderFeedPreview(feedPreviewDocument, feed) {
+export function renderFeedPreview(feedPreviewDocument, feed,
+        expandEntriesByDefault) {
     // inject XSL stylesheet which transforms XHTML to HTML allowing the use of
     // the HTML DOM
     let xslFilename = browser.runtime.getURL('web_resources/xhtml-to-html.xsl');
@@ -59,9 +60,10 @@
         let entryNode =
                 feedPreviewDocument.importNode(entryTemplateElement.content,
                 true);
+        entryNode.querySelector('details.entry').open = expandEntriesByDefault;
+
         let titleElement;
         let titleNode;
-
         if (typeof entry.link !== 'undefined') {
             titleNode = feedPreviewDocument
                     .importNode(entryTitleLinkedTemplateElement.content, true);
--- a/options/options.css	Mon Jan 21 08:22:52 2019 +0100
+++ b/options/options.css	Mon Jan 21 15:15:59 2019 +0100
@@ -35,6 +35,10 @@
   font-weight: bold;
 }
 
+h1 ~ h1 {
+  margin-top: 32px;
+}
+
 input[type="text"] {
   border-radius: 2px;
   font-size: 15px;
@@ -42,6 +46,11 @@
   min-height: 32px;
 }
 
+input[type="checkbox"],
+input[type="checkbox"] + label {
+  vertical-align: middle;
+}
+
 .browser-style > input[type=text] {
   border-color: var(--text-input-border-color);
   box-shadow: none;
--- a/options/options.html	Mon Jan 21 08:22:52 2019 +0100
+++ b/options/options.html	Mon Jan 21 15:15:59 2019 +0100
@@ -50,5 +50,11 @@
         <button type="submit" name="add" class="browser-style">
       </div>
     </form>
+    <h1 id="feed-preview-title"></h1>
+    <form id="feed-preview">
+      <input type="checkbox" id="expand-entries" name="expand-entries">
+      <label for="expand-entries">
+      </label>
+    </form>
   </body>
 </html>
--- a/options/options.js	Mon Jan 21 08:22:52 2019 +0100
+++ b/options/options.js	Mon Jan 21 15:15:59 2019 +0100
@@ -18,6 +18,8 @@
 
         document.querySelector('#feed-readers-title').textContent =
                 browser.i18n.getMessage('feedReadersTitle');
+        document.querySelector('#feed-preview-title').textContent =
+                browser.i18n.getMessage('feedPreviewTitle');
 
         let feedReadersForm = document.forms['feed-readers'];
         feedReadersForm.elements['move-up'].textContent =
@@ -46,6 +48,11 @@
                 browser.i18n.getMessage('feedReaderUrlTemplateCaption');
         addFeedReaderForm.addEventListener('focusout', this);
 
+        let feedPreviewForm = document.forms['feed-preview'];
+        feedPreviewForm.elements['expand-entries'].labels[0].textContent =
+                browser.i18n.getMessage('feedPreviewExpandItemLabel');
+        feedPreviewForm.addEventListener('change', this);
+
         document.addEventListener('submit', this);
 
         this.initOptions();
@@ -58,6 +65,17 @@
             this.updateFeedReaders(feedReaders);
         }
 
+        let {feedPreview: feedPreviewOptions} =
+                await browser.storage.sync.get('feedPreview');
+        if (typeof feedPreviewOptions !== 'undefined' &&
+                feedPreviewOptions === Object(feedPreviewOptions)) {
+            console.log('initialized feedPreviewOptions from storage',
+                    feedPreviewOptions);
+            this.updateFeedPreviewOptions({
+                    expandEntries: !!feedPreviewOptions.expandEntries
+            });
+        }
+
         browser.storage.onChanged.addListener(this.onStorageChanged.bind(this));
     }
 
@@ -113,6 +131,11 @@
         feedReadersForm.elements['buttons'].disabled = true;
     }
 
+    updateFeedPreviewOptions(feedPreviewOptions) {
+        document.forms['feed-preview'].elements['expand-entries'].checked =
+                feedPreviewOptions.expandEntries;
+    }
+
     getFeedReaders() {
         let feedReaderInput =
                 document.forms['feed-readers'].elements['feed-reader'];
@@ -150,26 +173,42 @@
     }
 
     onStorageChanged(changes, areaName) {
-        if (areaName !== 'sync' || typeof changes.feedReaders === 'undefined') {
+        if (areaName !== 'sync') {
             return;
         }
 
-        let feedReaders;
-        if (typeof changes.feedReaders.newValue !== 'undefined' &&
-                Array.isArray(changes.feedReaders.newValue)) {
-            feedReaders = changes.feedReaders.newValue;
-            console.log('feedReaders changed to', feedReaders);
-        } else {
-            // list of feed readers was removed or set to nonsensical value
-            feedReaders = [];
-            console.log('feedReaders was removed');
+        if (typeof changes.feedReaders !== 'undefined') {
+            let feedReaders;
+            if (typeof changes.feedReaders.newValue !== 'undefined' &&
+                    Array.isArray(changes.feedReaders.newValue)) {
+                feedReaders = changes.feedReaders.newValue;
+                console.log('feedReaders changed to', feedReaders);
+            } else {
+                // list of feed readers was removed or set to nonsensical value
+                feedReaders = [];
+                console.log('feedReaders was removed');
+            }
+            if (this.selectedFeedReader >= feedReaders.length) {
+                // save selected feed reader is no longer valid
+                this.selectedFeedReader = -1;
+            }
+            this.updateFeedReaders(feedReaders);
+            this.selectFeedReader();
         }
-        if (this.selectedFeedReader >= feedReaders.length) {
-            // save selected feed reader is no longer valid
-            this.selectedFeedReader = -1;
+        if (typeof changes.feedPreview !== 'undefined') {
+            let feedPreviewOptions;
+            let newValue = changes.feedPreview.newValue;
+            if (typeof newValue !== 'undefined' &&
+                    newValue === Object(newValue)) {
+                feedPreviewOptions = {expandEntries: !!newValue.expandEntries};
+            } else {
+                // feed preview preferences were removed or set to nonsensical
+                // value
+                feedPreviewOptions = {expandEntries: false};
+                console.log('feedPreview was removed');
+            }
+            this.updateFeedPreviewOptions(feedPreviewOptions);
         }
-        this.updateFeedReaders(feedReaders);
-        this.selectFeedReader();
     }
 
     handleEvent(ev) {
@@ -238,6 +277,11 @@
             console.log('set feedReaders to', feedReaders);
 
             document.forms['add-feed-reader'].reset();
+        } else if (ev.type === 'change' && ev.target.id === 'expand-entries') {
+            console.log('expand entries by default:', ev.target.checked);
+            browser.storage.sync.set({
+                feedPreview: {expandEntries: ev.target.checked}
+            });
         }
     }
 }