fix ui
This commit is contained in:
parent
0a5243837f
commit
4635dc4eec
@ -22,27 +22,17 @@ class UI {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async init() {
|
async init() {
|
||||||
// If comms exist, we need to destroy it
|
|
||||||
if (this.comms) {
|
|
||||||
this.comms.destroy();
|
|
||||||
}
|
|
||||||
if (!this.settings) {
|
|
||||||
this.settings = new Settings({
|
|
||||||
onSettingsChanged: () => this.reloadSettings(),
|
|
||||||
logger: this.logger
|
|
||||||
});
|
|
||||||
await this.settings.init();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.comms = new CommsClient('content-ui-port', null, this.commsConfig.handlers);
|
|
||||||
|
|
||||||
// initialize vuejs, but only once (check handled in initVue())
|
// initialize vuejs, but only once (check handled in initVue())
|
||||||
// we need to initialize this _after_ initializing comms.
|
// we need to initialize this _after_ initializing comms.
|
||||||
|
|
||||||
this.initVue();
|
this.initVue();
|
||||||
}
|
}
|
||||||
|
|
||||||
async initVue() {
|
async initVue() {
|
||||||
|
if (this.storeConfig) {
|
||||||
this.vuexStore = createStore(this.storeConfig);
|
this.vuexStore = createStore(this.storeConfig);
|
||||||
|
}
|
||||||
|
|
||||||
this.initUi();
|
this.initUi();
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -52,10 +42,18 @@ class UI {
|
|||||||
const uwid = 'not-so-random-id'
|
const uwid = 'not-so-random-id'
|
||||||
|
|
||||||
const rootDiv = document.createElement('div');
|
const rootDiv = document.createElement('div');
|
||||||
rootDiv.setAttribute('style', `position: ${uiConfig.style?.position ?? 'relative'}; width: ${uiConfig.style?.width ?? '100%'}; height: ${uiConfig.style?.height ?? '100%'}; ${uiConfig.additionalStyle}`);
|
|
||||||
rootDiv.setAttribute('id', uwid);
|
|
||||||
|
|
||||||
if (this.uiConfig.parentElement) {
|
try {
|
||||||
|
rootDiv.setAttribute('style', `position: ${this.uiConfig.style?.position ?? 'relative'}; width: ${this.uiConfig.style?.width ?? '100%'}; height: ${this.uiConfig.style?.height ?? '100%'}; ${this.uiConfig.additionalStyle ?? ''}`);
|
||||||
|
rootDiv.setAttribute('id', uwid);
|
||||||
|
} catch (e) {
|
||||||
|
console.error("ERROR:", e)
|
||||||
|
}
|
||||||
|
|
||||||
|
console.warn('UI: init 3', this.uiConfig);
|
||||||
|
|
||||||
|
|
||||||
|
if (this.uiConfig?.parentElement) {
|
||||||
this.uiConfig.parentElement.appendChild(rootDiv);
|
this.uiConfig.parentElement.appendChild(rootDiv);
|
||||||
} else {
|
} else {
|
||||||
document.body.appendChild(rootDiv);
|
document.body.appendChild(rootDiv);
|
||||||
@ -63,9 +61,11 @@ class UI {
|
|||||||
|
|
||||||
this.element = rootDiv;
|
this.element = rootDiv;
|
||||||
|
|
||||||
createApp(this.uiConfig.component)
|
const app = createApp(this.uiConfig.component);
|
||||||
.use(this.vuexStore)
|
if (this.vuexStore) {
|
||||||
.mount(`${uwid}`);
|
app.use(this.vuexStore);
|
||||||
|
}
|
||||||
|
app.mount(`#${uwid}`);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -79,7 +79,7 @@ class UI {
|
|||||||
}
|
}
|
||||||
|
|
||||||
destroy() {
|
destroy() {
|
||||||
this.comms?.destroy();
|
// this.comms?.destroy();
|
||||||
this.element?.remove();
|
this.element?.remove();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user