Merge pull request #6035 from WoltLab/fancybox

New image viewer

Author: Cyperghost

.github/workflows/javascript.yml

@@ -68,3 +68,6 @@ jobs:
     - name: "Check '@ckeditor/ckeditor5-inspector'"
       run: |
         diff -wu wcfsetup/install/files/js/3rdParty/ckeditor/ckeditor5-inspector/inspector.js node_modules/@ckeditor/ckeditor5-inspector/build/inspector.js
+    - name: "Check '@fancyapps/ui'"
+      run: |
+        diff -wu wcfsetup/install/files/js/3rdParty/fancybox/fancybox.umd.js node_modules/@fancyapps/ui/dist/fancybox/fancybox.umd.js

README.md

@@ -3,7 +3,7 @@
 WoltLab Suite Core is a free CMS and web-framework, designed for awesome websites and communities.
 Cutting-edge technologies and strict object-oriented programming makes it the ideal choice for developers and communities, and is actively maintained and improved by WoltLab.
 
-# About CKEditor 5
+## About CKEditor 5
 
 CKEditor 5 is a WYISWYG editor created by CKSource Holding sp. z o.o, Copyright (c) 2003-2023.
 
@@ -12,6 +12,15 @@ You may use this instance of CKEditor 5 with any plugin or app built on top of W
 
 If you would like to use CKEditor 5 yourself and are not building on top of WoltLab Suite Core then please visit https://ckeditor.com/pricing/ to learn more.
 
+## About Fancybox
+
+Fancybox is a lightbox alternative created by Jānis Skarnelis.
+
+This repository includes a build artifact of Fancybox that is comerically licensed to WoltLab GmbH.
+You may use this instance of Fancybox with any plugin or app built on top of WoltLab Suite Core only.
+
+If you would like to use Fancybox yourself and are not building on top of WoltLab Suite Core then please visit https://fancyapps.com/pricing/ to learn more.
+
 ## License
 
 This library is free software; you can redistribute it and/or

com.woltlab.wcf/acpTemplateDelete.xml

@@ -154,5 +154,6 @@
 		<template>__audioAttachmentBBCode</template>
 		<template>__multiPageCondition</template>
 		<template>__multilineItemListFormField</template>
+		<template>imageViewer</template>
 	</delete>
 </data>

com.woltlab.wcf/fileDelete.xml

@@ -1291,6 +1291,7 @@
 		<file>js/WCF.Comment.min.js</file>
 		<file>js/WCF.Core.min.js</file>
 		<file>js/WCF.ImageViewer.min.js</file>
+		<file>js/WCF.ImageViewer.js</file>
 		<file>js/WCF.Label.min.js</file>
 		<file>js/WCF.Like.js</file>
 		<file>js/WCF.Like.min.js</file>

com.woltlab.wcf/templateDelete.xml

@@ -116,5 +116,6 @@
 		<template>__multiPageCondition</template>
 		<template>__multilineItemListFormField</template>
 		<template>email_notification_userRegistration</template>
+		<template>imageViewer</template>
 	</delete>
 </data>

com.woltlab.wcf/templates/attachments.tpl

@@ -7,8 +7,8 @@
 				{content}
 					{foreach from=$attachmentList->getGroupedObjects($objectID) item=attachment}
 						{if $attachment->showAsImage() && !$attachment->isEmbedded()}
-							<li class="attachmentThumbnail" data-attachment-id="{@$attachment->attachmentID}">
-								<a href="{$attachment->getLink()}"{if $attachment->canDownload()} class="jsImageViewer jsTooltip" title="{lang}wcf.attachment.image.title{/lang}"{/if}>
+							<li class="attachmentThumbnail" data-attachment-id="{$attachment->attachmentID}">
+								<a href="{$attachment->getLink()}"{if $attachment->canDownload()} data-fancybox="message-{$attachmentList->getObjectTypeName()}-{$objectID}" data-caption="{$attachment->filename}" aria-title="{lang}wcf.attachment.image.title{/lang}"{/if}>
 									<div class="attachmentThumbnailContainer">
 										<span class="attachmentThumbnailImage">
 											{if $attachment->hasThumbnail()}
@@ -44,7 +44,7 @@
 									<ul class="attachmentMetaData inlineList">
 										<li>
 											{icon name='file-lines'}
-											{@$attachment->filesize|filesize}
+											{$attachment->filesize|filesize}
 										</li>
 										<li>
 											{icon name='up-right-and-down-left-from-center'}

com.woltlab.wcf/templates/headIncludeJavaScript.tpl

@@ -138,7 +138,6 @@ window.addEventListener('pageshow', function(event) {
 </script>
 
 {js application='wcf' file='WCF.ColorPicker' bundle='WCF.Combined' hasTiny=true}
-{js application='wcf' file='WCF.ImageViewer' bundle='WCF.Combined' hasTiny=true}
 {js application='wcf' file='WCF.Label' bundle='WCF.Combined' hasTiny=true}
 {js application='wcf' file='WCF.Location' bundle='WCF.Combined' hasTiny=true}
 {js application='wcf' file='WCF.Message' bundle='WCF.Combined' hasTiny=true}
@@ -181,5 +180,5 @@ window.addEventListener('pageshow', function(event) {
 	});
 </script>
 
-{include file='imageViewer'}
+{include file='shared_imageViewer'}
 {include file='headIncludeJsonLd'}

com.woltlab.wcf/templates/imageViewer.tpl

@@ -4,7 +4,7 @@
 	{if $media->isImage}
 		{if $thumbnailSize != 'original'}
 			{if !$removeLinks}
-				<a href="{$mediaLink}" class="embeddedAttachmentLink jsImageViewer">
+				<a href="{$mediaLink}" data-caption="{$media->title}" class="embeddedAttachmentLink" data-fancybox="message-{$activeMessageObjectType}-{$activeMessageID}">
 			{/if}
 					<img src="{$thumbnailLink}" alt="{$media->altText}" title="{$media->title}" width="{@$media->getThumbnailWidth($thumbnailSize)}" height="{@$media->getThumbnailHeight($thumbnailSize)}" loading="lazy">
 			{if !$removeLinks}

com.woltlab.wcf/templates/shared_bbcode_wsm.tpl

@@ -0,0 +1,18 @@
+{if !$__imageViewerLoaded|isset}
+	<script data-eager="true">
+	  {
+		let stylesheet = document.getElementById("fancybox-stylesheet");
+		if (stylesheet === null) {
+		  stylesheet = document.createElement("link");
+		  stylesheet.rel = "stylesheet";
+		  stylesheet.type = "text/css";
+		  stylesheet.href = "{$__wcf->getPath()}style/fancybox.css";
+		  stylesheet.id = "fancybox-stylesheet";
+
+		  document.querySelector('link[rel="stylesheet"]').before(stylesheet);
+		}
+	  }
+	</script>
+	
+	{assign var=__imageViewerLoaded value=true}
+{/if}

com.woltlab.wcf/templates/shared_imageViewer.tpl

@@ -13,7 +13,7 @@
 			{foreach from=$uploadFieldFiles item=file}
 				<li class="box64 uploadedFile" data-unique-file-id="{$file->getUniqueFileId()}">
 					{if $file->isImage()}
-						<a href="{$file->getImage()}" class="jsImageViewer">
+						<a href="{$file->getImage()}" data-fancybox data-caption="{$file->getFilename()}">
 							<img src="{$file->getImage()}" width="{$file->getWidth()}" height="{$file->getHeight()}" loading="lazy" alt="" class="formUploadHandlerContentListImage">
 						</a>
 					{else}

com.woltlab.wcf/templates/shared_uploadFieldComponent.tpl

@@ -129,6 +129,7 @@
     'articleBBCodeTag' => 'shared_bbcode_wsa',
     '__multiPageCondition' => 'shared_multiPageCondition',
     '__multilineItemListFormField' => 'shared_multilineItemListFormField',
+    'imageViewer' => 'shared_imageViewer',
 ];
 if ($argc !== 2) {
     echo "ERROR: Expected a single argument to the directory that should be used to recursively replace template includes.\n";

extra/migrate-shared-template.php

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@ckeditor/ckeditor5-inspector": "^4.1.0",
+    "@fancyapps/ui": "^5.0.36",
     "@googlemaps/markerclusterer": "2.5.3",
     "@types/facebook-js-sdk": "^3.3.12",
     "@types/google.maps": "^3.58.1",

package-lock.json

@@ -176,6 +176,14 @@ export function setup(options: BoostrapOptions): void {
     void import("./Component/File/Upload").then(({ setup }) => setup());
   });
 
+  whenFirstSeen("[data-fancybox]", () => {
+    void import("./Component/Image/Viewer").then(({ setup }) => setup());
+  });
+  whenFirstSeen(".jsImageViewer", () => {
+    console.warn("The class `jsImageViewer` is deprecated. Use the attribute `data-fancybox` instead.");
+    void import("./Component/Image/Viewer").then(({ setupLegacy }) => setupLegacy());
+  });
+
   // Move the reCAPTCHA widget overlay to the `pageOverlayContainer`
   // when widget form elements are placed in a dialog.
   const observer = new MutationObserver((mutations) => {

package.json

@@ -13,6 +13,7 @@ import {
 
 type FileProcessorData = {
   attachmentID: number;
+  messageObjectID: number | null;
 };
 
 function fileInitializationCompleted(element: HTMLElement, file: WoltlabCoreFileElement, editor: HTMLElement): void {
@@ -59,8 +60,10 @@ function fileInitializationCompleted(element: HTMLElement, file: WoltlabCoreFile
     if (file.link !== undefined && file.filename !== undefined) {
       const link = document.createElement("a");
       link.href = file.link!;
-      link.classList.add("jsImageViewer");
+      link.dataset.fancybox =
+        "attachments" + (data.messageObjectID ? `-${(data as FileProcessorData).messageObjectID}` : "");
       link.title = file.filename;
+      link.dataset.caption = file.filename;
       link.textContent = file.filename;
 
       const filename = element.querySelector(".fileList__item__filename")!;

ts/WoltLabSuite/Core/Bootstrap.ts

@@ -0,0 +1,43 @@
+import { Fancybox } from "@fancyapps/ui";
+import { userSlideType } from "@fancyapps/ui/types/Carousel/types";
+import { OptionsType } from "@fancyapps/ui/types/Fancybox/options";
+
+const LOCALES = ["cs", "de", "en", "es", "fr", "it", "lv", "pl", "sk"];
+
+export function setup() {
+  void getDefaultConfig().then((config) => {
+    Fancybox.bind("[data-fancybox]", config);
+  });
+}
+
+export function setupLegacy() {
+  void getDefaultConfig().then((config) => {
+    Fancybox.bind(".jsImageViewer", {
+      ...config,
+      groupAll: true,
+    });
+  });
+}
+
+export async function createFancybox(userSlides?: Array<userSlideType>): Promise<Fancybox> {
+  return new Fancybox(userSlides, await getDefaultConfig());
+}
+
+async function getDefaultConfig(): Promise<Partial<OptionsType>> {
+  return {
+    l10n: await getLocalization(),
+    Html: {
+      videoAutoplay: false,
+    },
+  };
+}
+
+export async function getLocalization(): Promise<Record<string, string>> {
+  let locale = document.documentElement.lang;
+
+  if (!LOCALES.includes(locale)) {
+    locale = "en";
+  }
+
+  return (await import(`@fancyapps/ui/l10n/${locale}`))[locale];
+}

ts/WoltLabSuite/Core/Component/Attachment/Entry.ts

@@ -263,7 +263,8 @@ export class FileProcessor {
           filenameLink.href = element.link;
           filenameLink.title = element.filename;
           filenameLink.textContent = element.filename;
-          filenameLink.classList.add("jsImageViewer");
+          filenameLink.dataset.fancybox = "";
+          filenameLink.dataset.caption = element.filename;
 
           // Insert a hidden image element that will be used by the image viewer as the preview image
           const previewImage = document.createElement("img");

ts/WoltLabSuite/Core/Component/Image/Viewer.ts

@@ -177,7 +177,7 @@ class FileUpload extends Upload<FileUploadOptions> implements FileUploadHandler
 
           if (fileData.image !== null) {
             const a = document.createElement("a");
-            a.classList.add("jsImageViewer");
+            a.dataset.fancybox = "";
             a.href = fileData.image;
             const image = document.createElement("img");
             image.classList.add("formUploadHandlerContentListImage");

ts/WoltLabSuite/Core/Form/Builder/Field/Controller/FileProcessor.ts

@@ -1,7 +1,6 @@
 {include file='header' pageTitle='wcf.acp.attachment.list'}
 
-<script data-relocate="true" src="{@$__wcf->getPath()}js/WCF.ImageViewer.js?v={@LAST_UPDATE_TIME}"></script>
-{include file='imageViewer'}
+{include file='shared_imageViewer'}
 <script data-relocate="true">
 	require(['WoltLabSuite/Core/Ui/User/Search/Input'], (UiUserSearchInput) => {
 		new UiUserSearchInput(document.getElementById('username'));
@@ -113,7 +112,7 @@
 						<td class="columnID columnAttachmentID">{@$attachment->attachmentID}</td>
 						<td class="columnTitle columnFilename">
 							<div class="box64">
-								<a href="{$attachment->getLink()}"{if $attachment->isImage} class="jsImageViewer" title="{$attachment->filename}"{/if}>
+								<a href="{$attachment->getLink()}"{if $attachment->isImage} data-fancybox="attachments" data-caption="{$attachment->filename}"{/if}>
 									{if $attachment->tinyThumbnailType}
 										<img src="{$attachment->getThumbnailLink('tiny')}" class="attachmentTinyThumbnail" alt="">
 									{else}

ts/WoltLabSuite/Core/Ui/File/Upload.ts

@@ -31,9 +31,7 @@
 	});
 </script>
 
-<script data-relocate="true" src="{@$__wcf->getPath()}js/WCF.ImageViewer.js?v={@LAST_UPDATE_TIME}"></script>
-
-{include file="imageViewer"}
+{include file='shared_imageViewer'}
 
 <header class="contentHeader">
 	<div class="contentHeaderTitle">

wcfsetup/install/files/acp/templates/attachmentList.tpl

@@ -5,7 +5,6 @@
 WCF.Assets
 WCF
 WCF.ColorPicker
-WCF.ImageViewer
 WCF.Label
 WCF.Location
 WCF.Message