Skip to content

Commit 5a7ba30

Browse files
bipozabipoza
committed
IonHeader added with close Event
1 parent aab2607 commit 5a7ba30

File tree

4 files changed

+120
-24
lines changed

4 files changed

+120
-24
lines changed

‎src/IonPhotoViewer/IonPhotoViewer.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
--pswp-placeholder-bg: rgba(0, 0, 0, 0.4);
1515
}
1616

17+
.pswp__top-bar{
18+
display: none;
19+
}
20+
1721
/* div.pswp__img--placeholder,
1822
.pswp__img--with-bg {
1923
background: transparent;

‎src/IonPhotoViewer/IonPhotoViewer.tsx‎

Lines changed: 90 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1-
import React, {useEffect} from "react";
1+
import React, { useEffect } from "react";
22
import "photoswipe/dist/photoswipe.css";
33
import "./IonPhotoViewer.css";
4-
import { getImageDimensions, renderIonHeader } from "./utils";
4+
import { createElementFromHTML, getImageDimensions } from "./utils";
55
import { IonPhotoViewerProps } from "./IonPhotoViewer.types";
6-
import { Gallery, Item } from "react-photoswipe-gallery";
6+
import { Gallery, GalleryProps, Item } from "react-photoswipe-gallery";
7+
import renderIonHeaderToString from "./renderIonHeaderToString";
8+
import { DataSourceArray } from "photoswipe";
79

810
const IonPhotoViewer: React.FC<IonPhotoViewerProps> = ({
911
children,
@@ -16,18 +18,101 @@ const IonPhotoViewer: React.FC<IonPhotoViewerProps> = ({
1618
width: 0,
1719
});
1820

21+
const uiElements: GalleryProps['uiElements'] = [
22+
{
23+
name: 'bulletsIndicator',
24+
order: 9,
25+
isButton: false,
26+
27+
appendTo: 'wrapper',
28+
onInit: (el, pswpInstance) => {
29+
30+
31+
// el.style.position = 'absolute'
32+
el.style.top = '0'
33+
// el.style.left = '50%'
34+
// el.style.right = '50%'
35+
// el.style.display = 'grid'
36+
// el.style.gridGap = '10px'
37+
el.style.gridTemplateColumns = 'repeat(auto-fit, 40px)'
38+
el.style.gridTemplateRows = 'repeat(auto-fit, 40px)'
39+
el.style.justifyContent = 'left'
40+
41+
42+
// const dataSource = pswpInstance.options.dataSource as DataSourceArray
43+
el.append(createElementFromHTML(renderIonHeaderToString(title)));
44+
45+
// renderIonHeaderToString(title, 'ionPhotoViewerClose')
46+
47+
// for (let i = 0; i < dataSource.length; i++) {
48+
// const slideData = dataSource[i]
49+
50+
// const thumbnail = document.createElement('div')
51+
// thumbnail.style.transition = 'transform 0.15s ease-in'
52+
// thumbnail.style.opacity = '0.6'
53+
// thumbnail.style.cursor = 'pointer'
54+
// thumbnail.onclick = (e: MouseEvent) => {
55+
// const target = e.target as HTMLImageElement | HTMLDivElement
56+
// const thumbnailEl =
57+
// target.tagName === 'IMG'
58+
// ? target.parentElement
59+
// : (e.target as HTMLImageElement | HTMLDivElement)
60+
// thumbnailEl && pswpInstance.goTo(thumbnails.indexOf(thumbnailEl))
61+
// }
62+
63+
// const thumbnailImage = document.createElement('img')
64+
// slideData.msrc && thumbnailImage.setAttribute('src', slideData.msrc)
65+
// thumbnailImage.style.width = '100%'
66+
// thumbnailImage.style.height = '100%'
67+
// thumbnailImage.style.objectFit = 'cover'
68+
69+
// thumbnail.appendChild(thumbnailImage)
70+
71+
// el.appendChild(thumbnail)
72+
73+
// thumbnails.push(thumbnail)
74+
// }
75+
76+
// pswpInstance.on('change', () => {
77+
// if (prevIndex >= 0) {
78+
// const prevThumbnail = thumbnails[prevIndex]
79+
// prevThumbnail.style.opacity = '0.6'
80+
// prevThumbnail.style.cursor = 'pointer'
81+
// prevThumbnail.style.transform = 'scale(1)'
82+
// }
83+
84+
// const currentThumbnail = thumbnails[pswpInstance.currIndex]
85+
// currentThumbnail.style.opacity = '1'
86+
// currentThumbnail.style.cursor = 'unset'
87+
// currentThumbnail.style.transform = 'scale(1.2)'
88+
89+
// prevIndex = pswpInstance.currIndex
90+
// })
91+
},
92+
onClick: (e, el, pswpInstance) => {
93+
const target = e.target as HTMLImageElement | HTMLDivElement
94+
if(target?.id === 'ion-header-close-button') {
95+
pswpInstance.close()
96+
}
97+
}
98+
},
99+
]
100+
19101

20102
useEffect(() => {
21-
getImageDimensions(src).then((dimensions:any) => setImageDimensions(dimensions));
103+
getImageDimensions(src).then((dimensions: any) =>
104+
setImageDimensions(dimensions)
105+
);
22106
}, []);
107+
23108
return (
24109
<div
25110
className="ion-photo-viewer"
26111
onClick={(e) => e.stopPropagation()}
27112
onKeyDown={(e) => e.stopPropagation()}
28113
role="presentation"
29114
>
30-
<Gallery>
115+
<Gallery uiElements={uiElements}>
31116
<Item
32117
original={src}
33118
thumbnail={src}

‎src/IonPhotoViewer/renderIonHeaderToString.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,12 @@ import {
1212

1313
const renderIonHeaderToString = (
1414
title: string,
15-
ionPhotoViewerCloseId: string,
1615
) => {
1716
return renderToString(
1817
<IonHeader class="header-no-shadow">
1918
<IonToolbar>
2019
<IonButtons slot="start">
21-
<IonButton id={ionPhotoViewerCloseId}>
20+
<IonButton id="ion-header-close-button">
2221
<IonIcon slot="icon-only" icon={arrowBack} />
2322
</IonButton>
2423
</IonButtons>

‎src/IonPhotoViewer/utils.ts‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
import renderIonHeaderToString from './renderIonHeaderToString';
22

33

4-
const renderIonHeader = (title: string, instance: any) => {
5-
// Generate random hash for ion-header
6-
const randomHash = Math.random().toString(36).substring(2, 15);
7-
// Generate random id for ion-header
8-
const ionPhotoViewerCloseId = `ion-photo-viewer${randomHash}`;
9-
const $btn = renderIonHeaderToString(title, ionPhotoViewerCloseId);
10-
11-
instance.outer.find('.lg-toolbar').append($btn);
12-
13-
//Search ion-photo-viewer-close and add event listener on click
14-
document
15-
.getElementById(ionPhotoViewerCloseId)
16-
?.addEventListener('click', () => {
17-
instance.closeGallery();
18-
});
19-
};
4+
// const renderIonHeader = (title: string) => {
5+
// // Generate random hash for ion-header
6+
// const randomHash = Math.random().toString(36).substring(2, 15);
7+
// // Generate random id for ion-header
8+
// const ionPhotoViewerCloseId = `ion-photo-viewer${randomHash}`;
9+
// const ionHeader = renderIonHeaderToString(title, ionPhotoViewerCloseId);
10+
11+
// instance.outer.find('.lg-toolbar').append(ionHeader);
12+
13+
// //Search ion-photo-viewer-close and add event listener on click
14+
// document
15+
// .getElementById(ionPhotoViewerCloseId)
16+
// ?.addEventListener('click', () => {
17+
// instance.closeGallery();
18+
// });
19+
// };
2020

2121
const getImageDimensions = (imageUrl: string) => {
2222
return new Promise((resolve, reject) => {
@@ -37,4 +37,12 @@ const getImageDimensions = (imageUrl: string) => {
3737
});
3838
};
3939

40-
export { renderIonHeader, getImageDimensions };
40+
const createElementFromHTML = (htmlString:string) => {
41+
var div = document.createElement('div');
42+
div.innerHTML = htmlString.trim();
43+
44+
// Change this to div.childNodes to support multiple top-level nodes.
45+
return div.firstChild?div.firstChild:div;
46+
}
47+
48+
export { getImageDimensions, createElementFromHTML };

0 commit comments

Comments
 (0)