vevet 2.5.1 → 2.7.1

package/src/ts/app/Application.ts

@@ -40,6 +40,11 @@ export namespace NApplication {
          * @default [.25, .1, .25, 1]
          */
         easing: EasingType;
+        /**
+         * Check if the browser supports WebP
+         * @default false
+         */
+        webpSupport: boolean;
     }
 
 }
@@ -75,6 +80,7 @@ export class Application <
             prefix: 'v-',
             easing: [0.25, 0.1, 0.25, 1],
             viewportResizeTimeout: 0,
+            webpSupport: false,
         };
     }
 
@@ -138,6 +144,16 @@ export class Application <
 
 
 
+    /**
+     * WebP Support
+     */
+    protected _supportsWebp?: boolean;
+    get supportsWebp () {
+        return this._supportsWebp;
+    }
+
+
+
     /**
      * @example
      * const app = Application({
@@ -200,6 +216,20 @@ export class Application <
         // create default helpers
         this._pageLoad = new PageLoad();
         this._viewport = new Viewport();
+
+        // check webp support
+        if (this.prop.webpSupport) {
+            const testWebP = new Image();
+            testWebP.onload = () => {
+                this._supportsWebp = testWebP.width === 1;
+            };
+            testWebP.onerror = () => {
+                this._supportsWebp = false;
+            };
+            testWebP.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=';
+        } else {
+            this._supportsWebp = false;
+        }
     }
 
 

package/src/ts/components/scroll/scrollable/ScrollView.ts

@@ -5,6 +5,7 @@ import onScroll from '../../../utils/listeners/onScroll';
 import { intersectionObserverSupported } from '../../../utils/listeners';
 import clamp from '../../../utils/math/clamp';
 import timeoutCallback from '../../../utils/common/timeoutCallback';
+import { NViewport } from '../../../app/events/Viewport';
 
 
 
@@ -55,6 +56,11 @@ export namespace NScrollView {
          * @default true
          */
         useIntersectionObserver?: boolean;
+        /**
+         * Viewport target on resize
+         * @default ''
+         */
+        viewportTarget?: keyof NViewport.CallbacksTypes;
         /**
          * @default 0
          */
@@ -114,6 +120,7 @@ export class ScrollView <
             classToToggle: 'viewed',
             useDelay: false,
             useIntersectionObserver: true,
+            viewportTarget: '',
             resizeTimeout: 0,
         };
     }
@@ -174,7 +181,7 @@ export class ScrollView <
     protected _setEvents () {
         super._setEvents();
         this.resize();
-        this.addViewportCallback('', () => {
+        this.addViewportCallback(this.prop.viewportTarget, () => {
             this.resize();
         }, {
             timeout: this.prop.resizeTimeout,

package/src/ts/components/scroll/section/ScrollSectionProgress.ts

@@ -27,8 +27,8 @@ export namespace NScrollSectionProgress {
          */
         section: string | Element;
         /**
-         * Update sizes on resize
-         * @default false
+         * Viewport target on resize
+         * @default ''
          */
         viewportTarget?: keyof NViewport.CallbacksTypes;
         /**

package/src/ts/index.ts

@@ -2,6 +2,7 @@ import * as common from './utils/common';
 import * as listeners from './utils/listeners';
 import * as math from './utils/math';
 import * as scroll from './utils/scroll';
+import * as image from './utils/image';
 
 import * as GeneralTypes from './utils/types/general';
 
@@ -51,6 +52,7 @@ const utils = {
     listeners,
     math,
     scroll,
+    image,
 };
 
 

package/src/ts/utils/image/index.ts

@@ -0,0 +1,9 @@
+import load from './load';
+import sizesToSrcSet from './sizesToSrcSet';
+import pathsToProps from './pathsToProps';
+
+export {
+    load,
+    sizesToSrcSet,
+    pathsToProps,
+};

package/src/ts/utils/image/load.ts

@@ -0,0 +1,88 @@
+import PCancelable from 'p-cancelable';
+
+const cachedImages: {
+    src: string;
+    image: HTMLImageElement
+}[] = [];
+
+type LoadImageProps = {
+    /**
+     * @default null
+     */
+    crossOrigin?: string | null;
+    /**
+     * @default false
+     */
+    useCache?: boolean;
+}
+
+/**
+ * Load an image
+ */
+export default function loadImage (
+    source: string | HTMLImageElement,
+    props?: LoadImageProps,
+) {
+    const defaultLoadProps: Required<LoadImageProps> = {
+        crossOrigin: null,
+        useCache: false,
+    };
+    const loadProps = {
+        ...defaultLoadProps,
+        ...props,
+    };
+
+    const imageSrc = typeof source === 'string' ? source : source.src;
+
+    return new PCancelable((
+        resolve: (img: HTMLImageElement) => void,
+        reject: () => void,
+    ) => {
+        const cachedImage = loadProps.useCache && cachedImages.find((img) => img.src === imageSrc);
+        // get image from cache
+        if (cachedImage) {
+            resolve(cachedImage.image);
+            return;
+        }
+
+        // load the image by src
+        if (typeof source === 'string') {
+            const img = new Image();
+            img.crossOrigin = loadProps.crossOrigin;
+            img.onload = () => {
+                if (loadProps.useCache) {
+                    cachedImages.push({
+                        src: imageSrc,
+                        image: img,
+                    });
+                }
+                resolve(img);
+            };
+            img.onerror = () => {
+                reject();
+            };
+            img.src = source;
+            return;
+        }
+
+        // load the image by image element
+        if (source instanceof HTMLImageElement) {
+            if (source.complete) {
+                resolve(source);
+            } else {
+                source.addEventListener('load', () => {
+                    if (loadProps.useCache) {
+                        cachedImages.push({
+                            src: imageSrc,
+                            image: source,
+                        });
+                    }
+                    resolve(source);
+                });
+                source.addEventListener('error', () => {
+                    reject();
+                });
+            }
+        }
+    });
+}

package/src/ts/utils/image/pathsToProps.ts

@@ -0,0 +1,34 @@
+import { ImageAdaptivePaths, ImagePaths } from '../types/general';
+import imageSizesToSrcSet from './sizesToSrcSet';
+
+/**
+ * Transform image paths to properties
+ */
+export default function imagePathsToProps (
+    data: ImagePaths | ImageAdaptivePaths,
+) {
+    const app = window.vevetApp;
+
+    // get src
+    let src = data.original;
+    if (data.thumb) {
+        src = data.thumb;
+    }
+    if (app && app.supportsWebp && !!data.thumbWebp) {
+        src = data.thumbWebp;
+    }
+
+    // get src set
+    let srcSet = '';
+    // get webp images
+    if (app && app.supportsWebp && 'sizesWebp' in data && !!data.sizesWebp) {
+        srcSet = imageSizesToSrcSet(data.sizesWebp);
+    } else if ('sizes' in data && !!data.sizes) {
+        srcSet = imageSizesToSrcSet(data.sizes);
+    }
+
+    return {
+        src,
+        srcSet,
+    };
+}

package/src/ts/utils/image/sizesToSrcSet.ts

@@ -0,0 +1,16 @@
+/**
+ * Transform image sizes to src set
+ */
+export default function imageSizesToSrcSet (
+    sizes: Record<string | number, string>,
+) {
+    const keys = Object.keys(sizes);
+    const srcParts = keys.map((key) => {
+        const value = sizes[key];
+        if (value) {
+            return `${value} ${key}w`;
+        }
+        return undefined;
+    });
+    return srcParts.filter((item) => !!item).join(', ');
+}

package/src/ts/utils/types/general.ts

@@ -12,3 +12,16 @@ export interface ScrollLike {
     scrollTo(options: ScrollToOptions): void;
     scrollTo(x: number, y: number): void;
 }
+
+export interface ImagePaths {
+    original: string;
+    thumb?: string;
+    thumbWebp?: string;
+}
+
+export interface ImageAdaptivePaths<
+    S extends Record<string | number, string> = {}
+> extends ImagePaths {
+    sizes?: S;
+    sizesWebp?: S;
+}