client: Support opening articles in background tab (Firefox only)

Fixes: #55

NEWS.md

@@ -22,6 +22,7 @@
 - Add link from settings page to individual sources and vice versa. ([#1329](https://github.com/fossar/selfoss/pull/1329), [#1340](https://github.com/fossar/selfoss/pull/1340))
 - Tag colour can be now changed using keyboard. ([#1335](https://github.com/fossar/selfoss/pull/1335))
 - YouTube spout now supports all YouTube URLs that provide feeds. ([#1273](https://github.com/fossar/selfoss/issues/1273))
+- Add `open_in_background_tab` option to try to make <kbd>v</kbd> shortcut open articles in a background tab ([does not work in Chromium-based browsers](https://crbug.com/431335)). ([#1354](https://github.com/fossar/selfoss/pull/1354))
 - Translations into several new languages were added:
   - English (United Kingdom): `en-GB`
   - French (Canada): `fr-CA`

assets/js/shortcuts.js

@@ -143,6 +143,30 @@ function ignoreWhenInteracting(handler) {
     };
 }
 
+/**
+ * Try to open the selected article using the preferred method.
+ * @param {number} selected
+ */
+function openSelectedArticle(selected) {
+    const link = document.querySelector(`.entry[data-entry-id="${selected}"] .entry-datetime`);
+    if (selfoss.config.openInBackgroundTab) {
+        // In Chromium, this will just cause the tab to open in the foreground.
+        // Appears to be disallowed by the pop-under prevention:
+        // https://crbug.com/431335
+        // https://crbug.com/487919
+        const event = new MouseEvent(
+            'click',
+            {
+                ctrlKey: true,
+            }
+        );
+        link.dispatchEvent(event);
+    } else {
+        // open item in new window
+        link.click();
+    }
+}
+
 /**
  * Set up shortcuts on document.
  */
@@ -251,8 +275,7 @@ export default function makeShortcuts() {
             var selected = selfoss.entriesPage.getSelectedEntry();
 
             if (selected !== null) {
-                const elem = document.querySelector(`.entry[data-entry-id="${selected}"]`);
-                window.open(elem.querySelector('.entry-datetime').getAttribute('href'), undefined, 'noreferrer');
+                openSelectedArticle(selected);
             }
 
             e.preventDefault();
@@ -268,9 +291,7 @@ export default function makeShortcuts() {
             if (selected !== null) {
                 selfoss.entriesPage.markEntryRead(selected, true);
 
-                // open item in new window
-                const elem = document.querySelector(`.entry[data-entry-id="${selected}"]`);
-                elem.querySelector('.entry-datetime').click();
+                openSelectedArticle(selected);
             }
         }),
 

docs/content/docs/administration/options.md

@@ -157,6 +157,12 @@ set this to `1` to automatically collapse an item when another one is opened.
 set this to `0` to disable automatic loading of more items when you scroll down. With `1`, a click on a button is required instead.
 </div>
 
+### `open_in_background_tab`
+<div class="config-option">
+
+set this to `1` to try to make <kbd>v</kbd> shortcut open articles in new background tab. This [does not work in Chromium based browsers](https://crbug.com/431335).
+</div>
+
 ### `language`
 <div class="config-option">
 

src/controllers/About.php

@@ -49,6 +49,7 @@ public function about() {
                 'autoMarkAsRead' => $this->configuration->autoMarkAsRead, // bool
                 'autoCollapse' => $this->configuration->autoCollapse, // bool
                 'autoStreamMore' => $this->configuration->autoStreamMore, // bool
+                'openInBackgroundTab' => $this->configuration->openInBackgroundTab, // bool
                 'loadImagesOnMobile' => $this->configuration->loadImagesOnMobile, // bool
                 'itemsPerPage' => $this->configuration->itemsPerpage, // int
                 'unreadOrder' => $this->configuration->unreadOrder, // string

src/helpers/Configuration.php

@@ -119,6 +119,9 @@ class Configuration {
     /** @var bool */
     public $autoStreamMore = true;
 
+    /** @var bool */
+    public $openInBackgroundTab = false;
+
     /** @var ?string */
     public $anonymizer = null;