From 86c19906fe4bd19ed764c8d198576ad51edd72db Mon Sep 17 00:00:00 2001 From: hennnnes Date: Mon, 10 Jul 2023 09:19:21 +0200 Subject: [PATCH 1/3] feat(techdocs-module-lightbox): Enable zoom in techdocs images Signed-off-by: hennnnes --- .changeset/rude-dolphins-reply.md | 5 +++++ docs/features/techdocs/addons.md | 12 ++++++------ .../src/LigthBox/LightBox.tsx | 8 ++++++-- .../src/LigthBox/lightbox.css | 10 ++++++++++ 4 files changed, 27 insertions(+), 8 deletions(-) create mode 100644 .changeset/rude-dolphins-reply.md diff --git a/.changeset/rude-dolphins-reply.md b/.changeset/rude-dolphins-reply.md new file mode 100644 index 0000000000..b3ad7bfe9b --- /dev/null +++ b/.changeset/rude-dolphins-reply.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs-module-addons-contrib': minor +--- + +Enable zoom for techdocs images inside lightbox diff --git a/docs/features/techdocs/addons.md b/docs/features/techdocs/addons.md index bd709ee15f..565a1fd179 100644 --- a/docs/features/techdocs/addons.md +++ b/docs/features/techdocs/addons.md @@ -122,12 +122,12 @@ page header, TechDocs Addons whose location is `Header` will not be rendered. Addons can, in principle, be provided by any plugin! To make it easier to discover available Addons, we've compiled a list of them here: -| Addon | Package/Plugin | Description | -| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.expandablenavigation) | `@backstage/plugin-techdocs-module-addons-contrib` | Allows TechDocs users to expand or collapse the entire TechDocs main navigation, and keeps the user's preferred state between documentation sites. | -| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.reportissue) | `@backstage/plugin-techdocs-module-addons-contrib` | Allows TechDocs users to select a portion of text on a TechDocs page and open an issue against the repository that contains the documentation, populating the issue description with the selected text according to a configurable template. | -| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.textsize) | `@backstage/plugin-techdocs-module-addons-contrib` | This TechDocs addon allows users to customize text size on documentation pages, they can select how much they want to increase or decrease the font size via slider or buttons. The default value for font size is 100% and this setting is kept in the browser's local storage whenever it is changed. | -| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.lightbox) | `@backstage/plugin-techdocs-module-addons-contrib` | This TechDocs addon allows users to open images in a light-box on documentation pages, they can navigate between images if there are several on one page. The image size of the light-box image is the same as the image size on the document page. | +| Addon | Package/Plugin | Description | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.expandablenavigation) | `@backstage/plugin-techdocs-module-addons-contrib` | Allows TechDocs users to expand or collapse the entire TechDocs main navigation, and keeps the user's preferred state between documentation sites. | +| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.reportissue) | `@backstage/plugin-techdocs-module-addons-contrib` | Allows TechDocs users to select a portion of text on a TechDocs page and open an issue against the repository that contains the documentation, populating the issue description with the selected text according to a configurable template. | +| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.textsize) | `@backstage/plugin-techdocs-module-addons-contrib` | This TechDocs addon allows users to customize text size on documentation pages, they can select how much they want to increase or decrease the font size via slider or buttons. The default value for font size is 100% and this setting is kept in the browser's local storage whenever it is changed. | +| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.lightbox) | `@backstage/plugin-techdocs-module-addons-contrib` | This TechDocs addon allows users to open images in a light-box on documentation pages, they can navigate between images if there are several on one page. The image size of the light-box image is the same as the image size on the document page. When clicking on the zoom icon it zooms to the 2.5x of the image. It's possible to zoom up to 4x by scrolling. | Got an Addon to contribute? Feel free to add a row above! diff --git a/plugins/techdocs-module-addons-contrib/src/LigthBox/LightBox.tsx b/plugins/techdocs-module-addons-contrib/src/LigthBox/LightBox.tsx index b74c2f9659..62c8da0b49 100644 --- a/plugins/techdocs-module-addons-contrib/src/LigthBox/LightBox.tsx +++ b/plugins/techdocs-module-addons-contrib/src/LigthBox/LightBox.tsx @@ -30,6 +30,9 @@ export const LightBoxAddon = () => { let lightbox = new PhotoSwipeLightbox({ pswpModule: PhotoSwipe, + initialZoomLevel: 1, + secondaryZoomLevel: 2.5, + maxZoomLevel: 4, wheelToZoom: true, arrowPrevSVG: '', @@ -37,8 +40,9 @@ export const LightBoxAddon = () => { '', closeSVG: '', - zoomSVG: - '', + zoomSVG: ``, }); images.forEach((image, index) => { diff --git a/plugins/techdocs-module-addons-contrib/src/LigthBox/lightbox.css b/plugins/techdocs-module-addons-contrib/src/LigthBox/lightbox.css index 3371d0fa53..c864699bed 100644 --- a/plugins/techdocs-module-addons-contrib/src/LigthBox/lightbox.css +++ b/plugins/techdocs-module-addons-contrib/src/LigthBox/lightbox.css @@ -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; +} From 49e49b51d476bdaa95ae9d04d211464f84caef63 Mon Sep 17 00:00:00 2001 From: hennnnes Date: Mon, 7 Aug 2023 17:56:42 +0200 Subject: [PATCH 2/3] fix: zoom image to fit into viewport on button click Signed-off-by: hennnnes --- docs/features/techdocs/addons.md | 12 ++++++------ .../src/LigthBox/LightBox.tsx | 18 +++++++++++++++--- 2 files changed, 21 insertions(+), 9 deletions(-) diff --git a/docs/features/techdocs/addons.md b/docs/features/techdocs/addons.md index 565a1fd179..a41995c260 100644 --- a/docs/features/techdocs/addons.md +++ b/docs/features/techdocs/addons.md @@ -122,12 +122,12 @@ page header, TechDocs Addons whose location is `Header` will not be rendered. Addons can, in principle, be provided by any plugin! To make it easier to discover available Addons, we've compiled a list of them here: -| Addon | Package/Plugin | Description | -| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.expandablenavigation) | `@backstage/plugin-techdocs-module-addons-contrib` | Allows TechDocs users to expand or collapse the entire TechDocs main navigation, and keeps the user's preferred state between documentation sites. | -| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.reportissue) | `@backstage/plugin-techdocs-module-addons-contrib` | Allows TechDocs users to select a portion of text on a TechDocs page and open an issue against the repository that contains the documentation, populating the issue description with the selected text according to a configurable template. | -| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.textsize) | `@backstage/plugin-techdocs-module-addons-contrib` | This TechDocs addon allows users to customize text size on documentation pages, they can select how much they want to increase or decrease the font size via slider or buttons. The default value for font size is 100% and this setting is kept in the browser's local storage whenever it is changed. | -| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.lightbox) | `@backstage/plugin-techdocs-module-addons-contrib` | This TechDocs addon allows users to open images in a light-box on documentation pages, they can navigate between images if there are several on one page. The image size of the light-box image is the same as the image size on the document page. When clicking on the zoom icon it zooms to the 2.5x of the image. It's possible to zoom up to 4x by scrolling. | +| Addon | Package/Plugin | Description | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.expandablenavigation) | `@backstage/plugin-techdocs-module-addons-contrib` | Allows TechDocs users to expand or collapse the entire TechDocs main navigation, and keeps the user's preferred state between documentation sites. | +| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.reportissue) | `@backstage/plugin-techdocs-module-addons-contrib` | Allows TechDocs users to select a portion of text on a TechDocs page and open an issue against the repository that contains the documentation, populating the issue description with the selected text according to a configurable template. | +| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.textsize) | `@backstage/plugin-techdocs-module-addons-contrib` | This TechDocs addon allows users to customize text size on documentation pages, they can select how much they want to increase or decrease the font size via slider or buttons. The default value for font size is 100% and this setting is kept in the browser's local storage whenever it is changed. | +| [``](https://backstage.io/docs/reference/plugin-techdocs-module-addons-contrib.lightbox) | `@backstage/plugin-techdocs-module-addons-contrib` | This TechDocs addon allows users to open images in a light-box on documentation pages, they can navigate between images if there are several on one page. The image size of the light-box image is the same as the image size on the document page. When clicking on the zoom icon it zooms the image to fit in the screen (similar to `background-size: contain`). | Got an Addon to contribute? Feel free to add a row above! diff --git a/plugins/techdocs-module-addons-contrib/src/LigthBox/LightBox.tsx b/plugins/techdocs-module-addons-contrib/src/LigthBox/LightBox.tsx index 62c8da0b49..38269e6245 100644 --- a/plugins/techdocs-module-addons-contrib/src/LigthBox/LightBox.tsx +++ b/plugins/techdocs-module-addons-contrib/src/LigthBox/LightBox.tsx @@ -17,7 +17,7 @@ import { useEffect } from 'react'; import { useShadowRootElements } from '@backstage/plugin-techdocs-react'; // @ts-ignore -import PhotoSwipeLightbox, { DataSource } from 'photoswipe/lightbox'; +import PhotoSwipeLightbox, { DataSource, ZoomLevel } from 'photoswipe/lightbox'; import PhotoSwipe from 'photoswipe'; import 'photoswipe/style.css'; import './lightbox.css'; @@ -31,8 +31,20 @@ export const LightBoxAddon = () => { let lightbox = new PhotoSwipeLightbox({ pswpModule: PhotoSwipe, initialZoomLevel: 1, - secondaryZoomLevel: 2.5, - maxZoomLevel: 4, + secondaryZoomLevel: (zoomLevelObject: ZoomLevel) => { + // photoswipe/lightbox won't zoom the image further then the given width and height. + // therefore we need to calculate the zoom factor needed to fit the complete image in the viewport manually. + const imageWidth = zoomLevelObject.elementSize.x; + const imageHeight = zoomLevelObject.elementSize.y; + const viewportWidth = zoomLevelObject.panAreaSize.x; + const viewportHeight = zoomLevelObject.panAreaSize.y; + + const widthScale = viewportWidth / imageWidth; + const heightScale = viewportHeight / imageHeight; + + const scaleFactor = Math.min(widthScale, heightScale); + return scaleFactor; + }, wheelToZoom: true, arrowPrevSVG: '', From 807c041be04facd6a15aa30e0b0cd743091841a0 Mon Sep 17 00:00:00 2001 From: hennnnes Date: Wed, 23 Aug 2023 13:21:01 +0200 Subject: [PATCH 3/3] fix: update changelog Signed-off-by: hennnnes --- .changeset/rude-dolphins-reply.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/rude-dolphins-reply.md b/.changeset/rude-dolphins-reply.md index b3ad7bfe9b..89545cde1f 100644 --- a/.changeset/rude-dolphins-reply.md +++ b/.changeset/rude-dolphins-reply.md @@ -2,4 +2,4 @@ '@backstage/plugin-techdocs-module-addons-contrib': minor --- -Enable zoom for techdocs images inside lightbox +Enable zoom icon for techdocs images inside lightbox