Switched to plain js imagelightbox

Author: marekdedic

src/php/frontend/class-shortcode.php

@@ -50,8 +50,7 @@ public static function init() {
 
 		Script_And_Style_Helpers::register_script(
 			'sgdg_imagelightbox_script',
-			'bundled/imagelightbox.umd.js',
-			array( 'jquery' )
+			'bundled/imagelightbox.umd.js'
 		);
 		Script_And_Style_Helpers::register_style( 'sgdg_imagelightbox_style', 'bundled/imagelightbox.css' );
 		Script_And_Style_Helpers::register_script(

src/ts/frontend/shortcode/Shortcode.ts

@@ -1,5 +1,4 @@
-/// <reference types="imagelightbox" />
-
+import { ImageLightbox } from 'imagelightbox';
 import { default as justifiedLayout } from 'justified-layout';
 
 import { isError } from '../../isError';
@@ -15,7 +14,19 @@ export class Shortcode {
 	private readonly pageQueryParameter: QueryParameter;
 	private readonly pathQueryParameter: QueryParameter;
 
-	private lightbox: JQuery = $();
+	private readonly lightbox = new ImageLightbox([], {
+		allowedTypes: '',
+		animationSpeed: parseInt(sgdgShortcodeLocalize.preview_speed, 10),
+		activity: 'true' === sgdgShortcodeLocalize.preview_activity,
+		arrows: 'true' === sgdgShortcodeLocalize.preview_arrows,
+		button: 'true' === sgdgShortcodeLocalize.preview_closebutton,
+		fullscreen: true,
+		gutter: 0,
+		history: true,
+		overlay: true,
+		caption: 'true' === sgdgShortcodeLocalize.preview_captions,
+		quitOnEnd: 'true' === sgdgShortcodeLocalize.preview_quitOnEnd,
+	});
 	private hasMore = false;
 	private path = '';
 	private lastPage = 1;
@@ -152,19 +163,6 @@ export class Shortcode {
 	private get(): void {
 		this.path = this.pathQueryParameter.get();
 		this.lastPage = parseInt(this.pageQueryParameter.get()) || 1;
-		this.lightbox = $().imageLightbox({
-			allowedTypes: '',
-			animationSpeed: parseInt(sgdgShortcodeLocalize.preview_speed, 10),
-			activity: 'true' === sgdgShortcodeLocalize.preview_activity,
-			arrows: 'true' === sgdgShortcodeLocalize.preview_arrows,
-			button: 'true' === sgdgShortcodeLocalize.preview_closebutton,
-			fullscreen: true,
-			gutter: 0,
-			history: true,
-			overlay: true,
-			caption: 'true' === sgdgShortcodeLocalize.preview_captions,
-			quitOnEnd: 'true' === sgdgShortcodeLocalize.preview_quitOnEnd,
-		});
 		this.container
 			.find('.sgdg-gallery')
 			.replaceWith('<div class="sgdg-loading"><div></div></div>');
@@ -347,8 +345,10 @@ export class Shortcode {
 			});
 		this.reflowTimer();
 
-		this.lightbox.addToImageLightbox(
-			this.container.find('a[data-imagelightbox]')
+		this.lightbox.addImages(
+			this.container
+				.find('a[data-imagelightbox]')
+				.get() as Array<HTMLAnchorElement>
 		);
 		if ('true' === sgdgShortcodeLocalize.page_autoload) {
 			$(window)

webpack.config.js

@@ -23,7 +23,8 @@ export default {
 		'@wordpress/components': 'var wp.components',
 		'@wordpress/editor': 'var wp.editor',
 		'@wordpress/element': 'var wp.element',
-		jquery: 'commonjs jQuery',
+		imagelightbox: 'var imagelightbox',
+		jquery: 'var jQuery',
 		'justified-layout': 'commonjs justified-layout',
 		tinymce: 'var tinymce',
 	},