Sync/hugo-theme-stack
1
0
Fork 1
mirror of https://github.com/CaiJimmy/hugo-theme-stack.git synced 2025-04-29 03:53:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor(gallery): load PhotoSwipe lib in HTML

Browse Source
This commit is contained in:
Jimmy Cai 2020-12-22 19:13:11 +01:00
parent bf12e3b63b
commit 9acba47e08
No known key found for this signature in database
GPG Key ID: 3EA408E527F37B18
2 changed files with 14 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
assets/ts/gallery.ts
View File

@ -21,16 +21,16 @@ class StackGallery {
private items: PhotoSwipeItem[] = []; private items: PhotoSwipeItem[] = [];
constructor(container: HTMLElement, galleryUID = 1) { constructor(container: HTMLElement, galleryUID = 1) {
if (window.PhotoSwipe == undefined) {
console.error("PhotoSwipe lib not loaded.");
return;
}
this.galleryUID = galleryUID; this.galleryUID = galleryUID;
StackGallery.createGallery(container); StackGallery.createGallery(container);
this.loadItems(container); this.loadItems(container);
this.bindClick();
StackGallery.loadPS().then(() => {
const pswp = document.querySelector('.pswp') as HTMLDivElement;
pswp.style.removeProperty('display');
this.bindClick();
});
} }
private loadItems(container: HTMLElement) { private loadItems(container: HTMLElement) {
@ -109,20 +109,6 @@ class StackGallery {
} }
} }
/**
* Load PhotoSwipe library dynamically
*/
public static loadPS() {
const tasks = [
loadScript("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"),
loadScript("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"),
loadStyle("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css"),
loadStyle("https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css")
];
return Promise.all(tasks);
}
public open(index: number) { public open(index: number) {
const pswp = document.querySelector('.pswp') as HTMLDivElement; const pswp = document.querySelector('.pswp') as HTMLDivElement;
const ps = new window.PhotoSwipe(pswp, window.PhotoSwipeUI_Default, this.items, { const ps = new window.PhotoSwipe(pswp, window.PhotoSwipeUI_Default, this.items, {

10
layouts/partials/article/components/photoswipe.html
View File

@ -1,5 +1,5 @@
<!-- Root element of PhotoSwipe. Must have class pswp. --> <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" style="display:none"> <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe. <!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). --> It's a separate element as animating opacity is faster than rgba(). -->
@ -63,4 +63,10 @@
</div> </div>
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.css">