@plattar/plattar-ar-adapter
Version:
Plattar AR Adapter for interfacing with Google & Apple WebAR
229 lines (228 loc) • 10.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ProductController = void 0;
const plattar_api_1 = require("@plattar/plattar-api");
const product_ar_1 = require("../../ar/product-ar");
const util_1 = require("../../util/util");
const plattar_controller_1 = require("./plattar-controller");
/**
* Manages an instance of the <plattar-product> HTML Element
*
* NOTE: As of 14th June 2023, this is now a legacy Controller and only used in legacy embeds
* and should be deprecated from both documentation and previous integrations
*/
class ProductController extends plattar_controller_1.PlattarController {
async getConfiguratorState() {
throw new Error("ProductController.getConfiguratorState() - legacy embeds do not support configurator states");
}
async onAttributesUpdated(attributeName) {
const state = this._state;
// re-render the QR Code when attributes have changed
if (state === plattar_controller_1.ControllerState.QRCode) {
this.startQRCode(this._prevQROpt);
return;
}
// use the messenger function to change variation when attributes have changed
if (state === plattar_controller_1.ControllerState.Renderer) {
const viewer = this._element;
if (viewer) {
const variationID = this.getAttribute("variation-id");
if (variationID && viewer.messenger) {
viewer.messenger.selectVariation(variationID);
}
}
}
}
startViewerQRCode(options) {
return new Promise((accept, reject) => {
// remove the old renderer instance if any
this.removeRenderer();
const productID = this.getAttribute("product-id");
if (productID) {
const opt = options || this._GetDefaultQROptions();
const viewer = document.createElement("plattar-qrcode");
// required attributes with defaults for plattar-viewer node
const width = this.getAttribute("width") || "500px";
const height = this.getAttribute("height") || "500px";
viewer.setAttribute("width", width);
viewer.setAttribute("height", height);
if (opt.color) {
viewer.setAttribute("color", opt.color);
}
if (opt.margin) {
viewer.setAttribute("margin", "" + opt.margin);
}
if (opt.qrType) {
viewer.setAttribute("qr-type", opt.qrType);
}
viewer.setAttribute("shorten", (opt.shorten && (opt.shorten === true || opt.shorten === "true")) ? "true" : "false");
// optional attributes
const variationID = this.getAttribute("variation-id");
const variationSKU = this.getAttribute("variation-sku");
const showAR = this.getAttribute("show-ar");
let dst = plattar_api_1.Server.location().base + "renderer/product.html?product_id=" + productID;
if (variationID) {
dst += "&variationId=" + variationID;
}
if (variationSKU) {
dst += "&variationSku=" + variationSKU;
}
if (showAR) {
dst += "&show_ar=" + showAR;
}
viewer.setAttribute("url", opt.url || dst);
this._element = viewer;
this._state = plattar_controller_1.ControllerState.QRCode;
this._prevQROpt = opt;
return new Promise((accept, reject) => {
viewer.onload = () => {
return accept(viewer);
};
this.append(viewer);
});
}
return reject(new Error("ProductController.startQRCode() - minimum required attributes not set, use product-id as a minimum"));
});
}
/**
* Displays a QR Code that sends the user direct to AR
* @param options
* @returns
*/
startARQRCode(options) {
return new Promise((accept, reject) => {
// remove the old renderer instance if any
this.removeRenderer();
const opt = options || this._GetDefaultQROptions();
const viewer = document.createElement("plattar-qrcode");
// required attributes with defaults for plattar-viewer node
const width = this.getAttribute("width") || "500px";
const height = this.getAttribute("height") || "500px";
viewer.setAttribute("width", width);
viewer.setAttribute("height", height);
if (opt.color) {
viewer.setAttribute("color", opt.color);
}
if (opt.margin) {
viewer.setAttribute("margin", "" + opt.margin);
}
if (opt.qrType) {
viewer.setAttribute("qr-type", opt.qrType);
}
viewer.setAttribute("shorten", (opt.shorten && (opt.shorten === true || opt.shorten === "true")) ? "true" : "false");
const qrOptions = btoa(JSON.stringify(opt));
let dst = plattar_api_1.Server.location().base + "renderer/launcher.html?qr_options=" + qrOptions;
const sceneID = this.getAttribute("scene-id");
const configState = this.getAttribute("config-state");
const embedType = this.getAttribute("embed-type");
const productID = this.getAttribute("product-id");
const sceneProductID = this.getAttribute("scene-product-id");
const variationID = this.getAttribute("variation-id");
const variationSKU = this.getAttribute("variation-sku");
const arMode = this.getAttribute("ar-mode");
const showBanner = this.getAttribute("show-ar-banner");
if (configState) {
dst += "&config_state=" + configState;
}
if (embedType) {
dst += "&embed_type=" + embedType;
}
if (productID) {
dst += "&product_id=" + productID;
}
if (sceneProductID) {
dst += "&scene_product_id=" + sceneProductID;
}
if (variationID) {
dst += "&variation_id=" + variationID;
}
if (variationSKU) {
dst += "&variation_sku=" + variationSKU;
}
if (arMode) {
dst += "&ar_mode=" + arMode;
}
if (sceneID) {
dst += "&scene_id=" + sceneID;
}
if (showBanner) {
dst += "&show_ar_banner=" + showBanner;
}
viewer.setAttribute("url", opt.url || dst);
this._element = viewer;
this._state = plattar_controller_1.ControllerState.QRCode;
this._prevQROpt = opt;
return new Promise((accept, reject) => {
viewer.onload = () => {
return accept(viewer);
};
this.append(viewer);
});
});
}
startRenderer() {
return new Promise((accept, reject) => {
// remove the old renderer instance if any
this.removeRenderer();
const productID = this.getAttribute("product-id");
if (productID) {
// required attributes with defaults for plattar-product node
const width = this.getAttribute("width") || "500px";
const height = this.getAttribute("height") || "500px";
const server = this.getAttribute("server") || "production";
const viewer = document.createElement("plattar-product");
viewer.setAttribute("width", width);
viewer.setAttribute("height", height);
viewer.setAttribute("server", server);
viewer.setAttribute("product-id", productID);
// optional attributes
const variationID = this.getAttribute("variation-id");
const variationSKU = this.getAttribute("variation-sku");
const showAR = this.getAttribute("show-ar");
if (variationID) {
viewer.setAttribute("variation-id", variationID);
}
if (variationSKU) {
viewer.setAttribute("variation-sku", variationSKU);
}
if (showAR) {
viewer.setAttribute("show-ar", showAR);
}
this._element = viewer;
this._state = plattar_controller_1.ControllerState.Renderer;
return new Promise((accept, reject) => {
viewer.onload = () => {
return accept(viewer);
};
this.append(viewer);
});
}
return reject(new Error("ProductController.startRenderer() - minimum required attributes not set, use scene-id as a minimum"));
});
}
initAR() {
return new Promise((accept, reject) => {
if (!util_1.Util.canAugment()) {
return reject(new Error("ProductController.initAR() - cannot proceed as AR not available in context"));
}
const productID = this.getAttribute("product-id");
if (productID) {
const variationID = this.getAttribute("variation-id");
const variationSKU = this.getAttribute("variation-sku");
//const product: ProductAR = new ProductAR(productID, variationID, variationSKU);
const product = new product_ar_1.ProductAR({
productID: productID,
variationID: variationID ? variationID : (variationSKU ? null : "default"),
variationSKU: variationSKU,
useARBanner: this.getBooleanAttribute("show-ar-banner")
});
return product.init().then(accept).catch(reject);
}
return reject(new Error("ProductController.initAR() - minimum required attributes not set, use product-id as a minimum"));
});
}
get element() {
return this._element;
}
}
exports.ProductController = ProductController;