[common] Make plugins
This commit is contained in:
SergeyEzhin
parent
8fb9119f01
commit
33f1cc5985
289
apps/common/mobile/lib/controller/Plugins.jsx
Normal file
289
apps/common/mobile/lib/controller/Plugins.jsx
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { inject } from 'mobx-react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {Device} from '../../utils/device';
|
||||
|
||||
const PluginsController = props => {
|
||||
let configPlugins = {autostart:[]},
|
||||
serverPlugins = {autostart:[]};
|
||||
|
||||
useEffect(() => {
|
||||
const onDocumentReady = () => {
|
||||
Common.Notifications.trigger('engineCreated', api => {
|
||||
api.asc_registerCallback("asc_onPluginShow", showPluginModal);
|
||||
api.asc_registerCallback("asc_onPluginClose", pluginClose);
|
||||
api.asc_registerCallback("asc_onPluginResize", pluginResize);
|
||||
api.asc_registerCallback('asc_onPluginsInit', registerPlugins);
|
||||
});
|
||||
|
||||
Common.Gateway.on('init', loadConfig);
|
||||
console.log('success');
|
||||
};
|
||||
|
||||
onDocumentReady();
|
||||
|
||||
if(!props.customization || props.plugins !== false) {
|
||||
loadPlugins();
|
||||
}
|
||||
|
||||
return () => {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
api.asc_unregisterCallback("asc_onPluginShow", showPluginModal);
|
||||
api.asc_unregisterCallback("asc_onPluginClose", pluginClose);
|
||||
api.asc_unregisterCallback("asc_onPluginResize", pluginResize);
|
||||
api.asc_unregisterCallback('asc_onPluginsInit', registerPlugins);
|
||||
|
||||
Common.Gateway.off('init', loadConfig);
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
const showPluginModal = (plugin, variationIndex, frameId, urlAddition) => {
|
||||
let isAndroid = Device.android;
|
||||
let variation = plugin.get_Variations()[variationIndex];
|
||||
|
||||
if (variation.get_Visual()) {
|
||||
let url = variation.get_Url();
|
||||
url = ((plugin.get_BaseUrl().length == 0) ? url : plugin.get_BaseUrl()) + url;
|
||||
|
||||
if (urlAddition)
|
||||
url += urlAddition;
|
||||
|
||||
let isCustomWindow = variation.get_CustomWindow(),
|
||||
arrBtns = variation.get_Buttons(),
|
||||
newBtns = [],
|
||||
size = variation.get_Size(); //size[0] - width, size[1] - height
|
||||
|
||||
if (arrBtns.length) {
|
||||
arrBtns.forEach((b, index) => {
|
||||
if ((props.isEdit || b.isViewer)) {
|
||||
newBtns[index] = {
|
||||
text: b.text,
|
||||
attributes: {result: index}
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// uiApp.closeModal();
|
||||
// f7.popover.close('.document-menu.modal-in', false);
|
||||
|
||||
f7.dialog.create({
|
||||
title: '',
|
||||
text: '',
|
||||
content: '<div id="plugin-frame" class="">'+
|
||||
'</div>',
|
||||
buttons : isCustomWindow ? undefined : newBtns
|
||||
}).open();
|
||||
|
||||
$$('#plugin-frame').html('<div class="preloader"></div>');
|
||||
|
||||
let iframe = document.createElement("iframe");
|
||||
|
||||
iframe.id = frameId;
|
||||
iframe.name = 'pluginFrameEditor';
|
||||
iframe.width = '100%';
|
||||
iframe.height = '100%';
|
||||
// iframe.align = "top";
|
||||
// iframe.frameBorder = 0;
|
||||
// iframe.scrolling = "no";
|
||||
iframe.src = url;
|
||||
|
||||
// setTimeout(function () {
|
||||
$$('#plugin-frame').html(iframe);
|
||||
// }, 100);
|
||||
|
||||
$$(modal).find('.modal-button').on('click', onDlgBtnClick);
|
||||
|
||||
$$(modal).css({
|
||||
margin: '0',
|
||||
width: '90%',
|
||||
left: '5%',
|
||||
height: 'auto',
|
||||
top: '20px'
|
||||
});
|
||||
|
||||
$$(modal).find('.modal-inner').css({padding: '0'});
|
||||
|
||||
if (Common.SharedSettings.get('phone')) {
|
||||
let height = Math.min(size[1], 240);
|
||||
$$(modal).find('#plugin-frame').css({height: height + 'px'});
|
||||
} else {
|
||||
let height = Math.min(size[1], 500);
|
||||
$$(modal).find('#plugin-frame').css({height: height + 'px'});
|
||||
}
|
||||
|
||||
if (isAndroid) {
|
||||
$$('.view.collaboration-root-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
|
||||
$$('.view.collaboration-root-view .navbar').prependTo('.view.collaboration-root-view > .pages > .page');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onDlgBtnClick = e => {
|
||||
const api = Common.EditorApi.get();
|
||||
let index = $$(e.currentTarget).index();
|
||||
api.asc_pluginButtonClick(index);
|
||||
};
|
||||
|
||||
const pluginClose = plugin => {
|
||||
if (iframe) {
|
||||
iframe = null;
|
||||
}
|
||||
};
|
||||
|
||||
const pluginResize = size => {
|
||||
if (Common.SharedSettings.get('phone')) {
|
||||
let height = Math.min(size[1], 240);
|
||||
$$(modal).find('#plugin-frame').css({height: height + 'px'});
|
||||
} else {
|
||||
let height = Math.min(size[1], 500);
|
||||
$$(modal).find('#plugin-frame').css({height: height + 'px'});
|
||||
}
|
||||
};
|
||||
|
||||
const getPlugins = (pluginsData, fetchFunction) => {
|
||||
if (!pluginsData || pluginsData.length < 1)
|
||||
return Promise.resolve([]);
|
||||
|
||||
fetchFunction = fetchFunction || function (url) {
|
||||
return fetch(url)
|
||||
.then(function(response) {
|
||||
if (response.ok) return response.json();
|
||||
else return Promise.reject(url);
|
||||
}).then(function(json) {
|
||||
json.baseUrl = url.substring(0, url.lastIndexOf("config.json"));
|
||||
return json;
|
||||
});
|
||||
};
|
||||
|
||||
let loaded = [];
|
||||
|
||||
return pluginsData.map(fetchFunction).reduce(function (previousPromise, currentPromise) {
|
||||
return previousPromise
|
||||
.then(function()
|
||||
{
|
||||
return currentPromise;
|
||||
})
|
||||
.then(function(item)
|
||||
{
|
||||
loaded.push(item);
|
||||
return Promise.resolve(item);
|
||||
})
|
||||
.catch(function(item)
|
||||
{
|
||||
return Promise.resolve(item);
|
||||
});
|
||||
|
||||
}, Promise.resolve())
|
||||
.then(function ()
|
||||
{
|
||||
return Promise.resolve(loaded);
|
||||
});
|
||||
};
|
||||
|
||||
const loadConfig = data => {
|
||||
configPlugins.config = data.config.plugins;
|
||||
};
|
||||
|
||||
const registerPlugins = plugins => {
|
||||
const api = Common.EditorApi.get();
|
||||
let arr = [];
|
||||
|
||||
plugins.forEach(item => {
|
||||
let plugin = new Asc.CPlugin();
|
||||
|
||||
plugin.set_Name(item['name']);
|
||||
plugin.set_Guid(item['guid']);
|
||||
plugin.set_BaseUrl(item['baseUrl']);
|
||||
|
||||
let variations = item['variations'],
|
||||
variationsArr = [];
|
||||
|
||||
variations.forEach(itemVar => {
|
||||
let variation = new Asc.CPluginVariation();
|
||||
|
||||
variation.set_Description(itemVar['description']);
|
||||
variation.set_Url(itemVar['url']);
|
||||
variation.set_Icons(itemVar['icons']);
|
||||
variation.set_Visual(itemVar['isVisual']);
|
||||
variation.set_CustomWindow(itemVar['isCustomWindow']);
|
||||
variation.set_System(itemVar['isSystem']);
|
||||
variation.set_Viewer(itemVar['isViewer']);
|
||||
variation.set_EditorsSupport(itemVar['EditorsSupport']);
|
||||
variation.set_Modal(itemVar['isModal']);
|
||||
variation.set_InsideMode(itemVar['isInsideMode']);
|
||||
variation.set_InitDataType(itemVar['initDataType']);
|
||||
variation.set_InitData(itemVar['initData']);
|
||||
variation.set_UpdateOleOnResize(itemVar['isUpdateOleOnResize']);
|
||||
variation.set_Buttons(itemVar['buttons']);
|
||||
variation.set_Size(itemVar['size']);
|
||||
variation.set_InitOnSelectionChanged(itemVar['initOnSelectionChanged']);
|
||||
variation.set_Events(itemVar['events']);
|
||||
|
||||
variationsArr.push(variation);
|
||||
});
|
||||
|
||||
plugin["set_Variations"](variationsArr);
|
||||
arr.push(plugin);
|
||||
});
|
||||
|
||||
api.asc_pluginsRegister('', arr);
|
||||
};
|
||||
|
||||
const mergePlugins = () => {
|
||||
if (serverPlugins.plugins !== undefined && configPlugins.plugins !== undefined) {
|
||||
let arr = [],
|
||||
plugins = configPlugins;
|
||||
|
||||
if (plugins.plugins && plugins.plugins.length > 0) {
|
||||
arr = plugins.plugins;
|
||||
}
|
||||
|
||||
plugins = serverPlugins;
|
||||
|
||||
if (plugins.plugins && plugins.plugins.length > 0) {
|
||||
arr = arr.concat(plugins.plugins);
|
||||
}
|
||||
|
||||
registerPlugins(arr);
|
||||
}
|
||||
};
|
||||
|
||||
const loadPlugins = () => {
|
||||
if (configPlugins.config) {
|
||||
getPlugins(configPlugins.config.pluginsData)
|
||||
.then(function(loaded)
|
||||
{
|
||||
configPlugins.plugins = loaded;
|
||||
mergePlugins();
|
||||
});
|
||||
} else {
|
||||
configPlugins.plugins = false;
|
||||
}
|
||||
|
||||
let server_plugins_url = '../../../../plugins.json';
|
||||
|
||||
Common.Utils.loadConfig(server_plugins_url, function (obj) {
|
||||
if (obj != 'error') {
|
||||
serverPlugins.config = obj;
|
||||
getPlugins(serverPlugins.config.pluginsData)
|
||||
.then(function(loaded)
|
||||
{
|
||||
serverPlugins.plugins = loaded;
|
||||
mergePlugins();
|
||||
});
|
||||
} else
|
||||
serverPlugins.plugins = false;
|
||||
});
|
||||
};
|
||||
|
||||
return <></>
|
||||
};
|
||||
|
||||
export default PluginsController;
|
||||
|
||||
|
||||
|
||||
|
|
@ -13,6 +13,7 @@ import ErrorController from "./Error";
|
|||
import LongActionsController from "./LongActions";
|
||||
import {LocalStorage} from "../../../../common/mobile/utils/LocalStorage";
|
||||
import About from '../../../../common/mobile/lib/view/About';
|
||||
import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
|
||||
|
||||
@inject(
|
||||
"storeFocusObjects",
|
||||
|
|
@ -779,6 +780,7 @@ class MainController extends Component {
|
|||
<CommentsController />
|
||||
{EditorUIController.getEditCommentControllers && EditorUIController.getEditCommentControllers()}
|
||||
<ViewCommentsController />
|
||||
<PluginsController isEdit={this.props.storeAppOptions.isEdit} customization={this.props.storeAppOptions.customization} />
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue