Merge branch 'feature/mobile-apps-on-reactjs' into develop

# Conflicts:
#	apps/api/documents/api.js
#	apps/common/main/lib/util/utils.js
#	apps/documenteditor/mobile/app/controller/DocumentHolder.js
#	apps/documenteditor/mobile/app/controller/Main.js
#	apps/documenteditor/mobile/app/controller/Search.js
#	apps/documenteditor/mobile/app/controller/Settings.js
#	apps/documenteditor/mobile/app/controller/Toolbar.js
#	apps/documenteditor/mobile/app/controller/add/AddImage.js
#	apps/documenteditor/mobile/app/controller/add/AddOther.js
#	apps/documenteditor/mobile/app/controller/add/AddTable.js
#	apps/documenteditor/mobile/app/controller/edit/EditChart.js
#	apps/documenteditor/mobile/app/controller/edit/EditHyperlink.js
#	apps/documenteditor/mobile/app/controller/edit/EditImage.js
#	apps/documenteditor/mobile/app/controller/edit/EditParagraph.js
#	apps/documenteditor/mobile/app/controller/edit/EditShape.js
#	apps/documenteditor/mobile/app/controller/edit/EditTable.js
#	apps/documenteditor/mobile/app/controller/edit/EditText.js
#	apps/documenteditor/mobile/app/template/EditTable.template
#	apps/documenteditor/mobile/app/template/EditText.template
#	apps/documenteditor/mobile/app/template/Settings.template
#	apps/documenteditor/mobile/app/view/Settings.js
#	apps/documenteditor/mobile/app/view/add/AddOther.js
#	apps/documenteditor/mobile/app/view/edit/EditTable.js
#	apps/documenteditor/mobile/index.html
#	apps/documenteditor/mobile/index.html.deploy
#	apps/documenteditor/mobile/index_loader.html
#	apps/documenteditor/mobile/locale/en.json
#	apps/documenteditor/mobile/locale/ru.json
#	apps/documenteditor/mobile/resources/css/app-ios.css
#	apps/documenteditor/mobile/resources/css/app-material.css
#	apps/presentationeditor/main/app/view/SlideSettings.js
#	apps/presentationeditor/mobile/app-dev.js
#	apps/presentationeditor/mobile/app.js
#	apps/presentationeditor/mobile/app/controller/DocumentHolder.js
#	apps/presentationeditor/mobile/app/controller/Main.js
#	apps/presentationeditor/mobile/app/controller/Search.js
#	apps/presentationeditor/mobile/app/controller/Settings.js
#	apps/presentationeditor/mobile/app/controller/Toolbar.js
#	apps/presentationeditor/mobile/app/controller/add/AddImage.js
#	apps/presentationeditor/mobile/app/controller/add/AddLink.js
#	apps/presentationeditor/mobile/app/controller/add/AddTable.js
#	apps/presentationeditor/mobile/app/controller/edit/EditContainer.js
#	apps/presentationeditor/mobile/app/controller/edit/EditImage.js
#	apps/presentationeditor/mobile/app/controller/edit/EditLink.js
#	apps/presentationeditor/mobile/app/controller/edit/EditShape.js
#	apps/presentationeditor/mobile/app/controller/edit/EditSlide.js
#	apps/presentationeditor/mobile/app/controller/edit/EditTable.js
#	apps/presentationeditor/mobile/app/controller/edit/EditText.js
#	apps/presentationeditor/mobile/app/template/EditSlide.template
#	apps/presentationeditor/mobile/app/template/EditTable.template
#	apps/presentationeditor/mobile/app/template/EditText.template
#	apps/presentationeditor/mobile/app/view/Settings.js
#	apps/presentationeditor/mobile/app/view/add/AddOther.js
#	apps/presentationeditor/mobile/app/view/add/AddSlide.js
#	apps/presentationeditor/mobile/app/view/edit/EditSlide.js
#	apps/presentationeditor/mobile/app/view/edit/EditTable.js
#	apps/presentationeditor/mobile/index.html
#	apps/presentationeditor/mobile/index.html.deploy
#	apps/presentationeditor/mobile/index_loader.html
#	apps/presentationeditor/mobile/locale/cs.json
#	apps/presentationeditor/mobile/locale/de.json
#	apps/presentationeditor/mobile/locale/en.json
#	apps/presentationeditor/mobile/locale/es.json
#	apps/presentationeditor/mobile/locale/fr.json
#	apps/presentationeditor/mobile/locale/hu.json
#	apps/presentationeditor/mobile/locale/it.json
#	apps/presentationeditor/mobile/locale/ko.json
#	apps/presentationeditor/mobile/locale/nl.json
#	apps/presentationeditor/mobile/locale/pl.json
#	apps/presentationeditor/mobile/locale/pt.json
#	apps/presentationeditor/mobile/locale/ru.json
#	apps/presentationeditor/mobile/locale/sk.json
#	apps/presentationeditor/mobile/locale/zh.json
#	apps/presentationeditor/mobile/resources/css/app-ios.css
#	apps/presentationeditor/mobile/resources/css/app-material.css
#	apps/presentationeditor/mobile/resources/less/app-ios.less
#	apps/presentationeditor/mobile/resources/less/app-material.less
#	apps/spreadsheeteditor/mobile/app/controller/DocumentHolder.js
#	apps/spreadsheeteditor/mobile/app/controller/FilterOptions.js
#	apps/spreadsheeteditor/mobile/app/controller/Main.js
#	apps/spreadsheeteditor/mobile/app/controller/Search.js
#	apps/spreadsheeteditor/mobile/app/controller/Settings.js
#	apps/spreadsheeteditor/mobile/app/controller/Statusbar.js
#	apps/spreadsheeteditor/mobile/app/controller/Toolbar.js
#	apps/spreadsheeteditor/mobile/app/controller/add/AddContainer.js
#	apps/spreadsheeteditor/mobile/app/controller/add/AddLink.js
#	apps/spreadsheeteditor/mobile/app/controller/add/AddOther.js
#	apps/spreadsheeteditor/mobile/app/controller/edit/EditCell.js
#	apps/spreadsheeteditor/mobile/app/controller/edit/EditChart.js
#	apps/spreadsheeteditor/mobile/app/controller/edit/EditHyperlink.js
#	apps/spreadsheeteditor/mobile/app/controller/edit/EditImage.js
#	apps/spreadsheeteditor/mobile/app/controller/edit/EditShape.js
#	apps/spreadsheeteditor/mobile/app/controller/edit/EditText.js
#	apps/spreadsheeteditor/mobile/app/template/EditCell.template
#	apps/spreadsheeteditor/mobile/app/template/EditImage.template
#	apps/spreadsheeteditor/mobile/app/template/EditText.template
#	apps/spreadsheeteditor/mobile/app/template/Settings.template
#	apps/spreadsheeteditor/mobile/app/view/Settings.js
#	apps/spreadsheeteditor/mobile/app/view/add/AddFunction.js
#	apps/spreadsheeteditor/mobile/app/view/add/AddOther.js
#	apps/spreadsheeteditor/mobile/app/view/edit/EditText.js
#	apps/spreadsheeteditor/mobile/index.html
#	apps/spreadsheeteditor/mobile/index.html.deploy
#	apps/spreadsheeteditor/mobile/index_loader.html
#	apps/spreadsheeteditor/mobile/locale/en.json
#	apps/spreadsheeteditor/mobile/resources/css/app-ios.css
#	apps/spreadsheeteditor/mobile/resources/css/app-material.css
#	apps/spreadsheeteditor/mobile/resources/less/app-material.less
#	apps/spreadsheeteditor/mobile/resources/less/ios/_icons.less
#	apps/spreadsheeteditor/mobile/resources/less/material/_icons.less
#	apps/spreadsheeteditor/mobile/resources/less/statusbar.less
#	build/package.json

apps/common/Analytics.js

@@ -30,8 +30,8 @@
  * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
  *
 */
-if (Common === undefined)
-    var Common = {};
+if (window.Common === undefined)
+    window.Common = {};
 
 Common.component = Common.component || {};
 

apps/common/Gateway.js

@@ -31,8 +31,8 @@
  *
 */
 
-if (Common === undefined) {
-    var Common = {};
+if (window.Common === undefined) {
+    window.Common = {};
 }
 
     Common.Gateway = new(function() {

apps/common/main/lib/util/LanguageInfo.js

@@ -38,10 +38,11 @@
  *
  */
 
-if (Common === undefined) {
-    var Common = {};
+if ( window.Common === undefined ) {
+    window.Common = {};
 }
 
+// TODO: move to Common.Utils
 Common.util = Common.util||{};
 
 Common.util.LanguageInfo = new(function() {

apps/common/main/lib/util/utils.js

@@ -30,15 +30,26 @@
  * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
  *
 */
-if (Common === undefined) {
-    var Common = {};
+if (window.Common === undefined) {
+    window.Common = {};
 }
 
 if (Common.Utils === undefined) {
     Common.Utils = {};
 }
 
-Common.Utils = _.extend(new(function() {
+function _extend_object(dest, source) {
+    if ( typeof _ != "undefined" ) {
+        return _.extend({}, dest, source);
+    } else
+    if ( !!Object ) {
+        return Object.assign({}, dest, source);
+    }
+
+    return source;
+}
+
+var utils = new(function() {
     var userAgent = navigator.userAgent.toLowerCase(),
         check = function(regex){
             return regex.test(userAgent);
@@ -237,7 +248,9 @@ Common.Utils = _.extend(new(function() {
         croppedGeometry: function() {return {left:0, top: Common.Utils.InternalSettings.get('window-inactive-area-top'),
                                         width: me.innerWidth, height: me.innerHeight - Common.Utils.InternalSettings.get('window-inactive-area-top')}}
     }
-})(), Common.Utils || {});
+})();
+
+Common.Utils = _extend_object(Common.Utils, utils);
 
 Common.Utils.ThemeColor = new(function() {
     return {
@@ -322,7 +335,7 @@ Common.Utils.ThemeColor = new(function() {
     }
 })();
 
-Common.Utils.Metric = _.extend( new(function() {
+var metrics = new(function() {
     var me = this;
 
     me.c_MetricUnits = {
@@ -393,7 +406,9 @@ Common.Utils.Metric = _.extend( new(function() {
             return value;
         }
     }
-})(), Common.Utils.Metric || {});
+})();
+
+Common.Utils.Metric = _extend_object(Common.Utils.Metric, metrics);
 
 Common.Utils.RGBColor = function(colorString) {
     var r, g, b;
@@ -572,7 +587,8 @@ Common.Utils.String = new (function() {
         },
 
         htmlEncode: function(string) {
-            return _.escape(string);
+            //return _.escape(string);
+            return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
         },
 
         htmlDecode: function(string) {
@@ -727,9 +743,9 @@ Common.Utils.applyCustomizationPlugins = function(plugins) {
 Common.Utils.fillUserInfo = function(info, lang, defname) {
     var _user = info || {};
     !_user.id && (_user.id = ('uid-' + Date.now()));
-    _user.fullname = _.isEmpty(_user.name) ? defname : _user.name;
+    _user.fullname = !_user.name ? defname : _user.name;
     _user.group && (_user.fullname = (_user.group).toString() + AscCommon.UserInfoParser.getSeparator() + _user.fullname);
-    _user.guest = _.isEmpty(_user.name);
+    _user.guest = !_user.name;
     return _user;
 };
 
@@ -981,3 +997,35 @@ Common.Utils.ModalWindow = new(function() {
         }
     }
 })();
+
+Common.Utils.UserInfoParser = new(function() {
+    var parse = false;
+    var separator = String.fromCharCode(160);
+    return {
+        setParser: function(value) {
+            parse = !!value;
+        },
+
+        getSeparator: function() {
+            return separator;
+        },
+
+        getParsedName: function(username) {
+            if (parse && username) {
+                return username.substring(username.indexOf(separator)+1);
+            } else
+                return username;
+        },
+
+        getParsedGroups: function(username) {
+            if (parse && username) {
+                var idx = username.indexOf(separator),
+                    groups = (idx>-1) ? username.substring(0, idx).split(',') : [];
+                for (var i=0; i<groups.length; i++)
+                    groups[i] = groups[i].trim();
+                return groups;
+            } else
+                return undefined;
+        }
+    }
+})();

apps/common/mobile/lib/component/ThemeColorPalette.jsx

@@ -0,0 +1,186 @@
+import React, { useState, useEffect } from 'react';
+import { f7, ListItem, List, Icon } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+
+const ThemeColors = ({ themeColors, onColorClick, curColor }) => {
+    return (
+        <div className='palette'>
+            {themeColors.map((row, rowIndex) => {
+                return(
+                    <div key={`tc-row-${rowIndex}`} className='row'>
+                        {row.map((effect, index) => {
+                            return(
+                                <a key={`tc-${rowIndex}-${index}`}
+                                   className={((curColor && curColor.color === effect.color && curColor.effectValue === effect.effectValue) || (curColor && curColor === effect.color)) ? 'active' : ''}
+                                   style={{ background: `#${effect.color}`}}
+                                   onClick={() => {onColorClick(effect.color, effect.effectId, effect.effectValue)}}
+                                ></a>
+                            )
+                        })}
+                    </div>
+                )
+            })}
+        </div>
+    )
+};
+
+const StandartColors = ({ options, standartColors, onColorClick, curColor }) => {
+    return (
+        <div className='palette'>
+            {standartColors.map((color, index) => {
+                return(
+                    index === 0 && options.transparent ?
+                        <a key={`sc-${index}`}
+                           className={`transparent ${'transparent' === curColor ? 'active' : ''}`}
+                           onClick={() => {onColorClick('transparent')}}
+                        ></a> :
+                        <a key={`sc-${index}`}
+                           className={curColor && curColor === color ? ' active' : ''}
+                           style={{ background: `#${color}` }}
+                           onClick={() => {onColorClick(color)}}
+                        ></a>
+                )
+            })}
+        </div>
+    )
+};
+
+const CustomColors = ({ options, customColors, onColorClick, curColor }) => {
+    const colors = customColors.length > 0 ? customColors : [];
+    const emptyItems = [];
+    if (colors.length < options.customcolors) {
+        for (let i = colors.length; i < options.customcolors; i++) {
+            emptyItems.push(<a className='empty-color'
+                                key={`dc-empty${i}`}
+                                onClick={() => {onColorClick('empty')}}
+            ></a>)
+        }
+    }
+    return (
+        <div className='palette'>
+            {colors && colors.length > 0 && colors.map((color, index) => {
+                return(
+                    <a key={`dc-${index}`}
+                       className={curColor && curColor === color ? 'active' : ''}
+                       style={{background: `#${color}`}}
+                       onClick={() => {onColorClick(color)}}
+                    ></a>
+                )
+            })}
+            {emptyItems.length > 0 && emptyItems}
+        </div>
+    )
+};
+
+const ThemeColorPalette = props => {
+    const {t} = useTranslation();
+    const _t = t('Common.ThemeColorPalette', {returnObjects: true});
+    const options = {
+        customcolors: props.customcolors || 10,
+        standardcolors: props.standardcolors || 10,
+        themecolors: props.themecolors || 10,
+        effects: props.effects || 5,
+        //allowReselect: props.allowReselect !== false,
+        transparent: props.transparent || false,
+        value: props.value || '000000',
+        cls: props.cls || ''
+    };
+    const curColor = props.curColor;
+    const themeColors = [];
+    const effectColors = Common.Utils.ThemeColor.getEffectColors();
+    let row = -1;
+    effectColors.forEach((effect, index) => {
+        if (0 == index % options.themecolors) {
+            themeColors.push([]);
+            row++;
+        }
+        themeColors[row].push(effect);
+    });
+    const standartColors = Common.Utils.ThemeColor.getStandartColors();
+    // custom color
+    let customColors = props.customColors;
+    if (customColors.length < 1) {
+        customColors = localStorage.getItem('mobile-custom-colors');
+        customColors = customColors ? customColors.toLowerCase().split(',') : [];
+    }
+
+    return (
+        <div className={'color-palettes' + (props.cls ? (' ' + props.cls) : '')}>
+            <List>
+                <ListItem className='theme-colors'>
+                    <div>{ _t.textThemeColors }</div>
+                    <ThemeColors themeColors={themeColors} onColorClick={props.changeColor} curColor={curColor}/>
+                </ListItem>
+                <ListItem className='standart-colors'>
+                    <div>{ _t.textStandartColors }</div>
+                    <StandartColors options={options} standartColors={standartColors} onColorClick={props.changeColor} curColor={curColor}/>
+                </ListItem>
+                <ListItem className='dynamic-colors'>
+                    <div>{ _t.textCustomColors }</div>
+                    <CustomColors options={options} customColors={customColors} onColorClick={props.changeColor} curColor={curColor}/>
+                </ListItem>
+            </List>
+        </div>
+    )
+};
+
+const CustomColorPicker = props => {
+    //Function to convert rgb color to hex format
+    const hexDigits = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f");
+    const hex = x => {
+        return isNaN(x) ? "00" : hexDigits[(x - x % 16) / 16] + hexDigits[x % 16];
+    };
+    const rgb2hex = rgb => {
+        rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+        return hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+    };
+
+    let currentColor = props.currentColor;
+    if (props.autoColor) {
+        currentColor = rgb2hex(props.autoColor);
+    }
+    if (currentColor === 'transparent' || !currentColor) {
+        currentColor = 'ffffff';
+    }
+    const countDynamicColors = props.countdynamiccolors || 10;
+    const [stateColor, setColor] = useState(`#${currentColor}`);
+    useEffect(() => {
+        if (document.getElementsByClassName('color-picker-wheel').length < 1) {
+            const colorPicker = f7.colorPicker.create({
+                containerEl: document.getElementsByClassName('color-picker-container')[0],
+                value: {
+                    hex: `#${currentColor}`
+                },
+                on: {
+                    change: function (value) {
+                        setColor(value.getValue().hex);
+                    }
+                }
+            });
+        }
+    });
+    const addNewColor = (color) => {
+        let colors = localStorage.getItem('mobile-custom-colors');
+        colors = colors ? colors.split(',') : [];
+        const newColor = color.slice(1);
+        if (colors.push(newColor) > countDynamicColors) colors.shift(); // 10 - dynamiccolors
+        localStorage.setItem('mobile-custom-colors', colors.join().toLowerCase());
+        props.onAddNewColor && props.onAddNewColor(colors, newColor);
+    };
+    return(
+        <div id='color-picker'>
+            <div className='color-picker-container'></div>
+            <div className='right-block'>
+                <div className='color-hsb-preview'>
+                    <div className='new-color-hsb-preview' style={{backgroundColor: stateColor}}></div>
+                    <div className='current-color-hsb-preview' style={{backgroundColor: `#${currentColor}`}}></div>
+                </div>
+                <a href='#' id='add-new-color' className='button button-round' onClick={()=>{addNewColor(stateColor)}}>
+                    <Icon icon={'icon-plus'} slot="media" />
+                </a>
+            </div>
+        </div>
+    )
+};
+
+export { ThemeColorPalette, CustomColorPicker };

apps/common/mobile/lib/controller/ContextMenu.jsx

@@ -0,0 +1,245 @@
+import React, { Component, Fragment } from 'react';
+import { f7 } from 'framework7-react';
+import {observer, inject} from "mobx-react";
+import { Device } from '../../../../common/mobile/utils/device';
+
+import ContextMenuView, { idContextMenuElement, ActionsWithExtraItems } from '../view/ContextMenu';
+
+const idCntextMenuTargetElement = '#idx-context-menu-target';
+
+class ContextMenuController extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            opened: false,
+            items: [],
+            openedMore: false,
+            extraItems: []
+        };
+
+        this.onMenuItemClick = this.onMenuItemClick.bind(this);
+        this.onMenuClosed = this.onMenuClosed.bind(this);
+        this.onActionClosed = this.onActionClosed.bind(this);
+        this.onDocumentReady = this.onDocumentReady.bind(this);
+        this.onApiOpenContextMenu = this.onApiOpenContextMenu.bind(this);
+        this.onApiHideContextMenu = this.onApiHideContextMenu.bind(this);
+        this.onApiShowForeignCursorLabel = this.onApiShowForeignCursorLabel.bind(this);
+        this.onApiHideForeignCursorLabel = this.onApiHideForeignCursorLabel.bind(this);
+    }
+
+    onDocumentReady() {
+        this.$targetEl = $$(idCntextMenuTargetElement);
+        if ( !this.$targetEl.length ) {
+            // this.$targetEl = $$('<div id="idx-context-menu-target" style="position:absolute;width:15px;height:15px;background-color:green;z-index:1;"></div>');
+            this.$targetEl = $$(`<div id="${idCntextMenuTargetElement.substr(1)}" style="position:absolute;"></div>`);
+            this.$targetEl.css({left: '-10000px', top: '-10000px'});
+
+            $$('#editor_sdk').append(this.$targetEl);
+        }
+
+        const api = Common.EditorApi.get();
+        api.asc_registerCallback('asc_onShowPopMenu', this.onApiOpenContextMenu);
+        api.asc_registerCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
+        api.asc_registerCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
+        api.asc_registerCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
+    }
+
+    offsetPopoverTop(popover) {
+            var app = popover.app,
+                $el = popover.$el,
+                $targetEl = popover.$targetEl;
+
+            const width = $el.width(),
+                height = $el.height();
+
+            $el.removeClass('popover-on-left popover-on-right popover-on-top popover-on-bottom popover-on-middle').css({
+                left: '',
+                top: ''
+            });
+
+            let targetOffsetLeft, targetOffsetTop;
+            // var safeAreaTop = parseInt($('html').css('--f7-safe-area-top'), 10);
+            let safeAreaLeft = parseInt($('html').css('--f7-safe-area-left'), 10),
+                safeAreaRight = parseInt($('html').css('--f7-safe-area-right'), 10);
+            // if (Number.isNaN(safeAreaTop)) safeAreaTop = 0;
+            if (Number.isNaN(safeAreaLeft)) safeAreaLeft = 0;
+            if (Number.isNaN(safeAreaRight)) safeAreaRight = 0;
+
+            if ($targetEl && $targetEl.length > 0) {
+                let targetOffset = $targetEl.offset();
+                targetOffsetLeft = targetOffset.left - app.left;
+                targetOffsetTop = targetOffset.top - app.top;
+                let targetParentPage = $targetEl.parents('.page');
+
+                if (targetParentPage.length > 0) {
+                    targetOffsetTop -= targetParentPage[0].scrollTop;
+                }
+            }
+
+            let position = 'top';
+
+            let top = targetOffsetTop - height - 10;
+            top = Math.max(8, Math.min(top, app.height - height - 8)); // Horizontal Position
+
+            let hPosition;
+
+                // if (targetOffsetLeft < app.width / 2) {
+                //     hPosition = 'right';
+                //     left = position === 'middle' ? targetOffsetLeft + targetWidth : targetOffsetLeft;
+                // } else {
+                //     hPosition = 'left';
+                //     left = position === 'middle' ? targetOffsetLeft - width : targetOffsetLeft + targetWidth - width;
+                // }
+
+            hPosition = 'middle';
+            let left = targetOffsetLeft - width / 2;
+
+            left = Math.max(8, Math.min(left, app.width - width - 8 - safeAreaRight), safeAreaLeft);
+            $el.addClass(`popover-on-${position} popover-on-${hPosition}`);
+
+            $el.css({top: `${top}px`,
+                        left: `${left}px`});
+    }
+
+    onApiOpenContextMenu(x, y) {
+        if ( !this.state.opened && $$('.dialog.modal-in').length < 1) {
+            this.setState({
+                items: this.initMenuItems(),
+                extraItems: this.initExtraItems()
+            });
+
+            if ( this.state.items.length > 0 ) {
+                this.$targetEl.css({left: `${x}px`, top: `${y}px`});
+                const popover = f7.popover.open(idContextMenuElement, idCntextMenuTargetElement);
+
+                if (Device.android)
+                    this.offsetPopoverTop(popover);
+
+                this.setState(state => {
+                    return {opened: true}
+                });
+            }
+        }
+    }
+
+    onApiHideContextMenu() {
+        if ( this.state.opened ) {
+            $$(idContextMenuElement).hide();
+            f7.popover.close(idContextMenuElement, false);
+
+            this.$targetEl.css({left: '-10000px', top: '-10000px'});
+            this.setState({opened: false});
+        }
+    }
+
+    onMenuClosed() {
+        this.$targetEl.css({left: '-10000px', top: '-10000px'});
+        this.setState({opened: false});
+
+        // (async () => {
+        //     await 1 && this.setState(state => {
+        //         this.$targetEl.css({left: '-10000px', top: '-10000px'});
+        //         return ({opened: false});
+        //     });
+        // })();
+    }
+
+    onActionClosed() {
+        this.setState({openedMore: false});
+    }
+
+    onMenuItemClick(action) {
+        this.onApiHideContextMenu();
+
+        if (action === 'showActionSheet') {
+            this.setState({openedMore: true});
+        }
+    }
+
+    onApiShowForeignCursorLabel(UserId, X, Y, color) {
+        /** coauthoring begin **/
+        const tipHeight = 20;
+
+        if (!this.fastCoAuthTips) {
+            this.fastCoAuthTips = [];
+        }
+        let src;
+        for (let i=0; i<this.fastCoAuthTips.length; i++) {
+            if (this.fastCoAuthTips[i].attr('userid') === UserId) {
+                src = this.fastCoAuthTips[i];
+                break;
+            }
+        }
+        if (!src) {
+            src = $$(`<div class="username-tip"></div>`);
+            src.attr('userid', UserId);
+            src.css({'background-color': '#'+Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b())});
+            src.text(this.getUserName(UserId));
+            $$('#id_main_parent').append(src);
+            this.fastCoAuthTips.push(src);
+            //src.fadeIn(150);
+            src[0].classList.add('active');
+
+            $$('#id_main_view').append(src);
+        }
+        src.css({
+            top: (Y - tipHeight) + 'px',
+            left: X + 'px'});
+        /** coauthoring end **/
+    }
+
+    onApiHideForeignCursorLabel(userId) {
+        /** coauthoring begin **/
+        for (let i=0; i<this.fastCoAuthTips.length; i++) {
+            if (this.fastCoAuthTips[i].attr('userid') == userId) {
+                const src = this.fastCoAuthTips[i];
+                //this.fastCoAuthTips[i].fadeOut(150, () => {src.remove()});
+                src[0].classList.remove('active');
+                src.remove();
+                this.fastCoAuthTips.splice(i, 1);
+                break;
+            }
+        }
+        /** coauthoring end **/
+    }
+
+    componentWillUnmount() {
+        Common.Notifications.off('document:ready', this.onDocumentReady);
+
+        const api = Common.EditorApi.get();
+        api.asc_unregisterCallback('asc_onShowPopMenu', this.onApiOpenContextMenu);
+        api.asc_unregisterCallback('asc_onHidePopMenu', this.onApiHideContextMenu);
+        api.asc_unregisterCallback('asc_onShowForeignCursorLabel', this.onApiShowForeignCursorLabel);
+        api.asc_unregisterCallback('asc_onHideForeignCursorLabel', this.onApiHideForeignCursorLabel);
+    }
+
+    componentDidMount() {
+        if ( !Common.EditorApi ) {
+            Common.Notifications.on({
+                'document:ready': this.onDocumentReady
+            });
+        } else {
+            this.onDocumentReady();
+        }
+    }
+
+    initMenuItems() {
+        return [];
+    }
+
+    initExtraItems () {
+        return [];
+    }
+
+    render() {
+        return (
+            <Fragment>
+                <ContextMenuView items={this.state.items} onMenuClosed={this.onMenuClosed} onMenuItemClick={this.onMenuItemClick} />
+                <ActionsWithExtraItems items={this.state.extraItems} onMenuItemClick={this.onMenuItemClick} opened={this.state.openedMore} onActionClosed={this.onActionClosed}/>
+            </Fragment>
+        )
+    }
+}
+
+export default ContextMenuController;

apps/common/mobile/lib/controller/Plugins.jsx

@@ -0,0 +1,283 @@
+import React, { useEffect, useState } from 'react';
+import { inject, observer } from 'mobx-react';
+import { f7 } from 'framework7-react';
+import { Device } from '../../utils/device';
+
+const PluginsController = inject('storeAppOptions')(observer(props => {
+    const { storeAppOptions } = props;
+    let configPlugins = {autostart:[]},
+        serverPlugins = {autostart:[]},
+        modal,
+        iframe;
+
+    useEffect(() => {
+        const onDocumentReady = () => {
+            Common.Notifications.on('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);
+
+                if(!storeAppOptions.customization || storeAppOptions.plugins !== false) {
+                    loadPlugins();
+                }
+            });
+    
+            Common.Gateway.on('init', loadConfig);
+        };
+
+        onDocumentReady();
+
+        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 onDlgBtnClick = e => {
+        const api = Common.EditorApi.get();
+        let index = $$(e.currentTarget).index();
+        api.asc_pluginButtonClick(index);
+    };
+
+
+    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();
+
+            if (arrBtns.length) {
+                arrBtns.forEach((b, index) => {
+                    if ((storeAppOptions.isEdit || b.isViewer !== false)) {
+                        newBtns[index] = {
+                            text: b.text,
+                            attributes: {result: index}
+                        };
+                    }
+                });
+            }
+
+            f7.popover.close('.document-menu.modal-in', false);
+
+            modal = f7.dialog.create({
+                title: '',
+                text: '',
+                content:  '<div id="plugin-frame" class="">'+'</div>',
+                buttons : isCustomWindow ? undefined : newBtns
+            }).open();
+
+            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;
+
+            $$('#plugin-frame').append(iframe);
+            
+            modal.$el.find('.dialog-button').on('click', onDlgBtnClick);
+
+            modal.$el.css({
+                margin: '0',
+                width: '90%',
+                left: '5%',
+                height: 'auto'
+            });
+
+            modal.$el.find('.dialog-inner').css({padding: '0'});
+
+            if (Device.phone) {
+                let height = Math.min(size[1], 240);
+                modal.$el.find('#plugin-frame').css({height: height + 'px'});
+            } else {
+                let height = Math.min(size[1], 500);
+                modal.$el.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 pluginClose = plugin => {
+        if (iframe) {
+            iframe = null;
+        }
+    };
+
+    const pluginResize = size => {
+        if (Device.phone) {
+            let height = Math.min(size[1], 240);
+            modal.$el.find('#plugin-frame').css({height: height + 'px'});
+        } else {
+            let height = Math.min(size[1], 500);
+            modal.$el.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 => {
+        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);
+        });
+
+        const api = Common.EditorApi.get();
+        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;
+
+
+

apps/common/mobile/lib/controller/Search.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import {SearchView, SearchSettingsView} from '../view/Search';
+
+const SearchController = props => {
+    const onSearchQuery = params => {
+        console.log('on search: ' + params);
+    };
+
+    return <SearchView onSearchQuery={onSearchQuery}  />
+};
+
+export {SearchController, SearchView, SearchSettingsView};

apps/common/mobile/lib/controller/collaboration/Collaboration.jsx

@@ -0,0 +1,92 @@
+import React, { Component } from 'react'
+import { f7 } from 'framework7-react';
+import {observer, inject} from "mobx-react"
+import { LocalStorage } from '../../../utils/LocalStorage';
+import { withTranslation } from 'react-i18next';
+
+class CollaborationController extends Component {
+    constructor(props){
+        super(props);
+
+        Common.Notifications.on('engineCreated', (api) => {
+            api.asc_registerCallback('asc_onAuthParticipantsChanged', this.onChangeEditUsers.bind(this));
+            api.asc_registerCallback('asc_onParticipantsChanged',     this.onChangeEditUsers.bind(this));
+            api.asc_registerCallback('asc_onConnectionStateChanged',  this.onUserConnection.bind(this));
+            api.asc_registerCallback('asc_onCoAuthoringDisconnect',  this.onCoAuthoringDisconnect.bind(this));
+
+            api.asc_registerCallback('asc_OnTryUndoInFastCollaborative', this.onTryUndoInFastCollaborative.bind(this));
+        });
+
+        Common.Notifications.on('document:ready', this.onDocumentReady.bind(this));
+    }
+
+    onDocumentReady() {
+        const api = Common.EditorApi.get();
+        const appOptions = this.props.storeAppOptions;
+        /** coauthoring begin **/
+        let isFastCoauth;
+        if (appOptions.isEdit && appOptions.canLicense && !appOptions.isOffline && appOptions.canCoAuthoring) {
+            // Force ON fast co-authoring mode
+            isFastCoauth = true;
+            api.asc_SetFastCollaborative(isFastCoauth);
+
+            if (window.editorType === 'de') {
+                const value = LocalStorage.getItem((isFastCoauth) ? "de-settings-showchanges-fast" : "de-settings-showchanges-strict");
+                if (value !== null) {
+                    api.SetCollaborativeMarksShowType(
+                        value === 'all' ? Asc.c_oAscCollaborativeMarksShowType.All :
+                            value === 'none' ? Asc.c_oAscCollaborativeMarksShowType.None : Asc.c_oAscCollaborativeMarksShowType.LastChanges);
+                } else {
+                    api.SetCollaborativeMarksShowType(isFastCoauth ? Asc.c_oAscCollaborativeMarksShowType.None : Asc.c_oAscCollaborativeMarksShowType.LastChanges);
+                }
+            }
+        } else if (!appOptions.isEdit && appOptions.isRestrictedEdit) {
+            isFastCoauth = true;
+            api.asc_SetFastCollaborative(isFastCoauth);
+            window.editorType === 'de' && api.SetCollaborativeMarksShowType(Asc.c_oAscCollaborativeMarksShowType.None);
+            api.asc_setAutoSaveGap(1);
+        } else {
+            isFastCoauth = false;
+            api.asc_SetFastCollaborative(isFastCoauth);
+            window.editorType === 'de' && api.SetCollaborativeMarksShowType(Asc.c_oAscCollaborativeMarksShowType.None);
+        }
+
+        if (appOptions.isEdit) {
+            let value;
+            if (window.editorType === 'sse') {
+                value = appOptions.canAutosave ? 1 : 0; // FORCE AUTOSAVE
+            } else {
+                value = isFastCoauth; // Common.localStorage.getItem("de-settings-autosave");
+                value = (!isFastCoauth && value !== null) ? parseInt(value) : (appOptions.canCoAuthoring ? 1 : 0);
+            }
+            api.asc_setAutoSaveGap(value);
+        }
+        /** coauthoring end **/
+    }
+
+    onChangeEditUsers(users) {
+        const storeUsers = this.props.users;
+        storeUsers.reset(users);
+        storeUsers.setCurrentUser(this.props.storeAppOptions.user.id);
+    }
+
+    onUserConnection(change) {
+        this.props.users.connection(change);
+    }
+
+    onCoAuthoringDisconnect() {
+        this.props.users.resetDisconnected(true);
+    }
+
+    onTryUndoInFastCollaborative() {
+        const { t } = this.props;
+        const _t = t("Common.Collaboration", { returnObjects: true });
+        f7.dialog.alert(_t.textTryUndoRedo, _t.notcriticalErrorTitle);
+    }
+
+    render() {
+        return null
+    }
+}
+
+export default inject('users', 'storeAppOptions')(observer(withTranslation()(CollaborationController)));

apps/common/mobile/lib/controller/collaboration/Comments.jsx

@@ -0,0 +1,585 @@
+import React, {Component, Fragment} from 'react';
+import { inject, observer } from "mobx-react";
+import { f7 } from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+import { withTranslation} from 'react-i18next';
+import { LocalStorage } from '../../../utils/LocalStorage';
+
+import {AddComment, EditComment, AddReply, EditReply, ViewComments, ViewCurrentComments} from '../../view/collaboration/Comments';
+
+// utils
+const timeZoneOffsetInMs = (new Date()).getTimezoneOffset() * 60000;
+const utcDateToString = (date) => {
+    if (Object.prototype.toString.call(date) === '[object Date]')
+        return (date.getTime() - timeZoneOffsetInMs).toString();
+    return '';
+};
+const ooDateToString = (date) => {
+    if (Object.prototype.toString.call(date) === '[object Date]')
+        return (date.getTime()).toString();
+    return '';
+};
+const stringOOToLocalDate = (date) => {
+    if (typeof date === 'string')
+        return parseInt(date);
+    return 0;
+};
+const stringUtcToLocalDate = (date) => {
+    if (typeof date === 'string')
+        return parseInt(date) + timeZoneOffsetInMs;
+    return 0;
+};
+const dateToLocaleTimeString = (date) => {
+    const format = (date) => {
+        let hours = date.getHours();
+        let minutes = date.getMinutes();
+        let ampm = hours >= 12 ? 'pm' : 'am';
+
+        hours = hours % 12;
+        hours = hours ? hours : 12; // the hour '0' should be '12'
+        minutes = minutes < 10 ? '0' + minutes : minutes;
+        return hours + ':' + minutes + ' ' + ampm;
+    };
+    // MM/dd/yyyy hh:mm AM
+    return (date.getMonth() + 1) + '/' + (date.getDate()) + '/' + date.getFullYear() + ' ' + format(date);
+};
+//end utils
+
+class CommentsController extends Component {
+    constructor(props) {
+        super(props);
+        this.usersStore = this.props.users;
+        this.appOptions = this.props.storeAppOptions;
+        this.storeComments = this.props.storeComments;
+
+        Common.Notifications.on('engineCreated', api => {
+            api.asc_registerCallback('asc_onAddComment', this.addComment.bind(this));
+            api.asc_registerCallback('asc_onAddComments', this.addComments.bind(this));
+            api.asc_registerCallback('asc_onRemoveComment', this.removeComment.bind(this));
+            api.asc_registerCallback('asc_onRemoveComments', this.removeComments.bind(this));
+            api.asc_registerCallback('asc_onChangeCommentData', this.changeCommentData.bind(this));
+            api.asc_registerCallback('asc_onShowComment', this.changeShowComments.bind(this));
+            api.asc_registerCallback('asc_onHideComment', this.hideComments.bind(this));
+
+            if (window.editorType === 'sse') {
+                api.asc_registerCallback('asc_onActiveSheetChanged', this.onApiActiveSheetChanged.bind(this));
+                Common.Notifications.on('comments:filterchange', this.onFilterChange.bind(this));
+                Common.Notifications.on('sheet:active', this.onApiActiveSheetChanged.bind(this));
+            }
+        });
+
+        Common.Notifications.on('document:ready', () => {
+            if (window.editorType === 'de' || window.editorType === 'sse') {
+                const api = Common.EditorApi.get();
+                /** coauthoring begin **/
+                const isLiveCommenting = LocalStorage.getBool(`${window.editorType}-mobile-settings-livecomment`, true);
+                const resolved = LocalStorage.getBool(`${window.editorType}-settings-resolvedcomment`, true);
+                isLiveCommenting ? api.asc_showComments(resolved) : api.asc_hideComments();
+                /** coauthoring end **/
+            }
+
+            this.curUserId = this.props.users.currentUser.asc_getIdOriginal();
+        });
+    }
+    onApiActiveSheetChanged (index) {
+        this.onFilterChange(['doc', 'sheet' + Common.EditorApi.get().asc_getWorksheetId(index)]);
+    }
+    addComment (id, data) {
+        const comment = this.readSDKComment(id, data);
+        if (comment) {
+            this.storeComments.addComment(comment);
+        }
+    }
+    addComments (data) {
+        for (let i = 0; i < data.length; ++i) {
+            const comment = this.readSDKComment(data[i].asc_getId(), data[i]);
+            this.storeComments.addComment(comment);
+        }
+    }
+    removeComment (id) {
+        this.storeComments.removeComment(id);
+    }
+    removeComments (data) {
+        for (let i = 0; i < data.length; i++) {
+            this.removeComment(data[i]);
+        }
+    }
+    changeShowComments (id) {
+        this.storeComments.changeShowComment(id);
+    }
+    hideComments () {
+        //Common.Notifications.trigger('closeviewcomment');
+    }
+    changeCommentData (id, data) {
+        const changeComment = {};
+
+        const date = (data.asc_getOnlyOfficeTime()) ? new Date(stringOOToLocalDate(data.asc_getOnlyOfficeTime())) :
+            ((data.asc_getTime() === '') ? new Date() : new Date(stringUtcToLocalDate(data.asc_getTime())));
+
+        let user = this.usersStore.searchUserById(data.asc_getUserId());
+
+        changeComment.comment = data.asc_getText();
+        changeComment.userId = data.asc_getUserId();
+        changeComment.userName = data.asc_getUserName();
+        changeComment.userColor = (user) ? user.asc_getColor() : null;
+        changeComment.resolved = data.asc_getSolved();
+        changeComment.quote = data.asc_getQuoteText();
+        changeComment.time = date.getTime();
+        changeComment.date = dateToLocaleTimeString(date);
+        changeComment.editable = this.appOptions.canEditComments || (data.asc_getUserId() === this.curUserId);
+        changeComment.removable = this.appOptions.canDeleteComments || (data.asc_getUserId() === this.curUserId);
+
+        let dateReply = null;
+        const replies = [];
+
+        const repliesCount = data.asc_getRepliesCount();
+        for (let i = 0; i < repliesCount; ++i) {
+
+            dateReply = (data.asc_getReply(i).asc_getOnlyOfficeTime()) ? new Date(stringOOToLocalDate(data.asc_getReply(i).asc_getOnlyOfficeTime())) :
+                ((data.asc_getReply(i).asc_getTime() === '') ? new Date() : new Date(stringUtcToLocalDate(data.asc_getReply(i).asc_getTime())));
+
+            user = this.usersStore.searchUserById(data.asc_getReply(i).asc_getUserId());
+            const userName = data.asc_getReply(i).asc_getUserName();
+            replies.push({
+                ind: i,
+                userId: data.asc_getReply(i).asc_getUserId(),
+                userName: userName,
+                userColor: (user) ? user.asc_getColor() : null,
+                date: dateToLocaleTimeString(dateReply),
+                reply: data.asc_getReply(i).asc_getText(),
+                time: dateReply.getTime(),
+                userInitials: this.usersStore.getInitials(userName),
+                editable: this.appOptions.canEditComments || (data.asc_getReply(i).asc_getUserId() === this.curUserId),
+                removable: this.appOptions.canDeleteComments || (data.asc_getReply(i).asc_getUserId() === this.curUserId)
+            });
+        }
+        changeComment.replies = replies;
+
+        this.props.storeComments.changeComment(id, changeComment);
+    }
+    onFilterChange (filter) {
+        this.storeComments.changeFilter(filter);
+    }
+    readSDKComment (id, data) {
+        const date = (data.asc_getOnlyOfficeTime()) ? new Date(stringOOToLocalDate(data.asc_getOnlyOfficeTime())) :
+            ((data.asc_getTime() === '') ? new Date() : new Date(stringUtcToLocalDate(data.asc_getTime())));
+        const user = this.usersStore.searchUserById(data.asc_getUserId());
+        const groupName = id.substr(0, id.lastIndexOf('_')+1).match(/^(doc|sheet[0-9_]+)_/);
+        const userName = data.asc_getUserName();
+        const comment = {
+            uid                 : id,
+            userId              : data.asc_getUserId(),
+            userName            : userName,
+            userColor           : (user) ? user.asc_getColor() : null,
+            date                : dateToLocaleTimeString(date),
+            quote               : data.asc_getQuoteText(),
+            comment             : data.asc_getText(),
+            resolved            : data.asc_getSolved(),
+            unattached          : !!data.asc_getDocumentFlag ? data.asc_getDocumentFlag() : false,
+            time                : date.getTime(),
+            replies             : [],
+            groupName           : (groupName && groupName.length>1) ? groupName[1] : null,
+            userInitials        : this.usersStore.getInitials(userName),
+            editable            : this.appOptions.canEditComments || (data.asc_getUserId() === this.curUserId),
+            removable           : this.appOptions.canDeleteComments || (data.asc_getUserId() === this.curUserId)
+        };
+        if (comment) {
+            const replies = this.readSDKReplies(data);
+            if (replies.length > 0) {
+                comment.replies = replies;
+            }
+        }
+        return comment;
+    }
+    readSDKReplies (data) {
+        const replies = [];
+        const repliesCount = data.asc_getRepliesCount();
+        let i = 0;
+        let date = null;
+        if (repliesCount) {
+            for (i = 0; i < repliesCount; ++i) {
+                date = (data.asc_getReply(i).asc_getOnlyOfficeTime()) ? new Date(stringOOToLocalDate(data.asc_getReply(i).asc_getOnlyOfficeTime())) :
+                    ((data.asc_getReply(i).asc_getTime() === '') ? new Date() : new Date(stringUtcToLocalDate(data.asc_getReply(i).asc_getTime())));
+                const user = this.usersStore.searchUserById(data.asc_getReply(i).asc_getUserId());
+                const userName = data.asc_getReply(i).asc_getUserName();
+                replies.push({
+                    ind                 : i,
+                    userId              : data.asc_getReply(i).asc_getUserId(),
+                    userName            : userName,
+                    userColor           : (user) ? user.asc_getColor() : null,
+                    date                : dateToLocaleTimeString(date),
+                    reply               : data.asc_getReply(i).asc_getText(),
+                    time                : date.getTime(),
+                    userInitials        : this.usersStore.getInitials(userName),
+                    editable            : this.appOptions.canEditComments || (data.asc_getReply(i).asc_getUserId() === this.curUserId),
+                    removable           : this.appOptions.canDeleteComments || (data.asc_getReply(i).asc_getUserId() === this.curUserId)
+                });
+            }
+        }
+        return replies;
+    }
+    render() {
+        return null;
+    }
+}
+
+class AddCommentController extends Component {
+    constructor(props) {
+        super(props);
+        this.closeAddComment = this.closeAddComment.bind(this);
+        this.getUserInfo = this.getUserInfo.bind(this);
+        this.onAddNewComment = this.onAddNewComment.bind(this);
+
+        this.state = {
+            isOpen: false
+        };
+
+        Common.Notifications.on('addcomment', () => {
+            this.setState({isOpen: true});
+        });
+    }
+    closeAddComment () {
+        this.setState({isOpen: false});
+    }
+    getUserInfo () {
+        this.currentUser = this.props.users.currentUser;
+        if (!this.currentUser) {
+            this.currentUser = this.props.users.setCurrentUser(this.props.storeAppOptions.user.id);
+        }
+        const name = this.currentUser.asc_getUserName();
+        return {
+            name: name,
+            initials: this.props.users.getInitials(name),
+            color: this.currentUser.asc_getColor()
+        };
+    }
+    onAddNewComment (commentText, documentFlag) {
+        const api = Common.EditorApi.get();
+        let comment;
+        if (typeof Asc.asc_CCommentDataWord !== 'undefined') {
+            comment = new Asc.asc_CCommentDataWord(null);
+        } else {
+            comment = new Asc.asc_CCommentData(null);
+        }
+        if (commentText.length > 0) {
+            comment.asc_putText(commentText);
+            comment.asc_putTime(utcDateToString(new Date()));
+            comment.asc_putOnlyOfficeTime(ooDateToString(new Date()));
+            comment.asc_putUserId(this.currentUser.asc_getIdOriginal());
+            comment.asc_putUserName(this.currentUser.asc_getUserName());
+            comment.asc_putSolved(false);
+
+            !!comment.asc_putDocumentFlag && comment.asc_putDocumentFlag(documentFlag);
+
+            api.asc_addComment(comment);
+        }
+    }
+    render() {
+        return(
+            this.state.isOpen ? <AddComment userInfo={this.getUserInfo()} onAddNewComment={this.onAddNewComment} closeAddComment={this.closeAddComment}/> : null
+        )
+    }
+}
+
+class EditCommentController extends Component {
+    constructor (props) {
+        super(props);
+        this.onEditComment = this.onEditComment.bind(this);
+        this.onAddReply = this.onAddReply.bind(this);
+        this.onEditReply = this.onEditReply.bind(this);
+    }
+    getUserInfo () {
+        this.currentUser = this.props.users.currentUser;
+        const name = this.currentUser.asc_getUserName();
+        return {
+            name: name,
+            initials: this.props.users.getInitials(name),
+            color: this.currentUser.asc_getColor()
+        };
+    }
+    onChangeComment (comment) {
+        const ascComment = typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null);
+        if (ascComment && comment) {
+            ascComment.asc_putText(comment.comment);
+            ascComment.asc_putQuoteText(comment.quote);
+            ascComment.asc_putTime(utcDateToString(new Date(comment.time)));
+            ascComment.asc_putOnlyOfficeTime(ooDateToString(new Date(comment.time)));
+            ascComment.asc_putUserId(comment.userId);
+            ascComment.asc_putUserName(comment.userName);
+            ascComment.asc_putSolved(comment.resolved);
+            ascComment.asc_putGuid(comment.guid);
+
+            if (!!ascComment.asc_putDocumentFlag) {
+                ascComment.asc_putDocumentFlag(comment.unattached);
+            }
+
+            const reply = comment.replies;
+            if (reply && reply.length > 0) {
+                reply.forEach((reply) => {
+                    const addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
+                    if (addReply) {
+                        addReply.asc_putText(reply.reply);
+                        addReply.asc_putTime(utcDateToString(new Date(reply.time)));
+                        addReply.asc_putOnlyOfficeTime(ooDateToString(new Date(reply.time)));
+                        addReply.asc_putUserId(reply.userId);
+                        addReply.asc_putUserName(reply.userName);
+
+                        ascComment.asc_addReply(addReply);
+                    }
+                });
+            }
+            const api = Common.EditorApi.get();
+            api.asc_changeComment(comment.uid, ascComment);
+        }
+    }
+    onEditComment (comment, text) {
+        const changeComment = {...comment};
+        changeComment.comment = text.trim();
+        const user = this.props.users.currentUser;
+        changeComment.userid = user.asc_getIdOriginal();
+        changeComment.username = user.asc_getUserName();
+        this.onChangeComment(changeComment);
+    }
+    onAddReply (comment, replyVal) {
+        let reply = null;
+        let addReply = null;
+        const ascComment = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
+
+        if (ascComment) {
+            ascComment.asc_putText(comment.comment);
+            ascComment.asc_putQuoteText(comment.quote);
+            ascComment.asc_putTime(utcDateToString(new Date(comment.time)));
+            ascComment.asc_putOnlyOfficeTime(ooDateToString(new Date(comment.time)));
+            ascComment.asc_putUserId(comment.userId);
+            ascComment.asc_putUserName(comment.userName);
+            ascComment.asc_putSolved(comment.resolved);
+            ascComment.asc_putGuid(comment.guid);
+
+            if (!!ascComment.asc_putDocumentFlag) {
+                ascComment.asc_putDocumentFlag(comment.unattached);
+            }
+
+            reply = comment.replies;
+            if (reply && reply.length) {
+                reply.forEach(function (reply) {
+
+                    addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
+                    if (addReply) {
+                        addReply.asc_putText(reply.reply);
+                        addReply.asc_putTime(utcDateToString(new Date(reply.time)));
+                        addReply.asc_putOnlyOfficeTime(ooDateToString(new Date(reply.time)));
+                        addReply.asc_putUserId(reply.userId);
+                        addReply.asc_putUserName(reply.userName);
+
+                        ascComment.asc_addReply(addReply);
+                    }
+                });
+            }
+
+            addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
+            if (addReply) {
+                addReply.asc_putText(replyVal);
+                addReply.asc_putTime(utcDateToString(new Date()));
+                addReply.asc_putOnlyOfficeTime(ooDateToString(new Date()));
+                const currentUser = this.props.users.currentUser;
+                addReply.asc_putUserId(currentUser.asc_getIdOriginal());
+                addReply.asc_putUserName(currentUser.asc_getUserName());
+
+                ascComment.asc_addReply(addReply);
+
+                const api = Common.EditorApi.get();
+                api.asc_changeComment(comment.uid, ascComment);
+            }
+        }
+    }
+    onEditReply (comment, reply, textReply) {
+        const currentUser = this.props.users.currentUser;
+        const indReply = reply.ind;
+        const changeComment = {...comment};
+        changeComment.replies = [...comment.replies];
+        changeComment.replies[indReply] = {...reply};
+        changeComment.replies[indReply].reply = textReply;
+        changeComment.replies[indReply].userid = currentUser.asc_getIdOriginal();
+        changeComment.replies[indReply].username = currentUser.asc_getUserName();
+        this.onChangeComment(changeComment);
+    }
+    render() {
+        const storeComments = this.props.storeComments;
+        const comment = storeComments.currentComment;
+        return (
+            <Fragment>
+                {storeComments.isOpenEditComment && <EditComment comment={comment} onEditComment={this.onEditComment}/>}
+                {storeComments.isOpenAddReply && <AddReply userInfo={this.getUserInfo()} comment={comment} onAddReply={this.onAddReply}/>}
+                {storeComments.isOpenEditReply && <EditReply comment={comment} reply={storeComments.currentReply} onEditReply={this.onEditReply}/>}
+            </Fragment>
+        )
+    }
+}
+
+class ViewCommentsController extends Component {
+    constructor (props) {
+        super(props);
+        this.onCommentMenuClick = this.onCommentMenuClick.bind(this);
+        this.onResolveComment = this.onResolveComment.bind(this);
+        this.closeViewCurComments = this.closeViewCurComments.bind(this);
+
+        this.state = {
+            isOpenViewCurComments: false
+        };
+
+        Common.Notifications.on('viewcomment', () => {
+            this.setState({isOpenViewCurComments: true});
+        });
+        Common.Notifications.on('closeviewcomment', () => {
+            this.closeViewCurComments();
+        });
+    }
+    closeViewCurComments () {
+        f7.sheet.close('#view-comment-sheet');
+        this.setState({isOpenViewCurComments: false});
+    }
+    onResolveComment (comment) {
+        let reply = null,
+            addReply = null,
+            ascComment = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
+
+        if (ascComment && comment) {
+            ascComment.asc_putText(comment.comment);
+            ascComment.asc_putQuoteText(comment.quote);
+            ascComment.asc_putTime(utcDateToString(new Date(comment.time)));
+            ascComment.asc_putOnlyOfficeTime(ooDateToString(new Date(comment.time)));
+            ascComment.asc_putUserId(comment.userId);
+            ascComment.asc_putUserName(comment.userName);
+            ascComment.asc_putSolved(!comment.resolved);
+            ascComment.asc_putGuid(comment.guid);
+
+            if (!!ascComment.asc_putDocumentFlag) {
+                ascComment.asc_putDocumentFlag(comment.unattached);
+            }
+
+            reply = comment.replies;
+            if (reply && reply.length > 0) {
+                reply.forEach((reply) => {
+                    addReply = (typeof Asc.asc_CCommentDataWord !== 'undefined' ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
+                    if (addReply) {
+                        addReply.asc_putText(reply.reply);
+                        addReply.asc_putTime(utcDateToString(new Date(reply.time)));
+                        addReply.asc_putOnlyOfficeTime(ooDateToString(new Date(reply.time)));
+                        addReply.asc_putUserId(reply.userId);
+                        addReply.asc_putUserName(reply.userName);
+
+                        ascComment.asc_addReply(addReply);
+                    }
+                });
+            }
+            const api = Common.EditorApi.get();
+            api.asc_changeComment(comment.uid, ascComment);
+        }
+    }
+    deleteComment (comment) {
+        const api = Common.EditorApi.get();
+        comment && api.asc_removeComment(comment.uid);
+    }
+    deleteReply (comment, reply) {
+        let replies = null,
+            addReply = null,
+            ascComment = (!!Asc.asc_CCommentDataWord ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
+
+        const indReply = reply.ind;
+
+        if (ascComment && comment) {
+            ascComment.asc_putText(comment.comment);
+            ascComment.asc_putQuoteText(comment.quote);
+            ascComment.asc_putTime(utcDateToString(new Date(comment.time)));
+            ascComment.asc_putOnlyOfficeTime(ooDateToString(new Date(comment.time)));
+            ascComment.asc_putUserId(comment.userId);
+            ascComment.asc_putUserName(comment.userName);
+            ascComment.asc_putSolved(comment.resolved);
+            ascComment.asc_putGuid(comment.guid);
+
+            if (!!ascComment.asc_putDocumentFlag) {
+                ascComment.asc_putDocumentFlag(comment.unattached);
+            }
+
+            replies = comment.replies;
+            if (replies && replies.length) {
+                replies.forEach((reply) => {
+                    if (reply.ind !== indReply) {
+                        addReply = (!!Asc.asc_CCommentDataWord ? new Asc.asc_CCommentDataWord(null) : new Asc.asc_CCommentData(null));
+                        if (addReply) {
+                            addReply.asc_putText(reply.reply);
+                            addReply.asc_putTime(utcDateToString(new Date(reply.time)));
+                            addReply.asc_putOnlyOfficeTime(ooDateToString(new Date(reply.time)));
+                            addReply.asc_putUserId(reply.userId);
+                            addReply.asc_putUserName(reply.userName);
+
+                            ascComment.asc_addReply(addReply);
+                        }
+                    }
+                });
+            }
+            const api = Common.EditorApi.get();
+            api.asc_changeComment(comment.uid, ascComment);
+        }
+    }
+    onCommentMenuClick (action, comment, reply) {
+        const { t } = this.props;
+        const _t = t("Common.Collaboration", { returnObjects: true });
+        switch (action) {
+            case 'editComment':
+                this.props.storeComments.openEditComment(true, comment);
+                break;
+            case 'resolve':
+                this.onResolveComment(comment);
+                break;
+            case 'deleteComment':
+                f7.dialog.confirm(
+                    _t.textMessageDeleteComment,
+                    _t.textDeleteComment,
+                    () => {
+                        this.deleteComment(comment);
+                    }
+                );
+                break;
+            case 'editReply':
+                this.props.storeComments.openEditReply(true, comment, reply);
+                break;
+            case 'deleteReply':
+                f7.dialog.confirm(
+                    _t.textMessageDeleteReply,
+                    _t.textDeleteReply,
+                    () => {
+                        this.deleteReply(comment, reply);
+                    }
+                );
+                break;
+            case 'addReply':
+                this.props.storeComments.openAddReply(true, comment);
+                break;
+        }
+    }
+    render() {
+        return(
+            <Fragment>
+                {this.props.allComments && <ViewComments onCommentMenuClick={this.onCommentMenuClick} onResolveComment={this.onResolveComment} />}
+                {this.state.isOpenViewCurComments && <ViewCurrentComments opened={this.state.isOpenViewCurComments}
+                                                                          closeCurComments={this.closeViewCurComments}
+                                                                          onCommentMenuClick={this.onCommentMenuClick}
+                                                                          onResolveComment={this.onResolveComment}
+                />}
+            </Fragment>
+        )
+    }
+}
+
+const _CommentsController = inject('storeAppOptions', 'storeComments', 'users')(observer(CommentsController));
+const _AddCommentController = inject('storeAppOptions', 'storeComments', 'users')(observer(AddCommentController));
+const _EditCommentController = inject('storeComments', 'users')(observer(EditCommentController));
+const _ViewCommentsController = inject('storeComments', 'users')(observer(withTranslation()(ViewCommentsController)));
+
+export {
+    _CommentsController as CommentsController,
+    _AddCommentController as AddCommentController,
+    _EditCommentController as EditCommentController,
+    _ViewCommentsController as ViewCommentsController
+};

apps/common/mobile/lib/controller/collaboration/Review.jsx

@@ -0,0 +1,535 @@
+import React, { Component } from 'react'
+import Notifications from '../../../utils/notifications.js'
+import {observer, inject} from "mobx-react"
+import { withTranslation } from 'react-i18next';
+
+import {PageReview, PageReviewChange} from "../../view/collaboration/Review";
+import {LocalStorage} from "../../../utils/LocalStorage";
+
+class InitReview extends Component {
+    constructor(props){
+        super(props);
+
+        Common.Notifications.on('engineCreated', api => {
+            api.asc_registerCallback('asc_onShowRevisionsChange', this.onChangeReview.bind(this));
+        });
+
+        Common.Notifications.on('document:ready', () => {
+            const api = Common.EditorApi.get();
+            const appOptions = props.storeAppOptions;
+            api.asc_SetTrackRevisions(appOptions.isReviewOnly || LocalStorage.getBool("de-mobile-track-changes-" + (appOptions.fileKey || '')));
+            // Init display mode
+            if (!appOptions.canReview) {
+                const canViewReview = appOptions.isEdit || api.asc_HaveRevisionsChanges(true);
+                appOptions.setCanViewReview(canViewReview);
+                if (canViewReview) {
+                    let viewReviewMode = LocalStorage.getItem("de-view-review-mode");
+                    if (viewReviewMode === null)
+                        viewReviewMode = appOptions.customization && /^(original|final|markup)$/i.test(appOptions.customization.reviewDisplay) ? appOptions.customization.reviewDisplay.toLocaleLowerCase() : 'original';
+                    viewReviewMode = (appOptions.isEdit || appOptions.isRestrictedEdit) ? 'markup' : viewReviewMode;
+                    const displayMode = viewReviewMode.toLocaleLowerCase();
+                    if (displayMode === 'final') {
+                        api.asc_BeginViewModeInReview(true);
+                    } else if (displayMode === 'original') {
+                        api.asc_BeginViewModeInReview(false);
+                    } else {
+                        api.asc_EndViewModeInReview();
+                    }
+                    props.storeReview.changeDisplayMode(displayMode);
+                }
+            }
+        });
+    }
+
+    onChangeReview (data) {
+        const storeReview = this.props.storeReview;
+        storeReview.changeArrReview(data);
+    }
+
+    render() {
+        return null
+    }
+}
+
+class Review extends Component {
+    constructor(props) {
+        super(props);
+        this.onTrackChanges = this.onTrackChanges.bind(this);
+        this.onDisplayMode = this.onDisplayMode.bind(this);
+
+        this.appConfig = props.storeAppOptions;
+        this.editorPrefix = window.editorType || '';
+
+        let trackChanges = typeof this.appConfig.customization == 'object' ? this.appConfig.customization.trackChanges : undefined;
+        trackChanges = this.appConfig.isReviewOnly || trackChanges === true || trackChanges !== false
+            && LocalStorage.getBool(`${this.editorPrefix}-mobile-track-changes-${this.appConfig.fileKey || ''}`);
+
+        this.state = {
+            trackChanges: trackChanges
+        }
+    }
+
+    onTrackChanges (checked) {
+        const api = Common.EditorApi.get();
+        if ( this.appConfig.isReviewOnly ) {
+            this.setState({trackChanges: true});
+        } else {
+            this.setState({trackChanges: checked});
+            api.asc_SetTrackRevisions(checked);
+            LocalStorage.setBool(`${this.editorPrefix}-mobile-track-changes-${this.appConfig.fileKey || ''}`, checked);
+        }
+    }
+
+    onAcceptAll () {
+        const api = Common.EditorApi.get();
+        api.asc_AcceptAllChanges();
+    }
+
+    onRejectAll () {
+        const api = Common.EditorApi.get();
+        api.asc_RejectAllChanges();
+    }
+
+    onDisplayMode (mode) {
+        const api = Common.EditorApi.get();
+        if (mode === 'final') {
+            api.asc_BeginViewModeInReview(true);
+        } else if (mode === 'original') {
+            api.asc_BeginViewModeInReview(false);
+        } else {
+            api.asc_EndViewModeInReview();
+        }
+        !this.appConfig.canReview && LocalStorage.setItem("de-view-review-mode", mode);
+        this.props.storeReview.changeDisplayMode(mode);
+    }
+
+    render() {
+        const displayMode = this.props.storeReview.displayMode;
+        const isReviewOnly = this.appConfig.isReviewOnly;
+        const canReview = this.appConfig.canReview;
+        const canUseReviewPermissions = this.appConfig.canUseReviewPermissions;
+        const isRestrictedEdit = this.appConfig.isRestrictedEdit;
+        return (
+            <PageReview isReviewOnly={isReviewOnly}
+                        canReview={canReview}
+                        canUseReviewPermissions={canUseReviewPermissions}
+                        isRestrictedEdit={isRestrictedEdit}
+                        displayMode={displayMode}
+                        trackChanges={this.state.trackChanges}
+                        onTrackChanges={this.onTrackChanges}
+                        onAcceptAll={this.onAcceptAll}
+                        onRejectAll={this.onRejectAll}
+                        onDisplayMode={this.onDisplayMode}
+                        noBack={this.props.noBack}
+            />
+        )
+    }
+}
+
+class ReviewChange extends Component {
+    constructor (props) {
+        super(props);
+        this.onAcceptCurrentChange = this.onAcceptCurrentChange.bind(this);
+        this.onRejectCurrentChange = this.onRejectCurrentChange.bind(this);
+        this.onGotoNextChange = this.onGotoNextChange.bind(this);
+        this.onDeleteChange = this.onDeleteChange.bind(this);
+
+        this.appConfig = props.storeAppOptions;
+
+        if (this.appConfig && this.appConfig.canUseReviewPermissions) {
+            const permissions = this.appConfig.customization.reviewPermissions;
+            let arr = [];
+            const groups  =  Common.Utils.UserInfoParser.getParsedGroups(Common.Utils.UserInfoParser.getCurrentName());
+            groups && groups.forEach(function(group) {
+                const item = permissions[group.trim()];
+                item && (arr = arr.concat(item));
+            });
+            this.currentUserGroups = arr;
+        }
+    }
+    intersection (arr1, arr2) { //Computes the list of values that are the intersection of all the arrays.
+        const arr = [];
+        arr1.forEach((item1) => {
+            arr2.forEach((item2) => {
+                if (item1 === item2) {
+                    arr.push(item2);
+                }
+            });
+        });
+        return arr;
+    }
+    checkUserGroups (username) {
+        const groups = Common.Utils.UserInfoParser.getParsedGroups(username);
+        return this.currentUserGroups && groups && (this.intersection(this.currentUserGroups, (groups.length>0) ? groups : [""]).length>0);
+    }
+    dateToLocaleTimeString (date) {
+        const format = (date) => {
+            let strTime,
+                hours = date.getHours(),
+                minutes = date.getMinutes(),
+                ampm = hours >= 12 ? 'pm' : 'am';
+
+            hours = hours % 12;
+            hours = hours ? hours : 12; // the hour '0' should be '12'
+            minutes = minutes < 10 ? '0' + minutes : minutes;
+            strTime = hours + ':' + minutes + ' ' + ampm;
+
+            return strTime;
+        };
+
+        // MM/dd/yyyy hh:mm AM
+        return (date.getMonth() + 1) + '/' + (date.getDate()) + '/' + date.getFullYear() + ' ' + format(date);
+    }
+    getArrChangeReview (data) {
+        const api = Common.EditorApi.get();
+
+        const { t } = this.props;
+        const _t = t("Common.Collaboration", { returnObjects: true });
+
+        if (data.length === 0) return [];
+        const arr = [];
+        const c_paragraphLinerule = {
+            LINERULE_LEAST: 0,
+            LINERULE_AUTO: 1,
+            LINERULE_EXACT: 2
+        };
+        data.forEach((item) => {
+            let changeText = [], proptext = [],
+                value = item.get_Value(),
+                movetype = item.get_MoveType();
+            switch (item.get_Type()) {
+                case Asc.c_oAscRevisionsChangeType.TextAdd:
+                    changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextAdd}`}><b>{movetype === Asc.c_oAscRevisionsMove.NoMove ? _t.textInserted : _t.textParaMoveTo}</b></label>);
+                    if (typeof value == 'object') {
+                        value.forEach( (obj) => {
+                            if (typeof obj === 'string')
+                                changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextAdd}-1`}> {Common.Utils.String.htmlEncode(obj)}</label>);
+                            else {
+                                switch (obj) {
+                                    case 0:
+                                        changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextAdd}-2`}> &lt;{_t.textImage}&gt;</label>);
+                                        break;
+                                    case 1:
+                                        changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextAdd}-3`}> &lt;{_t.textShape}&gt;</label>);
+                                        break;
+                                    case 2:
+                                        changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextAdd}-4`}> &lt;{_t.textChart}&gt;</label>);
+                                        break;
+                                    case 3:
+                                        changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextAdd}-5`}> &lt;{_t.textEquation}&gt;</label>);
+                                        break;
+                                }
+                            }
+                        })
+                    } else if (typeof value === 'string') {
+                        changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextAdd}-6`}> {Common.Utils.String.htmlEncode(value)}</label>);
+                    }
+                    break;
+                case Asc.c_oAscRevisionsChangeType.TextRem:
+                    changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextRem}`}><b>{(movetype === Asc.c_oAscRevisionsMove.NoMove) ? _t.textDeleted : (item.is_MovedDown() ? _t.textParaMoveFromDown : _t.textParaMoveFromUp)}</b></label>);
+                    if (typeof value == 'object') {
+                        value.forEach( (obj) => {
+                            if (typeof obj === 'string')
+                                changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextRem}-1`}> {Common.Utils.String.htmlEncode(obj)}</label>);
+                            else {
+                                switch (obj) {
+                                    case 0:
+                                        changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextRem}-2`}> &lt;{_t.textImage}&gt;</label>);
+                                        break;
+                                    case 1:
+                                        changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextRem}-3`}> &lt;{_t.textShape}&gt;</label>);
+                                        break;
+                                    case 2:
+                                        changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextRem}-4`}> &lt;{_t.textChart}&gt;</label>);
+                                        break;
+                                    case 3:
+                                        changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextRem}-5`}> &lt;{_t.textEquation}&gt;</label>);
+                                        break;
+                                }
+                            }
+                        })
+                    } else if (typeof value === 'string') {
+                        changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextRem}-6`}> {Common.Utils.String.htmlEncode(value)}</label>);
+                    }
+                    break;
+                case Asc.c_oAscRevisionsChangeType.ParaAdd:
+                    changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaAdd}`}><b>{_t.textParaInserted}</b> </label>);
+                    break;
+                case Asc.c_oAscRevisionsChangeType.ParaRem:
+                    changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaRem}`}><b>{_t.textParaDeleted}</b> </label>);
+                    break;
+                case Asc.c_oAscRevisionsChangeType.TextPr:
+                    if (value.Get_Bold() !== undefined)
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-1`}>{(value.Get_Bold() ? '' : _t.textNot) + _t.textBold}</label>);
+                    if (value.Get_Italic() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-02`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-2`}>{(value.Get_Italic() ? '' : _t.textNot) + _t.textItalic}</label>);
+                    }
+                    if (value.Get_Underline() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-03`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-3`}>{(value.Get_Underline() ? '' : _t.textNot) + _t.textUnderline}</label>);
+                    }
+                    if (value.Get_Strikeout() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-04`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-4`}>{(value.Get_Strikeout() ? '' : _t.textNot) + _t.textStrikeout}</label>);
+                    }
+                    if (value.Get_DStrikeout() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-05`}>, </label>);
+                        proptext.push(<label  key={`${Asc.c_oAscRevisionsChangeType.TextPr}-5`}>{(value.Get_DStrikeout() ? '' : _t.textNot) + _t.textDStrikeout}</label>);
+                    }
+                    if (value.Get_Caps() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-06`}>, </label>);
+                        proptext.push(<label  key={`${Asc.c_oAscRevisionsChangeType.TextPr}-6`}>{(value.Get_Caps() ? '' : _t.textNot) + _t.textCaps}</label>);
+                    }
+                    if (value.Get_SmallCaps() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-07`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-7`}>{(value.Get_SmallCaps() ? '' : _t.textNot) + _t.textSmallCaps}</label>);
+                    }
+                    if (value.Get_VertAlign() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-08`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-8`}>{((value.Get_VertAlign() == 1) ? _t.textSuperScript : ((value.Get_VertAlign() == 2) ? _t.textSubScript : _t.textBaseline))}</label>);
+                    }
+                    if (value.Get_Color() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-09`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-9`}>{_t.textColor}</label>);
+                    }
+                    if (value.Get_Highlight() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-010`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-10`}>{_t.textHighlight}</label>);
+                    }
+                    if (value.Get_Shd() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-011`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-11`}>{_t.textShd}</label>);
+                    }
+                    if (value.Get_FontFamily() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-012`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-12`}>{value.Get_FontFamily()}</label>);
+                    }
+                    if (value.Get_FontSize() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-013`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-13`}>{value.Get_FontSize()}</label>);
+                    }
+                    if (value.Get_Spacing() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-014`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-14`}>{_t.textSpacing} {Common.Utils.Metric.fnRecalcFromMM(value.Get_Spacing()).toFixed(2)} {Common.Utils.Metric.getCurrentMetricName()}</label>);
+                    }
+                    if (value.Get_Position() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-015`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-15`}>{_t.textPosition} {Common.Utils.Metric.fnRecalcFromMM(value.Get_Position()).toFixed(2)} {Common.Utils.Metric.getCurrentMetricName()}</label>);
+                    }
+                    if (value.Get_Lang() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-016`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-16`}>{Common.util.LanguageInfo.getLocalLanguageName(value.Get_Lang())[1]}</label>);
+                    }
+
+                    if (proptext.length > 0) {
+                        changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-17`}><b>{_t.textFormatted}: </b></label>);
+                        proptext.forEach((item) => {
+                            changeText.push(item);
+                        });
+                    } else {
+                        changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.TextPr}-18`}><b>{_t.textFormatted}</b></label>);
+                    }
+                    break;
+                case Asc.c_oAscRevisionsChangeType.ParaPr:
+                    if (value.Get_ContextualSpacing())
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-1`}>{(value.Get_ContextualSpacing() ? _t.textContextual : _t.textNoContextual)}</label>);
+                    if (value.Get_IndLeft() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-02`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-2`}>{_t.textIndentLeft} {Common.Utils.Metric.fnRecalcFromMM(value.Get_IndLeft()).toFixed(2)} {Common.Utils.Metric.getCurrentMetricName()}</label>);
+                    }
+                    if (value.Get_IndRight() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-03`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-3`}>{_t.textIndentRight} {Common.Utils.Metric.fnRecalcFromMM(value.Get_IndRight()).toFixed(2)} {Common.Utils.Metric.getCurrentMetricName()}</label>);
+                    }
+                    if (value.Get_IndFirstLine() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-04`}>, </label>);
+                        proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-4`}>{_t.textFirstLine} {Common.Utils.Metric.fnRecalcFromMM(value.Get_IndFirstLine()).toFixed(2)} {Common.Utils.Metric.getCurrentMetricName()}</label>);
+                    }
+                    if (value.Get_Jc() !== undefined) {
+                        switch (value.Get_Jc()) {
+                            case 0:
+                                proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-05`}>, </label>);
+                                proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-5`}>{_t.textRight}</label>);
+                                break;
+                            case 1:
+                                proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-06`}>, </label>);
+                                proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-6`}>{_t.textLeft}</label>);
+                                break;
+                            case 2:
+                                proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-07`}>, </label>);
+                                proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-7`}>{_t.textCenter}</label>);
+                                break;
+                            case 3:
+                                proptext.length > 0 && proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-08`}>, </label>);
+                                proptext.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-8`}>{_t.textJustify}</label>);
+                                break;
+                        }
+                    }
+                    if (value.Get_KeepLines() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`keepLines-01`}>, </label>);
+                        proptext.push(<label key={`keepLines-1`}>{(value.Get_KeepLines() ? _t.textKeepLines : _t.textNoKeepLines)}</label>);
+                    }
+                    if (value.Get_KeepNext()) {
+                        proptext.length > 0 && proptext.push(<label key={`keepNext-01`}>, </label>);
+                        proptext.push(<label key={`keepNext-1`}>{(value.Get_KeepNext() ? _t.textKeepNext : _t.textNoKeepNext)}</label>);
+                    }
+                    if (value.Get_PageBreakBefore()) {
+                        proptext.length > 0 && proptext.push(<label key={`breakBefore-01`}>, </label>);
+                        proptext.push(<label key={`breakBefore-1`}>{(value.Get_PageBreakBefore() ? _t.textBreakBefore : _t.textNoBreakBefore)}</label>);
+                    }
+                    if (value.Get_SpacingLineRule() !== undefined && value.Get_SpacingLine() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`spacingLineRule-01`}>, </label>);
+                        proptext.push(<label key={`spacingLineRule-1`}>{t.textLineSpacing}</label>);
+                        proptext.push(<label key={`spacingLineRule-2`}>{((value.Get_SpacingLineRule() == c_paragraphLinerule.LINERULE_LEAST) ? _t.textAtLeast : ((value.Get_SpacingLineRule() == c_paragraphLinerule.LINERULE_AUTO) ? _t.textMultiple : _t.textExact))} </label>);
+                        proptext.push(<label key={`spacingLineRule-3`}>{((value.Get_SpacingLineRule() == c_paragraphLinerule.LINERULE_AUTO) ? value.Get_SpacingLine() : Common.Utils.Metric.fnRecalcFromMM(value.Get_SpacingLine()).toFixed(2) + ' ' + Common.Utils.Metric.getCurrentMetricName())}</label>);
+                    }
+                    if (value.Get_SpacingBeforeAutoSpacing()) {
+                        proptext.length > 0 && proptext.push(<label key={`spacingBeforeAutoSpacing-01`}>, </label>);
+                        proptext.push(<label key={`spacingBeforeAutoSpacing-1`}>{_t.textSpacingBefore} {_t.textAuto}</label>);
+                    }
+                    else if (value.Get_SpacingBefore() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`spacingBefore-01`}>, </label>);
+                        proptext.push(<label key={`spacingBefore-1`}>{_t.textSpacingBefore} {Common.Utils.Metric.fnRecalcFromMM(value.Get_SpacingBefore()).toFixed(2)} {Common.Utils.Metric.getCurrentMetricName()}</label>);
+                    }
+                    if (value.Get_SpacingAfterAutoSpacing()) {
+                        proptext.length > 0 && proptext.push(<label key={`spacingAfterAutoSpacing-01`}>, </label>);
+                        proptext.push(<label key={`spacingAfterAutoSpacing-1`}>{_t.textSpacingAfter} {_t.textAuto}</label>);
+                    }
+                    else if (value.Get_SpacingAfter() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`spacingAfter-01`}>, </label>);
+                        proptext.push(<label key={`spacingAfter-1`}>{_t.textSpacingAfter} {Common.Utils.Metric.fnRecalcFromMM(value.Get_SpacingAfter()).toFixed(2)} {Common.Utils.Metric.getCurrentMetricName()}</label>);
+                    }
+                    if (value.Get_WidowControl()) {
+                        proptext.length > 0 && proptext.push(<label key={`widowControl-01`}>, </label>);
+                        proptext.push(<label key={`widowControl-1`}>{(value.Get_WidowControl() ? _t.textWidow : _t.textNoWidow)}</label>);
+                    }
+                    if (value.Get_Tabs() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`tabs-01`}>, </label>);
+                        proptext.push(<label key={`tabs-1`}>{_t.textTabs}</label>);
+                    }
+                    if (value.Get_NumPr() !== undefined) {
+                        proptext.length > 0 && proptext.push(<label key={`num-01`}>, </label>);
+                        proptext.push(<label key={`num-1`}>{_t.textNum}</label>)
+                    }
+                    if (value.Get_PStyle() !== undefined) {
+                        const style = api.asc_GetStyleNameById(value.Get_PStyle());
+                        if (style.length > 0) {
+                            proptext.length > 0 && proptext.push(<label key={`style-01`}>, </label>);
+                            proptext.push(<label key={`style-1`}>{style}</label>);
+                        }
+                    }
+
+                    if (proptext.length > 0) {
+                        changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-9`}><b>{_t.textParaFormatted}: </b></label>);
+                        proptext.forEach((item) => {
+                            changeText.push(item);
+                        });
+                    } else {
+                        changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-10`}><b>{_t.textParaFormatted}</b></label>);
+                    }
+                    break;
+                case Asc.c_oAscRevisionsChangeType.TablePr:
+                    changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-11`}><b>{_t.textTableChanged}</b></label>);
+                    break;
+                case Asc.c_oAscRevisionsChangeType.RowsAdd:
+                    changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-12`}><b>{_t.textTableRowsAdd}</b></label>);
+                    break;
+                case Asc.c_oAscRevisionsChangeType.RowsRem:
+                    changeText.push(<label key={`${Asc.c_oAscRevisionsChangeType.ParaPr}-13`}><b>{_t.textTableRowsDel}</b></label>);
+                    break;
+
+            }
+            let date = (item.get_DateTime() == '') ? new Date() : new Date(item.get_DateTime());
+            const user = item.get_UserName();
+            const userColor = item.get_UserColor();
+            const goto = (item.get_MoveType() == Asc.c_oAscRevisionsMove.MoveTo || item.get_MoveType() == Asc.c_oAscRevisionsMove.MoveFrom);
+            date = this.dateToLocaleTimeString(date);
+            const editable = this.appConfig.isReviewOnly && (item.get_UserId() == this.appConfig.user.id) || !this.appConfig.isReviewOnly && (!this.appConfig.canUseReviewPermissions || this.checkUserGroups(item.get_UserName()));
+            arr.push({date: date, user: user, userColor: userColor, changeText: changeText, goto: goto, editable: editable});
+        });
+        return arr;
+    }
+
+    onPrevChange () {
+        const api = Common.EditorApi.get();
+        api.asc_GetPrevRevisionsChange();
+    }
+
+    onNextChange () {
+        const api = Common.EditorApi.get();
+        api.asc_GetNextRevisionsChange();
+    }
+
+    onAcceptCurrentChange () {
+        const api = Common.EditorApi.get();
+        api.asc_AcceptChanges(this.dataChanges[0]);
+        setTimeout(() => {
+            api.asc_GetNextRevisionsChange();
+        });
+    }
+
+    onRejectCurrentChange () {
+        const api = Common.EditorApi.get();
+        api.asc_RejectChanges(this.dataChanges[0]);
+        setTimeout(() => {
+            api.asc_GetNextRevisionsChange();
+        });
+    }
+
+    onGotoNextChange () {
+        const api = Common.EditorApi.get();
+        api.asc_FollowRevisionMove(this.dataChanges[0]);
+    }
+
+    onDeleteChange () {
+        const api = Common.EditorApi.get();
+        api.asc_RejectChanges(this.dataChanges[0]);
+    }
+
+    render() {
+        this.dataChanges = this.props.storeReview.dataChanges;
+        const arrChangeReview = this.getArrChangeReview(this.dataChanges);
+        let change;
+        let goto = false;
+        if (arrChangeReview.length > 0) {
+            change = {
+                date: arrChangeReview[0].date,
+                user: arrChangeReview[0].user,
+                userName: Common.Utils.String.htmlEncode(Common.Utils.UserInfoParser.getParsedName(arrChangeReview[0].user)),
+                color: arrChangeReview[0].userColor.get_hex(),
+                text: arrChangeReview[0].changeText,
+                initials: this.props.users.getInitials(arrChangeReview[0].user),
+                editable: arrChangeReview[0].editable
+            };
+            goto = arrChangeReview[0].goto;
+        }
+
+        const isReviewOnly = this.appConfig.isReviewOnly;
+        const canReview = this.appConfig.canReview;
+        const displayMode = this.props.storeReview.displayMode;
+
+        return (
+            <PageReviewChange change={change}
+                              goto={goto}
+                              isReviewOnly={isReviewOnly}
+                              canReview={canReview}
+                              displayMode={displayMode}
+                              onPrevChange={this.onPrevChange}
+                              onNextChange={this.onNextChange}
+                              onAcceptCurrentChange={this.onAcceptCurrentChange}
+                              onRejectCurrentChange={this.onRejectCurrentChange}
+                              onGotoNextChange={this.onGotoNextChange}
+                              onDeleteChange={this.onDeleteChange}
+                              noBack={this.props.noBack}
+            />
+        )
+    }
+}
+
+
+const InitReviewController = inject("storeAppOptions", "storeReview")(observer(InitReview));
+const ReviewController = inject("storeAppOptions", "storeReview")(observer(Review));
+const ReviewChangeController = withTranslation()(inject("storeAppOptions", "storeReview", "users")(observer(ReviewChange)));
+
+export {InitReviewController, ReviewController, ReviewChangeController};

apps/common/mobile/lib/store/comments.js

@@ -0,0 +1,127 @@
+
+import {makeObservable, observable, action, computed} from 'mobx';
+
+export class storeComments {
+    constructor() {
+        makeObservable(this, {
+            collectionComments: observable,
+            groupCollectionComments: observable,
+            filter: observable,
+
+            showComments: observable,
+            changeShowComment: action,
+
+            addComment: action,
+            removeComment: action,
+            changeComment: action,
+            changeFilter: action,
+
+            groupCollectionFilter: computed,
+
+            isOpenEditComment: observable,
+            openEditComment: action,
+            isOpenAddReply: observable,
+            openAddReply: action,
+            isOpenEditReply: observable,
+            openEditReply: action
+        })
+    }
+    collectionComments = [];
+    groupCollectionComments = [];
+
+    filter = undefined;
+
+    showComments = [];
+    changeShowComment (uid) {
+        this.showComments.length = 0;
+        uid.forEach((item) => {
+            this.showComments.push(this.findComment(item));
+        });
+    }
+
+    addComment (comment) {
+        comment.groupName ? this.groupCollectionComments.push(comment) : this.collectionComments.push(comment);
+    }
+
+    removeComment (id) {
+        const collection = this.collectionComments.length > 0 ? this.collectionComments : this.groupCollectionComments;
+        const index = collection.findIndex((comment) => {
+            return comment.uid === id;
+        });
+        if (index !== -1) {
+            collection.splice(index, 1);
+        }
+    }
+
+    changeComment (id, changeComment) {
+        const comment = this.findComment(id);
+        if (comment) {
+            comment.comment = changeComment.comment;
+            comment.userId = changeComment.userId;
+            comment.userName = changeComment.userName;
+            comment.userColor = changeComment.userColor;
+            comment.resolved = changeComment.resolved;
+            comment.quote = changeComment.quote;
+            comment.time = changeComment.time;
+            comment.date = changeComment.date;
+            comment.editable = changeComment.editable;
+            comment.removable = changeComment.removable;
+            comment.replies = changeComment.replies;
+        }
+    }
+
+    changeFilter (filter) {
+        this.filter = filter;
+    }
+
+    findComment (id) {
+        const collection = this.collectionComments.length > 0 ? this.collectionComments : this.groupCollectionComments;
+        let comment = collection.find((item) => {
+            return item.uid === id;
+        });
+        return comment;
+    }
+
+    get groupCollectionFilter () {
+        if (this.filter && this.groupCollectionComments.length > 0) {
+            const arr = [];
+            this.filter.forEach((groupName) => {
+                this.groupCollectionComments.forEach((comment) => {
+                    if (comment.groupName === groupName) {
+                        arr.push(comment);
+                    }
+                });
+            });
+            return arr;
+        }
+        return false;
+    }
+
+    // Edit comment
+    currentComment = null;
+    isOpenEditComment = false;
+    openEditComment (open, comment) {
+        if (open !== this.isOpenEditComment) {
+            this.currentComment = open ? comment : null;
+            this.isOpenEditComment = open;
+        }
+    }
+
+    currentReply = null;
+    isOpenAddReply = false;
+    openAddReply (open, comment) {
+        if (open !== this.isOpenAddReply) {
+            this.currentComment = open ? comment : null;
+            this.isOpenAddReply = open;
+        }
+    }
+
+    isOpenEditReply = false;
+    openEditReply (open, comment, reply) {
+        if (open !== this.isOpenEditReply) {
+            this.currentComment = open ? comment : null;
+            this.currentReply = open ? reply : null;
+            this.isOpenEditReply = open;
+        }
+    }
+}

apps/common/mobile/lib/store/users.js

@@ -0,0 +1,94 @@
+
+import {makeObservable, observable, action, computed} from 'mobx';
+
+export class storeUsers {
+    constructor() {
+        makeObservable(this, {
+            users: observable,
+            reset: action,
+            currentUser: observable,
+            setCurrentUser: action,
+            connection: action,
+            isDisconnected: observable,
+            resetDisconnected: action,
+            hasEditUsers: computed
+        })
+    }
+
+    users = [];
+    currentUser;
+    isDisconnected = false;
+
+    reset (users) {
+        this.users = Object.values(users)
+    }
+
+    setCurrentUser (id) {
+        this.users.forEach((item) => {
+            if (item.asc_getIdOriginal() === id) {
+                this.currentUser = item;
+            }
+        });
+        return this.currentUser;
+    }
+
+    connection (change) {
+        let changed = false;
+        for (let uid in this.users) {
+            if (undefined !== uid) {
+                const user = this.users[uid];
+                if (user && user.asc_getId() === change.asc_getId()) {
+                    this.users[uid] = change;
+                    changed = true;
+                }
+            }
+        }
+        !changed && change && (this.users[change.asc_getId()] = change);
+    }
+
+    resetDisconnected (isDisconnected) {
+        this.isDisconnected = isDisconnected;
+    }
+
+    getInitials (name) {
+        const fio = Common.Utils.UserInfoParser.getParsedName(name).split(' ');
+        let initials = fio[0].substring(0, 1).toUpperCase();
+        for (let i = fio.length-1; i>0; i--) {
+            if (fio[i][0]!=='(' && fio[i][0]!==')') {
+                initials += fio[i].substring(0, 1).toUpperCase();
+                break;
+            }
+        }
+        return initials;
+    }
+
+    searchUserById (id) {
+        let user = null;
+        this.users.forEach((item) => {
+            if (item.asc_getIdOriginal() === id) {
+                user = item;
+            }
+        });
+        return user;
+    }
+
+    searchUserByCurrentId (id) {
+        let user = null;
+        this.users.forEach((item) => {
+            if (item.asc_getId() === id) {
+                user = item;
+            }
+        });
+        return user;
+    }
+
+    get hasEditUsers () {
+        let length = 0;
+        this.users.forEach((item) => {
+            if ((item.asc_getState()!==false) && !item.asc_getView()) {
+                length++;
+            }
+        });
+        return (length >= 1);
+    }
+}

apps/common/mobile/lib/view/About.jsx

@@ -0,0 +1,126 @@
+import React, { Fragment } from 'react';
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, Link } from "framework7-react";
+import { useTranslation } from "react-i18next";
+
+const PageAbout = props => {
+    const { t } = useTranslation();
+    const _t = t("About", { returnObjects: true });
+    const store = props.storeAppOptions;
+    const isCanBranding = store.canBranding;
+    const licInfo = isCanBranding ? store.customization : null;
+    const customer = licInfo ? licInfo.customer : null;
+    const nameCustomer = customer ? customer.name : null;
+    const mailCustomer = customer ? customer.mail : null;
+    const addressCustomer = customer ? customer.address : null;
+    const urlCustomer = customer ? customer.www : null;
+    const infoCustomer = customer ? customer.info : null;
+    const logoCustomer = customer ? customer.logo : null;
+
+    const publisherUrl = __PUBLISHER_URL__,
+        publisherPrintUrl = publisherUrl.replace(/https?:\/{2}|\/$/,"");
+    
+    const editors = {
+        de: 'DOCUMENT EDITOR',
+        pe: 'PRESENTATION EDITOR',
+        sse: 'SPREADSHEET EDITOR'
+    };
+
+    const nameEditor = editors[editorType];
+
+    return (
+        <Page className="about">
+            <Navbar title={_t.textAbout} backLink={_t.textBack} />
+            {licInfo && typeof licInfo == 'object' && typeof(customer) == 'object' ? (
+                <Fragment>
+                    <div className="content-block">
+                        {logoCustomer && logoCustomer.length ? (
+                            <div id="settings-about-logo" className="settings-about-logo">
+                                <img src={logoCustomer} alt="" />
+                            </div>
+                        ) : null}
+                    </div>
+                    <div className="content-block">
+                        <h3>{nameEditor}</h3>
+                        <h3>{_t.textVersion} {__PRODUCT_VERSION__}</h3>
+                    </div>
+                    <div className="content-block">
+                        {nameCustomer && nameCustomer.length ? (
+                            <h3 id="settings-about-name" className="vendor">{nameCustomer}</h3>
+                        ) : null}
+                        {addressCustomer && addressCustomer.length ? (
+                            <p>
+                                <label>{_t.textAddress}:</label>
+                                <Link id="settings-about-address" className="external">{addressCustomer}</Link>
+                            </p>
+                        ) : null}
+                        {mailCustomer && mailCustomer.length ? (
+                            <p>
+                                <label>{_t.textEmail}:</label>
+                                <Link id="settings-about-email" className="external" target="_blank" href={"mailto:"+mailCustomer}>{mailCustomer}</Link>
+                            </p>
+                        ) : null}
+                        {urlCustomer && urlCustomer.length ? (
+                            <p>
+                                <Link id="settings-about-url" className="external" target="_blank" 
+                                    href={!/^https?:\/{2}/i.test(urlCustomer) ? "http:\/\/" : '' + urlCustomer}>
+                                    {urlCustomer}
+                                </Link>
+                            </p>
+                        ) : null} 
+                        {infoCustomer && infoCustomer.length ? (
+                            <p>
+                                <label id="settings-about-info">{infoCustomer}</label>
+                            </p>
+                        ) : null}
+                    </div>
+                    <div className="content-block" id="settings-about-licensor">
+                        <div className="content-block-inner"></div>
+                        <p>
+                            <label>{_t.textPoweredBy}</label>
+                        </p>
+                        <h3 className="vendor">{__PUBLISHER_NAME__}</h3>
+                        <p>
+                            <Link className="external" target="_blank" href={publisherUrl}>{publisherPrintUrl}</Link>
+                        </p>
+                    </div>
+                </Fragment>
+            ) : (
+                <Fragment>
+                    <div className="content-block">
+                        <div className="logo"></div>
+                    </div>
+                    <div className="content-block">
+                        <h3>{nameEditor}</h3>
+                        <h3>{_t.textVersion} {__PRODUCT_VERSION__}</h3>
+                    </div>
+                    <div className="content-block">
+                        <h3 id="settings-about-name" className="vendor">{__PUBLISHER_NAME__}</h3>
+                        <p>
+                            <label>{_t.textAddress}:</label>
+                            <a id="settings-about-address" className="external">{__PUBLISHER_ADDRESS__}</a>
+                        </p>
+                        <p>
+                            <label>{_t.textEmail}:</label>
+                            <a id="settings-about-email" className="external" href={`mailto:${__SUPPORT_EMAIL__}`}>{__SUPPORT_EMAIL__}</a>
+                        </p>
+                        <p>
+                            <label>{_t.textTel}:</label>
+                            <a id="settings-about-tel" className="external" href={`tel:${__PUBLISHER_PHONE__}`}>{__PUBLISHER_PHONE__}</a>
+                        </p>
+                        <p>
+                            <a id="settings-about-url" className="external" target="_blank" href={publisherUrl}>{publisherPrintUrl}</a>
+                        </p>
+                    </div>
+                </Fragment>
+            )}
+        </Page>
+    );
+};
+
+const About = inject("storeAppOptions")(observer(PageAbout));
+About.appVersion = () => (__PRODUCT_VERSION__);
+About.compareVersions = () => /d$/.test(__PRODUCT_VERSION__);
+
+
+export default About;

apps/common/mobile/lib/view/ContextMenu.jsx

@@ -0,0 +1,62 @@
+import React, { Component } from 'react';
+import { Popover, List, ListItem, ListButton, Link, Icon, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
+import { f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+
+const idContextMenuElement = "idx-context-menu-popover";
+
+class ContextMenuView extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    componentDidMount() {
+        // f7.popover.open('#idx-context-menu-popover', '#idx-context-menu-target');
+    }
+
+    render() {
+        const buttons = this.props.items || {};
+
+        return (
+            <Popover id={idContextMenuElement}
+                     className="document-menu"
+                     backdrop={false}
+                     closeByBackdropClick={false}
+                     closeByOutsideClick={false}
+                     onPopoverClosed={e => this.props.onMenuClosed()}
+            >
+                <List className="list-block">
+                    {buttons.map((b, index) =>
+                        !b.icon ?
+                            <ListButton title={b.caption} key={index} onClick={e => this.props.onMenuItemClick(b.event)} /> :
+                            <ListButton key={index} onClick={e => this.props.onMenuItemClick(b.event)}>
+                                <Icon slot="media" icon={`icon_mask ${b.icon}`} />
+                            </ListButton>
+                    )}
+                </List>
+            </Popover>
+        )
+    }
+}
+
+const ActionsWithExtraItems = ({items, onMenuItemClick, opened, onActionClosed}) => {
+    const { t } = useTranslation();
+    const _t = t('ContextMenu', {returnObjects: true});
+    return (
+        <Actions opened={opened} onActionsClosed={() => onActionClosed()}>
+            <ActionsGroup>
+                {items.length > 0 && items.map((item, index)=>{
+                    return(
+                        <ActionsButton key={`act-${index}`} onClick={() => {onMenuItemClick(item.event)}}>{item.caption}</ActionsButton>
+                    )
+                })}
+            </ActionsGroup>
+            <ActionsGroup>
+                <ActionsButton>{_t.menuCancel}</ActionsButton>
+            </ActionsGroup>
+        </Actions>
+    )
+};
+
+const exportedIdMenuElemen = `#${idContextMenuElement}`;
+export {ContextMenuView as default, exportedIdMenuElemen as idContextMenuElement, ActionsWithExtraItems};

apps/common/mobile/lib/view/Search.jsx

@@ -0,0 +1,324 @@
+
+import React, { Component } from 'react';
+import { Searchbar, Popover, Popup, View, Page, List, ListItem, Navbar, NavRight, Link } from 'framework7-react';
+import { Toggle } from 'framework7-react';
+import { f7 } from 'framework7-react';
+import { Dom7 } from 'framework7';
+import { Device } from '../../../../common/mobile/utils/device';
+import { observable, runInAction } from "mobx";
+import { observer } from "mobx-react";
+
+const searchOptions = observable({
+    usereplace: false,
+    isReplaceAll: false
+});
+
+const popoverStyle = {
+    height: '300px'
+};
+
+const SEARCH_BACKWARD = 'back';
+const SEARCH_FORWARD = 'next';
+
+class SearchSettingsView extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            useReplace: false,
+            // caseSensitive: false,
+            // markResults: false
+            searchIn: 0,
+            searchBy: 1,
+            lookIn: 1,
+            isMatchCase: false,
+            isMatchCell: false,
+            isReplaceAll: false
+        };
+    }
+
+    onFindReplaceClick(action) {
+        runInAction(() => {
+            searchOptions.usereplace = action == 'replace';
+            searchOptions.isReplaceAll = action == 'replace-all';
+        });
+
+        this.setState({
+            useReplace: searchOptions.usereplace,
+            isReplaceAll: searchOptions.isReplaceAll
+        });
+
+        if (this.onReplaceChecked) {}
+    }
+
+    extraSearchOptions() {
+    }
+
+    render() {
+        const show_popover = !Device.phone;
+        // const navbar =
+        //     <Navbar title="Find and replace">
+        //         {!show_popover &&
+        //             <NavRight>
+        //                 <Link popupClose=".search-settings-popup">Done</Link>
+        //             </NavRight>
+        //         }
+        //     </Navbar>;
+        const extra = this.extraSearchOptions();
+        const content =
+            <View style={show_popover ? popoverStyle : null}>
+                {/* <Page>
+                    {navbar} */}
+                {extra}
+                {/* </Page> */}
+            </View>;
+        return (
+            show_popover ?
+                <Popover id="idx-search-settings" className="popover__titled">{content}</Popover> :
+                <Popup id="idx-search-settings" className="search-settings-popup">{content}</Popup>
+        )
+    }
+}
+
+// @observer
+class SearchView extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            searchQuery: '',
+            replaceQuery: ''
+        };
+
+        const $$ = Dom7;
+
+        $$(document).on('page:init', (e, page) => {
+            if ( page.name == 'home' ) {
+                this.searchbar = f7.searchbar.create({
+                    el: '.searchbar',
+                    customSearch: true,
+                    expandable: true,
+                    backdrop: false,
+                    on: {
+                            search: (bar, curval, prevval) => {
+                        },
+                        enable: this.onSearchbarShow.bind(this, true),
+                        disable: this.onSearchbarShow.bind(this, false)
+                    }
+                });
+
+                // function iOSVersion() {
+                //     var ua = navigator.userAgent;
+                //     var m;
+                //     return (m = /(iPad|iPhone|iphone).*?(OS |os |OS\_)(\d+((_|\.)\d)?((_|\.)\d)?)/.exec(ua)) ? parseFloat(m[3]) : 0;
+                // }
+
+                const $editor = $$('#editor_sdk');
+                // const $replaceLink = $$('#replace-link');
+
+                if (false /* iOSVersion < 13 */) {
+                    // $editor.on('mousedown touchstart', this.onEditorTouchStart.bind(this));
+                    // $editor.on('mouseup touchend', this.onEditorTouchEnd.bind(this));
+                } else {
+                    // $editor.on('pointerdown', this.onEditorTouchStart.bind(this));
+                    // $editor.on('pointerup',   this.onEditorTouchEnd.bind(this));
+                }
+
+                $editor.on('pointerdown', this.onEditorTouchStart.bind(this));
+                $editor.on('pointerup',   this.onEditorTouchEnd.bind(this));
+                // $replaceLink.on('click', this.onReplaceHold.bind(this));
+            }
+        });
+
+        this.onSettingsClick = this.onSettingsClick.bind(this);
+        this.onSearchClick = this.onSearchClick.bind(this);
+        this.onReplaceClick = this.onReplaceClick.bind(this);
+    }
+
+    componentDidMount(){
+        const $$ = Dom7;
+        this.$replace = $$('#idx-replace-val');
+    }
+
+    onSettingsClick(e) {
+        if ( Device.phone ) {
+            f7.popup.open('.search-settings-popup');
+        } else f7.popover.open('#idx-search-settings', '#idx-btn-search-settings');
+    }
+
+    searchParams() {
+        let params = {
+            find: this.searchbar.query
+        };
+
+        if (searchOptions.usereplace) {
+            params.replace = this.$replace.val();
+        } 
+
+        return params;
+    }
+
+    onSearchClick(action) {
+        if (this.searchbar && this.state.searchQuery) {
+            if (this.props.onSearchQuery) {
+                let params = this.searchParams();
+                params.find = this.state.searchQuery;
+                params.forward = action != SEARCH_BACKWARD;
+                // console.log(params);
+
+                this.props.onSearchQuery(params);
+            }
+        }
+    }
+
+    onReplaceClick() {
+        if (this.searchbar && this.state.searchQuery) {
+            if (this.props.onReplaceQuery) {
+                let params = this.searchParams();
+                params.find = this.state.searchQuery;
+                // console.log(params);
+
+                this.props.onReplaceQuery(params);
+            }   
+        }
+    }
+
+    onReplaceAllClick() {
+        if (this.searchbar && this.state.searchQuery) {
+            if (this.props.onReplaceAllQuery) {
+                let params = this.searchParams();
+                params.find = this.state.searchQuery;
+                // console.log(params);
+
+                this.props.onReplaceAllQuery(params);
+            }   
+        }
+    }
+
+    onSearchbarShow(isshowed, bar) {
+        if ( !isshowed ) {
+            this.$replace.val('');
+        }
+    }
+
+    onEditorTouchStart(e) {
+        this.startPoint = this.pointerPosition(e);
+        // console.log(this.startPoint);
+    }
+
+    onEditorTouchEnd(e) {
+        const endPoint = this.pointerPosition(e);
+        // console.log(endPoint);
+
+        if (this.searchbar.enabled) {
+            let distance;
+
+            if(this.startPoint) {
+                distance = (!!this.startPoint.x || !!this.startPoint.y) ? 0 : 
+                    Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
+            } else {
+                distance = 0;
+            }
+
+            // const distance = (this.startPoint === undefined || this.startPoint === undefined) ? 0 :
+            //     Math.sqrt((endPoint.x -= this.startPoint.x) * endPoint.x + (endPoint.y -= this.startPoint.y) * endPoint.y);
+
+            if (distance < 1) {
+                this.searchbar.disable();
+            }
+        }
+    }
+
+    pointerPosition(e) {
+        let out = {x:0, y:0};
+        if ( e.type == 'touchstart' || e.type == 'touchend' ) {
+            const touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
+            out.x = touch.pageX;
+            out.y = touch.pageY;
+        } else if ( e.type == 'mousedown' || e.type == 'mouseup' ) {
+            out.x = e.pageX;
+            out.y = e.pageY;
+        }
+
+        return out;
+    }
+
+    changeSearchQuery(value) {
+        this.setState({
+            searchQuery: value
+        });
+    }
+
+    changeReplaceQuery(value) {
+        this.setState({
+            replaceQuery: value
+        });
+    }
+
+    render() {
+        const usereplace = searchOptions.usereplace;
+        const isReplaceAll = searchOptions.isReplaceAll;
+        const hidden = {display: "none"};
+        const searchQuery = this.state.searchQuery;
+        // const replaceQuery = this.state.replaceQuery;
+        const isIos = Device.ios;
+        const { _t } = this.props;
+
+        if(this.searchbar && this.searchbar.enabled) {
+            usereplace || isReplaceAll ? this.searchbar.el.classList.add('replace') : this.searchbar.el.classList.remove('replace');
+        } 
+
+        return (
+            <form className="searchbar">
+                {isIos ? <div className="searchbar-bg"></div> : null}
+                <div className="searchbar-inner">
+                    <div className="buttons-row searchbar-inner__left">
+                        <a id="idx-btn-search-settings" className="link icon-only" onClick={this.onSettingsClick}>
+                            <i className="icon icon-settings" />
+                        </a>
+                    </div>
+                    <div className="searchbar-inner__center">
+                        <div className="searchbar-input-wrap">
+                            <input placeholder={_t.textSearch} type="search" maxLength="255"
+                                onChange={e => {this.changeSearchQuery(e.target.value)}} />
+                            {isIos ? <i className="searchbar-icon" /> : null}
+                            <span className="input-clear-button" onClick={() => this.changeSearchQuery('')} />
+                        </div>
+                        {/* {usereplace || isReplaceAll ?  */}
+                            <div className="searchbar-input-wrap" style={usereplace || isReplaceAll ? null : hidden}>
+                                {/* style={!usereplace ? hidden: null} */}
+                                <input placeholder={_t.textReplace} type="search" maxLength="255" id="idx-replace-val"
+                                    onChange={e => {this.changeReplaceQuery(e.target.value)}} />
+                                {isIos ? <i className="searchbar-icon" /> : null}
+                                <span className="input-clear-button" onClick={() => this.changeReplaceQuery('')} />
+                            </div>
+                        {/*  */}
+                    </div>
+                    <div className="buttons-row searchbar-inner__right">
+                        <div className="buttons-row buttons-row-replace">
+                            {/* <a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceClick()}>{_t.textReplace}</a>
+                            <a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} style={!usereplace ? hidden: null} onClick={() => this.onReplaceAllClick()}>{_t.textReplaceAll}</a> */}
+                            {isReplaceAll ? (
+                                <a id="replace-all-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onReplaceAllClick()}>{_t.textReplaceAll}</a>
+                            ) : usereplace ? (
+                                <a id="replace-link" className={"link " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onReplaceClick()}>{_t.textReplace}</a>
+                            ) : null}
+                        </div>
+                        <div className="buttons-row">
+                            <a className={"link icon-only prev " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_BACKWARD)}>
+                                <i className="icon icon-prev" />
+                            </a>
+                            <a className={"link icon-only next " + (searchQuery.trim().length ? "" : "disabled")} onClick={() => this.onSearchClick(SEARCH_FORWARD)}>
+                                <i className="icon icon-next" />
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </form>
+        )
+    }
+}
+
+const SearchViewWithObserver = observer(SearchView);
+
+export {SearchViewWithObserver as SearchView, SearchSettingsView};

apps/common/mobile/lib/view/collaboration/Collaboration.jsx

@@ -0,0 +1,170 @@
+import React, { Component, useEffect } from 'react';
+import { observer, inject } from "mobx-react";
+import { Popover, List, ListItem, Navbar, NavRight, Sheet, BlockTitle, Page, View, Icon, Link } from 'framework7-react';
+import { f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import {Device} from "../../../utils/device";
+
+import {ReviewController, ReviewChangeController} from "../../controller/collaboration/Review";
+import {PageDisplayMode} from "./Review";
+
+import {ViewCommentsController} from "../../controller/collaboration/Comments";
+
+const PageUsers = inject("users")(observer(props => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const storeUsers = props.users;
+    return (
+        <Page name="collab__users">
+            <Navbar title={_t.textUsers} backLink={_t.textBack}>
+                {Device.phone &&
+                <NavRight>
+                    <Link sheetClose=".coauth__sheet">
+                        <Icon icon='icon-expand-down'/>
+                    </Link>
+                </NavRight>
+                }
+            </Navbar>
+            <BlockTitle>{_t.textEditUser}</BlockTitle>
+            <List className="coauth__list">
+                {storeUsers.users.map((model, i) => (
+                    <ListItem title={model.asc_getUserName()} key={i}>
+                        <Icon slot="media" icon="coauth__list__icon"
+                              style={{backgroundColor: model.asc_getColor()}}></Icon>
+                    </ListItem>
+                ))}
+            </List>
+        </Page>
+    )
+}));
+
+const routes = [
+    {
+        path: '/users/',
+        component: PageUsers
+    },
+    {
+        path: '/review/',
+        component: ReviewController
+    },
+    {
+        path: '/cm-review/',
+        component: ReviewController,
+        options: {
+            props: {
+                noBack: true
+            }
+        }
+    },
+    {
+        path: '/display-mode/',
+        component: PageDisplayMode
+    },
+    {
+        path: '/review-change/',
+        component: ReviewChangeController
+    },
+    {
+        path: '/cm-review-change/',
+        component: ReviewChangeController,
+        options: {
+            props: {
+                noBack: true
+            }
+        }
+    },
+    {
+        path: '/comments/',
+        component: ViewCommentsController,
+        options: {
+            props: {
+                allComments: true
+            }
+        }
+    }
+];
+
+const PageCollaboration = inject('storeAppOptions')(observer(props => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const appOptions = props.storeAppOptions;
+    return (
+        <View style={props.style} stackPages={true} routes={routes} url={props.page && `/${props.page}/`}>
+            <Page name="collab__main">
+                <Navbar title={_t.textCollaboration}>
+                    {Device.phone &&
+                        <NavRight>
+                            <Link sheetClose=".coauth__sheet">
+                                <Icon icon='icon-expand-down'/>
+                            </Link>
+                        </NavRight>
+                    }
+                </Navbar>
+                <List>
+                    <ListItem link={'/users/'} title={_t.textUsers}>
+                        <Icon slot="media" icon="icon-users"></Icon>
+                    </ListItem>
+                    {appOptions.canViewComments &&
+                        <ListItem link='/comments/' title={_t.textComments}>
+                            <Icon slot="media" icon="icon-insert-comment"></Icon>
+                        </ListItem>
+                    }
+                    {window.editorType === 'de' && (appOptions.canReview || appOptions.canViewReview) &&
+                        <ListItem link={'/review/'} title={_t.textReview}>
+                            <Icon slot="media" icon="icon-review"></Icon>
+                        </ListItem>
+                    }
+                </List>
+            </Page>
+        </View>
+    )
+
+}));
+
+class CollaborationView extends Component {
+    constructor(props) {
+        super(props);
+
+        this.onoptionclick = this.onoptionclick.bind(this);
+    }
+    onoptionclick(page){
+        f7.views.current.router.navigate(page);
+    }
+    render() {
+        const show_popover = this.props.usePopover;
+        return (
+            show_popover ?
+                <Popover id="coauth-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()} closeByOutsideClick={false}>
+                    <PageCollaboration style={{height: '410px'}} page={this.props.page}/>
+                </Popover> :
+                <Sheet className="coauth__sheet" push onSheetClosed={() => this.props.onclosed()}>
+                    <PageCollaboration page={this.props.page}/>
+                </Sheet>
+        )
+    }
+}
+
+const Collaboration = props => {
+    useEffect(() => {
+        if ( Device.phone ) {
+            f7.sheet.open('.coauth__sheet');
+        } else {
+            f7.popover.open('#coauth-popover', '#btn-coauth');
+        }
+
+        return () => {
+            // component will unmount
+        }
+    });
+
+    const onviewclosed = () => {
+        if ( props.onclosed ) props.onclosed();
+    };
+
+    return (
+        <CollaborationView usePopover={!Device.phone} onclosed={onviewclosed} page={props.page}/>
+    )
+};
+
+export {PageCollaboration}
+export default Collaboration;

apps/common/mobile/lib/view/collaboration/Comments.jsx

@@ -0,0 +1,867 @@
+import React, {useState, useEffect, Fragment} from 'react';
+import {observer, inject} from "mobx-react";
+import { f7, Popup, Sheet, Popover, Page, Toolbar, Navbar, NavLeft, NavRight, NavTitle, Link, Input, Icon, List, ListItem, Actions, ActionsGroup, ActionsButton } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import {Device} from '../../../utils/device';
+
+// Utils
+const sliceQuote = (text) => {
+    if (text) {
+        let sliced = text.slice(0, 100);
+        if (sliced.length < text.length) {
+            sliced += '...';
+            return sliced;
+        }
+        return text;
+    }
+};
+
+// Add comment
+
+const AddCommentPopup = inject("storeComments")(observer(props => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    useEffect(() => {
+        f7.popup.open('.add-comment-popup');
+    });
+    const userInfo = props.userInfo;
+    const [stateText, setText] = useState('');
+    return (
+        <Popup className="add-comment-popup">
+            <Navbar>
+                <NavLeft>
+                    <Link onClick={() => {
+                        f7.popup.close('.add-comment-popup');
+                        setTimeout(() => {
+                            props.closeAddComment();
+                        }, 500)
+                    }}>{_t.textCancel}</Link>
+                </NavLeft>
+                <NavTitle>{_t.textAddComment}</NavTitle>
+                <NavRight>
+                    <Link className={stateText.length === 0 && 'disabled'}
+                          onClick={() => {
+                              f7.popup.close('.add-comment-popup');
+                              setTimeout(() => {
+                                  props.closeAddComment();
+                                  props.onAddNewComment(stateText, false)
+                              }, 500);
+                    }}>
+                        {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
+                    </Link>
+                </NavRight>
+            </Navbar>
+            <div className='wrap-comment'>
+                <div className="comment-header">
+                    {Device.android &&
+                    <div className='initials' style={{backgroundColor: `${userInfo.color}`}}>{userInfo.initials}</div>
+                    }
+                    <div className='name'>{userInfo.name}</div>
+                </div>
+                <div className='wrap-textarea'>
+                    <Input type='textarea' placeholder={_t.textAddComment} autofocus value={stateText} onChange={(event) => {setText(event.target.value);}}></Input>
+                </div>
+            </div>
+        </Popup>
+    )
+}));
+
+const AddCommentDialog = inject("storeComments")(observer(props => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const userInfo = props.userInfo;
+    const templateInitials = `<div class="initials" style="background-color: ${userInfo.color};">${userInfo.initials}</div>`;
+    useEffect(() => {
+        f7.dialog.create({
+            destroyOnClose: true,
+            containerEl: document.getElementById('add-comment-dialog'),
+            content:
+                `<div class="navbar">
+                    <div class="navbar-bg"></div>
+                    <div class="navbar-inner sliding">
+                        <div class="left">
+                            <a href="#" id="comment-cancel">${_t.textCancel}</a>
+                        </div>
+                        <div class="title">${_t.textAddComment}</div>
+                        <div class="right">
+                            <a href="#" class="done" id="comment-done">${ Device.android ? '<i class="icon icon-done-comment-white"></i>' : _t.textDone}</a>
+                        </div>
+                    </div>
+                </div>
+                <div class='wrap-comment'>
+                    <div class="comment-header">
+                        ${Device.android ? templateInitials : ''}
+                        <div class='name'>${userInfo.name}</div>
+                    </div>
+                    <div class='wrap-textarea'>
+                        <textarea id='comment-text' placeholder='${_t.textAddComment}' autofocus></textarea>
+                    </div>
+                </div>`,
+            on: {
+                opened: () => {
+                    const cancel = document.getElementById('comment-cancel');
+                    cancel.addEventListener('click', () => {
+                        f7.dialog.close();
+                        props.closeAddComment();
+                    });
+                    const done = document.getElementById('comment-done');
+                    done.addEventListener('click', () => {
+                        const value = document.getElementById('comment-text').value;
+                        if (value.length > 0) {
+                            f7.dialog.close();
+                            props.closeAddComment();
+                            props.onAddNewComment(value, false);
+                        }
+                    });
+                    const area = document.getElementById('comment-text');
+                    area.addEventListener('input', (event) => {
+                        if (event.target.value.length === 0 && !done.classList.contains('disabled')) {
+                            done.classList.add('disabled');
+                        } else if (event.target.value.length > 0 && done.classList.contains('disabled')) {
+                            done.classList.remove('disabled');
+                        }
+                    });
+                    done.classList.add('disabled');
+                }
+            }
+        }).open();
+    });
+    return (
+        <div id='add-comment-dialog'></div>
+    );
+}));
+
+const AddComment = props => {
+    return (
+        Device.phone ?
+            <AddCommentPopup {...props} /> :
+            <AddCommentDialog {...props} />
+    )
+};
+
+// Actions
+const CommentActions = ({comment, onCommentMenuClick, opened, openActionComment}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    return (
+        <Actions id='comment-menu' opened={opened} onActionsClosed={() => openActionComment(false)}>
+            <ActionsGroup>
+                {comment && <Fragment>
+                    {comment.editable && <ActionsButton onClick={() => {onCommentMenuClick('editComment', comment);}}>{_t.textEdit}</ActionsButton>}
+                    {!comment.resolved ?
+                        <ActionsButton onClick={() => {onCommentMenuClick('resolve', comment);}}>{_t.textResolve}</ActionsButton> :
+                        <ActionsButton onClick={() => {onCommentMenuClick('resolve', comment);}}>{_t.textReopen}</ActionsButton>
+                    }
+                    <ActionsButton onClick={() => {onCommentMenuClick('addReply', comment);}}>{_t.textAddReply}</ActionsButton>
+                    {comment.removable && <ActionsButton color='red' onClick={() => {onCommentMenuClick('deleteComment', comment);}}>{_t.textDeleteComment}</ActionsButton>}
+                </Fragment>
+                }
+            </ActionsGroup>
+            <ActionsGroup>
+                <ActionsButton>{_t.textCancel}</ActionsButton>
+            </ActionsGroup>
+        </Actions>
+    )
+};
+
+const ReplyActions = ({comment, reply, onCommentMenuClick, opened, openActionReply}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    return (
+        <Actions id='reply-menu' opened={opened} onActionsClosed={() => openActionReply(false)}>
+            <ActionsGroup>
+                {reply && <Fragment>
+                    {reply.editable && <ActionsButton onClick={() => {onCommentMenuClick('editReply', comment, reply);}}>{_t.textEdit}</ActionsButton>}
+                    {reply.removable && <ActionsButton color='red' onClick={() => {onCommentMenuClick('deleteReply', comment, reply);}}>{_t.textDeleteReply}</ActionsButton>}
+                </Fragment>
+                }
+            </ActionsGroup>
+            <ActionsGroup>
+                <ActionsButton>{_t.textCancel}</ActionsButton>
+            </ActionsGroup>
+        </Actions>
+    )
+};
+
+// Edit comment
+const EditCommentPopup = inject("storeComments")(observer(({storeComments, comment, onEditComment}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    useEffect(() => {
+        f7.popup.open('.edit-comment-popup');
+    });
+    const [stateText, setText] = useState(comment.comment);
+    return (
+        <Popup className="edit-comment-popup">
+            <Navbar>
+                <NavLeft>
+                    <Link onClick={() => {
+                        f7.popup.close('.edit-comment-popup');
+                        setTimeout(() => {
+                            storeComments.openEditComment(false);
+                        }, 500);
+                    }}>{_t.textCancel}</Link>
+                </NavLeft>
+                <NavTitle>{_t.textEditComment}</NavTitle>
+                <NavRight>
+                    <Link className={stateText.length === 0 && 'disabled'}
+                          onClick={() => {
+                              f7.popup.close('.edit-comment-popup');
+                              setTimeout(() => {
+                                  storeComments.openEditComment(false);
+                                  onEditComment(comment, stateText);
+                              }, 500);
+                          }}
+                    >
+                        {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
+                    </Link>
+                </NavRight>
+            </Navbar>
+            <div className='wrap-comment'>
+                <div className="comment-header">
+                    {Device.android &&
+                    <div className='initials' style={{backgroundColor: `${comment.userColor}`}}>{comment.userInitials}</div>
+                    }
+                    <div>
+                        <div className='name'>{comment.userName}</div>
+                        <div className='comment-date'>{comment.date}</div>
+                    </div>
+                </div>
+                <div className='wrap-textarea'>
+                    <Input type='textarea' placeholder={_t.textEditComment} autofocus value={stateText} onChange={(event) => {setText(event.target.value);}}></Input>
+                </div>
+            </div>
+        </Popup>
+    )
+}));
+
+const EditCommentDialog = inject("storeComments")(observer(({storeComments, comment, onEditComment}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const templateInitials = `<div class="initials" style="background-color: ${comment.userColor};">${comment.userInitials}</div>`;
+    useEffect(() => {
+        f7.dialog.create({
+            destroyOnClose: true,
+            containerEl: document.getElementById('edit-comment-dialog'),
+            content:
+                `<div class="navbar">
+                    <div class="navbar-bg"></div>
+                    <div class="navbar-inner sliding">
+                        <div class="left">
+                            <a href="#" id="comment-cancel">${_t.textCancel}</a>
+                        </div>
+                        <div class="title">${_t.textEditComment}</div>
+                        <div class="right">
+                            <a href="#" class="done" id="comment-done">${ Device.android ? '<i class="icon icon-done-comment-white"></i>' : _t.textDone}</a>
+                        </div>
+                    </div>
+                </div>
+                <div class='wrap-comment'>
+                    <div class="comment-header">
+                        ${Device.android ? templateInitials : ''}
+                        <div>
+                            <div class='name'>${comment.userName}</div>
+                            <div class='comment-date'>${comment.date}</div>
+                        </div>
+                    </div>
+                    <div class='wrap-textarea'>
+                        <textarea id='comment-text' placeholder='${_t.textEditComment}' autofocus>${comment.comment}</textarea>
+                    </div>
+                </div>`,
+            on: {
+                opened: () => {
+                    const cancel = document.getElementById('comment-cancel');
+                    cancel.addEventListener('click', () => {
+                        f7.dialog.close();
+                        storeComments.openEditComment(false);
+                    });
+                    const done = document.getElementById('comment-done');
+                    done.addEventListener('click', () => {
+                        const value = document.getElementById('comment-text').value;
+                        if (value.length > 0) {
+                            onEditComment(comment, value);
+                            f7.dialog.close();
+                            storeComments.openEditComment(false);
+                        }
+                    });
+                    const area = document.getElementById('comment-text');
+                    area.addEventListener('input', (event) => {
+                        if (event.target.value.length === 0 && !done.classList.contains('disabled')) {
+                            done.classList.add('disabled');
+                        } else if (event.target.value.length > 0 && done.classList.contains('disabled')) {
+                            done.classList.remove('disabled');
+                        }
+                    });
+                },
+                open: () => {
+                    $$('.dialog-backdrop.backdrop-in')[0].classList.add('over-popover');
+                },
+                closed: () => {
+                    $$('.dialog-backdrop.backdrop-in')[0].classList.remove('over-popover');
+                }
+            }
+        }).open();
+    });
+    return (
+        <div id='edit-comment-dialog'></div>
+    );
+}));
+
+const EditComment = ({comment, onEditComment}) => {
+    return (
+        Device.phone ?
+            <EditCommentPopup comment={comment} onEditComment={onEditComment}/> :
+            <EditCommentDialog comment={comment} onEditComment={onEditComment}/>
+    )
+};
+
+const AddReplyPopup = inject("storeComments")(observer(({storeComments, userInfo, comment, onAddReply}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    useEffect(() => {
+        f7.popup.open('.add-reply-popup');
+    });
+    const [stateText, setText] = useState('');
+    return (
+        <Popup className="add-reply-popup">
+            <Navbar>
+                <NavLeft>
+                    <Link onClick={() => {
+                        f7.popup.close('.add-reply-popup');
+                        setTimeout(() => {
+                            storeComments.openAddReply(false);
+                        }, 500);
+                    }}>{_t.textCancel}</Link>
+                </NavLeft>
+                <NavTitle>{_t.textAddReply}</NavTitle>
+                <NavRight>
+                    <Link className={stateText.length === 0 && 'disabled'}
+                          onClick={() => {
+                              f7.popup.close('.add-reply-popup');
+                              setTimeout(() => {
+                                  storeComments.openAddReply(false);
+                                  onAddReply(comment, stateText);
+                              }, 500);
+                          }}>
+                        {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
+                    </Link>
+                </NavRight>
+            </Navbar>
+            <div className='wrap-comment'>
+                <div className="comment-header">
+                    {Device.android &&
+                    <div className='initials' style={{backgroundColor: `${userInfo.color}`}}>{userInfo.initials}</div>
+                    }
+                    <div className='name'>{userInfo.name}</div>
+                </div>
+                <div className='wrap-textarea'>
+                    <Input type='textarea' placeholder={_t.textAddReply} autofocus value={stateText} onChange={(event) => {setText(event.target.value);}}></Input>
+                </div>
+            </div>
+        </Popup>
+    )
+}));
+
+const AddReplyDialog = inject("storeComments")(observer(({storeComments, userInfo, comment, onAddReply}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const templateInitials = `<div class="initials" style="background-color: ${userInfo.color};">${userInfo.initials}</div>`;
+    useEffect(() => {
+        f7.dialog.create({
+            destroyOnClose: true,
+            containerEl: document.getElementById('add-reply-dialog'),
+            content:
+                `<div class="navbar">
+                    <div class="navbar-bg"></div>
+                    <div class="navbar-inner sliding">
+                        <div class="left">
+                            <a href="#" id="reply-cancel">${_t.textCancel}</a>
+                        </div>
+                        <div class="title">${_t.textAddReply}</div>
+                        <div class="right">
+                            <a href="#" class="done" id="reply-done">${ Device.android ? '<i class="icon icon-done-comment-white"></i>' : _t.textDone}</a>
+                        </div>
+                    </div>
+                </div>
+                <div class='wrap-comment'>
+                    <div class="comment-header">
+                        ${Device.android ? templateInitials : ''}
+                        <div class='name'>${userInfo.name}</div>
+                    </div>
+                    <div class='wrap-textarea'>
+                        <textarea id='reply-text' placeholder='${_t.textAddReply}' autofocus></textarea>
+                    </div>
+                </div>`,
+            on: {
+                opened: () => {
+                    const cancel = document.getElementById('reply-cancel');
+                    cancel.addEventListener('click', () => {
+                        f7.dialog.close();
+                        storeComments.openAddReply(false);
+                    });
+                    const done = document.getElementById('reply-done');
+                    done.addEventListener('click', () => {
+                        const value = document.getElementById('reply-text').value;
+                        if (value.length > 0) {
+                            onAddReply(comment, value);
+                            f7.dialog.close();
+                            storeComments.openAddReply(false);
+                        }
+                    });
+                    const area = document.getElementById('reply-text');
+                    area.addEventListener('input', (event) => {
+                        if (event.target.value.length === 0 && !done.classList.contains('disabled')) {
+                            done.classList.add('disabled');
+                        } else if (event.target.value.length > 0 && done.classList.contains('disabled')) {
+                            done.classList.remove('disabled');
+                        }
+                    });
+                    done.classList.add('disabled');
+                },
+                open: () => {
+                    $$('.dialog-backdrop.backdrop-in')[0].classList.add('over-popover');
+                },
+                closed: () => {
+                    $$('.dialog-backdrop.backdrop-in')[0].classList.remove('over-popover');
+                }
+            }
+        }).open();
+    });
+    return (
+        <div id='add-reply-dialog'></div>
+    );
+}));
+
+const AddReply = ({userInfo, comment, onAddReply}) => {
+    return (
+        Device.phone ?
+            <AddReplyPopup userInfo={userInfo} comment={comment} onAddReply={onAddReply}/> :
+            <AddReplyDialog userInfo={userInfo} comment={comment} onAddReply={onAddReply}/>
+    )
+};
+
+const EditReplyPopup = inject("storeComments")(observer(({storeComments, comment, reply, onEditReply}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    useEffect(() => {
+        f7.popup.open('.edit-reply-popup');
+    });
+    const [stateText, setText] = useState(reply.reply);
+    return (
+        <Popup className="edit-reply-popup">
+            <Navbar>
+                <NavLeft>
+                    <Link onClick={() => {
+                        f7.popup.close('.edit-reply-popup');
+                        setTimeout(() => {
+                            storeComments.openEditReply(false);
+                        }, 500);
+                    }}>{_t.textCancel}</Link>
+                </NavLeft>
+                <NavTitle>{_t.textEditReply}</NavTitle>
+                <NavRight>
+                    <Link className={stateText.length === 0 && 'disabled'}
+                          onClick={() => {
+                              f7.popup.close('.edit-reply-popup');
+                              setTimeout(() => {
+                                  storeComments.openEditReply(false);
+                                  onEditReply(comment, reply, stateText);
+                              }, 500);
+                          }}
+                    >
+                        {Device.android ? <Icon icon='icon-done-comment-white'/> : _t.textDone}
+                    </Link>
+                </NavRight>
+            </Navbar>
+            <div className='wrap-comment'>
+                <div className="comment-header">
+                    {Device.android &&
+                    <div className='initials' style={{backgroundColor: `${reply.userColor}`}}>{reply.userInitials}</div>
+                    }
+                    <div>
+                        <div className='name'>{reply.userName}</div>
+                        <div className='reply-date'>{reply.date}</div>
+                    </div>
+                </div>
+                <div className='wrap-textarea'>
+                    <Input type='textarea' placeholder={_t.textEditReply} autofocus value={stateText} onChange={(event) => {setText(event.target.value);}}></Input>
+                </div>
+            </div>
+        </Popup>
+    )
+}));
+
+const EditReplyDialog = inject("storeComments")(observer(({storeComments, comment, reply, onEditReply}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const templateInitials = `<div class="initials" style="background-color: ${reply.userColor};">${reply.userInitials}</div>`;
+    useEffect(() => {
+        f7.dialog.create({
+            destroyOnClose: true,
+            containerEl: document.getElementById('edit-reply-dialog'),
+            content:
+                `<div class="navbar">
+                    <div class="navbar-bg"></div>
+                    <div class="navbar-inner sliding">
+                        <div class="left">
+                            <a href="#" id="reply-cancel">${_t.textCancel}</a>
+                        </div>
+                        <div class="title">${_t.textEditReply}</div>
+                        <div class="right">
+                            <a href="#" class="done" id="reply-done">${ Device.android ? '<i class="icon icon-done-comment-white"></i>' : _t.textDone}</a>
+                        </div>
+                    </div>
+                </div>
+                <div class='wrap-comment'>
+                    <div class="comment-header">
+                        ${Device.android ? templateInitials : ''}
+                        <div>
+                            <div class='name'>${reply.userName}</div>
+                            <div class='reply-date'>${reply.date}</div>
+                        </div>
+                    </div>
+                    <div class='wrap-textarea'>
+                        <textarea id='reply-text' placeholder='${_t.textEditComment}' autofocus>${reply.reply}</textarea>
+                    </div>
+                </div>`,
+            on: {
+                opened: () => {
+                    const cancel = document.getElementById('reply-cancel');
+                    cancel.addEventListener('click', () => {
+                        f7.dialog.close();
+                        storeComments.openEditReply(false);
+                    });
+                    const done = document.getElementById('reply-done');
+                    done.addEventListener('click', () => {
+                        const value = document.getElementById('reply-text').value;
+                        if (value.length > 0) {
+                            onEditReply(comment, reply, value);
+                            f7.dialog.close();
+                            storeComments.openEditReply(false);
+                        }
+                    });
+                    const area = document.getElementById('reply-text');
+                    area.addEventListener('input', (event) => {
+                        if (event.target.value.length === 0 && !done.classList.contains('disabled')) {
+                            done.classList.add('disabled');
+                        } else if (event.target.value.length > 0 && done.classList.contains('disabled')) {
+                            done.classList.remove('disabled');
+                        }
+                    });
+                },
+                open: () => {
+                    $$('.dialog-backdrop.backdrop-in')[0].classList.add('over-popover');
+                },
+                closed: () => {
+                    $$('.dialog-backdrop.backdrop-in')[0].classList.remove('over-popover');
+                }
+            }
+        }).open();
+    });
+    return (
+        <div id='edit-reply-dialog'></div>
+    );
+}));
+
+const EditReply = ({comment, reply, onEditReply}) => {
+    return (
+        Device.phone ?
+            <EditReplyPopup comment={comment} reply={reply} onEditReply={onEditReply}/> :
+            <EditReplyDialog comment={comment} reply={reply} onEditReply={onEditReply}/>
+    )
+};
+
+// View comments
+const ViewComments = ({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const isAndroid = Device.android;
+
+    const viewMode = !storeAppOptions.canComments;
+    const comments = storeComments.groupCollectionFilter || storeComments.collectionComments;
+    const sortComments = comments.length > 0 ? [...comments].sort((a, b) => a.time > b.time ? 1 : -1) : null;
+
+    const [clickComment, setComment] = useState();
+    const [commentActionsOpened, openActionComment] = useState(false);
+
+    const [reply, setReply] = useState();
+    const [replyActionsOpened, openActionReply] = useState(false);
+
+    return (
+        <Page>
+            <Navbar title={_t.textComments} backLink={_t.textBack}/>
+            {!sortComments ?
+                <div className='no-comments'>{_t.textNoComments}</div> :
+                <List className='comment-list'>
+                    {sortComments.map((comment, indexComment) => {
+                        return (
+                            <ListItem key={`comment-${indexComment}`}>
+                                <div slot='header' className='comment-header'>
+                                    <div className='left'>
+                                        {isAndroid && <div className='initials' style={{backgroundColor: `${comment.userColor ? comment.userColor : '#cfcfcf'}`}}>{comment.userInitials}</div>}
+                                        <div>
+                                            <div className='user-name'>{comment.userName}</div>
+                                            <div className='comment-date'>{comment.date}</div>
+                                        </div>
+                                    </div>
+                                    {!viewMode &&
+                                        <div className='right'>
+                                            <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'} /></div>
+                                            <div className='comment-menu'
+                                                 onClick={() => {setComment(comment); openActionComment(true);}}
+                                            ><Icon icon='icon-menu-comment'/></div>
+                                        </div>
+                                    }
+                                </div>
+                                <div slot='footer'>
+                                    {comment.quote && <div className='comment-quote'>{sliceQuote(comment.quote)}</div>}
+                                    <div className='comment-text'><pre>{comment.comment}</pre></div>
+                                    {comment.replies.length > 0 &&
+                                    <ul className='reply-list'>
+                                        {comment.replies.map((reply, indexReply) => {
+                                            return (
+                                                <li key={`reply-${indexComment}-${indexReply}`}
+                                                    className='reply-item'
+                                                >
+                                                    <div className='item-content'>
+                                                        <div className='item-inner'>
+                                                            <div className='item-title'>
+                                                                <div slot='header' className='reply-header'>
+                                                                    <div className='left'>
+                                                                        {isAndroid && <div className='initials' style={{backgroundColor: `${reply.userColor ? reply.userColor : '#cfcfcf'}`}}>{reply.userInitials}</div>}
+                                                                        <div>
+                                                                            <div className='user-name'>{reply.userName}</div>
+                                                                            <div className='reply-date'>{reply.date}</div>
+                                                                        </div>
+                                                                    </div>
+                                                                    {!viewMode &&
+                                                                        <div className='right'>
+                                                                            <div className='reply-menu'
+                                                                                 onClick={() => {setComment(comment); setReply(reply); openActionReply(true);}}
+                                                                            >
+                                                                                <Icon icon='icon-menu-comment'/>
+                                                                            </div>
+                                                                        </div>
+                                                                    }
+                                                                </div>
+                                                                <div slot='footer'>
+                                                                    <div className='reply-text'><pre>{reply.reply}</pre></div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </li>
+                                            )
+                                        })}
+                                    </ul>
+                                    }
+                                </div>
+                            </ListItem>
+                        )
+                    })}
+                </List>
+            }
+
+            <CommentActions comment={clickComment} onCommentMenuClick={onCommentMenuClick} opened={commentActionsOpened} openActionComment={openActionComment}/>
+            <ReplyActions comment={clickComment} reply={reply} onCommentMenuClick={onCommentMenuClick} opened={replyActionsOpened} openActionReply={openActionReply}/>
+        </Page>
+    )
+};
+
+const _ViewComments = inject('storeComments', 'storeAppOptions')(observer(ViewComments));
+
+const CommentList = inject("storeComments", "storeAppOptions")(observer(({storeComments, storeAppOptions, onCommentMenuClick, onResolveComment}) => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const isAndroid = Device.android;
+
+    const viewMode = !storeAppOptions.canComments;
+
+    const comments = storeComments.showComments;
+
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const comment = comments[currentIndex];
+
+    const [commentActionsOpened, openActionComment] = useState(false);
+
+    const [reply, setReply] = useState();
+    const [replyActionsOpened, openActionReply] = useState(false);
+
+    const onViewPrevComment = () => {
+        if (currentIndex - 1 < 0) {
+            setCurrentIndex(comments.length - 1);
+        } else {
+            setCurrentIndex(currentIndex - 1);
+        }
+    };
+
+    const onViewNextComment = () => {
+        if (currentIndex + 1 === comments.length) {
+            setCurrentIndex(0);
+        } else {
+            setCurrentIndex(currentIndex + 1);
+        }
+    };
+
+    return (
+        <Fragment>
+            <Toolbar position='bottom'>
+                {!viewMode &&
+                    <Link className='btn-add-reply' href='#' onClick={() => {onCommentMenuClick('addReply', comment);}}>{_t.textAddReply}</Link>
+                }
+                <div className='comment-navigation row'>
+                    <Link href='#' onClick={onViewPrevComment}><Icon slot='media' icon='icon-prev'/></Link>
+                    <Link href='#' onClick={onViewNextComment}><Icon slot='media' icon='icon-next'/></Link>
+                </div>
+            </Toolbar>
+            <Page className='page-current-comment'>
+            <List className='comment-list'>
+            <ListItem>
+                <div slot='header' className='comment-header'>
+                    <div className='left'>
+                        {isAndroid && <div className='initials' style={{backgroundColor: `${comment.userColor ? comment.userColor : '#cfcfcf'}`}}>{comment.userInitials}</div>}
+                        <div>
+                            <div className='user-name'>{comment.userName}</div>
+                            <div className='comment-date'>{comment.date}</div>
+                        </div>
+                    </div>
+                    {!viewMode &&
+                    <div className='right'>
+                        <div className='comment-resolve' onClick={() => {onResolveComment(comment);}}><Icon icon={comment.resolved ? 'icon-resolve-comment check' : 'icon-resolve-comment'} /></div>
+                        <div className='comment-menu'
+                             onClick={() => {openActionComment(true);}}
+                        ><Icon icon='icon-menu-comment'/></div>
+                    </div>
+                    }
+                </div>
+                <div slot='footer'>
+                    {comment.quote && <div className='comment-quote'>{sliceQuote(comment.quote)}</div>}
+                    <div className='comment-text'><pre>{comment.comment}</pre></div>
+                    {comment.replies.length > 0 &&
+                    <ul className='reply-list'>
+                        {comment.replies.map((reply, indexReply) => {
+                            return (
+                                <li key={`reply-${indexReply}`}
+                                    className='reply-item'
+                                >
+                                    <div className='item-content'>
+                                        <div className='item-inner'>
+                                            <div className='item-title'>
+                                                <div slot='header' className='reply-header'>
+                                                    <div className='left'>
+                                                        {isAndroid && <div className='initials' style={{backgroundColor: `${reply.userColor ? reply.userColor : '#cfcfcf'}`}}>{reply.userInitials}</div>}
+                                                        <div>
+                                                            <div className='user-name'>{reply.userName}</div>
+                                                            <div className='reply-date'>{reply.date}</div>
+                                                        </div>
+                                                    </div>
+                                                    {!viewMode &&
+                                                    <div className='right'>
+                                                        <div className='reply-menu'
+                                                             onClick={() => {setReply(reply); openActionReply(true);}}
+                                                        >
+                                                            <Icon icon='icon-menu-comment'/>
+                                                        </div>
+                                                    </div>
+                                                    }
+                                                </div>
+                                                <div slot='footer'>
+                                                    <div className='reply-text'><pre>{reply.reply}</pre></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </li>
+                            )
+                        })}
+                    </ul>
+                    }
+                </div>
+            </ListItem>
+            </List>
+            <CommentActions comment={comment} onCommentMenuClick={onCommentMenuClick} opened={commentActionsOpened} openActionComment={openActionComment}/>
+            <ReplyActions comment={comment} reply={reply} onCommentMenuClick={onCommentMenuClick} opened={replyActionsOpened} openActionReply={openActionReply}/>
+            </Page>
+        </Fragment>
+    )
+}));
+
+const ViewCommentSheet = ({closeCurComments, onCommentMenuClick, onResolveComment}) => {
+    useEffect(() => {
+        f7.sheet.open('#view-comment-sheet');
+    });
+
+    const [stateHeight, setHeight] = useState('45%');
+    const [stateOpacity, setOpacity] = useState(1);
+
+    const [stateStartY, setStartY] = useState();
+    const [isNeedClose, setNeedClose] = useState(false);
+
+    const handleTouchStart = (event) => {
+        const touchObj = event.changedTouches[0];
+        setStartY(parseInt(touchObj.clientY));
+    };
+    const handleTouchMove = (event) => {
+        const touchObj = event.changedTouches[0];
+        const dist = parseInt(touchObj.clientY) - stateStartY;
+        if (dist < 0) { // to top
+            setHeight('90%');
+            setOpacity(1);
+            setNeedClose(false);
+        } else if (dist < 80) {
+            setHeight('45%');
+            setOpacity(1);
+            setNeedClose(false);
+        } else {
+            setNeedClose(true);
+            setOpacity(0.6);
+        }
+    };
+    const handleTouchEnd = (event) => {
+        console.log('end');
+        const touchObj = event.changedTouches[0];
+        const swipeEnd = parseInt(touchObj.clientY);
+        const dist = swipeEnd - stateStartY;
+        if (isNeedClose) {
+            closeCurComments();
+        } else if (stateHeight === '90%' && dist > 20) {
+            setHeight('45%');
+        }
+    };
+    return (
+        <Sheet id='view-comment-sheet' style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
+            <div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
+                <Icon icon='icon-swipe'/>
+            </div>
+            <CommentList onCommentMenuClick={onCommentMenuClick} onResolveComment={onResolveComment}/>
+        </Sheet>
+    )
+};
+
+const ViewCommentPopover = ({onCommentMenuClick, onResolveComment}) => {
+    useEffect(() => {
+        f7.popover.open('#view-comment-popover', '#btn-coauth');
+    });
+    return (
+        <Popover id='view-comment-popover' style={{height: '410px'}} closeByOutsideClick={false}>
+            <CommentList onCommentMenuClick={onCommentMenuClick} onResolveComment={onResolveComment} />
+        </Popover>
+    )
+};
+
+const ViewCurrentComments = props => {
+    return (
+        Device.phone ?
+            <ViewCommentSheet {...props}/> :
+            <ViewCommentPopover {...props}/>
+    )
+};
+
+export {
+    AddComment,
+    EditComment,
+    AddReply,
+    EditReply,
+    _ViewComments as ViewComments,
+    ViewCurrentComments
+};

apps/common/mobile/lib/view/collaboration/Review.jsx

@@ -0,0 +1,184 @@
+import React, { Component, useEffect } from 'react';
+import { observer, inject } from "mobx-react";
+import { Page, Navbar, NavRight, List, ListItem, Icon, Toggle, Toolbar, Link } from 'framework7-react';
+import { f7 } from 'framework7-react';
+import { useTranslation } from 'react-i18next';
+import {Device} from "../../../utils/device";
+
+const PageReview = props => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+
+    const isDisableAllSettings = props.isReviewOnly || props.displayMode === "final" || props.displayMode === "original";
+    const canReview = !!props.canReview;
+
+    return (
+       <Page>
+           <Navbar title={_t.textReview} backLink={!props.noBack && _t.textBack}>
+               {Device.phone &&
+               <NavRight>
+                   <Link sheetClose=".coauth__sheet">
+                       <Icon icon='icon-expand-down'/>
+                   </Link>
+               </NavRight>
+               }
+           </Navbar>
+           <List>
+               {canReview &&
+                    <ListItem title={_t.textTrackChanges} className={isDisableAllSettings ? 'disabled' : ''}>
+                        <Toggle checked={props.trackChanges} onToggleChange={
+                            (prev) => {
+                                props.onTrackChanges(!prev);
+                            }
+                        }/>
+                    </ListItem>
+               }
+               {!props.isRestrictedEdit &&
+                    <ListItem title={_t.textDisplayMode} link={'/display-mode/'} routeProps={{
+                        onDisplayMode: props.onDisplayMode
+                    }}/>
+               }
+           </List>
+           <List>
+               <ListItem title={_t.textReviewChange} link={'/review-change/'}>
+                   <Icon slot="media" icon="icon-review-changes"></Icon>
+               </ListItem>
+               {canReview && !props.canUseReviewPermissions &&
+                    <ListItem title={_t.textAcceptAllChanges} link='#'
+                              className={'no-indicator' + (isDisableAllSettings ? ' disabled' : '')} onClick={() => {props.onAcceptAll();}}>
+                        <Icon slot="media" icon="icon-accept-changes"></Icon>
+                    </ListItem>
+               }
+               {canReview && !props.canUseReviewPermissions &&
+                    <ListItem title={_t.textRejectAllChanges} link='#'
+                              className={'no-indicator' + (isDisableAllSettings ? ' disabled' : '')} onClick={() => {props.onRejectAll();}}>
+                        <Icon slot="media" icon="icon-reject-changes"></Icon>
+                    </ListItem>
+               }
+           </List>
+       </Page>
+    )
+};
+
+const DisplayMode = props => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const mode = props.storeReview.displayMode;
+    return (
+        <Page>
+            <Navbar title={_t.textDisplayMode} backLink={_t.textBack}>
+                {Device.phone &&
+                <NavRight>
+                    <Link sheetClose=".coauth__sheet">
+                        <Icon icon='icon-expand-down'/>
+                    </Link>
+                </NavRight>
+                }
+            </Navbar>
+            <List mediaList>
+                <ListItem title={_t.textMarkup}
+                          subtitle={_t.textAllChangesEditing}
+                          radio
+                          checked={mode === 'markup'}
+                          onClick={() => {
+                              props.onDisplayMode('markup');
+                          }}
+                ></ListItem>
+                <ListItem title={_t.textFinal}
+                          subtitle={_t.textAllChangesAcceptedPreview}
+                          radio
+                          checked={mode === 'final'}
+                          onClick={() => {
+                              props.onDisplayMode('final');
+                          }}
+                ></ListItem>
+                <ListItem title={_t.textOriginal}
+                          subtitle={_t.textAllChangesRejectedPreview}
+                          radio
+                          checked={mode === 'original'}
+                          onClick={() => {
+                              props.onDisplayMode('original');
+                          }}
+                ></ListItem>
+            </List>
+        </Page>
+    )
+};
+
+const PageReviewChange = props => {
+    const isAndroid = Device.android;
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const change = props.change;
+    const displayMode = props.displayMode;
+    const isLockAcceptReject = (!change || (change && !change.editable) || (displayMode === "final" || displayMode === "original") || !props.canReview);
+    const isLockPrevNext = (displayMode === "final" || displayMode === "original");
+    return (
+        <Page className='page-review'>
+            <Navbar title={_t.textReviewChange} backLink={!props.noBack && _t.textBack}>
+                {Device.phone &&
+                <NavRight>
+                    <Link sheetClose=".coauth__sheet">
+                        <Icon icon='icon-expand-down'/>
+                    </Link>
+                </NavRight>
+                }
+            </Navbar>
+            <Toolbar position='bottom'>
+                <span className='change-buttons row'>
+                    {!props.isReviewOnly &&
+                        <span className='accept-reject row'>
+                            <Link id='btn-accept-change'
+                                  href='#'
+                                  className={isLockAcceptReject && 'disabled'}
+                                  onClick={() => {props.onAcceptCurrentChange()}}
+                            >{_t.textAccept}</Link>
+                            <Link id='btn-reject-change'
+                                  href='#'
+                                  className={isLockAcceptReject && 'disabled'}
+                                  onClick={() => {props.onRejectCurrentChange()}}
+                            >{_t.textReject}</Link>
+                        </span>
+                    }
+                    {props.isReviewOnly && change && change.editable &&
+                        <span className='delete'>
+                            <Link href='#' id="btn-delete-change" onClick={() => {props.onDeleteChange()}}>{_t.textDelete}</Link>
+                        </span>
+                    }
+                    {props.goto && <Link href='#' id='btn-goto-change' onClick={() => {props.onGotoNextChange()}}><Icon slot='media' icon='icon-goto'/></Link>}
+                </span>
+                <span className='next-prev row'>
+                    <Link id='btn-prev-change'
+                          href='#'
+                          onClick={() => {props.onPrevChange()}}
+                          className={isLockPrevNext && 'disabled'}
+                    ><Icon slot='media' icon='icon-prev-change'/></Link>
+                    <Link id='btn-next-change'
+                          href='#'
+                          onClick={() => {props.onNextChange()}}
+                          className={isLockPrevNext && 'disabled'}
+                    ><Icon slot='media' icon='icon-next-change'/></Link>
+                </span>
+            </Toolbar>
+            {change ?
+                <div className='block-description'>
+                    <div className='header-change'>
+                        {isAndroid &&
+                            <div className='initials' style={{backgroundColor: `#${change.color}`}}>{change.initials}</div>
+                        }
+                        <div className='info'>
+                            <div className='user-name'>{change.userName}</div>
+                            <div className='date-change'>{change.date}</div>
+                        </div>
+                    </div>
+                    <div className='text'>{change.text}</div>
+                </div> :
+                <div className='no-changes'>{_t.textNoChanges}</div>
+            }
+        </Page>
+    )
+};
+
+const PageDisplayMode = inject("storeReview")(observer(DisplayMode));
+
+export {PageReview, PageDisplayMode, PageReviewChange};

apps/common/mobile/resources/less/_mixins.less

@@ -1,6 +1,16 @@
 // Encoded SVG Background
-.encoded-svg-mask(@svg) {
+.encoded-svg-mask(@svg, @color: @themeColor) {
   @url: `encodeURIComponent(@{svg})`;
-  background-color: @themeColor;
+  background-color: @color;
   -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,@{url}");
+}
+
+.encoded-svg-uncolored-mask(@svg) {
+    @url: `encodeURIComponent(@{svg})`;
+    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,@{url}");
+}
+
+.encoded-svg-background(@svg) {
+  @url: `encodeURIComponent(@{svg})`;
+  background-image: url("data:image/svg+xml;charset=utf-8,@{url}");
 }

apps/common/mobile/resources/less/about.less

@@ -0,0 +1,41 @@
+@text-normal: #000;
+
+.about {
+    .page-content {
+        text-align: center;
+    }
+
+    .content-block:first-child {
+        margin: 15px 0;
+    }
+
+    .content-block {
+        margin: 0 auto 15px;
+
+        a {
+            color: @text-normal;
+        }
+    }
+
+    h3 {
+        font-weight: normal;
+        margin: 0;
+
+        &.vendor {
+            color: @text-normal;
+            font-weight: bold;
+            margin-top: 15px;
+        }
+    }
+
+    p > label {
+        margin-right: 5px;
+    }
+
+    .logo {
+          display: inline-block;
+          width: 100%;
+          height: 55px;
+          background: url('../../../../common/mobile/resources/img/about/logo.svg') no-repeat center;
+    }
+}

apps/common/mobile/resources/less/collaboration.less

@@ -0,0 +1,5 @@
+.coauth__list__icon {
+    width: 20px;
+    height: 20px;
+    border-radius: 10px;
+}

apps/common/mobile/resources/less/comments.less

@@ -0,0 +1,204 @@
+@comment-date: #6d6d72;
+@swipe-icon: rgba(0, 0, 0, 0.12);
+
+@import './ios/comments';
+@import './material/comments';
+
+.wrap-comment {
+  padding: 16px 24px 0 16px;
+  .name {
+    font-weight: 600;
+    font-size: 16px;
+  }
+  .wrap-textarea {
+    margin-top: 6px;
+    textarea {
+      font-size: 14px;
+      margin-top: 0;
+      min-height: 100px;
+      padding: 5px 0;
+    }
+  }
+}
+#add-comment-dialog, #edit-comment-dialog, #add-reply-dialog, #edit-reply-dialog {
+  .dialog {
+    --f7-dialog-width: 400px;
+    z-index: 13700;
+    .dialog-inner {
+      padding: 0;
+      height: 400px;
+      .wrap-comment {
+        .name, .comment-date, .reply-date {
+          text-align: left;
+        }
+        .wrap-textarea {
+          textarea {
+            color: @black;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
+
+.comment-list {
+  .item-content .item-inner {
+    padding-right: 0;
+    padding-bottom: 0;
+    padding-top: 16px;
+    .comment-header {
+      display: flex;
+      justify-content: space-between;
+      padding-right: 16px;
+      .right {
+        display: flex;
+        justify-content: space-between;
+        width: 70px;
+      }
+    }
+    .reply-header {
+      display: flex;
+      justify-content: space-between;
+      padding-right: 16px;
+    }
+  }
+  .item-title {
+    width: 100%;
+  }
+  .user-name {
+    font-size: 16px;
+    line-height: 22px;
+    color: @black;
+    margin: 0;
+    font-weight: 700;
+  }
+  .comment-date, .reply-date {
+    font-size: 12px;
+    line-height: 18px;
+    color: @comment-date;
+    margin: 0;
+  }
+  .comment-quote {
+    color: @themeColor;
+    border-left: 1px solid @themeColor;
+    padding-left: 10px;
+    padding-right: 16px;
+    margin: 5px 0;
+    font-size: 14px;
+  }
+  .comment-text, .reply-text {
+    color: @black;
+    font-size: 14px;
+    line-height: 25px;
+    margin: 0;
+    max-width: 100%;
+    padding-right: 15px;
+    pre {
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+    }
+  }
+  .reply-list {
+    padding-left: 26px;
+  }
+}
+
+.edit-comment-popup, .add-reply-popup, .edit-reply-popup {
+  z-index: 20000;
+}
+
+#view-comment-sheet {
+  background-color: @white;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+  height: 45%;
+  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2), 0 4px 5px rgba(0, 0, 0, 0.12);
+  webkit-transition: height 200ms;
+  transition: height 200ms;
+  .top {
+    height: 90%;
+  }
+  .swipe-container {
+    display: flex;
+    justify-content: center;
+    height: 40px;
+    .icon-swipe {
+      margin-top: 8px;
+      width: 40px;
+      height: 4px;
+      background: @swipe-icon;
+      border-radius: 2px;
+    }
+  }
+}
+
+#view-comment-popover, #view-comment-sheet {
+  .toolbar {
+    position: fixed;
+    background-color: @white;
+    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.2), 0px 4px 5px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14);
+    .link {
+      --f7-toolbar-link-color: @themeColor;
+    }
+    .toolbar-inner {
+      padding: 0 16px;
+    }
+    .btn-add-reply {
+      padding: 0;
+      min-width: 80px;
+      font-size: 16px;
+    }
+    .comment-navigation {
+      min-width: 62px;
+      display: flex;
+      justify-content: space-between;
+      .link {
+        padding: 0 12px;
+      }
+    }
+  }
+}
+
+#view-comment-popover {
+  background-color: @white;
+  .page .page-content {
+    padding: 16px;
+    padding-left: 0;
+  }
+  .comment-list {
+    .item-content {
+      .item-inner {
+        .comment-header, .reply-header {
+          padding-right: 0;
+        }
+      }
+    }
+  }
+}
+
+.page-current-comment {
+  position: relative;
+  .page-content {
+    background-color: @white;
+  }
+  .comment-list {
+    ul {
+      &:before, &:after {
+        content: none;
+      }
+      .item-content .item-inner {
+          padding-top: 0;
+          .reply-list .item-content .item-inner {
+            padding-top: 13px;
+          }
+      }
+    }
+  }
+}
+
+.dialog-backdrop.backdrop-in {
+  &.over-popover {
+    z-index: 13600;
+  }
+}

apps/common/mobile/resources/less/common-ios.less

@@ -0,0 +1,540 @@
+
+.device-ios {
+    @blockTitleColor: #6d6d72;
+    @item-border-color: #c8c7cc;
+    --f7-list-item-border-color: @item-border-color;
+    @darkGreen: #40865c;
+
+    --f7-navbar-link-color: @themeColor;
+    --f7-subnavbar-link-color: @themeColor;
+    --f7-navbar-text-color: @black;
+    --f7-navbar-title-line-height: 44px;
+    --f7-navbar-link-line-height: 44px;
+    --f7-navbar-title-font-size: 17px;
+
+    --f7-list-bg-color: @white;
+    --f7-navbar-bg-color: #f7f7f8;
+
+    --f7-tabbar-link-inactive-color: @themeColor;
+
+    --f7-radio-active-color: @themeColor;
+    --f7-toggle-active-color: @themeColor;
+    --f7-range-bar-active-bg-color: @themeColor;
+
+    --f7-list-button-text-color: @themeColor;
+
+    --f7-dialog-button-text-color: @themeColor;
+
+    // Main Toolbar
+    #editor-navbar.navbar .right a + a,
+    #editor-navbar.navbar .left a + a {
+        margin-left: 0;
+    }
+
+    .navbar, .subnavbar {
+        a.btn-doc-back {
+            width: 22px;
+        }
+        background-color: var(--f7-navbar-bg-color);
+        .title {
+            font-weight: 600;
+        }
+        .navbar-inner, .subnavbar-inner {
+            z-index: auto;
+        }
+        .sheet-close {
+            width: 44px;
+            height: 44px;
+            display: flex;
+            justify-content: center;
+        }
+    }
+
+    .popover__titled {
+        .list {
+            ul {
+                background-color: var(--f7-list-bg-color);
+                li:first-child, li:last-child {
+                    border-radius: 0;
+                    a {
+                        border-radius: 0;
+                    }
+                }
+            }
+            &:first-child, &:last-child {
+                ul {
+                    border-radius: 0;
+                }
+
+                li:first-child, li:last-child {
+                    > label {
+                        border-radius: 0;
+                    }
+                }
+            }
+        }
+
+        .popover-inner {
+            //border-radius: var(--f7-popover-border-radius);
+
+            > .view {
+                border-radius: var(--f7-popover-border-radius);
+            }
+        }
+
+        .navbar-bg {
+            //-webkit-backdrop-filter: none;
+            backdrop-filter: none;
+        }
+
+        .list:first-child {
+            li:first-child {
+                a {
+                    border-radius: 0;
+                }
+            }
+        }
+
+        .list:last-child {
+            li:last-child {
+                a {
+                    //border-radius: 0;
+                }
+
+                &:after {
+                    content: '';
+                    position: absolute;
+                    background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color));
+                    display: block;
+                    //z-index: 15;
+                    top: auto;
+                    right: auto;
+                    bottom: 0;
+                    left: 0;
+                    height: 1px;
+                    width: 100%;
+                    transform-origin: 50% 100%;
+                    transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
+
+                    -webkit-backface-visibility: hidden;
+                    backface-visibility: hidden;
+                }
+            }
+        }
+    }
+
+    // Bullets and numbers
+    .bullets,
+    .numbers {
+        .page-content {
+            background: @white;
+        }
+
+        .row {
+            justify-content: space-around;
+        }
+
+        ul {
+            margin-top: 10px;
+        }
+
+        li {
+            width: 70px;
+            height: 70px;
+            margin-right: 1px;
+            border: 1px solid #c4c4c4;
+            html.pixel-ratio-2 & {
+                border: 0.5px solid #c4c4c4;
+            }
+            html.pixel-ratio-3 & {
+                border: 0.33px solid #c4c4c4;
+            }
+
+            .thumb {
+                width: 100%;
+                height: 100%;
+                background-color: @white;
+                background-size: cover;
+
+                label {
+                    width: 100%;
+                    text-align: center;
+                    position: absolute;
+                    top: 34%;
+                }
+            }
+        }
+    }
+
+    .popover {
+        li:last-child {
+            .segmented a {
+                &:first-child {
+                    border-radius: var(--f7-button-border-radius) 0 0 var(--f7-button-border-radius);
+                }
+
+                &:last-child {
+                    border-radius: 0 var(--f7-button-border-radius) var(--f7-button-border-radius) 0;
+                }
+            }
+        }
+
+        .page-content {
+            > .list {
+                &:last-child {
+                    margin-bottom: 30px;
+                }
+            }
+        }
+    }
+
+    .list {
+        .item-content {
+            .color-preview {
+                width: 22px;
+                height: 8px;
+                display: inline-block;
+                margin-top: 21px;
+                box-sizing: border-box;
+                box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
+                &.auto {
+                    background-color: @autoColor;
+                }
+            }
+            .item-after {
+                .color-preview {
+                    width: 75px;
+                    height: 30px;
+                    margin-top: -3px;
+                }
+            }
+        }
+        li.no-indicator {
+            .item-link {
+                .item-inner {
+                    padding-right: 15px;
+                    &:before {
+                        content: none;
+                    }
+                }
+            }
+        }
+        .item-inner {
+            padding-top: 7px;
+            .item-after {
+                color: @black;
+                .after-start {
+                    margin: 0 5px;
+                }
+                .segmented {
+                    min-width: 90px;
+                    margin-left: 10px;
+                }
+            }
+        }
+        .buttons {
+            .item-inner {
+                padding-top: 0;
+                padding-bottom: 0;
+                align-items: stretch;
+                > .row {
+                    width: 100%;
+                    align-items: stretch;
+                    .button {
+                        flex: 1;
+                        border: none;
+                        height: inherit;
+                        border-radius: 0;
+                        font-size: 17px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                }
+            }
+        }
+        .list-input-right input {
+            text-align: right;
+        }
+    }
+
+    .tab-buttons {
+        width: 100%;
+        display: flex;
+        flex-wrap: nowrap;
+        align-self: center;
+        .tab-link {
+            display: block;
+            width: 100%;
+            line-height: 26px;
+            position: relative;
+            overflow: hidden;
+            -webkit-box-flex: 1;
+            border: 1px solid @themeColor;
+            text-decoration: none;
+            text-align: center;
+            margin: 0;
+            padding: 0 1px;
+            height: 29px;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            font-size: 14px;
+            font-family: inherit;
+            cursor: pointer;
+            outline: 0;
+            font-weight: 600;
+            &:first-child {
+                border-radius: 5px 0 0 5px;
+                border-left-width: 1px;
+                border-left-style: solid;
+            }
+            &:last-child {
+                border-radius: 0 5px 5px 0;
+            }
+            &.tab-link-active {
+                background: @themeColor;
+                color: @white;
+            }
+        }
+    }
+
+    .button {
+        border: 1px solid @themeColor;
+        color: @themeColor;
+        text-decoration: none;
+        text-align: center;
+        display: block;
+        border-radius: 5px;
+        line-height: 27px;
+        box-sizing: border-box;
+        background: 0 0;
+        padding: 0 10px;
+        margin: 0;
+        height: 29px;
+        white-space: nowrap;
+        position: relative;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        font-family: inherit;
+        cursor: pointer;
+        outline: 0;
+        &.active {
+            background: @themeColor;
+            color: @white;
+            i.icon {
+                background-color: @white;
+            }
+        }
+    }
+
+    .button-fill {
+        color: @themeColor;
+        background-color: @white;
+    }
+
+    .button-red {
+        color: @red;
+        background-color: @white;
+    }
+
+    .buttons-list {
+        li {
+            border: 0;
+            border-radius: 0;
+            height: 43px;
+            min-height: 43px;
+            font-size: 17px;
+            text-transform: initial;
+            padding: 0;
+            box-shadow: none;
+        }
+    }
+
+    .button-red .list-button {
+        color: red;
+    }
+
+    .block-title {
+        position: relative;
+        overflow: hidden;
+        margin: 0;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        text-transform: uppercase;
+        line-height: 1;
+        color: @blockTitleColor;
+        margin: 35px 15px 10px;
+    }
+
+    .shapes {
+        .page-content {
+            background: @white;
+        }
+    }
+
+    .dialog {
+        background-color: rgba(var(--f7-dialog-bg-color-rgb), 1);
+    }
+
+    #color-picker {
+        .right-block {
+            .button-round {
+                .icon {
+                    height: 30px;
+                    width: 30px;
+                }
+            }
+        }
+    }
+
+    .about {
+        .logo {
+            margin-top: 20px;
+        }
+    }
+
+    .content-block {
+        color: @blockTitleColor;
+    }
+
+    .dataview, #add-table, #add-shape, #add-slide, #add-chart {
+        &.page-content, .page-content {
+            background-color: @white;
+        }
+    }
+
+    // input[type="number"]
+
+    input[type="number"] {
+        &::placeholder,
+            &::-webkit-input-placeholder,
+            &::-moz-placeholder,
+            &:-moz-placeholder,
+            &:-ms-input-placeholder
+        {
+            color: @darkGreen;
+        }
+    }
+
+    // Regional Settings
+
+    .regional-settings {
+        .item-title-row {
+            display: flex;
+            justify-content: flex-start;
+            align-items: center;
+            .item-title {
+                margin-left: 20px;
+                white-space: normal;
+            }
+        }
+    }
+
+    // Find and Replace 
+
+    .navbar {
+        .searchbar {
+            background: var(--f7-navbar-bg-color);
+        }
+        .searchbar-input-wrap {
+            margin-right: 10px;
+            height: 28px;
+        }
+        .buttons-row-replace a {
+            color: @themeColor;
+        }
+    }
+
+    .searchbar input[type=search] {
+        box-sizing: border-box;
+        width: 100%;
+        height: 100%;
+        display: block;
+        border: none;
+        appearance: none;
+        border-radius: 5px;
+        font-family: inherit;
+        color: @black;
+        font-size: 14px;
+        font-weight: 400;
+        padding: 0 8px;
+        background-color: @white;
+        padding: 0 28px;
+    }
+
+    .searchbar-inner {
+        &__left {
+            margin-right: 10px;
+            justify-content: center;
+        }
+        &__right {
+            .buttons-row a.next {
+                margin-left: 15px;
+            }
+        }
+    }
+
+    .searchbar-expandable.searchbar-enabled {
+        &.replace {
+            .searchbar-inner {
+                &__right {
+                    width: 28%;
+                }
+            }
+        }
+    } 
+
+    @media(max-width: 550px) {
+        .navbar {
+            .searchbar-input-wrap {
+                margin-right: 0; 
+            }
+        }
+        .searchbar-expandable.searchbar-enabled {
+            top: 0;
+            .searchbar-inner {
+                &__center {
+                    flex-direction: column;
+                }
+                &__right {
+                    flex-direction: column-reverse;
+                    margin-left: 10px;
+                }
+            }
+            &.replace {
+                height: 88px;
+                .searchbar-inner {
+                    height: 100%;
+                    &__center {
+                        .searchbar-input-wrap {
+                            margin: 8px 0;
+                        }
+                    }
+                    &__right {
+                        width: auto;
+                        height: 100%;
+                        justify-content: space-between;
+                        .buttons-row-replace {
+                            height: 50%;
+                        }
+                    }
+                }
+            }
+        } 
+    }
+
+    .actions-button {
+        background: rgba(255,255,255,.95);
+    }
+    
+    .actions-button-text {
+        height: 57px;
+        line-height: 57px;
+        font-size: 20px;
+        color: @themeColor;
+        white-space: normal;
+        text-overflow: ellipsis;
+    }
+}

apps/common/mobile/resources/less/common-material.less

@@ -0,0 +1,464 @@
+
+.device-android {
+    @tabLinkColor: rgba(255,255,255,.7);
+    @red: #f44336;
+    @white: #fff;
+    @darkGreen: #40865c;
+    @darkGrey: #757575;
+
+    --f7-navbar-shadow-image: none;
+
+    --f7-navbar-bg-color: @themeColor;
+    --f7-navbar-link-color: @navBarIconColor;
+    --f7-navbar-text-color: @navBarIconColor;
+    --f7-navbar-height: 56px;
+
+    --f7-subnavbar-bg-color: @themeColor;
+    --f7-subnavbar-link-color: @navBarIconColor;
+    --f7-subnavbar-text-color: @navBarIconColor;
+    --f7-subnavbar-height: 56px;
+
+    --f7-radio-active-color: @themeColor;
+    --f7-toggle-active-color: @themeColor;
+    --f7-range-bar-active-bg-color: @themeColor;
+    --f7-range-knob-color: @themeColor;
+    --f7-range-knob-size: 16px;
+
+    --f7-link-highlight-color: transparent;
+    --f7-touch-ripple-color: rgba(255,255,255,0.1);
+
+    --f7-input-focused-border-color: @themeColor;
+    --f7-label-focused-text-color: @themeColor;
+
+    --f7-dialog-button-text-color: @themeColor;
+
+    .navbar {
+        .sheet-close {
+            width: 56px;
+            height: 56px;
+            display: flex;
+            justify-content: center;
+        }
+    }
+
+    .page.page-with-subnavbar.page-with-logo {
+        .page-content {
+            --f7-page-navbar-offset: var(--f7-navbar-height);
+        }
+    }
+
+    // Buttons
+    .segmented {
+        .decrement, .increment {
+            display: flex;
+            border: none;
+            min-width: 40px;
+            margin-left: 0;
+            border-radius: 0;
+            height: 32px;
+        }
+        label {
+            color: @black;
+            margin: 0 5px;
+            line-height: 32px;
+        }
+    }
+    .button {
+        --f7-button-text-color: @themeColor;
+        color: @themeColor;
+        text-align: center;
+        display: block;
+        border-radius: 2px;
+        line-height: 36px;
+        box-sizing: border-box;
+        appearance: none;
+        background: 0 0;
+        margin: 0;
+        height: 36px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        font-size: 14px;
+        text-transform: uppercase;
+        font-family: inherit;
+        cursor: pointer;
+        min-width: 64px;
+        padding: 0 8px;
+        position: relative;
+        overflow: hidden;
+        outline: 0;
+        -webkit-transition-duration: .3s;
+        transition-duration: .3s;
+        -webkit-transform: translate3d(0,0,0);
+        transform: translate3d(0,0,0);
+    }
+
+    .button-fill {
+        color: @white;
+        background-color: @themeColor;
+    }
+
+    .button-raised {
+        box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
+    }
+
+    .button-red {
+        color: @white;
+        background-color: @red;
+    }
+
+    .buttons-list {
+        li {
+            margin: 20px 16px;
+            color: @white;
+            border-radius: 2px;
+            text-transform: uppercase;
+            height: 36px;
+            min-height: 36px;
+            font-size: 14px;
+        }
+    }
+
+    .table-presets {
+        .button {
+            min-width: 0;
+        }
+    }
+    .button-fill .list-button {
+        background-color: @themeColor;
+        color: @white;
+        height: 36px;
+        text-align: center;
+        line-height: 36px;
+        text-transform: uppercase;
+        font-size: 14px;
+        font-weight: 500;
+        border-radius: 2px;
+        margin: 20px 16px;
+    }
+    .button-raised .list-button {
+        box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24);
+    }
+    .button-red .list-button {
+        background-color: @red;
+    }
+    // Tabs
+    .tab-buttons {
+        position: relative;
+        display: flex;
+        height: 100%;
+        width: 100%;
+        justify-content: space-between;
+        .tab-link {
+            justify-content: center;
+            height: 100%;
+            box-sizing: border-box;
+            padding-left: 0;
+            padding-right: 0;
+            font-size: 14px;
+            font-weight: 500;
+            text-transform: uppercase;
+            align-items: center;
+            color: @tabLinkColor;
+            i.icon {
+                opacity: 0.5;
+            }
+            &.tab-link-active {
+                color: @white;
+                i.icon {
+                    opacity: 1;
+                }
+            }
+        }
+        .tab-link-highlight {
+            --f7-tabbar-link-active-border-color: rgba(255,255,255,0.5);
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            height: 3px;
+        }
+    }
+    // List
+    .list {
+        li.no-indicator {
+            .item-link {
+                .item-inner{
+                    padding-right: 15px;
+                    &:before {
+                        content: none;
+                    }
+                }
+            }
+        }
+        .item-link {
+            .item-inner {
+                .item-after {
+                    color: @black;
+                }
+            }
+        }
+        &.inputs-list {
+            .item-input, .item-link {
+                .item-inner {
+                    display: block;
+                    .item-title, .item-label {
+                        width: 100%;
+                        font-size: 12px;
+                    }
+                    .item-input-wrap {
+                        margin-left: 0;
+                    }
+                }
+            }
+        }
+        .buttons {
+            box-sizing: border-box;
+            min-height: 48px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            width: 100%;
+            .item-content {
+                width: 100%;
+                .item-inner {
+                    padding-bottom: 0;
+                    padding-top: 0;
+                    .row {
+                        width: 100%;
+                        .button {
+                            flex: 1;
+                            font-size: 17px;
+                            margin-left: 5px;
+                            &:first-child {
+                                margin-left: 0;
+                            }
+                            &.active {
+                                color: @white;
+                                background-color: @themeColor;
+                                i.icon {
+                                    background-color: @white;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        .item-content {
+            .color-preview {
+                width: 30px;
+                height: 30px;
+                border-radius: 16px;
+                margin-top: -3px;
+                box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
+                &.auto {
+                    background-color: @autoColor;
+                }
+            }
+        }
+    }
+    // Bullets and numbers
+    .bullets,
+    .numbers {
+        .page-content {
+            background: @white;
+        }
+
+        .row {
+            justify-content: space-around;
+        }
+
+        ul {
+            margin-top: 10px;
+        }
+
+        li {
+            width: 70px;
+            height: 70px;
+            margin-right: 1px;
+            border: 1px solid @gray;
+            html.pixel-ratio-2 & {
+                border: 0.5px solid @gray;
+            }
+            html.pixel-ratio-3 & {
+                border: 0.33px solid @gray;
+            }
+
+            .thumb {
+                width: 100%;
+                height: 100%;
+                background-color: @white;
+                background-size: cover;
+
+                label {
+                    width: 100%;
+                    text-align: center;
+                    position: absolute;
+                    top: 34%;
+                }
+            }
+        }
+    }
+    .popover__titled {
+        .list:last-child {
+            li:last-child {
+                a {
+                    border-radius: 0;
+                }
+            }
+        }
+    }
+
+    // Color palette
+
+    #color-picker {
+        .right-block {
+            .button-round {
+                background-color: @themeColor;
+            }
+        }
+    }
+
+    // Regional Settings
+
+    .regional-settings {
+        .list {
+            .item-inner {
+                margin-left: 16px;
+            }
+            .item-title-row {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                width: 100%;
+                flex-direction: row-reverse;
+                .item-title {
+                    white-space: normal;
+                }
+            }
+        }
+    }
+
+    // Find and Replace 
+
+    .searchbar-inner {
+        &__center {
+            flex-wrap: wrap;
+        }
+        // &__left {
+        //     padding-top: 4px;
+        // }
+    }
+
+    .navbar {
+        .searchbar-input-wrap {
+            height: 32px;
+            margin-right: 10px;
+            margin: 4px 0;
+        }
+        &-inner {
+            overflow: initial;
+        }
+    }
+
+    .searchbar .input-clear-button {
+        width: 18px;
+        height: 18px;
+        &:after {
+            color: @white;
+            font-size: 19px;
+        }
+    }
+
+    .searchbar-icon {
+        &:after {
+            color: @white;
+            font-size: 19px;
+        }
+    }
+
+    .searchbar input[type=search] {
+        box-sizing: border-box;
+        width: 100%;
+        display: block;
+        border: none;
+        appearance: none;
+        border-radius: 0;
+        font-family: inherit;
+        color: @white;
+        font-size: 16px;
+        font-weight: 400;
+        padding: 0;
+        border-bottom: 1px solid @white;
+        height: 100%;
+        padding: 0 36px 0 24px;
+        background-color: transparent;
+        background-repeat: no-repeat;
+        background-position: 0 center;
+        opacity: 1;
+        background-size: 24px 24px;
+        transition-duration: .3s;
+        .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" fill="@{white}" height="24" viewBox="0 0 24 24" width="24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
+    }
+
+    .searchbar input[type=search]::placeholder {
+        color: @white;
+    }
+
+    .navbar {
+        .searchbar-expandable.searchbar-enabled {
+            top: 0;
+            // height: 100%;
+            .searchbar-inner {
+                height: 100%;
+                &__center {
+                    flex-direction: column;
+                }
+                &__right {
+                    flex-direction: column-reverse;
+                }
+            }
+            &.replace {
+                height: 96px;
+            }
+        }
+        a.link {
+            padding: 0 16px;
+        }
+        a.icon-only {
+            width: auto;
+            height: 56px;
+        }
+        .buttons-row-replace a {
+            color: @white;
+            padding: 0;
+        }
+        .searchbar .buttons-row {
+            align-self: flex-start;
+        }
+    }
+
+    @media(max-width: 550px) {
+        .searchbar-expandable.searchbar-enabled {
+            .searchbar-inner {
+                &__left {
+                    margin-right: 33px;
+                }
+            }
+        }
+    }
+
+    .actions-button-text {
+        cursor: pointer;
+        line-height: 48px;
+        font-size: 16px;
+        color: rgba(0,0,0,.87);
+    }
+
+    @media (min-width: 496px) {
+        .actions-modal {
+            width: 100%;
+            left: auto;
+            margin-left: 0;
+        }
+    }
+}

apps/common/mobile/resources/less/common.less

@@ -0,0 +1,775 @@
+@import './about';
+
+@white: #ffffff;
+@black: #000000;
+@gray: #c4c4c4;
+@darkGray: #6d6d72;
+@green: #4cd964;
+@red: #f00;
+@autoColor: @black;
+
+.navbar.main-navbar {
+    height: 0;
+    &.navbar-with-logo {
+        height: 26px;
+    }
+    .navbar-inner {
+        display: flex;
+        justify-content: center;
+        padding-top: 8px;
+    }
+    .navbar-bg {
+        &:before, &:after {
+            content: none;
+        }
+    }
+}
+
+.navbar {
+    .title {
+        text-overflow: initial;
+        white-space: normal;
+    }
+}
+
+.subnavbar {
+    .subnavbar-inner {
+        padding: 0;
+    }
+}
+
+.page.page-with-subnavbar {
+    .page-content {
+        --f7-page-subnavbar-offset: 0px;
+    }
+    &.page-with-logo .page-content {
+        --f7-page-subnavbar-offset: 26px;
+    }
+}
+
+.popup, .popover, .sheet-modal {
+    .list {
+        &:first-child {
+            margin-top: 0;
+        }
+        .inner-range-title {
+            padding: 15px 0 0 15px;
+        }
+    }
+    .page-content {
+        &.no-padding-top {
+            padding-top: 0;
+        }
+    }
+}
+
+.disabled, [disabled] {
+    opacity: .55;
+    pointer-events: none;
+}
+
+.text-content {
+    padding: 14px 10px 0 10px;
+}
+
+.list {
+    .item-text {
+        text-overflow: initial;
+        white-space: normal;
+        height: auto;
+        max-height: initial;
+        -webkit-line-clamp: initial;
+    }
+}
+
+.shapes {
+    li {
+        width: 70px;
+        height: 70px;
+        margin: 0 1px;
+
+        .thumb {
+            width: 100%;
+            height: 100%;
+            background-color: @themeColor;
+        }
+    }
+}
+
+.chart-types {
+    width: 100%;
+    .row {
+        padding: 0 10px;
+    }
+    li {
+        width: 60px;
+        height: 60px;
+        margin: 6px;
+
+        .thumb {
+            width: 100%;
+            height: 100%;
+            background-size: contain;
+        }
+    }
+}
+
+.chart-styles {
+    .row {
+        li {
+            margin: 0;
+            padding: 1px;
+        }
+        img {
+            width: 50px;
+            height: 50px;
+        }
+    }
+}
+
+.segmented {
+    .decrement, .increment {
+        text-overflow: clip;
+    }
+}
+
+.about {
+    .content-block {
+        margin: 0 auto 15px;
+        a {
+            color: @black;
+        }
+    }
+}
+
+.content-block {
+    margin: 32px 0;
+    padding: 0 16px;
+    box-sizing: border-box;
+}
+
+
+// Color Schemes
+
+.color-schemes-menu {
+    cursor: pointer;
+    display: block;
+    background-color: @white;
+    .item-inner {
+        justify-content: flex-start;
+    }
+    .color-schema-block {
+        display: flex;
+    }
+    .color {
+        min-width: 26px;
+        min-height: 26px;
+        margin: 0 2px 0 0;
+        box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
+    }
+    .item-title {
+        margin-left: 20px;
+        color: #212121;
+    }
+}
+
+
+// Layout 
+
+.slide-layout {
+    &__list {
+        margin: auto;
+    }
+    ul {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-around;
+    }
+    li {
+        position: relative;
+        z-index: 1;
+        margin-top: 12px;
+        img {
+            box-shadow: 0 0 0 1px rgba(0,0,0,.15);
+        }
+    }
+    .item-inner {
+        padding-top: 0;
+    }
+    .item-inner:after {
+        display: none;
+    }
+    .item-inner:before {
+        opacity: 0;
+        content: '';
+        position: absolute;
+        width: 22px;
+        height: 22px;
+        right: 11px;
+        bottom: 0;
+        z-index: 1;
+        background-repeat: no-repeat;
+        .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#aa5252"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
+    }
+    .active .item-inner:before {
+        opacity: 1;
+    }
+}
+
+// Theme 
+
+.slide-theme {
+    &__list {
+        margin: auto;
+        ul {
+            display: flex;
+            justify-content: space-between;
+            flex-wrap: wrap;
+            padding-left: 18px;
+            padding-right: 18px;
+            padding-bottom: 14px;
+        }
+    }
+    .item-inner:after {
+        display: none;
+    }
+    .item-theme {
+        position: relative;
+        margin: 0;
+        box-shadow: 0 0 0 1px rgba(0,0,0,.15);
+        width: 88px;
+        height: 40px;
+        margin-top: 14px;
+        background-image: url(../img/themes/themes.png);
+        display: block;
+    }
+    .item-theme.active:before {
+        content: '';
+        position: absolute;
+        width: 22px;
+        height: 22px;
+        right: -5px;
+        bottom: -5px;
+        z-index: 1;
+        .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#aa5252"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
+    }
+}
+
+// Transition 
+
+.slide-transition {
+    .splitter {
+        display: flex;
+        align-items: center;
+        color: @black;
+        label {
+            margin: 0 5px;
+        }
+    }
+    .buttons-row {
+        display: flex;
+        margin: 0;
+        min-width: 90px;
+        margin-left: 10px;
+        .button {
+            width: 100%;
+        }
+        .button:first-child {
+            border-radius: 5px 0 0 5px;
+            border-left-width: 1px;
+            border-left-style: solid;
+        }
+        .button:last-child {
+            border-radius: 0 5px 5px 0;
+        }
+    }
+}
+
+.style-effect, .style-type {
+    .list .item-title {
+        font-weight: normal; 
+    }
+}
+
+.range-slider-delay {
+    width: 100%;
+    margin: 4px 0 5px 0;
+    appearance: none;
+    background: linear-gradient(to right,#b7b8b7 0,#b7b8b7 100%);
+    background-position: center;
+    background-size: 100% 2px;
+    background-repeat: no-repeat;
+    outline: 0;
+    border: none;
+    box-sizing: content-box;
+    &:disabled {
+        opacity: .55;
+    }
+    &::-webkit-slider-thumb {
+        appearance: none;
+        height: 28px;
+        width: 28px;
+        border-radius: 50%;
+        background: @white;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
+    }
+    &::-ms-thumb { 
+        appearance: none;
+        height: 28px;
+        width: 28px;
+        border-radius: 50%;
+        background: @white;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
+    }
+}
+
+.buttons-list {
+    ul {
+        &::before, &::after {
+            display: none;
+        }
+        li {
+            border: 0;
+            font-weight: normal;
+            .item-link {
+                height: 100%;
+                .item-content {
+                    min-height: initial;
+                    height: 100%;
+                    padding: 0;
+                }
+                .item-inner {
+                    justify-content: center;
+                    align-items: center;
+                    padding: 0;
+                    min-height: initial;
+                    &::before {
+                        display: none;
+                    }
+                }
+            }
+        }
+    }
+}
+
+.item-color-auto {
+    .color-auto {
+        width: 22px;
+        height: 22px;
+        background-color: @autoColor;
+    }
+    &.active {
+        .color-auto {
+            box-shadow: 0 0 0 1px @white, 0 0 0 4px @themeColor;
+            border-radius: 1px;
+        }
+    }
+}
+
+.color-palettes {
+    .palette {
+        padding: 8px 0px;
+        a {
+            flex-grow: 1;
+            position: relative;
+            min-width: 10px;
+            min-height: 26px;
+            margin: 1px 1px 0 0;
+            box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
+            &.active:after {
+                content: ' ';
+                position: absolute;
+                width: 100%;
+                height: 100%;
+                box-shadow: 0 0 0 1px @white, 0 0 0 4px @themeColor;
+                z-index: 1;
+                border-radius: 1px;
+            }
+            &.transparent {
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+                .encoded-svg-background("<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 22 22' xml:space='preserve'><line stroke='#ff0000' stroke-linecap='undefined' stroke-linejoin='undefined' id='svg_1' y2='0' x2='22' y1='22' x1='0' stroke-width='2' fill='none'/></svg>");
+            }
+        }
+    }
+    .row {
+        padding: 0;
+    }
+    .list .item-inner {
+        display: block;
+    }
+    .standart-colors, .dynamic-colors {
+        .palette {
+            display: flex;
+        }
+    }
+
+    .dynamic-colors {
+        .empty-color {
+            background-color: @white;
+        }
+    }
+}
+
+#color-picker {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    max-width: 300px;
+    margin: 0 auto;
+    margin-top: 4px;
+    .color-picker-container {
+        width: calc(100% - 94px);
+        position: relative;
+        max-width: 100%;
+        height: auto;
+        font-size: 0;
+        .color-picker-module-wheel {
+            margin: 0;
+        }
+    }
+    .right-block {
+        margin-left: 20px;
+        .color-hsb-preview {
+            width: 72px;
+            height: 72px;
+            border-radius: 100px;
+            overflow: hidden;
+            border: 1px solid @gray;
+            .new-color-hsb-preview, .current-color-hsb-preview {
+                width: 100%;
+                height: 36px;
+            }
+        }
+        .button-round {
+            height: 72px;
+            width: 72px;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 100px;
+            background-color: @white;
+            box-shadow: 0 4px 4px rgba(0,0,0,.25);
+            border-color: transparent;
+            margin-top: 20px;
+        }
+    }
+}
+
+// Table styles
+
+.table-styles {
+    width: 100%;
+    .row {
+        &, li {
+            margin-bottom: 12px;
+        }
+    }
+
+    li,
+    .row div {
+        margin: 0;
+        padding: 1px;
+
+        img {
+            width: 70px;
+            height: 50px;
+        }
+    }
+}
+
+// Cell styles 
+
+.cell-styles-list {
+    ul {
+        display: flex;
+        justify-content: space-around;
+        flex-wrap: wrap;
+        padding-left: 5px;
+        padding-right: 5px;
+        padding-top: 5px;
+    }
+    li {
+        border: 0.5px solid #c8c7cc;
+        padding: 2px;
+        background-repeat: no-repeat;
+        width: 106px;
+        height: 56px;
+        margin-bottom: 10px;
+        background-position: center;
+    }
+    .item-inner:after {
+        display: none;
+    }
+    .item-theme.active:before {
+        content: '';
+        position: absolute;
+        width: 22px;
+        height: 22px;
+        right: 2px;
+        bottom: 2px;
+        z-index: 1;
+        .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="#40865c"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
+    }
+}
+
+// input[type="number"]
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+// Regional Settings
+
+.icon.lang-flag {
+    background-size: 48px auto;
+    background-image: url(../img/controls/flags@2x.png);
+}
+
+.icon.lang-flag {
+    width: 16px;
+    height: 12px;
+}
+
+.lang-flag.ca,
+.lang-flag.ca-ES {
+  background-position: 0 0;
+}
+.lang-flag.cs,
+.lang-flag.cs-CZ {
+  background-position: -16px 0;
+}
+.lang-flag.da,
+.lang-flag.da-DK {
+  background-position: -32px 0;
+}
+.lang-flag.de,
+.lang-flag.de-DE {
+  background-position: 0 -12px;
+}
+.lang-flag.el,
+.lang-flag.el-GR {
+  background-position: -16px -12px;
+}
+.lang-flag.en,
+.lang-flag.en-US {
+  background-position: -32px -12px;
+}
+.lang-flag.fr,
+.lang-flag.fr-FR {
+  background-position: 0 -24px;
+}
+.lang-flag.hu,
+.lang-flag.hu-HU {
+  background-position: -16px -24px;
+}
+.lang-flag.it,
+.lang-flag.it-IT {
+  background-position: -32px -24px;
+}
+.lang-flag.ko,
+.lang-flag.ko-KR {
+  background-position: 0 -36px;
+}
+.lang-flag.nl,
+.lang-flag.nl-NL {
+  background-position: -16px -36px;
+}
+.lang-flag.nb,
+.lang-flag.nb-NO,
+.lang-flag.nn,
+.lang-flag.nn-NO {
+  background-position: -32px -36px;
+}
+.lang-flag.pl,
+.lang-flag.pl-PL {
+  background-position: 0 -48px;
+}
+.lang-flag.pt,
+.lang-flag.pt-BR {
+  background-position: -16px -48px;
+}
+.lang-flag.ro,
+.lang-flag.ro-RO {
+  background-position: -32px -48px;
+}
+.lang-flag.ru,
+.lang-flag.ru-RU {
+  background-position: 0 -60px;
+}
+.lang-flag.sv,
+.lang-flag.sv-SE {
+  background-position: -32px -60px;
+}
+.lang-flag.tr,
+.lang-flag.tr-TR {
+  background-position: 0 -72px;
+}
+.lang-flag.uk,
+.lang-flag.uk-UA {
+  background-position: -16px -72px;
+}
+.lang-flag.lv,
+.lang-flag.lv-LV {
+  background-position: -32px -72px;
+}
+.lang-flag.lt,
+.lang-flag.lt-LT {
+  background-position: 0 -84px;
+}
+.lang-flag.vi,
+.lang-flag.vi-VN {
+  background-position: -16px -84px;
+}
+.lang-flag.de-CH {
+  background-position: -32px -84px;
+}
+.lang-flag.pt-PT {
+  background-position: -16px -96px;
+}
+.lang-flag.de-AT {
+  background-position: -32px -96px;
+}
+.lang-flag.es,
+.lang-flag.es-ES {
+  background-position: 0 -108px;
+}
+.lang-flag.en-GB {
+  background-position: -32px -108px;
+}
+.lang-flag.en-AU {
+  background-position: 0 -120px;
+}
+.lang-flag.az-Latn-AZ {
+  background-position: -16px -120px;
+}
+.lang-flag.id,
+.lang-flag.id-ID {
+  background-position: -32px -120px;
+}
+.lang-flag.bg,
+.lang-flag.bg-BG {
+  background-position: 0 -132px;
+}
+.lang-flag.ca-ES-valencia {
+  background-position: -16px -132px;
+}
+.lang-flag.en-CA {
+  background-position: -32px -132px;
+}
+.lang-flag.en-ZA {
+  background-position: 0 -144px;
+}
+.lang-flag.eu,
+.lang-flag.eu-ES {
+  background-position: -16px -144px;
+}
+.lang-flag.gl,
+.lang-flag.gl-ES {
+  background-position: -32px -144px;
+}
+.lang-flag.hr,
+.lang-flag.hr-HR {
+  background-position: 0 -156px;
+}
+.lang-flag.lb,
+.lang-flag.lb-LU {
+  background-position: -16px -156px;
+}
+.lang-flag.mn,
+.lang-flag.mn-MN {
+  background-position: -32px -156px;
+}
+.lang-flag.sl,
+.lang-flag.sl-SI {
+  background-position: 0 -168px;
+}
+.lang-flag.sr,
+.lang-flag.sr-Cyrl-RS,
+.lang-flag.sr-Latn-RS {
+  background-position: -16px -168px;
+}
+.lang-flag.sk,
+.lang-flag.sk-SK {
+  background-position: -32px -168px;
+}
+.lang-flag.kk,
+.lang-flag.kk-KZ {
+  background-position: 0 -180px;
+}
+.lang-flag.fi,
+.lang-flag.fi-FI,
+.lang-flag.sv-FI {
+  background-position: -16px -180px;
+}
+.lang-flag.zh,
+.lang-flag.zh-CN {
+  background-position: -32px -180px;
+}
+.lang-flag.ja,
+.lang-flag.ja-JP {
+  background-position: 0 -192px;
+}
+.lang-flag.es-MX {
+  background-position: -16px -192px;
+}
+
+.checkbox-in-modal {
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    .right-text {
+        margin-left: 10px;
+    }
+}
+
+.username-tip {
+    height: 20px;
+    color: @white;
+    padding: 0 10px;
+    position: absolute;
+    z-index: 900;
+    display: none;
+    pointer-events: none;
+    transition: opacity 0.1ms ease-out;
+    opacity: 0;
+    &.active {
+        display: block;
+        opacity: 1;
+    }
+}
+
+.dlg-adv-options {
+    z-index: 13700;
+    .content-block {
+        padding: 0;
+    }
+    .picker-3d { 
+        .picker-item {
+            padding: 0;
+            text-align: left;
+            font-size: 16px;
+            span {
+                padding: 0;
+            }
+        }
+    }
+    .picker-center-highlight {
+        width: 100%;
+        left: 0;
+        right: 0;
+    }
+}
+
+
+
+
+
+
+
+

apps/common/mobile/resources/less/contextmenu.less

@@ -0,0 +1,11 @@
+@import './ios/contextmenu';
+@import './material/contextmenu';
+
+
+.document-menu {
+    width: auto;
+}
+
+html.phone .document-menu .list-block .list-button {
+    padding: 0 10px;
+}

apps/common/mobile/resources/less/dataview.less

@@ -0,0 +1,31 @@
+// Data view
+
+.dataview {
+  .row {
+    justify-content: space-around;
+  }
+
+  ul {
+    padding: 0 10px;
+    list-style: none;
+
+    li {
+      display: inline-block;
+    }
+  }
+
+  .active {
+    position: relative;
+    z-index: 1;
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 22px;
+      height: 22px;
+      right: -5px;
+      bottom: -5px;
+      .encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><circle fill="#fff" cx="11" cy="11" r="11"/><path d="M11,21A10,10,0,1,1,21,11,10,10,0,0,1,11,21h0ZM17.4,7.32L17.06,7a0.48,0.48,0,0,0-.67,0l-7,6.84L6.95,11.24a0.51,0.51,0,0,0-.59.08L6,11.66a0.58,0.58,0,0,0,0,.65l3.19,3.35a0.38,0.38,0,0,0,.39,0L17.4,8a0.48,0.48,0,0,0,0-.67h0Z"/></g></svg>');
+    }
+  }
+}

apps/common/mobile/resources/less/icons.less

@@ -0,0 +1,28 @@
+@import "./ios/icons";
+@import "./material/icons";
+
+i.icon {
+    &.icon-paste {
+        width: 24px;
+        height: 24px;
+        .encoded-svg-uncolored-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 2H0V20H9V24H24V7H19V2H14V3H18V7H9V19H1V3H5V2ZM10 8H23V23H10V8Z" /><path d="M5 0H14V5H5V0Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M21 12H12V11H21V12Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M21 16H12V15H21V16Z" /><path fill-rule="evenodd" clip-rule="evenodd" d="M21 20H12V19H21V20Z" /></svg>');
+    }
+    &.icon-copy {
+        width: 24px;
+        height: 24px;
+        .encoded-svg-uncolored-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1 1H15V7H16V0H0V17H8V16H1V1Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M23 8H9V23H23V8ZM8 7V24H24V7H8Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M13 5H3V4H13V5Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 9H3V8H8V9Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M8 13H3V12H8V13Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 12H11V11H21V12Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 16H11V15H21V16Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M21 20H11V19H21V20Z"/></svg>');
+    }
+    &.icon-cut {
+        width: 24px;
+        height: 24px;
+        .encoded-svg-uncolored-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#cut)"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.22427 22.2702C4.51527 23.1269 6.52738 22.7183 7.6592 21.0127C8.79101 19.3071 8.38572 17.2943 7.09472 16.4376C5.80372 15.5809 3.79161 15.9896 2.65979 17.6952C1.52798 19.4008 1.93328 21.4136 3.22427 22.2702ZM2.67135 23.1035C4.51208 24.325 7.11827 23.6364 8.49243 21.5656C9.8666 19.4948 9.48837 16.8259 7.64764 15.6044C5.80691 14.3829 3.20072 15.0714 1.82656 17.1422C0.452398 19.2131 0.830625 21.882 2.67135 23.1035Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20.9158 22.2702C19.6248 23.1269 17.6127 22.7183 16.4809 21.0127C15.349 19.3071 15.7543 17.2943 17.0453 16.4376C18.3363 15.5809 20.3484 15.9896 21.4803 17.6952C22.6121 19.4008 22.2068 21.4136 20.9158 22.2702ZM21.4687 23.1035C19.628 24.325 17.0218 23.6364 15.6476 21.5656C14.2735 19.4948 14.6517 16.8259 16.4924 15.6044C18.3331 14.3829 20.9393 15.0714 22.3135 17.1422C23.6877 19.2131 23.3094 21.882 21.4687 23.1035Z"/><path d="M16.4924 15.6044L13.9037 12.4737L19.9552 0.675715C20.0693 0.446914 19.9552 0.172352 19.727 0.0808313C19.4416 -0.0106892 19.0993 0.0808312 18.9851 0.263872L12.0233 11.4212L5.17562 0.263872C5.06149 0.035071 4.71911 -0.0564496 4.43379 0.035071C4.14847 0.126592 4.03434 0.401153 4.14847 0.629955L10.2001 12.4279L7.64761 15.6044L9.2292 18L12.0233 13.4804L14.9108 18L16.4924 15.6044Z"/></g><defs><clipPath id="cut"><rect width="24" height="24"/></clipPath></defs></svg>');
+    }
+    &.icon-prev:after, &.icon-next:after {
+        content: none;
+    }
+    &.icon-collaboration {
+        width: 24px;
+        height: 24px;
+        .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g><path fill-rule="evenodd" clip-rule="evenodd" d="M15.9912 6C15.9912 8.34102 15.4074 10.1346 14.6055 11.3121C13.7983 12.4974 12.8249 13 11.9912 13C11.1575 13 10.1841 12.4974 9.37695 11.3121C8.57501 10.1346 7.99121 8.34102 7.99121 6C7.99121 3.61508 9.96974 2 11.9912 2C14.0127 2 15.9912 3.61508 15.9912 6ZM14.5015 12.9506C13.7365 13.6361 12.8649 14 11.9912 14C11.1195 14 10.2499 13.6378 9.48619 12.9554C7.78363 13.6081 6.36015 14.2591 5.26963 14.9224C3.55256 15.9667 3 16.8326 3 17.5C3 18.2545 3.4257 19.0877 4.82302 19.7879C6.25015 20.5031 8.57272 20.9999 12 21C15.4273 21 17.7499 20.5031 19.177 19.7879C20.5743 19.0877 21 18.2545 21 17.5C21 16.8326 20.4474 15.9667 18.7304 14.9224C17.6372 14.2575 16.2095 13.605 14.5015 12.9506ZM15.2272 12.1594C16.2765 10.7825 16.9912 8.67814 16.9912 6C16.9912 3 14.5 1 11.9912 1C9.48242 1 6.99121 3 6.99121 6C6.99121 8.68159 7.70777 10.7879 8.75931 12.1647C4.60309 13.7964 2 15.4951 2 17.5C2 19.9852 5 21.9999 12 22C19 22 22 19.9852 22 17.5C22 15.4929 19.3913 13.7927 15.2272 12.1594Z" fill="@{themeColor}"/></g></svg>');
+    }
+}

apps/common/mobile/resources/less/ios/comments.less

@@ -0,0 +1,24 @@
+.device-ios {
+  .comment-list {
+    .reply-item {
+      .item-inner:after {
+        content: none !important;
+      }
+      &:before {
+        content: '';
+        position: absolute;
+        left: auto;
+        bottom: 0;
+        right: auto;
+        top: 0;
+        height: 1px;
+        width: 100%;
+        background-color: var(--f7-list-item-border-color);
+        display: block;
+        z-index: 15;
+        -webkit-transform-origin: 50% 100%;
+        transform-origin: 50% 100%;
+      }
+    }
+  }
+}

apps/common/mobile/resources/less/ios/contextmenu.less

@@ -0,0 +1,102 @@
+
+.device-ios {
+    .document-menu {
+        @contextMenuBg: rgba(0, 0, 0, 0.9);
+        @modalHairlineColor: rgba(230, 230, 230, 0.9);
+        @modalButtonColor: rgba(200, 200, 200, 0.9);
+
+        background-color: @contextMenuBg;
+        border-radius: 8px;
+
+        .popover-angle {
+            &:after {
+                background: @contextMenuBg;
+            }
+        }
+
+        .list-block {
+            font-size: 14px;
+            white-space: pre;
+
+            &:first-child {
+                ul {
+                    .hairline-remove(left);
+                    //border-radius: 7px 0 0 7px;
+                }
+
+                li:first-child a {
+                    //border-radius: 7px 0 0 7px;
+                    border-radius: 0;
+                }
+            }
+
+            //&:last-child {
+            //    ul {
+            //        .hairline-remove(right);
+            //        border-radius: 0 7px 7px 0;
+            //    }
+            //    li:last-child a{
+            //        border-radius: 0 7px 7px 0;
+            //    }
+            //}
+
+            //&:first-child:last-child {
+            //    li:first-child:last-child a, ul:first-child:last-child {
+            //        border-radius: 7px;
+            //    }
+            //}
+
+            .item-link {
+                display: inline-block;
+
+                html:not(.watch-active-state) &:active, &.active-state {
+                    //.transition(0ms);
+                    background-color: #d9d9d9;
+                    .item-inner {
+                        .hairline-color(right, transparent);
+                    }
+                }
+
+                html.phone & {
+                    padding: 0 10px;
+                }
+            }
+
+            .list-button {
+                color: @white;
+                line-height: 36px;
+
+                .hairline(right, @modalHairlineColor);
+            }
+
+            // List items
+            li {
+                display: inline-flex;
+            }
+
+            // Last-childs
+            li {
+                &:last-child {
+                    .list-button {
+                        .hairline-remove(right);
+                    }
+                }
+
+                &:last-child, &:last-child li:last-child {
+                    .item-inner {
+                        .hairline-remove(right);
+                    }
+                }
+
+                li:last-child, &:last-child li {
+                    .item-inner {
+                        .hairline(right, @modalHairlineColor);
+                    }
+                }
+            }
+
+            //.no-hairlines();
+            //.no-hairlines-between()
+        }
+    }
+}

apps/common/mobile/resources/less/ios/icons.less

@@ -0,0 +1,28 @@
+.device-ios {
+    i.icon {
+        &.icon_mask {
+            background-color: white;
+        }
+        &.icon-logo {
+            width: 100px;
+            height: 14px;
+            background: url('../../img/header/logo-ios.svg') no-repeat center;
+        }
+        &.icon-prev {
+            width: 22px;
+            height: 22px;
+            .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M16,20.5L15,21.5L4.5,11l0,0l0,0L15,0.5L16,1.5L6.6,11L16,20.5z"/></g></svg>');
+            &:after {
+              display: none;
+            }
+        }
+        &.icon-next {
+            width: 22px;
+            height: 22px;
+            .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M15.5,11L6,1.5l1.1-1.1L17.5,11l0,0l0,0L7.1,21.5L6,20.5L15.5,11z"/></g></svg>');
+            &:after {
+                display: none;
+            }
+        }
+    }
+}

apps/common/mobile/resources/less/material/comments.less

@@ -0,0 +1,88 @@
+.device-android {
+  .wrap-comment, .comment-list, .reply-list {
+    .comment-header, .reply-header {
+      display: flex;
+      .initials {
+        border-radius: 50px;
+        color: @white;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 10px;
+        font-size: 14px;
+      }
+    }
+  }
+
+  .wrap-comment {
+    .comment-header {
+      align-items: center;
+      .initials {
+        height: 30px;
+        width: 30px;
+      }
+    }
+    .wrap-textarea {
+      .input:not(.input-outline):after {
+        content: none;
+      }
+    }
+  }
+
+  #add-comment-dialog, #edit-comment-dialog, #add-reply-dialog, #edit-reply-dialog {
+    .dialog {
+      --f7-dialog-text-color: @black;
+      .done {
+        padding-right: 6px;
+      }
+    }
+  }
+
+  .comment-list {
+    ul:after, .item-inner:after, li:last-child li .item-inner:after {
+      content: none;
+    }
+    .comment-header {
+      .left {
+        display: flex;
+        align-items: center;
+        .initials {
+          width: 40px;
+          height: 40px;
+          font-size: 18px;
+        }
+      }
+    }
+  }
+  .reply-list {
+    .reply-header {
+      .left {
+        display: flex;
+        .initials {
+          margin-top: 5px;
+          width: 24px;
+          height: 24px;
+          font-size: 11px;
+        }
+      }
+    }
+  }
+
+  .edit-comment-popup, .edit-reply-popup, #edit-comment-dialog, #edit-reply-dialog {
+    .wrap-comment {
+      .comment-header, .reply-header {
+        .initials {
+          height: 40px;
+          width: 40px;
+        }
+      }
+    }
+  }
+
+  #view-comment-popover {
+    .toolbar-bottom:after {
+      content: none;
+    }
+  }
+
+}

apps/common/mobile/resources/less/material/contextmenu.less

@@ -0,0 +1,32 @@
+
+.md {
+    .document-menu {
+        //line-height: 1 !important;
+
+        .popover-inner {
+            overflow: hidden;
+        }
+
+        .list-block {
+            white-space: pre;
+
+            ul {
+                height: 48px;
+            }
+
+            li {
+                display: inline-block;
+            }
+
+            .list-button {
+                color: #212121;
+            }
+
+            //.item-link {
+            //    html.phone & {
+                    //padding: 0 10px;
+                //}
+            //}
+        }
+    }
+}

apps/common/mobile/resources/less/material/icons.less

@@ -0,0 +1,37 @@
+.device-android {
+    i.icon {
+        &.icon_mask {
+            background-color: black;
+        }
+        &.icon-logo {
+            width: 100px;
+            height: 14px;
+            background: url('../../img/header/logo-android.svg') no-repeat center;
+        }
+        &.icon-prev {
+            width: 20px;
+            height: 20px;
+            .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{white}"><g><polygon points="5.1,10.9 13.9,2 16,4.1 9.2,11.1 16,17.9 13.9,20 5.1,11.2 5,11.1 "/></g></svg>');
+            &:after {
+              display: none;
+            }
+        }
+        &.icon-next {
+            width: 20px;
+            height: 20px;
+            .encoded-svg-background('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 22 22" fill="@{white}"><g><polygon points="16.9,10.9 8.1,2 6,4.1 12.8,11.1 6,17.9 8.1,20 16.9,11.2 17,11.1 "/></g></svg>');
+            &:after {
+                display: none;
+            }
+        }
+    }
+    .navbar {
+        i.icon {
+            &.icon-collaboration {
+                width: 24px;
+                height: 24px;
+                .encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.9912 6C14.9912 8.18203 14.4464 9.76912 13.7789 10.7492C13.101 11.7447 12.4042 12 11.9912 12C11.5782 12 10.8814 11.7447 10.2035 10.7492C9.53601 9.76912 8.99121 8.18203 8.99121 6C8.99121 4.23017 10.4571 3 11.9912 3C13.5254 3 14.9912 4.23017 14.9912 6ZM13.4917 13.6397C13.0059 13.8771 12.4989 14 11.9912 14C11.4861 14 10.9817 13.8784 10.4983 13.6434C8.53188 14.3681 6.94518 15.0737 5.78927 15.7768C4.10512 16.8011 4 17.4079 4 17.5C4 17.7664 4.1014 18.3077 5.27104 18.8939C6.50029 19.5099 8.64545 19.9999 12 20C15.3546 20 17.4997 19.5099 18.7289 18.8939C19.8986 18.3078 20 17.7664 20 17.5C20 17.4079 19.8949 16.8011 18.2107 15.7768C17.0529 15.0726 15.4627 14.3657 13.4917 13.6397ZM15.2272 12.1594C16.2765 10.7825 16.9912 8.67814 16.9912 6C16.9912 3 14.5 1 11.9912 1C9.48242 1 6.99121 3 6.99121 6C6.99121 8.68159 7.70777 10.7879 8.75931 12.1647C4.60309 13.7964 2 15.4951 2 17.5C2 19.9852 5 21.9999 12 22C19 22 22 19.9852 22 17.5C22 15.4929 19.3913 13.7927 15.2272 12.1594Z" fill="@{navBarIconColor}"/></svg>');
+            }
+        }
+    }
+}

apps/common/mobile/resources/less/search.less

@@ -0,0 +1,75 @@
+@statusBarBorderColor: #cbcbcb;
+
+.navbar {
+    .searchbar {
+        background-color: var(--f7-navbar-bg-color);
+
+        .buttons-row {
+            align-self: center;
+            display: flex;
+        }
+
+        .searchbar-bg {
+            .hairline(bottom, @statusBarBorderColor);
+        }
+    }
+
+    .searchbar-inner {
+        justify-content: space-between;
+        &__center {
+            display: flex;
+            align-items: center;
+            width: 81%;
+        }
+        &__right {
+            display: flex;
+            align-items: center;
+        }
+    }
+
+    .searchbar-expandable {
+        transition-duration: 0s;
+    }
+
+    .buttons-row-replace {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        // width: max-content;
+        width: 100%;
+        justify-content: center;
+        a {
+            font-size: 15px;
+            height: auto;
+            display: block;
+            line-height: normal;
+        }
+    }
+
+    @media(max-width: 550px)
+    {
+        .searchbar-expandable.searchbar-enabled {
+            .searchbar-inner {
+                &__left {
+                    min-width: 22px;
+                    max-width: 22px;
+                }
+                &__center {
+                    flex-direction: column;
+                }
+                &__right {
+                    flex-direction: column-reverse;
+                }
+            }
+            &.replace {
+                top: 0;
+                .searchbar-inner {
+                    height: 100%;
+                    &__left {
+                        align-self: flex-start;
+                    }
+                }
+            }
+        } 
+    }
+}

apps/common/mobile/resources/less/variables.less

@@ -0,0 +1,9 @@
+
+.md {
+    --background-normal: #f1f1f1;
+}
+
+@background-normal: var(--background-normal, #fff);
+
+@border-regular-control: #cbcbcb;
+@text-normal: #000;

apps/common/mobile/utils/IrregularStack.js

@@ -0,0 +1,50 @@
+
+export default class IrregularStack {
+    constructor (config) {
+        this._stack = [];
+
+        const _config = config || {};
+        this._strongCompare = _config.strongCompare || this._compare;
+        this._weakCompare = _config.weakCompare || this._compare;
+    }
+
+    _compare (obj1, obj2) {
+        if (typeof obj1 === 'object' && typeof obj2 === 'object' && window.JSON)
+            return window.JSON.stringify(obj1) === window.JSON.stringify(obj2);
+        return obj1 === obj2;
+    };
+
+    _indexOf (obj, compare) {
+        for (let i = this._stack.length - 1; i >= 0; i--) {
+            if (compare(this._stack[i], obj))
+                return i;
+        }
+        return -1;
+    }
+
+    push (obj) {
+        this._stack.push(obj);
+    }
+
+    pop (obj) {
+        const index = this._indexOf(obj, this._strongCompare);
+        if (index !== -1) {
+            const removed = this._stack.splice(index, 1);
+            return removed[0];
+        }
+        return undefined;
+    }
+
+    get (obj) {
+        const index = this._indexOf(obj, this._weakCompare);
+        if (index !== -1) {
+            return this._stack[index];
+        }
+        return undefined;
+    }
+
+    exist (obj) {
+        return !(this._indexOf(obj, this._strongCompare) < 0);
+    }
+
+}

apps/common/mobile/utils/LocalStorage.js

@@ -0,0 +1,80 @@
+
+class LocalStorage {
+    constructor() {
+        Common.Gateway.on('internalcommand', data => {
+            if (data.type == 'localstorage') {
+                this._store = data.keys;
+            }
+        });
+
+        this._store = {};
+
+        try {
+            this._isAllowed = !!window.localStorage;
+        } catch (e) {
+            this._isAllowed = false;
+        }
+    }
+
+    get id() {
+        return this._storeName;
+    }
+
+    set id(name) {
+        this._storeName = name;
+    }
+
+    set keysFilter(value) {
+        this._filter = value;
+    }
+
+    get keysFilter() {
+        return this._filter;
+    }
+
+    sync() {
+        if ( !this._isAllowed )
+            Common.Gateway.internalMessage('localstorage', {cmd:'get', keys:this._filter});
+    }
+
+    save() {
+        if ( !this._isAllowed )
+            Common.Gateway.internalMessage('localstorage', {cmd:'set', keys:this._store});
+    }
+
+    setItem(name, value, just) {
+        if ( this._isAllowed ) {
+            try {
+                localStorage.setItem(name, value);
+            } catch (error){}
+        } else {
+            this._store[name] = value;
+
+            if ( just===true ) {
+                Common.Gateway.internalMessage('localstorage', {cmd:'set', keys: {name: value}});
+            }
+        }
+    }
+
+    getItem(name) {
+        if ( this._isAllowed )
+            return localStorage.getItem(name);
+        else return this._store[name]===undefined ? null : this._store[name];
+    };
+
+    setBool(name, value, just) {
+        this.setItem(name, value ? 1 : 0, just);
+    }
+
+    getBool(name, defValue) {
+        const value = this.getItem(name);
+        return (value !== null) ? (parseInt(value) != 0) : !!defValue;
+    }
+
+    itemExists(name) {
+        return this.getItem(name) !== null;
+    }
+}
+
+const instance = new LocalStorage();
+export {instance as LocalStorage};

apps/common/mobile/utils/device.jsx

@@ -0,0 +1,52 @@
+
+import React from 'react';
+import { f7 } from 'framework7-react';
+import { Dom7 } from 'framework7'
+
+class WrapDevice {
+    constructor(){
+        const ua = navigator.userAgent,
+            isMobile = /Mobile(\/|\s|;)/.test(ua);
+
+        this.isPhone = /(iPhone|iPod)/.test(ua) ||
+            (!/(Silk)/.test(ua) && (/(Android)/.test(ua) && (/(Android 2)/.test(ua) || isMobile))) ||
+            (/(BlackBerry|BB)/.test(ua) && isMobile) ||
+            /(Windows Phone)/.test(ua);
+
+        this.isTablet = !this.isPhone && (/iPad/.test(ua) || /Android/.test(ua) || /(RIM Tablet OS)/.test(ua) ||
+            (/MSIE 10/.test(ua) && /; Touch/.test(ua)));
+    }
+
+    initDom() {
+        const $$ = Dom7;
+        if ( this.sailfish ) {
+            $$('html').addClass('sailfish');
+        }
+
+        $$('html').addClass(this.phone ? 'phone' : 'tablet');
+        // $$(window).on('resize', _.bind(this.onWindowResize, this));
+    }
+
+    get phone() {
+        return this.isPhone
+    }
+
+    get tablet() {
+        return this.isTablet
+    }
+
+    get sailfish() {
+        return /Sailfish/.test(navigator.userAgent) || /Jolla/.test(navigator.userAgent);
+    }
+
+    get android() {
+        return f7.device.android;
+    }
+
+    get ios() {
+        return f7.device.ios;
+    }
+}
+
+const device = new WrapDevice();
+export {device as Device};

apps/common/mobile/utils/notifications.js

@@ -0,0 +1,32 @@
+
+export default class Notifications {
+    constructor() {
+        this._events = {};
+    }
+
+    on(event, callback) {
+        const addevent = (e, c) => {
+            !this._events[e] && (this._events[e] = []);
+            this._events[e].push(c);
+        };
+
+        if ( typeof(event) == 'object' )
+            for (const i in event)
+                addevent(i, event[i])
+        else addevent(event, callback);
+    }
+
+    off(event, callback) {
+        if ( this._events[event] && this._events[event].includes(callback) ) {
+            this._events[event].splice(this._events[event].indexOf(callback), 1);
+        }
+    }
+
+    trigger(event/*, args*/) {
+        if ( this._events[event] ) {
+            this._events[event].forEach(callback => {
+                callback.apply(this, Array.prototype.slice.call(arguments, 1));
+            });
+        }
+    }
+}

apps/documenteditor/mobile/.gitignore

@@ -0,0 +1,40 @@
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# Misc
+.DS_Store
+Thumbs.db
+
+
+
+# Production build
+www/

apps/documenteditor/mobile/README.md

@@ -0,0 +1,74 @@
+# Desktop Editor
+
+## Framework7 CLI Options
+
+Framework7 app created with following options:
+
+```
+{
+  "cwd": "E:\\Work\\Projects\\WebOffice\\web-apps\\apps\\documenteditor\\mobile",
+  "type": [
+    "web"
+  ],
+  "name": "Desktop Editor",
+  "framework": "react",
+  "template": "split-view",
+  "cssPreProcessor": "less",
+  "bundler": "webpack",
+  "webpack": {
+    "developmentSourceMap": true,
+    "productionSourceMap": true,
+    "hashAssets": false,
+    "preserveAssetsPaths": false,
+    "inlineAssets": true
+  },
+  "theming": {
+    "customColor": false,
+    "color": "#007aff",
+    "darkTheme": false,
+    "iconFonts": true,
+    "fillBars": false
+  },
+  "customBuild": false
+}
+```
+
+## NPM Scripts
+
+* 🔥 `start` - run development server
+* 🔧 `dev` - run development server
+* 🔧 `build-dev` - build web app using development mode (faster build without minification and optimization)
+* 🔧 `build-prod` - build web app for production
+
+## WebPack
+
+There is a webpack bundler setup. It compiles and bundles all "front-end" resources. You should work only with files located in `/src` folder. Webpack config located in `build/webpack.config.js`.
+
+Webpack has specific way of handling static assets (CSS files, images, audios). You can learn more about correct way of doing things on [official webpack documentation](https://webpack.js.org/guides/asset-management/).
+## Assets
+
+Assets (icons, splash screens) source images located in `assets-src` folder. To generate your own icons and splash screen images, you will need to replace all assets in this directory with your own images (pay attention to image size and format), and run the following command in the project directory:
+
+```
+framework7 assets
+```
+
+Or launch UI where you will be able to change icons and splash screens:
+
+```
+framework7 assets --ui
+```
+
+## Documentation & Resources
+
+* [Framework7 Core Documentation](https://framework7.io/docs/)
+
+* [Framework7 React Documentation](https://framework7.io/react/)
+
+* [Framework7 Icons Reference](https://framework7.io/icons/)
+* [Community Forum](https://forum.framework7.io)
+
+## Support Framework7
+
+Love Framework7? Support project by donating or pledging on patreon:
+https://patreon.com/vladimirkharlampidi

apps/documenteditor/mobile/app-dev.js

@@ -1,238 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  app.js
- *
- *  Created by Alexander Yuzhin on 9/21/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-'use strict';
-var reqerr;
-require.config({
-    baseUrl: '../../',
-    paths: {
-        jquery          : '../vendor/jquery/jquery',
-        underscore      : '../vendor/underscore/underscore',
-        backbone        : '../vendor/backbone/backbone',
-        framework7      : '../vendor/framework7/js/framework7',
-        text            : '../vendor/requirejs-text/text',
-        xregexp         : '../vendor/xregexp/xregexp-all-min',
-        sockjs          : '../vendor/sockjs/sockjs.min',
-        jszip           : '../vendor/jszip/jszip.min',
-        jsziputils      : '../vendor/jszip-utils/jszip-utils.min',
-        api             : 'api/documents/api',
-        core            : 'common/main/lib/core/application',
-        extendes        : 'common/mobile/utils/extendes',
-        notification    : 'common/main/lib/core/NotificationCenter',
-        localstorage    : 'common/main/lib/util/LocalStorage',
-        analytics       : 'common/Analytics',
-        gateway         : 'common/Gateway',
-        locale          : 'common/locale',
-        irregularstack  : 'common/IrregularStack',
-        sharedsettings  : 'common/mobile/utils/SharedSettings',
-        features        : '../../web-apps-mobile/word/patch'
-    },
-
-    shim: {
-        framework7: {
-            exports: 'Framework7'
-        },
-        underscore: {
-            exports: '_'
-        },
-        backbone: {
-            deps: [
-                'underscore',
-                'jquery'
-            ],
-            exports: 'Backbone'
-        },
-        core: {
-            deps: [
-                'backbone',
-                'notification',
-                'irregularstack',
-                'sharedsettings'
-            ]
-        },
-        extendes: {
-            deps: [
-                'underscore',
-                'jquery',
-                'framework7'
-            ]
-        },
-        gateway: {
-            deps: [
-                'jquery'
-            ]
-        },
-        analytics: {
-            deps: [
-                'jquery'
-            ]
-        }
-    }
-});
-
-require([
-    'backbone',
-    'framework7',
-    'core',
-    'underscore',
-    'extendes',
-    'api',
-    'analytics',
-    'gateway',
-    'locale',
-    'jszip',
-    'jsziputils',
-    'sockjs'
-], function (Backbone, Framework7, Core) {
-    Backbone.history.start();
-
-    /**
-     * Application instance with DE namespace defined
-     */
-    var app = new Backbone.Application({
-        nameSpace: 'DE',
-        autoCreate: false,
-        controllers : [
-            'Common.Controllers.Plugins',
-            'Editor',
-            'Toolbar',
-            'Search',
-            'Main',
-            'DocumentHolder',
-            'Settings',
-            'EditContainer',
-            'EditText',
-            'EditParagraph',
-            'EditHeader',
-            'EditTable',
-            'EditImage',
-            'EditShape',
-            'EditChart',
-            'EditHyperlink',
-            'AddContainer',
-            'AddTable',
-            'AddShape',
-            'AddImage',
-            'AddOther',
-            'Common.Controllers.Collaboration'
-        ]
-    });
-
-    var device = Framework7.prototype.device;
-    var loadPlatformCss = function (filename, opt){
-        var fileref = document.createElement('link');
-        fileref.setAttribute('rel', 'stylesheet');
-        fileref.setAttribute('type', 'text/css');
-        fileref.setAttribute('href', filename);
-
-        if (typeof fileref != 'undefined') {
-            document.getElementsByTagName("head")[0].appendChild(fileref);
-        }
-    };
-
-    //Store Framework7 initialized instance for easy access
-    window.uiApp = new Framework7({
-        // Default title for modals
-        modalTitle: 'ONLYOFFICE',
-
-        // Enable tap hold events
-        tapHold: true,
-
-        // If it is webapp, we can enable hash navigation:
-//        pushState: false,
-
-        // If Android
-        material: device.android,
-
-        // Hide and show indicator during ajax requests
-        onAjaxStart: function (xhr) {
-            uiApp.showIndicator();
-        },
-        onAjaxComplete: function (xhr) {
-            uiApp.hideIndicator();
-        }
-    });
-
-    //Export DOM7 to local variable to make it easy accessable
-    window.$$ = Dom7;
-
-    //Load platform styles
-    loadPlatformCss('resources/css/app-' + (device.android ? 'material' : 'ios') + '.css');
-
-    Common.Locale.apply(function() {
-        require([
-            'common/main/lib/util/LocalStorage',
-            'common/main/lib/util/utils',
-            'common/mobile/lib/controller/Plugins',
-            'documenteditor/mobile/app/controller/Editor',
-            'documenteditor/mobile/app/controller/Toolbar',
-            'documenteditor/mobile/app/controller/Search',
-            'documenteditor/mobile/app/controller/Main',
-            'documenteditor/mobile/app/controller/DocumentHolder',
-            'documenteditor/mobile/app/controller/Settings',
-            'documenteditor/mobile/app/controller/edit/EditContainer',
-            'documenteditor/mobile/app/controller/edit/EditText',
-            'documenteditor/mobile/app/controller/edit/EditParagraph',
-            'documenteditor/mobile/app/controller/edit/EditHeader',
-            'documenteditor/mobile/app/controller/edit/EditTable',
-            'documenteditor/mobile/app/controller/edit/EditImage',
-            'documenteditor/mobile/app/controller/edit/EditShape',
-            'documenteditor/mobile/app/controller/edit/EditChart',
-            'documenteditor/mobile/app/controller/edit/EditHyperlink',
-            'documenteditor/mobile/app/controller/add/AddContainer',
-            'documenteditor/mobile/app/controller/add/AddTable',
-            'documenteditor/mobile/app/controller/add/AddShape',
-            'documenteditor/mobile/app/controller/add/AddImage',
-            'documenteditor/mobile/app/controller/add/AddOther',
-            'common/mobile/lib/controller/Collaboration'
-        ], function() {
-            window.compareVersions = true;
-            var _s = app.start.bind(app);
-            require(['features'], _s, _s);
-        });
-    });
-}, function(err) {
-    if (err.requireType == 'timeout' && !reqerr && window.requireTimeourError) {
-        reqerr = window.requireTimeourError();
-        window.alert(reqerr);
-        window.location.reload();
-    }
-});

apps/documenteditor/mobile/app.js

@@ -1,246 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  app.js
- *
- *  Created by Alexander Yuzhin on 9/21/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-'use strict';
-var reqerr;
-require.config({
-    baseUrl: '../../',
-    paths: {
-        jquery          : '../vendor/jquery/jquery',
-        underscore      : '../vendor/underscore/underscore',
-        backbone        : '../vendor/backbone/backbone',
-        framework7      : '../vendor/framework7/js/framework7',
-        text            : '../vendor/requirejs-text/text',
-        xregexp         : '../vendor/xregexp/xregexp-all-min',
-        sockjs          : '../vendor/sockjs/sockjs.min',
-        jszip           : '../vendor/jszip/jszip.min',
-        jsziputils      : '../vendor/jszip-utils/jszip-utils.min',
-        allfonts        : '../../sdkjs/common/AllFonts',
-        sdk             : '../../sdkjs/word/sdk-all-min',
-        api             : 'api/documents/api',
-        core            : 'common/main/lib/core/application',
-        extendes        : 'common/mobile/utils/extendes',
-        notification    : 'common/main/lib/core/NotificationCenter',
-        localstorage    : 'common/main/lib/util/LocalStorage',
-        analytics       : 'common/Analytics',
-        gateway         : 'common/Gateway',
-        locale          : 'common/locale',
-        irregularstack  : 'common/IrregularStack',
-        sharedsettings  : 'common/mobile/utils/SharedSettings'
-    },
-
-    shim: {
-        framework7: {
-            exports: 'Framework7'
-        },
-        underscore: {
-            exports: '_'
-        },
-        backbone: {
-            deps: [
-                'underscore',
-                'jquery'
-            ],
-            exports: 'Backbone'
-        },
-        core: {
-            deps: [
-                'backbone',
-                'notification',
-                'irregularstack',
-                'sharedsettings'
-            ]
-        },
-        extendes: {
-            deps: [
-                'underscore',
-                'jquery',
-                'framework7'
-            ]
-        },
-        sdk: {
-            deps: [
-                'jquery',
-                'underscore',
-                'allfonts',
-                'xregexp',
-                'sockjs',
-                'jszip',
-                'jsziputils'
-            ]
-        },
-        gateway: {
-            deps: [
-                'jquery'
-            ]
-        },
-        analytics: {
-            deps: [
-                'jquery'
-            ]
-        }
-    }
-});
-
-require([
-    'backbone',
-    'framework7',
-    'core',
-    'underscore',
-    'extendes',
-    'sdk',
-    'api',
-    'analytics',
-    'gateway',
-    'locale'
-], function (Backbone, Framework7, Core) {
-    Backbone.history.start();
-
-    /**
-     * Application instance with DE namespace defined
-     */
-    var app = new Backbone.Application({
-        nameSpace: 'DE',
-        autoCreate: false,
-        controllers : [
-            'Common.Controllers.Plugins',
-            'Editor',
-            'Toolbar',
-            'Search',
-            'Main',
-            'DocumentHolder',
-            'Settings',
-            'EditContainer',
-            'EditText',
-            'EditParagraph',
-            'EditHeader',
-            'EditTable',
-            'EditImage',
-            'EditShape',
-            'EditChart',
-            'EditHyperlink',
-            'AddContainer',
-            'AddTable',
-            'AddShape',
-            'AddImage',
-            'AddOther',
-            'Common.Controllers.Collaboration'
-        ]
-    });
-
-    var device = Framework7.prototype.device;
-    var loadPlatformCss = function (filename, opt){
-        var fileref = document.createElement('link');
-        fileref.setAttribute('rel', 'stylesheet');
-        fileref.setAttribute('type', 'text/css');
-        fileref.setAttribute('href', filename);
-
-        if (typeof fileref != 'undefined') {
-            document.getElementsByTagName("head")[0].appendChild(fileref);
-        }
-    };
-
-    //Store Framework7 initialized instance for easy access
-    window.uiApp = new Framework7({
-        // Default title for modals
-        modalTitle: '{{APP_TITLE_TEXT}}',
-
-        // Enable tap hold events
-        tapHold: true,
-
-        // If it is webapp, we can enable hash navigation:
-//        pushState: false,
-
-        // If Android
-        material: device.android,
-
-        // Hide and show indicator during ajax requests
-        onAjaxStart: function (xhr) {
-            uiApp.showIndicator();
-        },
-        onAjaxComplete: function (xhr) {
-            uiApp.hideIndicator();
-        }
-    });
-
-    //Export DOM7 to local variable to make it easy accessable
-    window.$$ = Dom7;
-
-    //Load platform styles
-    loadPlatformCss('resources/css/app-' + (device.android ? 'material' : 'ios') + '.css');
-
-    Common.Locale.apply(function() {
-        require([
-            'common/main/lib/util/LocalStorage',
-            'common/main/lib/util/utils',
-            'common/mobile/lib/controller/Plugins',
-            'documenteditor/mobile/app/controller/Editor',
-            'documenteditor/mobile/app/controller/Toolbar',
-            'documenteditor/mobile/app/controller/Search',
-            'documenteditor/mobile/app/controller/Main',
-            'documenteditor/mobile/app/controller/DocumentHolder',
-            'documenteditor/mobile/app/controller/Settings',
-            'documenteditor/mobile/app/controller/edit/EditContainer',
-            'documenteditor/mobile/app/controller/edit/EditText',
-            'documenteditor/mobile/app/controller/edit/EditParagraph',
-            'documenteditor/mobile/app/controller/edit/EditHeader',
-            'documenteditor/mobile/app/controller/edit/EditTable',
-            'documenteditor/mobile/app/controller/edit/EditImage',
-            'documenteditor/mobile/app/controller/edit/EditShape',
-            'documenteditor/mobile/app/controller/edit/EditChart',
-            'documenteditor/mobile/app/controller/edit/EditHyperlink',
-            'documenteditor/mobile/app/controller/add/AddContainer',
-            'documenteditor/mobile/app/controller/add/AddTable',
-            'documenteditor/mobile/app/controller/add/AddShape',
-            'documenteditor/mobile/app/controller/add/AddImage',
-            'documenteditor/mobile/app/controller/add/AddOther',
-            'common/mobile/lib/controller/Collaboration'
-        ], function() {
-            app.start();
-        });
-    });
-}, function(err) {
-    if (err.requireType == 'timeout' && !reqerr && window.requireTimeourError) {
-        reqerr = window.requireTimeourError();
-        window.alert(reqerr);
-        window.location.reload();
-    }
-});

apps/documenteditor/mobile/app/controller/DocumentHolder.js

@@ -1,715 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  DocumentHolder.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 11/8/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-
-define([
-    'core',
-    'jquery',
-    'underscore',
-    'backbone',
-    'documenteditor/mobile/app/view/DocumentHolder',
-    'common/main/lib/collection/Users'
-], function (core, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.DocumentHolder = Backbone.Controller.extend(_.extend((function() {
-        // private
-        var _stack,
-            _view,
-            _fastCoAuthTips = [],
-            _actionSheets = [],
-            _isEdit = false,
-            _canReview = false,
-            _inRevisionChange = false,
-            _isComments = false,
-            _menuPos = [],
-            _timer = 0,
-            _canViewComments = true,
-            _isRestrictedEdit = false,
-            _canFillForms = true,
-            _stateDisplayMode = false;
-
-        return {
-            models: [],
-            collections: [
-                'Common.Collections.Users'
-            ],
-            views: [
-                'DocumentHolder'
-            ],
-
-            initialize: function() {
-                this.addListeners({
-                    'DocumentHolder': {
-                        'contextmenu:click' : this.onContextMenuClick
-                    }
-                });
-            },
-
-            setApi: function(api) {
-                var me = this;
-
-                me.api = api;
-
-                me.api.asc_registerCallback('asc_onShowPopMenu',            _.bind(me.onApiShowPopMenu, me));
-                me.api.asc_registerCallback('asc_onHidePopMenu',            _.bind(me.onApiHidePopMenu, me));
-                me.api.asc_registerCallback('asc_onShowForeignCursorLabel', _.bind(me.onApiShowForeignCursorLabel, me));
-                me.api.asc_registerCallback('asc_onHideForeignCursorLabel', _.bind(me.onApiHideForeignCursorLabel, me));
-                me.api.asc_registerCallback('asc_onAuthParticipantsChanged',_.bind(me.onApiUsersChanged, me));
-                me.api.asc_registerCallback('asc_onConnectionStateChanged', _.bind(me.onApiUserConnection, me));
-                me.api.asc_registerCallback('asc_onDocumentContentReady',   _.bind(me.onApiDocumentContentReady, me));
-                Common.NotificationCenter.on('api:disconnect',              _.bind(me.onCoAuthoringDisconnect, me));
-                me.api.asc_registerCallback('asc_onCoAuthoringDisconnect',  _.bind(me.onCoAuthoringDisconnect,me));
-                me.api.asc_registerCallback('asc_onShowRevisionsChange',    _.bind(me.onApiShowChange, me));
-                me.api.asc_registerCallback('asc_onShowComment',            _.bind(me.onApiShowComment, me));
-                me.api.asc_registerCallback('asc_onHideComment',            _.bind(me.onApiHideComment, me));
-                me.api.asc_coAuthoringGetUsers();
-            },
-
-            setMode: function (mode) {
-                _isEdit = mode.isEdit;
-                _isRestrictedEdit = mode.isRestrictedEdit;
-                _canReview = mode.canReview;
-                _canViewComments = mode.canViewComments;
-                _canFillForms = mode.canFillForms;
-                if (_isEdit || _isRestrictedEdit && _canFillForms) {
-                    this.api && this.api.asc_registerCallback('asc_onShowContentControlsActions',_.bind(this.onShowContentControlsActions, this));
-                    this.api && this.api.asc_registerCallback('asc_onHideContentControlsActions',_.bind(this.onHideContentControlsActions, this));
-                }
-            },
-
-            // When our application is ready, lets get started
-            onLaunch: function() {
-                var me = this;
-
-                _view = me.createView('DocumentHolder').render();
-
-                $$(window).on('resize', _.bind(me.onEditorResize, me));
-            },
-
-            // Handlers
-
-            onContextMenuClick: function (view, eventName) {
-                var me = this;
-
-                if ('cut' == eventName) {
-                    var res = me.api.Cut();
-                    if (!res) {
-                        _view.hideMenu();
-                        if (!Common.localStorage.getBool("de-hide-copy-cut-paste-warning")) {
-                            uiApp.modal({
-                                title: me.textCopyCutPasteActions,
-                                text: me.errorCopyCutPaste,
-                                afterText: '<label class="label-checkbox item-content no-ripple">' +
-                                    '<input type="checkbox" name="checkbox-show-cut">' +
-                                    '<div class="item-media" style="margin-top: 10px; display: flex; align-items: center;">' +
-                                    '<i class="icon icon-form-checkbox"></i><span style="margin-left: 10px;">' + me.textDoNotShowAgain + '</span>' +
-                                    '</div>' +
-                                    '</label>',
-                                buttons: [{
-                                    text: 'OK',
-                                    onClick: function () {
-                                        var dontshow = $('input[name="checkbox-show-cut"]').prop('checked');
-                                        if (dontshow) Common.localStorage.setItem("de-hide-copy-cut-paste-warning", 1);
-                                    }
-                                }]
-                            });
-                        }
-                    }
-                } else if ('copy' == eventName) {
-                    var res = me.api.Copy();
-                    if (!res) {
-                        _view.hideMenu();
-                        if (!Common.localStorage.getBool("de-hide-copy-cut-paste-warning")) {
-                            uiApp.modal({
-                                title: me.textCopyCutPasteActions,
-                                text: me.errorCopyCutPaste,
-                                afterText: '<label class="label-checkbox item-content no-ripple">' +
-                                    '<input type="checkbox" name="checkbox-show-copy">' +
-                                    '<div class="item-media" style="margin-top: 10px; display: flex; align-items: center;">' +
-                                    '<i class="icon icon-form-checkbox"></i><span style="margin-left: 10px;">' + me.textDoNotShowAgain + '</span>' +
-                                    '</div>' +
-                                    '</label>',
-                                buttons: [{
-                                    text: 'OK',
-                                    onClick: function () {
-                                        var dontshow = $('input[name="checkbox-show-copy"]').prop('checked');
-                                        if (dontshow) Common.localStorage.setItem("de-hide-copy-cut-paste-warning", 1);
-                                    }
-                                }]
-                            });
-                        }
-                    }
-                } else if ('paste' == eventName) {
-                    var res = me.api.Paste();
-                    if (!res) {
-                        _view.hideMenu();
-                        if (!Common.localStorage.getBool("de-hide-copy-cut-paste-warning")) {
-                            uiApp.modal({
-                                title: me.textCopyCutPasteActions,
-                                text: me.errorCopyCutPaste,
-                                afterText: '<label class="label-checkbox item-content no-ripple">' +
-                                    '<input type="checkbox" name="checkbox-show-paste">' +
-                                    '<div class="item-media" style="margin-top: 10px; display: flex; align-items: center;">' +
-                                    '<i class="icon icon-form-checkbox"></i><span style="margin-left: 10px;">' + me.textDoNotShowAgain + '</span>' +
-                                    '</div>' +
-                                    '</label>',
-                                buttons: [{
-                                    text: 'OK',
-                                    onClick: function () {
-                                        var dontshow = $('input[name="checkbox-show-paste"]').prop('checked');
-                                        if (dontshow) Common.localStorage.setItem("de-hide-copy-cut-paste-warning", 1);
-                                    }
-                                }]
-                            });
-                        }
-                    }
-                } else if ('merge' == eventName) {
-                    me.api.MergeCells();
-                } else if ('split' == eventName) {
-                    _view.hideMenu();
-                    me.showSplitModal();
-                } else if ('delete' == eventName) {
-                    me.api.asc_Remove();
-                } else if('deletetable' == eventName) {
-                    me.api.remTable();
-                } else if ('edit' == eventName) {
-                    _view.hideMenu();
-
-                    DE.getController('EditContainer').showModal();
-                } else if ('addlink' == eventName) {
-                    _view.hideMenu();
-
-                    DE.getController('AddContainer').showModal();
-                    DE.getController('AddOther').getView('AddOther').showLink(false);
-                } else if ('openlink' == eventName) {
-                    _.some(_stack, function (item) {
-                        if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
-                            me._openLink(item.get_ObjectValue().get_Value());
-                            return true;
-                        }
-                    });
-                } else if ('review' == eventName) {
-                    var getCollaboration = DE.getController('Common.Controllers.Collaboration');
-                    getCollaboration.showModal();
-                    getCollaboration.getView('Common.Views.Collaboration').showPage('#reviewing-settings-view', false);
-                } else if('reviewchange' == eventName) {
-                    var getCollaboration = DE.getController('Common.Controllers.Collaboration');
-                    getCollaboration.showModal();
-                    getCollaboration.getView('Common.Views.Collaboration').showPage('#reviewing-settings-view', false);
-                    getCollaboration.getView('Common.Views.Collaboration').showPage('#change-view', false);
-                } else if ('viewcomment' == eventName) {
-                    var getCollaboration = DE.getController('Common.Controllers.Collaboration');
-                    getCollaboration.showCommentModal();
-                } else if ('addcomment' == eventName) {
-                    _view.hideMenu();
-                    DE.getController('AddContainer').showModal();
-                    DE.getController('AddOther').getView('AddOther').showPageComment(false);
-                } else if ('showActionSheet' == eventName && _actionSheets.length > 0) {
-                    _.delay(function () {
-                        _.each(_actionSheets, function (action) {
-                            action.text = action.caption;
-                            action.onClick = function () {
-                                me.onContextMenuClick(null, action.event)
-                            }
-                        });
-
-                        uiApp.actions([_actionSheets, [
-                            {
-                                text: me.sheetCancel,
-                                bold: true
-                            }
-                        ]]);
-                    }, 100);
-                }
-
-                _view.hideMenu();
-            },
-
-            showSplitModal: function() {
-                var me = this,
-                    picker;
-                uiApp.modal({
-                    title   : me.menuSplit,
-                    text: '',
-                    afterText:
-                        '<div class="content-block">' +
-                        '<div class="row no-gutter" style="text-align: center;">' +
-                        '<div class="col-50 size-columns">' + me.textColumns + '</div>' +
-                        '<div class="col-50 size-rows">' + me.textRows + '</div>' +
-                        '</div>' +
-                        '<div id="picker-split-size"></div>' +
-                        '</div>',
-                    buttons: [
-                        {
-                            text: me.textCancel
-                        },
-                        {
-                            text: 'OK',
-                            bold: true,
-                            onClick: function () {
-                                var size = picker.value;
-                                if (me.api) {
-                                    me.api.SplitCell(parseInt(size[0]), parseInt(size[1]));
-                                }
-                            }
-                        }
-                    ]
-                });
-
-                picker = uiApp.picker({
-                    container: '#picker-split-size',
-                    toolbar: false,
-                    rotateEffect: true,
-                    value: [3, 3],
-                    cols: [{
-                        textAlign: 'center',
-                        width: '100%',
-                        values: [1,2,3,4,5,6,7,8,9,10]
-                    }, {
-                        textAlign: 'center',
-                        width: '100%',
-                        values: [1,2,3,4,5,6,7,8,9,10]
-                    }]
-                });
-
-            },
-
-            // API Handlers
-
-            onEditorResize: function(cmp) {
-                // Hide context menu
-            },
-
-            onApiShowPopMenu: function(posX, posY) {
-                if ($('.popover.settings, .popup.settings, .picker-modal.settings, .modal.modal-in, .actions-modal').length > 0) {
-                    return;
-                }
-                var now = (new Date).getTime();
-                if (now - _timer < 1000) return;
-                _timer = 0;
-
-                _menuPos = [posX, posY];
-
-                var me = this,
-                    items;
-
-                _stack = me.api.getSelectedElements();
-                items = me._initMenu(_stack);
-
-                _view.showMenu(items, posX, posY);
-            },
-
-            onApiHidePopMenu: function() {
-                var now = (new Date).getTime();
-                if (now - _timer < 1000) return;
-                _view && _view.hideMenu();
-            },
-
-            onApiShowForeignCursorLabel: function(userId, X, Y, color) {
-                var me = this,
-                    tipHeight = 20;
-
-                var getUserName = function(id) {
-                    var usersStore = DE.getCollection('Common.Collections.Users');
-
-                    if (usersStore){
-                        var rec = usersStore.findUser(id);
-                        if (rec)
-                            return AscCommon.UserInfoParser.getParsedName(rec.get('username'));
-                    }
-                    return me.textGuest;
-                };
-
-                /** coauthoring begin **/
-                var src = _.find(_fastCoAuthTips, function(tip){ return tip.attr('userid') == userId; });
-
-                if (!src) {
-                    src = $(document.createElement('div'));
-                    src.addClass('username-tip');
-                    src.attr('userid', userId);
-                    src.css({
-                        height: tipHeight + 'px',
-                        position: 'absolute',
-                        zIndex: '900',
-                        display: 'none',
-                        'pointer-events': 'none',
-                        'background-color': '#' + Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b())});
-                    src.text(getUserName(userId));
-                    $('#id_main_view').append(src);
-
-                    _fastCoAuthTips.push(src);
-
-                    src.fadeIn(150);
-                }
-                src.css({
-                    top: (Y - tipHeight) + 'px',
-                    left: X + 'px'});
-                /** coauthoring end **/
-            },
-
-            onApiHideForeignCursorLabel: function(userId) {
-                /** coauthoring begin **/
-                for (var i=0; i<_fastCoAuthTips.length; i++) {
-                    if (_fastCoAuthTips[i].attr('userid') == userId) {
-                        var src = _fastCoAuthTips[i];
-                        _fastCoAuthTips[i].fadeOut(150, function(){src.remove()});
-                        _fastCoAuthTips.splice(i, 1);
-                        break;
-                    }
-                }
-                /** coauthoring end **/
-            },
-
-            onApiUsersChanged: function(users){
-                var usersStore = this.getApplication().getCollection('Common.Collections.Users');
-
-                if (usersStore) {
-                    var arrUsers = [], name, user;
-
-                    for (name in users) {
-                        if (undefined !== name) {
-                            user = users[name];
-                            if (user) {
-                                arrUsers.push(new Common.Models.User({
-                                    id          : user.asc_getId(),
-                                    username    : user.asc_getUserName(),
-                                    online      : true,
-                                    color       : user.asc_getColor(),
-                                    view        : user.asc_getView()
-                                }));
-                            }
-                        }
-                    }
-
-                    usersStore[usersStore.size() > 0 ? 'add' : 'reset'](arrUsers);
-                }
-            },
-
-            onApiUserConnection: function(change){
-                var usersStore = this.getApplication().getCollection('Common.Collections.Users');
-
-                if (usersStore){
-                    var user = usersStore.findUser(change.asc_getId());
-                    if (!user) {
-                        usersStore.add(new Common.Models.User({
-                            id          : change.asc_getId(),
-                            username    : change.asc_getUserName(),
-                            online      : change.asc_getState(),
-                            color       : change.asc_getColor(),
-                            view        : change.asc_getView()
-                        }));
-                    } else {
-                        user.set({online: change.asc_getState()});
-                        user.set({username: change.asc_getUserName()});
-                    }
-                }
-            },
-
-            onApiDocumentContentReady: function () {
-                _view = this.createView('DocumentHolder').render();
-            },
-
-            onApiShowChange: function(sdkchange) {
-                _inRevisionChange = sdkchange && sdkchange.length>0;
-            },
-
-            onApiShowComment: function(comments) {
-                _isComments = false;
-                if (comments && comments.length > 0) {
-                    for (var i = 0; i < comments.length; ++i) {
-                        if (this.getApplication().getController('Common.Controllers.Collaboration').findVisibleComment(comments[i])) {
-                            _isComments = true;
-                            break;
-                        }
-                    }
-                }
-            },
-
-            onApiHideComment: function() {
-                _isComments = false;
-            },
-
-            onShowContentControlsActions: function(obj, x, y) {
-                var type = obj.type;
-                if (type==Asc.c_oAscContentControlSpecificType.Picture) {
-                    if (obj.pr && obj.pr.get_Lock) {
-                        var lock = obj.pr.get_Lock();
-                        if (lock == Asc.c_oAscSdtLockType.SdtContentLocked || lock==Asc.c_oAscSdtLockType.ContentLocked)
-                            return;
-                    }
-                    this.api.asc_addImage(obj);
-                }
-            },
-
-            onHideContentControlsActions: function() {
-            },
-
-            // Internal
-
-            _openLink: function(url) {
-                if (this.api.asc_getUrlType(url) > 0) {
-                    var newDocumentPage = window.open(url, '_blank');
-
-                    if (newDocumentPage) {
-                        newDocumentPage.focus();
-                    }
-                }
-            },
-
-            _initMenu: function (stack) {
-                var me = this,
-                    arrItems = [],
-                    arrItemsIcon = [],
-                    canCopy = me.api.can_CopyCut();
-
-                _actionSheets = [];
-
-                if (canCopy) {
-                    arrItemsIcon.push({
-                        caption: me.menuCopy,
-                        event: 'copy',
-                        icon: 'icon-copy'
-                    });
-                }
-                if (_canViewComments && _isComments && !_isEdit) {
-                    arrItems.push({
-                        caption: me.menuViewComment,
-                        event: 'viewcomment'
-                    });
-                }
-
-                var isText = false,
-                    isTable = false,
-                    isImage = false,
-                    isChart = false,
-                    isShape = false,
-                    isLink = false,
-                    lockedText = false,
-                    lockedTable = false,
-                    lockedImage = false,
-                    lockedHeader = false;
-
-                _.each(stack, function (item) {
-                    var objectType = item.get_ObjectType(),
-                        objectValue = item.get_ObjectValue();
-
-                    if (objectType == Asc.c_oAscTypeSelectElement.Header) {
-                        lockedHeader = objectValue.get_Locked();
-                    }
-
-                    if (objectType == Asc.c_oAscTypeSelectElement.Paragraph) {
-                        isText = true;
-                        lockedText = objectValue.get_Locked();
-                    } else if (objectType == Asc.c_oAscTypeSelectElement.Image) {
-                        lockedImage = objectValue.get_Locked();
-                        if (objectValue && objectValue.get_ChartProperties()) {
-                            isChart = true;
-                        } else if (objectType && objectValue.get_ShapeProperties()) {
-                            isShape = true;
-                        } else {
-                            isImage = true;
-                        }
-                    } else if (objectType == Asc.c_oAscTypeSelectElement.Table) {
-                        isTable = true;
-                        lockedTable = objectValue.get_Locked();
-                    } else if (objectType == Asc.c_oAscTypeSelectElement.Hyperlink) {
-                        isLink = true;
-                    }
-                });
-
-                if (stack.length > 0) {
-
-                    var swapItems = function(items, indexBefore, indexAfter) {
-                        items[indexAfter] = items.splice(indexBefore, 1, items[indexAfter])[0];
-                    };
-
-                    if (_isEdit && !me.isDisconnected && !_stateDisplayMode) {
-                        if (!lockedText && !lockedTable && !lockedImage && !lockedHeader && canCopy) {
-                            arrItemsIcon.push({
-                                caption: me.menuCut,
-                                event: 'cut',
-                                icon: 'icon-cut'
-                            });
-
-                            // Swap 'Copy' and 'Cut'
-                            swapItems(arrItemsIcon, 0, 1);
-                        }
-
-                        if (!lockedText && !lockedTable && !lockedImage && !lockedHeader) {
-                            arrItemsIcon.push({
-                                caption: me.menuPaste,
-                                event: 'paste',
-                                icon: 'icon-paste'
-                            });
-                        }
-
-                        if(isTable && me.api.CheckBeforeMergeCells() && !lockedTable && !lockedHeader) {
-                            arrItems.push({
-                                caption: me.menuMerge,
-                                event: 'merge'
-                            });
-                        }
-
-                        if(isTable && me.api.CheckBeforeSplitCells() && !lockedTable && !lockedHeader) {
-                            arrItems.push({
-                                caption: me.menuSplit,
-                                event: 'split'
-                            });
-                        }
-
-                        if(!lockedText && !lockedTable && !lockedImage && !lockedHeader) {
-                            arrItems.push({
-                                caption: me.menuDelete,
-                                event: 'delete'
-                            });
-                        }
-
-                        if(isTable && !lockedTable && !lockedText && !lockedHeader) {
-                            arrItems.push({
-                                caption: me.menuDeleteTable,
-                                event: 'deletetable'
-                            });
-                        }
-
-                        if(!lockedText && !lockedTable && !lockedImage && !lockedHeader){
-                            arrItems.push({
-                                caption: me.menuEdit,
-                                event: 'edit'
-                            });
-                        }
-
-                        if (!_.isEmpty(me.api.can_AddHyperlink()) && !lockedHeader) {
-                            arrItems.push({
-                                caption: me.menuAddLink,
-                                event: 'addlink'
-                            });
-                        }
-
-                        if (_canReview) {
-                            if (_inRevisionChange) {
-                                arrItems.push({
-                                    caption: me.menuReviewChange,
-                                    event: 'reviewchange'
-                                });
-                            } else {
-                                arrItems.push({
-                                    caption: me.menuReview,
-                                    event: 'review'
-                                });
-                            }
-                        }
-
-                        if (_isComments && _canViewComments) {
-                            arrItems.push({
-                                caption: me.menuViewComment,
-                                event: 'viewcomment'
-                            });
-                        }
-
-                        var isObject = isShape || isChart || isImage || isTable;
-                        var hideAddComment = !_canViewComments || me.api.can_AddQuotedComment() === false || lockedText || lockedTable || lockedImage || lockedHeader || (!isText && isObject);
-                        if (!hideAddComment) {
-                            arrItems.push({
-                                caption: me.menuAddComment,
-                                event: 'addcomment'
-                            });
-                        }
-                    }
-                }
-
-                if (isLink) {
-                    arrItems.push({
-                        caption: me.menuOpenLink,
-                        event: 'openlink'
-                    });
-                }
-
-                if (Common.SharedSettings.get('phone') && arrItems.length > 2) {
-                    _actionSheets = arrItems.slice(2);
-
-                    arrItems = arrItems.slice(0, 2);
-                    arrItems.push({
-                        caption: me.menuMore,
-                        event: 'showActionSheet'
-                    });
-                }
-
-                var menuItems = {itemsIcon: arrItemsIcon, items: arrItems};
-
-                return menuItems;
-            },
-
-            onCoAuthoringDisconnect: function() {
-                this.isDisconnected = true;
-            },
-
-            setDisplayMode: function(displayMode) {
-                _stateDisplayMode = displayMode == "final" || displayMode == "original" ? true : false;
-            },
-
-            textGuest: 'Guest',
-            textCancel: 'Cancel',
-            textColumns: 'Columns',
-            textRows: 'Rows',
-            menuCut: 'Cut',
-            menuCopy: 'Copy',
-            menuPaste: 'Paste',
-            menuEdit: 'Edit',
-            menuDelete: 'Delete',
-            menuAddLink: 'Add Link',
-            menuOpenLink: 'Open Link',
-            menuMore: 'More',
-            sheetCancel: 'Cancel',
-            menuReview: 'Review',
-            menuMerge: 'Merge Cells',
-            menuSplit: 'Split Cell',
-            menuDeleteTable: 'Delete Table',
-            menuReviewChange: 'Review Change',
-            menuViewComment: 'View Comment',
-            menuAddComment: 'Add Comment',
-            textCopyCutPasteActions: 'Copy, Cut and Paste Actions',
-            errorCopyCutPaste: 'Copy, cut and paste actions using the context menu will be performed within the current file only.',
-            textDoNotShowAgain: 'Don\'t show again'
-        }
-    })(), DE.Controllers.DocumentHolder || {}))
-});

apps/documenteditor/mobile/app/controller/Editor.js

@@ -1,122 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  Editor.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 9/22/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'core',
-    'documenteditor/mobile/app/view/Editor'
-], function (core) {
-    'use strict';
-
-    DE.Controllers.Editor = Backbone.Controller.extend((function() {
-        // private
-
-        function isPhone() {
-            var ua = navigator.userAgent,
-                isMobile = /Mobile(\/|\s|;)/.test(ua);
-
-            return /(iPhone|iPod)/.test(ua) ||
-                (!/(Silk)/.test(ua) && (/(Android)/.test(ua) && (/(Android 2)/.test(ua) || isMobile))) ||
-                (/(BlackBerry|BB)/.test(ua) && isMobile) ||
-                /(Windows Phone)/.test(ua);
-        }
-
-        function isTablet() {
-            var ua = navigator.userAgent;
-
-            return !isPhone(ua) && (/iPad/.test(ua) || /Android/.test(ua) || /(RIM Tablet OS)/.test(ua) ||
-                (/MSIE 10/.test(ua) && /; Touch/.test(ua)));
-        }
-
-        function isSailfish() {
-            var ua = navigator.userAgent;
-            return /Sailfish/.test(ua) || /Jolla/.test(ua);
-        }
-
-        return {
-            // Specifying a EditorController model
-            models: [],
-
-            // Specifying a collection of out EditorView
-            collections: [],
-
-            // Specifying application views
-            views: [
-                'Editor'   // is main application layout
-            ],
-
-            // When controller is created let's setup view event listeners
-            initialize: function() {
-                // This most important part when we will tell our controller what events should be handled
-            },
-
-            setApi: function(api) {
-                this.api = api;
-            },
-
-            // When our application is ready, lets get started
-            onLaunch: function() {
-                // Device detection
-                var phone = isPhone();
-                // console.debug('Layout profile:', phone ? 'Phone' : 'Tablet');
-
-                if ( isSailfish() ) {
-                    Common.SharedSettings.set('sailfish', true);
-                    $('html').addClass('sailfish');
-                }
-
-                Common.SharedSettings.set('android', Framework7.prototype.device.android);
-                Common.SharedSettings.set('phone', phone);
-
-                $('html').addClass(phone ? 'phone' : 'tablet');
-
-                // Create and render main view
-                this.editorView = this.createView('Editor').render();
-
-                $$(window).on('resize', _.bind(this.onWindowResize, this));
-            },
-
-            onWindowResize: function(e) {
-                this.api && this.api.Resize();
-            }
-        }
-    })());
-});

apps/documenteditor/mobile/app/controller/Search.js

@@ -1,369 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  Search.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 11/15/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-
-define([
-    'core',
-    'jquery',
-    'underscore',
-    'backbone',
-    'documenteditor/mobile/app/view/Search'
-], function (core, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.Search = Backbone.Controller.extend(_.extend((function() {
-        // private
-
-        var _isShow = false,
-            _startPoint = {};
-
-        var pointerEventToXY = function(e){
-            var out = {x:0, y:0};
-            if(e.type == 'touchstart' || e.type == 'touchend'){
-                var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
-                out.x = touch.pageX;
-                out.y = touch.pageY;
-            } else if (e.type == 'mousedown' || e.type == 'mouseup') {
-                out.x = e.pageX;
-                out.y = e.pageY;
-            }
-            return out;
-        };
-
-        function iOSVersion() {
-            var ua = navigator.userAgent.toLowerCase();
-            var isAppleDevices = (ua.indexOf("ipad") > -1 || ua.indexOf("iphone") > -1 || ua.indexOf("ipod") > -1);
-            if (!isAppleDevices && Common.Utils.isSafari && Common.Utils.isMac && (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1))
-                isAppleDevices = true;
-
-            var iosversion = 0;
-            if (isAppleDevices) {
-                iosversion = 13;
-                try
-                {
-                    var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
-                    if (!v) v = (navigator.appVersion).match(/Version\/(\d+).(\d+)/);
-                    iosversion = parseInt(v[1], 10);
-                }
-                catch (err) {}
-            }
-            return iosversion;
-        }
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'Search'
-            ],
-
-            initialize: function() {
-                this.addListeners({
-                    'Search': {
-                        'searchbar:show'        : this.onSearchbarShow,
-                        'searchbar:hide'        : this.onSearchbarHide,
-                        'searchbar:render'      : this.onSearchbarRender,
-                        'searchbar:showsettings': this.onSearchbarSettings
-                    }
-                });
-            },
-
-            setApi: function(api) {
-                this.api = api;
-            },
-
-            setMode: function (mode) {
-                this.getView('Search').setMode(mode);
-            },
-
-            onLaunch: function() {
-                var me = this;
-                me.createView('Search').render();
-
-                if (iOSVersion()<13) {
-                    $('#editor_sdk').single('mousedown touchstart', _.bind(me.onEditorTouchStart, me));
-                    $('#editor_sdk').single('mouseup touchend',     _.bind(me.onEditorTouchEnd, me));
-                } else {
-                    $('#editor_sdk').single('pointerdown', _.bind(me.onEditorTouchStart, me));
-                    $('#editor_sdk').single('pointerup',     _.bind(me.onEditorTouchEnd, me));
-                }
-
-                Common.NotificationCenter.on('readermode:change', function (reader) {
-                    _startPoint = {};
-                });
-            },
-
-            showSearch: function () {
-                this.getView('Search').showSearch();
-            },
-
-            hideSearch: function () {
-                this.getView('Search').hideSearch();
-            },
-
-            // Handlers
-
-            onEditorTouchStart: function (e) {
-                _startPoint = pointerEventToXY(e);
-            },
-
-            onEditorTouchEnd: function (e) {
-                var _endPoint = pointerEventToXY(e);
-
-                if (_isShow) {
-                    var distance = (_startPoint.x===undefined || _startPoint.y===undefined) ? 0 :
-                                    Math.sqrt((_endPoint.x -= _startPoint.x) * _endPoint.x + (_endPoint.y -= _startPoint.y) * _endPoint.y);
-
-                    if (distance < 1) {
-                        this.hideSearch();
-                    }
-                }
-            },
-
-            onSearchbarRender: function(bar) {
-                var me              = this,
-                    searchString    = Common.SharedSettings.get('search-search') || '',
-                    replaceString   = Common.SharedSettings.get('search-replace')|| '';
-
-                me.searchBar = uiApp.searchbar('.searchbar.document .searchbar.search', {
-                    customSearch: true,
-                    onSearch    : _.bind(me.onSearchChange, me),
-                    onEnable    : _.bind(me.onSearchEnable, me),
-                    onClear     : _.bind(me.onSearchClear, me)
-                });
-
-                me.replaceBar = uiApp.searchbar('.searchbar.document .searchbar.replace', {
-                    customSearch: true,
-                    onSearch    : _.bind(me.onReplaceChange, me),
-                    onEnable    : _.bind(me.onReplaceEnable, me),
-                    onClear     : _.bind(me.onReplaceClear, me)
-                });
-
-                me.searchPrev = $('.searchbar.document .prev');
-                me.searchNext = $('.searchbar.document .next');
-                me.replaceBtn = $('.searchbar.document .link.replace');
-
-                me.searchPrev.single('click', _.bind(me.onSearchPrev, me));
-                me.searchNext.single('click', _.bind(me.onSearchNext, me));
-                me.replaceBtn.single('click', _.bind(me.onReplace, me));
-
-                $$('.searchbar.document .link.replace').on('taphold', _.bind(me.onReplaceAll, me));
-
-                me.searchBar.search(searchString);
-                me.replaceBar.search(replaceString);
-            },
-
-            onSearchbarSettings: function (view) {
-                var strictBool = function (settingName) {
-                    var value = Common.SharedSettings.get(settingName);
-                    return !_.isUndefined(value) && (value === true);
-                };
-
-                var me              = this,
-                    isReplace       = strictBool('search-is-replace'),
-                    isCaseSensitive = strictBool('search-case-sensitive'),
-                    isHighlight     = strictBool('search-highlight'),
-                    $pageSettings   = $('.page[data-page=search-settings]'),
-                    $inputType      = $pageSettings.find('input[name=search-type]'),
-                    $inputCase      = $pageSettings.find('#search-case-sensitive input:checkbox'),
-                    $inputHighlight = $pageSettings.find('#search-highlight-results input:checkbox');
-
-                $inputType.val([isReplace ? 'replace' : 'search']);
-                $inputCase.prop('checked', isCaseSensitive);
-                $inputHighlight.prop('checked', isHighlight);
-
-                // init events
-                $inputType.single('change',      _.bind(me.onTypeChange, me));
-                $inputCase.single('change',      _.bind(me.onCaseClick, me));
-                $inputHighlight.single('change', _.bind(me.onHighlightClick, me));
-            },
-
-            onSearchbarShow: function(bar) {
-                _isShow = true;
-                this.api.asc_selectSearchingResults(Common.SharedSettings.get('search-highlight'));
-            },
-
-            onSearchEnable: function (bar) {
-                this.replaceBar.container.removeClass('searchbar-active');
-            },
-
-            onSearchbarHide: function(bar) {
-                _isShow = false;
-                this.api.asc_selectSearchingResults(false);
-            },
-
-            onSearchChange: function(search) {
-                var me = this,
-                    isEmpty = (search.query.trim().length < 1);
-
-                Common.SharedSettings.set('search-search', search.query);
-
-                _.each([me.searchPrev, me.searchNext, me.replaceBtn], function(btn) {
-                    btn.toggleClass('disabled', isEmpty);
-                });
-            },
-
-            onSearchClear: function(search) {
-                Common.SharedSettings.set('search-search', '');
-//            window.focus();
-//            document.activeElement.blur();
-            },
-
-            onReplaceChange: function(replace) {
-                var me = this,
-                    isEmpty = (replace.query.trim().length < 1);
-
-                Common.SharedSettings.set('search-replace', replace.query);
-            },
-
-            onReplaceEnable: function (bar) {
-                this.searchBar.container.removeClass('searchbar-active');
-            },
-
-            onReplaceClear: function(replace) {
-                Common.SharedSettings.set('search-replace', '');
-            },
-
-            onSearchPrev: function(btn) {
-                this.onQuerySearch(this.searchBar.query, 'back');
-            },
-
-            onSearchNext: function(btn) {
-                this.onQuerySearch(this.searchBar.query, 'next');
-            },
-
-            onReplace: function (btn) {
-                this.onQueryReplace(this.searchBar.query, this.replaceBar.query);
-            },
-
-            onReplaceAll: function (e) {
-                var me = this,
-                    popover = [
-                    '<div class="popover" style="width: auto;">',
-                        '<div class="popover-inner">',
-                            '<div class="list-block">',
-                                '<ul>',
-                                    '<li><a href="#" id="replace-all" class="item-link list-button">{0}</li>'.format(me.textReplaceAll),
-                                '</ul>',
-                            '</div>',
-                        '</div>',
-                    '</div>'
-                    ].join('');
-
-                popover = uiApp.popover(popover, $$(e.currentTarget));
-
-                $('#replace-all').single('click', _.bind(function () {
-                    me.onQueryReplaceAll(this.searchBar.query, this.replaceBar.query);
-                    uiApp.closeModal(popover);
-                }, me))
-            },
-
-            onQuerySearch: function(query, direction) {
-                var matchcase = Common.SharedSettings.get('search-case-sensitive') || false,
-                    matchword = Common.SharedSettings.get('search-highlight') || false;
-
-                if (query && query.length) {
-                    if (!this.api.asc_findText(query, direction != 'back', matchcase, matchword)) {
-                        var me = this;
-                        uiApp.alert(
-                            '',
-                            me.textNoTextFound,
-                            function () {
-                                me.searchBar.input.focus();
-                            }
-                        );
-                    }
-                }
-            },
-
-            onQueryReplace: function(search, replace) {
-                var matchcase = Common.SharedSettings.get('search-case-sensitive') || false,
-                    matchword = Common.SharedSettings.get('search-highlight') || false;
-
-                if (search && search.length) {
-                    if (!this.api.asc_replaceText(search, replace || '', false, matchcase, matchword)) {
-                        var me = this;
-                        uiApp.alert(
-                            '',
-                            me.textNoTextFound,
-                            function () {
-                                me.searchBar.input.focus();
-                            }
-                        );
-                    }
-                }
-            },
-
-            onQueryReplaceAll: function(search, replace) {
-                var matchcase = Common.SharedSettings.get('search-case-sensitive') || false,
-                    matchword = Common.SharedSettings.get('search-highlight') || false;
-
-                if (search && search.length) {
-                    this.api.asc_replaceText(search, replace || '', true, matchcase, matchword);
-                }
-            },
-
-            onTypeChange: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    isReplace = ($target.val() === 'replace');
-
-                Common.SharedSettings.set('search-is-replace', isReplace);
-                $('.searchbar.document').toggleClass('replace', isReplace);
-            },
-
-            onCaseClick: function (e) {
-                Common.SharedSettings.set('search-case-sensitive', $(e.currentTarget).is(':checked'));
-            },
-
-            onHighlightClick: function (e) {
-                Common.SharedSettings.set('search-highlight', $(e.currentTarget).is(':checked'));
-                this.api.asc_selectSearchingResults(Common.SharedSettings.get('search-highlight'));
-            },
-
-            // API handlers
-
-            textNoTextFound: 'Text not found',
-            textReplaceAll: 'Replace All'
-        }
-    })(), DE.Controllers.Search || {}))
-});

apps/documenteditor/mobile/app/controller/Settings.js

@@ -1,793 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  Settings.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/7/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-
-define([
-    'core',
-    'jquery',
-    'underscore',
-    'backbone',
-    'documenteditor/mobile/app/view/Settings',
-    'common/mobile/lib/controller/Collaboration'
-], function (core, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.Settings = Backbone.Controller.extend(_.extend((function() {
-        // private
-        var rootView,
-            inProgress,
-            infoObj,
-            modalView,
-            _isPortrait = false,
-            _pageSizesIndex = 0,
-            _pageSizesCurrent = [0, 0],
-            txtCm = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.cm),
-            _pageSizes = [
-                { caption: 'US Letter',             subtitle: Common.Utils.String.format('21,59{0} x 27,94{0}', txtCm),  value: [215.9, 279.4] },
-                { caption: 'US Legal',              subtitle: Common.Utils.String.format('21,59{0} x 35,56{0}', txtCm),  value: [215.9, 355.6] },
-                { caption: 'A4',                    subtitle: Common.Utils.String.format('21{0} x 29,7{0}', txtCm),      value: [210, 297] },
-                { caption: 'A5',                    subtitle: Common.Utils.String.format('14,8{0} x 21{0}', txtCm),  value: [148, 210] },
-                { caption: 'B5',                    subtitle: Common.Utils.String.format('17,6{0} x 25{0}', txtCm),   value: [176, 250] },
-                { caption: 'Envelope #10',          subtitle: Common.Utils.String.format('10,48{0} x 24,13{0}', txtCm),  value: [104.8, 241.3] },
-                { caption: 'Envelope DL',           subtitle: Common.Utils.String.format('11{0} x 22{0}', txtCm),  value: [110, 220] },
-                { caption: 'Tabloid',               subtitle: Common.Utils.String.format('27,94{0} x 43,18{0}', txtCm),  value: [279.4, 431.8] },
-                { caption: 'A3',                    subtitle: Common.Utils.String.format('29,7{0} x 42{0}', txtCm),   value: [297, 420] },
-                { caption: 'Tabloid Oversize',      subtitle: Common.Utils.String.format('30,48{0} x 45,71{0}', txtCm),  value: [304.8, 457.1] },
-                { caption: 'ROC 16K',               subtitle: Common.Utils.String.format('19,68{0} x 27,3{0}', txtCm),   value: [196.8, 273] },
-                { caption: 'Envelope Choukei 3',    subtitle: Common.Utils.String.format('11,99{0} x 23,49{0}', txtCm),  value: [119.9, 234.9] },
-                { caption: 'Super B/A3',            subtitle: Common.Utils.String.format('33,02{0} x 48,25{0}', txtCm),  value: [330.2, 482.5] },
-                { caption: 'A0',                    subtitle: Common.Utils.String.format('84,1{0} x 118,9{0}', txtCm),   value: [841, 1189] },
-                { caption: 'A1',                    subtitle: Common.Utils.String.format('59,4{0} x 84,1{0}', txtCm),    value: [594, 841] },
-                { caption: 'A2',                    subtitle: Common.Utils.String.format('42{0} x 59,4{0}', txtCm),      value: [420, 594] },
-                { caption: 'A6',                    subtitle: Common.Utils.String.format('10,5{0} x 14,8{0}', txtCm),    value: [105, 148] }
-            ],
-            _licInfo,
-            _canReview = false,
-            _isReviewOnly = false,
-            _fileKey,
-            _metricText = Common.Utils.Metric.getCurrentMetricName(),
-            _isEdit,
-            _lang;
-
-        var mm2Cm = function(mm) {
-            return parseFloat((mm/10.).toFixed(2));
-        };
-
-        var cm2Mm = function(cm) {
-            return cm * 10.;
-        };
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'Settings'
-            ],
-
-            initialize: function () {
-                var me = this;
-
-                Common.SharedSettings.set('readerMode', false);
-                Common.NotificationCenter.on('settingscontainer:show', _.bind(this.initEvents, this));
-
-                me.maxMarginsW = me.maxMarginsH = 0;
-                me.localSectionProps = null;
-                
-                me.addListeners({
-                    'Settings': {
-                        'page:show' : me.onPageShow
-                    }
-                });
-
-                uiApp.onPageAfterBack('margin-view', function (page) {
-                    me.applyPageMarginsIfNeed()
-                });
-            },
-
-            setApi: function (api) {
-                var me = this;
-                me.api = api;
-
-                me.api.asc_registerCallback('asc_onGetDocInfoStart',    _.bind(me.onApiGetDocInfoStart, me));
-                me.api.asc_registerCallback('asc_onGetDocInfoStop',     _.bind(me.onApiGetDocInfoEnd, me));
-                me.api.asc_registerCallback('asc_onDocInfo',            _.bind(me.onApiDocInfo, me));
-                me.api.asc_registerCallback('asc_onGetDocInfoEnd',      _.bind(me.onApiGetDocInfoEnd, me));
-                me.api.asc_registerCallback('asc_onDocumentName',       _.bind(me.onApiDocumentName, me));
-                me.api.asc_registerCallback('asc_onDocSize',            _.bind(me.onApiPageSize, me));
-                me.api.asc_registerCallback('asc_onPageOrient',         _.bind(me.onApiPageOrient, me));
-                me.api.asc_registerCallback('asc_onSendThemeColorSchemes', _.bind(me.onSendThemeColorSchemes, me));
-            },
-
-            onLaunch: function () {
-                this.createView('Settings').render();
-            },
-
-            setMode: function (mode) {
-                this.getView('Settings').setMode(mode);
-                if (mode.isDisconnected) {
-                    _canReview = _isReviewOnly = _isEdit = false;
-                } else {
-                    if (mode.canBranding)
-                        _licInfo = mode.customization;
-                    _canReview = mode.canReview;
-                    _isReviewOnly = mode.isReviewOnly;
-                    _fileKey = mode.fileKey;
-                    _isEdit = mode.isEdit;
-                    _lang = mode.lang;
-                }
-            },
-
-            initEvents: function () {
-            },
-
-            rootView : function() {
-                return rootView;
-            },
-
-            showModal: function() {
-                uiApp.closeModal();
-
-                if (Common.SharedSettings.get('phone')) {
-                    modalView = uiApp.popup(
-                        '<div class="popup settings container-settings">' +
-                            '<div class="content-block">' +
-                                '<div class="view settings-root-view navbar-through">' +
-                                    this.getView('Settings').rootLayout() +
-                                '</div>' +
-                            '</div>' +
-                        '</div>'
-                    );
-                } else {
-                    modalView = uiApp.popover(
-                        '<div class="popover settings container-settings">' +
-                            '<div class="popover-angle"></div>' +
-                            '<div class="popover-inner">' +
-                                '<div class="content-block">' +
-                                    '<div class="view popover-view settings-root-view navbar-through">' +
-                                        this.getView('Settings').rootLayout() +
-                                    '</div>' +
-                                '</div>' +
-                            '</div>' +
-                        '</div>',
-                        $$('#toolbar-settings')
-                    );
-                }
-
-                if (Framework7.prototype.device.android === true) {
-                    $$('.view.settings-root-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
-                    $$('.view.settings-root-view .navbar').prependTo('.view.settings-root-view > .pages > .page');
-                }
-
-                rootView = uiApp.addView('.settings-root-view', {
-                    dynamicNavbar: true,
-                    domCache: true
-                });
-
-                Common.NotificationCenter.trigger('settingscontainer:show');
-                this.onPageShow(this.getView('Settings'));
-            },
-
-            hideModal: function() {
-                if (modalView) {
-                    uiApp.closeModal(modalView);
-                }
-            },
-
-            onPageShow: function(view, pageId) {
-                var me = this;
-
-                if ('#settings-document-view' == pageId) {
-                    me.initPageDocumentSettings();
-                    Common.Utils.addScrollIfNeed('.page[data-page=settings-document-view]', '.page[data-page=settings-document-view] .page-content');
-                } else if ('#settings-document-formats-view' == pageId) {
-                    me.getView('Settings').renderPageSizes(_pageSizes, _pageSizesIndex);
-                    $('.page[data-page=settings-document-formats-view] input:radio[name=document-format]').single('change', _.bind(me.onFormatChange, me));
-                    Common.Utils.addScrollIfNeed('.page[data-page=settings-document-formats-view]', '.page[data-page=settings-document-formats-view] .page-content');
-                } else if ('#settings-download-view' == pageId) {
-                    $(modalView).find('.formats a').single('click', _.bind(me.onSaveFormat, me));
-                    Common.Utils.addScrollIfNeed('.page[data-page=settings-download-view]', '.page[data-page=settings-download-view] .page-content');
-                } else if ('#settings-info-view' == pageId) {
-                    me.initPageInfo();
-                    Common.Utils.addScrollIfNeed('.page[data-page=settings-info-view]', '.page[data-page=settings-info-view] .page-content');
-                } else if ('#settings-about-view' == pageId) {
-                    // About
-                    me.setLicInfo(_licInfo);
-                    Common.Utils.addScrollIfNeed('.page[data-page=settings-about-view]', '.page[data-page=settings-about-view] .page-content');
-                } else if ('#settings-advanced-view' == pageId) {
-                    me.initPageAdvancedSettings();
-                    $('#settings-spellcheck input:checkbox').attr('checked', Common.Utils.InternalSettings.get("de-mobile-spellcheck"));
-                    $('#settings-spellcheck input:checkbox').single('change',   _.bind(me.onSpellcheck, me));
-                    $('#settings-no-characters input:checkbox').attr('checked', Common.localStorage.getItem("de-mobile-no-characters") === 'true');
-                    $('#settings-no-characters input:checkbox').single('change',   _.bind(me.onNoCharacters, me));
-                    var value = Common.localStorage.getItem("de-mobile-hidden-borders");
-                    $('#settings-hidden-borders input:checkbox').attr('checked', value===null || value==='true');
-                    $('#settings-hidden-borders input:checkbox').single('change',   _.bind(me.onShowTableEmptyLine, me));
-                    $('#settings-orthography').single('click',                  _.bind(me.onOrthographyCheck, me));
-                    var displayComments = Common.localStorage.getBool("de-mobile-settings-livecomment", true);
-                    $('#settings-display-comments input:checkbox').attr('checked', displayComments);
-                    $('#settings-display-comments input:checkbox').single('change',   _.bind(me.onChangeDisplayComments, me));
-                    var displayResolved = Common.localStorage.getBool("de-settings-resolvedcomment", true);
-                    if (!displayComments) {
-                        $("#settings-display-resolved").addClass("disabled");
-                        displayResolved = false;
-                    }
-                    $('#settings-display-resolved input:checkbox').attr('checked', displayResolved);
-                    $('#settings-display-resolved input:checkbox').single('change',   _.bind(me.onChangeDisplayResolved, me));
-                    Common.Utils.addScrollIfNeed('.page[data-page=settings-advanced-view]', '.page[data-page=settings-advanced-view] .page-content');
-                } else if ('#color-schemes-view' == pageId) {
-                    me.initPageColorSchemes();
-                    Common.Utils.addScrollIfNeed('.page[data-page=color-schemes-view]', '.page[data-page=color-schemes-view] .page-content');
-                } else if ('#margins-view' == pageId) {
-                    me.initPageMargin();
-                    Common.Utils.addScrollIfNeed('.page[data-page=margin-view]', '.page[data-page=margin-view] .page-content');
-                } else if ('#macros-settings-view' == pageId) {
-                    me.initPageMacrosSettings();
-                    Common.Utils.addScrollIfNeed('.page[data-page=macros-settings-view]', '.page[data-page=macros-settings-view] .page-content');
-                } else {
-                    $('#settings-readermode input:checkbox').attr('checked', Common.SharedSettings.get('readerMode'));
-                    $('#settings-search').single('click',                       _.bind(me.onSearch, me));
-                    $('#settings-readermode input:checkbox').single('change',   _.bind(me.onReaderMode, me));
-                    $('#settings-help').single('click',                         _.bind(me.onShowHelp, me));
-                    $('#settings-download').single('click',                     _.bind(me.onDownloadOrigin, me));
-                    $('#settings-print').single('click',                        _.bind(me.onPrint, me));
-                    $('#settings-collaboration').single('click',                _.bind(me.clickCollaboration, me));
-                    var _stateDisplayMode = DE.getController('Common.Controllers.Collaboration').getDisplayMode();
-                    if(_stateDisplayMode == "final" || _stateDisplayMode == "original") {
-                        $('#settings-document').addClass('disabled');
-                    }
-                    DE.getController('Toolbar').getDisplayCollaboration() && $('#settings-collaboration').show();
-                }
-            },
-
-            initPageMacrosSettings: function() {
-                var me = this,
-                    $pageMacrosSettings = $('.page[data-page="macros-settings-view"] input:radio[name=macros-settings]'),
-                    value = Common.Utils.InternalSettings.get("de-mobile-macros-mode") || 0;
-                $pageMacrosSettings.single('change', _.bind(me.onChangeMacrosSettings, me));
-                $pageMacrosSettings.val([value]);
-            },
-
-            onChangeMacrosSettings: function(e) {
-                var value = parseInt($(e.currentTarget).val());
-                Common.Utils.InternalSettings.set("de-mobile-macros-mode", value);
-                Common.localStorage.setItem("de-mobile-macros-mode", value);
-            },
-
-            onChangeDisplayComments: function(e) {
-                var displayComments = $(e.currentTarget).is(':checked');
-                if (!displayComments) {
-                    this.api.asc_hideComments();
-                    $("#settings-display-resolved input").prop( "checked", false );
-                    Common.localStorage.setBool("de-settings-resolvedcomment", false);
-                    $("#settings-display-resolved").addClass("disabled");
-                } else {
-                    var resolved = Common.localStorage.getBool("de-settings-resolvedcomment");
-                    this.api.asc_showComments(resolved);
-                    $("#settings-display-resolved").removeClass("disabled");
-                }
-                Common.localStorage.setBool("de-mobile-settings-livecomment", displayComments);
-            },
-
-            onChangeDisplayResolved: function(e) {
-                var displayComments = Common.localStorage.getBool("de-mobile-settings-livecomment");
-                if (displayComments) {
-                    var resolved = $(e.currentTarget).is(':checked');
-                    if (this.api) {
-                        this.api.asc_showComments(resolved);
-                    }
-                    Common.localStorage.setBool("de-settings-resolvedcomment", resolved);
-                }
-            },
-
-            clickCollaboration: function() {
-                DE.getController('Common.Controllers.Collaboration').showModal();
-            },
-
-            onNoCharacters: function(e) {
-                var me = this;
-                var $checkbox = $(e.currentTarget),
-                    state = $checkbox.is(':checked');
-                Common.localStorage.setItem("de-mobile-no-characters", state);
-                me.api.put_ShowParaMarks(state);
-            },
-
-            onShowTableEmptyLine: function(e) {
-                var me = this,
-                    $checkbox = $(e.currentTarget),
-                    state = $checkbox.is(':checked');
-                Common.localStorage.setItem("de-mobile-hidden-borders", state);
-                me.api.put_ShowTableEmptyLine(state);
-            },
-
-            initPageMargin: function() {
-                var me = this;
-                _metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
-
-                // Init page margins
-                me.localSectionProps = me.api.asc_GetSectionProps();
-
-                if (me.localSectionProps) {
-                    me.maxMarginsH = me.localSectionProps.get_H() - 2.6;
-                    me.maxMarginsW = me.localSectionProps.get_W() - 12.7;
-
-                    var top = parseFloat(Common.Utils.Metric.fnRecalcFromMM(me.localSectionProps.get_TopMargin()).toFixed(2)),
-                        bottom = parseFloat(Common.Utils.Metric.fnRecalcFromMM(me.localSectionProps.get_BottomMargin()).toFixed(2)),
-                        left = parseFloat(Common.Utils.Metric.fnRecalcFromMM(me.localSectionProps.get_LeftMargin()).toFixed(2)),
-                        right = parseFloat(Common.Utils.Metric.fnRecalcFromMM(me.localSectionProps.get_RightMargin()).toFixed(2));
-
-                    $('#document-margin-top .item-after label').text(top + ' ' + _metricText);
-                    $('#document-margin-bottom .item-after label').text(bottom + ' ' + _metricText);
-                    $('#document-margin-left .item-after label').text(left + ' ' + _metricText);
-                    $('#document-margin-right .item-after label').text(right + ' ' + _metricText);
-                }
-
-                _.each(["top", "left", "bottom", "right"], function(align) {
-                    $(Common.Utils.String.format('#document-margin-{0} .button', align)).single('click', _.bind(me.onPageMarginsChange, me, align));
-                })
-            },
-
-            initPageColorSchemes: function() {
-                this.curSchemas = (this.api) ? this.api.asc_GetCurrentColorSchemeIndex() : 0;
-                this.getView('Settings').renderSchemaSettings(this.curSchemas, this.schemas);
-                $('.page[data-page=color-schemes-view] input:radio[name=color-schema]').single('change', _.bind(this.onColorSchemaChange, this));
-                Common.Utils.addScrollIfNeed('.page[data-page=color-schemes-view', '.page[data-page=color-schemes-view] .page-content');
-            },
-
-            onSendThemeColorSchemes: function (schemas) {
-                this.schemas = schemas;
-            },
-
-            onColorSchemaChange: function(event) {
-                if (this.api) {
-                    var ind = $(event.currentTarget).val();
-                    if (this.curSchemas !== ind)
-                        this.api.asc_ChangeColorSchemeByIdx(parseInt(ind));
-                }
-            },
-
-            initPageAdvancedSettings: function() {
-                var me = this,
-                    $unitMeasurement = $('.page[data-page=settings-advanced-view] input:radio[name=unit-of-measurement]');
-                $unitMeasurement.single('change', _.bind(me.unitMeasurementChange, me));
-                var value = Common.Utils.Metric.getCurrentMetric();
-                $unitMeasurement.val([value]);
-                var _stateDisplayMode = DE.getController('Common.Controllers.Collaboration').getDisplayMode();
-                if(_stateDisplayMode == "final" || _stateDisplayMode == "original") {
-                    $('#settings-no-characters').addClass('disabled');
-                    $('#settings-hidden-borders').addClass('disabled');
-                }
-                if (!_isEdit) {
-                    $('.page[data-page=settings-advanced-view] .page-content > :not(.display-view)').hide();
-                }
-            },
-
-            initPageDocumentSettings: function () {
-                var me = this,
-                    $pageOrientation = $('.page[data-page=settings-document-view] input:radio[name=doc-orientation]'),
-                    $pageSize = $('#settings-document-format'),
-                    curMetricName = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric()),
-                    sizeW,
-                    sizeH;
-
-                // Init orientation
-                $pageOrientation.val([_isPortrait]);
-                $pageOrientation.single('change', _.bind(me.onOrientationChange, me));
-
-                // Init format
-                if (_pageSizesIndex === -1) {
-                    $pageSize.find('.item-title').text(me.textCustomSize);
-                    sizeW = parseFloat(Common.Utils.Metric.fnRecalcFromMM(_pageSizesCurrent[0]).toFixed(2));
-                    sizeH = parseFloat(Common.Utils.Metric.fnRecalcFromMM(_pageSizesCurrent[1]).toFixed(2));
-                } else {
-                    $pageSize.find('.item-title').text(_pageSizes[_pageSizesIndex]['caption']);
-                    sizeW = parseFloat(Common.Utils.Metric.fnRecalcFromMM(_pageSizes[_pageSizesIndex]['value'][0]).toFixed(2));
-                    sizeH = parseFloat(Common.Utils.Metric.fnRecalcFromMM(_pageSizes[_pageSizesIndex]['value'][1]).toFixed(2));
-                }
-                var pageSizeTxt = sizeW + ' ' + curMetricName + ' x ' + sizeH + ' ' + curMetricName;
-                $pageSize.find('.item-subtitle').text(pageSizeTxt);
-            },
-
-            initPageInfo: function () {
-                var me = this;
-
-                if (me.api) {
-                    me.api.startGetDocInfo();
-
-                    var document = Common.SharedSettings.get('document') || {},
-                        info = document.info || {};
-
-                    document.title ? $('#settings-document-title').html(document.title) : $('.display-document-title').remove();
-                    var value = info.owner;
-                    value ? $('#settings-document-owner').html(value) : $('.display-owner').remove();
-                    value = info.uploaded;
-                    value ? $('#settings-doc-uploaded').html(value) : $('.display-uploaded').remove();
-                    info.folder ? $('#settings-doc-location').html(info.folder) : $('.display-location').remove();
-
-                    var appProps = (this.api) ? this.api.asc_getAppProps() : null;
-                    if (appProps) {
-                        var appName = (appProps.asc_getApplication() || '') + (appProps.asc_getAppVersion() ? ' ' : '') + (appProps.asc_getAppVersion() || '');
-                        appName ? $('#settings-doc-application').html(appName) : $('.display-application').remove();
-                    }
-                    var props = (this.api) ? this.api.asc_getCoreProps() : null;
-                    if (props) {
-                        value = props.asc_getTitle();
-                        value ? $('#settings-doc-title').html(value) : $('.display-title').remove();
-                        value = props.asc_getSubject();
-                        value ? $('#settings-doc-subject').html(value) : $('.display-subject').remove();
-                        value = props.asc_getDescription();
-                        value ? $('#settings-doc-comment').html(value) : $('.display-comment').remove();
-                        value = props.asc_getModified();
-                        value ? $('#settings-doc-last-mod').html(value.toLocaleString(_lang, {year: 'numeric', month: '2-digit', day: '2-digit'}) + ' ' + value.toLocaleTimeString(_lang, {timeStyle: 'short'})) : $('.display-last-mode').remove();
-                        value = props.asc_getLastModifiedBy();
-                        value ? $('#settings-doc-mod-by').html(AscCommon.UserInfoParser.getParsedName(value)) : $('.display-mode-by').remove();
-                        value = props.asc_getCreated();
-                        value ? $('#settings-doc-date').html(value.toLocaleString(_lang, {year: 'numeric', month: '2-digit', day: '2-digit'}) + ' ' + value.toLocaleTimeString(_lang, {timeStyle: 'short'})) : $('.display-created-date').remove();
-                        value = props.asc_getCreator();
-                        var templateCreator = "";
-                        value && value.split(/\s*[,;]\s*/).forEach(function(item) {
-                            templateCreator = templateCreator + "<li class='item-content'><div class='item-inner'><div class='item-title'>" + item + "</div></div></li>";
-                        });
-                        templateCreator ? $('#list-creator').html(templateCreator) : $('.display-author').remove();
-                    }
-                }
-            },
-
-            setLicInfo: function(data){
-                if (data && typeof data == 'object' && typeof(data.customer)=='object') {
-                    $('.page[data-page=settings-about-view] .logo').hide();
-                    $('#settings-about-tel').parent().hide();
-                    $('#settings-about-licensor').show();
-
-                    var customer = data.customer,
-                        value = customer.name;
-                    value && value.length ?
-                        $('#settings-about-name').text(value) :
-                        $('#settings-about-name').hide();
-
-                    value = customer.address;
-                    value && value.length ?
-                        $('#settings-about-address').text(value) :
-                        $('#settings-about-address').parent().hide();
-
-                    (value = customer.mail) && value.length ?
-                        $('#settings-about-email').attr('href', "mailto:"+value).text(value) :
-                        $('#settings-about-email').parent().hide();
-
-                    if ((value = customer.www) && value.length) {
-                        var http = !/^https?:\/{2}/i.test(value) ? "http:\/\/" : '';
-                        $('#settings-about-url').attr('href', http+value).text(value);
-                    } else
-                        $('#settings-about-url').hide();
-
-                    if ((value = customer.info) && value.length) {
-                        $('#settings-about-info').show().text(value);
-                    }
-
-                    if ( (value = customer.logo) && value.length ) {
-                        $('#settings-about-logo').show().html('<img src="'+value+'" style="max-width:216px; max-height: 35px;" />');
-                    }
-                }
-            },
-
-            // Utils
-
-            applyPageMarginsIfNeed: function() {
-                var me = this,
-                    originalMarginsProps = me.api.asc_GetSectionProps(),
-                    originalMarginsChecksum = _.reduce([
-                        originalMarginsProps.get_TopMargin(),
-                        originalMarginsProps.get_LeftMargin(),
-                        originalMarginsProps.get_RightMargin(),
-                        originalMarginsProps.get_BottomMargin()
-                    ], function(memo, num){ return memo + num; }, 0),
-                    localMarginsChecksum = _.reduce([
-                        me.localSectionProps.get_TopMargin(),
-                        me.localSectionProps.get_LeftMargin(),
-                        me.localSectionProps.get_RightMargin(),
-                        me.localSectionProps.get_BottomMargin()
-                    ], function(memo, num){ return memo + num; }, 0);
-
-                if (Math.abs(originalMarginsChecksum - localMarginsChecksum) > 0.01) {
-                    me.api.asc_SetSectionProps(me.localSectionProps);
-                }
-            },
-
-            // Handlers
-
-            onSearch: function (e) {
-                var toolbarView = DE.getController('Toolbar').getView('Toolbar');
-
-                if (toolbarView) {
-                    toolbarView.showSearch();
-                }
-
-                this.hideModal();
-            },
-
-            onReaderMode: function (e) {
-                var me = this;
-
-                Common.SharedSettings.set('readerMode', !Common.SharedSettings.get('readerMode'));
-
-                me.api && me.api.ChangeReaderMode();
-
-                if (Common.SharedSettings.get('phone')) {
-                    _.defer(function () {
-                        me.hideModal();
-                    }, 1000);
-                }
-
-                Common.NotificationCenter.trigger('readermode:change', Common.SharedSettings.get('readerMode'));
-            },
-
-            onSpellcheck: function (e) {
-                var $checkbox = $(e.currentTarget),
-                    state = $checkbox.is(':checked');
-                Common.localStorage.setItem("de-mobile-spellcheck", state ? 1 : 0);
-                Common.Utils.InternalSettings.set("de-mobile-spellcheck", state);
-                this.api && this.api.asc_setSpellCheck(state);
-            },
-
-            onOrthographyCheck: function (e) {
-                this.hideModal();
-
-                this.api && this.api.asc_pluginRun("asc.{B631E142-E40B-4B4C-90B9-2D00222A286E}", 0);
-            },
-
-            onShowHelp: function () {
-                var url = '{{HELP_URL}}';
-                if (url.charAt(url.length-1) !== '/') {
-                    url += '/';
-                }
-                if (Common.SharedSettings.get('sailfish')) {
-                    url+='mobile-applications/documents/mobile-web-editors/android/index.aspx';
-                } else if (Common.SharedSettings.get('android')) {
-                    url+='mobile-applications/documents/mobile-web-editors/android/index.aspx';
-                } else {
-                    url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx';
-                }
-                window.open(url, "_blank");
-                this.hideModal();
-            },
-
-            onSaveFormat: function(e) {
-                var me = this,
-                    format = $(e.currentTarget).data('format');
-
-                if (format) {
-                    if (format == Asc.c_oAscFileType.TXT || format == Asc.c_oAscFileType.RTF) {
-                        _.defer(function () {
-                            uiApp.confirm(
-                                (format === Asc.c_oAscFileType.TXT) ? me.warnDownloadAs : me.warnDownloadAsRTF,
-                                me.notcriticalErrorTitle,
-                                function () {
-                                    if (format == Asc.c_oAscFileType.TXT)
-                                        Common.NotificationCenter.trigger('download:advanced', Asc.c_oAscAdvancedOptionsID.TXT, me.api.asc_getAdvancedOptions(), 2, new Asc.asc_CDownloadOptions(format));
-                                    else
-                                        me.api.asc_DownloadAs(new Asc.asc_CDownloadOptions(format));
-                                }
-                            );
-                        });
-                    } else {
-                        _.delay(function () {
-                            me.api.asc_DownloadAs(new Asc.asc_CDownloadOptions(format));
-                        }, 300);
-                    }
-
-                    me.hideModal();
-                }
-            },
-
-            onDownloadOrigin: function(e) {
-                var me = this;
-
-                _.defer(function () {
-                    me.api.asc_DownloadOrigin();
-                });
-                me.hideModal();
-            },
-
-            onPrint: function(e) {
-                var me = this;
-
-                _.delay(function () {
-                    me.api.asc_Print();
-                }, 300);
-                me.hideModal();
-            },
-
-            onFormatChange: function (e) {
-                var me = this,
-                    rawValue = $(e.currentTarget).val(),
-                    value = rawValue.split(',');
-
-                _.delay(function () {
-                    me.api.change_DocSize(parseFloat(value[0]), parseFloat(value[1]));
-                }, 300);
-            },
-
-            onOrientationChange: function (e) {
-                var me = this,
-                    value = $(e.currentTarget).val();
-
-                _.delay(function () {
-                    me.api.change_PageOrient(value === 'true');
-                }, 300);
-            },
-
-            unitMeasurementChange: function (e) {
-                var value = $(e.currentTarget).val();
-                value = (value!==null) ? parseInt(value) : Common.Utils.Metric.getDefaultMetric();
-                Common.Utils.Metric.setCurrentMetric(value);
-                Common.localStorage.setItem("de-mobile-settings-unit", value);
-                this.api.asc_SetDocumentUnits((value==Common.Utils.Metric.c_MetricUnits.inch) ? Asc.c_oAscDocumentUnits.Inch : ((value==Common.Utils.Metric.c_MetricUnits.pt) ? Asc.c_oAscDocumentUnits.Point : Asc.c_oAscDocumentUnits.Millimeter));
-            },
-
-            onPageMarginsChange: function (align, e) {
-                var me = this,
-                    $button = $(e.currentTarget),
-                    step,
-                    txtCm = Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.cm),
-                    marginValue = null;
-                if(Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.pt) {
-                    step = 1;
-                } else {
-                    step = 0.1;
-                }
-                step = Common.Utils.Metric.fnRecalcToMM(step);
-
-                switch (align) {
-                    case 'left': marginValue = me.localSectionProps.get_LeftMargin(); break;
-                    case 'top': marginValue = me.localSectionProps.get_TopMargin(); break;
-                    case 'right': marginValue = me.localSectionProps.get_RightMargin(); break;
-                    case 'bottom': marginValue = me.localSectionProps.get_BottomMargin(); break;
-                }
-
-                if ($button.hasClass('decrement')) {
-                    marginValue = Math.max(0, marginValue - step);
-                } else {
-                    marginValue = Math.min((align == 'left' || align == 'right') ? me.maxMarginsW : me.maxMarginsH, marginValue + step);
-                }
-
-                switch (align) {
-                    case 'left': me.localSectionProps.put_LeftMargin(marginValue); break;
-                    case 'top': me.localSectionProps.put_TopMargin(marginValue); break;
-                    case 'right': me.localSectionProps.put_RightMargin(marginValue); break;
-                    case 'bottom': me.localSectionProps.put_BottomMargin(marginValue); break;
-                }
-
-                var valueCurrentMetric = parseFloat(Common.Utils.Metric.fnRecalcFromMM(marginValue).toFixed(2));
-                $(Common.Utils.String.format('#document-margin-{0} .item-after label', align)).text(valueCurrentMetric + ' ' + _metricText);
-
-                me.applyPageMarginsIfNeed()
-            },
-
-            // API handlers
-
-            onApiGetDocInfoStart: function () {
-                var me = this;
-                inProgress = true;
-                infoObj = {
-                    PageCount       : 0,
-                    WordsCount      : 0,
-                    ParagraphCount  : 0,
-                    SymbolsCount    : 0,
-                    SymbolsWSCount  : 0
-                };
-
-                _.defer(function(){
-                    if (!inProgress)
-                        return;
-
-                    $('#statistic-pages').html(me.txtLoading);
-                    $('#statistic-words').html(me.txtLoading);
-                    $('#statistic-paragraphs').html(me.txtLoading);
-                    $('#statistic-symbols').html(me.txtLoading);
-                    $('#statistic-spaces').html(me.txtLoading);
-                });
-            },
-
-            onApiGetDocInfoEnd: function() {
-                inProgress = false;
-
-                $('#statistic-pages').html(infoObj.PageCount);
-                $('#statistic-words').html(infoObj.WordsCount);
-                $('#statistic-paragraphs').html(infoObj.ParagraphCount);
-                $('#statistic-symbols').html(infoObj.SymbolsCount);
-                $('#statistic-spaces').html(infoObj.SymbolsWSCount);
-            },
-
-            onApiDocInfo: function(obj) {
-                if (obj) {
-                    if (obj.get_PageCount() > -1)
-                        infoObj.PageCount = obj.get_PageCount();
-                    if (obj.get_WordsCount() > -1)
-                        infoObj.WordsCount = obj.get_WordsCount();
-                    if (obj.get_ParagraphCount() > -1)
-                        infoObj.ParagraphCount = obj.get_ParagraphCount();
-                    if (obj.get_SymbolsCount() > -1)
-                        infoObj.SymbolsCount = obj.get_SymbolsCount();
-                    if (obj.get_SymbolsWSCount() > -1)
-                        infoObj.SymbolsWSCount = obj.get_SymbolsWSCount();
-                }
-            },
-
-            onApiDocumentName: function(name) {
-                $('#settings-document-title').html(name ? name : '-');
-            },
-
-            onApiPageSize: function(w, h) {
-                if (!_isPortrait) {
-                    var tempW = w; w = h; h = tempW;
-                }
-
-                if (Math.abs(_pageSizesCurrent[0] - w) > 0.1 ||
-                    Math.abs(_pageSizesCurrent[1] - h) > 0.1) {
-                    _pageSizesCurrent = [w, h];
-                    var ind = -1;
-                    _.find(_pageSizes, function(size, index) {
-                        if (Math.abs(size.value[0] - w) < 0.1 && Math.abs(size.value[1] - h) < 0.1) {
-                            _pageSizesIndex = index;
-                            ind = index;
-                        }
-                    }, this);
-                    if (ind === -1) {
-                        _pageSizesIndex = -1;
-                    }
-                }
-
-                this.initPageDocumentSettings();
-            },
-
-            onApiPageOrient: function(isPortrait) {
-                _isPortrait = isPortrait;
-            },
-
-            unknownText: 'Unknown',
-            txtLoading              : 'Loading...',
-            notcriticalErrorTitle   : 'Warning',
-            warnDownloadAs          : 'If you continue saving in this format all features except the text will be lost.<br>Are you sure you want to continue?',
-            warnDownloadAsRTF       : 'If you continue saving in this format some of the formatting might be lost.<br>Are you sure you want to continue?',
-            textCustomSize          : 'Custom Size'
-        }
-    })(), DE.Controllers.Settings || {}))
-});

apps/documenteditor/mobile/app/controller/Toolbar.js

@@ -1,244 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  Toolbar.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 9/23/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'core',
-    'jquery',
-    'underscore',
-    'backbone',
-    'documenteditor/mobile/app/view/Toolbar'
-], function (core, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.Toolbar = Backbone.Controller.extend(_.extend((function() {
-        // private
-        var stateDisplayMode = false;
-        var _users = [];
-        var _displayCollaboration = false;
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'Toolbar'
-            ],
-
-            initialize: function() {
-                Common.Gateway.on('init', _.bind(this.loadConfig, this));
-            },
-
-            loadConfig: function (data) {
-                if (data && data.config && data.config.canBackToFolder !== false &&
-                    data.config.customization && data.config.customization.goback && (data.config.customization.goback.url || data.config.customization.goback.requestClose && data.config.canRequestClose)) {
-                    $('#document-back').show().single('click', _.bind(this.onBack, this));
-                }
-            },
-
-            setApi: function(api) {
-                this.api = api;
-
-                this.api.asc_registerCallback('asc_onCanUndo',      _.bind(this.onApiCanRevert, this, 'undo'));
-                this.api.asc_registerCallback('asc_onCanRedo',      _.bind(this.onApiCanRevert, this, 'redo'));
-                this.api.asc_registerCallback('asc_onFocusObject',  _.bind(this.onApiFocusObject, this));
-                this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', _.bind(this.onCoAuthoringDisconnect, this));
-                this.api.asc_registerCallback('asc_onAuthParticipantsChanged', _.bind(this.onUsersChanged, this));
-                this.api.asc_registerCallback('asc_onParticipantsChanged',     _.bind(this.onUsersChanged, this));
-                this.api.asc_registerCallback('asc_onConnectionStateChanged',  _.bind(this.onUserConnection, this));
-                Common.NotificationCenter.on('api:disconnect',      _.bind(this.onCoAuthoringDisconnect, this));
-            },
-
-            setMode: function (mode) {
-                this.mode = mode;
-                this.getView('Toolbar').setMode(mode);
-            },
-
-            onLaunch: function() {
-                var me = this;
-                me.createView('Toolbar').render();
-
-                $('#toolbar-undo').single('click',  _.bind(me.onUndo, me));
-                $('#toolbar-redo').single('click',  _.bind(me.onRedo, me));
-            },
-
-            setDocumentTitle: function (title) {
-                $('#toolbar-title').html(title);
-            },
-
-            // Handlers
-
-            onBack: function (e) {
-                var me = this;
-
-                if (me.api.isDocumentModified()) {
-                    uiApp.modal({
-                        title   : me.dlgLeaveTitleText,
-                        text    : me.dlgLeaveMsgText,
-                        verticalButtons: true,
-                        buttons : [
-                            {
-                                text: me.leaveButtonText,
-                                onClick: function() {
-                                    Common.NotificationCenter.trigger('goback', true);
-                                }
-                            },
-                            {
-                                text: me.stayButtonText,
-                                bold: true
-                            }
-                        ]
-                    });
-                } else {
-                    Common.NotificationCenter.trigger('goback', true);
-                }
-            },
-
-            onUndo: function (e) {
-                if (this.api)
-                    this.api.Undo();
-            },
-
-            onRedo: function (e) {
-                if (this.api)
-                    this.api.Redo();
-            },
-
-            // API handlers
-
-            onApiCanRevert: function(which, can) {
-                if (this.isDisconnected) return;
-
-                if (which == 'undo') {
-                    $('#toolbar-undo').toggleClass('disabled', !can);
-                } else {
-                    $('#toolbar-redo').toggleClass('disabled', !can);
-                }
-            },
-
-            setDisplayMode: function(displayMode) {
-                stateDisplayMode = displayMode == "final" || displayMode == "original" ? true : false;
-                var selected = this.api.getSelectedElements();
-                this.onApiFocusObject(selected);
-            },
-
-            onApiFocusObject: function (objects) {
-                if (this.isDisconnected) return;
-
-                if (objects.length > 0) {
-                    var topObject = _.find(objects.reverse(), function (obj) {
-                            return obj.get_ObjectType() != Asc.c_oAscTypeSelectElement.SpellCheck;
-                        }),
-                        topObjectValue = topObject.get_ObjectValue(),
-                        objectLocked = _.isFunction(topObjectValue.get_Locked) ? topObjectValue.get_Locked() : false;
-
-                    $('#toolbar-add, #toolbar-edit').toggleClass('disabled', objectLocked || stateDisplayMode);
-                }
-            },
-
-            activateControls: function() {
-                $('#toolbar-edit, #toolbar-add, #toolbar-settings, #toolbar-search, #document-back, #toolbar-edit-document, #toolbar-collaboration').removeClass('disabled');
-            },
-
-            activateViewControls: function() {
-                $('#toolbar-search, #document-back, #toolbar-collaboration').removeClass('disabled');
-            },
-
-            deactivateEditControls: function(enableDownload) {
-                $('#toolbar-edit, #toolbar-add').addClass('disabled');
-                if (enableDownload)
-                    DE.getController('Settings').setMode({isDisconnected: true, enableDownload: enableDownload});
-                else
-                    $('#toolbar-settings').addClass('disabled');
-            },
-
-            onCoAuthoringDisconnect: function(enableDownload) {
-                this.isDisconnected = true;
-                this.deactivateEditControls(enableDownload);
-                $('#toolbar-undo').toggleClass('disabled', true);
-                $('#toolbar-redo').toggleClass('disabled', true);
-                DE.getController('AddContainer').hideModal();
-                DE.getController('EditContainer').hideModal();
-                DE.getController('Settings').hideModal();
-            },
-
-            displayCollaboration: function() {
-                if(_users !== undefined) {
-                    var length = 0;
-                    _.each(_users, function (item) {
-                        if ((item.asc_getState()!==false) && !item.asc_getView())
-                            length++;
-                    });
-                    _displayCollaboration = (length >= 1 || !this.mode || this.mode.canViewComments || this.mode.canReview || this.mode.canViewReview);
-                    _displayCollaboration ? $('#toolbar-collaboration').show() : $('#toolbar-collaboration').hide();
-                }
-            },
-
-            onUsersChanged: function(users) {
-                _users = users;
-                this.displayCollaboration();
-            },
-
-            onUserConnection: function(change){
-                var changed = false;
-                for (var uid in _users) {
-                    if (undefined !== uid) {
-                        var user = _users[uid];
-                        if (user && user.asc_getId() == change.asc_getId()) {
-                            _users[uid] = change;
-                            changed = true;
-                        }
-                    }
-                }
-                !changed && change && (_users[change.asc_getId()] = change);
-                this.displayCollaboration();
-            },
-
-            getDisplayCollaboration: function() {
-                return _displayCollaboration;
-            },
-
-            dlgLeaveTitleText   : 'You leave the application',
-            dlgLeaveMsgText     : 'You have unsaved changes in this document. Click \'Stay on this Page\' to await the autosave of the document. Click \'Leave this Page\' to discard all the unsaved changes.',
-            leaveButtonText     : 'Leave this Page',
-            stayButtonText      : 'Stay on this Page'
-        }
-    })(), DE.Controllers.Toolbar || {}))
-});

apps/documenteditor/mobile/app/controller/add/AddContainer.js

@@ -1,265 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  AddContainer.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/14/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'core'
-], function (core) {
-    'use strict';
-
-    DE.Controllers.AddContainer = Backbone.Controller.extend(_.extend((function() {
-        // private
-
-        return {
-            models: [],
-            collections: [],
-            views: [],
-
-            initialize: function() {
-                //
-            },
-
-            setApi: function(api) {
-                this.api = api;
-            },
-
-            onLaunch: function() {
-                //
-            },
-
-            showModal: function() {
-                var me = this;
-
-                if ($$('.container-add.modal-in').length > 0) {
-                    return;
-                }
-
-                uiApp.closeModal();
-
-                me._showByStack(Common.SharedSettings.get('phone'));
-                uiApp.showTab('#add-other');
-
-                DE.getController('Toolbar').getView('Toolbar').hideSearch();
-            },
-
-            hideModal: function () {
-                if (this.picker) {
-                    uiApp.closeModal(this.picker);
-                }
-            },
-
-            _layoutEditorsByStack: function () {
-                var me = this,
-                    addViews = [];
-
-                addViews.push({
-                    caption: me.textTable,
-                    id: 'add-table',
-                    icon: 'icon-add-table',
-                    layout: DE.getController('AddTable')
-                        .getView('AddTable')
-                        .rootLayout()
-                });
-
-                addViews.push({
-                    caption: me.textShape,
-                    id: 'add-shape',
-                    icon: 'icon-add-shape',
-                    layout: DE.getController('AddShape')
-                        .getView('AddShape')
-                        .rootLayout()
-                });
-
-                addViews.push({
-                    caption: me.textImage,
-                    id: 'add-image',
-                    icon: 'icon-add-image',
-                    layout: DE.getController('AddImage')
-                        .getView('AddImage')
-                        .rootLayout()
-                });
-
-                addViews.push({
-                    caption: me.textOther,
-                    id: 'add-other',
-                    icon: 'icon-add-other',
-                    layout: DE.getController('AddOther')
-                        .getView('AddOther')
-                        .rootLayout()
-                });
-
-                return addViews;
-            },
-
-            _showByStack: function(isPhone) {
-                var me = this,
-                    isAndroid = Framework7.prototype.device.android === true,
-                    layoutAdds = me._layoutEditorsByStack();
-
-                if ($$('.container-add.modal-in').length > 0) {
-                    return;
-                }
-
-                // Navigation bar
-                var $layoutNavbar = $(
-                    '<div class="navbar">' +
-                        '<div data-page="index" class="navbar-inner">' +
-                            '<div class="center sliding categories"></div>' +
-                            (isPhone ? '<div class="right sliding"><a href="#" class="link icon-only close-popup"><i class="icon icon-expand-down"></i></a></div>' : '') +
-                        '</div>' +
-                    '</div>'
-                );
-
-
-                if (isAndroid) {
-                    $layoutNavbar
-                        .find('.center')
-                        .append('<div class="toolbar tabbar"><div data-page="index" class="toolbar-inner"></div></div>');
-
-                    _.each(layoutAdds, function (layout, index) {
-                        $layoutNavbar
-                            .find('.toolbar-inner')
-                            .append(
-                                '<a href="#' + layout.id + '" class="tab-link ' + (index < 1 ? 'active' : '') + '"><i class="icon ' + layout.icon + '"></i></a>'
-                            );
-                    });
-                    $layoutNavbar
-                        .find('.toolbar-inner')
-                        .append('<span class="tab-link-highlight" style="width: ' + (100/layoutAdds.length) + '%;"></span>');
-                } else {
-                    $layoutNavbar
-                        .find('.center')
-                        .append('<div class="buttons-row"></div>');
-
-                    _.each(layoutAdds, function (layout, index) {
-                        $layoutNavbar
-                            .find('.buttons-row')
-                            .append(
-                                '<a href="#' + layout.id + '" class="tab-link button ' + (index < 1 ? 'active' : '') + '"><i class="icon ' + layout.icon + '"></i></a>'
-                            );
-                    });
-                }
-
-
-                // Content
-
-                var $layoutPages = $(
-                    '<div class="pages">' +
-                        '<div class="page" data-page="index">' +
-                            '<div class="page-content tabs">' +
-                            '</div>' +
-                        '</div>' +
-                    '</div>'
-                );
-
-                _.each(layoutAdds, function (addView, index) {
-                    $layoutPages.find('.tabs').append(
-                        '<div id="' + addView.id + '" class="tab view ' + (index < 1 ? 'active' : '') + '">' +
-                            '<div class="pages">' +
-                                '<div class="page no-navbar">' +
-                                    '<div class="page-content">' +
-                                        addView.layout +
-                                    '</div>' +
-                                '</div>' +
-                            '</div>' +
-                        '</div>'
-                    );
-                });
-
-                if (isPhone) {
-                    me.picker = $$(uiApp.popup(
-                        '<div class="popup settings container-add">' +
-                            '<div class="view add-root-view navbar-through">' +
-                                $layoutNavbar.prop('outerHTML') +
-                                $layoutPages.prop('outerHTML') +
-                            '</div>' +
-                        '</div>'
-                    ))
-                } else {
-                    me.picker = uiApp.popover(
-                        '<div class="popover settings container-add">' +
-                            '<div class="popover-angle"></div>' +
-                            '<div class="popover-inner">' +
-                                '<div class="content-block">' +
-                                    '<div class="view popover-view add-root-view navbar-through">' +
-                                        $layoutNavbar.prop('outerHTML') +
-                                        $layoutPages.prop('outerHTML') +
-                                    '</div>' +
-                                '</div>' +
-                            '</div>',
-                        $$('#toolbar-add')
-                    );
-
-                    // Prevent hide overlay. Conflict popover and modals.
-                    var $overlay = $('.modal-overlay');
-
-                    $$(me.picker).on('opened', function () {
-                        $overlay.on('removeClass', function () {
-                            if (!$overlay.hasClass('modal-overlay-visible')) {
-                                $overlay.addClass('modal-overlay-visible')
-                            }
-                        });
-                    }).on('close', function () {
-                        $overlay.off('removeClass');
-                        $overlay.removeClass('modal-overlay-visible')
-                    });
-                }
-
-                if (isAndroid) {
-                    $$('.view.add-root-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
-                    $$('.view.add-root-view .navbar').prependTo('.view.add-root-view > .pages > .page');
-                }
-
-                me.rootView = uiApp.addView('.add-root-view', {
-                    dynamicNavbar: true,
-                    domCache: true
-                });
-
-                Common.NotificationCenter.trigger('addcontainer:show');
-            },
-
-            textTable: 'Table',
-            textShape: 'Shape',
-            textImage: 'Image',
-            textOther: 'Other'
-        }
-    })(), DE.Controllers.AddContainer || {}))
-});

apps/documenteditor/mobile/app/controller/add/AddImage.js

@@ -1,131 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  AddImage.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/18/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-
-define([
-    'core',
-    'documenteditor/mobile/app/view/add/AddImage',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (core, view, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.AddImage = Backbone.Controller.extend(_.extend((function() {
-        //
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'AddImage'
-            ],
-
-            initialize: function () {
-                Common.NotificationCenter.on('addcontainer:show', _.bind(this.initEvents, this));
-
-                this.addListeners({
-                    'AddImage': {
-                        'page:show' : this.onPageShow
-                    }
-                });
-            },
-
-            setApi: function (api) {
-                this.api = api;
-            },
-
-            onLaunch: function () {
-                this.createView('AddImage').render();
-            },
-
-            initEvents: function () {
-                var me = this;
-                $('#add-image-file').single('click', _.bind(me.onInsertByFile, me));
-            },
-
-            onPageShow: function () {
-                var me = this;
-
-                $('#addimage-insert a').single('click', _.buffered(me.onInsertByUrl, 100, me));
-                $('#addimage-url input[type=url]').single('input', _.bind(me.onUrlChange, me));
-
-                _.delay(function () {
-                    $('#addimage-link-url input[type=url]').focus();
-                }, 1000);
-            },
-
-            // Handlers
-
-            onInsertByFile: function (e) {
-                DE.getController('AddContainer').hideModal();
-            },
-
-            onUrlChange: function (e) {
-                $('#addimage-insert').toggleClass('disabled', _.isEmpty($(e.currentTarget).val()));
-            },
-
-            onInsertByUrl: function (e) {
-                var me = this,
-                    $input = $('#addimage-link-url input[type=url]');
-
-                if ($input) {
-                    var value = ($input.val()).replace(/ /g, '');
-
-                    if (!_.isEmpty(value)) {
-                        if ((/((^https?)|(^ftp)):\/\/.+/i.test(value))) {
-                            DE.getController('AddContainer').hideModal();
-                        } else {
-                            uiApp.alert(me.txtNotUrl, me.notcriticalErrorTitle);
-                        }
-                    } else {
-                        uiApp.alert(me.textEmptyImgUrl, me.notcriticalErrorTitle);
-                    }
-                }
-            },
-
-            textEmptyImgUrl : 'You need to specify image URL.',
-            txtNotUrl       : 'This field should be a URL in the format \"http://www.example.com\"',
-            notcriticalErrorTitle: 'Warning'
-        }
-    })(), DE.Controllers.AddImage || {}))
-});

apps/documenteditor/mobile/app/controller/add/AddOther.js

@@ -1,475 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-/**
- *  AddOther.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/17/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'core',
-    'documenteditor/mobile/app/view/add/AddOther',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (core, view, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.AddOther = Backbone.Controller.extend(_.extend((function() {
-        var c_pageNumPosition = {
-            PAGE_NUM_POSITION_TOP: 0x01,
-            PAGE_NUM_POSITION_BOTTOM: 0x02,
-            PAGE_NUM_POSITION_RIGHT: 0,
-            PAGE_NUM_POSITION_LEFT: 1,
-            PAGE_NUM_POSITION_CENTER: 2
-        };
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'AddOther'
-            ],
-
-            initialize: function () {
-                Common.NotificationCenter.on('addcontainer:show', _.bind(this.initEvents, this));
-
-                this.addListeners({
-                    'AddOther': {
-                        'page:show' : this.onPageShow
-                    }
-                });
-                this.toCustomFormat;
-                this.fromCustomFormat;
-            },
-
-            setApi: function (api) {
-                var me = this;
-                me.api = api;
-            },
-
-            setMode: function (mode) {
-                this.view = this.getView('AddOther');
-                this.view.canViewComments = mode.canViewComments;
-            },
-
-            onLaunch: function () {
-                this.createView('AddOther').render();
-            },
-
-            initEvents: function () {
-                this.setDisableMenuItem();
-            },
-
-            setDisableMenuItem: function() {
-                var isDisableComment = true,
-                    isDisableBreak = false,
-                    isDisableFootnote = false;
-                var stack = this.api.getSelectedElements();
-                var isText = false,
-                    isTable = false,
-                    isImage = false,
-                    isChart = false,
-                    isShape = false,
-                    isLink = false,
-                    lockedText = false,
-                    lockedTable = false,
-                    lockedImage = false,
-                    lockedHeader = false;
-                _.each(stack, function (item) {
-                    var objectType = item.get_ObjectType(),
-                        objectValue = item.get_ObjectValue();
-                    if (objectType == Asc.c_oAscTypeSelectElement.Header) {
-                        lockedHeader = objectValue.get_Locked();
-                    }
-                    if (objectType == Asc.c_oAscTypeSelectElement.Paragraph) {
-                        isText = true;
-                        lockedText = objectValue.get_Locked();
-                    } else if (objectType == Asc.c_oAscTypeSelectElement.Image) {
-                        lockedImage = objectValue.get_Locked();
-                        if (objectValue && objectValue.get_ChartProperties()) {
-                            isChart = true;
-                        } else if (objectType && objectValue.get_ShapeProperties()) {
-                            isShape = true;
-                        } else {
-                            isImage = true;
-                        }
-                    } else if (objectType == Asc.c_oAscTypeSelectElement.Table) {
-                        isTable = true;
-                        lockedTable = objectValue.get_Locked();
-                    } else if (objectType == Asc.c_oAscTypeSelectElement.Hyperlink) {
-                        isLink = true;
-                    }
-                });
-                if (stack.length > 0) {
-                    var isObject = isShape || isChart || isImage || isTable;
-                    isDisableComment = (this.api.can_AddQuotedComment() === false || lockedText || lockedTable || lockedImage || lockedHeader || (!isText && isObject));
-                    if (isShape && isText) {
-                        isDisableBreak = isDisableFootnote = true;
-                    }
-                }
-                this.view.isDisableComment = isDisableComment;
-                this.view.isDisableBreak = isDisableBreak;
-                this.view.isDisableFootnote = isDisableFootnote;
-            },
-
-            onPageShow: function (view, pageId) {
-                var me = this;
-
-                $('.page[data-page=addother-sectionbreak] li a').single('click',    _.buffered(me.onInsertSectionBreak, 100, me));
-                $('.page[data-page=addother-pagenumber] li a').single('click',      _.buffered(me.onInsertPageNumber, 100, me));
-                $('#add-link-insert').single('click',                               _.buffered(me.onInsertLink, 100, me));
-
-
-                if (pageId == '#addother-link') {
-                    if ($('#addother-link-view')) {
-                        _.defer(function () {
-                            var text = me.api.can_AddHyperlink();
-                            $('#add-link-display input').val(_.isString(text) ? text : '');
-                        });
-                    }
-                } else if (pageId == '#addother-insert-footnote') {
-                    me.initInsertFootnote();
-                } else if (pageId === "#addother-insert-comment") {
-                    me.initInsertComment(false);
-                } else if (pageId === "#addother-insert-break") {
-                    $('#add-other-pagebreak').single('click',   _.bind(me.onPageBreak, me));
-                    $('#add-other-columnbreak').single('click', _.bind(me.onColumnBreak, me));
-                }
-            },
-
-            // Handlers
-            initInsertComment: function (documentFlag) {
-                var comment = DE.getController('Common.Controllers.Collaboration').getCommentInfo();
-                if (comment) {
-                    this.getView('AddOther').renderComment(comment);
-                    $('#done-comment').single('click', _.bind(this.onDoneComment, this, documentFlag));
-                    $('.back-from-add-comment').single('click', _.bind(function () {
-                        if ($('#comment-text').val().length > 0) {
-                            uiApp.modal({
-                                title: '',
-                                text: this.textDeleteDraft,
-                                buttons: [
-                                    {
-                                        text: this.textCancel
-                                    },
-                                    {
-                                        text: this.textDelete,
-                                        bold: true,
-                                        onClick: function () {
-                                            DE.getController('AddContainer').rootView.router.back();
-                                        }
-                                    }]
-                            })
-                        } else {
-                            DE.getController('AddContainer').rootView.router.back();
-                        }
-                    }, this));
-                }
-            },
-
-            onDoneComment: function(documentFlag) {
-                var value = $('#comment-text').val().trim();
-                if (value.length > 0) {
-                    DE.getController('Common.Controllers.Collaboration').onAddNewComment(value, documentFlag);
-                    DE.getController('AddContainer').hideModal();
-                }
-            },
-
-            initInsertFootnote: function () {
-                var me = this,
-                    dataFormatFootnote = [
-                        { text: '1, 2, 3,...', value: Asc.c_oAscNumberingFormat.Decimal },
-                        { text: 'a, b, c,...', value: Asc.c_oAscNumberingFormat.LowerLetter },
-                        { text: 'A, B, C,...', value: Asc.c_oAscNumberingFormat.UpperLetter },
-                        { text: 'i, ii, iii,...', value: Asc.c_oAscNumberingFormat.LowerRoman },
-                        { text: 'I, II, III,...', value: Asc.c_oAscNumberingFormat.UpperRoman }
-                    ],
-                    dataPosFootnote = [
-                        {value: Asc.c_oAscFootnotePos.PageBottom, displayValue: this.textBottomOfPage },
-                        {value: Asc.c_oAscFootnotePos.BeneathText, displayValue: this.textBelowText }
-                    ],
-                    props = me.api.asc_GetFootnoteProps(),
-                    propsFormat = props.get_NumFormat(),
-                    propsPos = props.get_Pos();
-
-                me.onFormatFootnoteChange(propsFormat);
-
-                var view = me.getView('AddOther');
-                view.renderNumFormat(dataFormatFootnote, propsFormat);
-                view.renderFootnotePos(dataPosFootnote, propsPos);
-
-                $('#start-at-footnote .button').single('click', _.bind(me.onStartAt, me));
-                $('.page[data-page=addother-insert-footnote] input:radio[name=doc-footnote-format]').single('change', _.bind(me.onFormatFootnoteChange, me));
-                $('#footnote-insert').single('click', _.bind(this.onClickInsertFootnote, this));
-            },
-
-            onClickInsertFootnote: function() {
-                DE.getController('AddContainer').hideModal();
-            },
-
-            onFormatFootnoteChange: function(e) {
-                var me = this;
-                var value = e.currentTarget ? $(e.currentTarget).data('value') : e;
-                var startAt = $('#start-at-footnote .item-after label'),
-                    currValue;
-                    if(e.currentTarget) {
-                        currValue = me.fromCustomFormat(startAt.text());
-                    } else {
-                        currValue = me.api.asc_GetFootnoteProps().get_NumStart();
-                    }
-                switch (value) {
-                    case Asc.c_oAscNumberingFormat.UpperRoman: // I, II, III, ...
-                        me.toCustomFormat = me._10toRome;
-                        me.fromCustomFormat = me._Rometo10;
-                        break;
-                    case Asc.c_oAscNumberingFormat.LowerRoman: // i, ii, iii, ...
-                        me.toCustomFormat = function(value) { return me._10toRome(value).toLocaleLowerCase(); };
-                        me.fromCustomFormat = function(value) { return me._Rometo10(value.toLocaleUpperCase()); };
-                        break;
-                    case Asc.c_oAscNumberingFormat.UpperLetter: // A, B, C, ...
-                        me.toCustomFormat = me._10toS;
-                        me.fromCustomFormat = me._Sto10;
-                        break;
-                    case Asc.c_oAscNumberingFormat.LowerLetter: // a, b, c, ...
-                        me.toCustomFormat = function(value) { return me._10toS(value).toLocaleLowerCase(); };
-                        me.fromCustomFormat = function(value) { return me._Sto10(value.toLocaleUpperCase()); };
-                        break;
-                    default: // 1, 2, 3, ...
-                        me.toCustomFormat = function(value) { return value; };
-                        me.fromCustomFormat = function(value) { return value; };
-                        break;
-                }
-                    var newValue = me.toCustomFormat(currValue);
-                        startAt.text(newValue);
-            },
-
-            onStartAt: function(e) {
-                var $button = $(e.currentTarget),
-                    value = $('#start-at-footnote .item-after label').text(),
-                    intValue,
-                    step = 1,
-                    maxValue = 16383,
-                    me = this;
-                if(me.fromCustomFormat) {
-                    intValue = parseInt(me.fromCustomFormat(value));
-                } else {
-                    intValue = me.api.asc_GetFootnoteProps().get_NumStart();
-                }
-                if ($button.hasClass('decrement')) {
-                    intValue = Math.max(1, intValue - step);
-                } else {
-                    intValue = Math.min(maxValue, intValue + step);
-                }
-                var newValue = me.toCustomFormat(intValue);
-                $('#start-at-footnote .item-after label').text(newValue);
-            },
-
-            onInsertLink: function (e) {
-                DE.getController('AddContainer').hideModal();
-            },
-
-            onPageBreak: function (e) {
-                this.api && this.api.put_AddPageBreak();
-                DE.getController('AddContainer').hideModal();
-            },
-
-            onColumnBreak: function () {
-                this.api && this.api.put_AddColumnBreak();
-                DE.getController('AddContainer').hideModal();
-            },
-
-            onInsertSectionBreak: function (e) {
-                var $target = $(e.currentTarget);
-
-                if ($target && this.api) {
-                    var type = $target.data('type'),
-                        value;
-
-                    if ('next' == type) {
-                        value = Asc.c_oAscSectionBreakType.NextPage;
-                    } else if ('continuous' == type) {
-                        value = Asc.c_oAscSectionBreakType.Continuous;
-                    } else if ('even' == type) {
-                        value = Asc.c_oAscSectionBreakType.EvenPage;
-                    } else if ('odd' == type) {
-                        value = Asc.c_oAscSectionBreakType.OddPage;
-                    }
-
-                    this.api.add_SectionBreak(value);
-                }
-
-                DE.getController('AddContainer').hideModal();
-            },
-
-            onInsertPageNumber: function (e) {
-                var $target = $(e.currentTarget);
-
-                if ($target && this.api) {
-                    var value = -1,
-                        type = $target.data('type');
-
-                    if (2 == type.length) {
-                        value = {};
-
-                        if (type[0] == 'l') {
-                            value.subtype = c_pageNumPosition.PAGE_NUM_POSITION_LEFT;
-                        } else if (type[0] == 'c') {
-                            value.subtype = c_pageNumPosition.PAGE_NUM_POSITION_CENTER;
-                        } else if (type[0] == 'r') {
-                            value.subtype = c_pageNumPosition.PAGE_NUM_POSITION_RIGHT;
-                        }
-
-                        if (type[1] == 't') {
-                            value.type = c_pageNumPosition.PAGE_NUM_POSITION_TOP;
-                        } else if (type[1] == 'b') {
-                            value.type = c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM;
-                        }
-
-                        this.api.put_PageNum(value.type, value.subtype);
-                    } else {
-                        this.api.put_PageNum(value);
-                    }
-                }
-
-                DE.getController('AddContainer').hideModal();
-            },
-
-            _10toS: function(value) {
-                value = parseInt(value);
-                var n = Math.ceil(value / 26),
-                    code = String.fromCharCode((value-1) % 26 + "A".charCodeAt(0)) ,
-                    result = '';
-
-                for (var i=0; i<n; i++ ) {
-                    result += code;
-                }
-                return result;
-            },
-
-            _Sto10: function(str) {
-                if ( str.length<1 || (new RegExp('[^' + str.charAt(0) + ']')).test(str) || !/[A-Z]/.test(str)) return 1;
-
-                var n = str.length-1,
-                    result = str.charCodeAt(0) - "A".charCodeAt(0) + 1;
-                result += 26*n;
-
-                return result;
-            },
-
-            _10toRome: function(value) {
-                value = parseInt(value);
-                var result = '',
-                    digits = [
-                        ['M',  1000],
-                        ['CM', 900],
-                        ['D',  500],
-                        ['CD', 400],
-                        ['C',  100],
-                        ['XC', 90],
-                        ['L',  50],
-                        ['XL', 40],
-                        ['X',  10],
-                        ['IX', 9],
-                        ['V',  5],
-                        ['IV', 4],
-                        ['I',  1]
-                    ];
-
-                var val = digits[0][1],
-                    div = Math.floor(value / val),
-                    n = 0;
-
-                for (var i=0; i<div; i++)
-                    result += digits[n][0];
-                value -= div * val;
-                n++;
-
-                while (value>0) {
-                    val = digits[n][1];
-                    div = value - val;
-                    if (div>=0) {
-                        result += digits[n][0];
-                        value = div;
-                    } else
-                        n++;
-                }
-
-                return result;
-            },
-
-            _Rometo10: function(str) {
-                if ( !/[IVXLCDM]/.test(str) || str.length<1 ) return 1;
-
-                var digits = {
-                    'I': 1,
-                    'V': 5,
-                    'X': 10,
-                    'L': 50,
-                    'C': 100,
-                    'D': 500,
-                    'M': 1000
-                };
-
-                var n = str.length-1,
-                    result = digits[str.charAt(n)],
-                    prev = result;
-
-                for (var i=n-1; i>=0; i-- ) {
-                    var val = digits[str.charAt(i)];
-                    if (val<prev) {
-                        if (prev/val>10) return 1;
-                        val *= -1;
-                    }
-
-                    result += val;
-                    prev = Math.abs(val);
-                }
-
-                return result;
-            },
-
-            txtNotUrl: 'This field should be a URL in the format \"http://www.example.com\"',
-            textBottomOfPage: 'Bottom Of Page',
-            textBelowText: 'Below Text',
-            textDeleteDraft: 'Do you really want to delete draft?',
-            textCancel: 'Cancel',
-            //textContinue: 'Continue',
-            textDelete: 'Delete',
-            notcriticalErrorTitle: 'Warning'
-        }
-    })(), DE.Controllers.AddOther || {}))
-});

apps/documenteditor/mobile/app/controller/add/AddShape.js

@@ -1,228 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  AddShape.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/18/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'core',
-    'documenteditor/mobile/app/view/add/AddShape',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (core, view, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.AddShape = Backbone.Controller.extend(_.extend((function() {
-        var _styles = [];
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'AddShape'
-            ],
-
-            initialize: function () {
-                Common.NotificationCenter.on('addcontainer:show', _.bind(this.initEvents, this));
-
-                // Fill shapes
-
-                function randomColor() {
-                    return '#' + Math.floor(Math.random()*16777215).toString(16);
-                }
-
-                _styles = [
-                    {
-                        title: 'Text',
-                        thumb: 'shape-01.svg',
-                        type: 'textRect'
-                    },
-                    {
-                        title: 'Line',
-                        thumb: 'shape-02.svg',
-                        type: 'line'
-                    },
-                    {
-                        title: 'Line with arrow',
-                        thumb: 'shape-03.svg',
-                        type: 'lineWithArrow'
-                    },
-                    {
-                        title: 'Line with two arrows',
-                        thumb: 'shape-04.svg',
-                        type: 'lineWithTwoArrows'
-                    },
-                    {
-                        title: 'Rect',
-                        thumb: 'shape-05.svg',
-                        type: 'rect'
-                    },
-                    {
-                        title: 'Hexagon',
-                        thumb: 'shape-06.svg',
-                        type: 'hexagon'
-                    },
-                    {
-                        title: 'Round rect',
-                        thumb: 'shape-07.svg',
-                        type: 'roundRect'
-                    },
-                    {
-                        title: 'Ellipse',
-                        thumb: 'shape-08.svg',
-                        type: 'ellipse'
-                    },
-                    {
-                        title: 'Triangle',
-                        thumb: 'shape-09.svg',
-                        type: 'triangle'
-                    },
-                    {
-                        title: 'Triangle',
-                        thumb: 'shape-10.svg',
-                        type: 'rtTriangle'
-                    },
-                    {
-                        title: 'Trapezoid',
-                        thumb: 'shape-11.svg',
-                        type: 'trapezoid'
-                    },
-                    {
-                        title: 'Diamond',
-                        thumb: 'shape-12.svg',
-                        type: 'diamond'
-                    },
-                    {
-                        title: 'Right arrow',
-                        thumb: 'shape-13.svg',
-                        type: 'rightArrow'
-                    },
-                    {
-                        title: 'Left-right arrow',
-                        thumb: 'shape-14.svg',
-                        type: 'leftRightArrow'
-                    },
-                    {
-                        title: 'Left arrow callout',
-                        thumb: 'shape-15.svg',
-                        type: 'leftArrow'
-                    },
-                    {
-                        title: 'Right arrow callout',
-                        thumb: 'shape-16.svg',
-                        type: 'bentUpArrow'
-                    },
-                    {
-                        title: 'Flow chart off page connector',
-                        thumb: 'shape-17.svg',
-                        type: 'flowChartOffpageConnector'
-                    },
-                    {
-                        title: 'Heart',
-                        thumb: 'shape-18.svg',
-                        type: 'heart'
-                    },
-                    {
-                        title: 'Math minus',
-                        thumb: 'shape-19.svg',
-                        type: 'mathMinus'
-                    },
-                    {
-                        title: 'Math plus',
-                        thumb: 'shape-20.svg',
-                        type: 'mathPlus'
-                    },
-                    {
-                        title: 'Parallelogram',
-                        thumb: 'shape-21.svg',
-                        type: 'parallelogram'
-                    },
-                    {
-                        title: 'Wedge rect callout',
-                        thumb: 'shape-22.svg',
-                        type: 'wedgeRectCallout'
-                    },
-                    {
-                        title: 'Wedge ellipse callout',
-                        thumb: 'shape-23.svg',
-                        type: 'wedgeEllipseCallout'
-                    },
-                    {
-                        title: 'Cloud callout',
-                        thumb: 'shape-24.svg',
-                        type: 'cloudCallout'
-                    }
-                ];
-
-                var elementsInRow = 4;
-                var groups = _.chain(_styles).groupBy(function(element, index){
-                    return Math.floor(index/elementsInRow);
-                }).toArray().value();
-
-                Common.SharedSettings.set('shapes', groups);
-                Common.NotificationCenter.trigger('shapes:load', groups);
-            },
-
-            setApi: function (api) {
-                this.api = api;
-            },
-
-            onLaunch: function () {
-                this.createView('AddShape').render();
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                $('#add-shape li').single('click',  _.buffered(me.onShapeClick, 300, me));
-            },
-
-            onShapeClick: function (e) {
-                DE.getController('AddContainer').hideModal();
-            },
-
-            // Public
-
-            getStyles: function () {
-                return _styles;
-            }
-        }
-    })(), DE.Controllers.AddShape || {}))
-});

apps/documenteditor/mobile/app/controller/add/AddTable.js

@@ -1,168 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  AddTable.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/17/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-
-define([
-    'core',
-    'documenteditor/mobile/app/view/add/AddTable',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (core, view, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.AddTable = Backbone.Controller.extend(_.extend((function() {
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'AddTable'
-            ],
-
-            initialize: function () {
-                Common.NotificationCenter.on('addcontainer:show', _.bind(this.initEvents, this));
-
-                this.addListeners({
-                    'AddTable': {
-                        'view:render' : this.onViewRender
-                    }
-                });
-
-                this._styles = [];
-                this._initDefaultStyles = false;
-            },
-
-            setApi: function (api) {
-                var me = this;
-                me.api = api;
-            },
-
-            onLaunch: function () {
-                this.createView('AddTable').render();
-            },
-
-            initEvents: function () {
-                $('#add-table li').single('click',  _.buffered(this.onStyleClick, 100, this));
-            },
-
-            onViewRender: function () {
-                $('#add-table li').single('click',  _.buffered(this.onStyleClick, 100, this));
-            },
-
-            onStyleClick: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    type = $target.data('type');
-
-                if ($('.modal.modal-in').length > 0) {
-                    return
-                }
-
-                DE.getController('AddContainer').hideModal();
-
-                if ($target) {
-                    var picker;
-                    var modal = uiApp.modal({
-                        title: me.textTableSize,
-                        text: '',
-                        afterText:
-                        '<div class="content-block">' +
-                            '<div class="row no-gutter" style="text-align: center;">' +
-                                '<div class="col-50">' + me.textColumns + '</div>' +
-                                '<div class="col-50">' + me.textRows + '</div>' +
-                            '</div>' +
-                        '<div id="picker-table-size"></div>' +
-                        '</div>',
-                        buttons: [
-                            {
-                                text: me.textCancel
-                            },
-                            {
-                                text: 'OK',
-                                bold: true,
-                                onClick: function () {
-                                    var size = picker.value;
-
-                                    if (me.api) {
-                                        me.api.put_Table(parseInt(size[0]), parseInt(size[1]), type.toString());
-                                    }
-                                }
-                            }
-                        ]
-                    });
-
-                    picker = uiApp.picker({
-                        container: '#picker-table-size',
-                        toolbar: false,
-                        rotateEffect: true,
-                        value: [3, 3],
-                        cols: [{
-                            textAlign: 'center',
-                            width: '100%',
-                            values: [1,2,3,4,5,6,7,8,9,10]
-                        }, {
-                            textAlign: 'center',
-                            width: '100%',
-                            values: [1,2,3,4,5,6,7,8,9,10]
-                        }]
-                    });
-
-                    // Vertical align
-                    $$(modal).css({
-                        marginTop: - Math.round($$(modal).outerHeight() / 2) + 'px'
-                    });
-                }
-            },
-
-            // Public
-
-            getStyles: function () {
-                return this._styles;
-            },
-
-            textTableSize: 'Table Size',
-            textColumns: 'Columns',
-            textRows: 'Rows',
-            textCancel: 'Cancel'
-        }
-    })(), DE.Controllers.AddTable || {}))
-});

apps/documenteditor/mobile/app/controller/edit/EditChart.js

@@ -1,583 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditChart.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 11/7/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'core',
-    'documenteditor/mobile/app/view/edit/EditChart',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (core, view, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.EditChart = Backbone.Controller.extend(_.extend((function() {
-        // Private
-        var _stack = [],
-            _shapeObject = undefined,
-            _metricText = Common.Utils.Metric.getCurrentMetricName(),
-            _borderColor = 'transparent';
-
-        var wrapTypesTransform = (function() {
-            var map = [
-                { ui:'inline', sdk: Asc.c_oAscWrapStyle2.Inline },
-                { ui:'square', sdk: Asc.c_oAscWrapStyle2.Square },
-                { ui:'tight', sdk: Asc.c_oAscWrapStyle2.Tight },
-                { ui:'through', sdk: Asc.c_oAscWrapStyle2.Through },
-                { ui:'top-bottom', sdk: Asc.c_oAscWrapStyle2.TopAndBottom },
-                { ui:'behind', sdk: Asc.c_oAscWrapStyle2.Behind },
-                { ui:'infront', sdk: Asc.c_oAscWrapStyle2.InFront }
-            ];
-
-            return {
-                sdkToUi: function(type) {
-                    var record = map.filter(function(obj) {
-                        return obj.sdk === type;
-                    })[0];
-                    return record ? record.ui : '';
-                },
-
-                uiToSdk: function(type) {
-                    var record = map.filter(function(obj) {
-                        return obj.ui === type;
-                    })[0];
-                    return record ? record.sdk : 0;
-                }
-            }
-        })();
-
-        var borderSizeTransform = (function() {
-            var _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
-
-            return {
-                sizeByIndex: function (index) {
-                    if (index < 1) return _sizes[0];
-                    if (index > _sizes.length - 1) return _sizes[_sizes.length - 1];
-                    return _sizes[index];
-                },
-
-                indexSizeByValue: function (value) {
-                    var index = 0;
-                    _.each(_sizes, function (size, idx) {
-                        if (Math.abs(size - value) < 0.25) {
-                            index = idx;
-                        }
-                    });
-
-                    return index
-                },
-
-                sizeByValue: function (value) {
-                    return _sizes[this.indexSizeByValue(value)];
-                }
-            }
-        })();
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'EditChart'
-            ],
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-
-                this.addListeners({
-                    'EditChart': {
-                        'page:show': this.onPageShow
-                    }
-                });
-
-                this._chartObject = undefined;
-            },
-
-            setApi: function (api) {
-                var me = this;
-                me.api = api;
-
-                me.api.asc_registerCallback('asc_onFocusObject',        _.bind(me.onApiFocusObject, me));
-            },
-
-            onLaunch: function () {
-                this.createView('EditChart').render();
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                $('#chart-remove').single('click', _.bind(me.onRemoveChart, me));
-
-                me.initSettings();
-            },
-
-            onPageShow: function (view, pageId) {
-                var me = this;
-
-                $('.chart-reorder a').single('click',                       _.bind(me.onReorder, me));
-                $('.chart-replace li').single('click',                      _.buffered(me.onReplace, 100, me));
-                $('.chart-wrap .chart-wrap-types li').single('click',       _.buffered(me.onWrapType, 100, me));
-                $('.chart-wrap .align a').single('click',                   _.bind(me.onAlign, me));
-                $('#edit-chart-movetext input').single('change',            _.bind(me.onMoveText, me));
-                $('#edit-chart-overlap input').single('change',             _.bind(me.onOverlap, me));
-                $('.chart-wrap .distance input').single('change touchend',  _.buffered(me.onWrapDistance, 100, me));
-                $('.chart-wrap .distance input').single('input',            _.bind(me.onWrapDistanceChanging, me));
-
-                $('#edit-chart-bordersize input').single('change touchend', _.buffered(me.onBorderSize, 100, me));
-                $('#edit-chart-bordersize input').single('input',           _.bind(me.onBorderSizeChanging, me));
-
-                $('#tab-chart-type li').single('click',                     _.buffered(me.onType, 100, me));
-
-                me.initSettings(pageId);
-            },
-
-            initSettings: function (pageId) {
-                var me = this;
-                _metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
-                if (me._chartObject) {
-                    if (pageId == '#edit-chart-wrap') {
-                        me._initWrapView();
-                    } else if (pageId == '#edit-chart-style') {
-                        me._updateChartStyles(me.api.asc_getChartPreviews(me._chartObject.get_ChartProperties().getType()));
-                        me._initStyleView();
-                    } else if (pageId == '#edit-chart-border-color-view') {
-                        me._initStyleView();
-                    }
-                }
-            },
-
-            _initWrapView: function() {
-                // Wrap type
-                var me = this,
-                    wrapping = me._chartObject.get_WrappingStyle(),
-                    $chartWrapInput = $('.chart-wrap input'),
-                    chartWrapType = wrapTypesTransform.sdkToUi(wrapping);
-
-                $chartWrapInput.val([chartWrapType]);
-                me._uiTransformByWrap(chartWrapType);
-
-                // Wrap align
-                var chartHAlign = me._chartObject.get_PositionH().get_Align();
-
-                $('.chart-wrap .align a[data-type=left]').toggleClass('active', chartHAlign == Asc.c_oAscAlignH.Left);
-                $('.chart-wrap .align a[data-type=center]').toggleClass('active', chartHAlign == Asc.c_oAscAlignH.Center);
-                $('.chart-wrap .align a[data-type=right]').toggleClass('active', chartHAlign == Asc.c_oAscAlignH.Right);
-
-
-                // Wrap flags
-                $('#edit-chart-movetext input').prop('checked', me._chartObject.get_PositionV().get_RelativeFrom() == Asc.c_oAscRelativeFromV.Paragraph);
-                $('#edit-chart-overlap input').prop('checked', me._chartObject.get_AllowOverlap());
-
-                // Wrap distance
-                var paddings = me._chartObject.get_Paddings();
-                if (paddings) {
-                    var distance = Common.Utils.Metric.fnRecalcFromMM(paddings.get_Top());
-                    $('.chart-wrap .distance input').val(distance);
-                    $('.chart-wrap .distance .item-after').text(distance + ' ' + _metricText);
-                }
-            },
-
-            _initStyleView: function (updateStyles) {
-                var me = this,
-                    chartProperties = me._chartObject.get_ChartProperties(),
-                    shapeProperties = _shapeObject.get_ShapeProperties(),
-                    paletteFillColor = me.getView('EditChart').paletteFillColor,
-                    paletteBorderColor = me.getView('EditChart').paletteBorderColor;
-
-
-                // Style
-
-                var type = chartProperties.getType();
-                $('.chart-types li').removeClass('active');
-                $('.chart-types li[data-type=' + type + ']').addClass('active');
-
-                // Init style border size
-                var borderSize = shapeProperties.get_stroke().get_width() * 72.0 / 25.4;
-                var borderType = shapeProperties.get_stroke().get_type();
-                $('#edit-chart-bordersize input').val([(borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize)]);
-                $('#edit-chart-bordersize .item-after').text(((borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize)) + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt));
-
-                paletteFillColor && paletteFillColor.on('select',       _.bind(me.onFillColor, me));
-                paletteBorderColor && paletteBorderColor.on('select',   _.bind(me.onBorderColor, me));
-
-                var sdkColor, color;
-
-                // Init fill color
-                var fill = shapeProperties.get_fill(),
-                    fillType = fill.get_type();
-
-                color = 'transparent';
-
-                if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
-                    fill = fill.get_fill();
-                    sdkColor = fill.get_color();
-
-                    if (sdkColor) {
-                        if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
-                            color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
-                        } else {
-                            color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
-                        }
-                    }
-                }
-
-                paletteFillColor && paletteFillColor.select(color);
-
-                // Init border color
-                me._initBorderColorView();
-            },
-
-            _initBorderColorView: function () {
-                if (!_shapeObject) return;
-
-                var me = this,
-                    paletteBorderColor = me.getView('EditChart').paletteBorderColor,
-                    stroke = _shapeObject.get_ShapeProperties().get_stroke();
-
-                var color = 'transparent';
-
-                if (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
-                    var sdkColor = stroke.get_color();
-
-                    if (sdkColor) {
-                        if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
-                            color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
-                        }
-                        else {
-                            color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
-                        }
-                    }
-                }
-                _borderColor = color;
-
-                paletteBorderColor && paletteBorderColor.select(color);
-                $('#edit-chart-bordercolor .color-preview').css('background-color', ('transparent' == color) ? color : ('#' + (_.isObject(color) ? color.color : color)))
-            },
-
-            // Public
-
-            getChart: function () {
-                return this._chartObject;
-            },
-
-            // Handlers
-
-            onType: function (e) {
-            },
-
-            onStyle: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    type = $target.data('type');
-
-                var image = new Asc.asc_CImgProperty(),
-                    chart = me._chartObject.get_ChartProperties();
-
-                chart.putStyle(type);
-                image.put_ChartProperties(chart);
-
-                me.api.ImgApply(image);
-            },
-
-            onRemoveChart: function () {
-                this.api.asc_Remove();
-                DE.getController('EditContainer').hideModal();
-            },
-
-            onReorder: function (e) {
-                var $target = $(e.currentTarget),
-                    type = $target.data('type');
-
-                var properties = new Asc.asc_CImgProperty();
-
-                if ('all-up' == type) {
-                    properties.put_ChangeLevel(Asc.c_oAscChangeLevel.BringToFront);
-                } else if ('all-down' == type) {
-                    properties.put_ChangeLevel(Asc.c_oAscChangeLevel.SendToBack);
-                } else if ('move-up' == type) {
-                    properties.put_ChangeLevel(Asc.c_oAscChangeLevel.BringForward);
-                } else if ('move-down' == type) {
-                    properties.put_ChangeLevel(Asc.c_oAscChangeLevel.BringBackward);
-                }
-
-                this.api.ImgApply(properties);
-            },
-
-            onWrapType: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget).find('input'),
-                    value = $target.val(),
-                    properties = new Asc.asc_CImgProperty();
-
-                me._uiTransformByWrap(value);
-
-                var sdkType = wrapTypesTransform.uiToSdk(value);
-
-                properties.put_WrappingStyle(sdkType);
-
-                me.api.ImgApply(properties);
-            },
-
-            onAlign: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    type = $target.data('type');
-
-                $('.chart-wrap .align a').removeClass('active');
-                $target.addClass('active');
-
-                var hAlign = Asc.c_oAscAlignH.Left;
-
-                if ('center' == type) {
-                    hAlign = Asc.c_oAscAlignH.Center;
-                } else if ('right' == type) {
-                    hAlign = Asc.c_oAscAlignH.Right;
-                }
-
-                var properties = new Asc.asc_CImgProperty();
-                properties.put_PositionH(new Asc.CImagePositionH());
-                properties.get_PositionH().put_UseAlign(true);
-                properties.get_PositionH().put_Align(hAlign);
-                properties.get_PositionH().put_RelativeFrom(Asc.c_oAscRelativeFromH.Page);
-
-                me.api.ImgApply(properties);
-            },
-
-            onMoveText: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    properties = new Asc.asc_CImgProperty();
-
-                properties.put_PositionV(new Asc.CImagePositionV());
-                properties.get_PositionV().put_UseAlign(true);
-                properties.get_PositionV().put_RelativeFrom($target.is(':checked') ? Asc.c_oAscRelativeFromV.Paragraph : Asc.c_oAscRelativeFromV.Page);
-
-                me.api.ImgApply(properties);
-            },
-
-            onOverlap: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    properties = new Asc.asc_CImgProperty();
-
-                properties.put_AllowOverlap($target.is(':checked'));
-
-                me.api.ImgApply(properties);
-            },
-
-            onWrapDistance: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    value = $target.val(),
-                    properties = new Asc.asc_CImgProperty(),
-                    paddings = new Asc.asc_CPaddings();
-
-
-                $('.chart-wrap .distance .item-after').text(value + ' ' + _metricText);
-
-                value = Common.Utils.Metric.fnRecalcToMM(parseInt(value));
-
-                paddings.put_Top(value);
-                paddings.put_Right(value);
-                paddings.put_Bottom(value);
-                paddings.put_Left(value);
-
-                properties.put_Paddings(paddings);
-
-                me.api.ImgApply(properties);
-            },
-
-            onWrapDistanceChanging: function (e) {
-                var $target = $(e.currentTarget);
-                $('.chart-wrap .distance .item-after').text($target.val() + ' ' + _metricText);
-            },
-
-            onBorderSize: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    value = $target.val(),
-                    image = new Asc.asc_CImgProperty(),
-                    shape = new Asc.asc_CShapeProperty(),
-                    stroke = new Asc.asc_CStroke();
-
-                value = borderSizeTransform.sizeByIndex(parseInt(value));
-
-                if (value < 0.01) {
-                    stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
-                } else {
-                    stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
-                    if (_borderColor == 'transparent')
-                        stroke.put_color(Common.Utils.ThemeColor.getRgbColor({color: '000000', effectId: 29}));
-                    else
-                        stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(_borderColor)));
-                    stroke.put_width(value * 25.4 / 72.0);
-                }
-
-                shape.put_stroke(stroke);
-                image.put_ShapeProperties(shape);
-
-                me.api.ImgApply(image);
-                me._initBorderColorView(); // when select STROKE_NONE or change from STROKE_NONE to STROKE_COLOR
-            },
-
-            onBorderSizeChanging: function (e) {
-                var $target = $(e.currentTarget);
-                $('#edit-chart-bordersize .item-after').text(borderSizeTransform.sizeByIndex($target.val()) + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt));
-            },
-
-            onFillColor: function(palette, color) {
-                var me = this;
-
-                if (me.api) {
-                    var image = new Asc.asc_CImgProperty(),
-                        shape = new Asc.asc_CShapeProperty(),
-                        fill = new Asc.asc_CShapeFill();
-
-                    if (color == 'transparent') {
-                        fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
-                        fill.put_fill(null);
-                    } else {
-                        fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
-                        fill.put_fill(new Asc.asc_CFillSolid());
-                        fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
-                    }
-
-                    shape.put_fill(fill);
-                    image.put_ShapeProperties(shape);
-
-                    me.api.ImgApply(image);
-                }
-            },
-
-            onBorderColor: function (palette, color) {
-                var me = this,
-                    currentShape = _shapeObject ? _shapeObject.get_ShapeProperties() : null;
-
-                $('#edit-chart-bordercolor .color-preview').css('background-color', ('transparent' == color) ? color : ('#' + (_.isObject(color) ? color.color : color)));
-                _borderColor = color;
-
-                if (me.api && currentShape && currentShape.get_stroke().get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
-                    var image = new Asc.asc_CImgProperty(),
-                        shape = new Asc.asc_CShapeProperty(),
-                        stroke = new Asc.asc_CStroke();
-
-                    if (currentShape.get_stroke().get_width() < 0.01) {
-                        stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
-                    } else {
-                        stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
-                        stroke.put_color(Common.Utils.ThemeColor.getRgbColor(color));
-                        stroke.put_width(currentShape.get_stroke().get_width());
-                        stroke.asc_putPrstDash(currentShape.get_stroke().asc_getPrstDash());
-                    }
-
-                    shape.put_stroke(stroke);
-                    image.put_ShapeProperties(shape);
-
-                    me.api.ImgApply(image);
-                }
-            },
-
-            // API handlers
-
-            onApiFocusObject: function (objects) {
-                _stack = objects;
-
-                var charts = [],
-                    shapes = [];
-
-                _.each(_stack, function (object) {
-                    if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image) {
-                        if (object.get_ObjectValue() && object.get_ObjectValue().get_ChartProperties()) {
-                            charts.push(object);
-                        }
-                        if (object.get_ObjectValue() && object.get_ObjectValue().get_ShapeProperties()) {
-                            shapes.push(object);
-                        }
-                    }
-                });
-
-                var getTopObject = function(array) {
-                    if (array.length > 0) {
-                        var object = array[array.length - 1]; // get top
-                        return object.get_ObjectValue();
-                    } else {
-                        return undefined;
-                    }
-                };
-
-                this._chartObject = getTopObject(charts);
-                _shapeObject = getTopObject(shapes);
-            },
-
-            // Helpers
-
-            _updateChartStyles: function(styles) {
-            },
-
-            _uiTransformByWrap: function(type) {
-                $('.chart-wrap .align')[('inline' == type) ? 'hide' : 'show']();
-                $('.chart-wrap .distance')[('behind' == type || 'infront' == type) ? 'hide' : 'show']();
-                $('#edit-chart-movetext').toggleClass('disabled', ('inline' == type));
-            },
-
-            _closeIfNeed: function () {
-                if (!this._isChartInStack()) {
-                    DE.getController('EditContainer').hideModal();
-                }
-            },
-
-            _isChartInStack: function () {
-                var chartExist = false;
-
-                _.some(_stack, function(object) {
-                    if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image) {
-                        if (object.get_ObjectValue() && object.get_ObjectValue().get_ChartProperties()) {
-                            chartExist = true;
-                            return true;
-                        }
-                    }
-                });
-
-                return chartExist;
-            }
-        };
-    })(), DE.Controllers.EditChart || {}))
-});

apps/documenteditor/mobile/app/controller/edit/EditContainer.js

@@ -1,403 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditContainer.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 9/27/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-define([
-    'core',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (core, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.EditContainer = Backbone.Controller.extend(_.extend((function() {
-        // Private
-        var _settings = [],
-            _headerType = 1,
-            _activeTab;
-
-        return {
-            models: [],
-            collections: [],
-            views: [],
-
-            initialize: function() {
-                //
-            },
-
-            setApi: function(api) {
-                this.api = api;
-                this.api.asc_registerCallback('asc_onFocusObject',        _.bind(this.onApiFocusObject, this));
-            },
-
-            onLaunch: function() {
-                //
-            },
-
-            showModal: function() {
-                var me = this,
-                    mainView = DE.getController('Editor').getView('Editor').f7View,
-                    isAndroid = Framework7.prototype.device.android === true;
-
-                if ($$('.container-edit.modal-in').length > 0) {
-                    // myApp.closeModal('.picker-modal.edit.modal-in');
-                    // me.fireEvent('editcontainer:error', [this, 'alreadyOpen']);
-                    return;
-                }
-
-                uiApp.closeModal();
-
-                me._showByStack(Common.SharedSettings.get('phone'));
-
-                DE.getController('Toolbar').getView('Toolbar').hideSearch();
-            },
-
-            hideModal: function () {
-                if (this.picker) {
-                    uiApp.closeModal(this.picker);
-                }
-            },
-
-            _emptyEditController: function () {
-                var layout =
-                    '<div class="content-block inset">' +
-                        '<div class="content-block-inner"> ' +
-                            '<p>Select object to edit</p>' +
-                        '</div>' +
-                    '</div>';
-
-                return {
-                    caption: this.textSettings,
-                    layout: layout
-                }
-            },
-
-            _layoutEditorsByStack: function () {
-                var me = this,
-                    editors = [];
-
-                if (_settings.length < 1) {
-                    editors.push(me._emptyEditController());
-                } else {
-                    if (_.contains(_settings, 'text')) {
-                        editors.push({
-                            caption: me.textText,
-                            id: 'edit-text',
-                            layout: DE.getController('EditText').getView('EditText').rootLayout()
-                        })
-                    }
-                    if (_.contains(_settings, 'paragraph')) {
-                        editors.push({
-                            caption: me.textParagraph,
-                            id: 'edit-paragraph',
-                            layout: DE.getController('EditParagraph').getView('EditParagraph').rootLayout()
-                        })
-                    }
-                    if (_.contains(_settings, 'table')) {
-                        editors.push({
-                            caption: me.textTable,
-                            id: 'edit-table',
-                            layout: DE.getController('EditTable').getView('EditTable').rootLayout()
-                        })
-                    }
-                    if (_.contains(_settings, 'header')) {
-                        editors.push({
-                            caption: _headerType==2 ? me.textFooter : me.textHeader,
-                            id: 'edit-header',
-                            layout: DE.getController('EditHeader').getView('EditHeader').rootLayout()
-                        })
-                    }
-                    if (_.contains(_settings, 'shape')) {
-                        editors.push({
-                            caption: me.textShape,
-                            id: 'edit-shape',
-                            layout: DE.getController('EditShape').getView('EditShape').rootLayout()
-                        })
-                    }
-                    if (_.contains(_settings, 'image')) {
-                        editors.push({
-                            caption: me.textImage,
-                            id: 'edit-image',
-                            layout: DE.getController('EditImage').getView('EditImage').rootLayout()
-                        })
-                    }
-                    if (_.contains(_settings, 'chart')) {
-                        editors.push({
-                            caption: me.textChart,
-                            id: 'edit-chart',
-                            layout: DE.getController('EditChart').getView('EditChart').rootLayout()
-                        })
-                    }
-                    if (_.contains(_settings, 'hyperlink')) {
-                        editors.push({
-                            caption: me.textHyperlink,
-                            id: 'edit-link',
-                            layout: DE.getController('EditHyperlink').getView('EditHyperlink').rootLayout()
-                        })
-                    }
-                }
-
-                return editors;
-            },
-
-            _showByStack: function(isPhone) {
-                var me = this,
-                    mainView = DE.getController('Editor').getView('Editor').f7View,
-                    isAndroid = Framework7.prototype.device.android === true,
-                    layoutEditors = me._layoutEditorsByStack();
-
-                if ($$('.container-edit.modal-in').length > 0) {
-                    return;
-                }
-
-                // Navigation bar
-                var $layoutNavbar = $(
-                    '<div class="navbar">' +
-                        '<div data-page="index" class="navbar-inner">' +
-                            '<div class="center sliding categories"></div>' +
-                            (isPhone ? '<div class="right sliding"><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a></div>' : '') +
-                        '</div>' +
-                    '</div>'
-                );
-
-                if (layoutEditors.length < 2) {
-                    $layoutNavbar
-                        .find('.center')
-                        .removeClass('categories')
-                        .html(layoutEditors[0].caption);
-                } else {
-                    if (isAndroid) {
-                        $layoutNavbar
-                            .find('.center')
-                            .append('<div class="toolbar tabbar"><div data-page="index" class="toolbar-inner"></div></div>');
-
-                        _.each(layoutEditors, function (layout, index) {
-                            $layoutNavbar
-                                .find('.toolbar-inner')
-                                .append(
-                                    '<a href="#' + layout.id + '" class="tab-link ' + (index < 1 ? 'active' : '') + '">' + layout.caption + '</a>'
-                                );
-                        });
-                        $layoutNavbar
-                            .find('.toolbar-inner')
-                            .append('<span class="tab-link-highlight" style="width: ' + (100/layoutEditors.length) + '%;"></span>');
-                    } else {
-                        $layoutNavbar
-                            .find('.center')
-                            .append('<div class="buttons-row"></div>');
-
-                        _.each(layoutEditors, function (layout, index) {
-                            $layoutNavbar
-                                .find('.buttons-row')
-                                .append(
-                                    '<a href="#' + layout.id + '" class="tab-link button ' + (index < 1 ? 'active' : '') + '">' + layout.caption + '</a>'
-                                );
-                        });
-                    }
-                }
-
-
-                // Content
-
-                var $layoutPages = $(
-                    '<div class="pages">' +
-                        '<div class="page" data-page="index">' +
-                            '<div class="page-content tabs">' +
-                            '</div>' +
-                        '</div>' +
-                    '</div>'
-                );
-
-                _.each(layoutEditors, function (editor, index) {
-                    $layoutPages.find('.tabs').append(
-                        '<div id="' + editor.id + '" class="tab view ' + (index < 1 ? 'active' : '') + '">' +
-                            '<div class="pages">' +
-                                '<div class="page no-navbar">' +
-                                    '<div class="page-content">' +
-                                        editor.layout +
-                                    '</div>' +
-                                '</div>' +
-                            '</div>' +
-                        '</div>'
-                    );
-                });
-
-                if (isPhone) {
-                    me.picker = $$(uiApp.pickerModal(
-                        '<div class="picker-modal settings container-edit">' +
-                            '<div class="view edit-root-view navbar-through">' +
-                                $layoutNavbar.prop('outerHTML') +
-                                $layoutPages.prop('outerHTML') +
-                            '</div>' +
-                        '</div>'
-                    )).on('opened', function () {
-                        if (_.isFunction(me.api.asc_OnShowContextMenu)) {
-                            me.api.asc_OnShowContextMenu()
-                        }
-                    }).on('close', function (e) {
-                        mainView.showNavbar();
-                    }).on('closed', function () {
-                        if (_.isFunction(me.api.asc_OnHideContextMenu)) {
-                            me.api.asc_OnHideContextMenu()
-                        }
-                    });
-                    mainView.hideNavbar();
-                } else {
-                    me.picker = uiApp.popover(
-                        '<div class="popover settings container-edit">' +
-                            '<div class="popover-angle"></div>' +
-                            '<div class="popover-inner">' +
-                                '<div class="content-block">' +
-                                '<div class="view popover-view edit-root-view navbar-through">' +
-                                    $layoutNavbar.prop('outerHTML') +
-                                    $layoutPages.prop('outerHTML') +
-                                '</div>' +
-                            '</div>' +
-                        '</div>',
-                        $$('#toolbar-edit')
-                    );
-
-                    // Prevent hide overlay. Conflict popover and modals.
-                    var $overlay = $('.modal-overlay');
-
-                    $$(me.picker).on('opened', function () {
-                        $overlay.on('removeClass', function () {
-                            if (!$overlay.hasClass('modal-overlay-visible')) {
-                                $overlay.addClass('modal-overlay-visible')
-                            }
-                        });
-
-                        if (_.isFunction(me.api.asc_OnShowContextMenu)) {
-                            me.api.asc_OnShowContextMenu()
-                        }
-                    }).on('close', function () {
-                        $overlay.off('removeClass');
-                        $overlay.removeClass('modal-overlay-visible')
-                    }).on('closed', function () {
-                        if (_.isFunction(me.api.asc_OnHideContextMenu)) {
-                            me.api.asc_OnHideContextMenu()
-                        }
-                    });
-                }
-
-                $('.container-edit .tab').single('show', function (e) {
-                    Common.NotificationCenter.trigger('editcategory:show', e);
-                });
-
-                if (isAndroid) {
-                    $$('.view.edit-root-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
-                    $$('.view.edit-root-view .navbar').prependTo('.view.edit-root-view > .pages > .page');
-                }
-
-                me.rootView = uiApp.addView('.edit-root-view', {
-                    dynamicNavbar: true,
-                    domCache: true
-                });
-
-                Common.NotificationCenter.trigger('editcontainer:show');
-
-                if (_activeTab === 'edit-link') {
-                    uiApp.showTab('#' + _activeTab, false);
-                }
-            },
-
-            // API handlers
-
-            onApiFocusObject: function (objects) {
-                _settings = [];
-                _activeTab = undefined;
-
-                // Paragraph  : 0,
-                // Table      : 1,
-                // Image      : 2,
-                // Header     : 3,
-                // Shape      : 4,
-                // Slide      : 5,
-                // Chart      : 6,
-                // MailMerge  : 7,
-                // TextArt    : 8
-
-                _.each(objects, function(object) {
-                    var type = object.get_ObjectType();
-
-                    if (Asc.c_oAscTypeSelectElement.Paragraph == type) {
-                        _settings.push('text', 'paragraph');
-                    } else if (Asc.c_oAscTypeSelectElement.Table == type) {
-                        _settings.push('table');
-                    } else if (Asc.c_oAscTypeSelectElement.Image == type) {
-                        if (object.get_ObjectValue().get_ChartProperties()) {
-                            _settings.push('chart');
-                        } else if (object.get_ObjectValue().get_ShapeProperties()) {
-                            _settings.push('shape');
-                        } else {
-                            _settings.push('image');
-                        }
-                    } else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) {
-                        _settings.push('hyperlink');
-                        if (_.isUndefined(_activeTab)) {
-                            _activeTab = 'edit-link';
-                        }
-                    } else if (Asc.c_oAscTypeSelectElement.Header == type) {
-                        _settings.push('header');
-                        _headerType = object.get_ObjectValue().get_Type();
-                    }
-                });
-
-                // Exclude shapes if chart exist
-                if (_settings.indexOf('chart') > -1) {
-                    _settings = _.without(_settings, 'shape');
-                }
-
-                _settings = _.uniq(_settings);
-            },
-
-            textSettings: 'Settings',
-            textText: 'Text',
-            textParagraph: 'Paragraph',
-            textTable: 'Table',
-            textShape: 'Shape',
-            textImage: 'Image',
-            textChart: 'Chart',
-            textHyperlink: 'Hyperlink',
-            textHeader: 'Header',
-            textFooter: 'Footer'
-        }
-    })(), DE.Controllers.EditContainer || {}))
-});

apps/documenteditor/mobile/app/controller/edit/EditHeader.js

@@ -1,194 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditHeader.js
- *  Document Editor
- *
- *  Created by Julia Radzhabova on 2/15/19
- *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'core',
-    'documenteditor/mobile/app/view/edit/EditHeader',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (core, view, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.EditHeader = Backbone.Controller.extend(_.extend((function() {
-        // Private
-        var _stack = [],
-            _headerObject = undefined,
-            _startAt = 1;
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'EditHeader'
-            ],
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-                Common.NotificationCenter.on('editcategory:show',  _.bind(this.categoryShow, this));
-
-                this.addListeners({
-                    'EditHeader': {
-                        'page:show'     : this.onPageShow
-                    }
-                });
-            },
-
-            setApi: function (api) {
-                var me = this;
-                me.api = api;
-
-                me.api.asc_registerCallback('asc_onFocusObject',        _.bind(me.onApiFocusObject, me));
-            },
-
-            onLaunch: function () {
-                this.createView('EditHeader').render();
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                $('#header-diff-first input:checkbox').single('change',         _.bind(me.onDiffFirst, me));
-                $('#header-diff-odd input:checkbox').single('change',           _.bind(me.onDiffOdd, me));
-                $('#header-same-as input:checkbox').single('change',            _.bind(me.onSameAs, me));
-                $('#header-numbering-continue input:checkbox').single('change', _.bind(me.onNumberingContinue, me));
-                $('#header-numbering-start .button').single('click',            _.bind(me.onStartAt, me));
-
-                me.initSettings();
-            },
-
-            categoryShow: function (e) {
-                var $target = $(e.currentTarget);
-
-                if ($target && $target.prop('id') === 'edit-header') {
-                    this.initSettings();
-                }
-            },
-
-            onPageShow: function () {
-                var me = this;
-                me.initSettings();
-            },
-
-            initSettings: function () {
-                var me = this;
-
-                if (_headerObject) {
-                    $('#header-diff-first input:checkbox').prop('checked', _headerObject.get_DifferentFirst());
-                    $('#header-diff-odd input:checkbox').prop('checked', _headerObject.get_DifferentEvenOdd());
-
-                    var value = _headerObject.get_LinkToPrevious();
-                    $('#header-same-as input:checkbox').prop('checked', !!value);
-                    $('#header-same-as').toggleClass('disabled', value===null);
-
-                    value = _headerObject.get_StartPageNumber();
-                    $('#header-numbering-continue input:checkbox').prop('checked', value<0);
-                    $('#header-numbering-start').toggleClass('disabled', value<0);
-                    if (value>=0)
-                        _startAt=value;
-                    $('#header-numbering-start .item-after label').text(_startAt);
-                }
-            },
-
-            // Public
-            // Handlers
-
-            onDiffFirst: function (e) {
-                var $checkbox = $(e.currentTarget);
-                this.api.HeadersAndFooters_DifferentFirstPage($checkbox.is(':checked'));
-            },
-
-            onDiffOdd: function (e) {
-                var $checkbox = $(e.currentTarget);
-                this.api.HeadersAndFooters_DifferentOddandEvenPage($checkbox.is(':checked'));
-            },
-
-            onSameAs: function (e) {
-                var $checkbox = $(e.currentTarget);
-                this.api.HeadersAndFooters_LinkToPrevious($checkbox.is(':checked'));
-            },
-
-            onNumberingContinue: function (e) {
-                var $checkbox = $(e.currentTarget);
-                $('#header-numbering-start').toggleClass('disabled', $checkbox.is(':checked'));
-                this.api.asc_SetSectionStartPage($checkbox.is(':checked') ? -1 : _startAt);
-            },
-
-            onStartAt: function (e) {
-                var $button = $(e.currentTarget),
-                    start = _startAt;
-
-                if ($button.hasClass('decrement')) {
-                    start = Math.max(1, --start);
-                } else {
-                    start = Math.min(2147483646, ++start);
-                }
-                _startAt = start;
-
-                $('#header-numbering-start .item-after label').text(start);
-
-                this.api.asc_SetSectionStartPage(start);
-            },
-
-            // API handlers
-
-            onApiFocusObject: function (objects) {
-                _stack = objects;
-
-                var headers = [];
-
-                _.each(_stack, function(object) {
-                    if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Header) {
-                        headers.push(object);
-                    }
-                });
-
-                if (headers.length > 0) {
-                    var object = headers[headers.length - 1]; // get top
-                    _headerObject = object.get_ObjectValue();
-                } else {
-                    _headerObject = undefined;
-                }
-            }
-        }
-    })(), DE.Controllers.EditHeader || {}))
-});

apps/documenteditor/mobile/app/controller/edit/EditHyperlink.js

@@ -1,179 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditLink.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 11/7/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-
-define([
-    'core',
-    'documenteditor/mobile/app/view/edit/EditHyperlink'
-], function (core) {
-    'use strict';
-
-    DE.Controllers.EditHyperlink = Backbone.Controller.extend(_.extend((function() {
-        // Private
-        var _stack = [],
-            _linkObject = undefined;
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'EditHyperlink'
-            ],
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-
-            },
-
-            setApi: function (api) {
-                var me = this;
-                me.api = api;
-
-                me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onApiFocusObject, me));
-            },
-
-            onLaunch: function () {
-                this.createView('EditHyperlink').render();
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                $('#edit-link-edit').single('click',    _.bind(me.onEditLink, me));
-                $('#edit-link-remove').single('click',  _.bind(me.onRemoveLink, me));
-
-                me.initSettings();
-            },
-
-            initSettings: function () {
-                if (_linkObject) {
-                    if (_linkObject.get_Value()) {
-                        $('#edit-link-url input').val([_linkObject.get_Value().replace(new RegExp(" ", 'g'), "%20")]);
-                    } else {
-                        $('#edit-link-url input').val('');
-                    }
-
-                    if (!_.isNull(_linkObject.get_Text())) {
-                        $('#edit-link-display input').val([_linkObject.get_Text()]);
-                    }
-
-                    $('#edit-link-tip input').val([_linkObject.get_ToolTip()]);
-
-                    $('#edit-link-edit').toggleClass('disabled', _.isEmpty($('#edit-link-url input').val()));
-                }
-            },
-
-
-            // Handlers
-
-            onEditLink: function () {
-                var me      = this,
-                    url     = $('#edit-link-url input').val(),
-                    display = $('#edit-link-display input').val(),
-                    tip     = $('#edit-link-tip input').val(),
-                    urltype = me.api.asc_getUrlType($.trim(url)),
-                    isEmail = (urltype == 2);
-
-                if (urltype < 1) {
-                    uiApp.alert(me.txtNotUrl, me.notcriticalErrorTitle);
-                    return;
-                }
-
-                url = url.replace(/^\s+|\s+$/g,'');
-
-                if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) )
-                    url = (isEmail ? 'mailto:' : 'http://' ) + url;
-
-                url = url.replace(new RegExp("%20",'g')," ");
-
-                var props = new Asc.CHyperlinkProperty();
-                props.put_Value(url);
-                props.put_Text(_.isEmpty(display) ? url : display);
-                props.put_ToolTip(tip);
-                if (_linkObject)
-                    props.put_InternalHyperlink(_linkObject.get_InternalHyperlink());
-
-                me.api.change_Hyperlink(props);
-
-                DE.getController('EditContainer').hideModal();
-            },
-
-            onRemoveLink: function () {
-                this.api && this.api.remove_Hyperlink(_linkObject);
-                DE.getController('EditContainer').hideModal();
-            },
-
-            // API handlers
-
-            onApiFocusObject: function (objects) {
-                _stack = objects;
-
-                var links = [];
-
-                _.each(_stack, function (object) {
-                    if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
-                        links.push(object);
-                    }
-                });
-
-                if (links.length > 0) {
-                    var object = links[links.length - 1]; // get top
-                    _linkObject = object.get_ObjectValue();
-                } else {
-                    _linkObject = undefined;
-                }
-            },
-
-            // Helpers
-
-            _closeIfNeed: function () {
-                if (!this._isImageInStack()) {
-                    DE.getController('EditContainer').hideModal();
-                }
-            },
-
-            textEmptyImgUrl: 'You need to specify image URL.',
-            txtNotUrl: 'This field should be a URL in the format \"http://www.example.com\"',
-            notcriticalErrorTitle: 'Warning'
-        };
-    })(), DE.Controllers.EditHyperlink || {}))
-});

apps/documenteditor/mobile/app/controller/edit/EditImage.js

@@ -1,408 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditImage.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 11/3/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'core',
-    'documenteditor/mobile/app/view/edit/EditImage',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (core, view, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.EditImage = Backbone.Controller.extend(_.extend((function() {
-        // Private
-        var _stack = [],
-            _imageObject = undefined,
-            _metricText = Common.Utils.Metric.getCurrentMetricName();
-
-        var wrapTypesTransform = (function() {
-            var map = [
-                { ui:'inline', sdk: Asc.c_oAscWrapStyle2.Inline },
-                { ui:'square', sdk: Asc.c_oAscWrapStyle2.Square },
-                { ui:'tight', sdk: Asc.c_oAscWrapStyle2.Tight },
-                { ui:'through', sdk: Asc.c_oAscWrapStyle2.Through },
-                { ui:'top-bottom', sdk: Asc.c_oAscWrapStyle2.TopAndBottom },
-                { ui:'behind', sdk: Asc.c_oAscWrapStyle2.Behind },
-                { ui:'infront', sdk: Asc.c_oAscWrapStyle2.InFront }
-            ];
-
-            return {
-                sdkToUi: function(type) {
-                    var record = map.filter(function(obj) {
-                        return obj.sdk === type;
-                    })[0];
-                    return record ? record.ui : '';
-                },
-
-                uiToSdk: function(type) {
-                    var record = map.filter(function(obj) {
-                        return obj.ui === type;
-                    })[0];
-                    return record ? record.sdk : 0;
-                },
-            }
-        })();
-
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'EditImage'
-            ],
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-
-                this.addListeners({
-                    'EditImage': {
-                        'page:show': this.onPageShow
-                    }
-                });
-            },
-
-            setApi: function (api) {
-                var me = this;
-                me.api = api;
-
-                me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onApiFocusObject, me));
-            },
-
-            onLaunch: function () {
-                this.createView('EditImage').render();
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                $('#image-default').single('click', _.bind(me.onDefaulSize, me));
-                $('#image-remove').single('click',  _.bind(me.onRemoveImage, me));
-
-                me.initSettings();
-            },
-
-            onPageShow: function (view, pageId) {
-                var me = this;
-
-                $('.image-wrap .image-wrap-types li').single('click',       _.buffered(me.onWrapType, 100, me));
-                $('.image-wrap .align a').single('click',                   _.bind(me.onAlign, me));
-                $('#edit-image-movetext input').single('change',            _.bind(me.onMoveText, me));
-                $('#edit-image-overlap input').single('change',             _.bind(me.onOverlap, me));
-                $('.image-wrap .distance input').single('change touchend',  _.buffered(me.onWrapDistance, 100, me));
-                $('.image-wrap .distance input').single('input',            _.bind(me.onWrapDistanceChanging, me));
-
-                $('#edit-image-file').single('click',                       _.bind(me.onReplaceByFile, me));
-                $('.edit-image-url-link .button, .edit-image-url-link .list-button').single('click', _.bind(me.onReplaceByUrl, me));
-
-                $('.image-reorder a').single('click',                       _.bind(me.onReorder, me));
-
-                me.initSettings(pageId);
-            },
-
-            initSettings: function (pageId) {
-                var me = this;
-
-                _metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
-
-                if (_imageObject) {
-                    if (pageId == '#edit-image-wrap-view') {
-                        me._initWrapView();
-                    }
-                }
-            },
-
-            _initWrapView: function() {
-                // Wrap type
-                var me = this,
-                    wrapping = _imageObject.get_WrappingStyle(),
-                    $imageWrapInput = $('.image-wrap input'),
-                    imageWrapType = wrapTypesTransform.sdkToUi(wrapping);
-
-                $imageWrapInput.val([imageWrapType]);
-                me._uiTransformByWrap(imageWrapType);
-
-                // Wrap align
-                var imageHAlign = _imageObject.get_PositionH().get_Align();
-
-                $('.image-wrap .align a[data-type=left]').toggleClass('active', imageHAlign == Asc.c_oAscAlignH.Left);
-                $('.image-wrap .align a[data-type=center]').toggleClass('active', imageHAlign == Asc.c_oAscAlignH.Center);
-                $('.image-wrap .align a[data-type=right]').toggleClass('active', imageHAlign == Asc.c_oAscAlignH.Right);
-
-
-                // Wrap flags
-                $('#edit-image-movetext input').prop('checked', _imageObject.get_PositionV().get_RelativeFrom() == Asc.c_oAscRelativeFromV.Paragraph);
-                $('#edit-image-overlap input').prop('checked', _imageObject.get_AllowOverlap());
-
-                // Wrap distance
-                var paddings = _imageObject.get_Paddings();
-                if (paddings) {
-                    var distance = Common.Utils.Metric.fnRecalcFromMM(paddings.get_Top());
-                    $('.image-wrap .distance input').val(distance);
-                    $('.image-wrap .distance .item-after').text(distance + ' ' + _metricText);
-                }
-            },
-
-            // Public
-
-            getImage: function () {
-                return _imageObject;
-            },
-
-            // Handlers
-
-            onDefaulSize: function () {
-                var me = this;
-
-                if (me.api) {
-                    var imgsize = me.api.get_OriginalSizeImage(),
-                        properties = new Asc.asc_CImgProperty();
-                    if (imgsize) {
-                        properties.put_Width(imgsize.get_ImageWidth());
-                        properties.put_Height(imgsize.get_ImageHeight());
-                        properties.put_ResetCrop(true);
-                        me.api.ImgApply(properties);
-                    }
-                }
-            },
-
-            onRemoveImage: function () {
-                this.api.asc_Remove();
-                DE.getController('EditContainer').hideModal();
-            },
-
-            onWrapType: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget).find('input'),
-                    value = $target.val(),
-                    properties = new Asc.asc_CImgProperty();
-
-                me._uiTransformByWrap(value);
-
-                var sdkType = wrapTypesTransform.uiToSdk(value);
-
-                properties.put_WrappingStyle(sdkType);
-
-                me.api.ImgApply(properties);
-            },
-
-            onAlign: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    type = $target.data('type');
-
-                $('.image-wrap .align a').removeClass('active');
-                $target.addClass('active');
-
-                var hAlign = Asc.c_oAscAlignH.Left;
-
-                if ('center' == type) {
-                    hAlign = Asc.c_oAscAlignH.Center;
-                } else if ('right' == type) {
-                    hAlign = Asc.c_oAscAlignH.Right;
-                }
-
-                var properties = new Asc.asc_CImgProperty();
-                properties.put_PositionH(new Asc.CImagePositionH());
-                properties.get_PositionH().put_UseAlign(true);
-                properties.get_PositionH().put_Align(hAlign);
-                properties.get_PositionH().put_RelativeFrom(Asc.c_oAscRelativeFromH.Page);
-
-                me.api.ImgApply(properties);
-            },
-
-            onMoveText: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    properties = new Asc.asc_CImgProperty();
-
-                properties.put_PositionV(new Asc.CImagePositionV());
-                properties.get_PositionV().put_UseAlign(true);
-                properties.get_PositionV().put_RelativeFrom($target.is(':checked') ? Asc.c_oAscRelativeFromV.Paragraph : Asc.c_oAscRelativeFromV.Page);
-
-                me.api.ImgApply(properties);
-            },
-
-            onOverlap: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    properties = new Asc.asc_CImgProperty();
-
-                properties.put_AllowOverlap($target.is(':checked'));
-
-                me.api.ImgApply(properties);
-            },
-
-            onWrapDistance: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    value = $target.val(),
-                    properties = new Asc.asc_CImgProperty(),
-                    paddings = new Asc.asc_CPaddings();
-
-                $('.image-wrap .distance .item-after').text(value + ' ' + _metricText);
-
-                value = Common.Utils.Metric.fnRecalcToMM(parseInt(value));
-
-                paddings.put_Top(value);
-                paddings.put_Right(value);
-                paddings.put_Bottom(value);
-                paddings.put_Left(value);
-
-                properties.put_Paddings(paddings);
-
-                me.api.ImgApply(properties);
-            },
-
-            onWrapDistanceChanging: function (e) {
-                var $target = $(e.currentTarget);
-                $('.image-wrap .distance .item-after').text($target.val() + ' ' + _metricText);
-            },
-
-            onReplaceByFile: function () {
-                this.api.ChangeImageFromFile();
-                DE.getController('EditContainer').hideModal();
-            },
-
-            onReplaceByUrl: function () {
-                var me = this,
-                    $input = $('.edit-image-url-link input[type=url]');
-
-                if ($input) {
-                    var value = ($input.val()).replace(/ /g, '');
-
-                    if (!_.isEmpty(value)) {
-                        if ((/((^https?)|(^ftp)):\/\/.+/i.test(value))) {
-                            DE.getController('EditContainer').hideModal();
-                            _.defer(function () {
-                                var image = new Asc.asc_CImgProperty();
-                                image.put_ImageUrl(value);
-                                me.api.ImgApply(image);
-                            });
-                        } else {
-                            uiApp.alert(me.txtNotUrl, me.notcriticalErrorTitle);
-                        }
-                    } else {
-                        uiApp.alert(me.textEmptyImgUrl, me.notcriticalErrorTitle);
-                    }
-                }
-            },
-
-            onReorder: function (e) {
-                var $target = $(e.currentTarget),
-                    type = $target.data('type');
-
-                var properties = new Asc.asc_CImgProperty();
-
-                if ('all-up' == type) {
-                    properties.put_ChangeLevel(Asc.c_oAscChangeLevel.BringToFront);
-                } else if ('all-down' == type) {
-                    properties.put_ChangeLevel(Asc.c_oAscChangeLevel.SendToBack);
-                } else if ('move-up' == type) {
-                    properties.put_ChangeLevel(Asc.c_oAscChangeLevel.BringForward);
-                } else if ('move-down' == type) {
-                    properties.put_ChangeLevel(Asc.c_oAscChangeLevel.BringBackward);
-                }
-
-                this.api.ImgApply(properties);
-            },
-
-            // API handlers
-
-            onApiFocusObject: function (objects) {
-                _stack = objects;
-
-                var images = [];
-
-                _.each(_stack, function (object) {
-                    if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image) {
-                        var imageObject = object.get_ObjectValue();
-                        if (imageObject && _.isNull(imageObject.get_ShapeProperties()) && _.isNull(imageObject.get_ChartProperties())) {
-                            images.push(object);
-                        }
-                    }
-                });
-
-                if (images.length > 0) {
-                    var object = images[images.length - 1]; // get top
-                    _imageObject = object.get_ObjectValue();
-                } else {
-                    _imageObject = undefined;
-                }
-            },
-
-            // Helpers
-
-            _uiTransformByWrap: function(type) {
-                $('.image-wrap .align')[('inline' == type) ? 'hide' : 'show']();
-                $('.image-wrap .distance')[('inline' == type || 'behind' == type || 'infront' == type) ? 'hide' : 'show']();
-                $('#edit-image-movetext').toggleClass('disabled', ('inline' == type));
-            },
-
-            _closeIfNeed: function () {
-                if (!this._isImageInStack()) {
-                    DE.getController('EditContainer').hideModal();
-                }
-            },
-
-            _isImageInStack: function () {
-                var imageExist = false;
-
-                _.some(_stack, function(object) {
-                    if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image) {
-                        var imageObject = object.get_ObjectValue();
-                        if (imageObject && _.isNull(imageObject.get_imageProperties()) && _.isNull(imageObject.get_ChartProperties())) {
-                            imageExist = true;
-                            return true;
-                        }
-                    }
-                });
-
-                return imageExist;
-            },
-
-            textEmptyImgUrl: 'You need to specify image URL.',
-            txtNotUrl: 'This field should be a URL in the format \"http://www.example.com\"',
-            notcriticalErrorTitle: 'Warning'
-        }
-    })(), DE.Controllers.EditImage || {}))
-});

apps/documenteditor/mobile/app/controller/edit/EditParagraph.js

@@ -1,372 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditParagraph.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/14/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'core',
-    'documenteditor/mobile/app/view/edit/EditParagraph',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (core, view, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.EditParagraph = Backbone.Controller.extend(_.extend((function() {
-        // Private
-        var _paragraphInfo = {},
-            _paragraphProperty = undefined,
-            _styleName,
-            metricText = Common.Utils.Metric.getCurrentMetricName();
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'EditParagraph'
-            ],
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-                Common.NotificationCenter.on('editcategory:show',  _.bind(this.categoryShow, this));
-
-                this.addListeners({
-                    'EditParagraph': {
-                        'page:show'     : this.onPageShow,
-                        'style:click'   : this.onStyleClick
-                    }
-                });
-
-                this._styles = [];
-                this._styleThumbSize = undefined;
-                this._paragraphObject = undefined;
-            },
-
-            setApi: function (api) {
-                var me = this;
-                me.api = api;
-            },
-
-            onLaunch: function () {
-                this.createView('EditParagraph').render();
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                me.initSettings();
-            },
-
-            categoryShow: function (e) {
-                var $target = $(e.currentTarget);
-
-                if ($target && $target.prop('id') === 'edit-paragraph') {
-                    this.initSettings();
-                }
-            },
-
-            onPageShow: function () {
-                var me = this,
-                    paletteBackgroundColor = me.getView('EditParagraph').paletteBackgroundColor;
-
-                $('#paragraph-distance-before .button').single('click',          _.bind(me.onDistanceBefore, me));
-                $('#paragraph-distance-after .button').single('click',           _.bind(me.onDistanceAfter, me));
-                $('#paragraph-spin-first-line .button').single('click',          _.bind(me.onSpinFirstLine, me));
-                $('#paragraph-space input:checkbox').single('change',            _.bind(me.onSpaceBetween, me));
-                $('#paragraph-page-break input:checkbox').single('change',       _.bind(me.onBreakBefore, me));
-                $('#paragraph-page-orphan input:checkbox').single('change',      _.bind(me.onOrphan, me));
-                $('#paragraph-page-keeptogether input:checkbox').single('change',_.bind(me.onKeepTogether, me));
-                $('#paragraph-page-keepnext input:checkbox').single('change',    _.bind(me.onKeepNext, me));
-
-                paletteBackgroundColor && paletteBackgroundColor.on('select',    _.bind(me.onBackgroundColor, me));
-
-                me.initSettings();
-            },
-
-            initSettings: function () {
-                var me = this;
-
-                metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
-                var selectedElements = me.api.getSelectedElements();
-                if (selectedElements && _.isArray(selectedElements)) {
-                    for (var i = selectedElements.length - 1; i >= 0; i--) {
-                        if (Asc.c_oAscTypeSelectElement.Paragraph == selectedElements[i].get_ObjectType()) {
-                            _paragraphProperty = selectedElements[i].get_ObjectValue(); 
-                            break;
-                        }
-                    }
-                }
-
-                if (_paragraphProperty) {
-                    if (_paragraphProperty.get_Ind()===null || _paragraphProperty.get_Ind()===undefined) {
-                        _paragraphProperty.get_Ind().put_FirstLine(0);
-                    }
-                    var firstLineFix = parseFloat(Common.Utils.Metric.fnRecalcFromMM(_paragraphProperty.get_Ind().get_FirstLine()).toFixed(2));
-                    $('#paragraph-spin-first-line .item-after label').text(firstLineFix + ' ' + metricText);
-                }
-
-                if (me._paragraphObject) {
-                    _paragraphInfo.spaceBefore = me._paragraphObject.get_Spacing().get_Before() < 0 ? me._paragraphObject.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(me._paragraphObject.get_Spacing().get_Before());
-                    _paragraphInfo.spaceAfter  = me._paragraphObject.get_Spacing().get_After() < 0 ? me._paragraphObject.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(me._paragraphObject.get_Spacing().get_After());
-                    var distanceBeforeFix = parseFloat(_paragraphInfo.spaceBefore.toFixed(2));
-                    var distanceAfterFix = parseFloat(_paragraphInfo.spaceAfter.toFixed(2));
-                    $('#paragraph-distance-before .item-after label').text(_paragraphInfo.spaceBefore < 0 ? 'Auto' : distanceBeforeFix + ' ' + metricText);
-                    $('#paragraph-distance-after .item-after label').text(_paragraphInfo.spaceAfter < 0 ? 'Auto' : distanceAfterFix + ' ' + metricText);
-
-                    $('#paragraph-space input:checkbox').prop('checked', !me._paragraphObject.get_ContextualSpacing());
-                    $('#paragraph-page-break input:checkbox').prop('checked', me._paragraphObject.get_PageBreakBefore());
-                    $('#paragraph-page-orphan input:checkbox').prop('checked', me._paragraphObject.get_WidowControl());
-                    $('#paragraph-page-keeptogether input:checkbox').prop('checked', me._paragraphObject.get_KeepLines());
-                    $('#paragraph-page-keepnext input:checkbox').prop('checked', me._paragraphObject.get_KeepNext());
-
-
-                    // Background color
-                    var shade = me._paragraphObject.get_Shade(),
-                        backColor = 'transparent';
-
-                    if (!_.isNull(shade) && !_.isUndefined(shade) && shade.get_Value()===Asc.c_oAscShdClear) {
-                        var color = shade.get_Color();
-                        if (color) {
-                            if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
-                                backColor = {
-                                    color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
-                                    effectValue: color.get_value()
-                                };
-                            } else {
-                                backColor = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
-                            }
-                        }
-                    }
-
-                    $('#paragraph-background .color-preview').css('background-color', (backColor === 'transparent') ? backColor : ('#' + (_.isObject(backColor) ? backColor.color : backColor)));
-
-                    var palette = me.getView('EditParagraph').paletteBackgroundColor;
-
-                    if (palette) {
-                        palette.select(backColor);
-                    }
-
-                    $('#paragraph-list input[name=paragraph-style]').val([_styleName]);
-                }
-            },
-
-            onStyleClick: function (view, e) {
-                var $item = $(e.currentTarget).find('input');
-
-                if ($item) {
-                    this.api.put_Style($item.prop('value'));
-                }
-            },
-
-            // Public
-            getStyles: function () {
-                return this._styles || [];
-            },
-
-            getThumbSize: function () {
-                return this._styleThumbSize || {width: 0, height: 0};
-            },
-
-            // Handlers
-
-            onBackgroundColor: function (palette, color) {
-                var me = this;
-
-                $('#paragraph-background .color-preview').css('background-color', (color === 'transparent') ? color : ('#' + (_.isObject(color) ? color.color : color)));
-
-                if (me.api) {
-                    var properties = new Asc.asc_CParagraphProperty();
-
-                    properties.put_Shade(new Asc.asc_CParagraphShd());
-
-                    if (color == 'transparent') {
-                        properties.get_Shade().put_Value(Asc.c_oAscShdNil);
-                    } else {
-                        properties.get_Shade().put_Value(Asc.c_oAscShdClear);
-                        properties.get_Shade().put_Color(Common.Utils.ThemeColor.getRgbColor(color));
-                    }
-
-                    me.api.paraApply(properties);
-                }
-            },
-
-            onDistanceBefore: function (e) {
-                var $button = $(e.currentTarget),
-                    distance = _paragraphInfo.spaceBefore,
-                    step,
-                    maxValue;
-
-                if (Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.pt) {
-                    step = 1;
-                } else {
-                    step = 0.01;
-                }
-
-                maxValue = Common.Utils.Metric.fnRecalcFromMM(558.8);
-
-                if ($button.hasClass('decrement')) {
-                    distance = Math.max(-1, distance - step);
-                } else {
-                    distance = (distance<0) ? 0 : Math.min(maxValue, distance + step);
-                }
-
-                var distanceFix = parseFloat(distance.toFixed(2));
-
-                _paragraphInfo.spaceBefore = distance;
-
-                $('#paragraph-distance-before .item-after label').text(_paragraphInfo.spaceBefore < 0 ? 'Auto' : distanceFix + ' ' + metricText);
-
-                this.api.put_LineSpacingBeforeAfter(0, (_paragraphInfo.spaceBefore < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(_paragraphInfo.spaceBefore));
-            },
-
-            onDistanceAfter: function (e) {
-                var $button = $(e.currentTarget),
-                    distance = _paragraphInfo.spaceAfter,
-                    step,
-                    maxValue;
-
-                if (Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.pt) {
-                    step = 1;
-                } else {
-                    step = 0.01;
-                }
-
-                maxValue = Common.Utils.Metric.fnRecalcFromMM(558.8);
-
-                if ($button.hasClass('decrement')) {
-                    distance = Math.max(-1, distance - step);
-                } else {
-                    distance = (distance<0) ? 0 : Math.min(maxValue, distance + step);
-                }
-
-                var distanceFix = parseFloat(distance.toFixed(2));
-
-                _paragraphInfo.spaceAfter = distance;
-
-                $('#paragraph-distance-after .item-after label').text(_paragraphInfo.spaceAfter < 0 ? 'Auto' : distanceFix + ' ' + metricText);
-                this.api.put_LineSpacingBeforeAfter(1, (_paragraphInfo.spaceAfter < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(_paragraphInfo.spaceAfter));
-            },
-
-            onSpinFirstLine: function(e) {
-                var $button = $(e.currentTarget),
-                    distance = _paragraphProperty.get_Ind().get_FirstLine(),
-                    step,
-                    minValue,
-                    maxValue;
-
-                distance = Common.Utils.Metric.fnRecalcFromMM(distance);
-
-                if (Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.pt) {
-                    step = 1;
-                } else {
-                    step = 0.1;
-                }
-
-                minValue = Common.Utils.Metric.fnRecalcFromMM(-558.7);
-                maxValue = Common.Utils.Metric.fnRecalcFromMM(558.7);
-
-                if ($button.hasClass('decrement')) {
-                    distance = Math.max(minValue, distance - step);
-                } else {
-                    distance = Math.min(maxValue, distance + step);
-                }
-
-                var distanceFix = parseFloat(distance.toFixed(2));
-
-                $('#paragraph-spin-first-line .item-after label').text(distanceFix + ' ' + metricText);
-
-                distance = Common.Utils.Metric.fnRecalcToMM(distance);
-
-                var newParagraphProp = new Asc.asc_CParagraphProperty();
-
-                _paragraphProperty.get_Ind().put_FirstLine(distance);
-
-                newParagraphProp.get_Ind().put_FirstLine(distance);
-
-                this.api.paraApply(newParagraphProp);
-            },
-
-            onSpaceBetween: function (e) {
-                var $checkbox = $(e.currentTarget);
-                this.api.put_AddSpaceBetweenPrg(!$checkbox.is(':checked'));
-            },
-
-            onBreakBefore: function (e) {
-                var $checkbox = $(e.currentTarget);
-                var properties = new Asc.asc_CParagraphProperty();
-
-                properties.put_PageBreakBefore($checkbox.is(':checked'));
-                this.api.paraApply(properties);
-            },
-
-            onOrphan: function (e) {
-                var $checkbox = $(e.currentTarget);
-                var properties = new Asc.asc_CParagraphProperty();
-
-                properties.put_WidowControl($checkbox.is(':checked'));
-                this.api.paraApply(properties);
-            },
-
-            onKeepTogether: function (e) {
-                var $checkbox = $(e.currentTarget);
-                var properties = new Asc.asc_CParagraphProperty();
-
-                properties.put_KeepLines($checkbox.is(':checked'));
-                this.api.paraApply(properties);
-            },
-
-            onKeepNext: function (e) {
-                var $checkbox = $(e.currentTarget);
-                var properties = new Asc.asc_CParagraphProperty();
-
-                properties.put_KeepNext($checkbox.is(':checked'));
-                this.api.paraApply(properties);
-            },
-
-
-            // API handlers
-
-            onApiParagraphStyleChange: function(name) {
-                _styleName = name;
-                $('#paragraph-list input[name=paragraph-style]').val([_styleName]);
-            }
-        }
-    })(), DE.Controllers.EditParagraph || {}))
-});

apps/documenteditor/mobile/app/controller/edit/EditShape.js

@@ -1,557 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditShape.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/21/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'core',
-    'documenteditor/mobile/app/view/edit/EditShape',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (core, view, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.EditShape = Backbone.Controller.extend(_.extend((function() {
-        // Private
-        var _stack = [],
-            _shapeObject = undefined,
-            _metricText = Common.Utils.Metric.getCurrentMetricName(),
-            _borderColor = 'transparent';
-
-        var wrapTypesTransform = (function() {
-            var map = [
-                { ui:'inline', sdk: Asc.c_oAscWrapStyle2.Inline },
-                { ui:'square', sdk: Asc.c_oAscWrapStyle2.Square },
-                { ui:'tight', sdk: Asc.c_oAscWrapStyle2.Tight },
-                { ui:'through', sdk: Asc.c_oAscWrapStyle2.Through },
-                { ui:'top-bottom', sdk: Asc.c_oAscWrapStyle2.TopAndBottom },
-                { ui:'behind', sdk: Asc.c_oAscWrapStyle2.Behind },
-                { ui:'infront', sdk: Asc.c_oAscWrapStyle2.InFront }
-            ];
-
-            return {
-                sdkToUi: function(type) {
-                    var record = map.filter(function(obj) {
-                        return obj.sdk === type;
-                    })[0];
-                    return record ? record.ui : '';
-                },
-
-                uiToSdk: function(type) {
-                    var record = map.filter(function(obj) {
-                        return obj.ui === type;
-                    })[0];
-                    return record ? record.sdk : 0;
-                }
-            }
-        })();
-
-        var borderSizeTransform = (function() {
-            var _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
-
-            return {
-                sizeByIndex: function (index) {
-                    if (index < 1) return _sizes[0];
-                    if (index > _sizes.length - 1) return _sizes[_sizes.length - 1];
-                    return _sizes[index];
-                },
-
-                indexSizeByValue: function (value) {
-                    var index = 0;
-                    _.each(_sizes, function (size, idx) {
-                        if (Math.abs(size - value) < 0.25) {
-                            index = idx;
-                        }
-                    });
-
-                    return index;
-                },
-
-                sizeByValue: function (value) {
-                    return _sizes[this.indexSizeByValue(value)];
-                }
-            }
-        })();
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'EditShape'
-            ],
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-
-                this.addListeners({
-                    'EditShape': {
-                        'page:show': this.onPageShow
-                    }
-                });
-            },
-
-            setApi: function (api) {
-                var me = this;
-                me.api = api;
-
-                me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onApiFocusObject, me));
-            },
-
-            onLaunch: function () {
-                this.createView('EditShape').render();
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                $('#shape-remove').single('click', _.bind(me.onRemoveShape, me));
-
-                me.initSettings();
-            },
-
-            onPageShow: function (view, pageId) {
-                var me = this;
-
-                $('.shape-reorder a').single('click',                       _.bind(me.onReorder, me));
-                $('.shape-replace li').single('click',                      _.buffered(me.onReplace, 100, me));
-                $('.shape-wrap .shape-wrap-types li').single('click',       _.buffered(me.onWrapType, 100, me));
-                $('.shape-wrap .align a').single('click',                   _.bind(me.onAlign, me));
-                $('#edit-shape-movetext input').single('change',            _.bind(me.onMoveText, me));
-                $('#edit-shape-overlap input').single('change',             _.bind(me.onOverlap, me));
-                $('.shape-wrap .distance input').single('change touchend',  _.buffered(me.onWrapDistance, 100, me));
-                $('.shape-wrap .distance input').single('input',            _.bind(me.onWrapDistanceChanging, me));
-
-                $('#edit-shape-bordersize input').single('change touchend', _.buffered(me.onBorderSize, 100, me));
-                $('#edit-shape-bordersize input').single('input',        _.bind(me.onBorderSizeChanging, me));
-                $('#edit-shape-effect input').single('change touchend',     _.buffered(me.onOpacity, 100, me));
-                $('#edit-shape-effect input').single('input',               _.bind(me.onOpacityChanging, me));
-
-                me.initSettings(pageId);
-            },
-
-            initSettings: function (pageId) {
-                var me = this;
-
-                // me.api && me.api.UpdateInterfaceState();
-                _metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
-                if (_shapeObject) {
-                    if (pageId == '#edit-shape-wrap') {
-                        me._initWrapView();
-                    } else if (pageId == '#edit-shape-style' || pageId == '#edit-shape-style-nofill' || pageId == '#edit-shape-border-color-view') {
-                        me._initStyleView();
-                    } else {
-                        me.getView('EditShape').isShapeCanFill = _shapeObject.get_ShapeProperties().get_CanFill();
-                    }
-                }
-            },
-
-            _initWrapView: function() {
-                // Wrap type
-                var me = this,
-                    wrapping = _shapeObject.get_WrappingStyle(),
-                    $shapeWrapInput = $('.shape-wrap input'),
-                    shapeWrapType = wrapTypesTransform.sdkToUi(wrapping);
-
-                $shapeWrapInput.val([shapeWrapType]);
-                me._uiTransformByWrap(shapeWrapType);
-
-                // Wrap align
-                var shapeHAlign = _shapeObject.get_PositionH().get_Align();
-
-                $('.shape-wrap .align a[data-type=left]').toggleClass('active', shapeHAlign == Asc.c_oAscAlignH.Left);
-                $('.shape-wrap .align a[data-type=center]').toggleClass('active', shapeHAlign == Asc.c_oAscAlignH.Center);
-                $('.shape-wrap .align a[data-type=right]').toggleClass('active', shapeHAlign == Asc.c_oAscAlignH.Right);
-
-
-                // Wrap flags
-                $('#edit-shape-movetext input').prop('checked', _shapeObject.get_PositionV().get_RelativeFrom() == Asc.c_oAscRelativeFromV.Paragraph);
-                $('#edit-shape-overlap input').prop('checked', _shapeObject.get_AllowOverlap());
-
-                // Wrap distance
-                var paddings = _shapeObject.get_Paddings();
-                if (paddings) {
-                    var distance = Common.Utils.Metric.fnRecalcFromMM(paddings.get_Top());
-                    $('.shape-wrap .distance input').val(distance);
-                    $('.shape-wrap .distance .item-after').text(distance + ' ' + _metricText);
-                }
-            },
-
-            _initStyleView: function () {
-                var me = this,
-                    shapeProperties = _shapeObject.get_ShapeProperties(),
-                    paletteFillColor = me.getView('EditShape').paletteFillColor,
-                    paletteBorderColor = me.getView('EditShape').paletteBorderColor;
-
-                // Init style border size
-                var borderSize = shapeProperties.get_stroke().get_width() * 72.0 / 25.4;
-                var borderType = shapeProperties.get_stroke().get_type();
-                $('#edit-shape-bordersize input').val([(borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.indexSizeByValue(borderSize)]);
-                $('#edit-shape-bordersize .item-after').text(((borderType == Asc.c_oAscStrokeType.STROKE_NONE) ? 0 : borderSizeTransform.sizeByValue(borderSize)) + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt));
-
-                // Init style opacity
-                var transparent = shapeProperties.get_fill().asc_getTransparent();
-                $('#edit-shape-effect input').val([transparent!==null && transparent!==undefined ? transparent / 2.55 : 100]);
-                $('#edit-shape-effect .item-after').text($('#edit-shape-effect input').val() + ' ' + "%");
-
-                paletteFillColor && paletteFillColor.on('select',       _.bind(me.onFillColor, me));
-                paletteBorderColor && paletteBorderColor.on('select',   _.bind(me.onBorderColor, me));
-
-                var sdkColor, color;
-
-                // Init fill color
-                var fill = shapeProperties.get_fill(),
-                    fillType = fill.get_type();
-
-                color = 'transparent';
-
-                if (fillType == Asc.c_oAscFill.FILL_TYPE_SOLID) {
-                    fill = fill.get_fill();
-                    sdkColor = fill.get_color();
-
-                    if (sdkColor) {
-                        if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
-                            color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
-                        } else {
-                            color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
-                        }
-                    }
-                }
-
-                paletteFillColor && paletteFillColor.select(color);
-
-                // Init border color
-                me._initBorderColorView();
-            },
-
-            _initBorderColorView: function () {
-                if (!_shapeObject) return;
-
-                var me = this,
-                    paletteBorderColor = me.getView('EditShape').paletteBorderColor,
-                    stroke = _shapeObject.get_ShapeProperties().get_stroke();
-
-                var color = 'transparent';
-
-                if (stroke && stroke.get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
-                    var sdkColor = stroke.get_color();
-
-                    if (sdkColor) {
-                        if (sdkColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
-                            color = {color: Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b()), effectValue: sdkColor.get_value()};
-                        }
-                        else {
-                            color = Common.Utils.ThemeColor.getHexColor(sdkColor.get_r(), sdkColor.get_g(), sdkColor.get_b());
-                        }
-                    }
-                }
-                _borderColor = color;
-
-                paletteBorderColor && paletteBorderColor.select(color);
-                $('#edit-shape-bordercolor .color-preview').css('background-color', ('transparent' == color) ? color : ('#' + (_.isObject(color) ? color.color : color)))
-            },
-
-            // Public
-
-            getShape: function () {
-                return _shapeObject;
-            },
-
-            // Handlers
-
-            onRemoveShape: function () {
-                this.api.asc_Remove();
-                DE.getController('EditContainer').hideModal();
-            },
-
-            onReorder: function (e) {
-            },
-
-            onReplace: function (e) {
-            },
-
-            onWrapType: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget).find('input'),
-                    value = $target.val(),
-                    properties = new Asc.asc_CImgProperty();
-
-                me._uiTransformByWrap(value);
-
-                var sdkType = wrapTypesTransform.uiToSdk(value);
-
-                properties.put_WrappingStyle(sdkType);
-
-                me.api.ImgApply(properties);
-            },
-
-            onAlign: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    type = $target.data('type');
-
-                $('.shape-wrap .align a').removeClass('active');
-                $target.addClass('active');
-
-                var hAlign = Asc.c_oAscAlignH.Left;
-
-                if ('center' == type) {
-                    hAlign = Asc.c_oAscAlignH.Center;
-                } else if ('right' == type) {
-                    hAlign = Asc.c_oAscAlignH.Right;
-                }
-
-                var properties = new Asc.asc_CImgProperty();
-                properties.put_PositionH(new Asc.CImagePositionH());
-                properties.get_PositionH().put_UseAlign(true);
-                properties.get_PositionH().put_Align(hAlign);
-                properties.get_PositionH().put_RelativeFrom(Asc.c_oAscRelativeFromH.Page);
-
-                me.api.ImgApply(properties);
-            },
-
-            onMoveText: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    properties = new Asc.asc_CImgProperty();
-
-                properties.put_PositionV(new Asc.CImagePositionV());
-                properties.get_PositionV().put_UseAlign(true);
-                properties.get_PositionV().put_RelativeFrom($target.is(':checked') ? Asc.c_oAscRelativeFromV.Paragraph : Asc.c_oAscRelativeFromV.Page);
-
-                me.api.ImgApply(properties);
-            },
-
-            onOverlap: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    properties = new Asc.asc_CImgProperty();
-
-                properties.put_AllowOverlap($target.is(':checked'));
-
-                me.api.ImgApply(properties);
-            },
-
-            onWrapDistance: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    value = $target.val(),
-                    properties = new Asc.asc_CImgProperty(),
-                    paddings = new Asc.asc_CPaddings();
-
-                $('.shape-wrap .distance .item-after').text(value + ' ' + _metricText);
-
-                value = Common.Utils.Metric.fnRecalcToMM(parseInt(value));
-
-                paddings.put_Top(value);
-                paddings.put_Right(value);
-                paddings.put_Bottom(value);
-                paddings.put_Left(value);
-
-                properties.put_Paddings(paddings);
-
-                me.api.ImgApply(properties);
-            },
-
-            onWrapDistanceChanging: function (e) {
-                var $target = $(e.currentTarget);
-                $('.shape-wrap .distance .item-after').text($target.val() + ' ' + _metricText);
-            },
-
-            onBorderSize: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    value = $target.val(),
-                    image = new Asc.asc_CImgProperty(),
-                    shape = new Asc.asc_CShapeProperty(),
-                    stroke = new Asc.asc_CStroke();
-
-                value = borderSizeTransform.sizeByIndex(parseInt(value));
-
-                if (value < 0.01) {
-                    stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
-                } else {
-                    stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
-                    if (_borderColor == 'transparent')
-                        stroke.put_color(Common.Utils.ThemeColor.getRgbColor({color: '000000', effectId: 29}));
-                    else
-                        stroke.put_color(Common.Utils.ThemeColor.getRgbColor(Common.Utils.ThemeColor.colorValue2EffectId(_borderColor)));
-                    stroke.put_width(value * 25.4 / 72.0);
-                }
-
-                shape.put_stroke(stroke);
-                image.put_ShapeProperties(shape);
-
-                me.api.ImgApply(image);
-                me._initBorderColorView(); // when select STROKE_NONE or change from STROKE_NONE to STROKE_COLOR
-            },
-
-            onBorderSizeChanging: function (e) {
-                var $target = $(e.currentTarget);
-                $('#edit-shape-bordersize .item-after').text(borderSizeTransform.sizeByIndex($target.val()) + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt));
-            },
-
-            onOpacity: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    value = $target.val(),
-                    properties = new Asc.asc_CImgProperty(),
-                    fill = new Asc.asc_CShapeFill(),
-                    shape = new Asc.asc_CShapeProperty();
-
-                fill.put_transparent(parseInt(value * 2.55));
-                shape.put_fill(fill);
-                properties.put_ShapeProperties(shape);
-
-                me.api.ImgApply(properties);
-            },
-
-            onOpacityChanging: function (e) {
-                var $target = $(e.currentTarget);
-                $('#edit-shape-effect .item-after').text($target.val() + ' %');
-            },
-
-            onFillColor: function(palette, color) {
-                var me = this;
-
-                if (me.api) {
-                    var image = new Asc.asc_CImgProperty(),
-                        shape = new Asc.asc_CShapeProperty(),
-                        fill = new Asc.asc_CShapeFill();
-
-                    if (color == 'transparent') {
-                        fill.put_type(Asc.c_oAscFill.FILL_TYPE_NOFILL);
-                        fill.put_fill(null);
-                    } else {
-                        fill.put_type(Asc.c_oAscFill.FILL_TYPE_SOLID);
-                        fill.put_fill(new Asc.asc_CFillSolid());
-                        fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(color));
-                    }
-
-                    shape.put_fill(fill);
-                    image.put_ShapeProperties(shape);
-
-                    me.api.ImgApply(image);
-                }
-            },
-
-            onBorderColor: function (palette, color) {
-                var me = this,
-                    currentShape = _shapeObject ? _shapeObject.get_ShapeProperties() : null;
-
-                $('#edit-shape-bordercolor .color-preview').css('background-color', ('transparent' == color) ? color : ('#' + (_.isObject(color) ? color.color : color)));
-                _borderColor = color;
-
-                if (me.api && currentShape && currentShape.get_stroke().get_type() == Asc.c_oAscStrokeType.STROKE_COLOR) {
-                    var image = new Asc.asc_CImgProperty(),
-                        shape = new Asc.asc_CShapeProperty(),
-                        stroke = new Asc.asc_CStroke();
-
-                    if (currentShape.get_stroke().get_width() < 0.01) {
-                        stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
-                    } else {
-                        stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
-                        stroke.put_color(Common.Utils.ThemeColor.getRgbColor(color));
-                        stroke.put_width(currentShape.get_stroke().get_width());
-                        stroke.asc_putPrstDash(currentShape.get_stroke().asc_getPrstDash());
-                    }
-
-                    shape.put_stroke(stroke);
-                    image.put_ShapeProperties(shape);
-
-                    me.api.ImgApply(image);
-                }
-            },
-
-            // API handlers
-
-            onApiFocusObject: function (objects) {
-                _stack = objects;
-
-                var shapes = [];
-
-                _.each(_stack, function (object) {
-                    if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image) {
-                        if (object.get_ObjectValue() && object.get_ObjectValue().get_ShapeProperties()) {
-                            shapes.push(object);
-                        }
-                    }
-                });
-
-                if (shapes.length > 0) {
-                    var object = shapes[shapes.length - 1]; // get top shape
-                    _shapeObject = object.get_ObjectValue();
-                    this.getView('EditShape').isShapeCanFill = _shapeObject.get_ShapeProperties().get_CanFill();
-                } else {
-                    _shapeObject = undefined;
-                }
-            },
-
-            // Helpers
-
-            _uiTransformByWrap: function(type) {
-                $('.shape-wrap .align')[('inline' == type) ? 'hide' : 'show']();
-                $('.shape-wrap .distance')[('behind' == type || 'infront' == type) ? 'hide' : 'show']();
-                $('#edit-shape-movetext').toggleClass('disabled', ('inline' == type));
-            },
-
-            _closeIfNeed: function () {
-                if (!this._isShapeInStack()) {
-                    DE.getController('EditContainer').hideModal();
-                }
-            },
-
-            _isShapeInStack: function () {
-                var shapeExist = false;
-
-                _.some(_stack, function(object) {
-                    if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Image) {
-                        if (object.get_ObjectValue() && object.get_ObjectValue().get_ShapeProperties()) {
-                            shapeExist = true;
-                            return true;
-                        }
-                    }
-                });
-
-                return shapeExist;
-            }
-        };
-    })(), DE.Controllers.EditShape || {}))
-});

apps/documenteditor/mobile/app/controller/edit/EditTable.js

@@ -1,675 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditTable.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/20/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'core',
-    'documenteditor/mobile/app/view/edit/EditTable',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (core, view, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.EditTable = Backbone.Controller.extend(_.extend((function() {
-        // Private
-        var _stack = [],
-            _metricText = Common.Utils.Metric.getCurrentMetricName(),
-            _tableObject = undefined,
-            _tableLook = {},
-            _cellBorders = undefined,
-            _cellBorderColor = '000000',
-            _cellBorderWidth = 0.5;
-
-        var c_tableWrap = {
-            TABLE_WRAP_NONE: 0,
-            TABLE_WRAP_PARALLEL: 1
-        };
-
-        var c_tableAlign = {
-            TABLE_ALIGN_LEFT: 0,
-            TABLE_ALIGN_CENTER: 1,
-            TABLE_ALIGN_RIGHT: 2
-        };
-
-        var borderSizeTransform = (function() {
-            var _sizes = [0, 0.5, 1, 1.5, 2.25, 3, 4.5, 6];
-
-            return {
-                sizeByIndex: function (index) {
-                    if (index < 1) return _sizes[0];
-                    if (index > _sizes.length - 1) return _sizes[_sizes.length - 1];
-                    return _sizes[index];
-                },
-
-                indexSizeByValue: function (value) {
-                    var index = 0;
-                    _.each(_sizes, function (size, idx) {
-                        if (Math.abs(size - value) < 0.25) {
-                            index = idx;
-                        }
-                    });
-
-                    return index;
-                },
-
-                sizeByValue: function (value) {
-                    return _sizes[this.indexSizeByValue(value)];
-                }
-            }
-        })();
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'EditTable'
-            ],
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-
-                this.addListeners({
-                    'EditTable': {
-                        'page:show'     : this.onPageShow
-                    }
-                });
-
-                var me = this;
-                uiApp.onPageBack('edit-table-style-options', function (page) {
-                    $('.dataview.table-styles .row div').single('click',    _.bind(me.onStyleClick, me));
-                    me.initSettings('#edit-table-style');
-                });
-            },
-
-            setApi: function (api) {
-                var me = this;
-                me.api = api;
-            },
-
-            onLaunch: function () {
-                this.createView('EditTable').render();
-            },
-
-            initEvents: function () {
-                var me = this;
-                me.initSettings();
-            },
-
-            onPageShow: function (view, pageId) {
-                var me = this,
-                    paletteFillColor = me.getView('EditTable').paletteFillColor,
-                    paletteBorderColor = me.getView('EditTable').paletteBorderColor;
-
-                $('#table-wrap-type li').single('click',                            _.buffered(me.onWrapType, 100, me));
-                $('#table-move-text input:checkbox').single('change',               _.bind(me.onWrapMoveText, me));
-                $('#table-distance input').single('change touchend',                _.buffered(me.onWrapDistance, 100, me));
-                $('#table-distance input').single('input',                          _.bind(me.onWrapDistanceChanging, me));
-                $('#table-align-left').single('click',                              _.bind(me.onWrapAlign, me, c_tableAlign.TABLE_ALIGN_LEFT));
-                $('#table-align-center').single('click',                            _.bind(me.onWrapAlign, me, c_tableAlign.TABLE_ALIGN_CENTER));
-                $('#table-align-right').single('click',                             _.bind(me.onWrapAlign, me, c_tableAlign.TABLE_ALIGN_RIGHT));
-
-                $('#table-option-repeatasheader input:checkbox').single('change',   _.bind(me.onOptionRepeat, me));
-                $('#table-option-resizetofit input:checkbox').single('change',      _.bind(me.onOptionResize, me));
-                $('#table-options-margins input').single('change touchend',         _.buffered(me.onOptionMargin, 100, me));
-                $('#table-options-margins input').single('input',                   _.bind(me.onOptionMarginChanging, me));
-
-                $('#table-options-header-row input:checkbox').single('change',      _.bind(me.onCheckTemplateChange, me, 0));
-                $('#table-options-total-row input:checkbox').single('change',       _.bind(me.onCheckTemplateChange, me, 1));
-                $('#table-options-banded-row input:checkbox').single('change',      _.bind(me.onCheckTemplateChange, me, 2));
-                $('#table-options-first-column input:checkbox').single('change',    _.bind(me.onCheckTemplateChange, me, 3));
-                $('#table-options-last-column input:checkbox').single('change',     _.bind(me.onCheckTemplateChange, me, 4));
-                $('#table-options-banded-column input:checkbox').single('change',   _.bind(me.onCheckTemplateChange, me, 5));
-
-                $('#edit-table-bordertypes a').single('click',                      _.bind(me.onBorderTypeClick, me));
-
-                $('.dataview.table-styles .row div').single('click',                _.bind(me.onStyleClick, me));
-                $('#edit-table-bordersize input').single('change touchend',         _.buffered(me.onBorderSize, 100, me));
-                $('#edit-table-bordersize input').single('input',                   _.bind(me.onBorderSizeChanging, me));
-
-                paletteFillColor && paletteFillColor.on('select',                   _.bind(me.onFillColor, me));
-                paletteBorderColor && paletteBorderColor.on('select',               _.bind(me.onBorderColor, me));
-
-                me.initSettings(pageId);
-            },
-
-            initSettings: function (pageId) {
-                var me = this;
-                _metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
-
-                if (_tableObject) {
-                    if (pageId == '#edit-table-wrap') {
-                        me._initWrappView();
-                        Common.Utils.addScrollIfNeed('.page[data-page=edit-table-wrap]', '.page[data-page=edit-table-wrap] .page-content');
-                    } else if (pageId == "#edit-table-style" || pageId == '#edit-table-border-color-view') {
-                        me._initStyleView();
-                        
-                        if (pageId == '#edit-table-border-color-view') {
-                            Common.Utils.addScrollIfNeed('.page[data-page=edit-table-border-color]', '.page[data-page=edit-table-border-color] .page-content');
-                        } else {
-                            Common.Utils.addScrollIfNeed('.page[data-page=edit-table-style]', '.page[data-page=edit-table-style] .page-content');
-                        }
-
-                        Common.Utils.addScrollIfNeed('#tab-table-border .list-block', '#tab-table-border .list-block ul');
-                        Common.Utils.addScrollIfNeed('#tab-table-fill .list-block', '#tab-table-fill .list-block ul');
-                        Common.Utils.addScrollIfNeed('#tab-table-style .list-block', '#tab-table-style .list-block ul');
-                    } else if (pageId == '#edit-table-options') {
-                        Common.Utils.addScrollIfNeed('.page[data-page=edit-table-wrap]', '.page[data-page=edit-table-wrap] .page-content');
-                        me._initTableOptionsView();
-                    } else if (pageId == '#edit-table-style-options-view') {
-                        Common.Utils.addScrollIfNeed('.page[data-page=edit-table-style-options]', '.page[data-page=edit-table-style-options] .page-content');
-                        me._initStyleOptionsView();
-                    }
-                }
-            },
-
-            _initStyleOptionsView: function() {
-                $('#table-options-header-row input').prop('checked',    _tableLook.get_FirstRow());
-                $('#table-options-total-row input').prop('checked',     _tableLook.get_LastRow());
-                $('#table-options-banded-row input').prop('checked',    _tableLook.get_BandHor());
-                $('#table-options-first-column input').prop('checked',  _tableLook.get_FirstCol());
-                $('#table-options-last-column input').prop('checked',   _tableLook.get_LastCol());
-                $('#table-options-banded-column input').prop('checked', _tableLook.get_BandVer());
-            },
-
-            _initTableOptionsView: function() {
-                $('#table-option-repeatasheader input').prop('checked', !!_tableObject.get_RowsInHeader());
-                if (_tableObject.get_RowsInHeader() === null)
-                    $('#table-option-repeatasheader').addClass('disabled');
-                else
-                    $('#table-option-repeatasheader').removeClass('disabled');
-                $('#table-option-resizetofit input').prop('checked', _tableObject.get_TableLayout()==Asc.c_oAscTableLayout.AutoFit);
-
-                var margins = _tableObject.get_CellMargins();
-                if (margins) {
-                    var distance = Common.Utils.Metric.fnRecalcFromMM(margins.get_Left());
-                    $('#table-options-margins input').val(distance);
-                    $('#table-options-margins .item-after').text(distance + ' ' + _metricText);
-                }
-            },
-
-            _initWrappView: function() {
-                var me = this,
-                    type = _tableObject.get_TableWrap() == c_tableWrap.TABLE_WRAP_NONE ? 'inline' : 'flow';
-
-                // wrap type
-                $('#table-wrap-type input').val([type]);
-                me._uiTransformByWrap(type);
-
-                // wrap move text
-                $('#table-move-text input').prop('checked', (_tableObject.get_PositionV() && _tableObject.get_PositionV().get_RelativeFrom()==Asc.c_oAscVAnchor.Text));
-
-                // wrap align
-                var align = _tableObject.get_TableAlignment();
-                $('#table-align-left').toggleClass('active', align == c_tableAlign.TABLE_ALIGN_LEFT);
-                $('#table-align-center').toggleClass('active', align == c_tableAlign.TABLE_ALIGN_CENTER);
-                $('#table-align-right').toggleClass('active', align == c_tableAlign.TABLE_ALIGN_RIGHT);
-
-                // wrap distance
-                var paddings = _tableObject.get_TablePaddings();
-                if (paddings) {
-                    var distance = Common.Utils.Metric.fnRecalcFromMM(paddings.get_Top());
-                    $('#table-distance input').val(distance);
-                    $('#table-distance .item-after').text(distance + ' ' + _metricText);
-                }
-            },
-
-            _initStyleView: function() {
-                var me = this;
-
-                /**
-                 * Style
-                 */
-
-                var styleId = _tableObject.get_TableStyle();
-                $('#edit-table-styles .table-styles div').removeClass('active');
-                $('#edit-table-styles .table-styles div[data-type=' + styleId + ']').addClass('active');
-
-                /**
-                 * Fill
-                 */
-
-                var background = _tableObject.get_CellsBackground(),
-                    fillColor = 'transparent';
-
-                if (background) {
-                    if (background.get_Value()==0) {
-                        var color = background.get_Color();
-                        if (color) {
-                            if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
-                                fillColor = {color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value()};
-                            } else {
-                                fillColor = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
-                            }
-                        }
-                    }
-                }
-
-                var palette = me.getView('EditTable').paletteFillColor;
-
-                if (palette) {
-                    palette.select(fillColor);
-                }
-
-                /**
-                 * Border
-                 */
-
-                // if (_.isUndefined(_cellBorderColor) || _.isUndefined(_cellBorderWidth)) {
-                //     _cellBorders = _tableObject.get_CellBorders();
-                //
-                //     _.some([
-                //         _cellBorders.get_Left(),
-                //         _cellBorders.get_Top(),
-                //         _cellBorders.get_Right(),
-                //         _cellBorders.get_Bottom(),
-                //         _cellBorders.get_InsideV(),
-                //         _cellBorders.get_InsideH()
-                //     ], function (border) {
-                //         if (border.get_Value() > 0) {
-                //             var borderColor = border.get_Color();
-                //
-                //             if (borderColor.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
-                //                 borderColor = {
-                //                     color: Common.Utils.ThemeColor.getHexColor(borderColor.get_r(), borderColor.get_g(), borderColor.get_b()),
-                //                     effectValue: borderColor.get_value()
-                //                 };
-                //             } else {
-                //                 borderColor = Common.Utils.ThemeColor.getHexColor(borderColor.get_r(), borderColor.get_g(), borderColor.get_b());
-                //             }
-                //
-                //             _cellBorderWidth = border.get_Size();
-                //             _cellBorderColor = borderColor;
-                //
-                //             return true;
-                //         }
-                //     });
-                // }
-
-                $('#edit-table-bordersize input').val([borderSizeTransform.indexSizeByValue(_cellBorderWidth)]);
-                $('#edit-table-bordersize .item-after').text(borderSizeTransform.sizeByValue(_cellBorderWidth) + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt));
-
-                var borderPalette = me.getView('EditTable').paletteBorderColor;
-
-                if (borderPalette) {
-                    borderPalette.select(_cellBorderColor);
-                }
-
-                $('#edit-table-bordercolor .color-preview').css('background-color', ('transparent' == _cellBorderColor) ? _cellBorderColor : ('#' + (_.isObject(_cellBorderColor) ? _cellBorderColor.color : _cellBorderColor)));
-            },
-
-            _updateBordersStyle: function(border) {
-                _cellBorders = new Asc.CBorders();
-                var updateBorders = _cellBorders;
-
-                var visible = (border != '');
-
-                if (border.indexOf('l') > -1 || !visible) {
-                    if (updateBorders.get_Left()===null || updateBorders.get_Left()===undefined)
-                        updateBorders.put_Left(new Asc.asc_CTextBorder());
-                    this._updateBorderStyle (updateBorders.get_Left(), visible);
-                }
-                if (border.indexOf('t') > -1 || !visible) {
-                    if (updateBorders.get_Top()===null || updateBorders.get_Top()===undefined)
-                        updateBorders.put_Top(new Asc.asc_CTextBorder());
-                    this._updateBorderStyle (updateBorders.get_Top(), visible);
-                }
-                if (border.indexOf('r') > -1 || !visible) {
-                    if (updateBorders.get_Right()===null || updateBorders.get_Right()===undefined)
-                        updateBorders.put_Right(new Asc.asc_CTextBorder());
-                    this._updateBorderStyle (updateBorders.get_Right(), visible);
-                }
-                if (border.indexOf('b') > -1 || !visible) {
-                    if (updateBorders.get_Bottom()===null || updateBorders.get_Bottom()===undefined)
-                        updateBorders.put_Bottom(new Asc.asc_CTextBorder());
-                    this._updateBorderStyle (updateBorders.get_Bottom(), visible);
-                }
-                if (border.indexOf('c') > -1 || !visible) {
-                    if (updateBorders.get_InsideV()===null || updateBorders.get_InsideV()===undefined)
-                        updateBorders.put_InsideV(new Asc.asc_CTextBorder());
-                    this._updateBorderStyle (updateBorders.get_InsideV(), visible);
-                }
-                if (border.indexOf('m') > -1 || !visible) {
-                    if (updateBorders.get_InsideH()===null || updateBorders.get_InsideH()===undefined)
-                        updateBorders.put_InsideH(new Asc.asc_CTextBorder());
-                    this._updateBorderStyle (updateBorders.get_InsideH(), visible);
-                }
-            },
-
-            _updateBorderStyle: function(border, visible) {
-                if (_.isNull(border)) {
-                    border = new Asc.asc_CTextBorder();
-                }
-
-                if (visible && _cellBorderWidth > 0){
-                    var size = parseFloat(_cellBorderWidth);
-                    border.put_Value(1);
-                    border.put_Size(size * 25.4 / 72.0);
-                    var color = Common.Utils.ThemeColor.getRgbColor(_cellBorderColor);
-                    border.put_Color(color);
-                }
-                else {
-                    border.put_Value(0);
-                }
-            },
-
-            // Public
-
-            getTable: function() {
-                return _tableObject;
-            },
-
-            // Handlers
-
-            onWrapType: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget).find('input'),
-                    value = $target.val();
-
-                me._uiTransformByWrap(value);
-
-                var properties = new Asc.CTableProp();
-
-                if ('inline' == value) {
-                    properties.put_TableWrap(c_tableWrap.TABLE_WRAP_NONE);
-                } else {
-                    properties.put_TableWrap(c_tableWrap.TABLE_WRAP_PARALLEL);
-                }
-
-                me.api.tblApply(properties);
-            },
-
-            onWrapMoveText :function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    isOn = $target.is(':checked'),
-                    properties = new Asc.CTableProp(),
-                    position = new Asc.CTablePositionV();
-
-                position.put_UseAlign(false);
-                position.put_RelativeFrom(isOn ? Asc.c_oAscVAnchor.Text : Asc.c_oAscVAnchor.Page);
-                position.put_Value(_tableObject.get_Value_Y(isOn ? Asc.c_oAscVAnchor.Text : Asc.c_oAscVAnchor.Page));
-
-                properties.put_PositionV(position);
-
-                me.api.tblApply(properties);
-            },
-
-            onWrapDistance: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    value = $target.val(),
-                    properties = new Asc.CTableProp(),
-                    paddings = new Asc.asc_CPaddings();
-
-                $('#table-distance .item-after').text(value + ' ' + _metricText);
-
-                value = Common.Utils.Metric.fnRecalcToMM(parseInt(value));
-
-                paddings.put_Top(value);
-                paddings.put_Right(value);
-                paddings.put_Bottom(value);
-                paddings.put_Left(value);
-
-                properties.put_TablePaddings(paddings);
-
-                me.api.tblApply(properties);
-            },
-
-            onWrapDistanceChanging: function (e) {
-                var $target = $(e.currentTarget);
-                $('#table-distance .item-after').text($target.val() + ' ' + _metricText);
-            },
-
-            onWrapAlign: function (type, e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    properties = new Asc.CTableProp();
-
-                $('#table-align .button').removeClass('active');
-                $target.addClass('active');
-
-                properties.put_TableAlignment(type);
-                me.api.tblApply(properties);
-            },
-
-            onOptionRepeat: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    properties = new Asc.CTableProp();
-
-                properties.put_RowsInHeader($target.is(':checked'));
-                me.api.tblApply(properties);
-            },
-
-            onOptionResize: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    properties = new Asc.CTableProp();
-
-                properties.put_TableLayout($target.is(':checked') ? Asc.c_oAscTableLayout.AutoFit : Asc.c_oAscTableLayout. Fixed);
-                me.api.tblApply(properties);
-            },
-
-            onOptionMargin: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    value = $target.val(),
-                    properties = new Asc.CTableProp(),
-                    margins = new Asc.CMargins();
-
-                $('#table-options-margins .item-after').text(value + ' ' + _metricText);
-
-                value = Common.Utils.Metric.fnRecalcToMM(value);
-
-                margins.put_Top(value);
-                margins.put_Right(value);
-                margins.put_Bottom(value);
-                margins.put_Left(value);
-                margins.put_Flag(2);
-
-                properties.put_CellMargins(margins);
-
-                me.api.tblApply(properties);
-            },
-
-            onOptionMarginChanging: function (e) {
-                var $target = $(e.currentTarget);
-                $('#table-options-margins .item-after').text($target.val() + ' ' + _metricText);
-            },
-
-            onCheckTemplateChange: function(type, e) {
-                if (this.api)   {
-                    var properties = new Asc.CTableProp();
-
-                    switch (type) {
-                        case 0:
-                            _tableLook.put_FirstRow($('#table-options-header-row input').is(':checked'));
-                            break;
-                        case 1:
-                            _tableLook.put_LastRow($('#table-options-total-row input').is(':checked'));
-                            break;
-                        case 2:
-                            _tableLook.put_BandHor($('#table-options-banded-row input').is(':checked'));
-                            break;
-                        case 3:
-                            _tableLook.put_FirstCol($('#table-options-first-column input').is(':checked'));
-                            break;
-                        case 4:
-                            _tableLook.put_LastCol($('#table-options-last-column input').is(':checked'));
-                            break;
-                        case 5:
-                            _tableLook.put_BandVer($('#table-options-banded-column input').is(':checked'));
-                            break;
-                    }
-
-                    properties.put_TableLook(_tableLook);
-                    this.api.tblApply(properties);
-                }
-            },
-
-            onBorderTypeClick: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    type = $target.data('type');
-
-                this._updateBordersStyle(type);
-
-                if (me.api) {
-                    var properties = new Asc.CTableProp();
-                    _cellBorders = _.isUndefined(_cellBorders) ? new Asc.CBorders() : _cellBorders;
-
-                    properties.put_CellBorders(_cellBorders);
-                    properties.put_CellSelect(true);
-
-                    me.api.tblApply(properties);
-                }
-            },
-
-            onFillColor: function(palette, color) {
-                if (this.api) {
-                    var properties = new Asc.CTableProp(),
-                        background = new Asc.CBackground();
-
-                    properties.put_CellsBackground(background);
-
-                    if ('transparent' == color) {
-                        background.put_Value(1);
-                    } else {
-                        background.put_Value(0);
-                        background.put_Color(Common.Utils.ThemeColor.getRgbColor(color));
-                    }
-
-                    properties.put_CellSelect(true);
-
-                    this.api.tblApply(properties);
-                }
-            },
-
-            onBorderColor: function (palette, color) {
-                _cellBorderColor = color;
-                $('#edit-table-bordercolor .color-preview').css('background-color', ('transparent' == color) ? color : ('#' + (_.isObject(color) ? color.color : color)));
-            },
-
-            onStyleClick: function (e) {
-                var me = this,
-                    $target = $(e.currentTarget),
-                    type = $target.data('type'),
-                    properties = new Asc.CTableProp();
-
-                $('#edit-table-styles .table-styles div').removeClass('active');
-                $target.addClass('active');
-
-                properties.put_TableStyle(type.toString());
-                me.api.tblApply(properties);
-            },
-
-
-            onBorderSize: function (e) {
-                var $target = $(e.currentTarget),
-                    value = $target.val();
-
-                _cellBorderWidth = borderSizeTransform.sizeByIndex(parseInt(value));
-            },
-
-            onBorderSizeChanging: function (e) {
-                var $target = $(e.currentTarget);
-                $('#edit-table-bordersize .item-after').text(borderSizeTransform.sizeByIndex($target.val()) + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt));
-            },
-
-            // API handlers
-
-            onApiFocusObject: function (objects) {
-                _stack = objects;
-
-                var tables = [];
-
-                _.each(_stack, function(object) {
-                    if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
-                        tables.push(object);
-                    }
-                });
-
-                if (tables.length > 0) {
-                    var object = tables[tables.length - 1]; // get top table
-
-                    _tableObject = object.get_ObjectValue();
-                    _tableLook = _tableObject.get_TableLook();
-                } else {
-                    _tableObject = undefined;
-                }
-            },
-
-            // Helpers
-
-            _closeIfNeed: function () {
-                if (!this._isTableInStack()) {
-                    DE.getController('EditContainer').hideModal();
-                }
-            },
-
-            _isTableInStack: function () {
-                var tableExist = false;
-
-                _.some(_stack, function(object) {
-                    if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Table) {
-                        tableExist = true;
-                        return true;
-                    }
-                });
-
-                return tableExist;
-            },
-
-            _uiTransformByWrap: function (type) {
-                if ('inline' == type) {
-                    $('#edit-tablewrap-page .inline').show();
-                    $('#edit-tablewrap-page .flow').hide();
-                    $('#table-move-text').addClass('disabled');
-                } else {
-                    $('#edit-tablewrap-page .inline').hide();
-                    $('#edit-tablewrap-page .flow').show();
-                    $('#table-move-text').removeClass('disabled');
-                }
-            }
-        }
-    })(), DE.Controllers.EditTable || {}))
-});

apps/documenteditor/mobile/app/controller/edit/EditText.js

@@ -1,558 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditText.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/4/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'core',
-    'documenteditor/mobile/app/view/edit/EditText',
-    'jquery',
-    'underscore',
-    'backbone',
-    'common/mobile/lib/component/ThemeColorPalette'
-], function (core, view, $, _, Backbone) {
-    'use strict';
-
-    DE.Controllers.EditText = Backbone.Controller.extend(_.extend((function() {
-        var _stack = [],
-            _paragraphObject = undefined,
-            _fontInfo = {};
-
-        return {
-            models: [],
-            collections: [],
-            views: [
-                'EditText'
-            ],
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-
-                this.addListeners({
-                    'EditText': {
-                        'page:show' : this.onPageShow,
-                        'font:click': this.onFontClick
-                    }
-                });
-
-                this._fontsArray = [];
-            },
-
-            setApi: function (api) {
-                var me = this;
-                me.api = api;
-            },
-
-            onLaunch: function () {
-                this.createView('EditText').render();
-            },
-
-            initEvents: function () {
-                var me = this;
-                $('#font-bold').single('click',                 _.bind(me.onBold, me));
-                $('#font-italic').single('click',               _.bind(me.onItalic, me));
-                $('#font-underline').single('click',            _.bind(me.onUnderline, me));
-                $('#font-strikethrough').single('click',        _.bind(me.onStrikethrough, me));
-
-                $('#paragraph-align .button').single('click',   _.bind(me.onParagraphAlign, me));
-                $('#font-moveleft, #font-moveright').single('click',   _.bind(me.onParagraphMove, me));
-
-                me.initSettings();
-            },
-
-            onPageShow: function (view, pageId) {
-                var me = this,
-                    paletteTextColor = me.getView('EditText').paletteTextColor,
-                    paletteBackgroundColor = me.getView('EditText').paletteBackgroundColor;
-
-                $('#text-additional li').single('click',        _.buffered(me.onAdditional, 100, me));
-                $('#page-text-linespacing li').single('click',  _.buffered(me.onLineSpacing, 100, me));
-                $('#font-size .button').single('click',         _.bind(me.onFontSize, me));
-                $('#letter-spacing .button').single('click',    _.bind(me.onLetterSpacing, me));
-
-                $('.dataview.bullets li').single('click',       _.buffered(me.onBullet, 100, me));
-                $('.dataview.numbers li').single('click',       _.buffered(me.onNumber, 100, me));
-
-                $('#font-color-auto').single('click',           _.bind(me.onTextColorAuto, me));
-                paletteTextColor && paletteTextColor.on('select', _.bind(me.onTextColor, me));
-                paletteBackgroundColor && paletteBackgroundColor.on('select', _.bind(me.onBackgroundColor, me));
-
-                me.initSettings(pageId);
-            },
-
-            initSettings: function (pageId) {
-                var me = this;
-
-                me.api && me.api.UpdateInterfaceState();
-
-                if (_paragraphObject) {
-                    var $inputStrikethrough = $('#text-additional input[name=text-strikethrough]');
-                    var $inputTextCaps = $('#text-additional input[name=text-caps]');
-
-                    _paragraphObject.get_Strikeout() && $inputStrikethrough.val(['strikethrough']).prop('prevValue', 'strikethrough');
-                    _paragraphObject.get_DStrikeout() && $inputStrikethrough.val(['double-strikethrough']).prop('prevValue', 'double-strikethrough');
-
-                    _paragraphObject.get_SmallCaps() && $inputTextCaps.val(['small']).prop('prevValue', 'small');
-                    _paragraphObject.get_AllCaps() && $inputTextCaps.val(['all']).prop('prevValue', 'all');
-
-                    _fontInfo.letterSpacing = (_paragraphObject.get_TextSpacing()===null || _paragraphObject.get_TextSpacing()===undefined) ? _paragraphObject.get_TextSpacing() : Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_TextSpacing());
-                    $('#letter-spacing .item-after label').text((_fontInfo.letterSpacing===null || _fontInfo.letterSpacing===undefined) ? '' : _fontInfo.letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName());
-                }
-            },
-
-            // Public
-
-            getFonts: function() {
-                return this._fontsArray;
-            },
-
-            getStack: function() {
-                return _stack;
-            },
-
-            getFontInfo: function () {
-                return _fontInfo;
-            },
-
-            getParagraph: function () {
-                return _paragraphObject;
-            },
-
-            // Handlers
-
-            onBold: function (e) {
-                var pressed = this._toggleButton(e);
-
-                if (this.api) {
-                    this.api.put_TextPrBold(pressed);
-                }
-            },
-
-            onItalic: function (e) {
-                var pressed = this._toggleButton(e);
-
-                if (this.api) {
-                    this.api.put_TextPrItalic(pressed);
-                }
-            },
-
-            onUnderline: function (e) {
-                var pressed = this._toggleButton(e);
-
-                if (this.api) {
-                    this.api.put_TextPrUnderline(pressed);
-                }
-            },
-
-            onStrikethrough: function (e) {
-                var pressed = this._toggleButton(e);
-
-                if (this.api) {
-                    this.api.put_TextPrStrikeout(pressed);
-                }
-            },
-
-            onParagraphAlign: function (e) {
-                var $target = $(e.currentTarget);
-
-                if ($target) {
-                    var id = $target.attr('id'),
-                        type = 1;
-
-                    if ('font-just' == id) {
-                        type = 3;
-                    } else if ('font-right' == id) {
-                        type = 0;
-                    } else if ('font-center' == id) {
-                        type = 2;
-                    }
-
-                    $('#paragraph-align .button').removeClass('active');
-                    $target.addClass('active');
-
-                    this.api.put_PrAlign(type);
-                }
-            },
-
-            onParagraphMove: function (e) {
-                var $target = $(e.currentTarget);
-
-                if ($target && this.api) {
-                    var id = $target.attr('id');
-
-                    if ('font-moveleft' == id) {
-                        this.api.DecreaseIndent();
-                    } else {
-                        this.api.IncreaseIndent();
-                    }
-                }
-            },
-
-            onAdditionalStrikethrough : function ($target) {
-                var value   = $target.prop('value'),
-                    checked = $target.prop('checked');
-
-                if ('strikethrough' == value) {
-                    this.api.put_TextPrStrikeout(checked);
-                } else {
-                    this.api.put_TextPrDStrikeout(checked);
-                }
-            },
-
-            onAdditionalScript : function ($target) {
-                var value   = $target.prop('value'),
-                    checked = $target.prop('checked');
-
-                if ('superscript' == value) {
-                    this.api.put_TextPrBaseline(checked ? 1 : 0);
-                } else {
-                    this.api.put_TextPrBaseline(checked ? 2 : 0);
-                }
-            },
-
-            onAdditionalCaps : function ($target) {
-                var value   = $target.prop('value'),
-                    checked = $target.prop('checked'),
-                    paragraphProps = new Asc.asc_CParagraphProperty();
-
-                if ('small' == value) {
-                    paragraphProps.put_AllCaps(false);
-                    paragraphProps.put_SmallCaps(checked);
-                } else {
-                    paragraphProps.put_AllCaps(checked);
-                    paragraphProps.put_SmallCaps(false);
-                }
-
-                this.api.paraApply(paragraphProps);
-            },
-
-            onAdditional: function(e) {
-                var me = this,
-                    $target = $(e.currentTarget).find('input'),
-                    prevValue = $target.prop('prevValue');
-
-                if (prevValue == $target.prop('value')) {
-                    $target.prop('checked', false);
-                    prevValue = null;
-                } else {
-                    $target.prop('checked', true);
-                    prevValue = $target.prop('value');
-                }
-
-                $('#page-text-additional input[name="'+ $target.prop('name') +'"]').prop('prevValue', prevValue);
-
-                var radioName = $target.prop('name');
-                if ('text-strikethrough' == radioName) {
-                    me.onAdditionalStrikethrough($target);
-                } else if ('text-script' == radioName) {
-                    me.onAdditionalScript($target);
-                } else if ('text-caps' == radioName){
-                    me.onAdditionalCaps($target);
-                }
-            },
-
-            onLineSpacing: function (e) {
-                var $target = $(e.currentTarget).find('input');
-
-                if ($target && this.api) {
-                    var value = parseFloat($target.prop('value')),
-                        LINERULE_AUTO = 1;
-
-                    this.api.put_PrLineSpacing(LINERULE_AUTO, value);
-                }
-            },
-
-            onFontClick: function (view, e) {
-                var $item = $(e.currentTarget).find('input');
-
-                if ($item) {
-                    this.api.put_TextPrFontName($item.prop('value'));
-                }
-            },
-
-            onFontSize: function (e) {
-                var $button = $(e.currentTarget),
-                    fontSize = _fontInfo.size;
-
-                if ($button.hasClass('decrement')) {
-                    _.isUndefined(fontSize) ? this.api.FontSizeOut() : fontSize = Math.max(1, --fontSize);
-                } else {
-                    _.isUndefined(fontSize) ? this.api.FontSizeIn() : fontSize = Math.min(100, ++fontSize);
-                }
-
-                if (! _.isUndefined(fontSize)) {
-                    this.api.put_TextPrFontSize(fontSize);
-                }
-            },
-
-            onLetterSpacing: function (e) {
-                var $button = $(e.currentTarget),
-                    spacing = _fontInfo.letterSpacing;
-
-                if ($button.hasClass('decrement')) {
-                    spacing = (spacing===null || spacing===undefined) ? 0 : Math.max(-100, --spacing);
-                } else {
-                    spacing = (spacing===null || spacing===undefined) ? 0 : Math.min(100, ++spacing);
-                }
-                _fontInfo.letterSpacing = spacing;
-
-                $('#letter-spacing .item-after label').text(spacing + ' ' + Common.Utils.Metric.getCurrentMetricName());
-
-                var properties = new Asc.asc_CParagraphProperty();
-                properties.put_TextSpacing(Common.Utils.Metric.fnRecalcToMM(spacing));
-
-                this.api.paraApply(properties);
-            },
-
-            onBullet: function (e) {
-                var $bullet = $(e.currentTarget),
-                    type = $bullet.data('type');
-
-                $('.dataview.bullets li').removeClass('active');
-                $bullet.addClass('active');
-
-                this.api.put_ListType(0, parseInt(type));
-            },
-
-            onNumber: function (e) {
-                var $number = $(e.currentTarget),
-                    type = $number.data('type');
-
-                $('.dataview.numbers li').removeClass('active');
-                $number.addClass('active');
-
-                this.api.put_ListType(1, parseInt(type));
-            },
-
-            onTextColorAuto: function (e) {
-                var me = this,
-                    paletteTextColor = me.getView('EditText').paletteTextColor;
-
-                if (paletteTextColor) {
-                    paletteTextColor.clearSelection();
-                }
-
-                if (this.api) {
-                    var color = new Asc.asc_CColor();
-                    color.put_auto(true);
-                    this.api.put_TextColor(color);
-                }
-            },
-
-            onTextColor: function (palette, color) {
-                // $('.btn-color-value-line', this.toolbar.btnFontColor.cmpEl).css('background-color', '#' + clr);
-
-                if (this.api) {
-                    this.api.put_TextColor(Common.Utils.ThemeColor.getRgbColor(color));
-                }
-            },
-
-            onBackgroundColor: function (palette, color) {
-                if (this.api) {
-                    if (color == 'transparent') {
-                        this.api.put_ParagraphShade(false);
-                    } else {
-                        this.api.put_ParagraphShade(true, Common.Utils.ThemeColor.getRgbColor(color));
-                    }
-                }
-            },
-
-            // API handlers
-
-            onApiFocusObject: function (objects) {
-                _stack = objects;
-
-                var paragraphs = [];
-
-                _.each(_stack, function(object) {
-                    if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Paragraph) {
-                        paragraphs.push(object);
-                    }
-                });
-
-                if (paragraphs.length > 0) {
-                    var object = paragraphs[paragraphs.length - 1]; // get top
-                    _paragraphObject = object.get_ObjectValue();
-                } else {
-                    _paragraphObject = undefined;
-                }
-            },
-
-            onApiChangeFont: function(font) {
-                var name = (_.isFunction(font.get_Name) ?  font.get_Name() : font.asc_getName()) || this.textFonts;
-                _fontInfo.name = name;
-
-                $('#font-fonts .item-title').html(name);
-            },
-
-            onApiFontSize: function(size) {
-                _fontInfo.size = size;
-                var displaySize = _fontInfo.size;
-
-                _.isUndefined(displaySize) ? displaySize = this.textAuto : displaySize = displaySize + ' ' + this.textPt;
-
-                $('#font-fonts .item-after span:first-child').html(displaySize);
-                $('#font-size .item-after label').html(displaySize);
-            },
-
-            onApiBold: function(on) {
-                $('#font-bold').toggleClass('active', on);
-            },
-
-            onApiItalic: function(on) {
-                $('#font-italic').toggleClass('active', on);
-            },
-
-            onApiUnderline: function(on) {
-                $('#font-underline').toggleClass('active', on);
-            },
-
-            onApiStrikeout: function(on) {
-                $('#font-strikethrough').toggleClass('active', on);
-            },
-
-            onApiBullets: function(data) {
-                var type    = data.get_ListType(),
-                    subtype = data.get_ListSubType();
-                $('.dataview.bullets li').removeClass('active');
-                $('.dataview.numbers li').removeClass('active');
-                switch (type) {
-                    case 0:
-                        $('.dataview.bullets li[data-type=' + subtype + ']').addClass('active');
-                        break;
-                    case 1:
-                        $('.dataview.numbers li[data-type=' + subtype + ']').addClass('active');
-                        break;
-                    default:
-                        $('.dataview.bullets li[data-type="-1"]').addClass('active');
-                        $('.dataview.numbers li[data-type="-1"]').addClass('active');
-                }
-            },
-
-            onApiParagraphAlign: function(align) {
-                $('#font-right').toggleClass('active', align===0);
-                $('#font-left').toggleClass('active', align===1);
-                $('#font-center').toggleClass('active', align===2);
-                $('#font-just').toggleClass('active', align===3);
-            },
-
-            onApiVerticalAlign: function(typeBaseline) {
-                var value;
-
-                typeBaseline==1 && (value = 'superscript');
-                typeBaseline==2 && (value = 'subscript');
-
-                if (!_.isUndefined(value)) {
-                    $('#text-additional input[name=text-script]').val([value]).prop('prevValue', value);
-                }
-            },
-
-            onApiTextColor: function (color) {
-                var me = this;
-                var palette = this.getView('EditText').paletteTextColor;
-
-                if (color.get_auto()) {
-                    if (palette) {
-                        palette.clearSelection();
-                    }
-
-                    $('#font-color .color-preview').css('background-color', '#000');
-                    $('#font-color-auto').addClass('active');
-                } else {
-                    var clr;
-
-                    if (color) {
-                        if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
-                            clr = {
-                                color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
-                                effectValue: color.get_value()
-                            }
-                        } else {
-                            clr = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
-                        }
-
-                        $('#font-color .color-preview').css('background-color', '#' + (_.isObject(clr) ? clr.color : clr));
-                    }
-                    $('#font-color-auto').removeClass('active');
-                    if (palette) {
-                        palette.select(clr);
-                    }
-                }
-            },
-
-            onApiLineSpacing: function(vc) {
-                var line = (vc.get_Line() === null || vc.get_LineRule() === null || vc.get_LineRule() != 1) ? -1 : vc.get_Line();
-
-                $('#page-text-linespacing input').val([line]);
-            },
-
-            onApiTextShd: function(shd) {
-                var color = shd.get_Color(),
-                    uiColor;
-
-                if (color.get_type() == Asc.c_oAscColor.COLOR_TYPE_SCHEME) {
-                    uiColor = {
-                        color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()),
-                        effectValue: color.get_value()
-                    }
-                } else {
-                    uiColor = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b());
-                }
-
-                $('#font-background .color-preview').css('background-color', '#' + (_.isObject(uiColor) ? uiColor.color : uiColor));
-
-                var palette = this.getView('EditText').paletteBackgroundColor;
-
-                if (palette) {
-                    palette.select(uiColor);
-                }
-            },
-
-            // Helpers
-            _toggleButton: function (e) {
-                return $(e.currentTarget).toggleClass('active').hasClass('active');
-            },
-
-            textFonts: 'Fonts',
-            textAuto: 'Auto',
-            textPt: 'pt'
-        }
-    })(), DE.Controllers.EditText || {}))
-});

apps/documenteditor/mobile/app/template/AddImage.template

@@ -1,71 +0,0 @@
-<!-- Root view -->
-<div id="addimage-root-view">
-    <div class="list-block">
-        <ul>
-            <li>
-                <a id="add-image-file" class="item-link no-indicator no-fastclick">
-                    <div class="item-content">
-                        <div class="item-media">
-                            <i class="icon icon-image-library"></i>
-                        </div>
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textFromLibrary %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <a id="add-image-url" class="item-link">
-                    <div class="item-content">
-                        <div class="item-media">
-                            <i class="icon icon-link"></i>
-                        </div>
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textFromURL %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-        </ul>
-    </div>
-</div>
-
-<!-- Url view -->
-<div id="addimage-url-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textLinkSettings %></div>
-        </div>
-    </div>
-    <div class="page" id="addimage-url">
-        <div class="page-content">
-            <% if (!android) { %><div class="content-block-title"><%= scope.textAddress %></div><% } %>
-            <div class="list-block">
-                <ul>
-                    <li>
-                        <div id="addimage-link-url" class="item-content">
-                            <div class="item-inner">
-                                <% if (android) { %><div class="item-title label"><%= scope.textAddress %></div><% } %>
-                                <div class="item-input">
-                                    <input type="url" placeholder="<%= scope.textImageURL %>">
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="list-block disabled" id="addimage-insert">
-                <% if (android) { %>
-                <a href="#" class="button button-fill button-raised" style="margin: 20px 16px;"><%= scope.textInsertImage %></a>
-                <% } else { %>
-                <ul>
-                    <li>
-                        <a href="#" class="list-button item-link"><%= scope.textInsertImage %></a>
-                    </li>
-                </ul>
-                <% } %>
-            </div>
-        </div>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/AddOther.template

@@ -1,387 +0,0 @@
-<!-- Root view -->
-<div id="addother-root-view">
-    <div class="list-block">
-        <ul>
-            <li id='item-comment'>
-                <a id="add-other-comment" class="item-link">
-                    <div class="item-content">
-                        <div class="item-media">
-                            <i class="icon icon-insert-comment"></i>
-                        </div>
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textComment %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <a id="add-other-link" class="item-link">
-                    <div class="item-content">
-                        <div class="item-media">
-                            <i class="icon icon-link"></i>
-                        </div>
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textLink %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <a id="add-other-pagenumber" class="item-link">
-                    <div class="item-content">
-                        <div class="item-media">
-                            <i class="icon icon-pagenumber"></i>
-                        </div>
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textPageNumber %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li id="item-break">
-                <a id="add-other-break" class="item-link">
-                    <div class="item-content">
-                        <div class="item-media">
-                            <i class="icon icon-sectionbreak"></i>
-                        </div>
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textBreak %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li id="item-footnote">
-                <a id="add-other-footnote" class="item-link">
-                    <div class="item-content">
-                        <div class="item-media">
-                            <i class="icon icon-footnote"></i>
-                        </div>
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textFootnote %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-        </ul>
-    </div>
-</div>
-
-<!-- Secton break view -->
-<div id="addother-sectionbreak">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textSectionBreak %></div>
-        </div>
-    </div>
-    <div class="page" data-page="addother-sectionbreak">
-        <div class="page-content">
-            <div class="list-block">
-                <ul>
-                    <li>
-                        <a data-type="next" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textNextPage %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="continuous" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textContPage %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="even" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textEvenPage %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="odd" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textOddPage %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Link view -->
-<div id="addother-link">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textAddLink %></div>
-        </div>
-    </div>
-    <div class="page" data-page="addother-link">
-        <div class="page-content">
-            <div class="list-block">
-                <ul>
-                    <li>
-                        <div id="add-link-url" class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title label"><%= scope.textLink %></div>
-                                <div class="item-input">
-                                    <input type="url" placeholder="<%= scope.textLink %>">
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li>
-                        <div id="add-link-display" class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title label"><%= scope.textDisplay %></div>
-                                <div class="item-input">
-                                    <input type="text" placeholder="<%= scope.textDisplay %>">
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li>
-                        <div id="add-link-tip" class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title label"><%= scope.textTip %></div>
-                                <div class="item-input">
-                                    <input type="text" placeholder="<%= scope.textTip %>">
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="list-block disabled" id="add-link-insert">
-                <% if (android) { %>
-                <a href="#" class="button button-fill button-raised" style="margin: 20px 16px;"><%= scope.textInsert %></a>
-                <% } else { %>
-                <ul>
-                    <li>
-                        <a href="#" class="list-button item-link"><%= scope.textInsert %></a>
-                    </li>
-                </ul>
-                <% } %>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Page Number Position view -->
-<div id="addother-pagenumber">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textPosition %></div>
-        </div>
-    </div>
-    <div class="page" data-page="addother-pagenumber">
-        <div class="page-content">
-            <div class="list-block">
-                <ul>
-                    <li>
-                        <a data-type="lt" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textLeftTop %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="ct" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textCenterTop %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="rt" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textRightTop %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="lb" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textLeftBottom %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="cb" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textCenterBottom %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="rb" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textRightBottom %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="current" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textCurrentPos %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Page Insert Footnote view -->
-<div id="addother-insert-footnote">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textInsertFootnote %></div>
-        </div>
-    </div>
-    <div class="page" data-page="addother-insert-footnote">
-        <div class="page-content">
-            <div class="content-block-title"><%= scope.textFormat %></div>
-            <div id="list-format-footnote" class="list-block">
-                <ul>
-                </ul>
-            </div>
-            <div id="start-at-footnote" class="list-block">
-                <ul>
-                    <li>
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textStartFrom %></div>
-                                <div class="item-after splitter">
-                                    <% if (!android) { %><label><%= scope.textAuto %></label><% } %>
-                                    <p class="buttons-row">
-                                        <span class="button decrement no-ripple"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
-                                        <% if (android) { %><label><%= scope.textAuto %></label><% } %>
-                                        <span class="button increment no-ripple"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="content-block-title"><%= scope.textLocation %></div>
-            <div id="position-footnote" class="list-block">
-                <ul>
-                </ul>
-            </div>
-            <div class="list-block" id="footnote-insert">
-                <% if (android) { %>
-                <a href="#" class="button button-fill button-raised" style="margin: 20px 16px;"><%= scope.textInsertFootnote %></a>
-                <% } else { %>
-                <ul>
-                    <li>
-                        <a href="#" class="list-button item-link"><%= scope.textInsertFootnote %></a>
-                    </li>
-                </ul>
-                <% } %>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Page Insert Comment view -->
-<div id="addother-insert-comment">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back-from-add-comment link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textAddComment %></div>
-            <div class="right sliding"><a id="done-comment"><% if (android) { %><i class="icon icon-done-comment-white"></i><% } else { %><%= scope.textDone %><% } %></a></div>
-        </div>
-    </div>
-    <div class="page page-add-comment" data-page="addother-insert-comment">
-        <div class="page-content">
-            <div id="comment-info" class="wrap-comment">
-            </div>
-
-        </div>
-    </div>
-</div>
-
-<!-- Break view -->
-<div id="addother-insert-break">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textBreak %></div>
-        </div>
-    </div>
-    <div class="page" data-page="addother-insert-break">
-        <div class="page-content">
-            <div class="list-block">
-                <ul>
-                    <li>
-                        <a id="add-other-pagebreak" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-media">
-                                    <i class="icon icon-pagebreak"></i>
-                                </div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textPageBreak %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a id="add-other-columnbreak" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-media">
-                                    <i class="icon icon-stringbreak"></i>
-                                </div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textColumnBreak %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a id="add-other-section" class="item-link">
-                            <div class="item-content">
-                                <div class="item-media">
-                                    <i class="icon icon-sectionbreak"></i>
-                                </div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textSectionBreak %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/AddShape.template

@@ -1,14 +0,0 @@
-<!-- Root view -->
-<div id="add-shapes-root">
-    <div class="page-content dataview shapes">
-        <% _.each(shapes, function(row) { %>
-        <ul class="row">
-            <% _.each(row, function(shape) { %>
-            <li data-type="<%= shape.type %>">
-                <div class="thumb" style="-webkit-mask-image:url('../mobile/resources/img/shapes/<%= shape.thumb %>')"></div>
-            </li>
-            <% }); %>
-        </ul>
-        <% }); %>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/AddTable.template

@@ -1,12 +0,0 @@
-<!-- Root view -->
-<div id="add-table-root">
-    <div class="page-content dataview table-styles">
-        <ul class="row">
-            <% _.each(styles, function(style) { %>
-            <li data-type="<%= style.templateId %>">
-                <img src="<%= style.imageUrl %>">
-            </li>
-            <% }); %>
-        </ul>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/EditChart.template

@@ -1,390 +0,0 @@
-<!-- Root view -->
-<div id="edit-chart-root">
-    <div class="list-block">
-        <ul>
-            <li>
-                <a id="chart-style" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textStyle %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <a id="chart-wrap" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textWrap %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <a id="chart-reorder" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textReorder %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-        </ul>
-    </div>
-    <div class="list-block">
-        <% if (!android) { %>
-        <ul>
-            <li>
-                <a id="chart-remove" class="item-link list-button" style="text-align: center; color: #f00"><%= scope.textRemoveChart %></a>
-            </li>
-        </ul>
-        <% } else { %>
-        <a id="chart-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;"><%= scope.textRemoveChart %></a>
-        <% } %>
-    </div>
-</div>
-
-<!-- Reorder view -->
-<div id="edit-chart-reorder">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textReorder %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page chart-reorder">
-        <div class="page-content">
-            <div class="list-block">
-                <ul>
-                    <li>
-                        <a data-type="all-up" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-media"><i class="icon icon-move-foreground"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textToForeground %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="all-down" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-media"><i class="icon icon-move-background"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textToBackground %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="move-up" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-media"><i class="icon icon-move-forward"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textForward %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="move-down" class="item-link no-indicator">
-                            <div data-type="move-down" class="item-content">
-                                <div class="item-media"><i class="icon icon-move-backward"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textBackward %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Wrap view -->
-<div id="edit-chart-wrap">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textWrap %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page chart-wrap">
-        <div class="page-content">
-            <div class="list-block chart-wrap-types">
-                <ul>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="chart-wrap" value="inline">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-inline"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textInline %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="chart-wrap" value="square">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-square"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textSquare %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="chart-wrap" value="tight">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-tight"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textTight %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="chart-wrap" value="through">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-through"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textThrough %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="chart-wrap" value="top-bottom">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-top-bottom"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textTopBottom %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="chart-wrap" value="infront">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-infront"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textInFront %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="chart-wrap" value="behind">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-behind"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textBehind %></div>
-                            </div>
-                        </label>
-                    </li>
-                </ul>
-            </div>
-            <div class="content-block-title align"><%= scope.textAlign %></div>
-            <div class="list-block align">
-                <ul>
-                    <li id="edit-chart-align">
-                        <div class="item-content buttons">
-                            <div class="item-inner">
-                                <div class="row">
-                                    <a data-type="left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
-                                    <a data-type="center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
-                                    <a data-type="right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="list-block inline">
-                <ul>
-                    <li id="edit-chart-movetext">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textMoveText %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li id="edit-chart-overlap">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textOverlap %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="content-block-title distance"><%= scope.textDistanceText %></div>
-            <div class="list-block distance" style="margin-bottom: 40px;">
-                <ul>
-                    <li id="table-distance">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-input">
-                                    <div class="range-slider">
-                                        <input type="range" min="0" max="200" value="0" step="1">
-                                    </div>
-                                </div>
-                                <div class="item-after value">0 pt</div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Styles view -->
-<div id="edit-chart-style">
-    <div class="navbar">
-        <div class="navbar-inner edit-chart-style" data-page="edit-chart-style">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding categories">
-                <% if (android) { %>
-                <div class="toolbar tabbar">
-                    <div data-page="index" class="toolbar-inner">
-                        <a href="#tab-chart-type" data-type="type" class="tab-link active"><%= scope.textType %></a>
-                        <a href="#tab-chart-style" data-type="style" class="tab-link"><%= scope.textStyle %></a>
-                        <a href="#tab-chart-fill" data-type="fill" class="tab-link"><%= scope.textFill %></a>
-                        <a href="#tab-chart-border" data-type="border" class="tab-link"><%= scope.textBorder %></a>
-                    </div>
-                </div>
-                <% } else { %>
-                <div class="buttons-row">
-                    <a href="#tab-chart-type" data-type="type" class="tab-link button active"><%= scope.textType %></a>
-                    <a href="#tab-chart-style" data-type="style" class="tab-link button"><%= scope.textStyle %></a>
-                    <a href="#tab-chart-fill" data-type="fill" class="tab-link button"><%= scope.textFill %></a>
-                    <a href="#tab-chart-border" data-type="border" class="tab-link button"><%= scope.textBorder %></a>
-                </div>
-                <% } %>
-            </div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="pages">
-    <div class="page" data-page="edit-chart-style">
-            <div class="page-content tabs" style="padding-top: 0;">
-                <div id="tab-chart-type" class="page-content tab active dataview chart-types">
-                    <% _.each(types, function(row) { %>
-                    <ul class="row">
-                        <% _.each(row, function(type) { %>
-                        <li data-type="<%= type.type %>">
-                            <div class="thumb" style="background-image:url('../mobile/resources/img/charts/<%= type.thumb %>')"></div>
-                        </li>
-                        <% }); %>
-                    </ul>
-                    <% }); %>
-                </div>
-                <div id="tab-chart-style" class="page-content tab dataview chart-styles" style="width: 100%;">
-                    <!--Styles-->
-                </div>
-                <div id="tab-chart-fill" class="page-content tab">
-                    <!--Fill colors-->
-                </div>
-                <div id="tab-chart-border" class="page-content tab">
-                    <div class="list-block">
-                        <ul>
-                            <li id="edit-chart-bordersize">
-                                <div style="padding: 15px 0 0 15px;"><%= scope.textSize %></div>
-                                <div class="item-content">
-                                    <div class="item-inner">
-                                        <div class="item-input">
-                                            <div class="range-slider">
-                                                <input type="range" min="0" max="7" value="0" step="1">
-                                            </div>
-                                        </div>
-                                        <div class="item-after value">0 pt</div>
-                                    </div>
-                                </div>
-                            </li>
-                            <li>
-                                <a id="edit-chart-bordercolor" class="item-link">
-                                    <div class="item-content">
-                                        <div class="item-inner">
-                                            <div class="item-title"><%= scope.textColor %></div>
-                                            <div class="item-after"><div class="color-preview"></div></div>
-                                        </div>
-                                    </div>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-    </div>
-    </div>
-</div>
-
-<!-- Border color view -->
-<div id="edit-chart-border-color-view">
-    <div class="navbar">
-        <div class="navbar-inner" data-page="edit-chart-border-color">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textColor %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-chart-border-color">
-        <div class="page-content">
-            <!--Color palette-->
-        </div>
-    </div>
-</div>
-
-<!-- Custom color view -->
-<div id="edit-chart-custom-color-view">
-    <div class="navbar">
-        <div class="navbar-inner" data-page="edit-chart-custom-color">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textCustomColor %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-chart-custom-color">
-        <div class="page-content">
-            <!--Color HSB palette-->
-        </div>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/EditHeader.template

@@ -1,79 +0,0 @@
-<!-- Root view -->
-<div id="edit-header-root">
-    <div class="list-block">
-        <ul>
-            <li id="header-diff-first">
-                <div class="item-content">
-                    <div class="item-inner">
-                        <div class="item-title"><%= scope.textDiffFirst %></div>
-                        <div class="item-after">
-                            <label class="label-switch">
-                                <input type="checkbox">
-                                <div class="checkbox"></div>
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li id="header-diff-odd">
-                <div class="item-content">
-                    <div class="item-inner">
-                        <div class="item-title"><%= scope.textDiffOdd %></div>
-                        <div class="item-after">
-                            <label class="label-switch">
-                                <input type="checkbox">
-                                <div class="checkbox"></div>
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li id="header-same-as">
-                <div class="item-content">
-                    <div class="item-inner">
-                        <div class="item-title"><%= scope.textSameAs %></div>
-                        <div class="item-after">
-                            <label class="label-switch">
-                                <input type="checkbox">
-                                <div class="checkbox"></div>
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </li>
-        </ul>
-    </div>
-    <div class="content-block-title"><%= scope.textPageNumbering %></div>
-    <div class="list-block">
-        <ul>
-            <li id="header-numbering-continue">
-                <div class="item-content">
-                    <div class="item-inner">
-                        <div class="item-title"><%= scope.textPrev %></div>
-                        <div class="item-after">
-                            <label class="label-switch">
-                                <input type="checkbox">
-                                <div class="checkbox"></div>
-                            </label>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li id="header-numbering-start">
-                <div class="item-content">
-                    <div class="item-inner">
-                        <div class="item-title"><%= scope.textFrom %></div>
-                        <div class="item-after splitter">
-                            <% if (!android) { %><label></label><% } %>
-                            <p class="buttons-row">
-                                <span class="button decrement no-ripple"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
-                                <% if (android) { %><label></label><% } %>
-                                <span class="button increment no-ripple"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
-                            </p>
-                        </div>
-                    </div>
-                </div>
-            </li>
-        </ul>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/EditHyperlink.template

@@ -1,52 +0,0 @@
-<!-- Link view -->
-<div id="edit-link-root">
-    <div class="list-block">
-        <ul>
-            <li>
-                <div id="edit-link-url" class="item-content">
-                    <div class="item-inner">
-                        <div class="item-title label"><%= scope.textLink %></div>
-                        <div class="item-input">
-                            <input type="url" placeholder="<%= scope.textLink %>">
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li>
-                <div id="edit-link-display" class="item-content">
-                    <div class="item-inner">
-                        <div class="item-title label"><%= scope.textDisplay %></div>
-                        <div class="item-input">
-                            <input type="text" placeholder="<%= scope.textDisplay %>">
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li>
-                <div id="edit-link-tip" class="item-content">
-                    <div class="item-inner">
-                        <div class="item-title label"><%= scope.textTip %></div>
-                        <div class="item-input">
-                            <input type="text" placeholder="<%= scope.textTip %>">
-                        </div>
-                    </div>
-                </div>
-            </li>
-        </ul>
-    </div>
-    <div class="list-block">
-        <% if (android) { %>
-        <a href="#" id="edit-link-edit" class="button button-raised button-fill disabled" style="margin: 20px 16px;"><%= scope.textEdit %></a>
-        <a href="#" id="edit-link-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;"><%= scope.textRemove %></a>
-        <% } else { %>
-        <ul>
-            <li>
-                <a href="#" id="edit-link-edit" class="list-button item-link disabled" style="text-align: center;"><%= scope.textEdit %></a>
-            </li>
-            <li>
-                <a href="#" id="edit-link-remove" class="list-button item-link" style="text-align: center; color: #f00"><%= scope.textRemove %></a>
-            </li>
-        </ul>
-        <% } %>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/EditImage.template

@@ -1,366 +0,0 @@
-<!-- Root view -->
-<div id="edit-image-root">
-    <div class="list-block">
-        <ul>
-            <li>
-                <a id="image-wrap" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textWrap %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <a id="image-replace" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textReplace %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <a id="image-reorder" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textReorder %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-        </ul>
-    </div>
-    <div class="list-block">
-        <ul>
-            <li>
-                <% if (android) { %>
-                <a id="image-default" class="button button-raised button-fill" style="margin: 20px 16px;"><%= scope.textDefault %></a>
-                <% } else { %>
-                <a id="image-default" class="item-link list-button" style="text-align: center;"><%= scope.textDefault %></a>
-                <% } %>
-            </li>
-            <li>
-                <% if (android) { %>
-                <a id="image-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;"><%= scope.textRemove %></a>
-                <% } else { %>
-                <a id="image-remove" class="item-link list-button" style="text-align: center; color: #f00"><%= scope.textRemove %></a>
-                <% } %>
-            </li>
-        </ul>
-    </div>
-</div>
-
-<!-- Reorder view -->
-<div id="edit-image-reorder-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textReorder %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page image-reorder">
-        <div class="page-content">
-            <div class="list-block">
-                <ul>
-                    <li>
-                        <a data-type="all-up" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-media"><i class="icon icon-move-foreground"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textToForeground %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="all-down" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-media"><i class="icon icon-move-background"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textToBackground %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="move-up" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-media"><i class="icon icon-move-forward"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textForward %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="move-down" class="item-link no-indicator">
-                            <div data-type="move-down" class="item-content">
-                                <div class="item-media"><i class="icon icon-move-backward"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textBackward %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Wrap view -->
-<div id="edit-image-wrap-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textWrap %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page image-wrap">
-        <div class="page-content">
-            <div class="list-block image-wrap-types">
-                <ul>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="image-wrap" value="inline">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-inline"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textInline %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="image-wrap" value="square">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-inline"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textSquare %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="image-wrap" value="tight">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-tight"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textTight %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="image-wrap" value="through">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-through"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textThrough %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="image-wrap" value="top-bottom">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-top-bottom"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textTopBottom %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="image-wrap" value="infront">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-infront"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textInFront %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="image-wrap" value="behind">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-behind"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textBehind %></div>
-                            </div>
-                        </label>
-                    </li>
-                </ul>
-            </div>
-            <div class="content-block-title align"><%= scope.textAlign %></div>
-            <div class="list-block align">
-                <ul>
-                    <li id="edit-image-align">
-                        <div class="item-content buttons">
-                            <div class="item-inner">
-                                <div class="row">
-                                    <a data-type="left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
-                                    <a data-type="center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
-                                    <a data-type="right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="list-block inline">
-                <ul>
-                    <li id="edit-image-movetext">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textMoveText %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li id="edit-image-overlap">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textOverlap %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="content-block-title distance"><%= scope.textDistanceText %></div>
-            <div class="list-block distance" style="margin-bottom: 40px;">
-                <ul>
-                    <li id="table-distance">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-input">
-                                    <div class="range-slider">
-                                        <input type="range" min="0" max="200" value="0" step="1">
-                                    </div>
-                                </div>
-                                <div class="item-after value">0 pt</div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Replace view -->
-<div id="edit-image-replace-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textReplace %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page">
-        <div class="page-content">
-            <div class="list-block">
-                <ul>
-                    <li>
-                        <a id="edit-image-file" class="item-link no-indicator no-fastclick">
-                            <div class="item-content">
-                                <div class="item-media">
-                                    <i class="icon icon-image-library"></i>
-                                </div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textFromLibrary %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a id="edit-image-url" class="item-link">
-                            <div class="item-content">
-                                <div class="item-media">
-                                    <i class="icon icon-link"></i>
-                                </div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textFromURL %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Url view -->
-<div id="edit-image-url-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textLinkSettings %></div>
-        </div>
-    </div>
-    <div class="page edit-image-url-link">
-        <div class="page-content">
-            <div class="content-block-title"><%= scope.textAddress %></div>
-            <div class="list-block">
-                <ul>
-                    <li>
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-input">
-                                    <input type="url" placeholder="<%= scope.textImageURL %>">
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="list-block disabled buttons">
-                <% if (android) { %>
-                <a href="#" class="button button-fill button-raised" style="margin: 20px 16px;"><%= scope.textReplaceImg %></a>
-                <% } else { %>
-                <ul>
-                    <li>
-                        <a href="#" class="list-button item-link"><%= scope.textReplaceImg %></a>
-                    </li>
-                </ul>
-                <% } %>
-            </div>
-        </div>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/EditParagraph.template

@@ -1,203 +0,0 @@
-<!-- Root view -->
-<div id="edit-paragraph-root">
-    <div class="list-block">
-        <ul>
-            <li>
-                <a id="paragraph-background" class="item-link">
-                <div class="item-content">
-                    <div class="item-inner">
-                        <div class="item-title"><%= scope.textBackground %></div>
-                        <div class="item-after"><div class="color-preview"></div></div>
-                    </div>
-                </div>
-                </a>
-            </li>
-        </ul>
-    </div>
-    <div class="list-block">
-        <ul>
-            <li>
-                <a id="paragraph-advanced" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textAdvSettings %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-        </ul>
-    </div>
-    <div class="content-block-title"><%= scope.textPrgStyles %></div>
-    <div id="paragraph-list" class="list-block">
-        <ul></ul>
-    </div>
-</div>
-
-<!-- Background color view -->
-<div id="edit-paragraph-color">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textBackground %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-paragraph-color">
-        <div class="page-content">
-        </div>
-    </div>
-</div>
-
-<!-- Advanced view -->
-<div id="edit-paragraph-advanced">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textAdvanced %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-paragraph-advanced">
-        <div class="page-content">
-            <div class="content-block-title"><%= scope.textFromText %></div>
-            <div class="list-block">
-                <ul>
-                    <li id="paragraph-distance-before">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textBefore %></div>
-                                <div class="item-after splitter">
-                                    <% if (!android) { %><label><%= scope.textAuto %></label><% } %>
-                                    <p class="buttons-row">
-                                        <span class="button decrement no-ripple"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
-                                        <% if (android) { %><label><%= scope.textAuto %></label><% } %>
-                                        <span class="button increment no-ripple"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li id="paragraph-distance-after">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textAfter %></div>
-                                <div class="item-after splitter">
-                                    <% if (!android) { %><label><%= scope.textAuto %></label><% } %>
-                                    <p class="buttons-row">
-                                        <span class="button decrement no-ripple"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
-                                        <% if (android) { %><label><%= scope.textAuto %></label><% } %>
-                                        <span class="button increment no-ripple"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li id="paragraph-spin-first-line">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textFirstLine %></div>
-                                <div class="item-after splitter">
-                                    <% if (!android) { %><label><%= scope.textAuto %></label><% } %>
-                                    <p class="buttons-row">
-                                        <span class="button decrement no-ripple"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
-                                        <% if (android) { %><label><%= scope.textAuto %></label><% } %>
-                                        <span class="button increment no-ripple"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="list-block">
-                <ul>
-                    <li id="paragraph-space">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textSpaceBetween %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="list-block">
-                <ul>
-                    <li id="paragraph-page-break">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textPageBreak %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li id="paragraph-page-orphan">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textOrphan %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li id="paragraph-page-keeptogether">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textKeepLines %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li id="paragraph-page-keepnext">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textKeepNext %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Custom color view -->
-<div id="edit-paragraph-custom-color-view">
-    <div class="navbar">
-        <div class="navbar-inner" data-page="edit-paragraph-custom-color">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textCustomColor %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-paragraph-custom-color">
-        <div class="page-content">
-            <!--Color HSB palette-->
-        </div>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/EditShape.template

@@ -1,465 +0,0 @@
-<!-- Root view -->
-<div id="edit-shape-root">
-    <div class="list-block">
-        <ul>
-            <li>
-                <a id="shape-style" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textStyle %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <a id="shape-wrap" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textWrap %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <a id="shape-replace" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textReplace %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <a id="shape-reorder" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textReorder %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-        </ul>
-    </div>
-    <div class="list-block">
-        <ul>
-            <li>
-                <% if (android) { %>
-                <a id="shape-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;"><%= scope.textRemoveShape %></a>
-                <% } else { %>
-                <a id="shape-remove" class="item-link list-button" style="text-align: center; color: #f00"><%= scope.textRemoveShape %></a>
-                <% } %>
-            </li>
-        </ul>
-    </div>
-</div>
-
-<!-- Reorder view -->
-<div id="edit-shape-reorder">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textReorder %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page shape-reorder">
-        <div class="page-content">
-            <div class="list-block">
-                <ul>
-                    <li>
-                        <a data-type="all-up" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-media"><i class="icon icon-move-foreground"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textToForeground %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="all-down" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-media"><i class="icon icon-move-background"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textToBackground %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="move-up" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-media"><i class="icon icon-move-forward"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textForward %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                    <li>
-                        <a data-type="move-down" class="item-link no-indicator">
-                            <div data-type="move-down" class="item-content">
-                                <div class="item-media"><i class="icon icon-move-backward"></i></div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textBackward %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Replace view -->
-<div id="edit-shape-replace">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textReplace %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page shape-replace">
-        <div class="page-content dataview shapes">
-            <% _.each(shapes, function(row) { %>
-            <ul class="row">
-                <% _.each(row, function(shape) { %>
-                <li data-type="<%= shape.type %>">
-                    <div class="thumb" style="-webkit-mask-image:url('../mobile/resources/img/shapes/<%= shape.thumb %>')"></div>
-                </li>
-                <% }); %>
-            </ul>
-            <% }); %>
-        </div>
-    </div>
-</div>
-
-<!-- Wrap view -->
-<div id="edit-shape-wrap">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textWrap %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page shape-wrap">
-        <div class="page-content">
-            <div class="list-block shape-wrap-types">
-                <ul>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="shape-wrap" value="inline">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-inline"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textInline %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="shape-wrap" value="square">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-square"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textSquare %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="shape-wrap" value="tight">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-tight"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textTight %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="shape-wrap" value="through">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-through"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textThrough %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="shape-wrap" value="top-bottom">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-top-bottom"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textTopAndBottom %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="shape-wrap" value="infront">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-infront"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textInFront %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="shape-wrap" value="behind">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-behind"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textBehind %></div>
-                            </div>
-                        </label>
-                    </li>
-                </ul>
-            </div>
-            <div class="content-block-title align"><%= scope.textAlign %></div>
-            <div class="list-block align">
-                <ul>
-                    <li id="edit-shape-align">
-                        <div class="item-content buttons">
-                            <div class="item-inner">
-                                <div class="row">
-                                    <a data-type="left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
-                                    <a data-type="center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
-                                    <a data-type="right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="list-block inline">
-                <ul>
-                    <li id="edit-shape-movetext">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textWithText %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li id="edit-shape-overlap">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textOverlap %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="content-block-title distance"><%= scope.textFromText %></div>
-            <div class="list-block distance" style="margin-bottom: 40px;">
-                <ul>
-                    <li id="table-distance">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-input">
-                                    <div class="range-slider">
-                                        <input type="range" min="0" max="200" value="0" step="1">
-                                    </div>
-                                </div>
-                                <div class="item-after value">0 pt</div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Styles view -->
-<div id="edit-shape-style">
-    <div class="navbar">
-        <div class="navbar-inner edit-shape-style" data-page="edit-shape-style">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding categories">
-                <% if (android) { %>
-                <div class="toolbar tabbar">
-                    <div data-page="index" class="toolbar-inner">
-                        <a href="#tab-shape-fill" data-type="fill" class="tab-link active"><%= scope.textFill %></a>
-                        <a href="#tab-shape-border" data-type="border" class="tab-link"><%= scope.textBorder %></a>
-                        <a href="#tab-shape-effects" data-type="effects" class="tab-link"><%= scope.textEffects %></a>
-                    </div>
-                </div>
-                <% } else { %>
-                <div class="buttons-row">
-                    <a href="#tab-shape-fill" data-type="fill" class="tab-link button active"><%= scope.textFill %></a>
-                    <a href="#tab-shape-border" data-type="border" class="tab-link button"><%= scope.textBorder %></a>
-                    <a href="#tab-shape-effects" data-type="effects" class="tab-link button"><%= scope.textEffects %></a>
-                </div>
-                <% } %>
-            </div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-shape-style">
-            <div class="page-content tabs" style="padding-top: 0;">
-                <div id="tab-shape-fill" class="page-content tab active">
-                    <!--Fill colors-->
-                </div>
-                <div id="tab-shape-border" class="page-content tab">
-                    <div class="list-block">
-                        <ul>
-                            <li id="edit-shape-bordersize">
-                                <div style="padding: 15px 0 0 15px;"><%= scope.textSize %></div>
-                                <div class="item-content">
-                                    <div class="item-inner">
-                                        <div class="item-input">
-                                            <div class="range-slider">
-                                                <input type="range" min="0" max="7" value="0" step="1">
-                                            </div>
-                                        </div>
-                                        <div class="item-after value">0 pt</div>
-                                    </div>
-                                </div>
-                            </li>
-                            <li>
-                                <a id="edit-shape-bordercolor" class="item-link">
-                                    <div class="item-content">
-                                        <div class="item-inner">
-                                            <div class="item-title"><%= scope.textColor %></div>
-                                            <div class="item-after"><div class="color-preview"></div></div>
-                                        </div>
-                                    </div>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <div id="tab-shape-effects" class="page-content tab">
-                    <div class="list-block">
-                        <ul>
-                            <li id="edit-shape-effect">
-                                <div style="padding: 15px 0 0 15px;"><%= scope.textOpacity %></div>
-                                <div class="item-content">
-                                    <div class="item-inner">
-                                        <div class="item-input">
-                                            <div class="range-slider">
-                                                <input type="range" min="0" max="100" value="0" step="1">
-                                            </div>
-                                        </div>
-                                        <div class="item-after value">0 %</div>
-                                    </div>
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-    </div>
-</div>
-
-<div id="edit-shape-style-nofill">
-    <div class="navbar">
-        <div class="navbar-inner edit-shape-style" data-page="edit-shape-style">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textBorder %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-shape-style">
-        <div class="page-content">
-            <div class="list-block">
-                <ul>
-                    <li id="edit-shape-bordersize">
-                        <div style="padding: 15px 0 0 15px;"><%= scope.textSize %></div>
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-input">
-                                    <div class="range-slider">
-                                        <input type="range" min="0" max="7" value="0" step="1">
-                                    </div>
-                                </div>
-                                <div class="item-after value">0 pt</div>
-                            </div>
-                        </div>
-                    </li>
-                    <li>
-                        <a id="edit-shape-bordercolor" class="item-link">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textColor %></div>
-                                    <div class="item-after"><div class="color-preview"></div></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Border color view -->
-<div id="edit-shape-border-color-view">
-    <div class="navbar">
-        <div class="navbar-inner" data-page="edit-shape-border-color">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textColor %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-shape-border-color">
-        <div class="page-content">
-            <!--Color palette-->
-        </div>
-    </div>
-</div>
-
-<!-- Custom color view -->
-<div id="edit-shape-custom-color-view">
-    <div class="navbar">
-        <div class="navbar-inner" data-page="edit-shape-custom-color">
-            <div class="left sliding back-fill"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textCustomColor %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-shape-custom-color">
-        <div class="page-content">
-            <!--Color HSB palette-->
-        </div>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/EditTable.template

@@ -1,467 +0,0 @@
-<!-- Root view -->
-<div id="edit-table-root">
-    <div class="list-block">
-        <ul>
-            <li id="table-insert">
-                <div class="item-content buttons">
-                    <div class="item-inner">
-                        <div class="row">
-                            <a id="insert-column-left" class="button no-ripple"><i class="icon icon-table-add-column-left"></i></a>
-                            <a id="insert-column-right" class="button no-ripple"><i class="icon icon-table-add-column-right"></i></a>
-                            <a id="insert-row-above" class="button no-ripple"><i class="icon icon-table-add-row-above"></i></a>
-                            <a id="insert-row-below" class="button no-ripple"><i class="icon icon-table-add-row-below"></i></a>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li id="table-remove">
-                <div class="item-content buttons">
-                    <div class="item-inner">
-                        <div class="row">
-                            <a id="remove-column" class="button no-ripple"><i class="icon icon-table-remove-column"></i></a>
-                            <a id="remove-row" class="button no-ripple"><i class="icon icon-table-remove-row"></i></a>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li>
-                <% if (!android) { %>
-                <a id="table-remove-all" class="item-link list-button" style="text-align: center; color: #f00"><%= scope.textRemoveTable %></a>
-                <% } %>
-            </li>
-        </ul>
-        <% if (android) { %>
-        <a id="table-remove-all" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;"><%= scope.textRemoveTable %></a>
-        <% } %>
-    </div>
-    <div class="list-block">
-        <ul>
-            <li>
-                <a id="table-options" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textTableOptions %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <a id="table-style" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textStyle %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <a id="table-wrap" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textWrap %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-        </ul>
-    </div>
-</div>
-
-<!-- Wrap view -->
-<div id="edit-table-wrap">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textWrap %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" id="edit-tablewrap-page" data-page="edit-table-wrap">
-        <div class="page-content">
-            <div class="list-block" id="table-wrap-type">
-                <ul>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="table-wrap" value="inline">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-table-inline"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textInline %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="table-wrap" value="flow">
-                            <% if (android) { %>
-                            <div class="item-media"><i class="icon icon-form-radio"></i></div>
-                            <% } else { %>
-                            <div class="item-media"><i class="icon icon-wrap-table-flow"></i></div>
-                            <% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textFlow %></div>
-                            </div>
-                        </label>
-                    </li>
-                </ul>
-            </div>
-            <div class="list-block">
-                <ul>
-                    <li id="table-move-text">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textWithText %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="content-block-title flow"><%= scope.textFromText %></div>
-            <div class="list-block flow" style="margin-bottom: 40px;">
-                <ul>
-                    <li id="table-distance">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-input">
-                                    <div class="range-slider">
-                                        <input type="range" min="0" max="200" value="0" step="1">
-                                    </div>
-                                </div>
-                                <div class="item-after value">0 pt</div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="content-block-title inline"><%= scope.textAlign %></div>
-            <div class="list-block inline" style="margin-bottom: 40px;">
-                <ul>
-                    <li id="table-align">
-                        <div class="item-content buttons">
-                            <div class="item-inner">
-                                <div class="row">
-                                    <a id="table-align-left" class="button no-ripple"><i class="icon icon-block-align-left"></i></a>
-                                    <a id="table-align-center" class="button no-ripple"><i class="icon icon-block-align-center"></i></a>
-                                    <a id="table-align-right" class="button no-ripple"><i class="icon icon-block-align-right"></i></a>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Options view -->
-<div id="edit-table-options">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textOptions %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-table-wrap">
-        <div class="page-content">
-            <div class="list-block">
-                <ul>
-                    <li id="table-option-repeatasheader">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textRepeatHeader %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li id="table-option-resizetofit">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textResizeFit %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="content-block-title"><%= scope.textCellMargins %></div>
-            <div class="list-block" style="margin-bottom: 40px;">
-                <ul>
-                    <li id="table-options-margins">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-input">
-                                    <div class="range-slider">
-                                        <input type="range" min="0" max="55" value="0" step="1">
-                                    </div>
-                                </div>
-                                <div class="item-after value">0 pt</div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Styles view -->
-<div id="edit-table-style">
-    <div class="navbar">
-        <div class="navbar-inner edit-table-style" data-page="edit-table-style">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding categories">
-                <% if (android) { %>
-                <div class="toolbar tabbar">
-                    <div data-page="index" class="toolbar-inner">
-                        <a href="#tab-table-style" data-type="style" class="tab-link active"><%= scope.textStyle %></a>
-                        <a href="#tab-table-fill" data-type="fill" class="tab-link"><%= scope.textFill %></a>
-                        <a href="#tab-table-border" data-type="border" class="tab-link"><%= scope.textBorder %></a>
-                    </div>
-                </div>
-                <% } else { %>
-                <div class="buttons-row">
-                    <a href="#tab-table-style" data-type="style" class="tab-link button active"><%= scope.textStyle %></a>
-                    <a href="#tab-table-fill"  data-type="fill" class="tab-link button"><%= scope.textFill %></a>
-                    <a href="#tab-table-border" data-type="border" class="tab-link button"><%= scope.textBorder %></a>
-                </div>
-                <% } %>
-            </div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-table-style">
-            <div class="page-content tabs" style="padding-top: 0;">
-                <div id="tab-table-style" class="page-content tab active">
-                    <div class="list-block">
-                        <ul>
-                            <li id="edit-table-styles">
-                                <div class="item-content">
-                                    <div class="item-inner"></div>
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="list-block" style="margin-bottom: 40px;">
-                        <ul>
-                            <li>
-                                <a id="edit-table-style-options" class="item-link">
-                                    <div class="item-content">
-                                        <div class="item-inner">
-                                            <div class="item-title"><%= scope.textStyleOptions %></div>
-                                        </div>
-                                    </div>
-                                </a>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <div id="tab-table-fill" class="page-content tab">
-                    <!--Fill colors-->
-                </div>
-                <div id="tab-table-border" class="page-content tab">
-                    <div class="list-block">
-                        <ul>
-                            <li id="edit-table-bordersize">
-                                <div style="padding: 15px 0 0 15px;"><%= scope.textSize %></div>
-                                <div class="item-content">
-                                    <div class="item-inner">
-                                        <div class="item-input">
-                                            <div class="range-slider">
-                                                <input type="range" min="0" max="7" value="0" step="1">
-                                            </div>
-                                        </div>
-                                        <div class="item-after value">0 pt</div>
-                                    </div>
-                                </div>
-                            </li>
-                            <li>
-                                <a id="edit-table-bordercolor" class="item-link">
-                                    <div class="item-content">
-                                        <div class="item-inner">
-                                            <div class="item-title"><%= scope.textColor %></div>
-                                            <div class="item-after"><div class="color-preview"></div></div>
-                                        </div>
-                                    </div>
-                                </a>
-                            </li>
-                            <li id="edit-table-bordertypes">
-                                <div class="item-content buttons" style="-webkit-flex-flow: row wrap;justify-content: space-around;">
-                                    <div class="item-inner" style="margin: 20px 0;">
-                                        <div class="row">
-                                            <a class="button no-ripple" style="min-width:0;" data-type="lrtbcm"><i class="icon icon-table-borders-all"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type=""><i class="icon icon-table-borders-none"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type="cm"><i class="icon icon-table-borders-inner"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type="lrtb"><i class="icon icon-table-borders-outer"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type="l"><i class="icon icon-table-borders-left"></i></a>
-                                        </div>
-                                    </div>
-                                    <div class="item-inner" style="margin: 0 0 20px;">
-                                        <div class="row">
-                                            <a class="button no-ripple" style="min-width:0;" data-type="c"><i class="icon icon-table-borders-center"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type="r"><i class="icon icon-table-borders-right"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type="t"><i class="icon icon-table-borders-top"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type="m"><i class="icon icon-table-borders-middle"></i></a>
-                                            <a class="button no-ripple" style="min-width:0;" data-type="b"><i class="icon icon-table-borders-bottom"></i></a>
-                                        </div>
-                                    </div>
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-    </div>
-</div>
-
-<!-- Style options view -->
-<div id="edit-table-style-options-view">
-    <div class="navbar">
-        <div class="navbar-inner" data-page="edit-table-style-options">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textOptions %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-table-style-options">
-        <div class="page-content">
-            <div class="list-block">
-                <ul>
-                    <li id="table-options-header-row">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textHeaderRow %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li id="table-options-total-row">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textTotalRow %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li id="table-options-banded-row">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textBandedRow %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="list-block">
-                <ul>
-                    <li id="table-options-first-column">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textFirstColumn %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li id="table-options-last-column">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textLastColumn %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li id="table-options-banded-column">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textBandedColumn %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Style options view -->
-<div id="edit-table-border-color-view">
-    <div class="navbar">
-        <div class="navbar-inner" data-page="edit-table-border-color">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textColor %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-table-border-color">
-        <div class="page-content">
-            <!--Color palette-->
-        </div>
-    </div>
-</div>
-
-<!-- Custom color view -->
-<div id="edit-table-custom-color-view">
-    <div class="navbar">
-        <div class="navbar-inner" data-page="edit-table-custom-color">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textCustomColor %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-table-custom-color">
-        <div class="page-content">
-            <!--Color HSB palette-->
-        </div>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/EditText.template

@@ -1,426 +0,0 @@
-<!-- Root view -->
-<div id="edit-text-root">
-    <div class="list-block">
-        <ul>
-            <li>
-                <a id="font-fonts" class="item-link">
-                    <div class="item-content">
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textFonts %></div>
-                            <div class="item-after" style="color: #000;"><span></span><span style="margin-left: 5px;"></span></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <div class="item-content buttons">
-                    <div class="item-inner">
-                        <div class="row">
-                            <a id="font-bold" class="button no-fastclick"><b><%= scope.textCharacterBold %></b></a>
-                            <a id="font-italic" class="button no-fastclick"><i><%= scope.textCharacterItalic %></i></a>
-                            <a id="font-underline" class="button no-fastclick" style="text-decoration: underline;"><%= scope.textCharacterUnderline %></a>
-                            <a id="font-strikethrough" class="button no-fastclick" style="text-decoration: line-through"><%= scope.textCharacterStrikethrough %></a>
-                        </div>
-                    </div>
-                </div>
-            </li>
-            <li>
-                <a id="font-color" class="item-link">
-                    <div class="item-content">
-                        <% if (!android) { %><div class="item-media"><i class="icon icon-text-color"><span class="color-preview"></span></i></div><% } %>
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textFontColor %></div>
-                            <% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <a id="font-background" class="item-link">
-                    <div class="item-content">
-                        <% if (!android) { %><div class="item-media"><i class="icon icon-text-selection"><span class="color-preview"></span></i></div><% } %>
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textHighlightColor %></div>
-                            <% if (android) { %><div class="item-after"><div class="color-preview"></div></div><% } %>
-                        </div>
-                    </div>
-                </a>
-            </li>
-            <li>
-                <a id="font-additional" class="item-link">
-                    <div class="item-content">
-                        <% if (!android) { %><div class="item-media"><i class="icon icon-text-additional"></i></div><% } %>
-                        <div class="item-inner">
-                            <div class="item-title"><%= scope.textAdditionalFormat %></div>
-                        </div>
-                    </div>
-                </a>
-            </li>
-        </ul>
-    </div>
-    <div class="list-block">
-        <ul>
-            <li><div id="paragraph-align" class="item-content buttons">
-                <div class="item-inner">
-                    <div class="row">
-                        <a id="font-left" class="button no-ripple"><i class="icon icon-text-align-left"></i></a>
-                        <a id="font-center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
-                        <a id="font-right" class="button no-ripple"><i class="icon icon-text-align-right"></i></a>
-                        <a id="font-just" class="button no-ripple"><i class="icon icon-text-align-jast"></i></a>
-                    </div>
-                </div>
-            </div></li>
-            <li><div class="item-content buttons">
-                <div class="item-inner">
-                    <div class="row">
-                        <a id="font-moveleft" class="button no-ripple"><i class="icon icon-de-indent"></i></a>
-                        <a id="font-moveright" class="button no-ripple"><i class="icon icon-in-indent"></i></a>
-                    </div>
-                </div>
-            </div></li>
-            <li><a id="font-bullets" class="item-link">
-                <div class="item-content">
-                    <% if (!android) { %><div class="item-media"><i class="icon icon-bullets"></i></div><% } %>
-                    <div class="item-inner">
-                        <div class="item-title"><%= scope.textBullets %></div>
-                    </div>
-                </div></a></li>
-            <li><a id="font-numbers" class="item-link">
-                <div class="item-content">
-                    <% if (!android) { %><div class="item-media"><i class="icon icon-numbers"></i></div><% } %>
-                    <div class="item-inner">
-                        <div class="item-title"><%= scope.textNumbers %></div>
-                    </div>
-                </div></a></li>
-            <li><a id="font-line-spacing" class="item-link">
-                <div class="item-content">
-                    <% if (!android) { %><div class="item-media"><i class="icon icon-linespacing"></i></div><% } %>
-                    <div class="item-inner">
-                        <div class="item-title"><%= scope.textLineSpacing %></div>
-                    </div>
-                </div></a></li>
-        </ul>
-    </div>
-</div>
-
-<!-- Fonts view -->
-<div id="edit-text-fonts">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textFonts %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-text-font-page">
-        <div class="page-content">
-            <div class="list-block">
-                <ul>
-                    <li id="font-size">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textSize %></div>
-                                <div class="item-after splitter">
-                                    <% if (!android) { %><label></label><% } %>
-                                    <p class="buttons-row">
-                                        <span class="button decrement no-ripple"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
-                                        <% if (android) { %><label></label><% } %>
-                                        <span class="button increment no-ripple"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-            <div class="content-block-title"><%= scope.textFonts %></div>
-            <div id="font-list" class="list-block virtual-list">
-                <!-- Fonts List -->
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Font color view -->
-<div id="edit-text-color">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></a></div>
-            <div class="center sliding"><%= scope.textFontColors %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-text-font-color">
-        <div class="page-content">
-            <div class="list-block" style="<% if (!android) { %>margin-bottom: -36px;<% } %>">
-                <ul>
-                    <li>
-                        <a id="font-color-auto" class="item-link no-indicator">
-                            <div class="item-content">
-                                <div class="item-media">
-                                    <div class="color-auto" style="width:22px; height: 22px; background-color: #000;"></div>
-                                </div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textAutomatic %></div>
-                                </div>
-                            </div>
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Highlight color view -->
-<div id="edit-text-background">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></a></div>
-            <div class="center sliding"><%= scope.textHighlightColors %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-text-font-background">
-        <div class="page-content">
-        </div>
-    </div>
-</div>
-
-
-<!-- Additional view -->
-<div id="edit-text-additional">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></a></div>
-            <div class="center sliding"><%= scope.textAdditional %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" id="page-text-additional" data-page="edit-text-additional">
-        <div class="page-content">
-            <div class="list-block" id="text-additional">
-                <ul>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="text-strikethrough" value="strikethrough">
-                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textStrikethrough %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="text-strikethrough" value="double-strikethrough">
-                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textDblStrikethrough %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="text-script" value="superscript">
-                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textDblSuperscript %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="text-script" value="subscript">
-                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textSubscript %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="text-caps" value="small">
-                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textSmallCaps %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="text-caps" value="all">
-                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textAllCaps %></div>
-                            </div>
-                        </label>
-                    </li>
-                </ul>
-            </div>
-            <div class="list-block">
-                <ul>
-                    <li id="letter-spacing" id="letter-spacing">
-                        <div class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textLetterSpacing %></div>
-                                <div class="item-after splitter">
-                                    <% if (!android) { %><label></label><% } %>
-                                    <p class="buttons-row">
-                                        <span class="button decrement no-ripple"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
-                                        <% if (android) { %><label></label><% } %>
-                                        <span class="button increment no-ripple"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Line Spacing view -->
-<div id="edit-text-linespacing">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></a></div>
-            <div class="center sliding"><%= scope.textLineSpacing %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" id="page-text-linespacing" data-page="edit-text-additional">
-        <div class="page-content">
-            <div class="list-block">
-                <ul>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="line-spacing" value="1">
-                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                            <div class="item-inner">
-                                <div class="item-title">1.0</div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="line-spacing" value="1.15">
-                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                            <div class="item-inner">
-                                <div class="item-title">1.15</div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="line-spacing" value="1.5">
-                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                            <div class="item-inner">
-                                <div class="item-title">1.5</div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="line-spacing" value="2">
-                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                            <div class="item-inner">
-                                <div class="item-title">2.0</div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="line-spacing" value="2.5">
-                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                            <div class="item-inner">
-                                <div class="item-title">2.5</div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="line-spacing" value="3">
-                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                            <div class="item-inner">
-                                <div class="item-title">3.0</div>
-                            </div>
-                        </label>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Bullets view -->
-<div id="edit-text-bullets">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></a></div>
-            <div class="center sliding"><%= scope.textBullets %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" id="page-text-bullets">
-        <div class="page-content dataview bullets">
-            <% _.each(bullets, function(row) { %>
-            <ul class="row">
-                <% _.each(row, function(bullet) { %>
-                <li data-type="<%= bullet.type %>">
-                    <% if (bullet.thumb.length < 1) { %>
-                    <div class="thumb" style="position: relative;"><label><%= scope.textNone %></label></div>
-                    <% } else { %>
-                    <div class="thumb" style="background-image:url('../mobile/resources/img/bullets/<%= bullet.thumb %>')"></div>
-                    <% } %>
-                </li>
-                <% }); %>
-            </ul>
-            <% }); %>
-        </div>
-    </div>
-</div>
-
-<!-- Numbers view -->
-<div id="edit-text-numbers">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></a></div>
-            <div class="center sliding"><%= scope.textNumbers %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" id="page-text-numbers">
-        <div class="page-content dataview numbers">
-            <% _.each(numbers, function(row) { %>
-            <ul class="row">
-                <% _.each(row, function(number) { %>
-                <li data-type="<%= number.type %>">
-                    <% if (number.thumb.length < 1) { %>
-                    <div class="thumb" style="position: relative;"><label><%= scope.textNone %></label></div>
-                    <% } else { %>
-                    <div class="thumb" style="background-image:url('../mobile/resources/img/numbers/<%= number.thumb %>')"></div>
-                    <% } %>
-                </li>
-                <% }); %>
-            </ul>
-            <% }); %>
-        </div>
-    </div>
-</div>
-
-<!-- Custom color view -->
-<div id="edit-text-custom-color-view">
-    <div class="navbar">
-        <div class="navbar-inner" data-page="edit-text-custom-color">
-            <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textCustomColor %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link icon-only close-picker"><i class="icon icon-expand-down"></i></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="edit-text-custom-color">
-        <div class="page-content">
-            <!--Color HSB palette-->
-        </div>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/Editor.template

@@ -1,9 +0,0 @@
-<div class="views">
-    <div class="view view-main">
-        <div class="pages navbar-through">
-            <div data-page="index" class="page">
-                <div id="editor-container" class="page-content no-fastclick"><div id="editor_sdk" class="no-fastclick with-logo"></div></div>
-            </div>
-        </div>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/Search.template

@@ -1,107 +0,0 @@
-<!--Toolbar panel-->
-<div id="search-panel-view">
-    <div class="searchbar document navbar navbar-hidden">
-        <div class="navbar-inner">
-            <div class="left">
-                <a id="search-settings" href="#" class="link icon-only"><i class="icon icon-settings"></i></a>
-            </div>
-            <div class="center">
-                <form class="searchbar search">
-                    <div class="searchbar-input search">
-                        <input type="search" placeholder="<%= scope.textSearch %>"><a href="#" class="searchbar-clear"></a>
-                    </div>
-                </form>
-                <form class="searchbar replace">
-                    <div class="searchbar-input replace">
-                        <input type="search" placeholder="<%= scope.textReplace %>"><a href="#" class="searchbar-clear"></a>
-                    </div>
-                </form>
-            </div>
-            <div class="right">
-                <% if (phone) { %>
-                <p class="buttons-row">
-                    <a href="#" class="link icon-only prev disabled"><i class="icon icon-prev"></i></a>
-                    <a href="#" class="link icon-only next disabled"><i class="icon icon-next"></i></a>
-                </p>
-                <p class="buttons-row replace">
-                    <a href="#" class="link replace disabled"><%= scope.textReplace %></a>
-                </p>
-                <% } else { %>
-                <p class="buttons-row">
-                    <a href="#" class="link replace disabled"><%= scope.textReplace %></a>
-                    <a href="#" class="link icon-only prev disabled"><i class="icon icon-prev"></i></a>
-                    <a href="#" class="link icon-only next disabled"><i class="icon icon-next"></i></a>
-                </p>
-                <% } %>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!--Settings-->
-<div id="search-settings-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="center sliding"><%= isEdit ? scope.textFindAndReplace : scope.textFind %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link close-popup"><b><%= scope.textDone %></b></a><% } %></div>
-        </div>
-    </div>
-    <div class="page" data-page="search-settings">
-        <div class="page-content">
-            <% if (isEdit) { %>
-            <div class="list-block">
-                <ul>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="search-type" value="search">
-                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textFind %></div>
-                            </div>
-                        </label>
-                    </li>
-                    <li>
-                        <label class="label-radio item-content">
-                            <input type="radio" name="search-type" value="replace">
-                            <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textFindAndReplace %></div>
-                            </div>
-                        </label>
-                    </li>
-                </ul>
-            </div>
-            <% } %>
-            <div class="list-block">
-                <ul>
-                    <li>
-                        <div id="search-case-sensitive" class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textCase %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                    <li>
-                        <div id="search-highlight-results" class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textHighlight %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/Settings.template

@@ -1,940 +0,0 @@
-<!-- Root view -->
-<div id="settings-root-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="center sliding"><%= scope.textSettings %></div>
-            <div class="right"><% if (phone) { %><a href="#" class="link close-popup"><%= scope.textDone %></a><% } %></div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page" data-page="settings-root-view">
-            <div class="page-content">
-                <div class="list-block">
-                    <ul>
-                        <% if (phone) { %>
-                        <li>
-                            <a id="settings-search" class="item-link no-indicator">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-search"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title"><%= scope.textFind %></div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <% } %>
-                        <li>
-                            <div id="settings-readermode" class="item-content">
-                                <div class="item-media">
-                                    <i class="icon icon-reader"></i>
-                                </div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textReader %></div>
-                                    <div class="item-after">
-                                        <label class="label-switch">
-                                            <input type="checkbox">
-                                            <div class="checkbox"></div>
-                                        </label>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                        <% if (orthography) { %>
-                        <li>
-                            <a id="settings-orthography" class="item-link no-indicator">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-spellcheck"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title">Проверка правописания</div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <% } %>
-                        <% if(width < 360) {%>
-                        <li>
-                            <div id="settings-collaboration" class="item-content" style="display: none;">
-                                <div class="item-media">
-                                    <i class="icon icon-collaboration"></i>
-                                </div>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textCollaboration %></div>
-                                </div>
-                            </div>
-                        </li>
-                        <% } %>
-                        <li>
-                            <a id="settings-document" class="item-link" data-page="#settings-document-view">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-doc-setup"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title"><%= scope.textDocumentSettings %></div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a id="settings-advanced" class="item-link" data-page="#settings-advanced-view">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-app-settings"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title"><%= scope.textAdvancedSettings %></div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a id="settings-download-as" class="item-link" data-page="#settings-download-view">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-download"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title"><%= scope.textDownload %></div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a id="settings-download" class="item-link no-indicator">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-download"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title"><%= scope.textDownload %></div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a id="settings-print" class="item-link no-indicator">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-print"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title"><%= scope.textPrint %></div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a id="settings-document-info" class="item-link" data-page="#settings-info-view">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-info"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title"><%= scope.textDocInfo %></div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <!--<li>-->
-                            <!--<a id="settings-history" class="item-link" data-page="#settings-history-view">-->
-                                <!--<div class="item-content">-->
-                                    <!--<div class="item-media">-->
-                                        <!--<i class="icon icon-versions"></i>-->
-                                    <!--</div>-->
-                                    <!--<div class="item-inner">-->
-                                        <!--<div class="item-title">Document History</div>-->
-                                    <!--</div>-->
-                                <!--</div>-->
-                            <!--</a>-->
-                        <!--</li>-->
-                        <li>
-                            <a id="settings-help" class="item-link">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-help"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title"><%= scope.textHelp %></div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a id="settings-about" class="item-link" data-page="#settings-about-view">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-about"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title"><%= scope.textAbout %></div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Document Settings view -->
-<div id="settings-document-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textDocumentSettings %></div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page" data-page="settings-document-view">
-            <div class="page-content">
-                <div class="content-block-title"><%= scope.textOrientation %></div>
-                <div class="list-block">
-                    <ul>
-                        <li>
-                            <label class="label-radio item-content">
-                                <input type="radio" name="doc-orientation" value="true">
-                                <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textPortrait %></div>
-                                </div>
-                            </label>
-                        </li>
-                        <li>
-                            <label class="label-radio item-content">
-                                <input type="radio" name="doc-orientation" value="false">
-                                <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textLandscape %></div>
-                                </div>
-                            </label>
-                        </li>
-                    </ul>
-                </div>
-                <div class="content-block-title"><%= scope.textFormat %></div>
-                <div class="list-block">
-                    <ul>
-                        <li class="media-item">
-                            <a id="settings-document-format" class="item-link item-content" data-page="#settings-document-formats-view">
-                                <div class="item-inner">
-                                    <div class="item-title-row">
-                                        <div class="item-title"><%= scope.textCustom %></div>
-                                    </div>
-                                    <div class="item-subtitle"><%= scope.textCustomSize %></div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a id="margin-settings" class="item-link item-content" data-page="#margins-view">
-                                <div class="item-inner">
-                                    <div class="item-title-row">
-                                        <div class="item-title"><%= scope.textMargins %></div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                   </ul>
-                </div>
-                <div class="list-block">
-                    <ul>
-                        <li>
-                            <a id="color-schemes" class="item-link item-content" data-page="#color-schemes-view">
-                                <div class="item-inner">
-                                    <div class="item-title-row">
-                                        <div class="item-title"><%= scope.textColorSchemes %></div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                   </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Document Formats view -->
-<div id="settings-document-formats-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textDocumentFormats %></div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page" data-page="settings-document-formats-view">
-            <div class="page-content">
-                <div class="list-block media-list">
-                    <ul></ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Document Info view -->
-<div id="settings-info-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding">
-                <a href="#" class="back link">
-                    <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %>
-                </a>
-            </div>
-            <div class="center sliding"><%= scope.textDocInfo %></div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page" data-page="settings-info-view">
-            <div class="page-content">
-                <div class="content-block-title"><%= scope.textDocTitle %></div>
-                <div class="list-block">
-                    <ul>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div id="settings-document-title" class="item-title"><%= scope.textLoading %></div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-                <div class="content-block-title display-owner"><%= scope.textOwner %></div>
-                <div class="list-block display-owner">
-                    <ul>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div id="settings-document-owner" class="item-title"><%= scope.textLoading %></div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-                <div class="content-block-title display-location"><%= scope.textLocation %></div>
-                <div class="list-block display-location">
-                    <ul>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div id="settings-doc-location" class="item-title"><%= scope.textLoading %></div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-                <div class="content-block-title display-uploaded"><%= scope.textUploaded %></div>
-                <div class="list-block display-uploaded">
-                    <ul>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div id="settings-doc-uploaded" class="item-title"><%= scope.textLoading %></div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-                <div class="content-block-title"><%= scope.textStatistic %></div>
-                <div class="list-block">
-                    <ul>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textPages %></div>
-                                <div class="item-after" id="statistic-pages">0</div>
-                            </div>
-                        </li>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textParagraphs %></div>
-                                <div class="item-after" id="statistic-paragraphs">0</div>
-                            </div>
-                        </li>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textWords %></div>
-                                <div class="item-after" id="statistic-words">0</div>
-                            </div>
-                        </li>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textSymbols %></div>
-                                <div class="item-after" id="statistic-symbols">0</div>
-                            </div>
-                        </li>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textSpaces %></div>
-                                <div class="item-after" id="statistic-spaces">0</div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-
-                <div class="content-block-title display-title"><%= scope.textTitle %></div>
-                <div class="list-block display-title">
-                    <ul>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div id="settings-doc-title" class="item-title"><%= scope.textLoading %></div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-                <div class="content-block-title display-subject"><%= scope.textSubject %></div>
-                <div class="list-block display-subject">
-                    <ul>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div id="settings-doc-subject" class="item-title"><%= scope.textLoading %></div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-                <div class="content-block-title display-comment"><%= scope.textComment %></div>
-                <div class="list-block display-comment">
-                    <ul>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div id="settings-doc-comment" class="item-title"><%= scope.textLoading %></div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-                <div class="content-block-title display-last-mode"><%= scope.textLastModified %></div>
-                <div class="list-block display-last-mode">
-                    <ul>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div id="settings-doc-last-mod" class="item-title"><%= scope.textLoading %></div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-                <div class="content-block-title display-mode-by"><%= scope.textLastModifiedBy %></div>
-                <div class="list-block display-mode-by">
-                    <ul>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div id="settings-doc-mod-by" class="item-title"><%= scope.textLoading %></div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-                <div class="content-block-title display-created-date"><%= scope.textCreated %></div>
-                <div class="list-block display-created-date">
-                    <ul>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div id="settings-doc-date" class="item-title"><%= scope.textLoading %></div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-                <div class="content-block-title display-application"><%= scope.textApplication %></div>
-                <div class="list-block display-application">
-                    <ul>
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div id="settings-doc-application" class="item-title"><%= scope.textLoading %></div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-                <div class="content-block-title display-author"><%= scope.textAuthor %></div>
-                <div class="list-block display-author">
-                    <ul id="list-creator">
-                        <li class="item-content">
-                            <div class="item-inner">
-                                <div id="settings-doc-author" class="item-title"><%= scope.textLoading %></div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Download view -->
-<div id="settings-download-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding">
-                <a href="#" class="back link">
-                    <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %>
-                </a>
-            </div>
-            <div class="center sliding"><%= scope.textDownload %></div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page formats" data-page="settings-download-view">
-            <div class="page-content">
-                <div class="content-block-title"><%= scope.textDownloadAs %></div>
-                <div class="list-block">
-                    <ul>
-                        <li>
-                            <a data-format="65" class="item-link no-indicator">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-format-docx"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title">DOCX</div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a data-format="513" class="item-link no-indicator">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-format-pdf"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title">PDF</div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a data-format="2305" class="item-link no-indicator">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-format-pdfa"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title">PDF/A</div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a data-format="69" class="item-link no-indicator">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-format-txt"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title">TXT</div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a data-format="68" class="item-link no-indicator">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-format-rtf"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title">RTF</div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a data-format="67" class="item-link no-indicator">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-format-odt"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title">ODT</div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a data-format="2051" class="item-link no-indicator">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-format-html"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title">HTML</div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a data-format="76" class="item-link no-indicator">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-format-dotx"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title">DOTX</div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <a data-format="79" class="item-link no-indicator">
-                                <div class="item-content">
-                                    <div class="item-media">
-                                        <i class="icon icon-format-ott"></i>
-                                    </div>
-                                    <div class="item-inner">
-                                        <div class="item-title">OTT</div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- History view -->
-<div id="settings-history-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding">
-                <a href="#" class="back link">
-                    <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %>
-                </a>
-            </div>
-            <div class="center sliding">Version History</div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page" data-page="settings-history-view">
-            <div class="page-content">
-                <div class="content-block-title">Saved versions</div>
-                <div class="content-block inset">
-                    <div class="content-block-inner">
-                        <p>Under construction</p>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- About view -->
-<div id="settings-about-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding">
-                <a href="#" class="back link">
-                    <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %>
-                </a>
-            </div>
-            <div class="center sliding"><%= scope.textAbout %></div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page about" data-page="settings-about-view">
-            <div class="page-content">
-                <div class="content-block">
-                    <div class="logo" style="display: inline-block; width: 100%; height: 55px;"></div>
-                    <div id="settings-about-logo" style="margin-top: 20px;display: none;"></div>
-                </div>
-                <div class="content-block">
-                    <h3>DOCUMENT EDITOR</h3>
-                    <h3><%= scope.textVersion %> <%= prodversion %></h3>
-                </div>
-                <div class="content-block">
-                    <h3 id="settings-about-name" class="vendor"><%= publishername %></h3>
-                    <p><label><%= scope.textAddress %>:</label><a id="settings-about-address" class="external" href="#"><%= publisheraddr %></a></p>
-                    <p><label><%= scope.textEmail %>:</label><a id="settings-about-email" class="external" target="_blank" href="mailto:<%= supportemail %>"><%= supportemail %></a></p>
-                    <p><label><%= scope.textTel %>:</label><a id="settings-about-tel" class="external" target="_blank" href="tel:<%= phonenum %>"><%= phonenum %></a></p>
-                    <p><a id="settings-about-url" class="external" target="_blank" href="<%= publisherurl %>"><%= printed_url %></a></p>
-                    <p><label id="settings-about-info" style="display: none;"></label></p>
-                </div>
-                <div class="content-block" id="settings-about-licensor" style="display: none;">
-                    <div class="content-block-inner" style="padding-top:0; padding-bottom: 1px;"></div>
-                    <p><label><%= scope.textPoweredBy %></label></p>
-                    <h3 class="vendor"><%= publishername %></h3>
-                    <p><a class="external" target="_blank" href="<%= publisherurl %>"><%= printed_url %></a></p>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Advanced Settings view -->
-<div id="settings-advanced-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textAdvancedSettings %></div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page" data-page="settings-advanced-view">
-            <div class="page-content">
-
-                <div class="content-block-title"><%= scope.textUnitOfMeasurement %></div>
-                <div class="list-block">
-                    <ul>
-                        <li>
-                            <label class="label-radio item-content">
-                                <input type="radio" name="unit-of-measurement" value="0">
-                                <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textCentimeter %></div>
-                                </div>
-                            </label>
-                        </li>
-                        <li>
-                            <label class="label-radio item-content">
-                                <input type="radio" name="unit-of-measurement" value="1">
-                                <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textPoint %></div>
-                                </div>
-                            </label>
-                        </li>
-                        <li>
-                            <label class="label-radio item-content">
-                                <input type="radio" name="unit-of-measurement" value="2">
-                                <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textInch %></div>
-                                </div>
-                            </label>
-                        </li>
-                    </ul>
-                </div>
-
-                <div class="list-block">
-                    <ul>
-                        <div id="settings-spellcheck" class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textSpellcheck %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </ul>
-                </div>
-
-                <div class="list-block">
-                    <ul>
-                        <div id="settings-no-characters" class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textNoCharacters %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                        <div id="settings-hidden-borders" class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textHiddenTableBorders %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </ul>
-                </div>
-
-                <div class="content-block-title display-view"><%= scope.textCommentingDisplay %></div>
-                <div class="list-block display-view">
-                    <ul>
-                        <div id="settings-display-comments" class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textDisplayComments %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                        <div id="settings-display-resolved" class="item-content">
-                            <div class="item-inner">
-                                <div class="item-title"><%= scope.textDisplayResolvedComments %></div>
-                                <div class="item-after">
-                                    <label class="label-switch">
-                                        <input type="checkbox">
-                                        <div class="checkbox"></div>
-                                    </label>
-                                </div>
-                            </div>
-                        </div>
-                    </ul>
-                </div>
-
-                <div class="list-block display-view">
-                    <ul>
-                        <li>
-                            <a id="settings-macros" class="item-link item-content" data-page="#macros-settings-view">
-                                <div class="item-inner">
-                                    <div class="item-title-row">
-                                        <div class="item-title"><%= scope.textMacrosSettings %></div>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                   </ul>
-                </div>
-
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Color schemes view -->
-<div id="color-schemes-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textColorSchemes %></div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page" data-page="color-schemes-view">
-            <div class="page-content">
-                <div id="color-schemes-content" class="list-block">
-                    <ul></ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Margin settings view -->
-<div id="margins-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textMargins %></div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page" data-page="margins-view">
-            <div class="page-content">
-                <div class="list-block">
-                    <ul>
-                        <li id="document-margin-top">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textTop %></div>
-                                    <div class="item-after splitter">
-                                        <% if (!android) { %><label></label><% } %>
-                                        <p class="buttons-row">
-                                            <span class="button decrement no-fastclick"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
-                                            <% if (android) { %><label></label><% } %>
-                                            <span class="button increment no-fastclick"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                        <li id="document-margin-bottom">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textBottom %></div>
-                                    <div class="item-after splitter">
-                                        <% if (!android) { %><label></label><% } %>
-                                        <p class="buttons-row">
-                                            <span class="button decrement no-fastclick"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
-                                            <% if (android) { %><label></label><% } %>
-                                            <span class="button increment no-fastclick"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                        <li id="document-margin-left">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textLeft %></div>
-                                    <div class="item-after splitter">
-                                        <% if (!android) { %><label></label><% } %>
-                                        <p class="buttons-row">
-                                            <span class="button decrement no-fastclick"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
-                                            <% if (android) { %><label></label><% } %>
-                                            <span class="button increment no-fastclick"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                        <li id="document-margin-right">
-                            <div class="item-content">
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textRight %></div>
-                                    <div class="item-after splitter">
-                                        <% if (!android) { %><label></label><% } %>
-                                        <p class="buttons-row">
-                                            <span class="button decrement no-fastclick"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
-                                            <% if (android) { %><label></label><% } %>
-                                            <span class="button increment no-fastclick"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
-                                        </p>
-                                    </div>
-                                </div>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<!-- Macros Settings view -->
-<div id="macros-settings-view">
-    <div class="navbar">
-        <div class="navbar-inner">
-            <div class="left sliding"><a href="#" class="back link"> <i class="icon icon-back"></i><% if (!android) { %><span><%= scope.textBack %></span><% } %></a></div>
-            <div class="center sliding"><%= scope.textMacrosSettings %></div>
-        </div>
-    </div>
-    <div class="pages">
-        <div class="page page-macros-settings" data-page="macros-settings-view">
-            <div class="page-content">
-                <div class="list-block">
-                    <ul>
-                        <li class="media-item">
-                            <label class="label-radio item-content">
-                                <input type="radio" name="macros-settings" value="2">
-                                <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textDisableAll %></div>
-                                    <div class="item-subtitle"><%= scope.textDisableAllMacrosWithoutNotification %></div>
-                                </div>
-                            </label>
-                        </li>
-                        <li class="media-item">
-                            <label class="label-radio item-content">
-                                <input type="radio" name="macros-settings" value="0">
-                                <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textShowNotification %></div>
-                                    <div class="item-subtitle"><%= scope.textDisableAllMacrosWithNotification %></div>
-                                </div>
-                            </label>
-                        </li>
-                        <li class="media-item">
-                            <label class="label-radio item-content">
-                                <input type="radio" name="macros-settings" value="1">
-                                <% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>
-                                <div class="item-inner">
-                                    <div class="item-title"><%= scope.textEnableAll %></div>
-                                    <div class="item-subtitle"><%= scope.textEnableAllMacrosWithoutNotification %></div>
-                                </div>
-                            </label>
-                        </li>
-                    </ul>
-                </div>
-
-            </div>
-        </div>
-    </div>
-</div>

apps/documenteditor/mobile/app/template/Toolbar.template

@@ -1,56 +0,0 @@
-<div class="navbar logo-navbar" id="editor-navbar">
-    <div id="navbar-logo" style="padding-top: 12px;display: flex;justify-content: center;"><i class="icon icon-logo"></i></div>
-    <div class="navbar-inner">
-        <div class="left">
-            <a id="document-back" href="#" class="link" style="min-width: 22px; display: none;">
-                <i class="icon icon-back"></i>
-                <% if (backTitle && !phone) { %>
-                <span class="subtitle"><%= backTitle %></span>
-                <% } %>
-            </a>
-            <% if (!android) { %>
-            <a href="#" id="toolbar-undo" class="link icon-only disabled" style="display: none;">
-                <i class="icon icon-undo"></i>
-            </a>
-            <a href="#" id="toolbar-redo" class="link icon-only disabled" style="display: none;">
-                <i class="icon icon-redo"></i>
-            </a>
-            <% } %>
-        </div>
-        <% if (!phone) { %>
-        <div class="center" id="toolbar-title"></div>
-        <% } %>
-        <div class="right">
-            <% if (android) { %>
-            <a href="#" id="toolbar-undo" class="link icon-only disabled" style="display: none;">
-                <i class="icon icon-undo"></i>
-            </a>
-            <a href="#" id="toolbar-redo" class="link icon-only disabled" style="display: none;">
-                <i class="icon icon-redo"></i>
-            </a>
-            <% } %>
-            <a href="#" id="toolbar-edit" class="link icon-only" style="display: none;">
-                <i class="icon icon-edit-settings"></i>
-            </a>
-            <a href="#" id="toolbar-add" class="link icon-only" style="display: none;">
-                <i class="icon icon-plus"></i>
-            </a>
-            <a href="#" id="toolbar-edit-document" class="link icon-only" style="display: none;">
-                <i class="icon icon-edit"></i>
-            </a>
-            <% if (!phone) { %>
-            <a href="#" id="toolbar-search" class="link icon-only">
-                <i class="icon icon-search"></i>
-            </a>
-            <% } %>
-            <% if (width >= 360) { %>
-            <a href="#" id="toolbar-collaboration" class="link icon-only disabled" style="display: none;">
-                <i class="icon icon-collaboration"></i>
-            </a>
-            <% } %>
-            <a href="#" id="toolbar-settings" class="link icon-only">
-                <i class="icon icon-settings"></i>
-            </a>
-        </div>
-    </div>
-</div>

apps/documenteditor/mobile/app/view/DocumentHolder.js

@@ -1,141 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  DocumentHolder.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 11/8/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'jquery',
-    'underscore',
-    'backbone',
-    'common/mobile/utils/utils'
-], function ($, _, Backbone) {
-    'use strict';
-
-    DE.Views.DocumentHolder = Backbone.View.extend((function() {
-        // private
-        var _anchorId = 'context-menu-target';
-
-        return {
-            el: '#editor_sdk',
-
-            template: _.template('<div id="' + _anchorId + '" style="position: absolute;"></div>'),
-            // Delegated events for creating new items, and clearing completed ones.
-            events: {
-            },
-
-            // Set innerHTML and get the references to the DOM elements
-            initialize: function() {
-                //
-            },
-
-            // Render layout
-            render: function() {
-                var el = $(this.el);
-
-                if (el.length > 0 && el.find('#' + _anchorId).length < 1) {
-                    el.append(this.template());
-                }
-
-                return this;
-            },
-
-            showMenu: function (items, posX, posY) {
-                if (items.itemsIcon.length < 1 && items.items.length < 1) {
-                    return;
-                }
-
-                var menuItemTemplate = _.template([
-                    '<% if(menuItems.itemsIcon) {%>',
-                    '<% _.each(menuItems.itemsIcon, function(item) { %>',
-                    '<li data-event="<%= item.event %>"><a href="#" class="item-link list-button"><i class="icon <%= item.icon %>"></i></a></li>',
-                    '<% }); }%>',
-                    '<% if(menuItems.items) {%>',
-                    '<% _.each(menuItems.items, function(item) { %>',
-                    '<li data-event="<%= item.event %>"><a href="#" class="item-link list-button"><%= item.caption %></a></li>',
-                    '<% }); }%>'
-                ].join(''));
-
-                $('#' + _anchorId)
-                    .css('left', posX)
-                    .css('top', Math.max(0, posY));
-
-                uiApp.closeModal('.document-menu.modal-in');
-
-                var popoverHTML =
-                    '<div class="popover document-menu">'+
-                        '<div class="popover-inner">'+
-                            '<div class="list-block">'+
-                                '<ul>'+
-                                    menuItemTemplate({menuItems: items}) +
-                                '</ul>'+
-                            '</div>'+
-                        '</div>'+
-                    '</div>';
-
-                var popover = uiApp.popover(popoverHTML, $('#' + _anchorId));
-
-                if (Common.SharedSettings.get('android')) {
-                    Common.Utils.androidMenuTop($(popover),  $('#' + _anchorId));
-                }
-
-                $('.modal-overlay').removeClass('modal-overlay-visible');
-
-                $('.document-menu li').single('click', _.buffered(function(e) {
-                    var $target = $(e.currentTarget),
-                        eventName = $target.data('event');
-
-                    this.fireEvent('contextmenu:click', [this, eventName]);
-                }, 100, this));
-            },
-
-            hideMenu: function () {
-                if ($('.document-menu').length > 0) {
-                    $('#' + _anchorId)
-                        .css('left', -1000)
-                        .css('top', -1000);
-
-                    uiApp.closeModal('.document-menu.modal-in');
-                } else if ($('.actions-modal').length > 0) {
-                    uiApp.closeModal('.actions-modal.modal-in');
-                }
-            }
-        }
-    })());
-});

apps/documenteditor/mobile/app/view/Editor.js

@@ -1,81 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  Editor.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 9/22/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-
-define([
-    'text!documenteditor/mobile/app/template/Editor.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (editorTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.Editor = Backbone.View.extend({
-        el: 'body',
-
-        // Compile our stats template
-        template: _.template(editorTemplate),
-
-        // Delegated events for creating new items, and clearing completed ones.
-        events: {
-        },
-
-        // Set innerHTML and get the references to the DOM elements
-        initialize: function() {
-            //
-        },
-
-        // Render layout
-        render: function() {
-            var el = $(this.el);
-            el.prepend(this.template({
-                backTitle: Framework7.prototype.device.android ? '' : ''
-            }));
-
-            this.f7View = uiApp.addView('.view-main', {
-                // params
-            });
-
-            return this;
-        }
-    });
-});

apps/documenteditor/mobile/app/view/Search.js

@@ -1,200 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  Search.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 11/15/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'text!documenteditor/mobile/app/template/Search.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (searchTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.Search = Backbone.View.extend(_.extend((function() {
-        // private
-        var _isEdit = false,
-            _layout;
-
-        return {
-            el: '.view-main',
-
-            // Compile our stats template
-            template: _.template(searchTemplate),
-
-            // Delegated events for creating new items, and clearing completed ones.
-            events: {},
-
-            // Set innerHTML and get the references to the DOM elements
-            initialize: function () {
-                this.on('searchbar:show', _.bind(this.initEvents, this));
-            },
-
-            initEvents: function() {
-                $('#search-settings').single('click', _.bind(this.showSettings, this));
-            },
-
-            // Render layout
-            render: function () {
-                _layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    isEdit  : _isEdit,
-                    scope   : this
-                }));
-
-                return this;
-            },
-
-            setMode: function (mode) {
-                _isEdit = mode.isEdit;
-                this.render();
-            },
-
-            showSettings: function (e) {
-                var me = this;
-
-                uiApp.closeModal();
-
-                if (Common.SharedSettings.get('phone')) {
-                    me.picker = $$(uiApp.popup([
-                        '<div class="popup settings">',
-                            '<div class="view search-settings-view navbar-through">',
-                                _layout.find('#search-settings-view').html(),
-                            '</div>',
-                        '</div>'].join('')
-                    ))
-                } else {
-                    me.picker = uiApp.popover([
-                        '<div class="popover settings" style="width: 280px; height: 300px;">',
-                            '<div class="popover-angle"></div>',
-                            '<div class="popover-inner">',
-                                '<div class="content-block">',
-                                    '<div class="view popover-view search-settings-view navbar-through" style="height: 300px;">',
-                                        _layout.find('#search-settings-view').html(),
-                                    '</div>',
-                                '</div>',
-                            '</div>',
-                        '</div>'].join(''),
-                        $$('#search-settings')
-                    );
-
-                    // Prevent hide overlay. Conflict popover and modals.
-                    var $overlay = $('.modal-overlay');
-
-                    $$(me.picker).on('opened', function () {
-                        $overlay.on('removeClass', function () {
-                            if (!$overlay.hasClass('modal-overlay-visible')) {
-                                $overlay.addClass('modal-overlay-visible')
-                            }
-                        });
-                    }).on('close', function () {
-                        $overlay.off('removeClass');
-                        $overlay.removeClass('modal-overlay-visible')
-                    });
-                }
-
-                if (Common.SharedSettings.get('android')) {
-                    $$('.view.search-settings-view.navbar-through').removeClass('navbar-through').addClass('navbar-fixed');
-                    $$('.view.search-settings-view .navbar').prependTo('.view.search-settings-view > .pages > .page');
-                }
-
-                me.fireEvent('searchbar:showsettings', me);
-            },
-
-            showSearch: function () {
-                var me = this,
-                    searchBar = $$('.searchbar.document');
-
-                if (searchBar.length < 1) {
-                    $(_layout.find('#search-panel-view').html()).insertAfter($(me.el).find('.pages'));
-                    if ($('.logo-navbar').length > 0) {
-                        $('.searchbar.document').css('margin-top', '27px');
-                    }
-                    //$(me.el).find('.pages .page').first().prepend(_layout.find('#search-panel-view').html());
-
-                    // Show replace mode if needed
-                    var isReplace = Common.SharedSettings.get('search-is-replace');
-                    $('.searchbar.document').toggleClass('replace', !_.isUndefined(isReplace) && (isReplace === true));
-
-                    me.fireEvent('searchbar:render', me);
-                    me.fireEvent('searchbar:show', me);
-
-                    searchBar = $$('.searchbar.document');
-
-                    if ($('.logo-navbar').length > 0) {
-                        var top = Common.SharedSettings.get('android') ? '80px' : '68px';
-                        $('.navbar-through .page > .searchbar').css('top', top);
-                    }
-
-                    uiApp.showNavbar(searchBar);
-                    if (!searchBar.hasClass('navbar-hidden')) {
-                        $('.searchbar.search input').focus();
-                    }
-                }
-            },
-
-            hideSearch: function () {
-                var me = this,
-                    searchBar = $$('.searchbar.document');
-
-                if (searchBar.length > 0) {
-                    // Animating
-                    if (searchBar.hasClass('.navbar-hidding')) {
-                        return;
-                    }
-
-                    me.fireEvent('searchbar:hide', me);
-                    searchBar.remove();
-                    uiApp.hideNavbar(searchBar);
-
-                }
-            },
-
-            textFind: 'Find',
-            textFindAndReplace: 'Find and Replace',
-            textDone: 'Done',
-            textSearch: 'Search',
-            textReplace: 'Replace',
-            textCase: 'Case sensitive',
-            textHighlight: 'Highlight results'
-        }
-    })(), DE.Views.Search || {}))
-});

apps/documenteditor/mobile/app/view/Settings.js

@@ -1,357 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  Settings.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/7/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'text!documenteditor/mobile/app/template/Settings.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (settingsTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.Settings = Backbone.View.extend(_.extend((function() {
-        // private
-        var _isEdit = false,
-            _canEdit = false,
-            _canDownload = false,
-            _canDownloadOrigin = false,
-            _canReader = false,
-            _canAbout = true,
-            _canHelp = true,
-            _canPrint = false,
-            _canReview = false,
-            _isReviewOnly = false,
-            _isShowMacros = true;
-
-        return {
-            // el: '.view-main',
-
-            template: _.template(settingsTemplate),
-
-            events: {
-                //
-            },
-
-            initialize: function() {
-                Common.NotificationCenter.on('settingscontainer:show', _.bind(this.initEvents, this));
-                Common.Gateway.on('opendocument', _.bind(this.loadDocument, this));
-                this.on('page:show', _.bind(this.updateItemHandlers, this));
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                Common.Utils.addScrollIfNeed('.view[data-page=settings-root-view] .pages', '.view[data-page=settings-root-view] .page');
-                me.updateItemHandlers();
-                me.initControls();
-            },
-
-            // Render layout
-            render: function() {
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    orthography: Common.SharedSettings.get('sailfish'),
-                    scope   : this,
-                    width   : $(window).width(),
-                    prodversion: '{{PRODUCT_VERSION}}',
-                    publishername: '{{PUBLISHER_NAME}}',
-                    publisheraddr: '{{PUBLISHER_ADDRESS}}',
-                    publisherurl: '{{PUBLISHER_URL}}',
-                    printed_url: ("{{PUBLISHER_URL}}").replace(/https?:\/{2}/, "").replace(/\/$/,""),
-                    supportemail: '{{SUPPORT_EMAIL}}',
-                    phonenum: '{{PUBLISHER_PHONE}}'
-                }));
-
-                return this;
-            },
-
-            setMode: function (mode) {
-                if (mode.isDisconnected) {
-                    _canEdit = _isEdit = false;
-                    _canReview = false;
-                    _isReviewOnly = false;
-                    if (!mode.enableDownload)
-                        _canPrint = _canDownload = _canDownloadOrigin = false;
-                } else {
-                    _isEdit = mode.isEdit;
-                    _canEdit = !mode.isEdit && mode.canEdit && mode.canRequestEditRights;
-                    _canReader = !mode.isEdit && !mode.isRestrictedEdit && mode.canReader;
-                    _canReview = mode.canReview;
-                    _isReviewOnly = mode.isReviewOnly;
-                    _canDownload = mode.canDownload;
-                    _canDownloadOrigin = mode.canDownloadOrigin;
-                    _canPrint = mode.canPrint;
-                    if (mode.customization && mode.canBrandingExt) {
-                        _canAbout = (mode.customization.about!==false);
-                    }
-
-                    if (mode.customization) {
-                        _canHelp = (mode.customization.help!==false);
-                        _isShowMacros = (mode.customization.macros!==false);
-                    }
-                }
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    var $layour = this.layout.find('#settings-root-view'),
-                        isPhone = Common.SharedSettings.get('phone');
-
-                    if (_isEdit) {
-                        $layour.find('#settings-search .item-title').text(this.textFindAndReplace)
-                    } else {
-                        $layour.find('#settings-document').hide();
-                        $layour.find('#color-schemes').hide();
-                        $layour.find('#settings-spellcheck').hide();
-                        $layour.find('#settings-orthography').hide();
-                    }
-                    if (!_canReader)
-                        $layour.find('#settings-readermode').hide();
-                    else {
-                        $layour.find('#settings-readermode input:checkbox')
-                            .prop('checked', Common.SharedSettings.get('readerMode'));
-                    }
-                    if (!_canDownload) $layour.find('#settings-download-as').hide();
-                    if (!_canDownloadOrigin) $layour.find('#settings-download').hide();
-                    if (!_canAbout) $layour.find('#settings-about').hide();
-                    if (!_canHelp) $layour.find('#settings-help').hide();
-                    if (!_canPrint) $layour.find('#settings-print').hide();
-                    if (!_canReview) $layour.find('#settings-review').hide();
-                    if (_isReviewOnly) $layour.find('#settings-review').addClass('disabled');
-                    if (!_isShowMacros) $layour.find('#settings-macros').hide();
-
-                    return $layour.html();
-                }
-
-                return '';
-            },
-
-            initControls: function() {
-                //
-            },
-
-            updateItemHandlers: function () {
-                var selectorsDynamicPage = [
-                    '.page[data-page=settings-root-view]',
-                    '.page[data-page=settings-document-view]',
-                    '.page[data-page=settings-advanced-view]'
-                ].map(function (selector) {
-                    return selector + ' a.item-link[data-page]';
-                }).join(', ');
-
-                $(selectorsDynamicPage).single('click', _.bind(this.onItemClick, this));
-            },
-
-            showPage: function(templateId, suspendEvent) {
-                var rootView = DE.getController('Settings').rootView();
-
-                if (rootView && this.layout) {
-                    var $content = this.layout.find(templateId);
-
-                    // Android fix for navigation
-                    if (Framework7.prototype.device.android) {
-                        $content.find('.page').append($content.find('.navbar'));
-                    }
-
-                    rootView.router.load({
-                        content: $content.html()
-                    });
-
-                    if (suspendEvent !== true) {
-                        this.fireEvent('page:show', [this, templateId]);
-                    }
-                }
-            },
-
-            onItemClick: function (e) {
-                var $target = $(e.currentTarget),
-                    page = $target.data('page');
-
-                if (page && page.length > 0 ) {
-                    this.showPage(page);
-                }
-            },
-
-            renderPageSizes: function(sizes, selectIndex) {
-                var $pageFormats = $('.page[data-page=settings-document-formats-view]'),
-                    $list = $pageFormats.find('ul'),
-                    items = [];
-
-                _.each(sizes, function (size, index) {
-                    items.push(_.template([
-                        '<li>',
-                            '<label class="label-radio item-content">',
-                                '<input type="radio" name="document-format" value="<%= item.value %>" <% if (index == selectIndex) { %>checked="checked"<% } %> >',
-                                '<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>',
-                                '<div class="item-inner">',
-                                    '<div class="item-title-row">',
-                                        '<div class="item-title"><%= item.caption %></div>',
-                                    '</div>',
-                                    '<div class="item-subtitle"><%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x <%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(item.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %></div>',
-                                '</div>',
-                            '</label>',
-                        '</li>'
-                    ].join(''))({
-                        android: Framework7.prototype.device.android,
-                        item: size,
-                        index: index,
-                        selectIndex: selectIndex
-                    }));
-                });
-
-                $list.html(items.join(''));
-            },
-
-            loadDocument: function(data) {
-                var permissions = {};
-
-                if (data.doc) {
-                    permissions = _.extend(permissions, data.doc.permissions);
-
-                    if (permissions.edit === false) {
-                    }
-                }
-            },
-
-            renderSchemaSettings: function(currentSchema, arrSchemas) {
-                if (arrSchemas) {
-                    var templateInsert = "";
-                    _.each(arrSchemas, function (schema, index) {
-                        var colors = schema.get_colors(),//schema.colors;
-                            name = schema.get_name();
-                        templateInsert += '<li class="color-schemes-menu"><label class="label-radio item-content"><input type="radio" name="color-schema" value="' + index + '"';
-                        if (index === currentSchema) {
-                            templateInsert += ' checked="checked"'
-                        }
-                        templateInsert += '>';
-                        if (Framework7.prototype.device.android) {
-                            templateInsert += '<div class="item-media"><i class="icon icon-form-radio"></i></div>';
-                        }
-                        templateInsert += '<div class="item-inner"><span class="color-schema-block">';
-                        for (var j = 2; j < 7; j++) {
-                            var clr = '#' + Common.Utils.ThemeColor.getHexColor(colors[j].get_r(), colors[j].get_g(), colors[j].get_b());
-                            templateInsert = templateInsert + "<span class='color' style='background: " + clr + ";'></span>"
-                        }
-                        templateInsert += '</span><span class="text">' + name + '</span></div></label></li>';
-                    }, this);
-                    $('#color-schemes-content ul').html(templateInsert);
-                }
-            },
-
-            textFindAndReplace: 'Find and Replace',
-            textSettings: 'Settings',
-            textDone: 'Done',
-            textFind: 'Find',
-            textEditDoc: 'Edit Document',
-            textReader: 'Reader Mode',
-            textDownload: 'Download',
-            textDocInfo: 'Document Info',
-            textHelp: 'Help',
-            textAbout: 'About',
-            textBack: 'Back',
-            textDocTitle: 'Document title',
-            textLoading: 'Loading...',
-            textAuthor: 'Author',
-            textCreateDate: 'Create date',
-            textStatistic: 'Statistic',
-            textPages: 'Pages',
-            textParagraphs: 'Paragraphs',
-            textWords: 'Words',
-            textSymbols: 'Symbols',
-            textSpaces: 'Spaces',
-            textDownloadAs: 'Download As...',
-            textVersion: 'Version',
-            textAddress: 'address',
-            textEmail: 'email',
-            textTel: 'tel',
-            textDocumentSettings: 'Document Settings',
-            textPortrait: 'Portrait',
-            textLandscape: 'Landscape',
-            textFormat: 'Format',
-            textCustom: 'Custom',
-            textCustomSize: 'Custom Size',
-            textDocumentFormats: 'Document Formats',
-            textOrientation: 'Orientation',
-            textPoweredBy: 'Powered by',
-            textSpellcheck: 'Spell Checking',
-            textPrint: 'Print',
-            textReview: 'Review',
-            textMargins: 'Margins',
-            textTop: 'Top',
-            textLeft: 'Left',
-            textBottom: 'Bottom',
-            textRight: 'Right',
-            textAdvancedSettings: 'Application Settings',
-            textUnitOfMeasurement: 'Unit of Measurement',
-            textCentimeter: 'Centimeter',
-            textPoint: 'Point',
-            textInch: 'Inch',
-            textColorSchemes: 'Color Schemes',
-            textNoCharacters: 'Nonprinting Characters',
-            textHiddenTableBorders: 'Hidden Table Borders',
-            textCollaboration: 'Collaboration',
-            textCommentingDisplay: 'Commenting Display',
-            textDisplayComments: 'Comments',
-            textDisplayResolvedComments: 'Resolved Comments',
-            textSubject: 'Subject',
-            textTitle: 'Title',
-            textComment: 'Comment',
-            textOwner: 'Owner',
-            textApplication : 'Application',
-            textLocation: 'Location',
-            textUploaded: 'Uploaded',
-            textLastModified: 'Last Modified',
-            textLastModifiedBy: 'Last Modified By',
-            textCreated: 'Created',
-            textMacrosSettings: 'Macros Settings',
-            textDisableAll: 'Disable All',
-            textDisableAllMacrosWithoutNotification: 'Disable all macros without notification',
-            textShowNotification: 'Show Notification',
-            textDisableAllMacrosWithNotification: 'Disable all macros with notification',
-            textEnableAll: 'Enable All',
-            textEnableAllMacrosWithoutNotification: 'Enable all macros without notification'
-
-
-    }
-    })(), DE.Views.Settings || {}))
-});

apps/documenteditor/mobile/app/view/Toolbar.js

@@ -1,167 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  Toolbar.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 9/23/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'text!documenteditor/mobile/app/template/Toolbar.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (toolbarTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.Toolbar = Backbone.View.extend(_.extend((function() {
-        // private
-
-        return {
-            el: '.view-main',
-
-            // Compile our stats template
-            template: _.template(toolbarTemplate),
-
-            // Delegated events for creating new items, and clearing completed ones.
-            events: {
-                "click #toolbar-search"     : "searchToggle",
-                "click #toolbar-edit"       : "showEdition",
-                "click #toolbar-add"        : "showInserts",
-                "click #toolbar-settings"   : "showSettings",
-                "click #toolbar-edit-document": "editDocument",
-                "click #toolbar-collaboration" : "showCollaboration"
-            },
-
-            // Set innerHTML and get the references to the DOM elements
-            initialize: function() {
-                var me = this;
-
-                Common.NotificationCenter.on('readermode:change', function (reader) {
-                    if (reader) {
-                        me.hideSearch();
-                        $('#toolbar-search').addClass('disabled');
-                    } else {
-                        $('#toolbar-search').removeClass('disabled');
-                    }
-                });
-            },
-
-            // Render layout
-            render: function() {
-                var me = this,
-                    $el = $(me.el);
-
-                $el.prepend(me.template({
-                    android     : Common.SharedSettings.get('android'),
-                    phone       : Common.SharedSettings.get('phone'),
-                    backTitle   : Common.SharedSettings.get('android') ? '' : me.textBack,
-                    scope       : me,
-                    width       : $(window).width()
-                }));
-
-                $('.view-main .navbar').on('addClass removeClass', _.bind(me.onDisplayMainNavbar, me));
-                $('#toolbar-edit, #toolbar-add, #toolbar-settings, #toolbar-search, #document-back, #toolbar-edit-document').addClass('disabled');
-
-                return me;
-            },
-
-            setMode: function (mode) {
-                if (mode.isEdit) {
-                    $('#toolbar-edit, #toolbar-add, #toolbar-undo, #toolbar-redo').show();
-                } else if (mode.canEdit && mode.canRequestEditRights){
-                    $('#toolbar-edit-document').show();
-                }
-            },
-
-            onDisplayMainNavbar: function (e) {
-                var $target = $(e.currentTarget),
-                    navbarHidden = $target.hasClass('navbar-hidden'),
-                    pickerHeight = $('.picker-modal').height() || 260;
-
-                $('#editor_sdk').css({
-                    top     : navbarHidden ? 0 : '',
-                    bottom  : navbarHidden ? pickerHeight : ''
-                });
-            },
-
-            // Search
-            searchToggle: function() {
-                if ($$('.searchbar.document').length > 0) {
-                    this.hideSearch();
-                } else {
-                    this.showSearch();
-                }
-            },
-
-            showSearch: function () {
-                DE.getController('Search').showSearch();
-            },
-
-            hideSearch: function () {
-                DE.getController('Search').hideSearch();
-            },
-
-            // Editor
-            showEdition: function () {
-                DE.getController('EditContainer').showModal();
-            },
-
-            // Inserts
-
-            showInserts: function () {
-                DE.getController('AddContainer').showModal();
-            },
-
-            // Settings
-            showSettings: function () {
-                DE.getController('Settings').showModal();
-            },
-
-            //Collaboration
-            showCollaboration: function () {
-                DE.getController('Common.Controllers.Collaboration').showModal();
-            },
-
-            editDocument: function () {
-                Common.Gateway.requestEditRights();
-            },
-
-            textBack: 'Back'
-        }
-    })(), DE.Views.Toolbar || {}))
-});

apps/documenteditor/mobile/app/view/add/AddImage.js

@@ -1,132 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  AddImage.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/18/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-
-define([
-    'text!documenteditor/mobile/app/template/AddImage.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (addTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.AddImage = Backbone.View.extend(_.extend((function() {
-        // private
-
-        return {
-            // el: '.view-main',
-
-            template: _.template(addTemplate),
-
-            events: {
-            },
-
-            initialize: function () {
-                Common.NotificationCenter.on('addcontainer:show', _.bind(this.initEvents, this));
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                $('#add-image-url').single('click', _.bind(me.showImageUrl, me));
-
-                me.initControls();
-            },
-
-            // Render layout
-            render: function () {
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    scope   : this
-                }));
-
-                return this;
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    return this.layout
-                        .find('#addimage-root-view')
-                        .html();
-                }
-
-                return '';
-            },
-
-            initControls: function () {
-                //
-            },
-
-            showPage: function (templateId) {
-                var rootView = DE.getController('AddContainer').rootView;
-
-                if (rootView && this.layout) {
-                    var $content = this.layout.find(templateId);
-
-                    // Android fix for navigation
-                    if (Framework7.prototype.device.android) {
-                        $content.find('.page').append($content.find('.navbar'));
-                    }
-
-                    rootView.router.load({
-                        content: $content.html()
-                    });
-
-                    this.fireEvent('page:show', this);
-                }
-            },
-
-            showImageUrl: function () {
-                this.showPage('#addimage-url-view');
-            },
-
-            textFromLibrary: 'Picture from Library',
-            textFromURL: 'Picture from URL',
-            textBack: 'Back', 
-            textLinkSettings: 'Link Settings',
-            textAddress: 'Address',
-            textImageURL: 'Image URL',
-            textInsertImage: 'Insert Image'
-        }
-    })(), DE.Views.AddImage || {}))
-});

apps/documenteditor/mobile/app/view/add/AddOther.js

@@ -1,301 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  AddOther.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/17/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'text!documenteditor/mobile/app/template/AddOther.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (addTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.AddOther = Backbone.View.extend(_.extend((function() {
-        // private
-
-        return {
-            // el: '.view-main',
-
-            template: _.template(addTemplate),
-
-            events: {
-            },
-
-            initialize: function () {
-                Common.NotificationCenter.on('addcontainer:show', _.bind(this.initEvents, this));
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                $('#add-other-link').single('click',        _.bind(me.showLink, me));
-                $('#add-other-pagenumber').single('click',  _.bind(me.showPagePosition, me));
-                if (this.isDisableComment) {
-                    $('#item-comment').addClass('disabled');
-                } else {
-                    $('#item-comment').removeClass('disabled');
-                    $('#add-other-comment').single('click',     _.bind(me.showPageComment, me));
-                }
-                if (this.isDisableBreak) {
-                    $('#item-break').addClass('disabled');
-                } else {
-                    $('#item-break').removeClass('disabled');
-                    $('#add-other-break').single('click',       _.bind(me.showPageBreak, me));
-                }
-                if (this.isDisableFootnote) {
-                    $('#item-footnote').addClass('disabled');
-                } else {
-                    $('#item-footnote').removeClass('disabled');
-                    $('#add-other-footnote').single('click',    _.bind(me.showPageFootnote, me));
-                }
-
-                me.initControls();
-            },
-
-            // Render layout
-            render: function () {
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    scope   : this
-                }));
-
-                return this;
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    if (!this.canViewComments) {
-                        this.layout.find('#addother-root-view #item-comment').remove();
-                    }
-                    return this.layout
-                        .find('#addother-root-view')
-                        .html();
-                }
-
-                return '';
-            },
-
-            initControls: function () {
-                //
-            },
-
-            showPage: function (templateId, animate) {
-                var rootView = DE.getController('AddContainer').rootView;
-
-                if (rootView && this.layout) {
-                    var $content = this.layout.find(templateId);
-
-                    // Android fix for navigation
-                    if (Framework7.prototype.device.android) {
-                        $content.find('.page').append($content.find('.navbar'));
-                    }
-
-                    rootView.router.load({
-                        content: $content.html(),
-                        animatePages: animate !== false
-                    });
-
-                    this.fireEvent('page:show', [this, templateId]);
-                }
-            },
-
-            showPageBreak: function() {
-                this.showPage('#addother-insert-break');
-                $('#add-other-section').single('click',     _.bind(this.showSectionBreak, this));
-            },
-
-            showSectionBreak: function () {
-                this.showPage('#addother-sectionbreak');
-            },
-
-            showLink: function (animate) {
-                this.showPage('#addother-link', animate);
-
-                $('.page[data-page=addother-link] input[type=url]').single('input', _.bind(function(e) {
-                    $('#add-link-insert').toggleClass('disabled', _.isEmpty($('#add-link-url input').val()));
-                }, this));
-
-                _.delay(function () {
-                    $('.page[data-page=addother-link] input[type=url]').focus();
-                }, 1000);
-            },
-
-            showPagePosition: function () {
-                this.showPage('#addother-pagenumber');
-            },
-
-            showPageFootnote: function () {
-                this.showPage('#addother-insert-footnote');
-            },
-
-            showPageComment: function(animate) {
-                this.showPage('#addother-insert-comment', animate);
-            },
-
-            renderComment: function(comment) {
-                var me = this;
-                _.delay(function () {
-                    var $commentInfo = $('#comment-info');
-                    var template = [
-                        '<% if (android) { %><div class="header-comment"><div class="initials-comment" style="background-color: <% if (comment.usercolor!==null) { %><%=comment.usercolor%><% } else { %> #cfcfcf <% } %>;"><%= comment.userInitials %></div><div><% } %>',
-                        '<div class="user-name"><%= scope.getUserName(comment.username) %></div>',
-                        '<div class="comment-date"><%= comment.date %></div>',
-                        '<% if (android) { %></div></div><% } %>',
-                        '<div class="wrap-textarea"><textarea id="comment-text" class="comment-textarea" placeholder="<%= textAddComment %>" autofocus></textarea></div>'
-                    ].join('');
-                    var insert = _.template(template)({
-                        android: Framework7.prototype.device.android,
-                        comment: comment,
-                        textAddComment: me.textAddComment,
-                        scope: me
-                    });
-                    $commentInfo.html(insert);
-                    _.defer(function () {
-                        var $textarea = $('.comment-textarea')[0];
-                        var $btnAddComment = $('#done-comment');
-                        $btnAddComment.addClass('disabled');
-                        $textarea.focus();
-                        $textarea.oninput = function () {
-                            if ($textarea.value.length < 1) {
-                                if (!$btnAddComment.hasClass('disabled'))
-                                    $btnAddComment.addClass('disabled');
-                            } else {
-                                if ($btnAddComment.hasClass('disabled')) {
-                                    $btnAddComment.removeClass('disabled');
-                                }
-                            }
-                        };
-                    });
-                }, 100);
-            },
-
-            getUserName: function (username) {
-                return Common.Utils.String.htmlEncode(AscCommon.UserInfoParser.getParsedName(username));
-            },
-
-            renderNumFormat: function (dataFormat, selectFormat) {
-                var $listFormat = $('#list-format-footnote ul'),
-                    items = [];
-
-                _.each(dataFormat, function (formatItem) {
-                    var itemTemplate = [
-                        '<li>',
-                        '<label class="label-radio item-content">',
-                        '<input type="radio" name="doc-footnote-format" data-value="<%= item.value %>" <% if (item.value == select) { %>checked="checked"<% } %> >',
-                        '<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>',
-                        '<div class="item-inner">',
-                        '<div class="item-title"><%= item.text %></div>',
-                        '</div>',
-                        '</label>',
-                        '</li>'
-                    ].join('');
-                    items.push(_.template(itemTemplate)({
-                        android: Framework7.prototype.device.android,
-                        item: formatItem,
-                        select: selectFormat
-                    }));
-                });
-
-                $listFormat.html(items);
-            },
-
-            renderFootnotePos: function (dataPosition, selectPosition) {
-                var $listPos = $('#position-footnote ul'),
-                    items = [];
-
-                _.each(dataPosition, function (posItem) {
-                    var itemTemplate = [
-                        '<li>',
-                        '<label class="label-radio item-content">',
-                        '<input type="radio" name="doc-footnote-pos" data-value="<%= item.value%>" <% if (item.value == select) { %>checked="checked"<% } %> >',
-                        '<% if (android) { %><div class="item-media"><i class="icon icon-form-radio"></i></div><% } %>',
-                        '<div class="item-inner">',
-                        '<div class="item-title"><%= item.displayValue %></div>',
-                        '</div>',
-                        '</label>',
-                        '</li>'
-                    ].join('');
-                    items.push(_.template(itemTemplate)({
-                        android: Framework7.prototype.device.android,
-                        item: posItem,
-                        select: selectPosition
-                    }));
-                });
-
-                $listPos.html(items);
-            },
-
-            textPageBreak: 'Page Break',
-            textSectionBreak: 'Section Break',
-            textColumnBreak: 'Column Break',
-            textLink: 'Link',
-            textPageNumber: 'Page Number',
-            textBack: 'Back',
-            textAddLink: 'Add Link',
-            textDisplay: 'Display',
-            textTip: 'Screen Tip',
-            textInsert: 'Insert',
-            textPosition: 'Position',
-            textLeftTop: 'Left Top',
-            textCenterTop: 'Center Top',
-            textRightTop: 'Right Top',
-            textLeftBottom: 'Left Bottom',
-            textCenterBottom: 'Center Bottom',
-            textRightBottom: 'Right Bottom',
-            textCurrentPos: 'Current Position',
-            textNextPage: 'Next Page',
-            textContPage: 'Continuous Page',
-            textEvenPage: 'Even Page',
-            textOddPage: 'Odd Page',
-            textFootnote: 'Footnote',
-            textInsertFootnote: 'Insert Footnote',
-            textFormat: 'Format',
-            textStartFrom: 'Start At',
-            textLocation: 'Location',
-            textComment: 'Comment',
-            textAddComment: 'Add Comment',
-            textDone: 'Done',
-            textBreak: 'Break'
-        
-        }
-    })(), DE.Views.AddOther || {}))
-});

apps/documenteditor/mobile/app/view/add/AddShape.js

@@ -1,98 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  AddShape.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/18/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-
-define([
-    'text!documenteditor/mobile/app/template/AddShape.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (addTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.AddShape = Backbone.View.extend(_.extend((function() {
-        // private
-
-        return {
-            // el: '.view-main',
-
-            template: _.template(addTemplate),
-
-            events: {
-            },
-
-            initialize: function () {
-                Common.NotificationCenter.on('addcontainer:show',   _.bind(this.initEvents, this));
-                Common.NotificationCenter.on('shapes:load',         _.bind(this.render, this));
-            },
-
-            initEvents: function () {
-                this.initControls();
-            },
-
-            // Render layout
-            render: function () {
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    shapes  : Common.SharedSettings.get('shapes')
-                }));
-
-                return this;
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    return this.layout
-                        .find('#add-shapes-root')
-                        .html();
-                }
-
-                return '';
-            },
-
-            initControls: function () {
-                //
-            }
-        }
-    })(), DE.Views.AddShape || {}))
-});

apps/documenteditor/mobile/app/view/add/AddTable.js

@@ -1,105 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  AddTable.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/17/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'text!documenteditor/mobile/app/template/AddTable.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (addTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.AddTable = Backbone.View.extend(_.extend((function() {
-        // private
-
-        return {
-            // el: '.view-main',
-
-            template: _.template(addTemplate),
-
-            events: {
-            },
-
-            initialize: function () {
-                Common.NotificationCenter.on('addcontainer:show', _.bind(this.initEvents, this));
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                me.initControls();
-            },
-
-            // Render layout
-            render: function () {
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    styles  : DE.getController('AddTable').getStyles()
-                }));
-
-                var $tableStyles = $('.container-add .table-styles');
-                if ($tableStyles) {
-                    $tableStyles.replaceWith(this.layout.find('#add-table-root').html());
-                }
-
-                this.fireEvent('view:render', this);
-
-                return this;
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    return this.layout
-                        .find('#add-table-root')
-                        .html();
-                }
-
-                return '';
-            },
-
-            initControls: function () {
-                //
-            }
-        }
-    })(), DE.Views.AddTable || {}))
-});

apps/documenteditor/mobile/app/view/edit/EditChart.js

@@ -1,352 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditChart.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 11/7/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-
-define([
-    'text!documenteditor/mobile/app/template/EditChart.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (editTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.EditChart = Backbone.View.extend(_.extend((function() {
-        // private
-        var _styles = [];
-
-        var _types = [
-            { type: Asc.c_oAscChartTypeSettings.barNormal,               thumb: 'chart-03.png'},
-            { type: Asc.c_oAscChartTypeSettings.barStacked,              thumb: 'chart-02.png'},
-            { type: Asc.c_oAscChartTypeSettings.barStackedPer,           thumb: 'chart-01.png'},
-            { type: Asc.c_oAscChartTypeSettings.lineNormal,              thumb: 'chart-06.png'},
-            { type: Asc.c_oAscChartTypeSettings.lineStacked,             thumb: 'chart-05.png'},
-            { type: Asc.c_oAscChartTypeSettings.lineStackedPer,          thumb: 'chart-04.png'},
-            { type: Asc.c_oAscChartTypeSettings.hBarNormal,              thumb: 'chart-09.png'},
-            { type: Asc.c_oAscChartTypeSettings.hBarStacked,             thumb: 'chart-08.png'},
-            { type: Asc.c_oAscChartTypeSettings.hBarStackedPer,          thumb: 'chart-07.png'},
-            { type: Asc.c_oAscChartTypeSettings.areaNormal,              thumb: 'chart-12.png'},
-            { type: Asc.c_oAscChartTypeSettings.areaStacked,             thumb: 'chart-11.png'},
-            { type: Asc.c_oAscChartTypeSettings.areaStackedPer,          thumb: 'chart-10.png'},
-            { type: Asc.c_oAscChartTypeSettings.pie,                     thumb: 'chart-13.png'},
-            { type: Asc.c_oAscChartTypeSettings.doughnut,                thumb: 'chart-14.png'},
-            { type: Asc.c_oAscChartTypeSettings.pie3d,                   thumb: 'chart-22.png'},
-            { type: Asc.c_oAscChartTypeSettings.scatter,                 thumb: 'chart-15.png'},
-            { type: Asc.c_oAscChartTypeSettings.stock,                   thumb: 'chart-16.png'},
-            { type: Asc.c_oAscChartTypeSettings.line3d,                  thumb: 'chart-21.png'},
-            { type: Asc.c_oAscChartTypeSettings.barNormal3d,             thumb: 'chart-17.png'},
-            { type: Asc.c_oAscChartTypeSettings.barStacked3d,            thumb: 'chart-18.png'},
-            { type: Asc.c_oAscChartTypeSettings.barStackedPer3d,         thumb: 'chart-19.png'},
-            { type: Asc.c_oAscChartTypeSettings.hBarNormal3d,            thumb: 'chart-25.png'},
-            { type: Asc.c_oAscChartTypeSettings.hBarStacked3d,           thumb: 'chart-24.png'},
-            { type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d,        thumb: 'chart-23.png'},
-            { type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective,  thumb: 'chart-20.png'}
-        ];
-
-        return {
-            // el: '.view-main',
-
-            template: _.template(editTemplate),
-
-            events: {
-            },
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-                Common.NotificationCenter.on('editcategory:show',  _.bind(this.categoryShow, this));
-                Common.NotificationCenter.on('chartstyles:load',   _.bind(this.onStylesLoad, this));
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                $('#chart-style').single('click',                   _.bind(me.showStyle, me));
-                $('#chart-wrap').single('click',                    _.bind(me.showWrap, me));
-                $('#chart-reorder').single('click',                 _.bind(me.showReorder, me));
-                $('#edit-chart-bordercolor').single('click',        _.bind(me.showBorderColor, me));
-
-                $('.edit-chart-style .categories a').single('click', _.bind(me.showStyleCategory, me));
-
-                Common.Utils.addScrollIfNeed('#edit-chart .pages', '#edit-chart .page');
-                me.initControls();
-                me.renderStyles();
-            },
-
-            categoryShow: function(e) {
-                //
-            },
-
-            onStylesLoad: function () {
-                _styles = Common.SharedSettings.get('chartstyles');
-                this.renderStyles();
-            },
-
-            // Render layout
-            render: function () {
-                var elementsInRow = 3;
-                var groupsOfTypes = _.chain(_types).groupBy(function(element, index){
-                    return Math.floor(index/elementsInRow);
-                }).toArray().value();
-
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    types   : groupsOfTypes,
-                    scope   : this
-                }));
-
-                return this;
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    return this.layout
-                        .find('#edit-chart-root')
-                        .html();
-                }
-
-                return '';
-            },
-
-            initControls: function () {
-                //
-            },
-
-            showPage: function (templateId, suspendEvent) {
-                var rootView = DE.getController('EditContainer').rootView;
-
-                if (rootView && this.layout) {
-                    var $content = this.layout.find(templateId);
-
-                    // Android fix for navigation
-                    if (Framework7.prototype.device.android) {
-                        $content.find('.page').append($content.find('.navbar'));
-                    }
-
-                    rootView.router.load({
-                        content: $content.html()
-                    });
-
-                    if (suspendEvent !== true) {
-                        this.fireEvent('page:show', [this, templateId]);
-                    }
-
-                    this.initEvents();
-                }
-            },
-
-            showStyleCategory: function (e) {
-                // remove android specific style
-                $('.page[data-page=edit-chart-style] .list-block.inputs-list').removeClass('inputs-list');
-            },
-
-            renderStyles: function() {
-                var $styleContainer = $('#tab-chart-style');
-
-                if ($styleContainer.length > 0) {
-                    var columns = parseInt($styleContainer.width() / 70), // magic
-                        row = -1,
-                        styles = [];
-
-                    _.each(_styles, function (style, index) {
-                        if (0 == index % columns) {
-                            styles.push([]);
-                            row++
-                        }
-                        styles[row].push(style);
-                    });
-
-                    var template = _.template([
-                        '<% _.each(styles, function(row) { %>',
-                        '<ul class="row">',
-                            '<% _.each(row, function(style) { %>',
-                            '<li data-type="<%= style.asc_getName() %>">',
-                                '<img src="<%= style.asc_getImage() %>" width="50px" height="50px">',
-                            '</li>',
-                            '<% }); %>',
-                        '</ul>',
-                        '<% }); %>'
-                    ].join(''))({
-                        styles: styles
-                    });
-
-                    $styleContainer.html(template);
-                }
-            },
-
-            showStyle: function () {
-                var me = this;
-                var selector = '#edit-chart-style';
-                this.showPage(selector, true);
-
-                this.paletteFillColor = new Common.UI.ThemeColorPalette({
-                    el: $('#tab-chart-fill'),
-                    transparent: true
-                });
-                this.paletteFillColor.on('customcolor', function () {
-                    me.showCustomFillColor();
-                });
-                var template = _.template(['<div class="list-block">',
-                    '<ul>',
-                    '<li>',
-                    '<a id="edit-chart-add-custom-color" class="item-link">',
-                    '<div class="item-content">',
-                    '<div class="item-inner">',
-                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
-                    '</div>',
-                    '</div>',
-                    '</a>',
-                    '</li>',
-                    '</ul>',
-                    '</div>'].join(''));
-                $('#tab-chart-fill').append(template({scope: this}));
-                $('#edit-chart-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
-
-                
-                this.fireEvent('page:show', [this, selector]);
-            },
-
-            showWrap: function () {
-                this.showPage('#edit-chart-wrap');
-                Common.Utils.addScrollIfNeed('.page.chart-wrap', '.page.chart-wrap .page-content');
-            },
-
-            showReorder: function () {
-                this.showPage('#edit-chart-reorder');
-                Common.Utils.addScrollIfNeed('.page.chart-reorder', '.page.chart-reorder .page-content');
-            },
-
-            showBorderColor: function () {
-                var me = this;
-                var selector = '#edit-chart-border-color-view';
-                this.showPage(selector, true);
-
-                this.paletteBorderColor = new Common.UI.ThemeColorPalette({
-                    el: $('.page[data-page=edit-chart-border-color] .page-content')
-                });
-                this.paletteBorderColor.on('customcolor', function () {
-                    me.showCustomBorderColor();
-                });
-                var template = _.template(['<div class="list-block">',
-                    '<ul>',
-                    '<li>',
-                    '<a id="edit-chart-add-custom-border-color" class="item-link">',
-                    '<div class="item-content">',
-                    '<div class="item-inner">',
-                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
-                    '</div>',
-                    '</div>',
-                    '</a>',
-                    '</li>',
-                    '</ul>',
-                    '</div>'].join(''));
-                $('.page[data-page=edit-chart-border-color] .page-content').append(template({scope: this}));
-                $('#edit-chart-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
-
-                this.fireEvent('page:show', [this, selector]);
-            },
-
-            showCustomFillColor: function() {
-                var me = this,
-                    selector = '#edit-chart-custom-color-view';
-                me.showPage(selector, true);
-
-                me.customColorPicker = new Common.UI.HsbColorPicker({
-                    el: $('.page[data-page=edit-chart-custom-color] .page-content'),
-                    color: me.paletteFillColor.currentColor
-                });
-                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
-                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
-                    DE.getController('EditContainer').rootView.router.back();
-                });
-
-                me.fireEvent('page:show', [me, selector]);
-            },
-
-            showCustomBorderColor: function() {
-                var me = this,
-                    selector = '#edit-chart-custom-color-view';
-                me.showPage(selector, true);
-
-                me.customBorderColorPicker = new Common.UI.HsbColorPicker({
-                    el: $('.page[data-page=edit-chart-custom-color] .page-content'),
-                    color: me.paletteBorderColor.currentColor
-                });
-                me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
-                    me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
-                    me.paletteFillColor.updateDynamicColors();
-                    me.paletteFillColor.select(me.paletteFillColor.currentColor);
-                    DE.getController('EditContainer').rootView.router.back();
-                });
-
-                me.fireEvent('page:show', [me, selector]);
-            },
-
-            textStyle: 'Style',
-            textWrap: 'Wrap',
-            textReorder: 'Reorder',
-            textRemoveChart: 'Remove Chart',
-            textBack: 'Back',
-            textToForeground: 'Bring to Foreground',
-            textToBackground: 'Send to Background',
-            textForward: 'Move Forward',
-            textBackward: 'Move Backward',
-            textInline: 'Inline',
-            textSquare: 'Square',
-            textTight: 'Tight',
-            textThrough: 'Through',
-            textTopBottom: 'Top and Bottom',
-            textInFront: 'In Front',
-            textBehind: 'Behind',
-            textAlign: 'Align',
-            textMoveText: 'Move with Text',
-            textOverlap: 'Allow Overlap',
-            textDistanceText: 'Distance from Text',
-            textType: 'Type',
-            textFill: 'Fill',
-            textBorder: 'Border',
-            textSize: 'Size',
-            textColor: 'Color',
-            textAddCustomColor: 'Add Custom Color',
-            textCustomColor: 'Custom Color'
-        }
-    })(), DE.Views.EditChart || {}))
-});

apps/documenteditor/mobile/app/view/edit/EditHeader.js

@@ -1,121 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditHeader.js
- *  Document Editor
- *
- *  Created by Julia Radzhabova on 2/15/19
- *  Copyright (c) 2019 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'text!documenteditor/mobile/app/template/EditHeader.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (editTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.EditHeader = Backbone.View.extend(_.extend((function() {
-        // private
-
-        return {
-            template: _.template(editTemplate),
-
-            events: {
-            },
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                DE.getController('EditHeader').initSettings();
-                Common.Utils.addScrollIfNeed('#edit-header .pages', '#edit-header .page');
-            },
-
-            // Render layout
-            render: function () {
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    scope   : this
-                }));
-
-                return this;
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    return this.layout
-                        .find('#edit-header-root')
-                        .html();
-                }
-
-                return '';
-            },
-
-            showPage: function (templateId, customFireEvent) {
-                var rootView = DE.getController('EditContainer').rootView;
-
-                if (rootView && this.layout) {
-                    var $content = this.layout.find(templateId);
-
-                    // Android fix for navigation
-                    if (Framework7.prototype.device.android) {
-                        $content.find('.page').append($content.find('.navbar'));
-                    }
-
-                    rootView.router.load({
-                        content: $content.html()
-                    });
-
-                    if (customFireEvent !== true) {
-                        this.fireEvent('page:show', [this, templateId]);
-                    }
-                }
-            },
-
-            textDiffFirst: 'Different first page',
-            textDiffOdd: 'Different odd and even pages',
-            textSameAs: 'Link to Previous',
-            textPageNumbering: 'Page Numbering',
-            textPrev: 'Continue from previous section',
-            textFrom: 'Start at'
-        }
-    })(), DE.Views.EditHeader || {}))
-});

apps/documenteditor/mobile/app/view/edit/EditHyperlink.js

@@ -1,107 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditHyperlink.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 11/7/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-
-define([
-    'text!documenteditor/mobile/app/template/EditHyperlink.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (editTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.EditHyperlink = Backbone.View.extend(_.extend((function() {
-        // private
-
-        return {
-            // el: '.view-main',
-
-            template: _.template(editTemplate),
-
-            events: {
-            },
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-                Common.NotificationCenter.on('editcategory:show',  _.bind(this.categoryShow, this));
-            },
-
-            initEvents: function () {
-                $('#edit-link-url input[type=url]').single('input', _.bind(function(e) {
-                    $('#edit-link-edit').toggleClass('disabled', _.isEmpty($(e.currentTarget).val()));
-                }, this));
-                Common.Utils.addScrollIfNeed('#edit-link .pages', '#edit-link .page');
-            },
-
-            categoryShow: function(e) {
-                //
-            },
-
-            // Render layout
-            render: function () {
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    scope   : this
-                }));
-
-                return this;
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    return this.layout
-                        .find('#edit-link-root')
-                        .html();
-                }
-
-                return '';
-            },
-
-            textLink: 'Link',
-            textDisplay: 'Display',
-            textTip: 'Screen Tip',
-            textEdit: 'Save Link',
-            textRemove: 'Remove Link'
-        }
-    })(), DE.Views.EditHyperlink || {}))
-});

apps/documenteditor/mobile/app/view/edit/EditImage.js

@@ -1,188 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditImage.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 11/3/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'text!documenteditor/mobile/app/template/EditImage.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (editTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.EditImage = Backbone.View.extend(_.extend((function() {
-        // private
-
-        return {
-            // el: '.view-main',
-
-            template: _.template(editTemplate),
-
-            events: {
-            },
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-                Common.NotificationCenter.on('editcategory:show',  _.bind(this.categoryShow, this));
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                $('#image-wrap').single('click',                    _.bind(me.showWrap, me));
-                $('#image-replace').single('click',                 _.bind(me.showReplace, me));
-                $('#image-reorder').single('click',                 _.bind(me.showReorder, me));
-                $('#edit-image-url').single('click',                _.bind(me.showEditUrl, me));
-
-                Common.Utils.addScrollIfNeed('#edit-image .pages', '#edit-image .page');
-                me.initControls();
-            },
-
-            categoryShow: function(e) {
-                //
-            },
-
-            // Render layout
-            render: function () {
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    scope   : this
-                }));
-
-                return this;
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    return this.layout
-                        .find('#edit-image-root')
-                        .html();
-                }
-
-                return '';
-            },
-
-            initControls: function () {
-                //
-            },
-
-            showPage: function (templateId, suspendEvent) {
-                var rootView = DE.getController('EditContainer').rootView;
-
-                if (rootView && this.layout) {
-                    var $content = this.layout.find(templateId);
-
-                    // Android fix for navigation
-                    if (Framework7.prototype.device.android) {
-                        $content.find('.page').append($content.find('.navbar'));
-                    }
-
-                    rootView.router.load({
-                        content: $content.html()
-                    });
-
-                    if (suspendEvent !== true) {
-                        this.fireEvent('page:show', [this, templateId]);
-                    }
-
-                    this.initEvents();
-                }
-            },
-
-            showWrap: function () {
-                this.showPage('#edit-image-wrap-view');
-                $('.image-wrap .list-block.inputs-list').removeClass('inputs-list');
-                Common.Utils.addScrollIfNeed('.page.image-wrap', '.page.image-wrap .page-content');
-            },
-
-            showReplace: function () {
-                this.showPage('#edit-image-replace-view');
-            },
-
-            showReorder: function () {
-                this.showPage('#edit-image-reorder-view');
-                Common.Utils.addScrollIfNeed('.page.image-reorder', '.page.image-reorder .page-content');
-            },
-
-            showEditUrl: function () {
-                this.showPage('#edit-image-url-view');
-
-                $('.edit-image-url-link input[type="url"]').single('input', _.bind(function(e) {
-                    $('.edit-image-url-link .buttons').toggleClass('disabled', _.isEmpty($(e.currentTarget).val()));
-                }, this));
-
-                _.delay(function () {
-                    $('.edit-image-url-link input[type="url"]').focus();
-                }, 1000);
-                Common.Utils.addScrollIfNeed('.page.edit-image-url-link', '.page.edit-image-url-link .page-content');
-            },
-
-            textWrap: 'Wrap',
-            textReplace: 'Replace',
-            textReorder: 'Reorder',
-            textDefault: 'Actual Size',
-            textRemove: 'Remove Image',
-            textBack: 'Back',
-            textToForeground: 'Bring to Foreground',
-            textToBackground: 'Send to Background',
-            textForward: 'Move Forward',
-            textBackward: 'Move Backward',
-            textInline: 'Inline',
-            textSquare: 'Square',
-            textTight: 'Tight',
-            textThrough: 'Through',
-            textTopBottom: 'Top and Bottom',
-            textInFront: 'In Front',
-            textBehind: 'Behind',
-            textAlign: 'Align',
-            textMoveText: 'Move with Text',
-            textOverlap: 'Allow Overlap',
-            textDistanceText: 'Distance from Text', 
-            textFromLibrary: 'Picture from Library',
-            textFromURL: 'Picture from URL',
-            textLinkSettings: 'Link Settings',
-            textAddress: 'Address',
-            textImageURL: 'Image URL',
-            textReplaceImg: 'Replace Image'
-        }
-    })(), DE.Views.EditImage || {}))
-});

apps/documenteditor/mobile/app/view/edit/EditParagraph.js

@@ -1,218 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditParagraph.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/14/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'text!documenteditor/mobile/app/template/EditParagraph.template',
-    'jquery',
-    'underscore',
-    'backbone'
-], function (editTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.EditParagraph = Backbone.View.extend(_.extend((function() {
-        // private
-        // var _paragraphStyles;
-
-        return {
-            // el: '.view-main',
-
-            template: _.template(editTemplate),
-
-            events: {
-                // "click #font-fonts" : "showPage",
-                // "click #font-color" : "showPage"
-            },
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                $('#paragraph-background').single('click',  _.bind(me.showColors, me));
-                $('#paragraph-advanced').single('click',    _.bind(me.showAdvanced, me));
-
-                me.renderStyles();
-
-                DE.getController('EditParagraph').initSettings();
-                Common.Utils.addScrollIfNeed('#edit-paragraph .pages', '#edit-paragraph .page');
-            },
-
-            // Render layout
-            render: function () {
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    scope   : this
-                }));
-
-                return this;
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    return this.layout
-                        .find('#edit-paragraph-root')
-                        .html();
-                }
-
-                return '';
-            },
-
-            showPage: function (templateId, customFireEvent) {
-                var rootView = DE.getController('EditContainer').rootView;
-
-                if (rootView && this.layout) {
-                    var $content = this.layout.find(templateId);
-
-                    // Android fix for navigation
-                    if (Framework7.prototype.device.android) {
-                        $content.find('.page').append($content.find('.navbar'));
-                    }
-
-                    rootView.router.load({
-                        content: $content.html()
-                    });
-
-                    if (customFireEvent !== true) {
-                        this.fireEvent('page:show', [this, templateId]);
-                    }
-                }
-            },
-
-            renderStyles: function () {
-                var me = this,
-                    thumbSize = DE.getController('EditParagraph').getThumbSize(),
-                    $styleList = $('#paragraph-list ul'),
-                    template = _.template(
-                        '<li>' +
-                            '<label class="label-radio item-content">' +
-                                '<input type="radio" name="paragraph-style" value="<%= name %>">' +
-                                (Framework7.prototype.device.android ? '<div class="item-media"><i class="icon icon-form-radio"></i></div>' : '') +
-                                '<div class="item-inner">' +
-                                    '<div data-name="<%= name %>" class="item-title style" style="background-image: url(<%= image %>); width:{0}px; height:{1}px; background-size:{0}px {1}px; background-repeat: no-repeat;"></div>'.format(thumbSize.width, thumbSize.height) +
-                                '</div>' +
-                            '</label>' +
-                        '</li>'
-                    );
-
-                _.each(DE.getController('EditParagraph').getStyles(), function(style) {
-                    $(template(style)).appendTo($styleList).on('click', _.buffered(function (e) {
-                        me.fireEvent('style:click', [me, e]);
-                    }, 100))
-                });
-            },
-
-            showColors: function () {
-                var me = this;
-                this.showPage('#edit-paragraph-color', true);
-
-                this.paletteBackgroundColor = new Common.UI.ThemeColorPalette({
-                    el: $('.page[data-page=edit-paragraph-color] .page-content'),
-                    transparent: true
-                });
-                this.paletteBackgroundColor.on('customcolor', function () {
-                    me.showCustomColor();
-                });
-                var template = _.template(['<div class="list-block">',
-                    '<ul>',
-                    '<li>',
-                    '<a id="edit-paragraph-add-custom-color" class="item-link">',
-                    '<div class="item-content">',
-                    '<div class="item-inner">',
-                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
-                    '</div>',
-                    '</div>',
-                    '</a>',
-                    '</li>',
-                    '</ul>',
-                    '</div>'].join(''));
-                $('.page[data-page=edit-paragraph-color] .page-content').append(template({scope: this}));
-                $('#edit-paragraph-add-custom-color').single('click', _.bind(this.showCustomColor, this));
-
-                Common.Utils.addScrollIfNeed('.page[data-page=edit-paragraph-color]', '.page[data-page=edit-paragraph-color] .page-content');
-                this.fireEvent('page:show', [this, '#edit-paragraph-color']);
-            },
-
-            showAdvanced: function () {
-                this.showPage('#edit-paragraph-advanced');
-                Common.Utils.addScrollIfNeed('.page[data-page=edit-paragraph-advanced]', '.page[data-page=edit-paragraph-advanced] .page-content');
-            },
-
-            showCustomColor: function () {
-                var me = this,
-                    selector = '#edit-paragraph-custom-color-view';
-                me.showPage(selector, true);
-
-                me.customColorPicker = new Common.UI.HsbColorPicker({
-                    el: $('.page[data-page=edit-paragraph-custom-color] .page-content'),
-                    color: me.paletteBackgroundColor.currentColor
-                });
-                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
-                    me.paletteBackgroundColor.addNewDynamicColor(colorPicker, color);
-                    DE.getController('EditContainer').rootView.router.back();
-                });
-
-                me.fireEvent('page:show', [me, selector]);
-            },
-
-            textBackground: 'Background',
-            textAdvSettings: 'Advanced settings',
-            textPrgStyles: 'Paragraph styles',
-            textBack: 'Back',
-            textAdvanced: 'Advanced',
-            textFromText: 'Distance from Text',
-            textBefore: 'Before',
-            textAuto: 'Auto',
-            textFirstLine: 'First Line',
-            textAfter: 'After',
-            textSpaceBetween: 'Space Between Paragraphs',
-            textPageBreak: 'Page Break Before',
-            textOrphan: 'Orphan Control',
-            textKeepLines: 'Keep Lines Together',
-            textKeepNext: 'Keep with Next',
-            textAddCustomColor: 'Add Custom Color',
-            textCustomColor: 'Custom Color'
-        }
-    })(), DE.Views.EditParagraph || {}))
-});

apps/documenteditor/mobile/app/view/edit/EditShape.js

@@ -1,293 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditShape.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/21/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'text!documenteditor/mobile/app/template/EditShape.template',
-    'jquery',
-    'underscore',
-    'backbone',
-    'common/mobile/lib/component/HsbColorPicker'
-], function (editTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.EditShape = Backbone.View.extend(_.extend((function() {
-        // private
-
-        return {
-            // el: '.view-main',
-
-            template: _.template(editTemplate),
-
-            events: {
-            },
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-                Common.NotificationCenter.on('editcategory:show',  _.bind(this.categoryShow, this));
-                this.isShapeCanFill = true;
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                $('#shape-style').single('click',                   _.bind(me.showStyle, me));
-                $('#shape-wrap').single('click',                    _.bind(me.showWrap, me));
-                $('#shape-replace').single('click',                 _.bind(me.showReplace, me));
-                $('#shape-reorder').single('click',                 _.bind(me.showReorder, me));
-                $('#edit-shape-bordercolor').single('click',        _.bind(me.showBorderColor, me));
-
-                $('.edit-shape-style .categories a').single('click', _.bind(me.showStyleCategory, me));
-
-                Common.Utils.addScrollIfNeed('#edit-shape .pages', '#edit-shape .page');
-                me.initControls();
-            },
-
-            categoryShow: function(e) {
-                // if ('edit-shape' == $(e.currentTarget).prop('id')) {
-                //     this.initEvents();
-                // }
-            },
-
-            // Render layout
-            render: function () {
-                var shapes = Common.SharedSettings.get('shapes').slice();
-                shapes.splice(0, 1); // Remove line shapes
-
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    shapes  : shapes,
-                    scope   : this
-                }));
-
-                return this;
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    return this.layout
-                        .find('#edit-shape-root')
-                        .html();
-                }
-
-                return '';
-            },
-
-            initControls: function () {
-                //
-            },
-
-            showPage: function (templateId, suspendEvent) {
-                var rootView = DE.getController('EditContainer').rootView;
-
-                if (rootView && this.layout) {
-                    var $content = this.layout.find(templateId);
-
-                    // Android fix for navigation
-                    if (Framework7.prototype.device.android) {
-                        $content.find('.page').append($content.find('.navbar'));
-                    }
-
-                    rootView.router.load({
-                        content: $content.html()
-                    });
-
-                    if (suspendEvent !== true) {
-                        this.fireEvent('page:show', [this, templateId]);
-                    }
-
-                    this.initEvents();
-                }
-            },
-
-            showStyleCategory: function (e) {
-                // remove android specific style
-                $('.page[data-page=edit-shape-style] .list-block.inputs-list').removeClass('inputs-list');
-            },
-
-            showStyle: function () {
-                var me = this;
-                var selector = this.isShapeCanFill ? '#edit-shape-style' : '#edit-shape-style-nofill';
-                this.showPage(selector, true);
-
-                if (!this.isShapeCanFill)
-                    this.showStyleCategory();
-
-                this.paletteFillColor = new Common.UI.ThemeColorPalette({
-                    el: $('#tab-shape-fill'),
-                    transparent: true
-                });
-                this.paletteFillColor.on('customcolor', function () {
-                    me.showCustomFillColor();
-                });
-                var template = _.template(['<div class="list-block">',
-                    '<ul>',
-                        '<li>',
-                            '<a id="edit-shape-add-custom-color" class="item-link">',
-                            '<div class="item-content">',
-                            '<div class="item-inner">',
-                                '<div class="item-title"><%= scope.textAddCustomColor %></div>',
-                            '</div>',
-                            '</div>',
-                            '</a>',
-                        '</li>',
-                    '</ul>',
-                    '</div>'].join(''));
-                $('#tab-shape-fill').append(template({scope: this}));
-                $('#edit-shape-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
-                Common.Utils.addScrollIfNeed('.page.shape-style', '.page.shape-style .page-content');
-                this.fireEvent('page:show', [this, selector]);
-            },
-
-            showWrap: function () {
-                this.showPage('#edit-shape-wrap');
-                Common.Utils.addScrollIfNeed('.page.shape-wrap', '.page.shape-wrap .page-content');
-            },
-
-            showReplace: function () {
-                this.showPage('#edit-shape-replace');
-                Common.Utils.addScrollIfNeed('.page.shape-replace', '.page.shape-replace .page-content');
-            },
-
-            showReorder: function () {
-                this.showPage('#edit-shape-reorder');
-                Common.Utils.addScrollIfNeed('.page.shape-reorder', '.page.shape-reorder .page-content');
-            },
-
-            showBorderColor: function () {
-                var me = this;
-                var selector = '#edit-shape-border-color-view';
-                this.showPage(selector, true);
-
-                this.paletteBorderColor = new Common.UI.ThemeColorPalette({
-                    el: $('.page[data-page=edit-shape-border-color] .page-content')
-                });
-                this.paletteBorderColor.on('customcolor', function () {
-                    me.showCustomBorderColor();
-                });
-                var template = _.template(['<div class="list-block">',
-                    '<ul>',
-                    '<li>',
-                    '<a id="edit-shape-add-custom-border-color" class="item-link">',
-                    '<div class="item-content">',
-                    '<div class="item-inner">',
-                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
-                    '</div>',
-                    '</div>',
-                    '</a>',
-                    '</li>',
-                    '</ul>',
-                    '</div>'].join(''));
-                $('.page[data-page=edit-shape-border-color] .page-content').append(template({scope: this}));
-                $('#edit-shape-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
-
-                this.fireEvent('page:show', [this, selector]);
-            },
-
-            showCustomFillColor: function() {
-                var me = this,
-                    selector = '#edit-shape-custom-color-view';
-                me.showPage(selector, true);
-
-                me.customColorPicker = new Common.UI.HsbColorPicker({
-                    el: $('.page[data-page=edit-shape-custom-color] .page-content'),
-                    color: me.paletteFillColor.currentColor
-                });
-                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
-                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
-                    DE.getController('EditContainer').rootView.router.back();
-                });
-
-                me.fireEvent('page:show', [me, selector]);
-            },
-
-            showCustomBorderColor: function() {
-                var me = this,
-                    selector = '#edit-shape-custom-color-view';
-                me.showPage(selector, true);
-
-                me.customBorderColorPicker = new Common.UI.HsbColorPicker({
-                    el: $('.page[data-page=edit-shape-custom-color] .page-content'),
-                    color: me.paletteBorderColor.currentColor
-                });
-                me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
-                    me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
-                    me.paletteFillColor.updateDynamicColors();
-                    me.paletteFillColor.select(me.paletteFillColor.currentColor);
-                    DE.getController('EditContainer').rootView.router.back();
-                });
-
-                me.fireEvent('page:show', [me, selector]);
-            },
-
-            textStyle: 'Style',
-            textWrap: 'Wrap',
-            textReplace: 'Replace',
-            textReorder: 'Reorder',
-            textRemoveShape: 'Remove Shape',
-            textBack: 'Back',
-            textToForeground: 'Bring to Foreground',
-            textToBackground: 'Send to Background',
-            textForward: 'Move Forward',
-            textBackward: 'Move Backward',
-            textInline: 'Inline',
-            textSquare: 'Square',
-            textTight: 'Tight',
-            textThrough: 'Through',
-            textTopAndBottom: 'Top and Bottom',
-            textInFront: 'In Front',
-            textBehind: 'Behind',
-            textAlign: 'Align',
-            textWithText: 'Move with Text',
-            textOverlap: 'Allow Overlap',
-            textFromText: 'Distance from Text',
-            textFill: 'Fill',
-            textBorder: 'Border',
-            textEffects: 'Effects',
-            textSize: 'Size',
-            textColor: 'Color',
-            textOpacity: 'Opacity',
-            textAddCustomColor: 'Add Custom Color',
-            textCustomColor: 'Custom Color'
-        }
-    })(), DE.Views.EditShape || {}))
-});

apps/documenteditor/mobile/app/view/edit/EditTable.js

@@ -1,324 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditTable.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/20/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'text!documenteditor/mobile/app/template/EditTable.template',
-    'jquery',
-    'underscore',
-    'backbone',
-    'common/mobile/lib/component/ThemeColorPalette'
-], function (editTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.EditTable = Backbone.View.extend(_.extend((function() {
-        // private
-        var _styles = [];
-
-        return {
-            // el: '.view-main',
-
-            template: _.template(editTemplate),
-
-            events: {
-            },
-
-            initialize: function () {
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-                Common.NotificationCenter.on('editcategory:show',  _.bind(this.categoryShow, this));
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                $('#table-wrap').single('click',                        _.bind(me.showTableWrap, me));
-                $('#table-style').single('click',                       _.bind(me.showTableStyle, me));
-                $('#table-options').single('click',                     _.bind(me.showTableOptions, me));
-                $('#edit-table-style-options').single('click',          _.bind(me.showTableStyleOptions, me));
-                $('#edit-table-bordercolor').single('click',            _.bind(me.showBorderColor, me));
-                $('.edit-table-style .categories a').single('click',    _.bind(me.showStyleCategory, me));
-
-                Common.Utils.addScrollIfNeed('#edit-table .pages', '#edit-table .page');
-                me.initControls();
-                me.renderStyles();
-            },
-
-            // Render layout
-            render: function () {
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    scope   : this
-                }));
-
-                return this;
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    return this.layout
-                        .find('#edit-table-root')
-                        .html();
-                }
-
-                return '';
-            },
-
-            initControls: function () {
-                //
-            },
-
-            updateStyles: function (styles) {
-                _styles = styles;
-                this.renderStyles();
-            },
-
-            renderStyles: function() {
-                var $styleContainer = $('#edit-table-styles .item-inner');
-
-                if ($styleContainer.length > 0 && $styleContainer.is(':visible')) {
-                    var columns = parseInt(($styleContainer.width() - 15) / 70), // magic
-                        row = -1,
-                        styles = [];
-
-                    _.each(_styles, function (style, index) {
-                        if (0 == index % columns) {
-                            styles.push([]);
-                            row++
-                        }
-                        styles[row].push(style);
-                    });
-
-                    var template = _.template([
-                        '<div class="dataview table-styles" style="width: 100%;">',
-                            '<% _.each(styles, function(row) { %>',
-                            '<div class="row">',
-                                '<% _.each(row, function(style) { %>',
-                                '<div data-type="<%= style.templateId %>">',
-                                    '<img src="<%= style.imageUrl %>">',
-                                '</div>',
-                                '<% }); %>',
-                            '</div>',
-                            '<% }); %>',
-                        '</div>'
-                    ].join(''))({
-                        styles: styles
-                    });
-
-                    $styleContainer.html(template);
-                }
-            },
-
-            categoryShow: function(e) {
-                // if ('edit-shape' == $(e.currentTarget).prop('id')) {
-                //     this.initEvents();
-                // }
-            },
-
-            showStyleCategory: function (e) {
-                // remove android specific style
-                $('.page[data-page=edit-table-style] .list-block.inputs-list').removeClass('inputs-list');
-                if ($(e.currentTarget).data('type') == 'fill') {
-                    this.fireEvent('page:show', [this, '#edit-table-style']);
-                }
-                // this.fireEvent('page:show', [this, '#edit-table-style']);
-            },
-
-            showPage: function (templateId, suspendEvent) {
-                var rootView = DE.getController('EditContainer').rootView;
-
-                if (rootView && this.layout) {
-                    var $content = this.layout.find(templateId);
-
-                    // Android fix for navigation
-                    if (Framework7.prototype.device.android) {
-                        $content.find('.page').append($content.find('.navbar'));
-                    }
-
-                    rootView.router.load({
-                        content: $content.html()
-                    });
-
-                    if (suspendEvent !== true) {
-                        this.fireEvent('page:show', [this, templateId]);
-                    }
-
-                    this.initEvents();
-                }
-            },
-
-            showTableWrap: function () {
-                this.showPage('#edit-table-wrap');
-            },
-
-            showTableStyle: function () {
-                var me = this;
-                this.showPage('#edit-table-style', true);
-
-                this.paletteFillColor = new Common.UI.ThemeColorPalette({
-                    el: $('#tab-table-fill'),
-                    transparent: true
-                });
-                this.paletteFillColor.on('customcolor', function () {
-                    me.showCustomFillColor();
-                });
-                var template = _.template(['<div class="list-block">',
-                    '<ul>',
-                    '<li>',
-                    '<a id="edit-table-add-custom-color" class="item-link">',
-                    '<div class="item-content">',
-                    '<div class="item-inner">',
-                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
-                    '</div>',
-                    '</div>',
-                    '</a>',
-                    '</li>',
-                    '</ul>',
-                    '</div>'].join(''));
-                $('#tab-table-fill').append(template({scope: this}));
-                $('#edit-table-add-custom-color').single('click', _.bind(this.showCustomFillColor, this));
-
-                this.fireEvent('page:show', [this, '#edit-table-style']);
-            },
-
-            showBorderColor: function () {
-                var me = this;
-                this.showPage('#edit-table-border-color-view', true);
-
-                this.paletteBorderColor = new Common.UI.ThemeColorPalette({
-                    el: $('.page[data-page=edit-table-border-color] .page-content')
-                });
-                this.paletteBorderColor.on('customcolor', function () {
-                    me.showCustomBorderColor();
-                });
-                var template = _.template(['<div class="list-block">',
-                    '<ul>',
-                    '<li>',
-                    '<a id="edit-table-add-custom-border-color" class="item-link">',
-                    '<div class="item-content">',
-                    '<div class="item-inner">',
-                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
-                    '</div>',
-                    '</div>',
-                    '</a>',
-                    '</li>',
-                    '</ul>',
-                    '</div>'].join(''));
-                $('.page[data-page=edit-table-border-color] .page-content').append(template({scope: this}));
-                $('#edit-table-add-custom-border-color').single('click', _.bind(this.showCustomBorderColor, this));
-
-                this.fireEvent('page:show', [this, '#edit-table-border-color-view']);
-            },
-
-            showTableOptions: function () {
-                this.showPage('#edit-table-options');
-            },
-
-            showTableStyleOptions: function () {
-                this.showPage('#edit-table-style-options-view');
-            },
-
-            showCustomFillColor: function () {
-                var me = this,
-                    selector = '#edit-table-custom-color-view';
-                me.showPage(selector, true);
-
-                me.customColorPicker = new Common.UI.HsbColorPicker({
-                    el: $('.page[data-page=edit-table-custom-color] .page-content'),
-                    color: me.paletteFillColor.currentColor
-                });
-                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
-                    me.paletteFillColor.addNewDynamicColor(colorPicker, color);
-                    DE.getController('EditContainer').rootView.router.back();
-                });
-
-                me.fireEvent('page:show', [me, selector]);
-            },
-
-            showCustomBorderColor: function() {
-                var me = this,
-                    selector = '#edit-table-custom-color-view';
-                me.showPage(selector, true);
-
-                me.customBorderColorPicker = new Common.UI.HsbColorPicker({
-                    el: $('.page[data-page=edit-table-custom-color] .page-content'),
-                    color: me.paletteBorderColor.currentColor
-                });
-                me.customBorderColorPicker.on('addcustomcolor', function (colorPicker, color) {
-                    me.paletteBorderColor.addNewDynamicColor(colorPicker, color);
-                    me.paletteFillColor.updateDynamicColors();
-                    me.paletteFillColor.select(me.paletteFillColor.currentColor);
-                    DE.getController('EditContainer').rootView.router.back();
-                });
-
-                me.fireEvent('page:show', [me, selector]);
-            },
-
-            textRemoveTable: 'Remove Table',
-            textTableOptions: 'Table Options',
-            textStyle: 'Style',
-            textWrap: 'Wrap',
-            textBack: 'Back',
-            textInline: 'Inline',
-            textFlow: 'Flow',
-            textWithText: 'Move with Text',
-            textFromText: 'Distance from Text',
-            textAlign: 'Align',
-            textOptions: 'Options',
-            textRepeatHeader: 'Repeat as Header Row',
-            textResizeFit: 'Resize to Fit Content',
-            textCellMargins: 'Cell Margins',
-            textFill: 'Fill',
-            textBorder: 'Border',
-            textStyleOptions: 'Style Options',
-            textSize: 'Size',
-            textColor: 'Color',
-            textHeaderRow: 'Header Row',
-            textTotalRow: 'Total Row',
-            textBandedRow: 'Banded Row',
-            textFirstColumn: 'First Column',
-            textLastColumn: 'Last Column',
-            textBandedColumn: 'Banded Column',
-            textAddCustomColor: 'Add Custom Color',
-            textCustomColor: 'Custom Color'
-        }
-    })(), DE.Views.EditTable || {}))
-});

apps/documenteditor/mobile/app/view/edit/EditText.js

@@ -1,339 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System SIA 2010-2019
- *
- * This program is a free software product. You can redistribute it and/or
- * modify it under the terms of the GNU Affero General Public License (AGPL)
- * version 3 as published by the Free Software Foundation. In accordance with
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at 20A-12 Ernesta Birznieka-Upisha
- * street, Riga, Latvia, EU, LV-1050.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
-
-/**
- *  EditText.js
- *  Document Editor
- *
- *  Created by Alexander Yuzhin on 10/4/16
- *  Copyright (c) 2018 Ascensio System SIA. All rights reserved.
- *
- */
-
-define([
-    'text!documenteditor/mobile/app/template/EditText.template',
-    'jquery',
-    'underscore',
-    'backbone',
-    'common/mobile/lib/component/ThemeColorPalette'
-], function (editTemplate, $, _, Backbone) {
-    'use strict';
-
-    DE.Views.EditText = Backbone.View.extend(_.extend((function() {
-        // private
-        var _fontsList,
-            _editTextController;
-
-        var _bullets = [
-            [
-                {type: -1, thumb: ''},
-                {type: 1, thumb: 'bullet-01.png'},
-                {type: 2, thumb: 'bullet-02.png'},
-                {type: 3, thumb: 'bullet-03.png'}
-            ],
-            [
-                {type: 4, thumb: 'bullet-04.png'},
-                {type: 5, thumb: 'bullet-05.png'},
-                {type: 6, thumb: 'bullet-06.png'},
-                {type: 7, thumb: 'bullet-07.png'}
-            ]
-        ];
-
-        var _numbers = [
-            [
-                {type: -1, thumb: ''},
-                {type: 4, thumb: 'number-01.png'},
-                {type: 5, thumb: 'number-02.png'},
-                {type: 6, thumb: 'number-03.png'}
-            ],
-            [
-                {type: 1, thumb: 'number-04.png'},
-                {type: 2, thumb: 'number-05.png'},
-                {type: 3, thumb: 'number-06.png'},
-                {type: 7, thumb: 'number-07.png'}
-            ]
-        ];
-
-        return {
-            // el: '.view-main',
-
-            template: _.template(editTemplate),
-
-            events: {
-            },
-
-            initialize: function () {
-                _editTextController = DE.getController('EditText');
-                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
-            },
-
-            initEvents: function () {
-                var me = this;
-
-                $('#font-fonts').single('click',        _.bind(me.showFonts, me));
-                $('#font-color').single('click',        _.bind(me.showFontColor, me));
-                $('#font-background').single('click',   _.bind(me.showBackgroundColor, me));
-                $('#font-additional').single('click',   _.bind(me.showAdditional, me));
-                $('#font-line-spacing').single('click', _.bind(me.showLineSpacing, me));
-                $('#font-bullets').single('click',      _.bind(me.showBullets, me));
-                $('#font-numbers').single('click',      _.bind(me.showNumbers, me));
-
-                Common.Utils.addScrollIfNeed('#edit-text .pages', '#edit-text .page');
-                me.initControls();
-            },
-
-            // Render layout
-            render: function () {
-                this.layout = $('<div/>').append(this.template({
-                    android : Common.SharedSettings.get('android'),
-                    phone   : Common.SharedSettings.get('phone'),
-                    scope   : this,
-                    bullets : _bullets,
-                    numbers : _numbers
-                }));
-
-                return this;
-            },
-
-            rootLayout: function () {
-                if (this.layout) {
-                    return this.layout
-                        .find('#edit-text-root')
-                        .html();
-                }
-
-                return '';
-            },
-
-            initControls: function () {
-                //
-            },
-
-            showPage: function (templateId, suspendEvent) {
-                var rootView = DE.getController('EditContainer').rootView;
-
-                if (rootView && this.layout) {
-                    var $content = this.layout.find(templateId);
-
-                    // Android fix for navigation
-                    if (Framework7.prototype.device.android) {
-                        $content.find('.page').append($content.find('.navbar'));
-                    }
-
-                    rootView.router.load({
-                        content: $content.html()
-                    });
-
-                    if (suspendEvent !== true) {
-                        this.fireEvent('page:show', [this, templateId]);
-                    }
-                }
-            },
-
-            showFonts: function () {
-                this.showPage('#edit-text-fonts');
-
-                var me = this,
-                    $template = $(
-                        '<div>' +
-                            '<li>' +
-                                '<label class="label-radio item-content">' +
-                                    '<input type="radio" name="font-name" value="{{name}}">' +
-                                    (Framework7.prototype.device.android ? '<div class="item-media"><i class="icon icon-form-radio"></i></div>' : '') +
-                                    '<div class="item-inner">' +
-                                        '<div class="item-title" style="font-family: \'{{name}}\';">{{name}}</div>' +
-                                    '</div>' +
-                                '</label>' +
-                            '</li>' +
-                        '</div>'
-                    );
-
-                _fontsList = uiApp.virtualList('#font-list.virtual-list', {
-                    items: DE.getController('EditText').getFonts(),
-                    template: $template.html(),
-                    onItemsAfterInsert: function (list, fragment) {
-                        var fontInfo = _editTextController.getFontInfo();
-                        $('#font-list input[name=font-name]').val([fontInfo.name]);
-
-                        $('#font-list li').single('click', _.buffered(function (e) {
-                            me.fireEvent('font:click', [me, e]);
-                        }, 100));
-                    }
-                });
-
-                Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-page]', '.page[data-page=edit-text-font-page] .page-content');
-            },
-
-            showFontColor: function () {
-                var me = this;
-                this.showPage('#edit-text-color', true);
-
-                this.paletteTextColor = new Common.UI.ThemeColorPalette({
-                    el: $('.page[data-page=edit-text-font-color] .page-content')
-                });
-                this.paletteTextColor.on('customcolor', function () {
-                    me.showCustomFontColor();
-                });
-                var template = _.template(['<div class="list-block">',
-                    '<ul>',
-                    '<li>',
-                    '<a id="edit-text-add-custom-color" class="item-link">',
-                    '<div class="item-content">',
-                    '<div class="item-inner">',
-                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
-                    '</div>',
-                    '</div>',
-                    '</a>',
-                    '</li>',
-                    '</ul>',
-                    '</div>'].join(''));
-                $('.page[data-page=edit-text-font-color] .page-content').append(template({scope: this}));
-                $('#edit-text-add-custom-color').single('click', _.bind(this.showCustomFontColor, this));
-
-                Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-color]', '.page[data-page=edit-text-font-color] .page-content');
-                this.fireEvent('page:show', [this, '#edit-text-color']);
-            },
-
-            showCustomFontColor: function () {
-                var me = this,
-                    selector = '#edit-text-custom-color-view';
-                me.showPage(selector, true);
-
-                me.customColorPicker = new Common.UI.HsbColorPicker({
-                    el: $('.page[data-page=edit-text-custom-color] .page-content'),
-                    color: me.paletteTextColor.currentColor
-                });
-                me.customColorPicker.on('addcustomcolor', function (colorPicker, color) {
-                    me.paletteTextColor.addNewDynamicColor(colorPicker, color);
-                    DE.getController('EditContainer').rootView.router.back();
-                });
-
-                me.fireEvent('page:show', [me, selector]);
-            },
-
-            showBackgroundColor: function () {
-                var me = this;
-                this.showPage('#edit-text-background', true);
-
-                this.paletteBackgroundColor = new Common.UI.ThemeColorPalette({
-                    el: $('.page[data-page=edit-text-font-background] .page-content'),
-                    transparent: true
-                });
-                this.paletteBackgroundColor.on('customcolor', function () {
-                    me.showCustomBackgroundColor();
-                });
-                var template = _.template(['<div class="list-block">',
-                    '<ul>',
-                    '<li>',
-                    '<a id="edit-text-add-custom-background-color" class="item-link">',
-                    '<div class="item-content">',
-                    '<div class="item-inner">',
-                    '<div class="item-title"><%= scope.textAddCustomColor %></div>',
-                    '</div>',
-                    '</div>',
-                    '</a>',
-                    '</li>',
-                    '</ul>',
-                    '</div>'].join(''));
-                $('.page[data-page=edit-text-font-background] .page-content').append(template({scope: this}));
-                $('#edit-text-add-custom-background-color').single('click', _.bind(this.showCustomBackgroundColor, this));
-
-                Common.Utils.addScrollIfNeed('.page[data-page=edit-text-font-background]', '.page[data-page=edit-text-font-background] .page-content');
-                this.fireEvent('page:show', [this, '#edit-text-background']);
-            },
-
-            showCustomBackgroundColor: function () {
-                var me = this,
-                    selector = '#edit-text-custom-color-view';
-                me.showPage(selector, true);
-
-                me.customBackgroundColorPicker = new Common.UI.HsbColorPicker({
-                    el: $('.page[data-page=edit-text-custom-color] .page-content'),
-                    color: me.paletteBackgroundColor.currentColor
-                });
-                me.customBackgroundColorPicker.on('addcustomcolor', function (colorPicker, color) {
-                    me.paletteBackgroundColor.addNewDynamicColor(colorPicker, color);
-                    DE.getController('EditContainer').rootView.router.back();
-                });
-
-                me.fireEvent('page:show', [me, selector]);
-            },
-
-            showAdditional: function () {
-                this.showPage('#edit-text-additional');
-                Common.Utils.addScrollIfNeed('.page[data-page=edit-text-additional]', '.page[data-page=edit-text-additional] .page-content');
-            },
-
-            showLineSpacing: function () {
-                this.showPage('#edit-text-linespacing');
-                Common.Utils.addScrollIfNeed('#page-text-linespacing', '#page-text-linespacing .page-content');
-            },
-
-            showBullets: function () {
-                this.showPage('#edit-text-bullets');
-            },
-
-            showNumbers: function () {
-                this.showPage('#edit-text-numbers');
-            },
-
-            textFonts: 'Fonts',
-            textFontColor: 'Font Color',
-            textHighlightColor: 'Highlight Color',
-            textAdditionalFormat: 'Additional Formatting',
-            textBack: 'Back',
-            textSize: 'Size',
-            textFontColors: 'Font Colors',
-            textAutomatic: 'Automatic',
-            textHighlightColors: 'Highlight Colors',
-            textAdditional: 'Additional',
-            textStrikethrough: 'Strikethrough',
-            textDblStrikethrough: 'Double Strikethrough',
-            textDblSuperscript: 'Superscript',
-            textSubscript: 'Subscript',
-            textSmallCaps: 'Small Caps',
-            textAllCaps: 'All Caps',
-            textLetterSpacing: 'Letter Spacing',
-            textLineSpacing: 'Line Spacing',
-            textBullets: 'Bullets',
-            textNone: 'None',
-            textNumbers: 'Numbers',
-            textCharacterBold: 'B',
-            textCharacterItalic: 'I',
-            textCharacterUnderline: 'U',
-            textCharacterStrikethrough: 'S',
-            textAddCustomColor: 'Add Custom Color',
-            textCustomColor: 'Custom Color'
-        }
-    })(), DE.Views.EditText || {}))
-});

apps/documenteditor/mobile/index.html

@@ -1,224 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
-        <meta name="apple-mobile-web-app-capable" content="yes">
-        <meta name="apple-mobile-web-app-status-bar-style" content="black">
-        <meta name="mobile-web-app-capable" content="yes">
-
-        <title>ONLYOFFICE Documents</title>
-
-        <link href="https://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
-        <!-- App styles -->
-
-        <!-- splash -->
-
-        <style type="text/css">
-            .loadmask {
-                left: 0;
-                top: 0;
-                position: absolute;
-                height: 100%;
-                width: 100%;
-                overflow: hidden;
-                border: none;
-                background-color: #f4f4f4;
-                z-index: 10000;
-            }
-
-            .loadmask > .brendpanel {
-                width: 100%;
-                position: absolute;
-                height: 68px;
-                background-color: #e2e2e2;
-                opacity: 0;
-            }
-
-            .loadmask > .brendpanel.visible {
-                opacity: 1;
-            }
-
-            .loadmask > .brendpanel.android {
-                height: 80px;
-                background: #446995;
-            }
-
-            .loadmask > .brendpanel > div {
-                display: flex;
-                align-items: flex-start;
-                height: 100%;
-            }
-
-            .loadmask > .brendpanel .loading-logo {
-                max-width: 200px;
-                height: 20px;
-                margin: 0 auto;
-                margin-top: 12px;
-                line-height: 14px;
-                opacity: 0;
-            }
-
-            .loadmask > .brendpanel .loading-logo > img {
-                display: inline-block;
-                max-width: 100px;
-                max-height: 20px;
-            }
-
-            .loadmask > .brendpanel .circle {
-                width: 28px;
-                height: 28px;
-                border-radius: 14px;
-                margin: 0 16px;
-                margin-bottom: 10px;
-                align-self: flex-end;
-                background: rgba(255, 255, 255, 0.3);
-            }
-
-            .loadmask > .brendpanel.android .circle {
-                margin-bottom: 12px;
-                background: rgba(255, 255, 255, 0.2);
-            }
-
-            .loadmask > .placeholder {
-                background: #fbfbfb;
-                width: 100%;
-                height: 100%;
-                padding-top: 65px;
-            }
-
-            .loadmask > .placeholder.android {
-                padding-top: 75px;
-            }
-
-            .loadmask > .placeholder > .line {
-                height: 15px;
-                margin: 30px;
-                background: #e2e2e2;
-                overflow: hidden;
-                position: relative;
-
-                -webkit-animation: flickerAnimation 2s infinite ease-in-out;
-                -moz-animation: flickerAnimation 2s infinite ease-in-out;
-                -o-animation: flickerAnimation 2s infinite ease-in-out;
-                animation: flickerAnimation 2s infinite ease-in-out;
-            }
-
-            @keyframes flickerAnimation {
-                0%   { opacity:0.1; }
-                50%  { opacity:1; }
-                100% { opacity:0.1; }
-            }
-            @-o-keyframes flickerAnimation{
-                0%   { opacity:0.1; }
-                50%  { opacity:1; }
-                100% { opacity:0.1; }
-            }
-            @-moz-keyframes flickerAnimation{
-                0%   { opacity:0.1; }
-                50%  { opacity:1; }
-                100% { opacity:0.1; }
-            }
-            @-webkit-keyframes flickerAnimation{
-                0%   { opacity:0.1; }
-                50%  { opacity:1; }
-                100% { opacity:0.1; }
-            }
-        </style>
-    </head>
-    <body>
-        <div id="loading-mask" class="loadmask"><div class="brendpanel"><div><div class="circle"></div><div class="loading-logo"></div><div class="circle"></div></div></div><div class="placeholder"><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div></div></div>
-
-        <script type="text/javascript">
-            function getUrlParams() {
-                var e,
-                    a = /\+/g,  // Regex for replacing addition symbol with a space
-                    r = /([^&=]+)=?([^&]*)/g,
-                    d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
-                    q = window.location.search.substring(1),
-                    urlParams = {};
-
-                while (e = r.exec(q))
-                    urlParams[d(e[1])] = d(e[2]);
-
-                return urlParams;
-            }
-
-            function encodeUrlParam(str) {
-                return str.replace(/&/g, '&amp;')
-                        .replace(/"/g, '&quot;')
-                        .replace(/'/g, '&#39;')
-                        .replace(/</g, '&lt;')
-                        .replace(/>/g, '&gt;');
-            }
-
-            var params = getUrlParams(),
-                lang = (params["lang"] || 'en').split(/[\-\_]/)[0],
-                logo = /*params["headerlogo"] ? encodeUrlParam(params["headerlogo"]) : */null,
-                logoOO = null;
-            if (!logo) {
-                logoOO = /Android/.test(navigator.userAgent) ? "../../common/mobile/resources/img/header/logo-android.svg" : "../../common/mobile/resources/img/header/logo-ios.svg";
-            }
-
-                window.frameEditorId = params["frameEditorId"];
-            window.parentOrigin = params["parentOrigin"];
-
-            var brendpanel = document.getElementsByClassName('brendpanel')[0];
-            if (brendpanel) {
-                if (/Android/.test(navigator.userAgent)) {
-                    brendpanel.classList.add('android');
-                }
-                brendpanel.classList.add('visible');
-
-                var elem = document.querySelector('.loading-logo');
-                if (elem) {
-                    logo && (elem.innerHTML = '<img src=' + logo + '>');
-                    logoOO && (elem.innerHTML = '<img src=' + logoOO + '>');
-                    elem.style.opacity = 1;
-                }
-                var placeholder = document.getElementsByClassName('placeholder')[0];
-                if (placeholder && /Android/.test(navigator.userAgent)) {
-                    placeholder.classList.add('android');
-                }
-            }
-        </script>
-
-        <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
-
-        <script type="text/javascript" src="../../../../sdkjs/develop/sdkjs/word/scripts.js"></script>
-        <script>
-            var ua = navigator.userAgent;
-
-            if (/Sailfish/.test(ua) || /Jolla/.test(ua)) {
-                document.write('<script type="text/javascript" src="../../../vendor/iscroll/iscroll.min.js"><\/script>');
-
-                    if (!/Android/.test(ua)) {
-                        var ua = navigator.userAgent + ';Android 5.0;';
-                        Object.defineProperty(navigator, 'userAgent', {
-                            get: function () { return ua; }
-                        });
-                    }
-            }
-
-            window.sdk_scripts.forEach(function(item){
-                document.write('<script type="text/javascript" src="' + item + '"><\/script>');
-            });
-
-            window.requireTimeourError = function(){
-                var reqerr;
-
-                if ( lang == 'de')      reqerr = 'Die Verbindung ist zu langsam, einige Komponenten konnten nicht geladen werden. Aktualisieren Sie bitte die Seite.';
-                else if ( lang == 'es') reqerr = 'La conexión es muy lenta, algunos de los componentes no han podido cargar. Por favor recargue la página.';
-                else if ( lang == 'fr') reqerr = 'La connexion est trop lente, certains des composants n\'ons pas pu être chargé. Veuillez recharger la page.';
-                else if ( lang == 'ru') reqerr = 'Слишком медленное соединение, не удается загрузить некоторые компоненты. Пожалуйста, обновите страницу.';
-                else reqerr = 'The connection is too slow, some of the components could not be loaded. Please reload the page.';
-
-                return reqerr;
-            };
-        </script>
-        <!-- application -->
-        <script data-main="app-dev" src="../../../vendor/requirejs/require.js"></script>
-
-    </body>
-</html>