@internetarchive/elements 0.2.14-webdev-8969.0 → 0.2.14-webdev-9022.0

package/dist/src/elements/ia-image-viewer/ia-image-viewer.js

@@ -0,0 +1,533 @@
+import { __decorate } from "tslib";
+import { css, html, LitElement, nothing, } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { keyed } from 'lit/directives/keyed.js';
+import { msg, str } from '@lit/localize';
+import themeStyles from '../../themes/theme-styles.js';
+import { prefersReducedMotion } from '../../util/prefers-reduced-motion.js';
+import { ImageViewerGestures } from './image-viewer-gestures.js';
+import './ia-imgview-slide.js';
+import './ia-imgview-controls.js';
+/**
+ * A swipeable image carousel.
+ *
+ * Shows one image at a time from a list, with previous/next buttons, a
+ * counter, keyboard arrows, horizontal wheel scrolling and touch swipes.
+ * Clicking an image opens it in a new tab.
+ *
+ * The viewer holds no opinion about where the images came from: it takes a
+ * plain list of names and URLs, and reports the image it lands on through
+ * `imageChanged` so a host can mirror that into its own URL or analytics.
+ *
+ * @fires imageChanged - The viewer settled on a new image.
+ * @fires imageLoaded - An image the viewer showed finished loading.
+ * @fires imageLoadFailed - An image the viewer showed could not be loaded.
+ *   Fires once per image until it loads successfully or the set changes.
+ * @fires imageActivated - An image was clicked. Cancelable: preventing it
+ *   stops the default of opening the image in a new tab.
+ */
+let IAImageViewer = class IAImageViewer extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.images = [];
+        /** Read by the gesture controller to navigate relative to the current image. */
+        this.currentIndex = 0;
+        this.animating = false;
+        /**
+         * Incremented when an animation is interrupted to force the track element to
+         * be recreated via the `keyed()` directive, which guarantees the CSS
+         * animation restarts even if the direction is the same.
+         */
+        this.slideGeneration = 0;
+        /** Which edge just wrapped, if any. Drives the glow indicator. */
+        this.wrapEdge = null;
+        /**
+         * Images already reported as failed, so a broken image isn't counted again
+         * every time the viewer passes over it. Navigating back re-fires `error` on
+         * the recreated element, and the neighbouring slides staged during an
+         * animation or a drag load the same image too, so without this a single
+         * broken derivative reports several times a session.
+         *
+         * Cleared when the image set changes, which is the point a name stops
+         * standing for the same file.
+         */
+        this.reportedFailures = new Set();
+        this.slideTarget = null;
+        this.slideDirection = null;
+        this.gestures = new ImageViewerGestures(this);
+    }
+    get imageCount() {
+        return this.images.length;
+    }
+    /** The image currently on screen, if there is one. */
+    get currentImage() {
+        return this.images[this.currentIndex];
+    }
+    willUpdate(changed) {
+        if (changed.has('images') || changed.has('currentImageName')) {
+            const previous = changed.get('images');
+            this.currentIndex = this.indexToShow(changed, previous);
+            this.animating = false;
+            this.slideGeneration = 0;
+            this.slideTarget = null;
+            this.slideDirection = null;
+            this.wrapEdge = null;
+            this.reportedFailures.clear();
+            this.preloadAdjacentImages();
+        }
+    }
+    /**
+     * Where to land when the images or the requested name change.
+     *
+     * A new `currentImageName` is the host asking for a particular image, so it
+     * wins. A new `images` array on its own isn't: a host that builds its list
+     * in a getter hands over a fresh array on every render, which says nothing
+     * about the images having changed. So the viewer holds its place by name and
+     * only goes back to the start when the image it was showing is really gone.
+     */
+    indexToShow(changed, previousImages) {
+        if (changed.has('currentImageName') && this.currentImageName) {
+            const requested = this.images.findIndex((image) => image.name === this.currentImageName);
+            if (requested >= 0)
+                return requested;
+        }
+        const showing = previousImages?.[this.currentIndex]?.name;
+        if (showing) {
+            const stillThere = this.images.findIndex((image) => image.name === showing);
+            if (stillThere >= 0)
+                return stillThere;
+        }
+        const named = this.currentImageName
+            ? this.images.findIndex((image) => image.name === this.currentImageName)
+            : -1;
+        return named >= 0 ? named : 0;
+    }
+    render() {
+        if (this.images.length === 0)
+            return nothing;
+        const { dragging } = this.gestures;
+        const current = this.images[this.currentIndex];
+        const showControls = this.images.length > 1;
+        const trackClasses = {
+            'slide-track': true,
+            'sliding-next': this.animating && !dragging && this.slideDirection === 'next',
+            'sliding-prev': this.animating && !dragging && this.slideDirection === 'prev',
+            dragging,
+        };
+        const prevIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
+        const nextIndex = (this.currentIndex + 1) % this.images.length;
+        const slideTarget = this.animating && !dragging && this.slideTarget !== null
+            ? this.images[this.slideTarget]
+            : null;
+        const prevImage = dragging ? this.images[prevIndex] : slideTarget;
+        const nextImage = dragging ? this.images[nextIndex] : slideTarget;
+        const showPrev = dragging || (slideTarget !== null && this.slideDirection === 'prev');
+        const showNext = dragging || (slideTarget !== null && this.slideDirection === 'next');
+        const displayIndex = this.animating && this.slideTarget !== null
+            ? this.slideTarget
+            : this.currentIndex;
+        return html `
+      <div class="viewer">
+        <div class="image-area">
+          ${this.wrapEdge
+            ? html `<div
+                class="wrap-glow ${this.wrapEdge === 'start'
+                ? 'glow-start'
+                : 'glow-end'}"
+                @animationend=${this.onWrapGlowEnd}
+              ></div>`
+            : nothing}
+          ${keyed(this.slideGeneration, html `<div
+              class=${classMap(trackClasses)}
+              @animationend=${this.onSlideEnd}
+              @imageLoaded=${this.onImageLoaded}
+              @imageFailed=${this.onImageFailed}
+              @imageActivated=${this.onImageActivated}
+            >
+              ${showPrev && prevImage ? this.slideTemplate(prevImage) : nothing}
+              ${this.slideTemplate(current)}
+              ${showNext && nextImage ? this.slideTemplate(nextImage) : nothing}
+            </div>`)}
+        </div>
+        ${showControls
+            ? html `
+              <ia-imgview-controls
+                .currentIndex=${displayIndex}
+                .totalImages=${this.images.length}
+                @showPrevious=${this.showPrevious}
+                @showNext=${this.showNext}
+              ></ia-imgview-controls>
+            `
+            : nothing}
+        ${this.announcementTemplate}
+      </div>
+    `;
+    }
+    slideTemplate(image) {
+        return html `<ia-imgview-slide .image=${image}></ia-imgview-slide>`;
+    }
+    /**
+     * Announces the image to a screen reader, which otherwise gets nothing when
+     * the counter and the picture change under it.
+     */
+    get announcementTemplate() {
+        const current = this.images[this.currentIndex];
+        const position = msg(str `Image ${this.currentIndex + 1} of ${this.images.length}`);
+        const label = current?.title ?? current?.name;
+        return html `
+      <div class="sr-only" role="status" aria-live="polite" aria-atomic="true">
+        ${label ? `${position}: ${label}` : position}
+      </div>
+    `;
+    }
+    /**
+     * Passes a slide's load result on to the host, which is where reporting
+     * belongs. The slide's own events stop at this shadow root, so they're
+     * re-dispatched rather than allowed to escape.
+     */
+    onImageLoaded(e) {
+        // A load that succeeds clears the failure, so an image that breaks again
+        // later is reported again rather than swallowed as a repeat.
+        this.reportedFailures.delete(e.detail.image.name);
+        this.dispatchEvent(new CustomEvent('imageLoaded', { detail: { image: e.detail.image } }));
+    }
+    onImageFailed(e) {
+        const { image } = e.detail;
+        if (this.reportedFailures.has(image.name))
+            return;
+        this.reportedFailures.add(image.name);
+        this.dispatchEvent(new CustomEvent('imageLoadFailed', { detail: { image } }));
+    }
+    /**
+     * Decides whether a click on a slide opens the image.
+     *
+     * Two things can stop it: the click is the tail end of a swipe, or the host
+     * cancels the event to show the image its own way. The slide's event doesn't
+     * cross this shadow root, so it's re-raised here for the host to see, and a
+     * veto is passed back down to cancel the click.
+     */
+    onImageActivated(e) {
+        if (this.gestures.consumeSwipeTap()) {
+            e.preventDefault();
+            return;
+        }
+        const allowed = this.dispatchEvent(new CustomEvent('imageActivated', {
+            detail: { image: e.detail.image },
+            cancelable: true,
+        }));
+        if (!allowed)
+            e.preventDefault();
+    }
+    /**
+     * Inserts the neighbouring slides around the current one so the touch target
+     * element stays in the DOM (avoiding touchcancel). These aren't rendered
+     * from the template, so they're marked for the gesture controller to clean
+     * up. The dragging class shifts the track to centre on the middle slide.
+     */
+    insertDragSlides() {
+        const track = this.slideTrack;
+        if (!track)
+            return;
+        const prevIdx = (this.currentIndex - 1 + this.images.length) % this.images.length;
+        const nextIdx = (this.currentIndex + 1) % this.images.length;
+        track.insertBefore(this.createDragSlide(this.images[prevIdx]), track.firstChild);
+        track.appendChild(this.createDragSlide(this.images[nextIdx]));
+        track.classList.add('dragging');
+    }
+    removeDragSlides() {
+        const track = this.slideTrack;
+        if (!track)
+            return;
+        track.querySelectorAll('[data-drag-slide]').forEach((el) => el.remove());
+        track.classList.remove('dragging');
+    }
+    createDragSlide(image) {
+        const slide = document.createElement('ia-imgview-slide');
+        slide.image = image;
+        slide.dataset.dragSlide = '';
+        return slide;
+    }
+    showNext() {
+        this.settleIfAnimating();
+        this.moveTo((this.currentIndex + 1) % this.images.length, 'next');
+    }
+    showPrevious() {
+        this.settleIfAnimating();
+        this.moveTo((this.currentIndex - 1 + this.images.length) % this.images.length, 'prev');
+    }
+    /**
+     * Starts the move to another image. With reduced motion there's no animation
+     * to wait on, so the move lands immediately: nothing would fire the
+     * `animationend` that otherwise commits it.
+     */
+    moveTo(target, direction) {
+        const wraps = direction === 'next'
+            ? this.currentIndex === this.images.length - 1
+            : this.currentIndex === 0;
+        this.preloadAroundIndex(target);
+        if (prefersReducedMotion()) {
+            this.currentIndex = target;
+            this.settleAtCurrentIndex();
+            return;
+        }
+        this.slideTarget = target;
+        this.slideDirection = direction;
+        this.animating = true;
+        this.wrapEdge = wraps ? (direction === 'next' ? 'end' : 'start') : null;
+    }
+    /**
+     * Moves to the image a completed drag landed on. The drag has already
+     * animated the track there, so this only updates state.
+     */
+    commitDrag(direction) {
+        const wraps = direction === 'next'
+            ? this.currentIndex === this.images.length - 1
+            : this.currentIndex === 0;
+        const step = direction === 'next' ? 1 : -1;
+        this.currentIndex =
+            (this.currentIndex + step + this.images.length) % this.images.length;
+        if (wraps && !prefersReducedMotion()) {
+            this.wrapEdge = direction === 'next' ? 'end' : 'start';
+        }
+        this.emitImageChanged();
+    }
+    /**
+     * If an animation is in progress, immediately commit its target so the next
+     * animation starts from the right position. Bumps the generation key to
+     * force the track element to be recreated, which restarts the CSS animation.
+     */
+    settleIfAnimating() {
+        if (!this.animating || this.slideTarget === null)
+            return;
+        this.currentIndex = this.slideTarget;
+        this.slideGeneration++;
+    }
+    onWrapGlowEnd() {
+        this.wrapEdge = null;
+    }
+    onSlideEnd() {
+        if (this.slideTarget === null)
+            return;
+        this.currentIndex = this.slideTarget;
+        this.settleAtCurrentIndex();
+    }
+    /** Finishes a move, however it was driven. */
+    settleAtCurrentIndex() {
+        this.slideTarget = null;
+        this.slideDirection = null;
+        this.animating = false;
+        this.gestures.animationSettled();
+        this.emitImageChanged();
+        this.preloadAdjacentImages();
+    }
+    emitImageChanged() {
+        const image = this.images[this.currentIndex];
+        if (!image)
+            return;
+        this.dispatchEvent(new CustomEvent('imageChanged', {
+            detail: { image, index: this.currentIndex },
+        }));
+    }
+    /**
+     * Preloads the next and previous images around `currentIndex` so the first
+     * navigation feels instant.
+     */
+    preloadAdjacentImages() {
+        this.preloadAroundIndex(this.currentIndex);
+    }
+    /**
+     * Preloads images adjacent to the given index. Called both at rest (around
+     * `currentIndex`) and at the start of a move (around the target) so rapid
+     * navigation stays ahead of the browser cache.
+     *
+     * A preload that fails is deliberately not reported. These requests are
+     * speculative and the viewer may never show them, so counting them would
+     * inflate the failure rate with images nobody looked at. Navigating to a
+     * broken image renders a real slide, whose `error` reports it then.
+     */
+    preloadAroundIndex(index) {
+        if (this.images.length <= 1)
+            return;
+        const next = (index + 1) % this.images.length;
+        const prev = (index - 1 + this.images.length) % this.images.length;
+        for (const idx of [next, prev]) {
+            const img = new Image();
+            img.src = this.images[idx].url;
+        }
+    }
+    static get styles() {
+        return [
+            themeStyles,
+            css `
+        :host {
+          --image-viewer-slide-duration--: var(
+            --image-viewer-slide-duration,
+            500ms
+          );
+          --image-viewer-glow-color--: var(
+            --image-viewer-glow-color,
+            rgba(255, 255, 255, 0.25)
+          );
+          /*
+           * The breakpoint the controls query against. Named so the query in
+           * ia-imgview-controls resolves to this host rather than to whatever
+           * container the consumer happens to have further up.
+           */
+          container: image-viewer / inline-size;
+
+          /*
+           * Size and placement are the host's business, set with ordinary CSS
+           * on the element. These are only defaults for a host that sets
+           * neither; a rule in the outer tree beats them.
+           */
+          display: block;
+          height: 100%;
+          margin: 0 auto;
+        }
+
+        .viewer {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .image-area {
+          position: relative;
+          flex: 1;
+          min-height: 0;
+          width: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          overflow: hidden;
+          touch-action: pan-y pinch-zoom;
+        }
+
+        .wrap-glow {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          width: 100px;
+          pointer-events: none;
+          z-index: 2;
+          animation: glow-fade 700ms ease-out both;
+        }
+
+        .glow-start {
+          left: 0;
+          background: linear-gradient(
+            to right,
+            var(--image-viewer-glow-color--),
+            transparent
+          );
+        }
+
+        .glow-end {
+          right: 0;
+          background: linear-gradient(
+            to left,
+            var(--image-viewer-glow-color--),
+            transparent
+          );
+        }
+
+        @keyframes glow-fade {
+          0% {
+            opacity: 0;
+          }
+          20% {
+            opacity: 1;
+          }
+          100% {
+            opacity: 0;
+          }
+        }
+
+        .slide-track {
+          display: flex;
+          width: 100%;
+          height: 100%;
+          flex-shrink: 0;
+        }
+
+        @keyframes slide-next {
+          from {
+            transform: translateX(0);
+          }
+          to {
+            transform: translateX(-100%);
+          }
+        }
+
+        @keyframes slide-prev {
+          from {
+            transform: translateX(-100%);
+          }
+          to {
+            transform: translateX(0);
+          }
+        }
+
+        .slide-track.dragging {
+          transform: translateX(-100%);
+        }
+
+        .slide-track.sliding-next {
+          animation: slide-next var(--image-viewer-slide-duration--) ease-in-out
+            both;
+        }
+
+        .slide-track.sliding-prev {
+          animation: slide-prev var(--image-viewer-slide-duration--) ease-in-out
+            both;
+        }
+
+        .sr-only {
+          position: absolute;
+          width: 1px;
+          height: 1px;
+          margin: -1px;
+          padding: 0;
+          border: 0;
+          overflow: hidden;
+          white-space: nowrap;
+          clip-path: inset(50%);
+        }
+      `,
+        ];
+    }
+};
+__decorate([
+    property({ type: Array })
+], IAImageViewer.prototype, "images", void 0);
+__decorate([
+    property({ type: String })
+], IAImageViewer.prototype, "currentImageName", void 0);
+__decorate([
+    query('.image-area')
+], IAImageViewer.prototype, "imageArea", void 0);
+__decorate([
+    query('.slide-track')
+], IAImageViewer.prototype, "slideTrack", void 0);
+__decorate([
+    state()
+], IAImageViewer.prototype, "currentIndex", void 0);
+__decorate([
+    state()
+], IAImageViewer.prototype, "animating", void 0);
+__decorate([
+    state()
+], IAImageViewer.prototype, "slideGeneration", void 0);
+__decorate([
+    state()
+], IAImageViewer.prototype, "wrapEdge", void 0);
+IAImageViewer = __decorate([
+    customElement('ia-image-viewer')
+], IAImageViewer);
+export { IAImageViewer };
+//# sourceMappingURL=ia-image-viewer.js.map

package/dist/src/elements/ia-image-viewer/ia-image-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-image-viewer.js","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-image-viewer.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  css,\n  type CSSResultGroup,\n  html,\n  LitElement,\n  nothing,\n  type PropertyValues,\n  type TemplateResult,\n} from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { keyed } from 'lit/directives/keyed.js';\nimport { msg, str } from '@lit/localize';\n\nimport themeStyles from '@src/themes/theme-styles';\nimport { prefersReducedMotion } from '@src/util/prefers-reduced-motion';\nimport { ImageViewerGestures } from './image-viewer-gestures';\nimport type { ImageViewerImage, SlideDirection, WrapEdge } from './models';\nimport type { IAImageViewerSlide } from './ia-imgview-slide';\nimport './ia-imgview-slide';\nimport './ia-imgview-controls';\n\n/** Detail carried by the load and failure events a slide reports. */\ntype SlideImageEvent = CustomEvent<{ image: ImageViewerImage }>;\n\n/**\n * A swipeable image carousel.\n *\n * Shows one image at a time from a list, with previous/next buttons, a\n * counter, keyboard arrows, horizontal wheel scrolling and touch swipes.\n * Clicking an image opens it in a new tab.\n *\n * The viewer holds no opinion about where the images came from: it takes a\n * plain list of names and URLs, and reports the image it lands on through\n * `imageChanged` so a host can mirror that into its own URL or analytics.\n *\n * @fires imageChanged - The viewer settled on a new image.\n * @fires imageLoaded - An image the viewer showed finished loading.\n * @fires imageLoadFailed - An image the viewer showed could not be loaded.\n *   Fires once per image until it loads successfully or the set changes.\n * @fires imageActivated - An image was clicked. Cancelable: preventing it\n *   stops the default of opening the image in a new tab.\n */\n@customElement('ia-image-viewer')\nexport class IAImageViewer extends LitElement {\n  @property({ type: Array }) images: ImageViewerImage[] = [];\n\n  /**\n   * Name of the image to show. Changing it jumps straight to that image\n   * without animating. An unknown name shows the first image.\n   */\n  @property({ type: String }) currentImageName?: string;\n\n  /** Read by the gesture controller, which tracks touches against it. */\n  @query('.image-area') imageArea?: HTMLElement;\n\n  /** Read by the gesture controller, which translates it during a drag. */\n  @query('.slide-track') slideTrack?: HTMLElement;\n\n  /** Read by the gesture controller to navigate relative to the current image. */\n  @state() currentIndex = 0;\n\n  @state() private animating = false;\n\n  /**\n   * Incremented when an animation is interrupted to force the track element to\n   * be recreated via the `keyed()` directive, which guarantees the CSS\n   * animation restarts even if the direction is the same.\n   */\n  @state() private slideGeneration = 0;\n\n  /** Which edge just wrapped, if any. Drives the glow indicator. */\n  @state() private wrapEdge: WrapEdge | null = null;\n\n  /**\n   * Images already reported as failed, so a broken image isn't counted again\n   * every time the viewer passes over it. Navigating back re-fires `error` on\n   * the recreated element, and the neighbouring slides staged during an\n   * animation or a drag load the same image too, so without this a single\n   * broken derivative reports several times a session.\n   *\n   * Cleared when the image set changes, which is the point a name stops\n   * standing for the same file.\n   */\n  private reportedFailures = new Set<string>();\n\n  private slideTarget: number | null = null;\n\n  private slideDirection: SlideDirection | null = null;\n\n  private gestures = new ImageViewerGestures(this);\n\n  get imageCount(): number {\n    return this.images.length;\n  }\n\n  /** The image currently on screen, if there is one. */\n  get currentImage(): ImageViewerImage | undefined {\n    return this.images[this.currentIndex];\n  }\n\n  protected willUpdate(changed: PropertyValues): void {\n    if (changed.has('images') || changed.has('currentImageName')) {\n      const previous = changed.get('images') as ImageViewerImage[] | undefined;\n      this.currentIndex = this.indexToShow(changed, previous);\n\n      this.animating = false;\n      this.slideGeneration = 0;\n      this.slideTarget = null;\n      this.slideDirection = null;\n      this.wrapEdge = null;\n      this.reportedFailures.clear();\n      this.preloadAdjacentImages();\n    }\n  }\n\n  /**\n   * Where to land when the images or the requested name change.\n   *\n   * A new `currentImageName` is the host asking for a particular image, so it\n   * wins. A new `images` array on its own isn't: a host that builds its list\n   * in a getter hands over a fresh array on every render, which says nothing\n   * about the images having changed. So the viewer holds its place by name and\n   * only goes back to the start when the image it was showing is really gone.\n   */\n  private indexToShow(\n    changed: PropertyValues,\n    previousImages: ImageViewerImage[] | undefined,\n  ): number {\n    if (changed.has('currentImageName') && this.currentImageName) {\n      const requested = this.images.findIndex(\n        (image) => image.name === this.currentImageName,\n      );\n      if (requested >= 0) return requested;\n    }\n\n    const showing = previousImages?.[this.currentIndex]?.name;\n    if (showing) {\n      const stillThere = this.images.findIndex(\n        (image) => image.name === showing,\n      );\n      if (stillThere >= 0) return stillThere;\n    }\n\n    const named = this.currentImageName\n      ? this.images.findIndex((image) => image.name === this.currentImageName)\n      : -1;\n    return named >= 0 ? named : 0;\n  }\n\n  render(): TemplateResult | typeof nothing {\n    if (this.images.length === 0) return nothing;\n\n    const { dragging } = this.gestures;\n    const current = this.images[this.currentIndex];\n    const showControls = this.images.length > 1;\n\n    const trackClasses = {\n      'slide-track': true,\n      'sliding-next':\n        this.animating && !dragging && this.slideDirection === 'next',\n      'sliding-prev':\n        this.animating && !dragging && this.slideDirection === 'prev',\n      dragging,\n    };\n\n    const prevIndex =\n      (this.currentIndex - 1 + this.images.length) % this.images.length;\n    const nextIndex = (this.currentIndex + 1) % this.images.length;\n\n    const slideTarget =\n      this.animating && !dragging && this.slideTarget !== null\n        ? this.images[this.slideTarget]\n        : null;\n    const prevImage = dragging ? this.images[prevIndex] : slideTarget;\n    const nextImage = dragging ? this.images[nextIndex] : slideTarget;\n    const showPrev =\n      dragging || (slideTarget !== null && this.slideDirection === 'prev');\n    const showNext =\n      dragging || (slideTarget !== null && this.slideDirection === 'next');\n\n    const displayIndex =\n      this.animating && this.slideTarget !== null\n        ? this.slideTarget\n        : this.currentIndex;\n\n    return html`\n      <div class=\"viewer\">\n        <div class=\"image-area\">\n          ${this.wrapEdge\n            ? html`<div\n                class=\"wrap-glow ${this.wrapEdge === 'start'\n                  ? 'glow-start'\n                  : 'glow-end'}\"\n                @animationend=${this.onWrapGlowEnd}\n              ></div>`\n            : nothing}\n          ${keyed(\n            this.slideGeneration,\n            html`<div\n              class=${classMap(trackClasses)}\n              @animationend=${this.onSlideEnd}\n              @imageLoaded=${this.onImageLoaded}\n              @imageFailed=${this.onImageFailed}\n              @imageActivated=${this.onImageActivated}\n            >\n              ${showPrev && prevImage ? this.slideTemplate(prevImage) : nothing}\n              ${this.slideTemplate(current)}\n              ${showNext && nextImage ? this.slideTemplate(nextImage) : nothing}\n            </div>`,\n          )}\n        </div>\n        ${showControls\n          ? html`\n              <ia-imgview-controls\n                .currentIndex=${displayIndex}\n                .totalImages=${this.images.length}\n                @showPrevious=${this.showPrevious}\n                @showNext=${this.showNext}\n              ></ia-imgview-controls>\n            `\n          : nothing}\n        ${this.announcementTemplate}\n      </div>\n    `;\n  }\n\n  private slideTemplate(image: ImageViewerImage): TemplateResult {\n    return html`<ia-imgview-slide .image=${image}></ia-imgview-slide>`;\n  }\n\n  /**\n   * Announces the image to a screen reader, which otherwise gets nothing when\n   * the counter and the picture change under it.\n   */\n  private get announcementTemplate(): TemplateResult {\n    const current = this.images[this.currentIndex];\n    const position = msg(\n      str`Image ${this.currentIndex + 1} of ${this.images.length}`,\n    );\n    const label = current?.title ?? current?.name;\n    return html`\n      <div class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n        ${label ? `${position}: ${label}` : position}\n      </div>\n    `;\n  }\n\n  /**\n   * Passes a slide's load result on to the host, which is where reporting\n   * belongs. The slide's own events stop at this shadow root, so they're\n   * re-dispatched rather than allowed to escape.\n   */\n  private onImageLoaded(e: SlideImageEvent): void {\n    // A load that succeeds clears the failure, so an image that breaks again\n    // later is reported again rather than swallowed as a repeat.\n    this.reportedFailures.delete(e.detail.image.name);\n    this.dispatchEvent(\n      new CustomEvent('imageLoaded', { detail: { image: e.detail.image } }),\n    );\n  }\n\n  private onImageFailed(e: SlideImageEvent): void {\n    const { image } = e.detail;\n    if (this.reportedFailures.has(image.name)) return;\n    this.reportedFailures.add(image.name);\n    this.dispatchEvent(\n      new CustomEvent('imageLoadFailed', { detail: { image } }),\n    );\n  }\n\n  /**\n   * Decides whether a click on a slide opens the image.\n   *\n   * Two things can stop it: the click is the tail end of a swipe, or the host\n   * cancels the event to show the image its own way. The slide's event doesn't\n   * cross this shadow root, so it's re-raised here for the host to see, and a\n   * veto is passed back down to cancel the click.\n   */\n  private onImageActivated(e: SlideImageEvent): void {\n    if (this.gestures.consumeSwipeTap()) {\n      e.preventDefault();\n      return;\n    }\n    const allowed = this.dispatchEvent(\n      new CustomEvent('imageActivated', {\n        detail: { image: e.detail.image },\n        cancelable: true,\n      }),\n    );\n    if (!allowed) e.preventDefault();\n  }\n\n  /**\n   * Inserts the neighbouring slides around the current one so the touch target\n   * element stays in the DOM (avoiding touchcancel). These aren't rendered\n   * from the template, so they're marked for the gesture controller to clean\n   * up. The dragging class shifts the track to centre on the middle slide.\n   */\n  insertDragSlides(): void {\n    const track = this.slideTrack;\n    if (!track) return;\n    const prevIdx =\n      (this.currentIndex - 1 + this.images.length) % this.images.length;\n    const nextIdx = (this.currentIndex + 1) % this.images.length;\n\n    track.insertBefore(\n      this.createDragSlide(this.images[prevIdx]),\n      track.firstChild,\n    );\n    track.appendChild(this.createDragSlide(this.images[nextIdx]));\n\n    track.classList.add('dragging');\n  }\n\n  removeDragSlides(): void {\n    const track = this.slideTrack;\n    if (!track) return;\n    track.querySelectorAll('[data-drag-slide]').forEach((el) => el.remove());\n    track.classList.remove('dragging');\n  }\n\n  private createDragSlide(image: ImageViewerImage): IAImageViewerSlide {\n    const slide = document.createElement(\n      'ia-imgview-slide',\n    ) as IAImageViewerSlide;\n    slide.image = image;\n    slide.dataset.dragSlide = '';\n    return slide;\n  }\n\n  showNext(): void {\n    this.settleIfAnimating();\n    this.moveTo((this.currentIndex + 1) % this.images.length, 'next');\n  }\n\n  showPrevious(): void {\n    this.settleIfAnimating();\n    this.moveTo(\n      (this.currentIndex - 1 + this.images.length) % this.images.length,\n      'prev',\n    );\n  }\n\n  /**\n   * Starts the move to another image. With reduced motion there's no animation\n   * to wait on, so the move lands immediately: nothing would fire the\n   * `animationend` that otherwise commits it.\n   */\n  private moveTo(target: number, direction: SlideDirection): void {\n    const wraps =\n      direction === 'next'\n        ? this.currentIndex === this.images.length - 1\n        : this.currentIndex === 0;\n    this.preloadAroundIndex(target);\n\n    if (prefersReducedMotion()) {\n      this.currentIndex = target;\n      this.settleAtCurrentIndex();\n      return;\n    }\n\n    this.slideTarget = target;\n    this.slideDirection = direction;\n    this.animating = true;\n    this.wrapEdge = wraps ? (direction === 'next' ? 'end' : 'start') : null;\n  }\n\n  /**\n   * Moves to the image a completed drag landed on. The drag has already\n   * animated the track there, so this only updates state.\n   */\n  commitDrag(direction: SlideDirection): void {\n    const wraps =\n      direction === 'next'\n        ? this.currentIndex === this.images.length - 1\n        : this.currentIndex === 0;\n    const step = direction === 'next' ? 1 : -1;\n    this.currentIndex =\n      (this.currentIndex + step + this.images.length) % this.images.length;\n    if (wraps && !prefersReducedMotion()) {\n      this.wrapEdge = direction === 'next' ? 'end' : 'start';\n    }\n    this.emitImageChanged();\n  }\n\n  /**\n   * If an animation is in progress, immediately commit its target so the next\n   * animation starts from the right position. Bumps the generation key to\n   * force the track element to be recreated, which restarts the CSS animation.\n   */\n  settleIfAnimating(): void {\n    if (!this.animating || this.slideTarget === null) return;\n    this.currentIndex = this.slideTarget;\n    this.slideGeneration++;\n  }\n\n  private onWrapGlowEnd(): void {\n    this.wrapEdge = null;\n  }\n\n  private onSlideEnd(): void {\n    if (this.slideTarget === null) return;\n    this.currentIndex = this.slideTarget;\n    this.settleAtCurrentIndex();\n  }\n\n  /** Finishes a move, however it was driven. */\n  private settleAtCurrentIndex(): void {\n    this.slideTarget = null;\n    this.slideDirection = null;\n    this.animating = false;\n    this.gestures.animationSettled();\n    this.emitImageChanged();\n    this.preloadAdjacentImages();\n  }\n\n  private emitImageChanged(): void {\n    const image = this.images[this.currentIndex];\n    if (!image) return;\n    this.dispatchEvent(\n      new CustomEvent('imageChanged', {\n        detail: { image, index: this.currentIndex },\n      }),\n    );\n  }\n\n  /**\n   * Preloads the next and previous images around `currentIndex` so the first\n   * navigation feels instant.\n   */\n  private preloadAdjacentImages(): void {\n    this.preloadAroundIndex(this.currentIndex);\n  }\n\n  /**\n   * Preloads images adjacent to the given index. Called both at rest (around\n   * `currentIndex`) and at the start of a move (around the target) so rapid\n   * navigation stays ahead of the browser cache.\n   *\n   * A preload that fails is deliberately not reported. These requests are\n   * speculative and the viewer may never show them, so counting them would\n   * inflate the failure rate with images nobody looked at. Navigating to a\n   * broken image renders a real slide, whose `error` reports it then.\n   */\n  preloadAroundIndex(index: number): void {\n    if (this.images.length <= 1) return;\n    const next = (index + 1) % this.images.length;\n    const prev = (index - 1 + this.images.length) % this.images.length;\n    for (const idx of [next, prev]) {\n      const img = new Image();\n      img.src = this.images[idx].url;\n    }\n  }\n\n  static get styles(): CSSResultGroup {\n    return [\n      themeStyles,\n      css`\n        :host {\n          --image-viewer-slide-duration--: var(\n            --image-viewer-slide-duration,\n            500ms\n          );\n          --image-viewer-glow-color--: var(\n            --image-viewer-glow-color,\n            rgba(255, 255, 255, 0.25)\n          );\n          /*\n           * The breakpoint the controls query against. Named so the query in\n           * ia-imgview-controls resolves to this host rather than to whatever\n           * container the consumer happens to have further up.\n           */\n          container: image-viewer / inline-size;\n\n          /*\n           * Size and placement are the host's business, set with ordinary CSS\n           * on the element. These are only defaults for a host that sets\n           * neither; a rule in the outer tree beats them.\n           */\n          display: block;\n          height: 100%;\n          margin: 0 auto;\n        }\n\n        .viewer {\n          position: relative;\n          width: 100%;\n          height: 100%;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n        }\n\n        .image-area {\n          position: relative;\n          flex: 1;\n          min-height: 0;\n          width: 100%;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          overflow: hidden;\n          touch-action: pan-y pinch-zoom;\n        }\n\n        .wrap-glow {\n          position: absolute;\n          top: 0;\n          bottom: 0;\n          width: 100px;\n          pointer-events: none;\n          z-index: 2;\n          animation: glow-fade 700ms ease-out both;\n        }\n\n        .glow-start {\n          left: 0;\n          background: linear-gradient(\n            to right,\n            var(--image-viewer-glow-color--),\n            transparent\n          );\n        }\n\n        .glow-end {\n          right: 0;\n          background: linear-gradient(\n            to left,\n            var(--image-viewer-glow-color--),\n            transparent\n          );\n        }\n\n        @keyframes glow-fade {\n          0% {\n            opacity: 0;\n          }\n          20% {\n            opacity: 1;\n          }\n          100% {\n            opacity: 0;\n          }\n        }\n\n        .slide-track {\n          display: flex;\n          width: 100%;\n          height: 100%;\n          flex-shrink: 0;\n        }\n\n        @keyframes slide-next {\n          from {\n            transform: translateX(0);\n          }\n          to {\n            transform: translateX(-100%);\n          }\n        }\n\n        @keyframes slide-prev {\n          from {\n            transform: translateX(-100%);\n          }\n          to {\n            transform: translateX(0);\n          }\n        }\n\n        .slide-track.dragging {\n          transform: translateX(-100%);\n        }\n\n        .slide-track.sliding-next {\n          animation: slide-next var(--image-viewer-slide-duration--) ease-in-out\n            both;\n        }\n\n        .slide-track.sliding-prev {\n          animation: slide-prev var(--image-viewer-slide-duration--) ease-in-out\n            both;\n        }\n\n        .sr-only {\n          position: absolute;\n          width: 1px;\n          height: 1px;\n          margin: -1px;\n          padding: 0;\n          border: 0;\n          overflow: hidden;\n          white-space: nowrap;\n          clip-path: inset(50%);\n        }\n      `,\n    ];\n  }\n}\n"]}

package/dist/src/elements/ia-image-viewer/ia-imgview-controls.d.ts

@@ -0,0 +1,22 @@
+import { type CSSResultGroup, LitElement, type TemplateResult } from 'lit';
+/**
+ * The image viewer's previous / next buttons and the "n / total" counter.
+ *
+ * Past the wide breakpoint the buttons position themselves over the image
+ * area, which lives in the viewer's shadow root. That works because an
+ * absolutely positioned element finds its containing block through the flat
+ * tree, so the viewer's frame is still the reference as long as this element's
+ * own host box stays unpositioned. The breakpoint queries the `image-viewer`
+ * container by name, so it tracks the viewer's width rather than whichever
+ * container a consumer happens to have further up the tree.
+ */
+export declare class IAImageViewerControls extends LitElement {
+    /** Zero-based index of the image being shown, for the counter. */
+    currentIndex: number;
+    totalImages: number;
+    render(): TemplateResult;
+    private onPrevious;
+    private onNext;
+    static get styles(): CSSResultGroup;
+}
+//# sourceMappingURL=ia-imgview-controls.d.ts.map

package/dist/src/elements/ia-image-viewer/ia-imgview-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ia-imgview-controls.d.ts","sourceRoot":"","sources":["../../../../src/elements/ia-image-viewer/ia-imgview-controls.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAMb;;;;;;;;;;GAUG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,kEAAkE;IACtC,YAAY,SAAK;IAEjB,WAAW,SAAK;IAE5C,MAAM,IAAI,cAAc;IAoBxB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,MAAM;IAId,MAAM,KAAK,MAAM,IAAI,cAAc,CAoFlC;CACF"}