ws-office/patches/web-apps-mobile/slide/patch.jsx

671 lines
25 KiB
JavaScript

import React, {Fragment} from 'react';
import {Link} from 'framework7-react';
import { Device } from '../../web-apps/apps/common/mobile/utils/device';
import {
AddCommentController,
EditCommentController,
} from "../../web-apps/apps/common/mobile/lib/controller/collaboration/Comments";
const EditorUIController = () => {
return null
};
EditorUIController.isSupportEditFeature = () => {
return true;
};
/**
This is the file where the magic happens.
Try to figure out a working version from the old commits
and my hunches from hacking around in the old webapp editor
*/
// Code taken from
// https://github.com/ONLYOFFICE/web-apps/commit/0277ac930611db0637100a2c5e6891ea495610a8#diff-755ea3df479f23211982e28466b363be9df22cb92f4a5cf9126ec9e227d6909bL66-L72
EditorUIController.getToolbarOptions = (options) => {
// console.log('EditorUIController.getToolbarOptions' ,options);
return (
<Fragment>
<Link className={options.disabled && 'disabled'} id='btn-edit' icon='icon-edit-settings' href={false} onClick={() => options.onEditClick()}></Link>
<Link className={options.disabled && 'disabled'} id='btn-add' icon='icon-plus' href={false} onClick={() => options.onAddClick()}></Link>
</Fragment>
);
};
// Code taken from
// https://github.com/ONLYOFFICE/web-apps/commit/0277ac930611db0637100a2c5e6891ea495610a8
EditorUIController.getUndoRedo = (options) => {
// console.log('EditorUIController.getUndoRedo', options);
return (
<Fragment>
<Link icon='icon-undo' className={options.disabledUndo && 'disabled'} onClick={() => options.onUndoClick()}></Link>
<Link icon='icon-redo' className={options.disabledRedo && 'disabled'} onClick={() => options.onRedoClick()}></Link>
</Fragment>
);
}
// Code taken from
// https://github.com/ONLYOFFICE/web-apps/commit/45a9058da461a9da67ccb389faad08bce8cbda55#diff-1d89c904c6cd5147fb6942c09c4d12a2f3a3200a61b3e29b1a42a1263e57848bL307-L308
EditorUIController.getEditCommentControllers = () => {
// console.log('EditorUIController.getEditCommentControllers');
return (
<Fragment>
<AddCommentController />
<EditCommentController />
</Fragment>
);
}
// Code taken from
// https://github.com/ONLYOFFICE/web-apps/commit/fe1a9e16d3c18cb5e9c2cc1aa512649c348aa283#diff-1d89c904c6cd5147fb6942c09c4d12a2f3a3200a61b3e29b1a42a1263e57848bL233-L259
EditorUIController.initFonts = (storeTextSettings) => {
// console.log('EditorUIController.initFonts', storeTextSettings);
const api = Common.EditorApi.get();
api.asc_registerCallback('asc_onInitEditorFonts', (fonts, select) => {
// console.log('asc_onInitEditorFonts', fonts, select);
storeTextSettings.initEditorFonts(fonts, select);
});
api.asc_registerCallback('asc_onFontFamily', (font) => {
// console.log('asc_onFontFamily', font);
storeTextSettings.resetFontName(font);
});
api.asc_registerCallback('asc_onFontSize', (size) => {
// console.log('asc_onFontSize', size);
storeTextSettings.resetFontSize(size);
});
api.asc_registerCallback('asc_onBold', (isBold) => {
// console.log('asc_onBold', isBold);
storeTextSettings.resetIsBold(isBold);
});
api.asc_registerCallback('asc_onItalic', (isItalic) => {
// console.log('asc_onItalic', isItalic);
storeTextSettings.resetIsItalic(isItalic);
});
api.asc_registerCallback('asc_onUnderline', (isUnderline) => {
// console.log('asc_onUnderline', isUnderline);
storeTextSettings.resetIsUnderline(isUnderline);
});
api.asc_registerCallback('asc_onStrikeout', (isStrikeout) => {
// console.log('asc_onStrikeout', isStrikeout);
storeTextSettings.resetIsStrikeout(isStrikeout);
});
};
// Code taken from
// https://github.com/ONLYOFFICE/web-apps/commit/fe1a9e16d3c18cb5e9c2cc1aa512649c348aa283#diff-1d89c904c6cd5147fb6942c09c4d12a2f3a3200a61b3e29b1a42a1263e57848bL210-L223
EditorUIController.initEditorStyles = (storeSlideSettings) => {
// console.log('EditorUIController.initEditorStyles', storeSlideSettings);
const api = Common.EditorApi.get();
api.asc_registerCallback('asc_onInitEditorStyles', themes => {
// themes is an array of array with index 0 representing defaultThemes and 1 representing documentThemes
// Inspired by what's done in /view/edit/EditSlide.jsx
let defaultThemes = themes[0];
let docThemes = themes[1];
let arrayThemes = [];
defaultThemes.forEach(function(theme, index) {
arrayThemes.push({
themeId : theme.get_Index(),
tip : theme.get_Name(),
offsety : index * 40
});
});
docThemes.forEach(function(theme) {
arrayThemes.push({
imageUrl: theme.get_Image(),
themeId : theme.get_Index(),
tip : theme.get_Name(),
offsety : 0
});
});
storeSlideSettings.addArrayThemes(arrayThemes);
});
api.asc_registerCallback('asc_onUpdateThemeIndex', themeId => {
// console.log(themeId);
storeSlideSettings.changeSlideThemeIndex(themeId);
});
api.asc_registerCallback('asc_onUpdateLayout', layouts => {
// console.log(layouts);
storeSlideSettings.addArrayLayouts(layouts);
});
}
// Code taken from
// https://github.com/ONLYOFFICE/web-apps/commit/fe1a9e16d3c18cb5e9c2cc1aa512649c348aa283#diff-1d89c904c6cd5147fb6942c09c4d12a2f3a3200a61b3e29b1a42a1263e57848bL202-L208
EditorUIController.initFocusObjects = (storeFocusObjects) => {
storeFocusObjects.intf = EditorUIController.Intf(storeFocusObjects);
// console.log('EditorUIController.initFocusObjects', storeFocusObjects);
const api = Common.EditorApi.get();
api.asc_registerCallback('asc_onFocusObject', objects => {
// console.log('asc_onFocusObject', objects);
storeFocusObjects.resetFocusObjects(objects);
});
}
// Code taken from
// https://github.com/ONLYOFFICE/web-apps/commit/fe1a9e16d3c18cb5e9c2cc1aa512649c348aa283#diff-1d89c904c6cd5147fb6942c09c4d12a2f3a3200a61b3e29b1a42a1263e57848bL318-L322
EditorUIController.initTableTemplates = (storeTableSettings) => {
// console.log('EditorUIController.initTableTemplates', storeTableSettings);
const api = Common.EditorApi.get();
api.asc_registerCallback('asc_onInitTableTemplates', (templates) => {
// console.log('asc_onInitTableTemplates', templates);
storeTableSettings.initTableTemplates(templates);
});
}
// Code taken from
// https://github.com/ONLYOFFICE/web-apps/commit/fe1a9e16d3c18cb5e9c2cc1aa512649c348aa283#diff-1d89c904c6cd5147fb6942c09c4d12a2f3a3200a61b3e29b1a42a1263e57848bL225-L227
EditorUIController.initThemeColors = () => {
// console.log('EditorUIController.initThemeColors');
const api = Common.EditorApi.get();
api.asc_registerCallback('asc_onSendThemeColors', (colors, standart_colors) => {
// console.log('asc_onSendThemeColors', colors, standart_colors);
Common.Utils.ThemeColor.setColors(colors, standart_colors);
});
}
// Code taken from
// https://github.com/ONLYOFFICE/web-apps/commit/45a9058da461a9da67ccb389faad08bce8cbda55#diff-1d89c904c6cd5147fb6942c09c4d12a2f3a3200a61b3e29b1a42a1263e57848bL264-L270
EditorUIController.updateChartStyles = (storeChartSettings, storeFocusObjects) => {
// console.log('EditorUIController.updateChartStyles', storeChartSettings, storeFocusObjects);
const api = Common.EditorApi.get();
api.asc_registerCallback('asc_onUpdateChartStyles', () => {
// console.log('asc_onUpdateChartStyles', storeFocusObjects.chartObject);
if (storeFocusObjects.chartObject && storeFocusObjects.chartObject.get_ChartProperties()) {
// console.log('we in');
storeChartSettings.updateChartStyles(api.asc_getChartPreviews(storeFocusObjects.chartObject.get_ChartProperties().getType()));
}
});
}
// Code taken from
// https://github.com/ONLYOFFICE/web-apps/commit/fe1a9e16d3c18cb5e9c2cc1aa512649c348aa283#diff-f711cbc9449c97e0d6394cf70e9c04eeca1d9e520a1f2e7b390b1a5bc5acd82d
EditorUIController.ContextMenu = {
mapMenuItems: (contextMenu) => {
// console.log('EditorUIController.ContextMenu.mapMenuItems', contextMenu);
if ( !Common.EditorApi ) return [];
const { t } = contextMenu.props;
const _t = t("ContextMenu", { returnObjects: true });
const { isEdit, canViewComments, canReview, isDisconnected } = contextMenu.props;
const { isViewer, isProtected } = contextMenu.props;
// This probably needs to be refired
if(!isEdit || isViewer || isProtected)
return EditorUIController.ContextMenu.mapMenuItemsReadOnly(contextMenu);
const api = Common.EditorApi.get();
const stack = api.getSelectedElements();
const canCopy = api.can_CopyCut();
let itemsIcon = [],
itemsText = [];
if ( canCopy ) {
itemsIcon.push({
event: 'copy',
icon: 'icon-copy'
});
}
if ( canViewComments && contextMenu.isComments && !isEdit ) {
itemsText.push({
caption: _t.menuViewComment,
event: 'viewcomment'
});
}
let isText = false,
isTable = false,
isImage = false,
isChart = false,
isShape = false,
isLink = false,
lockedText = false,
lockedTable = false,
lockedImage = false,
lockedHeader = false;
stack.forEach(item => {
const objectType = item.get_ObjectType(),
objectValue = item.get_ObjectValue();
if ( objectType == Asc.c_oAscTypeSelectElement.Header ) {
lockedHeader = objectValue.get_Locked();
} else
if ( objectType == Asc.c_oAscTypeSelectElement.Paragraph ) {
lockedText = objectValue.get_Locked();
isText = true;
} else
if ( objectType == Asc.c_oAscTypeSelectElement.Image ) {
lockedImage = objectValue.get_Locked();
if ( objectValue && objectValue.get_ChartProperties() ) {
isChart = true;
} else
if ( objectValue && objectValue.get_ShapeProperties() ) {
isShape = true;
} else {
isImage = true;
}
} else
if ( objectType == Asc.c_oAscTypeSelectElement.Table ) {
lockedTable = objectValue.get_Locked();
isTable = true;
} else
if ( objectType == Asc.c_oAscTypeSelectElement.Hyperlink ) {
isLink = true;
}
});
if ( stack.length > 0 ) {
const swapItems = function(items, indexBefore, indexAfter) {
items[indexAfter] = items.splice(indexBefore, 1, items[indexAfter])[0];
};
if ( isEdit && !isDisconnected ) {
if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader && canCopy ) {
itemsIcon.push({
event: 'cut',
icon: 'icon-cut'
});
// Swap 'Copy' and 'Cut'
swapItems(itemsIcon, 0, 1);
}
if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ) {
itemsIcon.push({
event: 'paste',
icon: 'icon-paste'
});
}
if ( isTable && api.CheckBeforeMergeCells() && !lockedTable && !lockedHeader) {
itemsText.push({
caption: _t.menuMerge,
event: 'merge'
});
}
if ( isTable && api.CheckBeforeSplitCells() && !lockedTable && !lockedHeader ) {
itemsText.push({
caption: _t.menuSplit,
event: 'split'
});
}
if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ) {
itemsText.push({
caption: _t.menuDelete,
event: 'delete'
});
}
if ( isTable && !lockedTable && !lockedText && !lockedHeader ) {
itemsText.push({
caption: _t.menuDeleteTable,
event: 'deletetable'
});
}
if ( !lockedText && !lockedTable && !lockedImage && !lockedHeader ){
itemsText.push({
caption: _t.menuEdit,
event: 'edit'
});
}
if ( !!api.can_AddHyperlink() && !lockedHeader) {
itemsText.push({
caption: _t.menuAddLink,
event: 'addlink'
});
}
if(isLink && !lockedHeader) {
itemsText.push({
caption: _t.menuEditLink,
event: 'editlink'
});
}
if ( canReview ) {
if (contextMenu.inRevisionChange) {
itemsText.push({
caption: _t.menuReviewChange,
event: 'reviewchange'
});
} else {
itemsText.push({
caption: _t.menuReview,
event: 'review'
});
}
}
if ( contextMenu.isComments && canViewComments ) {
itemsText.push({
caption: _t.menuViewComment,
event: 'viewcomment'
});
}
const isObject = isShape || isChart || isImage || isTable;
const hideAddComment = !canViewComments || api.can_AddQuotedComment() === false || lockedText || lockedTable || lockedImage || lockedHeader || (!isText && isObject);
if ( !hideAddComment ) {
itemsText.push({
caption: _t.menuAddComment,
event: 'addcomment'
});
}
}
}
if ( isLink ) {
itemsText.push({
caption: _t.menuOpenLink,
event: 'openlink'
});
}
if ( Device.phone && itemsText.length > 2 ) {
contextMenu.extraItems = itemsText.splice(2,itemsText.length, {
caption: _t.menuMore,
event: 'showActionSheet'
});
}
const menuItems = itemsIcon.concat(itemsText);
// console.log('EditorUIController.ContextMenu.mapMenuItems', menuItems);
return menuItems;
} ,
handleMenuItemClick: (contextMenu, action) => {
// console.log('EditorUIController.ContextMenu.handleMenuItemClick', contextMenu, action);
const api = Common.EditorApi.get();
switch (action) {
case 'edit':
setTimeout(() => {
contextMenu.props.openOptions('edit');
}, 0);
return true;
case 'addcomment':
Common.Notifications.trigger('addcomment');
return true;
case 'merge':
api.MergeCells();
return true;
case 'delete':
api.asc_Remove();
return true;
case 'deletetable':
api.remTable();
return true;
case 'editlink':
setTimeout(() => {
contextMenu.props.openOptions('edit', 'link');
}, 400)
return true;
}
return false;
},
// This method handles the menu items shown when the user is in edit mode but
// can't edit the form i.e: in viewer mode or when the document is protected
// This is mostly a copy of the else statement of ContextMenu.initMenuItems
// with the bare minimum modifications so it can execute.
// It is done that way on purpose even if some code ends up duplicated
// This should make noticing and following Onlyoffice changes easier
mapMenuItemsReadOnly: (contextMenu) => {
const { t } = contextMenu.props;
const _t = t("ContextMenu", { returnObjects: true });
const { isEdit, isDisconnected, isVersionHistoryMode } = contextMenu.props;
const { isComments, canViewComments, canCoAuthoring, canComments } = contextMenu.props;
const api = Common.EditorApi.get();
const stack = api.getSelectedElements();
const canCopy = api.can_CopyCut();
let itemsIcon = [],
itemsText = [];
let isText = false,
isTable = false,
isImage = false,
isChart = false,
isShape = false,
isLink = false,
isSlide = false,
isObject,
locked = false;
stack.forEach(item => {
const objectType = item.get_ObjectType(),
objectValue = item.get_ObjectValue();
locked = typeof objectValue.get_Locked === 'function' ? objectValue.get_Locked() : false;
if (objectType == Asc.c_oAscTypeSelectElement.Paragraph) {
isText = true;
} else if (objectType == Asc.c_oAscTypeSelectElement.Image) {
isImage = true;
} else if (objectType == Asc.c_oAscTypeSelectElement.Chart) {
isChart = true;
} else if (objectType == Asc.c_oAscTypeSelectElement.Shape) {
isShape = true;
} else if (objectType == Asc.c_oAscTypeSelectElement.Table) {
isTable = true;
} else if (objectType == Asc.c_oAscTypeSelectElement.Hyperlink) {
isLink = true;
} else if (objectType == Asc.c_oAscTypeSelectElement.Slide) {
isSlide = true;
}
});
isObject = isText || isImage || isChart || isShape || isTable;
if (canCopy && isObject) {
itemsIcon.push({
event: 'copy',
icon: 'icon-copy'
});
}
if(!isDisconnected && !isVersionHistoryMode) {
if (canViewComments && isComments && !isEdit) {
itemsText.push({
caption: _t.menuViewComment,
event: 'viewcomment'
});
}
if (!isChart && api.can_AddQuotedComment() !== false && canCoAuthoring && canComments && !locked) {
itemsText.push({
caption: _t.menuAddComment,
event: 'addcomment'
});
}
}
if (isLink) {
itemsText.push({
caption: _t.menuOpenLink,
event: 'openlink'
});
}
return itemsIcon.concat(itemsText);
}
};
// This objects holds the mysterious functions in focusObjects.js inside the intf object
// These for now are based on the latest valid implementation from the mobile editor
// Code taken from
// https://github.com/ONLYOFFICE/web-apps/commit/fe1a9e16d3c18cb5e9c2cc1aa512649c348aa283#diff-1a8252788e3c9baa4e6bcdd6a91d4718fcf3ac90f0f12b4e3263f9cccba53f8d
EditorUIController.Intf = function (storeFocusObjects) {
var obj = {};
obj.filterFocusObjects = () => {
const _settings = [];
let no_text = true;
for (let object of storeFocusObjects._focusObjects) {
const type = object.get_ObjectType(),
objectValue = object.get_ObjectValue();
if (Asc.c_oAscTypeSelectElement.Paragraph == type) {
if ( !objectValue.get_Locked() )
no_text = false;
} else if (Asc.c_oAscTypeSelectElement.Table == type) {
if ( !objectValue.get_Locked() ) {
_settings.push('table');
no_text = false;
}
} else if (Asc.c_oAscTypeSelectElement.Slide == type) {
if ( !(objectValue.get_LockLayout() || objectValue.get_LockBackground() || objectValue.get_LockTransition() || objectValue.get_LockTiming() ))
_settings.push('slide');
} else if (Asc.c_oAscTypeSelectElement.Image == type) {
if ( !objectValue.get_Locked() )
_settings.push('image');
} else if (Asc.c_oAscTypeSelectElement.Chart == type) {
if ( !objectValue.get_Locked() )
_settings.push('chart');
} else if (Asc.c_oAscTypeSelectElement.Shape == type && !objectValue.get_FromChart()) {
if ( !objectValue.get_Locked() ) {
_settings.push('shape');
no_text = false;
}
} else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) {
_settings.push('hyperlink');
}
}
if (!no_text && _settings.indexOf('image') < 0)
_settings.unshift('text');
const resultArr = _settings.filter((value, index, self) => self.indexOf(value) === index); //get uniq array
// Exclude hyperlink if text is locked
if (resultArr.indexOf('hyperlink') > -1 && resultArr.indexOf('text') < 0) {
resultArr.splice(resultArr.indexOf('hyperlink'), 1);
}
// Exclude shapes if chart exist
if (resultArr.indexOf('chart') > -1 && resultArr.indexOf('shape') > -1) {
resultArr.splice(resultArr.indexOf('shape'), 1);
}
return resultArr;
}
obj.getSlideObject = () => {
const slides = [];
for (let object of storeFocusObjects._focusObjects) {
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Slide) {
slides.push(object);
}
}
if (slides.length > 0) {
const object = slides[slides.length - 1]; // get top
return object.get_ObjectValue();
} else {
return undefined;
}
}
obj.getParagraphObject = () => {
const paragraphs = [];
for (let object of storeFocusObjects._focusObjects) {
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Paragraph) {
paragraphs.push(object);
}
}
if (paragraphs.length > 0) {
const object = paragraphs[paragraphs.length - 1]; // get top
return object.get_ObjectValue();
} else {
return undefined;
}
}
obj.getShapeObject = () => {
const shapes = [];
for (let object of storeFocusObjects._focusObjects) {
if (object.get_ObjectType() === Asc.c_oAscTypeSelectElement.Shape) {
shapes.push(object);
}
}
if (shapes.length > 0) {
const object = shapes[shapes.length - 1]; // get top
return object.get_ObjectValue();
} else {
return undefined;
}
}
obj.getImageObject = () => {
const images = [];
for (let object of storeFocusObjects._focusObjects) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image && object.get_ObjectValue()) {
images.push(object);
}
}
if (images.length > 0) {
const object = images[images.length - 1]; // get top
return object.get_ObjectValue();
} else {
return undefined;
}
}
obj.getTableObject = () => {
const tables = [];
for (let object of storeFocusObjects._focusObjects) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
tables.push(object);
}
}
if (tables.length > 0) {
const object = tables[tables.length - 1]; // get top table
return object.get_ObjectValue();
} else {
return undefined;
}
}
obj.getChartObject = () => {
const charts = [];
for (let object of storeFocusObjects._focusObjects) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Chart) {
charts.push(object);
}
}
if (charts.length > 0) {
const object = charts[charts.length - 1]; // get top
return object.get_ObjectValue();
} else {
return undefined;
}
}
obj.getLinkObject = () => {
const links = [];
for (let object of storeFocusObjects._focusObjects) {
if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
links.push(object);
}
}
if (links.length > 0) {
const object = links[links.length - 1]; // get top
return object.get_ObjectValue();
} else {
return undefined;
}
}
return obj;
}
export default EditorUIController;