@aurigma/ui-framework
Version:
A platform which allows building print product personalization editors based on Aurigma's Customer's Canvas.
1 lines • 3.27 kB
JavaScript
(window.multistep_editor_jsonpFunction=window.multistep_editor_jsonpFunction||[]).push([[49],{867:function(t,e){t.exports='<style>\n :host {\n width: 100%;\n height: 100%;\n }\n</style>\n\n<iframe id="frameID" width="100%" height="100%" style="border: none" allow="clipboard-read; clipboard-write"></iframe>\n'},909:function(t,e,i){"use strict";i.r(e),i.d(e,"AuWidgetTemplateEditor",(function(){return c})),i.d(e,"widget",(function(){return c}));var s=i(0),a=i(1),n=i(2),r=i(160),o=i(867);let c=class extends r.c{constructor(){super(),this._eventsInited=!1,this._isEditorInited=!1,this.script="",this.styles="",this._initIFrame=this._initIFrame.bind(this),this.resourcesPromise=this._loadResources()}updateParams(t,e){}async updateParamsAsync(t,e){await super.updateParamsAsync(t,e),await this.resourcesPromise,t.config&&!this._isEditorInited&&(await this._initIFrame(),this._isEditorInited=!0),this._element=await this._itemPromise(),await this._initSubscribers(this._element),this._element.configuration=Object.assign({language:this.language},t.config),t.stateId?await this.setStateId(t.stateId):t.product?await this.setProduct(t.product):console.warn("stateId or product missing.")}async getProduct(){return this._element.getProductJson()}async setProduct(t){this._element.setProductJson(t)}async setStateId(t){await this._element.setStateId(t)}async setToken(t){this._element.setToken(t)}async saveProduct(){await this._element.saveProduct()}_itemPromise(){return new Promise((t=>{if(this._element)t(this._element);else{const e=()=>{setTimeout((async()=>{if(this._iframeDoc){const e=this._iframeDoc.querySelector("au-template-editor");e&&(window.Aurigma=Object.assign(window.Aurigma,this._iframeWin.contentWindow.Aurigma),t(e))}this._element||e()}),200)};e()}}))}async _loadResources(){const t=Date.now(),e=`${a.a.getPatchedUrl("static/template-editor/script.html")}?t=${t}`,i=`${a.a.getPatchedUrl("static/template-editor/style.html")}?t=${t}`,[s,n]=await Promise.all([a.a.loadHtml(e),a.a.loadHtml(i)]);this.script=s,this.styles=n}async _initIFrame(){const t=this.querySelectorShadow("#frameID"),e=t||t.contentWindow,i=t.contentDocument||e.document;i.write('<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />'),i.write('<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />'),this._monkeyPatchScript(),i.write(this.script),i.write(this.styles),i.write("<style> .mat-button-toggle-button { height: 100%; } </style>"),i.write("<style> html { overflow: hidden; } </style>"),i.write('\n <div style="width:100%;height:100%">\n <au-template-editor id="templateeditor"></au-template-editor>\n </div>\n '),this._iframeDoc=i,this._iframeWin=e}_monkeyPatchScript(){this.script=this.script.replace("TextWhizzJS.wasm",`${a.a.getPatchedUrl("static/template-editor/TextWhizzJS.wasm")}`),this.script=this.script.replace("/assets/sprite.svg",`${a.a.getPatchedUrl("static/template-editor/assets/sprite.svg")}`)}async _initSubscribers(t){this._eventsInited||(this._eventsInited=!0,this.$productSaved=t.$saved(),this.$productChanged=t.$changed())}};c=Object(s.a)([Object(n.a)("au-widget-template-editor",o),Object(s.b)("design:paramtypes",[])],c)}}]);