Skip to content

Commit

Permalink
feat: async images
Browse files Browse the repository at this point in the history
  • Loading branch information
cristinecula committed Dec 11, 2023
1 parent 97ce01e commit 831dd82
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 20 deletions.
7 changes: 6 additions & 1 deletion cosmoz-image-viewer.style.js
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
}
`;
66 changes: 47 additions & 19 deletions lib/hooks/use-cosmoz-image-viewer.js
Original file line number Diff line number Diff line change
@@ -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) {
Expand All @@ -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`<haunted-pan-zoom
class="image-zoom"
.src=${image}
?disabled=${!isZoomed}
@zoom-changed=${_onZoomChanged}
@status-changed=${onStatusChanged}
></haunted-pan-zoom>`
: html`<img
class="image"
.src=${image}
style="width:100%"
@error=${onImageError}
/>`,
renderImage = ({ src$, showZoom, isZoomed, _onZoomChanged }) => {
const src = guard(src$, () => until(src$));

return [
showZoom
? html`<haunted-pan-zoom
class="image-zoom"
.src=${src}
?disabled=${!isZoomed}
@zoom-changed=${_onZoomChanged}
@status-changed=${onStatusChanged}
></haunted-pan-zoom>`
: html`<img
class="image"
.src=${src}
style="width:100%"
@error=${onImageError}
/>`,
guard(src$, () =>
until(
src$.then(() => nothing),
html`<cz-spinner></cz-spinner>`,
),
),
];
},
render = (opts) =>
html`<div>
<div hidden class="error">
Expand All @@ -52,11 +69,20 @@ const onImageError = (e) => {
} = host,
[isZoomed, setIsZoomed] = useState(false),
_onZoomChanged = (ev) => setIsZoomed(ev.detail.value > 1),
{ slide, next, prev, goto, index } = useSlideList(images, {
_invoke = useMemo(
() => memoize((image) => Promise.resolve(invoke(image))),
[],
),
{ slide, next, prev, goto, index, first, last } = useSlideList(images, {
loop,
initial: images[host.currentImageIndex],
render: (image) =>
render({ image, showZoom, isZoomed, _onZoomChanged }),
render({
src$: _invoke(image),
showZoom,
isZoomed,
_onZoomChanged,
}),
}),
[isFullscreen, setIsFullscreen] = useState(false),
openFullscreen = () => setIsFullscreen(true),
Expand Down Expand Up @@ -97,6 +123,8 @@ const onImageError = (e) => {
currentSlide: slide,
nextImage: next,
previousImage: prev,
first,
last,
total: images.length,
currentImageIndex: index,
selectedImageNumber: index + 1,
Expand Down

0 comments on commit 831dd82

Please sign in to comment.