[common] Added plugins
This commit is contained in:
parent
33f1cc5985
commit
a0538ee3e0
|
@ -1,32 +1,33 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import { inject } from 'mobx-react';
|
import { inject, observer } from 'mobx-react';
|
||||||
import { f7 } from 'framework7-react';
|
import { f7 } from 'framework7-react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { Device } from '../../utils/device';
|
||||||
import {Device} from '../../utils/device';
|
|
||||||
|
|
||||||
const PluginsController = props => {
|
const PluginsController = inject('storeAppOptions')(observer(props => {
|
||||||
|
const { storeAppOptions } = props;
|
||||||
let configPlugins = {autostart:[]},
|
let configPlugins = {autostart:[]},
|
||||||
serverPlugins = {autostart:[]};
|
serverPlugins = {autostart:[]},
|
||||||
|
modal,
|
||||||
|
iframe;
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const onDocumentReady = () => {
|
const onDocumentReady = () => {
|
||||||
Common.Notifications.trigger('engineCreated', api => {
|
Common.Notifications.on('engineCreated', api => {
|
||||||
api.asc_registerCallback("asc_onPluginShow", showPluginModal);
|
api.asc_registerCallback("asc_onPluginShow", showPluginModal);
|
||||||
api.asc_registerCallback("asc_onPluginClose", pluginClose);
|
api.asc_registerCallback("asc_onPluginClose", pluginClose);
|
||||||
api.asc_registerCallback("asc_onPluginResize", pluginResize);
|
api.asc_registerCallback("asc_onPluginResize", pluginResize);
|
||||||
api.asc_registerCallback('asc_onPluginsInit', registerPlugins);
|
api.asc_registerCallback('asc_onPluginsInit', registerPlugins);
|
||||||
|
|
||||||
|
if(!storeAppOptions.customization || storeAppOptions.plugins !== false) {
|
||||||
|
loadPlugins();
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Common.Gateway.on('init', loadConfig);
|
Common.Gateway.on('init', loadConfig);
|
||||||
console.log('success');
|
|
||||||
};
|
};
|
||||||
|
|
||||||
onDocumentReady();
|
onDocumentReady();
|
||||||
|
|
||||||
if(!props.customization || props.plugins !== false) {
|
|
||||||
loadPlugins();
|
|
||||||
}
|
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
const api = Common.EditorApi.get();
|
const api = Common.EditorApi.get();
|
||||||
|
|
||||||
|
@ -39,6 +40,12 @@ const PluginsController = props => {
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const onDlgBtnClick = e => {
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
|
let index = $$(e.currentTarget).index();
|
||||||
|
api.asc_pluginButtonClick(index);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
const showPluginModal = (plugin, variationIndex, frameId, urlAddition) => {
|
const showPluginModal = (plugin, variationIndex, frameId, urlAddition) => {
|
||||||
let isAndroid = Device.android;
|
let isAndroid = Device.android;
|
||||||
|
@ -54,11 +61,11 @@ const PluginsController = props => {
|
||||||
let isCustomWindow = variation.get_CustomWindow(),
|
let isCustomWindow = variation.get_CustomWindow(),
|
||||||
arrBtns = variation.get_Buttons(),
|
arrBtns = variation.get_Buttons(),
|
||||||
newBtns = [],
|
newBtns = [],
|
||||||
size = variation.get_Size(); //size[0] - width, size[1] - height
|
size = variation.get_Size();
|
||||||
|
|
||||||
if (arrBtns.length) {
|
if (arrBtns.length) {
|
||||||
arrBtns.forEach((b, index) => {
|
arrBtns.forEach((b, index) => {
|
||||||
if ((props.isEdit || b.isViewer)) {
|
if ((storeAppOptions.isEdit || b.isViewer !== false)) {
|
||||||
newBtns[index] = {
|
newBtns[index] = {
|
||||||
text: b.text,
|
text: b.text,
|
||||||
attributes: {result: index}
|
attributes: {result: index}
|
||||||
|
@ -67,52 +74,45 @@ const PluginsController = props => {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// uiApp.closeModal();
|
f7.popover.close('.document-menu.modal-in', false);
|
||||||
// f7.popover.close('.document-menu.modal-in', false);
|
|
||||||
|
|
||||||
f7.dialog.create({
|
modal = f7.dialog.create({
|
||||||
title: '',
|
title: '',
|
||||||
text: '',
|
text: '',
|
||||||
content: '<div id="plugin-frame" class="">'+
|
content: '<div id="plugin-frame" class="">'+'</div>',
|
||||||
'</div>',
|
|
||||||
buttons : isCustomWindow ? undefined : newBtns
|
buttons : isCustomWindow ? undefined : newBtns
|
||||||
}).open();
|
}).open();
|
||||||
|
|
||||||
$$('#plugin-frame').html('<div class="preloader"></div>');
|
iframe = document.createElement("iframe");
|
||||||
|
|
||||||
let iframe = document.createElement("iframe");
|
|
||||||
|
|
||||||
iframe.id = frameId;
|
iframe.id = frameId;
|
||||||
iframe.name = 'pluginFrameEditor';
|
iframe.name = 'pluginFrameEditor';
|
||||||
iframe.width = '100%';
|
iframe.width = '100%';
|
||||||
iframe.height = '100%';
|
iframe.height = '100%';
|
||||||
// iframe.align = "top";
|
iframe.align = "top";
|
||||||
// iframe.frameBorder = 0;
|
iframe.frameBorder = 0;
|
||||||
// iframe.scrolling = "no";
|
iframe.scrolling = "no";
|
||||||
iframe.src = url;
|
iframe.src = url;
|
||||||
|
|
||||||
// setTimeout(function () {
|
$$('#plugin-frame').append(iframe);
|
||||||
$$('#plugin-frame').html(iframe);
|
|
||||||
// }, 100);
|
|
||||||
|
|
||||||
$$(modal).find('.modal-button').on('click', onDlgBtnClick);
|
modal.$el.find('.dialog-button').on('click', onDlgBtnClick);
|
||||||
|
|
||||||
$$(modal).css({
|
modal.$el.css({
|
||||||
margin: '0',
|
margin: '0',
|
||||||
width: '90%',
|
width: '90%',
|
||||||
left: '5%',
|
left: '5%',
|
||||||
height: 'auto',
|
height: 'auto'
|
||||||
top: '20px'
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$$(modal).find('.modal-inner').css({padding: '0'});
|
modal.$el.find('.dialog-inner').css({padding: '0'});
|
||||||
|
|
||||||
if (Common.SharedSettings.get('phone')) {
|
if (Device.phone) {
|
||||||
let height = Math.min(size[1], 240);
|
let height = Math.min(size[1], 240);
|
||||||
$$(modal).find('#plugin-frame').css({height: height + 'px'});
|
modal.$el.find('#plugin-frame').css({height: height + 'px'});
|
||||||
} else {
|
} else {
|
||||||
let height = Math.min(size[1], 500);
|
let height = Math.min(size[1], 500);
|
||||||
$$(modal).find('#plugin-frame').css({height: height + 'px'});
|
modal.$el.find('#plugin-frame').css({height: height + 'px'});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isAndroid) {
|
if (isAndroid) {
|
||||||
|
@ -122,12 +122,6 @@ const PluginsController = props => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const onDlgBtnClick = e => {
|
|
||||||
const api = Common.EditorApi.get();
|
|
||||||
let index = $$(e.currentTarget).index();
|
|
||||||
api.asc_pluginButtonClick(index);
|
|
||||||
};
|
|
||||||
|
|
||||||
const pluginClose = plugin => {
|
const pluginClose = plugin => {
|
||||||
if (iframe) {
|
if (iframe) {
|
||||||
iframe = null;
|
iframe = null;
|
||||||
|
@ -135,12 +129,12 @@ const PluginsController = props => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const pluginResize = size => {
|
const pluginResize = size => {
|
||||||
if (Common.SharedSettings.get('phone')) {
|
if (Device.phone) {
|
||||||
let height = Math.min(size[1], 240);
|
let height = Math.min(size[1], 240);
|
||||||
$$(modal).find('#plugin-frame').css({height: height + 'px'});
|
modal.$el.find('#plugin-frame').css({height: height + 'px'});
|
||||||
} else {
|
} else {
|
||||||
let height = Math.min(size[1], 500);
|
let height = Math.min(size[1], 500);
|
||||||
$$(modal).find('#plugin-frame').css({height: height + 'px'});
|
modal.$el.find('#plugin-frame').css({height: height + 'px'});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -189,7 +183,6 @@ const PluginsController = props => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const registerPlugins = plugins => {
|
const registerPlugins = plugins => {
|
||||||
const api = Common.EditorApi.get();
|
|
||||||
let arr = [];
|
let arr = [];
|
||||||
|
|
||||||
plugins.forEach(item => {
|
plugins.forEach(item => {
|
||||||
|
@ -230,6 +223,7 @@ const PluginsController = props => {
|
||||||
arr.push(plugin);
|
arr.push(plugin);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const api = Common.EditorApi.get();
|
||||||
api.asc_pluginsRegister('', arr);
|
api.asc_pluginsRegister('', arr);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -281,7 +275,7 @@ const PluginsController = props => {
|
||||||
};
|
};
|
||||||
|
|
||||||
return <></>
|
return <></>
|
||||||
};
|
}));
|
||||||
|
|
||||||
export default PluginsController;
|
export default PluginsController;
|
||||||
|
|
||||||
|
|
|
@ -15,6 +15,7 @@ import About from '../../../../common/mobile/lib/view/About';
|
||||||
import EditorUIController from '../lib/patch';
|
import EditorUIController from '../lib/patch';
|
||||||
import ErrorController from "./Error";
|
import ErrorController from "./Error";
|
||||||
import LongActionsController from "./LongActions";
|
import LongActionsController from "./LongActions";
|
||||||
|
import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
|
||||||
|
|
||||||
@inject(
|
@inject(
|
||||||
"storeAppOptions",
|
"storeAppOptions",
|
||||||
|
@ -799,6 +800,7 @@ class MainController extends Component {
|
||||||
<CommentsController />
|
<CommentsController />
|
||||||
{EditorUIController.getEditCommentControllers && EditorUIController.getEditCommentControllers()}
|
{EditorUIController.getEditCommentControllers && EditorUIController.getEditCommentControllers()}
|
||||||
<ViewCommentsController />
|
<ViewCommentsController />
|
||||||
|
<PluginsController />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -780,7 +780,7 @@ class MainController extends Component {
|
||||||
<CommentsController />
|
<CommentsController />
|
||||||
{EditorUIController.getEditCommentControllers && EditorUIController.getEditCommentControllers()}
|
{EditorUIController.getEditCommentControllers && EditorUIController.getEditCommentControllers()}
|
||||||
<ViewCommentsController />
|
<ViewCommentsController />
|
||||||
<PluginsController isEdit={this.props.storeAppOptions.isEdit} customization={this.props.storeAppOptions.customization} />
|
<PluginsController />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,6 +17,7 @@ import LongActionsController from "./LongActions";
|
||||||
import ErrorController from "./Error";
|
import ErrorController from "./Error";
|
||||||
import app from "../page/app";
|
import app from "../page/app";
|
||||||
import About from "../../../../common/mobile/lib/view/About";
|
import About from "../../../../common/mobile/lib/view/About";
|
||||||
|
import PluginsController from '../../../../common/mobile/lib/controller/Plugins.jsx';
|
||||||
|
|
||||||
@inject(
|
@inject(
|
||||||
"storeAppOptions",
|
"storeAppOptions",
|
||||||
|
@ -754,6 +755,7 @@ class MainController extends Component {
|
||||||
<AddCommentController />
|
<AddCommentController />
|
||||||
<EditCommentController />
|
<EditCommentController />
|
||||||
<ViewCommentsController />
|
<ViewCommentsController />
|
||||||
|
<PluginsController />
|
||||||
</Fragment>
|
</Fragment>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue