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..352e6a2 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,13 @@ button.nav:active { cosmoz-slider { min-height: 150px; - // overflow-y: auto !important; + 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 11bb835..eb787ef 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`