@plattar/plattar-ar-adapter 1.122.1 → 1.122.2

package/build/es2019/plattar-ar-adapter.js

@@ -364,6 +364,17 @@ exports.SceneAR = SceneAR;
 Object.defineProperty(exports, "__esModule", { value: true });
 const plattar_api_1 = require("@plattar/plattar-api");
 const product_ar_1 = require("../ar/product-ar");
+/**
+ * This tracks the current state of the Embed
+ */
+var EmbedState;
+(function (EmbedState) {
+    EmbedState[EmbedState["None"] = 0] = "None";
+    EmbedState[EmbedState["SceneViewer"] = 1] = "SceneViewer";
+    EmbedState[EmbedState["ProductViewer"] = 2] = "ProductViewer";
+    EmbedState[EmbedState["ProductAR"] = 3] = "ProductAR";
+    EmbedState[EmbedState["QRCode"] = 4] = "QRCode";
+})(EmbedState || (EmbedState = {}));
 /**
  * This is the primary <plattar-embed /> node that allows easy embedding
  * of Plattar related content
@@ -371,6 +382,13 @@ const product_ar_1 = require("../ar/product-ar");
 class PlattarEmbed extends HTMLElement {
     constructor() {
         super();
+        // this is the current state of the embed, none by default
+        this._currentState = EmbedState.None;
+        this._qrCodeOptions = {
+            color: "#101721",
+            qrType: "default",
+            margin: 0
+        };
         this._sceneID = null;
         this._productID = null;
         this._variationID = null;
@@ -384,6 +402,35 @@ class PlattarEmbed extends HTMLElement {
         return this._viewer;
     }
     connectedCallback() {
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === "attributes") {
+                    const sceneID = this.hasAttribute("scene-id") ? this.getAttribute("scene-id") : null;
+                    const productID = this.hasAttribute("product-id") ? this.getAttribute("product-id") : null;
+                    const variationID = this.hasAttribute("variation-id") ? this.getAttribute("variation-id") : null;
+                    let updated = false;
+                    if (sceneID !== this._sceneID) {
+                        this._sceneID = sceneID;
+                        updated = true;
+                    }
+                    if (productID !== this._productID) {
+                        this._productID = productID;
+                        updated = true;
+                    }
+                    if (variationID !== this._variationID) {
+                        this._variationID = variationID;
+                        updated = true;
+                    }
+                    if (updated) {
+                        // re-render based on internal state
+                        this._OnAttributesUpdated();
+                    }
+                }
+            });
+        });
+        observer.observe(this, {
+            attributes: true
+        });
         const server = this.hasAttribute("server") ? this.getAttribute("server") : "production";
         plattar_api_1.Server.create(plattar_api_1.Server.match(server || "production"));
         if (server) {
@@ -436,6 +483,13 @@ class PlattarEmbed extends HTMLElement {
                 const product = new product_ar_1.ProductAR(this._productID, this._variationID);
                 return product.init().then(accept).catch(reject);
             }
+            // If Product is set (under any scenario) then use ProductAR
+            // NOTE: At some point this should check for Scenes when SceneAR
+            // is implemented
+            if (this._productID) {
+                const product = new product_ar_1.ProductAR(this._productID, this._variationID);
+                return product.init().then(accept).catch(reject);
+            }
             // otherwise, scene was set so use SceneAR
             if (this._sceneID) {
                 return reject(new Error("PlattarEmbed.initAR() - scene-id not yet supported"));
@@ -482,6 +536,7 @@ class PlattarEmbed extends HTMLElement {
                 const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
                 shadow.append(viewer);
                 this._viewer = viewer;
+                this._currentState = EmbedState.SceneViewer;
                 return;
             }
             // if product is set, we use <plattar-product /> node from plattar-web
@@ -500,6 +555,7 @@ class PlattarEmbed extends HTMLElement {
                 const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
                 shadow.append(viewer);
                 this._viewer = viewer;
+                this._currentState = EmbedState.ProductViewer;
                 return;
             }
             return reject(new Error("PlattarEmbed.startViewer() - minimum required attributes not set, use scene-id or product-id as a minimum"));
@@ -510,11 +566,9 @@ class PlattarEmbed extends HTMLElement {
             if (!this._isReady) {
                 return reject(new Error("PlattarEmbed.startQRCode() - cannot execute as page has not loaded yet"));
             }
-            const opt = options || {
-                color: "#101721",
-                qrType: "default",
-                margin: 0
-            };
+            const opt = options || this._qrCodeOptions;
+            // reset instance for later use
+            this._qrCodeOptions = opt;
             if (this._viewer) {
                 this._viewer.remove();
                 this._viewer = null;
@@ -547,6 +601,7 @@ class PlattarEmbed extends HTMLElement {
                 const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
                 shadow.append(viewer);
                 this._viewer = viewer;
+                this._currentState = EmbedState.QRCode;
                 return;
             }
             // if product is set, we embed a QR code that takes us to product.html
@@ -574,11 +629,42 @@ class PlattarEmbed extends HTMLElement {
                 const shadow = this.shadowRoot || this.attachShadow({ mode: 'open' });
                 shadow.append(viewer);
                 this._viewer = viewer;
+                this._currentState = EmbedState.QRCode;
                 return;
             }
             return reject(new Error("PlattarEmbed.startQRCode() - minimum required attributes not set, use scene-id or product-id as a minimum"));
         });
     }
+    /**
+     * This is called by the observer if any of the embed attributes have changed
+     * based on the state of the embed, we update the internal structure accordingly
+     */
+    _OnAttributesUpdated() {
+        // nothing to update in these scenarios
+        if (this._currentState === EmbedState.None || this._currentState === EmbedState.ProductAR) {
+            return;
+        }
+        // re-render the QR Code when attributes have changed
+        if (this._currentState === EmbedState.QRCode) {
+            this.startQRCode(this._qrCodeOptions);
+            return;
+        }
+        // use the messenger function to change variation when attributes have changed
+        if (this._currentState === EmbedState.SceneViewer) {
+            const viewer = this.viewer;
+            if (viewer) {
+                viewer.messenger.selectVariation(this._productID, this._variationID);
+            }
+            return;
+        }
+        if (this._currentState === EmbedState.ProductViewer) {
+            const viewer = this.viewer;
+            if (viewer) {
+                viewer.messenger.selectVariation(this._variationID);
+            }
+            return;
+        }
+    }
 }
 exports.default = PlattarEmbed;
 
@@ -720,7 +806,7 @@ exports.Util = Util;
 },{}],9:[function(require,module,exports){
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = "1.122.1";
+exports.default = "1.122.2";
 
 },{}],10:[function(require,module,exports){
 "use strict";