paulononato/backstage
1
0
Fork 0
Code Issues Pull Requests Actions 32 Packages Projects Releases Wiki Activity

feat(techdocs-module-lightbox): Enable zoom in techdocs images

Browse Source 
Signed-off-by: hennnnes <hroemmer@googlemail.com>
This commit is contained in:
hennnnes
2023-07-10 09:19:21 +02:00
parent dcd7e1622c
commit 86c19906fe
4 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/techdocs-module-addons-contrib/src/LigthBox/LightBox.tsx
+6 -2
View File
@@ -30,6 +30,9 @@ export const LightBoxAddon = () => {
let lightbox = new PhotoSwipeLightbox({
pswpModule: PhotoSwipe,
initialZoomLevel: 1,
secondaryZoomLevel: 2.5,
maxZoomLevel: 4,
wheelToZoom: true,
arrowPrevSVG:
'<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-c1sh5i" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ArrowBackIosIcon" aria-label="fontSize large"><path d="M11.67 3.87 9.9 2.1 0 12l9.9 9.9 1.77-1.77L3.54 12z"></path></svg>',
@@ -37,8 +40,9 @@ export const LightBoxAddon = () => {
'<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-c1sh5i" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ArrowForwardIosIcon" aria-label="fontSize large"><path d="M6.23 20.23 8 22l10-10L8 2 6.23 3.77 14.46 12z"></path></svg>',
closeSVG:
'<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-c1sh5i" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="CloseIcon" aria-label="fontSize large"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg>',
zoomSVG:
'<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-c1sh5i" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ZoomInIcon" aria-label="fontSize large"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path><path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"></path></svg>',
zoomSVG: `<svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeLarge css-c1sh5i" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="ZoomIcon" aria-label="fontSize large">
<path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path><path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z" id="photoswipe-zoom-icon-zoomin-path"></path><path d="M12 10H 7 V 9 H 12 Z" id="photoswipe-zoom-icon-zoomout-path">
</svg>`,
});
images.forEach((image, index) => {
plugins/techdocs-module-addons-contrib/src/LigthBox/lightbox.css
+10
View File
@@ -9,3 +9,13 @@
.pswp__img {
cursor: pointer !important;
}
/* hide "-" icon path */
.pswp--zoomed-allowed #photoswipe-zoom-icon-zoomout-path {
display: none;
}
/* hide "+" path and show "-" */
.pswp--zoomed-in #photoswipe-zoom-icon-zoomin-path {
display: none;
}