- Width:px
- Height:px
- Adaptive:px
- Autoscale:{autoscaleValue}
`, }, events: { drag(node, callback) { const self = this; function onmousedown(event) { self.set({ dragging: true }); const rect = node.getBoundingClientRect(); const offsetX = event.offsetX; const offsetY = event.offsetY; function drop() { self.set({ dragging: false }); document.body.removeEventListener('mouseup', drop, false); document.body.removeEventListener('mousemove', drag, false); } function drag(event) { callback({ x: event.clientX - offsetX - rect.left, y: event.clientY - offsetY - rect.top, }); } document.body.addEventListener('mouseup', drop, false); document.body.addEventListener('mousemove', drag, false); } node.addEventListener('mousedown', onmousedown, false); return { teardown() { node.removeEventListener('mousedown', onmousedown, false); }, }; }, }, oncreate() { // console.log("Workbench oncreate compId:", this.get().loadedCompositionId); // init Widgetic SDK Widgetic.init('bogus', 'bogus'); Widgetic.auth.token('bogus'); // persist settings when reset the workbench window.addEventListener('unload', this.saveCurrCompSettingsToLS); this.disposeUnload = _ => window.removeEventListener('unload', this.saveCurrCompSettingsToLS); // refresh list of published compositions // console.log("Workbench onCreate localStorage:", localStorage); this.updatePublishedCompsList(); // read lastCompositionId from localStorage // console.log("Workbench onCreate localStorage:", localStorage); let currentWorkbenchStorage = this.currentWorkbenchStorage(); // console.log("Workbench onCreate workbenchStorage:", currentWorkbenchStorage); let currCompId = currentWorkbenchStorage.lastCompositionId; // console.log("Workbench onCreate lastCompositionId from localStorage:", currCompId); // load widget data Widgetic.api('widgets/widget').then(data => { // console.log("Load widget data:", data); // set widget data this.set({ widget: data }) // console.log("Workbench start comp id:", currCompId); // check if it's a new compostion to save a real one in the database first if(!currCompId) this.createNewComposition(); // set the loadedCompositionId to load the composition in the workbench else this.set({ loadedCompositionId: currCompId }); }); }, onstate({ changed, current, previous }) { // this fires before oncreate, and on every state change. // the first time it runs, `previous` is undefined // console.log("onstate:", previous ? previous.autoscale : false, current.autoscale); // let prevAutoscaleValue = previous ? previous.autoscaleValue : 'off'; // console.log("onstate autoscaleValue:", changed.autoscaleValue, prevAutoscaleValue, current.autoscaleValue); // when autoscaleValue changes to true, reload the current composition if(changed.autoscale) { let prevAutoscale = previous ? previous.autoscale : false; // console.log("onstate autoscale:", prevAutoscale, current.autoscale, this.get().autoscale); if(current.loadedCompositionId) { // save the new autoscale value for current compostion in the localStorage this.saveCurrCompSettingsToLS(current.loadedCompositionId); // reload UI composition with settings from local storage this.showWidgetForCompId(current.loadedCompositionId); } } // when loadedCompositionId changes if(changed.loadedCompositionId && previous) { // check prevLoadedCompositionId let previousCompId = previous ? previous.loadedCompositionId : undefined; console.log("on loadedCompositionId update:", previousCompId, current.loadedCompositionId); // load UI composition in the workbench with settings from local storage this.showWidgetForCompId(current.loadedCompositionId); } }, methods: { showWidgetForCompId(compId) { // get composition's settings from local storage let compositionOptions = this.currentWorkbenchStorage()[compId]; // console.log("on show WidgetForCompId composition options:", compositionOptions); // set the new settings in the worbench this.set({width: compositionOptions.width, height: compositionOptions.height, autoscale: compositionOptions.autoscale, adaptive: compositionOptions.adaptive}); // create new UI COMPOSITION // close current UI composition from the workbench let prevComp = this.get().composition; // console.log("on show Widget update prev comp:", prevComp); prevComp && prevComp.close(); // create new UI composition for the composition options compositionOptions.autoscale = compositionOptions.autoscale ? 'on' : 'off'; let newComp = Widgetic.UI.composition(this.refs.widgetArea, compId, compositionOptions); this.set({ composition: newComp}); // console.log("on show WidgetForCompId update new UI comp:", this.get().composition); // create EDITOR // close current editor let editor = this.get().editor; editor && editor.close(); // create new editor for the new UI composition editor = Widgetic.UI.editor(this.refs.editorArea, newComp);// console.log("Editor created for composition:", editor); editor.on('composition:save', (comp) => this.loadComposition(comp)); this.set({ editor }); // save the composition's settings to local storage this.saveCurrCompSettingsToLS(compId); }, currentWorkbenchStorage() { return localStorage && localStorage.wkbncSettings ? JSON.parse(localStorage.wkbncSettings) : {}; }, createNewComposition(){ let currWidget = this.get().widget; let compositionData = { name: "Workbench composition", widget_id: currWidget.id, skin_id: currWidget.skins[0].id, content: currWidget.content[0].content }; // console.log("create composition in the database with this info:", compositionData); // make api call to create an actual composition and then load it in the workench Widgetic.api('compositions', 'POST', JSON.stringify(compositionData)) .then((comp) => this.loadComposition(comp)); }, loadComposition(savedComposition) { // console.log("published composition:", this.get().loadedCompositionId, savedComposition.id); // save this compostion's settings in localStorage this.saveCurrCompSettingsToLS(savedComposition.id); // refresh list of published compositions this.updatePublishedCompsList(); // set the loadedCompositionId to show the widget this.set({ loadedCompositionId: savedComposition.id }); }, saveCurrCompSettingsToLS(compId) { // read current composition settings from current state const { width, height, autoscale, adaptive, loadedCompositionId } = this.get(); if(!compId) compId = loadedCompositionId; // console.log("save Curr CompSettingsToLS for id:", compId, width, height, autoscale, adaptive, widget); // read workbenchSettings object from localStorage let currentWorkbenchStorage = this.currentWorkbenchStorage(); // save lastCompositionId to workbenchSettings currentWorkbenchStorage.lastCompositionId = compId; // save composition settings to workbenchSettings currentWorkbenchStorage[compId] = { id: compId, widget_id: 'widget', edit_mode: false, width, height, autoscale, adaptive }; // console.log("localStorage after persist:", currentWorkbenchStorage); // update workbenchSettings in localStorage localStorage.wkbncSettings = JSON.stringify(currentWorkbenchStorage); // console.log("localStorage after persist:", localStorage); }, updatePublishedCompsList() { // read the list of compositions from localStorage let compostionList = []; let currentLocalStrage = this.currentWorkbenchStorage(); // console.log("local Storage refresh Compositions:", currentLocalStrage); Object.keys(currentLocalStrage).map((key) => key.includes('workbench_') ? compostionList.push(currentLocalStrage[key]) : null); // console.log("local Storage refresh Compositions:", compostionList); // set them in the dropdown this.set({ compositions: compostionList }) /* read list of composition for workbench's user(bogus) Widgetic.api('compositions').then(data => { console.log("Api refresh Compositions:", data); this.set({ compositions: data }) });*/ }, copyEmbedCode(event) { event.preventDefault(); // console.log("copyEmbedCode:", this.refs.embedCodeOutput.value) copyFrom(this.refs.embedCodeOutput); }, copyPreset(event) { event.preventDefault(); let preset = JSON.parse( JSON.stringify( this.get().editor ._iframe.contentWindow.require('core/models/composition') .first() .getSkin() ) ); delete preset.uses; delete preset.metas; delete preset.widget_id; delete preset.user_id; this.set({ preset: JSON.stringify( Object.assign({ id: preset.id }, preset), null, '\t' ), }); copyFrom(this.refs.presetOutput); }, resetWorkbench() { this.disposeUnload(); localStorage.clear(); window.location.reload(); }, openStandalone() { window.open(this.get().composition._iframe.src); }, openURL(url) { window.open(url); } }, };