@plattar/plattar-ar-adapter 1.122.1 → 1.122.2

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

@@ -698,6 +698,20 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       var plattar_api_1 = require("@plattar/plattar-api");
 
       var 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
@@ -714,7 +728,14 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 
           _classCallCheck(this, PlattarEmbed);
 
-          _this7 = _super5.call(this);
+          _this7 = _super5.call(this); // this is the current state of the embed, none by default
+
+          _this7._currentState = EmbedState.None;
+          _this7._qrCodeOptions = {
+            color: "#101721",
+            qrType: "default",
+            margin: 0
+          };
           _this7._sceneID = null;
           _this7._productID = null;
           _this7._variationID = null;
@@ -736,6 +757,39 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
           value: function connectedCallback() {
             var _this8 = this;
 
+            var observer = new MutationObserver(function (mutations) {
+              mutations.forEach(function (mutation) {
+                if (mutation.type === "attributes") {
+                  var sceneID = _this8.hasAttribute("scene-id") ? _this8.getAttribute("scene-id") : null;
+                  var productID = _this8.hasAttribute("product-id") ? _this8.getAttribute("product-id") : null;
+                  var variationID = _this8.hasAttribute("variation-id") ? _this8.getAttribute("variation-id") : null;
+                  var updated = false;
+
+                  if (sceneID !== _this8._sceneID) {
+                    _this8._sceneID = sceneID;
+                    updated = true;
+                  }
+
+                  if (productID !== _this8._productID) {
+                    _this8._productID = productID;
+                    updated = true;
+                  }
+
+                  if (variationID !== _this8._variationID) {
+                    _this8._variationID = variationID;
+                    updated = true;
+                  }
+
+                  if (updated) {
+                    // re-render based on internal state
+                    _this8._OnAttributesUpdated();
+                  }
+                }
+              });
+            });
+            observer.observe(this, {
+              attributes: true
+            });
             var server = this.hasAttribute("server") ? this.getAttribute("server") : "production";
             plattar_api_1.Server.create(plattar_api_1.Server.match(server || "production"));
 
@@ -792,6 +846,15 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
               if (!_this9._sceneID && _this9._productID) {
                 var product = new product_ar_1.ProductAR(_this9._productID, _this9._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 (_this9._productID) {
+                var _product = new product_ar_1.ProductAR(_this9._productID, _this9._variationID);
+
+                return _product.init().then(accept)["catch"](reject);
               } // otherwise, scene was set so use SceneAR
 
 
@@ -860,6 +923,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 
                 shadow.append(viewer);
                 _this11._viewer = viewer;
+                _this11._currentState = EmbedState.SceneViewer;
                 return;
               } // if product is set, we use <plattar-product /> node from plattar-web
 
@@ -890,6 +954,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                 _shadow.append(_viewer);
 
                 _this11._viewer = _viewer;
+                _this11._currentState = EmbedState.ProductViewer;
                 return;
               }
 
@@ -907,11 +972,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                 return reject(new Error("PlattarEmbed.startQRCode() - cannot execute as page has not loaded yet"));
               }
 
-              var opt = options || {
-                color: "#101721",
-                qrType: "default",
-                margin: 0
-              };
+              var opt = options || _this12._qrCodeOptions; // reset instance for later use
+
+              _this12._qrCodeOptions = opt;
 
               if (_this12._viewer) {
                 _this12._viewer.remove();
@@ -959,6 +1022,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 
                 shadow.append(viewer);
                 _this12._viewer = viewer;
+                _this12._currentState = EmbedState.QRCode;
                 return;
               } // if product is set, we embed a QR code that takes us to product.html
 
@@ -1001,12 +1065,53 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
                 _shadow2.append(_viewer2);
 
                 _this12._viewer = _viewer2;
+                _this12._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
+           */
+
+        }, {
+          key: "_OnAttributesUpdated",
+          value: function _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) {
+              var viewer = this.viewer;
+
+              if (viewer) {
+                viewer.messenger.selectVariation(this._productID, this._variationID);
+              }
+
+              return;
+            }
+
+            if (this._currentState === EmbedState.ProductViewer) {
+              var _viewer3 = this.viewer;
+
+              if (_viewer3) {
+                _viewer3.messenger.selectVariation(this._variationID);
+              }
+
+              return;
+            }
+          }
         }]);
 
         return PlattarEmbed;
@@ -1265,7 +1370,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
       Object.defineProperty(exports, "__esModule", {
         value: true
       });
-      exports["default"] = "1.122.1";
+      exports["default"] = "1.122.2";
     }, {}],
     10: [function (require, module, exports) {
       "use strict";