Your IP : 216.73.216.86
import { BitrixVue, VueCreateAppResult } from 'ui.vue3';
import { Type, Runtime, Event as CoreEvent, Dom } from 'main.core';
import { EventEmitter, BaseEvent } from 'main.core.events';
import { Loader } from 'main.loader';
import { Content } from './components/content';
import { Message } from './components/message';
import { Error } from './components/error';
import { EngineOptions } from './internal/types';
import './css/style.css';
export class Engine
{
#parentOrigin: ?string = '';
#id: string = '';
#rootNode: ?HTMLElement;
#data: ?{};
#error: ?string;
#clickable: boolean = false;
#application: VueCreateAppResult;
#contentComponent: Object;
constructor(options: EngineOptions): void
{
this.#id = Type.isString(options.id) ? options.id : '';
this.#rootNode = document.querySelector(`#${this.#id}`);
this.#parentOrigin = Type.isString(options.origin) ? options.origin : null;
this.#data = Type.isObject(options.data) ? options.data : null;
this.#error = Type.isString(options.error) ? options.error : null;
this.#clickable = Type.isBoolean(options.clickable) ? options.clickable : false;
this.#contentComponent = Runtime.clone(Content);
}
render()
{
if (this.#rootNode)
{
this.loader = new Loader({
target: this.#rootNode,
});
this.#contentComponent.template = this.#rootNode.innerHTML || '';
this.#contentComponent.template = `<div>${this.#contentComponent.template}</div>`;
this.#bindEvents();
this.#createApp();
}
}
showLoader()
{
this.loader.show();
}
hideLoader()
{
this.loader.hide();
}
fetch(params: {} = {})
{
if (params instanceof Event)
{
params = {};
}
this.#message(
'fetchData',
params,
);
}
openApplication(params: {} = {})
{
this.#message(
'openApplication',
params,
);
}
openPath(path: string)
{
this.#message(
'openPath',
{ path },
);
}
#message(name: string, params: {} = {})
{
window.parent.postMessage(
{
name,
params,
origin: this.#id,
},
this.#parentOrigin,
);
}
#bindEvents() {
CoreEvent.bind(window, 'message', this.#onMessage.bind(this));
}
#onMessage(event)
{
if (
event.data
&& event.data.origin
&& event.data.name
&& event.data.params
&& Type.isObject(event.data.params)
)
{
if (event.data.origin !== this.#id)
{
return;
}
if (
event.data.name === 'setData'
&& Type.isObject(event.data.params.data)
)
{
EventEmitter.emit('landing:widgetvue:engine:onSetData', {
data: event.data.params.data,
});
}
if (
event.data.name === 'setError'
&& Type.isObject(event.data.params.error)
&& Type.isString(event.data.params.error.message)
)
{
EventEmitter.emit('landing:widgetvue:engine:onError', {
message: event.data.params.error.message,
});
}
if (event.data.name === 'getSize')
{
// do nothing, just for refreshFrameSize
}
this.#refreshFrameSize();
}
}
#refreshFrameSize()
{
requestAnimationFrame(() => {
this.#message(
'setSize',
{
size: this.#rootNode.offsetHeight,
},
);
});
}
#createApp(): void
{
const context = this;
const defaultError = this.#error ? { message: this.#error } : null;
this.#application = BitrixVue.createApp({
name: this.#id,
components: {
Message, Error, Content: this.#contentComponent,
},
props: {
defaultData: {
type: Object, default: null,
},
},
data()
{
return {
message: null,
error: defaultError,
};
},
created()
{
this.$bitrix.eventEmitter.subscribe('landing:widgetvue:engine:startContentLoad', this.onShowLoader);
this.$bitrix.eventEmitter.subscribe('landing:widgetvue:engine:endContentLoad', this.onHideLoader);
this.$bitrix.eventEmitter.subscribe('landing:widgetvue:engine:onMessage', this.onShowMessage);
this.$bitrix.eventEmitter.subscribe('landing:widgetvue:engine:onHideMessage', this.onHideMessage);
EventEmitter.subscribe('landing:widgetvue:engine:onError', this.onShowError);
},
mounted()
{
this.$bitrix.Application.get().#refreshFrameSize();
this.$nextTick(() => {
const links = this.$el.getElementsByTagName('a');
if (links.length > 0)
{
[].slice.call(links).map(link => {
CoreEvent.bind(link, 'click', event => {
event.preventDefault();
event.stopPropagation();
});
});
}
});
},
beforeUnmount()
{
this.$bitrix.eventEmitter.unsubscribe('landing:widgetvue:engine:startContentLoad', this.onShowLoader);
this.$bitrix.eventEmitter.unsubscribe('landing:widgetvue:engine:endContentLoad', this.onHideLoader);
this.$bitrix.eventEmitter.unsubscribe('landing:widgetvue:engine:onMessage', this.onShowMessage);
this.$bitrix.eventEmitter.unsubscribe('landing:widgetvue:engine:onHideMessage', this.onHideMessage);
EventEmitter.unsubscribe('landing:widgetvue:engine:onError', this.onShowError);
},
methods: {
onShowLoader()
{
// todo: move loader to comp
this.$bitrix.Application.get().showLoader();
},
onHideLoader()
{
// todo: move loader to comp
this.$bitrix.Application.get().hideLoader();
},
onShowMessage(event: BaseEvent)
{
const message = event.getData()?.message || null;
this.message = message ? { message } : null;
},
onHideMessage()
{
this.message = null;
},
onShowError(event: BaseEvent)
{
// todo: set error link?
const message = event.getData()?.message || null;
this.error = message ? { message } : null;
this.onHideLoader();
},
},
beforeCreate(): void
{
this.$bitrix.Application.set(context);
},
template: `
<div class="widget">
<Error
v-show="error !== null"
v-bind="error && error.message !== null ? error : {}"
/>
<Message
v-show="message !== null"
v-bind="message && message.message !== null ? message : {}"
/>
<Content
v-show="message === null && error === null"
:defaultData="defaultData"
:clickable=${this.#clickable}
/>
</div>
`,
}, {
defaultData: this.#data,
});
this.#application.mount(this.#rootNode);
}
}