@thefittingroom/shop-ui 3.0.0-alpha-1 → 3.0.0-alpha-3

package/dist/esm/components/Vto.d.ts

@@ -0,0 +1,7 @@
+export declare class VtoComponent {
+    private readonly vtoMainDivId;
+    private isInit;
+    constructor(vtoMainDivId: string);
+    init(): void;
+    onNewFramesReady(frames: string[]): void;
+}

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 /*!
-* thefittingroom v3.0.0-alpha-1 (2025-01-17T20:00:29.715Z)
+* thefittingroom v3.0.0-alpha-3 (2025-01-17T20:40:51.077Z)
 * Copyright 2022-present, TheFittingRoom, Inc. All rights reserved.
 */
 function loadImageRecursive(imageURL, imageURLs) {
@@ -26587,6 +26587,42 @@ var index = /*#__PURE__*/Object.freeze({
     FitNames: FitNames
 });
 
+class VtoComponent {
+    constructor(vtoMainDivId) {
+        this.vtoMainDivId = vtoMainDivId;
+        this.isInit = false;
+    }
+    init() {
+        if (this.isInit)
+            return;
+        const vtoMainDiv = document.getElementById(this.vtoMainDivId);
+        if (!vtoMainDiv)
+            throw new Error(`Element with id ${this.vtoMainDivId} not found`);
+        vtoMainDiv.innerHTML = `
+        <div class="tfr-slider-wrapper">
+          <img id="tfr-tryon-image" src="" />
+          <input type="range" id="tfr-slider" />
+        </div>
+    `;
+        this.isInit = true;
+    }
+    onNewFramesReady(frames) {
+        const tryOnImage = document.getElementById('tfr-tryon-image');
+        const onChange = (slider, imageUrl) => {
+            console.debug('slider change', slider, imageUrl);
+            tryOnImage.src = imageUrl;
+        };
+        const slider = InitImageSlider('tfr-slider', onChange);
+        if (Array.isArray(frames) && frames.length > 0) {
+            const e = slider.Load(frames);
+            if (e instanceof Error) {
+                console.error(e);
+                return;
+            }
+        }
+    }
+}
+
 var L = {
     AssociatedEmail: 'If there is an account associated with that email, We have sent a link to reset your password.',
     BackToSignIn: 'Back to sign in',
@@ -27904,7 +27940,7 @@ var AvatarState;
 })(AvatarState || (AvatarState = {}));
 
 class FittingRoom {
-    constructor(shopId, modalDivId, sizeRecMainDivId, hooks = {}, cssVariables, _env) {
+    constructor(shopId, modalDivId, sizeRecMainDivId, vtoMainDivId, hooks = {}, cssVariables, _env) {
         this.shopId = shopId;
         this.hooks = hooks;
         this.isLoggedIn = false;
@@ -27919,6 +27955,10 @@ class FittingRoom {
         this.tfrModal = new TfrModal(modalDivId, this.signIn.bind(this), this.forgotPassword.bind(this), this.submitTel.bind(this));
         this.tfrShop = initShop(Number(this.shopId), env);
         this.tfrSizeRec = new TfrSizeRec(sizeRecMainDivId, cssVariables, this.tfrShop, this.onSignInClick.bind(this), this.signOut.bind(this), this.onFitInfoClick.bind(this), this.onTryOnClick.bind(this));
+        try {
+            this.vtoComponent = new VtoComponent(vtoMainDivId);
+        }
+        catch (_a) { }
     }
     get shop() {
         return this.tfrShop;
@@ -28019,7 +28059,8 @@ class FittingRoom {
     }
     async onTryOnClick(styleId, sizeId) {
         const frames = await this.shop.tryOn(styleId, sizeId);
-        this.tfrModal.onTryOn(frames);
+        this.vtoComponent.init();
+        this.vtoComponent.onNewFramesReady(frames);
     }
     onUserProfileChange(userProfile) {
         var _a, _b, _c, _d;