Skip to content

Commit

Permalink
New: Add template module
Browse files Browse the repository at this point in the history
  • Loading branch information
jonnitto committed Jan 10, 2024
1 parent b08e4d5 commit 3ebf7a9
Show file tree
Hide file tree
Showing 36 changed files with 254 additions and 46 deletions.
6 changes: 6 additions & 0 deletions Configuration/Settings.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ Jonnitto:
alwaysInclude: false

includeFetch: false
includeTemplate: false

# If true, JS files are separated, so you can dynamically load Core only when the user needs it, thus reducing the size of your main bundle.
useJsModule: true
Expand All @@ -23,6 +24,11 @@ Jonnitto:
wrappingClass: 'jonnitto-photoswipe-content'
fetchLinkAppend: '.lightbox'

templateOptions:
children: '[data-pswp-type="template"]'
gallery: body
wrappingClass: 'jonnitto-photoswipe-content'

Neos:
Neos:
userInterface:
Expand Down
23 changes: 3 additions & 20 deletions Resources/Private/Assets/Fetch.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import PhotoSwipeLightbox from "photoswipe/lightbox";
import { getPswpContainer, dispatchEvent, createElement } from "./Helper";

const i18n = JSON.parse(document.querySelector("[data-photoswipe-i18n]")?.dataset?.photoswipeI18n || "{}");
let optionsFromNeos = JSON.parse(
Expand All @@ -8,10 +9,9 @@ optionsFromNeos = { ...i18n, ...optionsFromNeos };

const wrappingClass = optionsFromNeos.wrappingClass || "jonnitto-photoswipe-content";
const fetchLinkAppend = optionsFromNeos.fetchLinkAppend || "";
delete optionsFromNeos.contentSelector;
delete optionsFromNeos.wrappingClass;
delete optionsFromNeos.fetchLinkAppend;

let pswpContainer = null;
let currentContent = null;

function init(options = {}) {
Expand Down Expand Up @@ -110,32 +110,15 @@ async function fetchElement(url) {
return `<p class="jonnitto-photoswipe-content__error">${message}</p>`;
});

const template = document.createElement("template");
template.innerHTML = markup;
const element = document.createElement("div");
element.classList.add(wrappingClass);
element.append(...template.content.children);
const element = createElement(markup, wrappingClass);
toggleLoadingClass(false);
return element;
}

function getPswpContainer() {
if (pswpContainer) {
return pswpContainer;
}
pswpContainer = document.querySelector(".pswp");
return pswpContainer;
}

function toggleLoadingClass(show = true) {
getPswpContainer()?.classList.toggle("pswp--fetch-loading", show);
}

function dispatchEvent(detail) {
const event = new CustomEvent("neosphotoswipe", { detail });
document.dispatchEvent(event);
}

window.neosPhotoSwipe = window.neosPhotoSwipe || {};
window.neosPhotoSwipe.fetch = {
init,
Expand Down
40 changes: 40 additions & 0 deletions Resources/Private/Assets/Helper.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
let pswpContainer = null;

function getPswpContainer() {
if (pswpContainer) {
return pswpContainer;
}
pswpContainer = document.querySelector(".pswp");
return pswpContainer;
}

function dispatchEvent(detail) {
const event = new CustomEvent("neosphotoswipe", { detail });
document.dispatchEvent(event);
}

function isNode(element) {
return element instanceof Node;
}

function createElement(markupOrNode, wrappingClass) {
let node = isNode(markupOrNode) ? markupOrNode : null;
let appendElement = null;

if (!node && typeof markupOrNode === "string") {
node = document.createElement("template");
node.innerHTML = markupOrNode;
}
if (node.tagName === "TEMPLATE") {
appendElement = node.content.cloneNode(true);
} else if (isNode(node)) {
appendElement = node;
}

const element = document.createElement("div");
element.classList.add(wrappingClass);
element.append(appendElement);
return element;
}

export { getPswpContainer, dispatchEvent, createElement };
7 changes: 7 additions & 0 deletions Resources/Private/Assets/Main.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import PhotoSwipeLightbox from "photoswipe/lightbox";
import { dispatchEvent } from "./Helper";

const i18n = JSON.parse(document.querySelector("[data-photoswipe-i18n]")?.dataset?.photoswipeI18n || "{}");
let optionsFromNeos = JSON.parse(
Expand All @@ -13,6 +14,12 @@ function init(options = {}) {
pswpModule: () => import("photoswipe"),
...options,
});
lightbox.on("contentLoadImage", ({ content, isLazy }) => {
dispatchEvent({ type: "image", action: "open", content, isLazy });
});
lightbox.on("destroy", () => {
dispatchEvent({ type: "image", action: "close" });
});
lightbox.init();
return lightbox;
}
Expand Down
12 changes: 6 additions & 6 deletions Resources/Private/Assets/Main.pcss
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
@import url("photoswipe/src/photoswipe.css");

.pswp--fetch .pswp__zoom-wrap {
:is(.pswp--fetch, .pswp--template) .pswp__zoom-wrap {
position: relative;
width: 100vw;
height: 100vh;
Expand All @@ -10,11 +10,11 @@
}

.jonnitto-photoswipe-content {
background: var(--photoswipe-fetch-background, #fff);
max-width: var(--photoswipe-fetch-max-width, 900px);
max-height: var(--photoswipe-fetch-max-height, 100%);
width: var(--photoswipe-fetch-width, 100%) !important;
height: var(--photoswipe-fetch-height, auto) !important;
background: var(--photoswipe-content-background, #fff);
max-width: var(--photoswipe-content-max-width, 900px);
max-height: var(--photoswipe-content-max-height, 100%);
width: var(--photoswipe-content-width, 100%) !important;
height: var(--photoswipe-content-height, auto) !important;
pointer-events: auto;
position: absolute;
top: 50%;
Expand Down
74 changes: 74 additions & 0 deletions Resources/Private/Assets/Template.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import PhotoSwipeLightbox from "photoswipe/lightbox";
import { getPswpContainer, dispatchEvent, createElement } from "./Helper";

const i18n = JSON.parse(document.querySelector("[data-photoswipe-i18n]")?.dataset?.photoswipeI18n || "{}");
let optionsFromNeos = JSON.parse(
document.querySelector("[data-photoswipe-template-options]")?.dataset?.photoswipeTemplateOptions || "{}",
);
optionsFromNeos = { ...i18n, ...optionsFromNeos };

const wrappingClass = optionsFromNeos.wrappingClass || "jonnitto-photoswipe-content";
delete optionsFromNeos.wrappingClass;

let currentContent = null;

function init(options = {}) {
options = { ...optionsFromNeos, ...options };
const lightbox = new PhotoSwipeLightbox({
preloadFirstSlide: false,
allowPanToNext: false,
initialZoomLevel: 1,
secondaryZoomLevel: 1,
maxZoomLevel: 1,
wheelToZoom: false,
closeOnVerticalDrag: false,
mainClass: "pswp--template",
arrowKeys: false,
preloaderDelay: 1000,

pswpModule: () => import("photoswipe"),
...options,
});

lightbox.addFilter("isContentZoomable", () => false);
lightbox.addFilter("preventPointerEvent", () => true);

lightbox.on("firstUpdate", (event) => {
const container = getPswpContainer();
container.setAttribute("data-turbo-temporary", true);
// This enables default scrolling
container?.addEventListener(
"wheel",
(event) => {
event.stopImmediatePropagation();
event.stopPropagation();
},
{ passive: true },
);
});

lightbox.on("destroy", () => {
dispatchEvent({ type: "template", action: "close" });
});

lightbox.on("contentLoad", async (event) => {
const { content } = event;
const element = content?.data?.element;
const template = element?.querySelector("template");
if (!element || !template) {
return;
}
content.state = "loading";
event.preventDefault();
content.element = createElement(template, wrappingClass);
content.onLoaded();
});
lightbox.init();
return lightbox;
}

window.neosPhotoSwipe = window.neosPhotoSwipe || {};
window.neosPhotoSwipe.template = {
init,
lightbox: init(),
};
5 changes: 5 additions & 0 deletions Resources/Private/Fusion/Prototypes/IncludeCase.fusion
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
prototype(Jonnitto.PhotoSwipe:IncludeCase) < prototype(Neos.Fusion:Component) {
alwaysInclude = ${Configuration.setting('Jonnitto.PhotoSwipe.alwaysInclude')}
includeTemplate = ${Configuration.setting('Jonnitto.PhotoSwipe.includeTemplate')}
includeFetch = ${Configuration.setting('Jonnitto.PhotoSwipe.includeFetch')}
selectorCollection = ${Configuration.setting('Jonnitto.PhotoSwipe.selector.collection')}
selectorContent = ${Configuration.setting('Jonnitto.PhotoSwipe.selector.content')}
Expand All @@ -17,6 +18,10 @@ prototype(Jonnitto.PhotoSwipe:IncludeCase) < prototype(Neos.Fusion:Component) {
condition = ${node.context.inBackend}
renderer = ${props.includeInBackend}
}
includeTemplate {
condition = ${props.includeTemplate}
renderer = true
}
includeFetch {
condition = ${props.includeFetch}
renderer = true
Expand Down
18 changes: 18 additions & 0 deletions Resources/Private/Fusion/Prototypes/Markup.fusion
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,17 @@ prototype(Jonnitto.PhotoSwipe:Markup) < prototype(Neos.Fusion:Component) {
indexIndicatorSep = ${Translation.translate('indexIndicatorSep', ' / ', [], 'Main', 'Jonnitto.PhotoSwipe')}
}
fetchErrorMessage = ${Translation.translate('errorMsgFetch', 'The content cannot be loaded. <a href="%s" data-pswp-type="fetch" data-turbo="false">Try again</a>', [], 'Main', 'Jonnitto.PhotoSwipe')}
contentErrorMessage = ${Translation.translate('errorMsgContent', 'The content cannot be loaded.', [], 'Main', 'Jonnitto.PhotoSwipe')}

# You can pass any option from here:
# https://photoswipe.com/options/
options = ${Configuration.setting('Jonnitto.PhotoSwipe.options')}
fetchOptions = ${Configuration.setting('Jonnitto.PhotoSwipe.fetchOptions')}
templateOptions = ${Configuration.setting('Jonnitto.PhotoSwipe.templateOptions')}

useJsModule = ${Configuration.setting('Jonnitto.PhotoSwipe.useJsModule')}
includeFetch = ${Configuration.setting('Jonnitto.PhotoSwipe.includeFetch')}
includeTemplate = ${Configuration.setting('Jonnitto.PhotoSwipe.includeTemplate')}

@if.includeLightbox = Jonnitto.PhotoSwipe:IncludeCase

Expand Down Expand Up @@ -57,5 +60,20 @@ prototype(Jonnitto.PhotoSwipe:Markup) < prototype(Neos.Fusion:Component) {
data-photoswipe-fetch-options={Json.stringify(Array.filter(Array.concat({errorMsg: props.fetchErrorMessage}, props.fetchOptions)))}
defer
></script>
<script
@if={!props.useJsModule && props.includeTemplate}
@key="templateScript"
src={StaticResource.uri('Jonnitto.PhotoSwipe', 'Public/Scripts/Template.js')}
data-photoswipe-template-options={Json.stringify(Array.filter(Array.concat({errorMsg: props.contentErrorMessage} props.templateOptions)))}
defer
></script>
<script
@if={props.useJsModule && props.includeTemplate}
@key="templateScriptModule"
type="module"
src={StaticResource.uri('Jonnitto.PhotoSwipe', 'Public/Modules/Template.js')}
data-photoswipe-template-options={Json.stringify(Array.filter(Array.concat({errorMsg: props.contentErrorMessage}, props.templateOptions)))}
defer
></script>
`
}
3 changes: 3 additions & 0 deletions Resources/Private/Translations/de/Main.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<trans-unit id="errorMsgFetch" xml:space="preserve">
<source><![CDATA[Der Inhalt konnte nicht geladen werden. <a href="%s" data-pswp-type="fetch" data-turbo="false">Erneut versuchen</a>]]></source>
</trans-unit>
<trans-unit id="errorMsgContent" xml:space="preserve">
<source>Der Inhalt konnte nicht geladen werden.</source>
</trans-unit>
<trans-unit id="indexIndicatorSep" xml:space="preserve">
<source> / </source>
</trans-unit>
Expand Down
3 changes: 3 additions & 0 deletions Resources/Private/Translations/en/Main.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<trans-unit id="errorMsgFetch" xml:space="preserve">
<source><![CDATA[The content cannot be loaded. <a href="%s" data-pswp-type="fetch" data-turbo="false">Try again</a>]]></source>
</trans-unit>
<trans-unit id="errorMsgContent" xml:space="preserve">
<source>The content cannot be loaded.</source>
</trans-unit>
<trans-unit id="indexIndicatorSep" xml:space="preserve">
<source> / </source>
</trans-unit>
Expand Down
3 changes: 3 additions & 0 deletions Resources/Private/Translations/fr/Main.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,9 @@
<trans-unit id="errorMsgFetch" xml:space="preserve">
<source><![CDATA[Le contenu ne peut pas être chargé. <a href="%s" data-pswp-type="fetch" data-turbo="false">Réessayer</a>]]></source>
</trans-unit>
<trans-unit id="errorMsgContent" xml:space="preserve">
<source>Le contenu ne peut pas être chargé.</source>
</trans-unit>
<trans-unit id="indexIndicatorSep" xml:space="preserve">
<source> / </source>
</trans-unit>
Expand Down
5 changes: 4 additions & 1 deletion Resources/Private/Translations/it/Main.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@
<source>L'immagine non può essere caricata</source>
</trans-unit>
<trans-unit id="errorMsgFetch" xml:space="preserve">
<source><![CDATA[Il contenuto non può essere caricato.. <a href="%s" data-pswp-type="fetch" data-turbo="false">Riprova</a>]]></source>
<source><![CDATA[Il contenuto non può essere caricato. <a href="%s" data-pswp-type="fetch" data-turbo="false">Riprova</a>]]></source>
</trans-unit>
<trans-unit id="errorMsgContent" xml:space="preserve">
<source>Il contenuto non può essere caricato.</source>
</trans-unit>
<trans-unit id="indexIndicatorSep" xml:space="preserve">
<source> / </source>
Expand Down
2 changes: 1 addition & 1 deletion Resources/Public/Modules/Fetch.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 3ebf7a9

Please sign in to comment.