vistaview 1.0.3 → 2.0.0

package/main/dist/lib/defaults/transition.js

@@ -0,0 +1,40 @@
+// run on every image transition
+export function transition({ htmlElements: { to: HtmlTo }, index: { from: fromIndex, to: toIndex } }, signal, vistaView) {
+    const { imageContainer: imgc, options } = vistaView;
+    const { isReducedMotion } = vistaView.state;
+    if (!HtmlTo || signal.aborted || isReducedMotion)
+        return;
+    const adjacent = Math.abs(toIndex - fromIndex) === 1 ||
+        (fromIndex === 0 && toIndex === vistaView.state.elmLength - 1) ||
+        (fromIndex === vistaView.state.elmLength - 1 && toIndex === 0);
+    // for non-adjacent
+    // just return
+    if (!adjacent) {
+        return;
+    }
+    // adjacent transition
+    // with no reduced motion preference
+    // slide left/right
+    return {
+        cleanup: () => {
+            imgc.style.transition = '';
+            imgc.style.transform = '';
+        },
+        transitionEnded: new Promise((r) => {
+            imgc.addEventListener('transitionend', () => {
+                r();
+            }, { once: true });
+            imgc.addEventListener('transitioncancel', () => {
+                if (signal.aborted)
+                    r();
+            }, { once: true });
+            const duration = Math.round(options.animationDurationBase * 100) / 100;
+            const transform = toIndex === fromIndex + 1 ||
+                (fromIndex === vistaView.state.elmLength - 1 && toIndex === 0)
+                ? 'translateX(-100vw)'
+                : 'translateX(100vw)';
+            imgc.style.transition = `transform ${duration}ms ease`;
+            imgc.style.transform = transform;
+        }),
+    };
+}

package/{dist → main/dist}/lib/main.d.ts

@@ -1,3 +1,2 @@
-import { VistaInterface, VistaParams } from './types';
+import type { VistaInterface, VistaParams } from './types';
 export declare function vistaView({ elements, ...opts }: VistaParams): VistaInterface | null;
-//# sourceMappingURL=main.d.ts.map

package/main/dist/lib/main.js

@@ -0,0 +1,66 @@
+import { VistaView } from './vista-view';
+function checkCorrectness(elements) {
+    let els = null;
+    // get elements as node list
+    if (typeof elements === 'string') {
+        els = document.querySelectorAll(elements);
+        if (els.length === 0) {
+            return new Error('No elements found in node list.');
+        }
+        // Validate DOM elements - must be img or a
+        for (let i = 0; i < els.length; i++) {
+            const el = els[i];
+            const tagName = el.tagName.toLowerCase();
+            if (tagName !== 'img' && tagName !== 'a') {
+                return new Error(`Invalid element at index ${i}: expected <img>, <a>, got <${tagName}>`);
+            }
+            // If anchor, must contain img
+            if (tagName === 'a') {
+                const hasImg = el.querySelector('img') !== null;
+                if (!hasImg) {
+                    return new Error(`Invalid <a> element at index ${i}: must contain <img>`);
+                }
+            }
+        }
+    }
+    else {
+        // Validate VistaImgConfig array
+        const data = elements;
+        for (let i = 0; i < data.length; i++) {
+            const img = data[i];
+            if (!img.src) {
+                return new Error(`Invalid image data at index ${i}: must have 'src'`);
+            }
+        }
+    }
+    return elements;
+}
+export function vistaView({ elements, ...opts }) {
+    if (!elements) {
+        console.error(elements);
+        console.error('no elements provided');
+        console.warn('VistaView: silently returning.');
+        return null;
+    }
+    let elms = checkCorrectness(elements);
+    if (elms instanceof Error) {
+        console.error(elms);
+        console.warn('VistaView: silently returning.');
+        return null;
+    }
+    const v = new VistaView(elms, opts);
+    return {
+        open: (startIndex = 0) => v.open(startIndex),
+        reset: () => v.reset(),
+        close: () => v.close(),
+        next: () => v.next(),
+        prev: () => v.prev(),
+        zoomIn: () => v.zoomIn(),
+        zoomOut: () => v.zoomOut(),
+        destroy: () => v.destroy(),
+        getCurrentIndex: () => v.getCurrentIndex(),
+        view: (index) => {
+            v.view(index);
+        },
+    };
+}

package/{dist → main/dist}/lib/throttle.d.ts

@@ -4,4 +4,3 @@ export declare class Throttle {
     };
     fio(func: () => void, id: string, wait?: number): void;
 }
-//# sourceMappingURL=throttle.d.ts.map

package/main/dist/lib/throttle.js

@@ -0,0 +1,21 @@
+// Throttle: Function execution rate limiter
+// Ensures that the function is not called more than once in the specified wait time.
+export class Throttle {
+    fiolast = {};
+    // first in out
+    fio(func, id, wait = 50) {
+        const now = Date.now();
+        const timeSinceLastCall = now - (this.fiolast[id] ?? 0);
+        const invoke = () => {
+            this.fiolast[id] = Date.now();
+            func();
+        };
+        if (!this.fiolast[id]) {
+            invoke();
+            return;
+        }
+        if (timeSinceLastCall >= wait) {
+            invoke();
+        }
+    }
+}

package/{dist → main/dist}/lib/types.d.ts

@@ -1,7 +1,7 @@
-import { VistaBox } from './vista-box';
-import { VistaState } from './vista-state';
-import { VistaView } from './vista-view';
-import { VistaHiresTransitionOpt } from './vista-hires-transition';
+import type { VistaBox } from './vista-box';
+import type { VistaState } from './vista-state';
+import type { VistaView } from './vista-view';
+import type { VistaHiresTransitionOpt } from './vista-hires-transition';
 export type { VistaImage } from './vista-image';
 export type VistaOpt = {
     animationDurationBase?: number;
@@ -204,4 +204,3 @@ export type VistaImageClone = {
         };
     };
 };
-//# sourceMappingURL=types.d.ts.map

package/main/dist/lib/types.js

@@ -0,0 +1 @@
+export {};

package/{dist → main/dist}/lib/utils/get-fitted-size.d.ts

@@ -2,4 +2,3 @@ export declare function getFittedSize(img: HTMLImageElement): {
     width: number;
     height: number;
 };
-//# sourceMappingURL=get-fitted-size.d.ts.map

package/main/dist/lib/utils/get-fitted-size.js

@@ -0,0 +1,53 @@
+// this function calculates the rendered size of an image element
+// according to its CSS object-fit property
+export function getFittedSize(img) {
+    const style = window.getComputedStyle(img);
+    const objectFit = style.objectFit || ''; // empty string in some old browsers
+    // Rendered <img> size
+    const { width: boxW, height: boxH } = img.getBoundingClientRect();
+    // Natural image size
+    const natW = img.naturalWidth;
+    const natH = img.naturalHeight;
+    // If object-fit is not supported → fallback to "fill" behavior
+    if (!objectFit) {
+        return { width: boxW, height: boxH };
+    }
+    // natural size missing (e.g., SVG, broken image)
+    if (!natW || !natH) {
+        return { width: boxW, height: boxH };
+    }
+    const imageAR = natW / natH;
+    const boxAR = boxW / boxH;
+    switch (objectFit) {
+        case 'fill':
+            return { width: boxW, height: boxH };
+        case 'none':
+            return { width: natW, height: natH };
+        case 'contain':
+            if (imageAR > boxAR) {
+                return { width: boxW, height: boxW / imageAR };
+            }
+            else {
+                return { width: boxH * imageAR, height: boxH };
+            }
+        case 'cover':
+            if (imageAR < boxAR) {
+                return { width: boxW, height: boxW / imageAR };
+            }
+            else {
+                return { width: boxH * imageAR, height: boxH };
+            }
+        case 'scale-down': {
+            // natural size
+            const natural = { width: natW, height: natH };
+            // contain size
+            const contain = imageAR > boxAR
+                ? { width: boxW, height: boxW / imageAR }
+                : { width: boxH * imageAR, height: boxH };
+            // pick the smaller of the two
+            return contain.width <= natural.width && contain.height <= natural.height ? contain : natural;
+        }
+    }
+    // Unknown or non-standard object-fit → fallback
+    return { width: boxW, height: boxH };
+}

package/{dist → main/dist}/lib/utils/get-full-size-dim.d.ts

@@ -2,4 +2,3 @@ export declare function getFullSizeDim(img: HTMLImageElement): {
     width: number;
     height: number;
 };
-//# sourceMappingURL=get-full-size-dim.d.ts.map

package/main/dist/lib/utils/get-full-size-dim.js

@@ -0,0 +1,35 @@
+export function getFullSizeDim(img) {
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const nw = img.naturalWidth;
+    const nh = img.naturalHeight;
+    if (!nw || !nh) {
+        console.error('Error', img);
+        throw new Error('Image natural dimensions are zero');
+    }
+    if (nw < vw && nh < vh) {
+        // smaller than screen, no need to resize
+        return {
+            width: nw,
+            height: nh,
+        };
+    }
+    const imageAR = nw / nh;
+    const screenAR = vw / vh;
+    let width;
+    let height;
+    if (imageAR > screenAR) {
+        // Image is wider than screen → constrain by width
+        width = vw;
+        height = vw / imageAR;
+    }
+    else {
+        // Image is taller than screen → constrain by height
+        height = vh;
+        width = vh * imageAR;
+    }
+    return {
+        width,
+        height,
+    };
+}

package/{dist → main/dist}/lib/utils/get-style.d.ts

@@ -2,4 +2,3 @@ export declare function getStyle(elm: HTMLImageElement | HTMLAnchorElement): {
     borderRadius: string;
     objectFit: string;
 };
-//# sourceMappingURL=get-style.d.ts.map

package/main/dist/lib/utils/get-style.js

@@ -0,0 +1,19 @@
+import { isNotZeroCss } from './is-not-zero-css';
+export function getStyle(elm) {
+    const anchor = elm instanceof HTMLAnchorElement ? elm : null;
+    const image = elm instanceof HTMLImageElement ? elm : anchor?.querySelector('img');
+    const aStyles = anchor ? getComputedStyle(anchor) : null;
+    const iStyles = image ? getComputedStyle(image) : null;
+    let borderRadius = '0px';
+    let objectFit = iStyles ? iStyles.objectFit : 'contain';
+    if (aStyles && isNotZeroCss(aStyles.borderRadius)) {
+        borderRadius = aStyles.borderRadius;
+    }
+    else if (iStyles && isNotZeroCss(iStyles.borderRadius)) {
+        borderRadius = iStyles.borderRadius;
+    }
+    return {
+        borderRadius,
+        objectFit,
+    };
+}

package/{dist → main/dist}/lib/utils/index.d.ts

@@ -1,3 +1,2 @@
 export declare function clamp(value: number, min: number, max: number): number;
 export declare function limitPrecision(value: number, precision?: number): number;
-//# sourceMappingURL=index.d.ts.map

package/main/dist/lib/utils/index.js

@@ -0,0 +1,7 @@
+export function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+export function limitPrecision(value, precision = 2) {
+    const factor = Math.pow(10, precision);
+    return Math.round(value * factor) / factor;
+}

package/{dist → main/dist}/lib/utils/is-not-zero-css.d.ts

@@ -1,2 +1 @@
 export declare function isNotZeroCss(value?: string): false | string | undefined;
-//# sourceMappingURL=is-not-zero-css.d.ts.map

package/main/dist/lib/utils/is-not-zero-css.js

@@ -0,0 +1,3 @@
+export function isNotZeroCss(value) {
+    return (value && !/^0(px|%|r?em|vw|vh|vmin|vmax|cm|mm|in|pt|pc|ex|ch)?$/i.test(value.trim()) && value);
+}

package/{dist → main/dist}/lib/utils/parse-element.d.ts

@@ -1,3 +1,2 @@
-import { VistaParsedElm } from '../types';
+import type { VistaParsedElm } from '../types';
 export declare function parseElement(elm: HTMLImageElement | HTMLAnchorElement): VistaParsedElm;
-//# sourceMappingURL=parse-element.d.ts.map

package/main/dist/lib/utils/parse-element.js

@@ -0,0 +1,67 @@
+import { isNotZeroCss } from './is-not-zero-css';
+function getComputedStyleProps(elm) {
+    const anchor = elm instanceof HTMLAnchorElement ? elm : null;
+    const image = elm instanceof HTMLImageElement ? elm : anchor?.querySelector('img');
+    const aStyles = anchor ? getComputedStyle(anchor) : null;
+    const iStyles = image ? getComputedStyle(image) : null;
+    let borderRadius = '0px';
+    let objectFit = iStyles ? iStyles.objectFit : 'contain';
+    if (aStyles && isNotZeroCss(aStyles.borderRadius)) {
+        borderRadius = aStyles.borderRadius;
+    }
+    else if (iStyles && isNotZeroCss(iStyles.borderRadius)) {
+        borderRadius = iStyles.borderRadius;
+    }
+    return {
+        borderRadius,
+        objectFit,
+    };
+}
+function getSrcset(srcSetStr) {
+    const parts = srcSetStr.split(',').map((s) => s.trim());
+    const srcset = [];
+    for (const part of parts) {
+        const [src, widthStr] = part.split(' ').map((s) => s.trim());
+        if (src && widthStr && widthStr.endsWith('w')) {
+            const width = parseInt(widthStr.slice(0, -1), 10);
+            if (!isNaN(width)) {
+                srcset.push({ src, width });
+            }
+        }
+    }
+    return srcset;
+}
+export function parseElement(elm) {
+    const image = elm instanceof HTMLImageElement ? elm : elm.querySelector('img');
+    const src = elm.dataset.vistaviewSrc ||
+        elm.getAttribute('href') ||
+        elm.getAttribute('src') ||
+        image?.getAttribute('src') ||
+        '';
+    const srcSet = elm.dataset.vistaviewSrcset ||
+        elm.getAttribute('srcset') ||
+        image?.getAttribute('srcset') ||
+        '';
+    if (!src && !srcSet) {
+        console.error('VistaView Error: Element must have href, src, or srcSet');
+        throw new Error('VistaView: Element must have href, src, or srcSet');
+    }
+    const parsedSrcSet = srcSet ? getSrcset(srcSet) : undefined;
+    const styles = getComputedStyleProps(elm);
+    return {
+        config: {
+            src,
+            alt: elm.dataset.vistaviewAlt || elm.getAttribute('alt') || image?.getAttribute('alt') || '',
+            srcSet: srcSet || undefined,
+        },
+        parsedSrcSet: parsedSrcSet?.length ? parsedSrcSet : undefined,
+        origin: {
+            anchor: elm instanceof HTMLAnchorElement ? elm : undefined,
+            image: image,
+            src,
+            srcSet,
+            borderRadius: styles.borderRadius,
+            objectFit: styles.objectFit,
+        },
+    };
+}

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

@@ -1,6 +1,6 @@
-import { VistaImageState, VistaImgConfig, VistaImageParams, VistaImgOrigin, VistaImageClone } from './types';
-import { VistaHiresTransitionOpt } from './vista-hires-transition';
-import { VistaView } from './vista-view';
+import type { VistaImageState, VistaImgConfig, VistaImageParams, VistaImgOrigin, VistaImageClone } from './types';
+import type { VistaHiresTransitionOpt } from './vista-hires-transition';
+import type { VistaView } from './vista-view';
 export declare abstract class VistaBox {
     abstract element: HTMLImageElement | HTMLDivElement;
     state: VistaImageState;
@@ -110,4 +110,3 @@ export declare abstract class VistaBox {
         cancel: () => void;
     } | undefined;
 }
-//# sourceMappingURL=vista-box.d.ts.map