vistaview 1.0.3 → 2.0.0

package/main/dist/lib/vista-box.js

@@ -0,0 +1,466 @@
+import { getFittedSize } from './utils/get-fitted-size';
+import { VistaHiresTransition } from './vista-hires-transition';
+export class VistaBox {
+    state;
+    parsedSrcSet = undefined;
+    isReady = false;
+    isThrowing = false;
+    thumb = null;
+    pos;
+    index;
+    config;
+    origin = undefined;
+    initH = 0;
+    initW = 0;
+    fullH = 0;
+    fullW = 0;
+    maxW = 0;
+    minW = 0;
+    defaultWH = 200;
+    isZoomedIn = false;
+    isCancelled = false;
+    isLoadedResolved = null;
+    isLoadedRejected = null;
+    isLoaded = new Promise((res, rej) => {
+        this.isLoadedResolved = res;
+        this.isLoadedRejected = rej;
+    });
+    replacement = null;
+    originalParent = null;
+    originalNextSibling = null;
+    originalStyle = '';
+    thumbImage = null;
+    originRect = {
+        width: this.defaultWH,
+        height: this.defaultWH,
+        top: 0,
+        left: 0,
+    };
+    fittedSize = null;
+    maxZoomLevel;
+    vistaView;
+    transitionState = null;
+    transitionShouldWait = () => false;
+    initPointerCenter = { x: 0, y: 0 };
+    onScale;
+    constructor(par) {
+        this.state = this.createState();
+        this.pos = par.pos;
+        this.index = par.index;
+        this.config = par.elm.config;
+        this.parsedSrcSet = par.elm.parsedSrcSet;
+        this.origin = par.elm.origin;
+        this.maxZoomLevel = par.maxZoomLevel;
+        this.vistaView = par.vistaView;
+        this.onScale = par.onScale;
+        if (par.transitionState) {
+            this.transitionState = par.transitionState;
+        }
+        if (par.transitionShouldWait) {
+            this.transitionShouldWait = par.transitionShouldWait;
+        }
+        // set initial center`
+        this.initPointerCenter = {
+            x: window.innerWidth / 2,
+            y: window.innerHeight / 2,
+        };
+        // set thumbnail
+        const thumb = this.pos === 0 ? this.origin?.image : null;
+        this.originalParent = thumb?.parentElement || null;
+        this.originalNextSibling = thumb?.nextSibling || null;
+        this.originRect = (this.origin?.anchor || thumb)?.getBoundingClientRect() || {
+            width: this.defaultWH,
+            height: this.defaultWH,
+            top: 0,
+            left: 0,
+        };
+        // setup thumb styling
+        if (thumb && this.originalParent) {
+            this.originalStyle = thumb.style.cssText;
+            this.thumbImage = thumb;
+            const replacement = thumb.cloneNode(true);
+            this.originalParent.insertBefore(replacement, thumb);
+            this.replacement = replacement;
+            this.thumb = document.createElement('div');
+            this.thumb.classList.add('vvw-img-lo');
+            const { width, height } = this.thumbImage
+                ? getFittedSize(this.thumbImage)
+                : { width: 0, height: 0 };
+            this.fittedSize = { width, height };
+            this.thumb.appendChild(thumb);
+            thumb.style.width = '100%';
+            thumb.style.height = '100%';
+            thumb.style.objectFit = this.origin.objectFit;
+        }
+    }
+    createState() {
+        const self = this;
+        return {
+            _t: this,
+            _width: 0,
+            _height: 0,
+            _transform: { x: 0, y: 0, scale: 1 },
+            _translate: { x: 0, y: 0 },
+            _lessThanMinWidth: false,
+            get width() {
+                return this._width;
+            },
+            set width(value) {
+                this._width = value;
+                self.onWidthChange(value);
+            },
+            get height() {
+                return this._height;
+            },
+            set height(value) {
+                this._height = value;
+                self.onHeightChange(value);
+            },
+            get transform() {
+                return this._transform;
+            },
+            set transform(value) {
+                this._transform = value;
+                self.onTransformChange(value);
+            },
+            get translate() {
+                return this._translate;
+            },
+            set translate(value) {
+                this._translate = value;
+                self.onTranslateChange(value);
+            },
+            get lessThanMinWidth() {
+                return this._lessThanMinWidth;
+            },
+            set lessThanMinWidth(value) {
+                this._lessThanMinWidth = value;
+                self.onLessThanMinWidthChange(value);
+            },
+        };
+    }
+    onLessThanMinWidthChange(value) {
+        if (value) {
+            this.element.style.opacity = `0.5`;
+        }
+        else {
+            this.element.style.opacity = ``;
+        }
+    }
+    onTranslateChange(value) {
+        this.element.style.translate = `calc(-50% + ${value.x}px) calc(-50% + ${value.y}px)`;
+    }
+    onTransformChange(value) {
+        const transform = `translate3d(${value.x}px, ${value.y}px, 0px) scale3d(${value.scale}, ${value.scale}, 1)`;
+        this.element.style.transform = transform;
+    }
+    onWidthChange(value) {
+        this.element.style.width = `${value}px`;
+    }
+    onHeightChange(value) {
+        this.element.style.height = `${value}px`;
+    }
+    onImageReady() { }
+    animateZoom(_scaleFactor, _center) { }
+    scaleMove(_scaleFactor, _center, _animate) { }
+    momentumThrow(_par) {
+        return () => { };
+    }
+    async init() {
+        await this.isLoaded;
+        const img = this.element;
+        if (this.transitionState &&
+            this.transitionState.current.width &&
+            this.transitionState.current.height) {
+            this.state.width = this.transitionState.current.width;
+            this.state.height = this.transitionState.current.height;
+        }
+        else if (!img.classList.contains('vvw--loaded')) {
+            this.state.width = this.initW;
+            this.state.height = this.initH;
+        }
+        const animateIn = () => {
+            if (this.isCancelled)
+                return;
+            VistaHiresTransition.start({
+                vistaImage: this,
+                target: {
+                    width: this.fullW,
+                    height: this.fullH,
+                },
+                onComplete: () => {
+                    if (this.isCancelled)
+                        return;
+                    this.isReady = true;
+                    img.classList.add('vvw--ready');
+                    this.onImageReady();
+                },
+                shouldWait: this.transitionShouldWait,
+            });
+        };
+        if (this.pos < -1 || this.pos > 1) {
+            // dont animate if the image will never be in view
+            this.state.width = this.fullW;
+            this.state.height = this.fullH;
+            img.classList.add('vvw--loaded');
+            img.classList.add('vvw--ready');
+            this.isReady = true;
+        }
+        else {
+            if (img.classList.contains('vvw--loaded')) {
+                if (!img.classList.contains('vvw--ready')) {
+                    animateIn();
+                }
+                else {
+                    this.isReady = true;
+                    this.onImageReady();
+                }
+            }
+            else {
+                img.classList.add('vvw--loaded');
+                // requestAnimationFrame(() => { animateIn(); });
+                // i found settimeout looks better, than requestAnimationFrame
+                setTimeout(() => {
+                    // return to prevent scaled image on rapid slide
+                    if (this.isCancelled)
+                        return;
+                    animateIn();
+                }, 333);
+            }
+        }
+    }
+    getFullSizeDim() {
+        // get thumbnail size
+        const { width, height } = this.thumb.getBoundingClientRect();
+        // calculate full size based on aspect ratio
+        const thumbAspect = width / height;
+        let fullWidth = window.innerWidth;
+        let fullHeight = window.innerHeight;
+        if (thumbAspect > window.innerWidth / window.innerHeight) {
+            // wider than screen
+            fullHeight = fullWidth / thumbAspect;
+        }
+        else {
+            // taller than screen
+            fullWidth = fullHeight * thumbAspect;
+        }
+        return { width: fullWidth, height: fullHeight };
+    }
+    setSizes(par = {}) {
+        const { stableSize = true, initDimension } = par;
+        if (!this.origin)
+            return;
+        const thumb = this.thumb;
+        if (!initDimension) {
+            this.originRect = (this.origin?.anchor || this.replacement)?.getBoundingClientRect() || {
+                width: this.defaultWH,
+                height: this.defaultWH,
+                top: 0,
+                left: 0,
+            };
+        }
+        let dim = this.originRect;
+        if (thumb) {
+            const ts = thumb.style;
+            ts.width = dim.width + 'px';
+            ts.height = dim.height + 'px';
+            ts.top = '50%';
+            ts.left = '50%';
+            ts.translate = '-50% -50%';
+            ts.position = 'fixed';
+            ts.objectFit = this.origin.objectFit;
+            ts.borderRadius = this.origin.borderRadius;
+            const translateLeft = Math.min(Math.max(dim.left, -dim.width), window.innerWidth + dim.width) -
+                window.innerWidth / 2 +
+                dim.width / 2;
+            const translateTop = Math.min(Math.max(dim.top, -dim.height), window.innerHeight + dim.height) -
+                window.innerHeight / 2 +
+                dim.height / 2;
+            ts.setProperty('--vvw-init-radius', ts.borderRadius);
+            ts.setProperty('--vvw-pulse-radius', `calc(1.3 * ${ts.borderRadius})`);
+            ts.setProperty('--vvw-init-x', `${translateLeft}px`);
+            ts.setProperty('--vvw-init-y', `${translateTop}px`);
+            if (initDimension) {
+                ts.setProperty('--vvw-current-x', `${translateLeft}px`);
+                ts.setProperty('--vvw-current-y', `${translateTop}px`);
+            }
+        }
+        if (!initDimension) {
+            // recaluculate fitted size
+            const { width, height } = this.thumbImage
+                ? getFittedSize(this.thumbImage)
+                : { width: 0, height: 0 };
+            this.fittedSize = { width, height };
+        }
+        // update hires data
+        const img = this.element;
+        this.initW = Math.min(this.fittedSize?.width ?? 0, dim.width);
+        this.initH = Math.min(this.fittedSize?.height ?? 0, dim.height);
+        img.style.setProperty('--vvw-init-w', this.initW + 'px');
+        img.style.setProperty('--vvw-init-h', this.initH + 'px');
+        img.style.setProperty('--vvw-init-radius', this.origin.borderRadius);
+        img.style.objectFit = 'cover';
+        if (!initDimension) {
+            // setting initDimension to true will prevent this from happening,
+            // e.g., when called from constructor, sizes will not be set here
+            // update full size in case of screen-size/orientation change
+            if (this.isReady && !this.isCancelled) {
+                const { width: fullWidth, height: fullHeight } = this.getFullSizeDim();
+                this.fullH = fullHeight;
+                this.fullW = fullWidth;
+                this.minW = this.fullW * 0.5;
+            }
+            // when not zoomed in, reset to initial size
+            if (!this.isZoomedIn && stableSize) {
+                this.normalize();
+            }
+        }
+    }
+    normalize() {
+        this.state.transform = { x: 0, y: 0, scale: 1 };
+        this.state.translate = {
+            x: 0,
+            y: 0,
+        };
+        this.state.width = this.fullW;
+        this.state.height = this.fullH;
+        this.isZoomedIn = false;
+    }
+    getFromParsedSrcSet(targetWidth) {
+        if (!this.parsedSrcSet || this.parsedSrcSet.length === 0) {
+            return null;
+        }
+        // Account for device pixel ratio (DPI) for high-resolution displays
+        const targetWidthWithDPR = targetWidth * (window.devicePixelRatio || 1);
+        // find the closest width that is greater than or equal to targetWidth
+        // assuming the items is sorted by width ascending
+        let selected = this.parsedSrcSet[this.parsedSrcSet.length - 1];
+        for (const item of this.parsedSrcSet) {
+            if (item.width >= targetWidthWithDPR) {
+                selected = item;
+                break;
+            }
+        }
+        return selected.src;
+    }
+    prepareClose() {
+        VistaHiresTransition.stop(this);
+        // finalize position
+        this.setFinalTransform();
+    }
+    cancelPendingLoad() {
+        this.isCancelled = true;
+        this.element?.classList.add('vvw--load-cancelled');
+    }
+    // Used by: VistaImageEvent
+    setInitialCenter(center) {
+        this.initPointerCenter = center;
+    }
+    destroy() {
+        // place image on it's place
+        if (this.originalParent && this.thumbImage) {
+            this.thumbImage.style.cssText = this.originalStyle;
+            if (this.originalNextSibling) {
+                this.originalParent.insertBefore(this.thumbImage, this.originalNextSibling);
+            }
+            else {
+                this.originalParent.appendChild(this.thumbImage);
+            }
+        }
+        this.originalParent = null;
+        this.originalNextSibling = null;
+        this.originalStyle = '';
+        this.thumbImage = null;
+        if (this.replacement) {
+            this.replacement.remove();
+            this.replacement = null;
+        }
+        // remove images from dom
+        this.thumb?.remove();
+        this.element?.remove();
+        // clean up references
+        this.thumb = null;
+        this.origin = undefined;
+        this.config = { src: '', alt: '' };
+    }
+    cloneStyleFrom(img, state) {
+        if (!img?.element)
+            return;
+        if (state) {
+            this.transitionState = state || null;
+        }
+        if (img.element.classList.contains('vvw--loaded')) {
+            this.element.classList.add('vvw--loaded');
+            this.state.width = img.state.width;
+            this.state.height = img.state.height;
+        }
+        if (img.element.classList.contains('vvw--ready')) {
+            this.element.classList.add('vvw--ready');
+        }
+    }
+    toObject() {
+        return structuredClone({
+            config: {
+                src: this.config.src,
+                alt: this.config.alt,
+                srcSet: this.config.srcSet,
+            },
+            origin: this.origin
+                ? {
+                    src: this.origin.src,
+                    srcSet: this.origin.srcSet,
+                    borderRadius: this.origin.borderRadius,
+                    objectFit: this.origin.objectFit,
+                }
+                : null,
+            parsedSrcSet: this.parsedSrcSet,
+            element: 'src' in this.element ? this.element.src : this.element.toString(),
+            thumb: undefined,
+            index: this.index,
+            pos: this.pos,
+            state: {
+                width: this.state._width,
+                height: this.state._height,
+                transform: this.state._transform,
+                translate: this.state._translate,
+            },
+        });
+    }
+    // Used by: VistaImageEvent
+    setFinalTransform(par = {}) {
+        const { propagateEvent = true } = par;
+        if (!this.isReady)
+            return;
+        // finalize current transform into translate and size
+        this.state.translate.x += this.state.transform.x;
+        this.state.translate.y += this.state.transform.y;
+        this.state.width *= this.state.transform.scale;
+        this.state.height *= this.state.transform.scale;
+        // limits
+        if (Math.abs(this.state.width - this.fullW) < 1) {
+            this.state.width = this.fullW;
+            this.state.height = this.fullH;
+        }
+        if (Math.abs(this.state.translate.x) < 1) {
+            this.state.translate.x = 0;
+        }
+        if (Math.abs(this.state.translate.y) < 1) {
+            this.state.translate.y = 0;
+        }
+        // trigger updates
+        this.state.translate = { ...this.state.translate };
+        this.state.transform = { x: 0, y: 0, scale: 1 };
+        if (propagateEvent) {
+            const obj = this.toObject();
+            this.vistaView.options.onContentChange &&
+                this.vistaView.options.onContentChange(obj, this.vistaView);
+            this.vistaView.state.extensions.forEach((ext) => {
+                ext.onContentChange && ext.onContentChange(obj, this.vistaView);
+            });
+        }
+        return {
+            close: true,
+            cancel: () => { },
+        };
+    }
+}

package/{dist → main/dist}/lib/vista-hires-transition.d.ts

@@ -1,5 +1,5 @@
-import { VistaBox } from './vista-box';
-import { VistaImageState } from './types';
+import type { VistaBox } from './vista-box';
+import type { VistaImageState } from './types';
 export type VistaHiresTransitionOpt = {
     current: VistaImageState;
     target: {
@@ -29,4 +29,3 @@ export declare class VistaHiresTransition {
         shouldWait: () => boolean;
     }): void;
 }
-//# sourceMappingURL=vista-hires-transition.d.ts.map

package/main/dist/lib/vista-hires-transition.js

@@ -0,0 +1,108 @@
+export class VistaHiresTransition {
+    static map = new Map();
+    static ease(current, target, threshold) {
+        const diff = target - current;
+        const next = current + diff * 0.2;
+        return Math.abs(diff) < threshold ? target : next;
+    }
+    static play(vistaImage, onComplete, shouldWait) {
+        if (shouldWait()) {
+            requestAnimationFrame(() => {
+                this.play(vistaImage, onComplete, shouldWait);
+            });
+            return;
+        }
+        // this is possible, that the animation was removed in between frames
+        if (!this.map.get(vistaImage)) {
+            return;
+        }
+        // check if the animation was cancelled in between frames
+        if (vistaImage.element.classList.contains('vvw--load-cancelled')) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            // check again
+            const animation = this.map.get(vistaImage);
+            if (!animation)
+                return;
+            if (!vistaImage.element)
+                return;
+            if (vistaImage.element.classList.contains('vvw--load-cancelled'))
+                return;
+            const { current, target, log } = animation;
+            let now = {};
+            if (target.width !== undefined) {
+                now.width = this.ease(current._width, target.width, 1);
+            }
+            if (target.height !== undefined) {
+                now.height = this.ease(current._height, target.height, 1);
+            }
+            if (target.transform?.x !== undefined) {
+                now.transform = now.transform || {};
+                now.transform.x = this.ease(current._transform.x, target.transform.x, 1);
+            }
+            if (target.transform?.y !== undefined) {
+                now.transform = now.transform || {};
+                now.transform.y = this.ease(current._transform.y, target.transform.y, 1);
+            }
+            if (target.transform?.scale !== undefined) {
+                now.transform = now.transform || {};
+                now.transform.scale = this.ease(current._transform.scale, target.transform.scale, 0.005);
+            }
+            if (target.translate?.x !== undefined) {
+                now.translate = now.translate || {};
+                now.translate.x = this.ease(current._translate.x, target.translate.x, 1);
+            }
+            if (target.translate?.y !== undefined) {
+                now.translate = now.translate || {};
+                now.translate.y = this.ease(current._translate.y, target.translate.y, 1);
+            }
+            // apply now to image state
+            if (now.width !== undefined)
+                current.width = now.width;
+            if (now.height !== undefined)
+                current.height = now.height;
+            // make the change trigger re-render
+            if (now.translate)
+                current.translate = { ...current.translate, ...now.translate };
+            if (now.transform)
+                current.transform = { ...current.transform, ...now.transform };
+            const allIsDone = (target.width === undefined || current._width === target.width) &&
+                (target.height === undefined || current._height === target.height) &&
+                (target.transform?.x === undefined || current._transform.x === target.transform.x) &&
+                (target.transform?.y === undefined || current._transform.y === target.transform.y) &&
+                (target.transform?.scale === undefined ||
+                    current._transform.scale === target.transform.scale) &&
+                (target.translate?.x === undefined || current._translate.x === target.translate.x) &&
+                (target.translate?.y === undefined || current._translate.y === target.translate.y);
+            if (allIsDone) {
+                this.map.delete(vistaImage);
+                onComplete();
+            }
+            else {
+                this.map.set(vistaImage, { current, target, log });
+                this.play(vistaImage, onComplete, shouldWait);
+            }
+        });
+    }
+    static stop(vistaImage) {
+        const map = this.map.get(vistaImage);
+        this.map.delete(vistaImage);
+        return map;
+    }
+    static start({ vistaImage, target, onComplete, shouldWait, }) {
+        // stop any existing animation
+        // keep in mind this is dangerously close to breaking
+        // when another function that relies on 'stop' is called,
+        // such as 'swap' in vista-view.ts: it relies on the returned value of 'stop'
+        // but for now, this is acceptable,
+        // since vista-view.ts only care about initial animation
+        this.stop(vistaImage);
+        // start new animation
+        this.map.set(vistaImage, {
+            current: vistaImage.state,
+            target,
+        });
+        this.play(vistaImage, onComplete, shouldWait);
+    }
+}

package/{dist → main/dist}/lib/vista-image-event.d.ts

@@ -1,5 +1,5 @@
-import { VistaExternalPointerListenerArgs } from './types';
-import { VistaView } from './vista-view';
+import type { VistaExternalPointerListenerArgs } from './types';
+import type { VistaView } from './vista-view';
 export declare class VistaImageEvent {
     private pointers;
     private lastDistance;
@@ -20,4 +20,3 @@ export declare class VistaImageEvent {
     start(imageContainer: HTMLElement): void;
     stop(): void;
 }
-//# sourceMappingURL=vista-image-event.d.ts.map