forked from Sync/hugo-theme-stack
feat: upgrade to PhotoSwipe v5
This commit is contained in:
Jimmy Cai
GitHub
parent
e5f3cb11d5
commit
9d4ab5afcf
@ -1,186 +1,92 @@
|
|||||||
declare global {
|
const wrap = (figures: HTMLElement[]) => {
|
||||||
interface Window {
|
const galleryContainer = document.createElement('div');
|
||||||
PhotoSwipe: any;
|
galleryContainer.className = 'gallery';
|
||||||
PhotoSwipeUI_Default: any
|
|
||||||
|
const parentNode = figures[0].parentNode,
|
||||||
|
first = figures[0];
|
||||||
|
|
||||||
|
parentNode.insertBefore(galleryContainer, first)
|
||||||
|
|
||||||
|
for (const figure of figures) {
|
||||||
|
galleryContainer.appendChild(figure);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
interface PhotoSwipeItem {
|
export default (container: HTMLElement) => {
|
||||||
w: number;
|
/// The process of wrapping image with figure tag is done using JavaScript instead of only Hugo markdown render hook
|
||||||
h: number;
|
/// because it can not detect whether image is being wrapped by a link or not
|
||||||
src: string;
|
/// and it lead to a invalid HTML construction (<a><figure><img></figure></a>)
|
||||||
msrc: string;
|
const images = container.querySelectorAll('img.gallery-image') as NodeListOf<HTMLImageElement>;
|
||||||
title?: string;
|
for (const img of Array.from(images)) {
|
||||||
el: HTMLElement;
|
/// Images are wrapped with figure tag if the paragraph has only images without texts
|
||||||
}
|
/// This is done to allow inline images within paragraphs
|
||||||
|
const paragraph = img.closest('p');
|
||||||
|
|
||||||
class StackGallery {
|
if (!paragraph || !container.contains(paragraph)) continue;
|
||||||
private galleryUID: number;
|
|
||||||
private items: PhotoSwipeItem[] = [];
|
|
||||||
|
|
||||||
constructor(container: HTMLElement, galleryUID = 1) {
|
if (paragraph.textContent.trim() == '') {
|
||||||
if (window.PhotoSwipe == undefined || window.PhotoSwipeUI_Default == undefined) {
|
/// Once we insert figcaption, this check no longer works
|
||||||
console.error("PhotoSwipe lib not loaded.");
|
/// So we add a class to paragraph to mark it
|
||||||
return;
|
paragraph.classList.add('no-text');
|
||||||
}
|
}
|
||||||
|
|
||||||
this.galleryUID = galleryUID;
|
let isNewLineImage = paragraph.classList.contains('no-text');
|
||||||
|
if (!isNewLineImage) continue;
|
||||||
|
|
||||||
StackGallery.createGallery(container);
|
const hasLink = img.parentElement.tagName == 'A';
|
||||||
this.loadItems(container);
|
|
||||||
this.bindClick();
|
|
||||||
}
|
|
||||||
|
|
||||||
private loadItems(container: HTMLElement) {
|
let el: HTMLElement = img;
|
||||||
this.items = [];
|
/// Wrap image with figure tag, with flex-grow and flex-basis values extracted from img's data attributes
|
||||||
|
const figure = document.createElement('figure');
|
||||||
|
figure.style.setProperty('flex-grow', img.getAttribute('data-flex-grow') || '1');
|
||||||
|
figure.style.setProperty('flex-basis', img.getAttribute('data-flex-basis') || '0');
|
||||||
|
if (hasLink) {
|
||||||
|
/// Wrap <a> if it exists
|
||||||
|
el = img.parentElement;
|
||||||
|
}
|
||||||
|
el.parentElement.insertBefore(figure, el);
|
||||||
|
figure.appendChild(el);
|
||||||
|
|
||||||
const figures = container.querySelectorAll('figure.gallery-image');
|
/// Add figcaption if it exists
|
||||||
|
if (img.hasAttribute('alt')) {
|
||||||
|
const figcaption = document.createElement('figcaption');
|
||||||
|
figcaption.innerText = img.getAttribute('alt');
|
||||||
|
figure.appendChild(figcaption);
|
||||||
|
}
|
||||||
|
|
||||||
for (const el of figures) {
|
/// Wrap img tag with <a> tag if image was not wrapped by <a> tag
|
||||||
const figcaption = el.querySelector('figcaption'),
|
if (!hasLink) {
|
||||||
img = el.querySelector('img');
|
figure.className = 'gallery-image';
|
||||||
|
|
||||||
let aux: PhotoSwipeItem = {
|
const a = document.createElement('a');
|
||||||
w: parseInt(img.getAttribute('width')),
|
a.href = img.src;
|
||||||
h: parseInt(img.getAttribute('height')),
|
a.setAttribute('target', '_blank');
|
||||||
src: img.src,
|
a.setAttribute('data-pswp-width', img.width.toString());
|
||||||
msrc: img.getAttribute('data-thumb') || img.src,
|
a.setAttribute('data-pswp-height', img.height.toString());
|
||||||
el: el
|
img.parentNode.insertBefore(a, img);
|
||||||
}
|
a.appendChild(img);
|
||||||
|
|
||||||
if (figcaption) {
|
|
||||||
aux.title = figcaption.innerHTML;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.items.push(aux);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
public static createGallery(container: HTMLElement) {
|
const figuresEl = container.querySelectorAll('figure.gallery-image') as NodeListOf<HTMLElement>;
|
||||||
/// The process of wrapping image with figure tag is done using JavaScript instead of only Hugo markdown render hook
|
let currentGallery = [];
|
||||||
/// because it can not detect whether image is being wrapped by a link or not
|
for (const figure of Array.from(figuresEl)) {
|
||||||
/// and it lead to a invalid HTML construction (<a><figure><img></figure></a>)
|
if (!currentGallery.length) {
|
||||||
|
/// First iteration
|
||||||
const images = container.querySelectorAll('img.gallery-image');
|
currentGallery = [figure];
|
||||||
for (const img of Array.from(images)) {
|
|
||||||
/// Images are wrapped with figure tag if the paragraph has only images without texts
|
|
||||||
/// This is done to allow inline images within paragraphs
|
|
||||||
const paragraph = img.closest('p');
|
|
||||||
|
|
||||||
if (!paragraph || !container.contains(paragraph)) continue;
|
|
||||||
|
|
||||||
if (paragraph.textContent.trim() == '') {
|
|
||||||
/// Once we insert figcaption, this check no longer works
|
|
||||||
/// So we add a class to paragraph to mark it
|
|
||||||
paragraph.classList.add('no-text');
|
|
||||||
}
|
|
||||||
|
|
||||||
let isNewLineImage = paragraph.classList.contains('no-text');
|
|
||||||
if (!isNewLineImage) continue;
|
|
||||||
|
|
||||||
const hasLink = img.parentElement.tagName == 'A';
|
|
||||||
|
|
||||||
let el: HTMLElement = img;
|
|
||||||
/// Wrap image with figure tag, with flex-grow and flex-basis values extracted from img's data attributes
|
|
||||||
const figure = document.createElement('figure');
|
|
||||||
figure.style.setProperty('flex-grow', img.getAttribute('data-flex-grow') || '1');
|
|
||||||
figure.style.setProperty('flex-basis', img.getAttribute('data-flex-basis') || '0');
|
|
||||||
if (hasLink) {
|
|
||||||
/// Wrap <a> if it exists
|
|
||||||
el = img.parentElement;
|
|
||||||
}
|
|
||||||
el.parentElement.insertBefore(figure, el);
|
|
||||||
figure.appendChild(el);
|
|
||||||
|
|
||||||
/// Add figcaption if it exists
|
|
||||||
if (img.hasAttribute('alt')) {
|
|
||||||
const figcaption = document.createElement('figcaption');
|
|
||||||
figcaption.innerText = img.getAttribute('alt');
|
|
||||||
figure.appendChild(figcaption);
|
|
||||||
}
|
|
||||||
|
|
||||||
/// Wrap img tag with <a> tag if image was not wrapped by <a> tag
|
|
||||||
if (!hasLink) {
|
|
||||||
figure.className = 'gallery-image';
|
|
||||||
|
|
||||||
const a = document.createElement('a');
|
|
||||||
a.href = img.src;
|
|
||||||
a.setAttribute('target', '_blank');
|
|
||||||
img.parentNode.insertBefore(a, img);
|
|
||||||
a.appendChild(img);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
else if (figure.previousElementSibling === currentGallery[currentGallery.length - 1]) {
|
||||||
const figuresEl = container.querySelectorAll('figure.gallery-image');
|
/// Adjacent figures
|
||||||
|
currentGallery.push(figure);
|
||||||
let currentGallery = [];
|
|
||||||
|
|
||||||
for (const figure of figuresEl) {
|
|
||||||
if (!currentGallery.length) {
|
|
||||||
/// First iteration
|
|
||||||
currentGallery = [figure];
|
|
||||||
}
|
|
||||||
else if (figure.previousElementSibling === currentGallery[currentGallery.length - 1]) {
|
|
||||||
/// Adjacent figures
|
|
||||||
currentGallery.push(figure);
|
|
||||||
}
|
|
||||||
else if (currentGallery.length) {
|
|
||||||
/// End gallery
|
|
||||||
StackGallery.wrap(currentGallery);
|
|
||||||
currentGallery = [figure];
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
else if (currentGallery.length) {
|
||||||
if (currentGallery.length > 0) {
|
/// End gallery
|
||||||
StackGallery.wrap(currentGallery);
|
wrap(currentGallery);
|
||||||
|
currentGallery = [figure];
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
if (currentGallery.length > 0) {
|
||||||
* Wrap adjacent figure tags with div.gallery
|
wrap(currentGallery);
|
||||||
* @param figures
|
|
||||||
*/
|
|
||||||
public static wrap(figures: HTMLElement[]) {
|
|
||||||
const galleryContainer = document.createElement('div');
|
|
||||||
galleryContainer.className = 'gallery';
|
|
||||||
|
|
||||||
const parentNode = figures[0].parentNode,
|
|
||||||
first = figures[0];
|
|
||||||
|
|
||||||
parentNode.insertBefore(galleryContainer, first)
|
|
||||||
|
|
||||||
for (const figure of figures) {
|
|
||||||
galleryContainer.appendChild(figure);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
public open(index: number) {
|
|
||||||
const pswp = document.querySelector('.pswp') as HTMLDivElement;
|
|
||||||
const ps = new window.PhotoSwipe(pswp, window.PhotoSwipeUI_Default, this.items, {
|
|
||||||
index: index,
|
|
||||||
galleryUID: this.galleryUID,
|
|
||||||
getThumbBoundsFn: (index) => {
|
|
||||||
const thumbnail = this.items[index].el.getElementsByTagName('img')[0],
|
|
||||||
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
|
|
||||||
rect = thumbnail.getBoundingClientRect();
|
|
||||||
|
|
||||||
return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
ps.init();
|
|
||||||
}
|
|
||||||
|
|
||||||
private bindClick() {
|
|
||||||
for (const [index, item] of this.items.entries()) {
|
|
||||||
const a = item.el.querySelector('a');
|
|
||||||
|
|
||||||
a.addEventListener('click', (e) => {
|
|
||||||
e.preventDefault();
|
|
||||||
this.open(index);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default StackGallery;
|
|
||||||
@ -5,7 +5,6 @@
|
|||||||
* @website: https://jimmycai.com
|
* @website: https://jimmycai.com
|
||||||
* @link: https://github.com/CaiJimmy/hugo-theme-stack
|
* @link: https://github.com/CaiJimmy/hugo-theme-stack
|
||||||
*/
|
*/
|
||||||
import StackGallery from "ts/gallery";
|
|
||||||
import StackCodeBlock from "ts/codeblock";
|
import StackCodeBlock from "ts/codeblock";
|
||||||
import menu from 'ts/menu';
|
import menu from 'ts/menu';
|
||||||
import createElement from 'ts/createElement';
|
import createElement from 'ts/createElement';
|
||||||
@ -22,7 +21,6 @@ let Stack = {
|
|||||||
|
|
||||||
const articleContent = document.querySelector('.article-content') as HTMLElement;
|
const articleContent = document.querySelector('.article-content') as HTMLElement;
|
||||||
if (articleContent) {
|
if (articleContent) {
|
||||||
new StackGallery(articleContent);
|
|
||||||
setupSmoothAnchors();
|
setupSmoothAnchors();
|
||||||
setupScrollspy();
|
setupScrollspy();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,68 +1,20 @@
|
|||||||
<!-- Root element of PhotoSwipe. Must have class pswp. -->
|
{{- $opts := dict "minify" hugo.IsProduction "format" "esm" -}}
|
||||||
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
{{- $galleryScript := resources.Get "ts/gallery.ts" | js.Build $opts -}}
|
||||||
|
|
||||||
<!-- Background of PhotoSwipe.
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@5.2.7/dist/photoswipe.css"
|
||||||
It's a separate element as animating opacity is faster than rgba(). -->
|
integrity="sha256-olf9rfn3AG8zR6lkPXkN3PZq63z8tElx7Ela6T4eklo=" crossorigin="anonymous">
|
||||||
<div class="pswp__bg"></div>
|
|
||||||
|
|
||||||
<!-- Slides wrapper with overflow:hidden. -->
|
<script type="module">
|
||||||
<div class="pswp__scroll-wrap">
|
import StackGallery from '{{ $galleryScript.RelPermalink }}';
|
||||||
|
import PhotoSwipeLightbox from 'https://cdn.jsdelivr.net/npm/photoswipe@5.2.7/dist/photoswipe-lightbox.esm.min.js';
|
||||||
|
|
||||||
|
console.log(StackGallery)
|
||||||
|
StackGallery(document.querySelector('.article-content'));
|
||||||
|
|
||||||
<!-- Container that holds slides.
|
const lightbox = new PhotoSwipeLightbox({
|
||||||
PhotoSwipe keeps only 3 of them in the DOM to save memory.
|
gallery: '.article-content',
|
||||||
Don't modify these 3 pswp__item elements, data is added later on. -->
|
children: '.gallery-image a',
|
||||||
<div class="pswp__container">
|
pswpModule: () => import('https://cdn.jsdelivr.net/npm/photoswipe@5.2.7/dist/photoswipe.esm.min.js')
|
||||||
<div class="pswp__item"></div>
|
});
|
||||||
<div class="pswp__item"></div>
|
lightbox.init();
|
||||||
<div class="pswp__item"></div>
|
</script>
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
|
|
||||||
<div class="pswp__ui pswp__ui--hidden">
|
|
||||||
|
|
||||||
<div class="pswp__top-bar">
|
|
||||||
|
|
||||||
<!-- Controls are self-explanatory. Order can be changed. -->
|
|
||||||
|
|
||||||
<div class="pswp__counter"></div>
|
|
||||||
|
|
||||||
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
|
|
||||||
|
|
||||||
<button class="pswp__button pswp__button--share" title="Share"></button>
|
|
||||||
|
|
||||||
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
|
|
||||||
|
|
||||||
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
|
|
||||||
|
|
||||||
<!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
|
|
||||||
<!-- element will get class pswp__preloader--active when preloader is running -->
|
|
||||||
<div class="pswp__preloader">
|
|
||||||
<div class="pswp__preloader__icn">
|
|
||||||
<div class="pswp__preloader__cut">
|
|
||||||
<div class="pswp__preloader__donut"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
|
||||||
<div class="pswp__share-tooltip"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="pswp__caption">
|
|
||||||
<div class="pswp__caption__center"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{- partial "helper/external" (dict "Context" . "Namespace" "PhotoSwipe") -}}
|
|
||||||
Loading…
Reference in New Issue
Block a user