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

refactor(gallery): add galleryUID param

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

30
assets/ts/gallery.ts
View File

@ -17,15 +17,23 @@ interface PhotoSwipeItem {
} }
class StackGallery { class StackGallery {
private galleryUID: number;
private items: PhotoSwipeItem[] = []; private items: PhotoSwipeItem[] = [];
constructor(container: HTMLElement) { constructor(container: HTMLElement, galleryUID = 1) {
this.galleryUID = galleryUID;
StackGallery.createGallery(container); StackGallery.createGallery(container);
this.initItems(container); this.loadItems(container);
StackGallery.loadPS().then(() => { this.initPS() });
StackGallery.loadPS().then(() => {
const pswp = document.querySelector('.pswp') as HTMLDivElement;
pswp.style.removeProperty('display');
this.bindClick();
});
} }
private initItems(container: HTMLElement) { private loadItems(container: HTMLElement) {
this.items = []; this.items = [];
const figures = container.querySelectorAll('figure'); const figures = container.querySelectorAll('figure');
@ -82,10 +90,10 @@ class StackGallery {
* @param figures * @param figures
*/ */
public static wrap(figures: HTMLElement[]) { public static wrap(figures: HTMLElement[]) {
let galleryContainer = document.createElement('div'); const galleryContainer = document.createElement('div');
galleryContainer.className = 'gallery'; galleryContainer.className = 'gallery';
let parentNode = figures[0].parentNode, const parentNode = figures[0].parentNode,
first = figures[0]; first = figures[0];
parentNode.insertBefore(galleryContainer, first) parentNode.insertBefore(galleryContainer, first)
@ -115,10 +123,11 @@ class StackGallery {
return Promise.all(tasks); return Promise.all(tasks);
} }
private openGallery(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, {
index: index, index: index,
galleryUID: this.galleryUID,
getThumbBoundsFn: (index) => { getThumbBoundsFn: (index) => {
const thumbnail = this.items[index].el.getElementsByTagName('img')[0], const thumbnail = this.items[index].el.getElementsByTagName('img')[0],
pageYScroll = window.pageYOffset || document.documentElement.scrollTop, pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
@ -131,16 +140,13 @@ class StackGallery {
ps.init(); ps.init();
} }
private initPS() { private bindClick() {
const pswp = document.querySelector('.pswp') as HTMLDivElement;
pswp.style.removeProperty('display');
for (const [index, item] of this.items.entries()) { for (const [index, item] of this.items.entries()) {
const a = item.el.querySelector('a'); const a = item.el.querySelector('a');
a.addEventListener('click', (e) => { a.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
this.openGallery(index); this.open(index);
}) })
} }
} }