From d686ca492c15090805bf8e994d128888dc91c2e1 Mon Sep 17 00:00:00 2001 From: Cristian Necula Date: Mon, 11 Dec 2023 01:37:10 +0200 Subject: [PATCH 1/7] fix: upgrade to latest cosmoz-slider --- package-lock.json | 10 +++++----- package.json | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index bc1c77d..5590f68 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,11 +11,11 @@ "dependencies": { "@neovici/cfg": "^1.43.0", "@neovici/cosmoz-i18next": "^3.2.2", - "@neovici/cosmoz-slider": "^4.0.0", + "@neovici/cosmoz-slider": "^4.5.0", "@neovici/cosmoz-utils": "^5.0.0", "haunted": "^5.0.0", "jspdf": "^2.3.0", - "lit-html": "^3.1.0" + "lit-html": "^2.0.0 || ^3.1.0" }, "devDependencies": { "@commitlint/cli": "^18.4.3", @@ -3399,9 +3399,9 @@ } }, "node_modules/@neovici/cosmoz-slider": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@neovici/cosmoz-slider/-/cosmoz-slider-4.4.0.tgz", - "integrity": "sha512-s7YW7shi7aDoCKqQENvgruwtJP33S8tCwZsmC1tsEtEkre06E9iiznYVyEcWfpp4qB4X7hBNS4BGDW3UncGt2g==", + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/@neovici/cosmoz-slider/-/cosmoz-slider-4.5.0.tgz", + "integrity": "sha512-bk/qY/RVGL0enxTd8i6A+i2RnTRHIAFVC9UherJHMDIllTsZ967/T7h9mgTjujhHsK0oi3f4FjZh9Z6w/+xQrQ==", "dependencies": { "@neovici/cosmoz-utils": "^5.0.0", "haunted": "^5.0.0", diff --git a/package.json b/package.json index 0633069..2c62cff 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "dependencies": { "@neovici/cfg": "^1.43.0", "@neovici/cosmoz-i18next": "^3.2.2", - "@neovici/cosmoz-slider": "^4.0.0", + "@neovici/cosmoz-slider": "^4.5.0", "@neovici/cosmoz-utils": "^5.0.0", "haunted": "^5.0.0", "jspdf": "^2.3.0", From 5d99f6d1f040ac0aabf43e3155673f9389fef7df Mon Sep 17 00:00:00 2001 From: Cristian Necula Date: Mon, 11 Dec 2023 01:37:17 +0200 Subject: [PATCH 2/7] chore: fix storybook --- stories/data.js | 33 --------------------------------- 1 file changed, 33 deletions(-) diff --git a/stories/data.js b/stories/data.js index c93b231..093fd63 100644 --- a/stories/data.js +++ b/stories/data.js @@ -3,37 +3,4 @@ export const images = [ 'this-is-a-loading-error.jpg', 'stories/images/a_size.png', 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg', - 'stories/images/strasbourg.jpg', - 'stories/images/stockholm.jpg' ]; From 31fbaae0c9f5443d0803b5f3c642b3d009ecf68c Mon Sep 17 00:00:00 2001 From: Cristian Necula Date: Mon, 11 Dec 2023 03:00:45 +0200 Subject: [PATCH 3/7] fix: disabled state is missing --- cosmoz-image-viewer.js | 16 ++++++++++++++-- cosmoz-image-viewer.style.js | 16 ++++++++++++---- 2 files changed, 26 insertions(+), 6 deletions(-) diff --git a/cosmoz-image-viewer.js b/cosmoz-image-viewer.js index 43804d7..71d21cc 100644 --- a/cosmoz-image-viewer.js +++ b/cosmoz-image-viewer.js @@ -40,6 +40,8 @@ const renderCosmozImageViewer = ({ nextImage, previousImage, total, + first, + last, currentImageIndex, selectedImageNumber, syncImageIndex, @@ -71,10 +73,20 @@ const renderCosmozImageViewer = ({ ${when( shouldShow(host.showNav, total, 2), () => html` - - `, diff --git a/cosmoz-image-viewer.style.js b/cosmoz-image-viewer.style.js index 1c052fa..f801c3d 100644 --- a/cosmoz-image-viewer.style.js +++ b/cosmoz-image-viewer.style.js @@ -57,11 +57,18 @@ button.nav { border: none; width: 40px; height: 40px; - cursor: pointer; transition: background-color 100ms; } -button.nav:active { +button.nav:not([disabled]) { + cursor: pointer; +} + +button.nav[disabled] { + opacity: 0.5; +} + +button.nav:active:not([disabled]) { background-color: rgba(0, 0, 0, 0.60); } @@ -108,7 +115,8 @@ button.nav:active { cosmoz-slider { min-height: 150px; - // overflow-y: auto !important; height:100%; overflow-y: hidden; -}`; +} + +`; From 97ce01ed94ef6ded4fb3f742d271e2c6b49ede9c Mon Sep 17 00:00:00 2001 From: Cristian Necula Date: Mon, 11 Dec 2023 03:02:22 +0200 Subject: [PATCH 4/7] fix: loop does not work --- lib/hooks/use-cosmoz-image-viewer.js | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/hooks/use-cosmoz-image-viewer.js b/lib/hooks/use-cosmoz-image-viewer.js index 11bb835..5069a7c 100644 --- a/lib/hooks/use-cosmoz-image-viewer.js +++ b/lib/hooks/use-cosmoz-image-viewer.js @@ -53,6 +53,7 @@ const onImageError = (e) => { [isZoomed, setIsZoomed] = useState(false), _onZoomChanged = (ev) => setIsZoomed(ev.detail.value > 1), { slide, next, prev, goto, index } = useSlideList(images, { + loop, initial: images[host.currentImageIndex], render: (image) => render({ image, showZoom, isZoomed, _onZoomChanged }), From 831dd82c6967fea86b2f1c707e855f4d23f30a79 Mon Sep 17 00:00:00 2001 From: Cristian Necula Date: Mon, 11 Dec 2023 03:14:57 +0200 Subject: [PATCH 5/7] feat: async images --- cosmoz-image-viewer.style.js | 7 ++- lib/hooks/use-cosmoz-image-viewer.js | 66 ++++++++++++++++++++-------- 2 files changed, 53 insertions(+), 20 deletions(-) diff --git a/cosmoz-image-viewer.style.js b/cosmoz-image-viewer.style.js index f801c3d..352e6a2 100644 --- a/cosmoz-image-viewer.style.js +++ b/cosmoz-image-viewer.style.js @@ -115,8 +115,13 @@ button.nav:active:not([disabled]) { cosmoz-slider { min-height: 150px; + overflow-y: auto !important; height:100%; - overflow-y: hidden; } +cz-spinner { + position: absolute; + top: 50%; + left: 50%; +} `; diff --git a/lib/hooks/use-cosmoz-image-viewer.js b/lib/hooks/use-cosmoz-image-viewer.js index 5069a7c..a1c3d1e 100644 --- a/lib/hooks/use-cosmoz-image-viewer.js +++ b/lib/hooks/use-cosmoz-image-viewer.js @@ -1,11 +1,17 @@ +import '@neovici/cosmoz-utils/elements/cz-spinner'; + import { useSlideList } from '@neovici/cosmoz-slider'; import { useImperativeApi } from '@neovici/cosmoz-utils/hooks/use-imperative-api'; import { useNotifyProperty } from '@neovici/cosmoz-utils/hooks/use-notify-property'; -import { useCallback, useEffect, useState } from 'haunted'; -import { html } from 'lit-html'; +import { useCallback, useEffect, useMemo, useState } from 'haunted'; +import { html, nothing } from 'lit-html'; import { download } from '../pdf'; import { popout, hasWindow } from '../popout'; import { print } from '../print'; +import { guard } from 'lit-html/directives/guard.js'; +import { until } from 'lit-html/directives/until.js'; +import { invoke } from '@neovici/cosmoz-utils/function'; +import { memoize } from '@neovici/cosmoz-utils/memoize'; const onImageError = (e) => { if (!e.currentTarget.parentElement) { @@ -18,21 +24,32 @@ const onImageError = (e) => { e.currentTarget.setAttribute('hidden', true); }, onStatusChanged = (ev) => ev.detail.value === 'error' && onImageError(ev), - renderImage = ({ showZoom, image, isZoomed, _onZoomChanged }) => - showZoom - ? html`` - : html``, + renderImage = ({ src$, showZoom, isZoomed, _onZoomChanged }) => { + const src = guard(src$, () => until(src$)); + + return [ + showZoom + ? html`` + : html``, + guard(src$, () => + until( + src$.then(() => nothing), + html``, + ), + ), + ]; + }, render = (opts) => html`