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}