client: Replace fancybox & drop jQuery

The jQuery removal was long coming.
Since the next version of Fancybox is unfree, let’s switch to something else.

Author: jtojnar

assets/js/index.js

@@ -1,10 +1,8 @@
 import 'regenerator-runtime/runtime';
-import './jquery';
 import selfoss from './selfoss-base';
 import './selfoss-db-online';
 import './selfoss-db-offline';
 import './selfoss-db';
-import '@fancyapps/fancybox';
 
 selfoss.init();
 

assets/js/jquery.js

@@ -31,6 +31,11 @@ var selfoss = {
      */
     entriesPage: null,
 
+    /**
+     * Whether lightbox is open.
+     */
+    lightboxActive: new ValueListenable(false),
+
     windowLoaded: new Promise((resolve) => {
         window.addEventListener('load', () => resolve());
     }),
@@ -358,23 +363,6 @@ var selfoss = {
     },
 
 
-    /**
-     * Setup fancyBox image viewer
-     * @param content element
-     * @param int
-     */
-    setupFancyBox: function(content, id) {
-        // Close existing fancyBoxes
-        $.fancybox.close();
-        let images = content.querySelectorAll('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"], a[href$=".jpg:large"], a[href$=".jpeg:large"], a[href$=".png:large"], a[href$=".gif:large"]');
-        images.forEach((el) => {
-            el.setAttribute('data-fancybox', 'gallery-' + id);
-            $(el).off('click');
-        });
-        images.forEach((el) => el.setAttribute('data-type', 'image'));
-    },
-
-
     handleAjaxError: function(error, tryOffline = true) {
         if (!(error instanceof HttpError || error instanceof TimeoutError)) {
             return Promise.reject(error);

assets/js/selfoss-base.js

@@ -114,22 +114,13 @@ function entrynav(direction) {
     nextprev(direction, open);
 }
 
-/**
- * Check whether keyboard shortcuts should be active
- */
-function lightboxActive() {
-    var fancyboxInactive = !$.fancybox.getInstance();
-
-    return fancyboxInactive;
-}
-
 /**
  * Decorates an event handler so that it only runs
  * when not interacting with an input field or lightbox.
  */
 function ignoreWhenInteracting(handler) {
     return (event) => {
-        if (!lightboxActive()) {
+        if (selfoss.lightboxActive.value) {
             return;
         }
 

assets/js/shortcuts.js

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import nullable from 'prop-types-nullable';
 import {
@@ -200,11 +200,6 @@ function PureApp({
 
     const _ = React.useContext(LocalizationContext);
 
-    useEffect(() => {
-        // Initialize FancyBox globally
-        $.fancybox.defaults.hash = false;
-    }, []);
-
     return (
         <React.StrictMode>
             <Message message={globalMessage} />

assets/js/templates/App.jsx

@@ -12,6 +12,31 @@ import * as icons from '../icons';
 import { ConfigurationContext } from '../helpers/configuration';
 import { LocalizationContext } from '../helpers/i18n';
 import { useSharers } from '../sharers';
+import SimpleLightbox from 'simplelightbox/dist/simple-lightbox.esm';
+
+function setupLightbox(element) {
+    let images = element.querySelectorAll('a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"], a[href$=".jpg:large"], a[href$=".jpeg:large"], a[href$=".png:large"], a[href$=".gif:large"]');
+
+    if (images.length === 0) {
+        return;
+    }
+    const gallery = new SimpleLightbox(
+        images,
+        {
+            loop: false,
+            // react-router already handles this.
+            history: false,
+        },
+    );
+
+    gallery.on('show.simplelightbox', function() {
+        selfoss.lightboxActive.update(true);
+    });
+
+    gallery.on('close.simplelightbox', function() {
+        selfoss.lightboxActive.update(false);
+    });
+}
 
 function stopPropagation(event) {
     event.stopPropagation();
@@ -276,7 +301,7 @@ export default function Item({ currentTime, item, selected, expanded, setNavExpa
             } else {
                 if (firstExpansion) {
                     // setup fancyBox image viewer
-                    selfoss.setupFancyBox(contentBlock.current, item.id);
+                    setupLightbox(contentBlock.current);
                 }
 
                 // scroll to article header

assets/js/templates/Item.jsx

@@ -1,6 +1,5 @@
 {
   "dependencies": {
-    "@fancyapps/fancybox": "^3.1.20",
     "@floating-ui/react-dom": "^1.0.0",
     "@floating-ui/react-dom-interactions": "^0.9.3",
     "@fortawesome/free-brands-svg-icons": "^6.2.0",
@@ -17,7 +16,6 @@
     "focus-trap": "^7.0.0",
     "form-urlencoded": "^6.0.0",
     "html-escaper": "^3.0.0",
-    "jquery": "^3.5.1",
     "lodash.pick": "^4.4.0",
     "prop-types": "^15.7.2",
     "prop-types-nullable": "^1.0.1",
@@ -28,6 +26,7 @@
     "react-router-dom": "^5.2.0",
     "reset-css": "^5.0.1",
     "rooks": "^7.1.1",
+    "simplelightbox": "^2.10.3",
     "tinykeys": "^1.1.1",
     "unreset-css": "^1.0.1",
     "use-state-with-deps": "^1.1.1"

assets/package-lock.json

@@ -1,6 +1,6 @@
 @use 'sass:color';
 
-@import 'npm:@fancyapps/fancybox/dist/jquery.fancybox.css';
+@import 'npm:simplelightbox/src/simple-lightbox';
 @import 'npm:reset-css/sass/reset';
 @import 'mixins/visually-hidden';