[DE mobile] Update document editor mobile.

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

@@ -0,0 +1,209 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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
+ *
+ */
+
+/**
+ *  ThemeColorPalette.js
+ *
+ *  Created by Alexander Yuzhin on 10/27/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+if (Common === undefined)
+    var Common = {};
+
+Common.UI = Common.UI || {};
+
+define([
+    'jquery',
+    'underscore',
+    'backbone'
+], function ($, _, Backbone) {
+    'use strict';
+
+    Common.UI.ThemeColorPalette = Backbone.View.extend(_.extend({
+        options: {
+            dynamiccolors: 10,
+            standardcolors: 10,
+            themecolors: 10,
+            effects: 5,
+            allowReselect: true,
+            transparent: false,
+            value: '000000',
+            cls: '',
+            style: ''
+        },
+
+        template: _.template([
+            '<% var me = this; %>',
+            '<div class="list-block color-palette <%= me.options.cls %>" style="<%= me.options.style %>">',
+                '<ul>',
+                    '<li class="theme-colors">',
+                        '<div style="padding: 15px 0 0 15px;"><%= me.textThemeColors %></div>',
+                        '<div class="item-content">',
+                            '<div class="item-inner">',
+                            '<% _.each(themeColors, function(row) { %>',
+                                '<div class="row">',
+                                    '<% _.each(row, function(effect) { %>',
+                                        '<a data-effectid="<%=effect.effectId%>" data-effectvalue="<%=effect.effectValue%>" data-color="<%=effect.color%>" style="background:#<%=effect.color%>"></a>',
+                                    '<% }); %>',
+                                '</div>',
+                            '<% }); %>',
+                            '</div>',
+                        '</div>',
+                    '</li>',
+                    '<li class="standart-colors">',
+                        '<div style="padding: 15px 0 0 15px;"><%= me.textStandartColors %></div>',
+                        '<div class="item-content">',
+                            '<div class="item-inner">',
+                                '<% _.each(standartColors, function(color, index) { %>',
+                                    '<% if (0 == index && me.options.transparent) { %>',
+                                    '<a data-color="transparent" class="transparent"></a>',
+                                    '<% } else { %>',
+                                    '<a data-color="<%=color%>" style="background:#<%=color%>"></a>',
+                                    '<% } %>',
+                                '<% }); %>',
+                            '</div>',
+                        '</div>',
+                    '</li>',
+                '</ul>',
+            '</div>'
+        ].join('')),
+
+        // colorRe: /(?:^|\s)color-(.{6})(?:\s|$)/,
+        // selectedCls: 'selected',
+        //
+        initialize : function(options) {
+            var me = this,
+                el = $(me.el);
+
+            me.options = _({}).extend(me.options, options);
+            me.render();
+
+            el.find('.color-palette a').on('click', _.bind(me.onColorClick, me));
+        },
+
+        render: function () {
+            var me = this,
+                themeColors = [],
+                row = -1,
+                standartColors = Common.Utils.ThemeColor.getStandartColors();
+
+            _.each(Common.Utils.ThemeColor.getEffectColors(), function(effect, index) {
+                if (0 == index % me.options.themecolors) {
+                    themeColors.push([]);
+                    row++
+                }
+                themeColors[row].push(effect);
+            });
+
+            $(me.el).append(me.template({
+                themeColors: themeColors,
+                standartColors: standartColors
+            }));
+
+            return me;
+        },
+
+        isColor: function(val) {
+            return typeof(val) == 'string' && (/[0-9A-Fa-f]{6}/).test(val);
+        },
+        isTransparent: function(val) {
+            return typeof(val) == 'string' && (val=='transparent');
+        },
+
+        isEffect: function(val) {
+            return (typeof(val) == 'object' && val.effectId !== undefined);
+        },
+
+        onColorClick:function (e) {
+            var me = this,
+                el = $(me.el),
+                $target = $(e.currentTarget);
+
+            el.find('.color-palette a').removeClass('active');
+            $target.addClass('active');
+
+            var color = $target.data('color'),
+                effectId = $target.data('effectid');
+
+            me.currentColor = color;
+
+            if (effectId) {
+                me.currentColor = {color: color, effectId: effectId};
+            }
+
+            me.trigger('select', me, me.currentColor);
+        },
+
+        select: function(color) {
+            var me = this,
+                el = $(me.el);
+
+            if (color == me.currentColor) {
+                return;
+            }
+
+            me.currentColor = color;
+
+            me.clearSelection();
+
+            if (_.isObject(color)) {
+                if (! _.isUndefined(color.effectId)) {
+                    el.find('a[data-effectid=' + color.effectId + ']').addClass('active');
+                } else if (! _.isUndefined(color.effectValue)) {
+                    el.find('a[data-effectvalue=' + color.effectValue + '][data-color=' + color.color + ']').addClass('active');
+                }
+            } else {
+                if (/#?[a-fA-F0-9]{6}/.test(color)) {
+                    color = /#?([a-fA-F0-9]{6})/.exec(color)[1];
+                }
+
+                if (/^[a-fA-F0-9]{6}|transparent$/.test(color) || _.indexOf(Common.Utils.ThemeColor.getStandartColors(), color) > -1) {
+                    el.find('.standart-colors a[data-color=' + color + ']').addClass('active');
+                } else {
+                    el.find('.custom-colors a[data-color=' + color + ']').addClass('active');
+                }
+            }
+        },
+
+
+        clearSelection: function() {
+            $(this.el).find('.color-palette a').removeClass('active');
+        },
+
+        textThemeColors: 'Theme Colors',
+        textStandartColors: 'Standart Colors'
+    }, Common.UI.ThemeColorPalette || {}));
+});

apps/common/mobile/utils/SharedSettings.js

@@ -0,0 +1,47 @@
+/**
+ *  SharedSettings.js
+ *
+ *  Created by Alexander Yuzhin on 10/7/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+if (Common === undefined)
+    var Common = {};
+
+Common.SharedSettings = new (function() {
+    var _keys = [];
+    var _data = {};
+
+    var _set = function (key, value) {
+        if (_data[key] === void 0) {
+            _keys.push(key);
+        }
+        _data[key] = value;
+    };
+
+    var _get = function (key) {
+        return _data[key];
+    };
+
+    var _remove = function (key) {
+        var index = _keys.indexOf(key);
+        if (index != -1) {
+            _keys.splice(index, 1);
+        }
+
+        delete _data[key];
+    };
+
+    var _size = function () {
+        return _keys.length;
+    };
+
+    return {
+        set: _set,
+        get: _get,
+        remove: _remove,
+        size: _size
+    };
+})();

apps/common/mobile/utils/extendes.js

@@ -29,48 +29,54 @@
  * Creative Commons Attribution-ShareAlike 4.0 International. See the License
  * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
  *
-*/
-Ext.define('DE.controller.Document', {
-    extend: 'Ext.app.Controller',
+ */
 
-    init: function() {
-    },
+/**
+ *  extendes.js
+ *
+ *  Created by Alexander Yuzhin on 10/14/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
 
-    launch: function() {
-        Ext.getCmp('id-conteiner-document').on('resize', this.onEditorResize, this);
-    },
+(function() {
 
-    setApi: function(o) {
-        this.api = o;
-
-        if (this.api) {
-            this.api.asc_registerCallback('asc_onShowPopMenu', Ext.bind(this.onApiShowPopMenu, this));
-            this.api.asc_registerCallback('asc_onHidePopMenu', Ext.bind(this.onApiHidePopMenu, this));
+    //Extend jQuery functions
+    jQuery.fn.extend( {
+        single: function(types, selector, data, fn) {
+            return this.off(types, fn).on(types, selector, data, fn);
         }
-    },
+    });
 
-    onEditorResize: function(cmp) {
-        if (this.api) {
-            this.api.Resize();
-            this.onApiHidePopMenu();
-        }
-    },
+    //Extend Dom7 functions
+    var methods = ['addClass', 'toggleClass', 'removeClass'];
 
-    onApiShowPopMenu: function(posX, posY) {
-        var popClipCmp = Ext.ComponentQuery.query('popclip');
+    _.each(methods, function (method, index) {
+        var originalMethod = Dom7.fn[method];
 
-        if (popClipCmp.length > 0) {
-            popClipCmp[0].setLeft(posX);
-            popClipCmp[0].setTop(posY);
-            popClipCmp[0].show();
-        }
-    },
+        Dom7.fn[method] = function(className) {
+            var result = originalMethod.apply(this, arguments);
+            this.trigger(method, className);
+            return result;
+        };
+    });
 
-    onApiHidePopMenu: function() {
-        var popClipCmp = Ext.ComponentQuery.query('popclip');
+    //Extend Underscope functions
+    _.buffered = function(func, buffer, scope, args) {
+        var timerId;
 
-        if (popClipCmp.length > 0) {
-            popClipCmp[0].hide();
-        }
-    }
-});
+        return function() {
+            var callArgs = args || Array.prototype.slice.call(arguments, 0),
+                me = scope || this;
+
+            if (timerId) {
+                clearTimeout(timerId);
+            }
+
+            timerId = setTimeout(function(){
+                func.apply(me, callArgs);
+            }, buffer);
+        };
+    };
+
+})();

apps/documenteditor/mobile/app-dev.js

@@ -0,0 +1,261 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 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',
+        jsrsasign       : '../vendor/jsrsasign/jsrsasign-latest-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'
+        },
+        notification: {
+            deps: [
+                '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',
+    'jsrsasign',
+    'sockjs'
+], function (Backbone, Framework7, Core) {
+    Backbone.history.start();
+
+    /**
+     * Application instance with DE namespace defined
+     */
+    var app = new Backbone.Application({
+        nameSpace: 'DE',
+        autoCreate: false,
+        controllers : [
+            'Editor',
+            'Toolbar',
+            'Main',
+            'DocumentHolder',
+            'Settings',
+            'EditContainer',
+            'EditText',
+            'EditParagraph',
+            'EditTable',
+            'EditImage',
+            'EditShape',
+            'EditChart',
+            'EditHyperlink',
+            'AddContainer',
+            'AddTable',
+            'AddShape',
+            'AddImage',
+            'AddOther'
+        ]
+    });
+
+    Common.Locale.apply();
+
+    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',
+
+        // 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');
+
+    require([
+        'common/main/lib/util/LocalStorage',
+        'common/main/lib/util/utils',
+        'documenteditor/mobile/app/controller/Editor',
+        'documenteditor/mobile/app/controller/Toolbar',
+        '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/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'
+
+    ], function() {
+        app.start();
+    });
+}, function(err) {
+    if (err.requireType == 'timeout' && !reqerr) {
+        var getUrlParams = function() {
+            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;
+        };
+
+        var encodeUrlParam = function(str) {
+            return str.replace(/&/g, '&')
+                .replace(/"/g, '"')
+                .replace(/'/g, ''')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;');
+        };
+
+        var lang = (getUrlParams()["lang"] || 'en').split("-")[0];
+
+        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.';
+
+        window.alert(reqerr);
+        window.location.reload();
+    }
+});

apps/documenteditor/mobile/app.js

@@ -29,20 +29,243 @@
  * Creative Commons Attribution-ShareAlike 4.0 International. See the License
  * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
  *
-*/
-Ext.application({
-    name: 'DE',
+ */
 
-    icon: 'resources/img/icon.png',
-    tabletStartupScreen: 'resources/img/tablet_startup.png',
-    phoneStartupScreen: 'resources/img/phone_startup.png',
+/**
+ *  app.js
+ *
+ *  Created by Alexander Yuzhin on 9/21/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
 
-    viewport: {
-        autoMaximize: false // TODO: set as TRUE if standalone version
+'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',
+        jsrsasign       : '../vendor/jsrsasign/jsrsasign-latest-all-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'
     },
 
-    profiles: [
-        'Tablet', 
-        'Phone'
-    ]
+    shim: {
+        framework7: {
+            exports: 'Framework7'
+        },
+        underscore: {
+            exports: '_'
+        },
+        backbone: {
+            deps: [
+                'underscore',
+                'jquery'
+            ],
+            exports: 'Backbone'
+        },
+        notification: {
+            deps: [
+                'backbone'
+            ]
+        },
+        core: {
+            deps: [
+                'backbone',
+                'notification',
+                'irregularstack',
+                'sharedsettings'
+            ]
+        },
+        extendes: {
+            deps: [
+                'underscore',
+                'jquery',
+                'framework7'
+            ]
+        },
+        sdk: {
+            deps: [
+                'jquery',
+                'underscore',
+                'allfonts',
+                'xregexp',
+                'sockjs',
+                'jszip',
+                'jsziputils',
+                'jsrsasign'
+            ]
+        },
+        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 : [
+            'Editor',
+            'Toolbar',
+            'Main',
+            'DocumentHolder',
+            'Settings',
+            'EditContainer',
+            'EditText',
+            'EditParagraph',
+            'EditTable',
+            'EditImage',
+            'EditShape',
+            'EditChart',
+            'EditHyperlink',
+            'AddContainer',
+            'AddTable',
+            'AddShape',
+            'AddImage',
+            'AddOther'
+        ]
+    });
+
+    Common.Locale.apply();
+
+    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',
+
+        // 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');
+
+    require([
+        'common/main/lib/util/LocalStorage',
+        'common/main/lib/util/utils',
+        'documenteditor/mobile/app/controller/Editor',
+        'documenteditor/mobile/app/controller/Toolbar',
+        '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/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'
+    ], function() {
+        app.start();
+    });
+}, function(err) {
+    if (err.requireType == 'timeout' && !reqerr) {
+        var getUrlParams = function() {
+            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;
+        };
+
+        var encodeUrlParam = function(str) {
+            return str.replace(/&/g, '&')
+                .replace(/"/g, '"')
+                .replace(/'/g, ''')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;');
+        };
+
+        var lang = (getUrlParams()["lang"] || 'en').split("-")[0];
+
+        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.';
+
+        window.alert(reqerr);
+        window.location.reload();
+    }
+});

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

@@ -0,0 +1,208 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/DocumentHolder'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.DocumentHolder = Backbone.Controller.extend((function() {
+        // private
+        var _isEdit = false;
+
+        return {
+            models: [],
+            collections: [],
+            views: [
+                'DocumentHolder'
+            ],
+
+            initialize: function() {
+                this.addListeners({
+                    'DocumentHolder': {
+                        'contextmenu:click' : this.onContextMenuClick
+                    }
+                });
+            },
+
+            setApi: function(api) {
+                this.api = api;
+
+                this.api.asc_registerCallback('asc_onShowPopMenu',      _.bind(this.onApiShowPopMenu, this));
+                this.api.asc_registerCallback('asc_onHidePopMenu',      _.bind(this.onApiHidePopMenu, this));
+                this.api.asc_registerCallback('asc_onFocusObject',      _.bind(this.onApiFocusObject, this));
+            },
+
+            setMode: function (mode) {
+                _isEdit = ('edit' === mode);
+            },
+
+            // When our application is ready, lets get started
+            onLaunch: function() {
+                var me = this;
+
+                me.view = me.createView('DocumentHolder').render();
+
+                $$(window).on('resize', _.bind(me.onEditorResize, me));
+            },
+
+            // Handlers
+
+            onContextMenuClick: function (view, eventName) {
+                var me = this;
+
+                if ('cut' == eventName) {
+                    me.api.Cut();
+                } else if ('copy' == eventName) {
+                    me.api.Copy();
+                } else if ('paste' == eventName) {
+                    me.api.Paste();
+                } else if ('delete' == eventName) {
+                    console.debug('IMPLEMENT: Delete fragment');
+                } else if ('edit' == eventName) {
+                    me.view.hideMenu();
+
+                    DE.getController('EditContainer').showModal();
+                } else if ('addlink' == eventName) {
+                    me.view.hideMenu();
+
+                    DE.getController('AddContainer').showModal();
+                    DE.getController('AddOther').getView('AddOther').showLink();
+                }
+
+                me.view.hideMenu();
+            },
+
+            // API Handlers
+
+            onEditorResize: function(cmp) {
+                // Hide context menu
+            },
+
+            onApiShowPopMenu: function(posX, posY) {
+                var me = this,
+                    items = me._initMenu(me.api.getSelectedElements());
+
+                me.view.showMenu(items, posX, posY);
+            },
+
+            onApiHidePopMenu: function() {
+                this.view.hideMenu();
+            },
+
+            onApiFocusObject: function (objects) {
+                //
+            },
+
+            // Internal
+
+            _initMenu: function (stack) {
+                var me = this,
+                    menuItems = [],
+                    canCopy = me.api.can_CopyCut();
+
+                if (canCopy) {
+                    menuItems.push({
+                        caption: 'Copy',
+                        event: 'copy'
+                    });
+                }
+
+                if (stack.length > 0) {
+                    var topObject = stack[stack.length - 1],
+                        topObjectType = topObject.get_ObjectType(),
+                        topObjectValue = topObject.get_ObjectValue(),
+                        objectLocked = _.isFunction(topObjectValue.get_Locked) ? topObjectValue.get_Locked() : false;
+
+                    var swapItems = function(items, indexBefore, indexAfter) {
+                        items[indexAfter] = items.splice(indexBefore, 1, items[indexAfter])[0];
+                    };
+
+                    if (!objectLocked && _isEdit) {
+                        menuItems.push({
+                            caption: 'Cut',
+                            event: 'cut'
+                        });
+                        menuItems.push({
+                            caption: 'Paste',
+                            event: 'paste'
+                        });
+
+                        // Swap 'Copy' and 'Cut'
+                        swapItems(menuItems, 0, 1);
+
+                        menuItems.push({
+                            caption: 'Delete',
+                            event: 'delete'
+                        });
+
+                        menuItems.push({
+                            caption: 'Edit',
+                            event: 'edit'
+                        });
+                    }
+
+                    var text = me.api.can_AddHyperlink();
+
+                    if (!_.isEmpty(text)) {
+                        menuItems.push({
+                            caption: 'Add Hyperlink',
+                            event: 'addlink'
+                        });
+                    }
+
+                    if (Asc.c_oAscTypeSelectElement.Paragraph == topObjectType) {
+                        //
+                    }
+                }
+
+                if (Common.SharedSettings.get('phone') && menuItems.length > 3) {
+                    menuItems = menuItems.slice(0, 3);
+                }
+
+                return menuItems;
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,112 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 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)));
+        }
+
+        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');
+
+                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,121 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.controller.Search', (function() {
-    return {
-        extend: 'Ext.app.Controller',
-
-        config: {
-            refs: {
-                searchToolbar       : 'searchtoolbar',
-                nextResultButton    : '#id-btn-search-down',
-                previousResultButton: '#id-btn-search-up',
-                searchField         : '#id-field-search'
-            },
-
-            control: {
-                searchToolbar: {
-                    hide        : 'onSearchToolbarHide'
-                },
-                previousResultButton: {
-                    tap         : 'onPreviousResultButtonTap'
-                },
-                nextResultButton: {
-                    tap         : 'onNextResultButtonTap'
-                },
-                searchField: {
-                    keyup       : 'onSearchKeyUp',
-                    change      : 'onSearchChange',
-                    clearicontap: 'onClearSearch'
-                }
-            }
-        },
-
-        init: function() {
-        },
-
-        setApi: function(o) {
-            this.api = o;
-//            this.api.asc_registerCallback('asc_onSearchEnd',    Ext.bind(this.onApiSearchStop, this));
-        },
-
-        updateNavigation: function(){
-            var text = this.getSearchField().getValue();
-
-            this.getNextResultButton().setDisabled(!(text.length>0));
-            this.getPreviousResultButton().setDisabled(!(text.length>0));
-        },
-
-        clearSearchResults: function() {
-            if (this.getSearchField()) {
-                this.getSearchField().setValue('');
-                this.updateNavigation();
-            }
-
-            // workaround blur problem in iframe (bug #12685)
-            window.focus();
-            document.activeElement.blur();
-        },
-
-        onSearchToolbarHide: function() {
-            this.clearSearchResults();
-        },
-
-        onNextResultButtonTap: function(){
-            this.api.asc_findText(this.getSearchField().getValue(), true);
-        },
-
-        onPreviousResultButtonTap: function(){
-            this.api.asc_findText(this.getSearchField().getValue(), false);
-        },
-
-        onSearchKeyUp: function(field, e){
-            if (e.event.keyCode == 13 && field.getValue().length > 0) {
-                this.api.asc_findText(field.getValue(), true);
-            }
-            this.updateNavigation();
-        },
-
-        onSearchChange: function(field, newValue, oldValue){
-            this.updateNavigation();
-        },
-
-        onClearSearch: function(field, e){
-            this.clearSearchResults();
-        }
-
-//        onApiSearchStop: function() {
-//            Ext.Viewport.unmask();
-//            this.updateNavigation();
-//        }
-    }
-})());

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

@@ -0,0 +1,272 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/Settings'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.Settings = Backbone.Controller.extend((function() {
+        // private
+        var rootView,
+            inProgress,
+            infoObj,
+            modalView;
+
+        return {
+            models: [],
+            collections: [],
+            views: [
+                'Settings'
+            ],
+
+            initialize: function () {
+                Common.SharedSettings.set('readerMode', false);
+                Common.NotificationCenter.on('settingscontainer:show', _.bind(this.initEvents, this));
+
+                this.addListeners({
+                    'Settings': {
+                        'page:show' : this.onPageShow
+                    }
+                });
+            },
+
+            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));
+            },
+
+            onLaunch: function () {
+                this.createView('Settings').render();
+            },
+
+            setMode: function (mode) {
+                this.getView('Settings').setMode(mode);
+            },
+
+            initEvents: function () {
+
+
+                // $('#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));
+            },
+
+            rootView : function() {
+                return rootView;
+            },
+
+            showModal: function() {
+                if (Common.SharedSettings.get('phone')) {
+                    modalView = uiApp.popup(
+                        '<div class="popup 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 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
+                });
+
+                Common.NotificationCenter.trigger('settingscontainer:show');
+                this.onPageShow(this.getView('Settings'));
+            },
+
+            hideModal: function() {
+                if (modalView) {
+                    uiApp.closeModal(modalView);
+                }
+            },
+
+            onPageShow: function(view) {
+                var me = this;
+                $('#settings-search').single('click',                       _.bind(me._onSearch, me));
+                $('#settings-readermode input:checkbox').single('change',   _.bind(me._onReaderMode, me));
+                $('#settings-edit-document').single('click',                _.bind(me._onEditDocumet, me));
+                $(modalView).find('.formats a').single('click',             _.bind(me._onSaveFormat, me));
+            },
+
+
+            // 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);
+                }, 2000);
+            },
+
+            _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 : '-');
+            },
+
+            _onEditDocumet: function() {
+                Common.Gateway.requestEditRights();
+            },
+
+            _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'));
+            },
+
+            _onSaveFormat: function(e) {
+                var me = this,
+                    format = $(e.currentTarget).data('format');
+
+                if (format) {
+                    if (format == Asc.c_oAscFileType.TXT) {
+                        uiApp.confirm(
+                            me.warnDownloadAs,
+                            me.notcriticalErrorTitle,
+                            function () {
+                                me.api.asc_DownloadAs(format);
+                            }
+                        );
+                    } else {
+                        me.api.asc_DownloadAs(format);
+                    }
+
+                    me.hideModal();
+                }
+            },
+
+            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?'
+        }
+    })());
+});

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

@@ -0,0 +1,226 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/Toolbar'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.Toolbar = Backbone.Controller.extend((function() {
+        // private
+        var _backUrl;
+
+        return {
+            models: [],
+            collections: [],
+            views: [
+                'Toolbar'
+            ],
+
+            initialize: function() {
+                this.addListeners({
+                    'Toolbar': {
+                        'searchbar:show'        : this.onSearchbarShow,
+                        'searchbar:render'      : this.onSearchbarRender
+                    }
+                });
+
+                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) {
+                    _backUrl = data.config.customization.goback.url;
+
+                    $('#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'));
+            },
+
+            setMode: function (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);
+            },
+
+            // Search
+
+            onSearchbarRender: function(bar) {
+                var me = this;
+                me.searchBar = uiApp.searchbar('.searchbar.document', {
+                    customSearch: true,
+                    onSearch    : _.bind(me.onSearchChange, me),
+                    onEnable    : _.bind(me.onSearchEnable, me),
+                    onDisable   : _.bind(me.onSearchDisable, me),
+                    onClear     : _.bind(me.onSearchClear, me)
+                });
+
+                me.searchPrev = $('.searchbar.document .prev');
+                me.searchNext = $('.searchbar.document .next');
+
+                me.searchPrev.on('click', _.bind(me.onSearchPrev, me));
+                me.searchNext.on('click', _.bind(me.onSearchNext, me));
+            },
+
+            onSearchbarShow: function(bar) {
+                //
+            },
+
+            onSearchChange: function(search) {
+                var me = this,
+                    isEmpty = (search.query.trim().length < 1);
+
+                _.each([me.searchPrev, me.searchNext], function(btn) {
+                    btn[isEmpty ? 'addClass' : 'removeClass']('disabled');
+                });
+            },
+
+            onSearchEnable: function(search) {
+                //
+            },
+
+            onSearchDisable: function(search) {
+                //
+            },
+
+            onSearchClear: function(search) {
+//            window.focus();
+//            document.activeElement.blur();
+            },
+
+            onSearchPrev: function(btn) {
+                this.onQuerySearch(this.searchBar.query, 'back');
+            },
+
+            onSearchNext: function(btn) {
+                this.onQuerySearch(this.searchBar.query, 'next');
+            },
+
+            onQuerySearch: function(query, direction, opts) {
+                if (query && query.length) {
+                    if (!this.api.asc_findText(query, direction != 'back', opts && opts.matchcase, opts && opts.matchword)) {
+                        var me = this;
+                        uiApp.alert(
+                            '',
+                            me.textNoTextFound,
+                            function () {
+                                me.searchBar.input.focus();
+                            }
+                        );
+                    }
+                }
+            },
+
+            // 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() {
+                                    window.parent.location.href = _backUrl;
+                                }
+                            },
+                            {
+                                text: me.stayButtonText,
+                                bold: true
+                            }
+                        ]
+                    });
+                } else {
+                    window.parent.location.href = _backUrl;
+                }
+            },
+
+            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 (which == 'undo') {
+                    $('#toolbar-undo').toggleClass('disabled', !can);
+                } else {
+                    $('#toolbar-redo').toggleClass('disabled', !can);
+                }
+            },
+
+            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',
+            textNoTextFound     : 'Text not found',
+        }
+    })());
+});

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

@@ -0,0 +1,273 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.AddContainer = Backbone.Controller.extend((function() {
+        // private
+
+        return {
+            models: [],
+            collections: [],
+            views: [],
+
+            initialize: function() {
+                //
+            },
+
+            setApi: function(api) {
+                this.api = api;
+            },
+
+            onLaunch: function() {
+                //
+            },
+
+            showModal: function() {
+                var me = this,
+                    mainView = DE.getController('Editor').getView('Editor').f7View,
+                    isAndroid = Framework7.prototype.device.android === true;
+
+                if ($$('.container-add.modal-in').length > 0) {
+                    return;
+                }
+
+                uiApp.closeModal();
+
+                me._showByStack(Common.SharedSettings.get('phone'));
+
+                DE.getController('Toolbar').getView('Toolbar').hideSearch();
+            },
+
+            hideModal: function () {
+                if (this.picker) {
+                    uiApp.closeModal(this.picker);
+                }
+            },
+
+            _dummyEditController: function () {
+                var layout =
+                    '<div class="content-block inset">' +
+                        '<div class="content-block-inner"> ' +
+                            '<p>Implement add view!!!!</p>' +
+                        '</div>' +
+                    '</div>';
+
+                return {
+                    caption: 'Dummy',
+                    layout: layout
+                }
+            },
+
+            _layoutEditorsByStack: function () {
+                var addViews = [];
+
+                addViews.push({
+                    caption: 'Table',
+                    id: 'add-table',
+                    layout: DE.getController('AddTable')
+                        .getView('AddTable')
+                        .rootLayout()
+                });
+
+                addViews.push({
+                    caption: 'Shape',
+                    id: 'add-shape',
+                    layout: DE.getController('AddShape')
+                        .getView('AddShape')
+                        .rootLayout()
+                });
+
+                addViews.push({
+                    caption: 'Image',
+                    id: 'add-image',
+                    layout: DE.getController('AddImage')
+                        .getView('AddImage')
+                        .rootLayout()
+                });
+
+                addViews.push({
+                    caption: 'Other',
+                    id: 'add-other',
+                    layout: DE.getController('AddOther')
+                        .getView('AddOther')
+                        .rootLayout()
+                });
+
+                return addViews;
+            },
+
+            _showByStack: function(isPhone) {
+                var me = this,
+                    mainView = DE.getController('Editor').getView('Editor').f7View,
+                    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' : '') + '">' + layout.caption + '</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' : '') + '">' + layout.caption + '</a>'
+                            );
+                    });
+                }
+
+
+                // Content
+
+                var $layoutPages = $(
+                    '<div class="pages">' +
+                        '<div class="page" data-page="index">' +
+                            '<div class="page-content">' +
+                                '<div class="tabs-animated-wrap">' +
+                                    '<div class="tabs"></div>' +
+                                '</div>' +
+                            '</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 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 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
+                });
+
+                Common.NotificationCenter.trigger('addcontainer:show');
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,135 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/add/AddImage'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.AddImage = Backbone.Controller.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();
+
+                if (this.api) {
+                    this.api.asc_addImage();
+                }
+            },
+
+            onUrlChange: function (e) {
+                $('#addimage-insert')[_.isEmpty($(e.currentTarget).val()) ? 'addClass' : 'removeClass']('disabled');
+            },
+
+            onInsertByUrl: function (e) {
+                var me = this,
+                    $input = $('#addimage-link-url input[type="url"]');
+
+                if ($input) {
+                    var value = ($input.val()).replace(/ /g, '');
+
+                    _.delay(function () {
+                        if (!_.isEmpty(value)) {
+                            if ((/((^https?)|(^ftp)):\/\/.+/i.test(value))) {
+                                me.api.AddImageUrl(value);
+                                DE.getController('AddContainer').hideModal();
+                            } else {
+                                uiApp.alert(me.txtNotUrl);
+                            }
+                        } else {
+                            uiApp.alert(me.textEmptyImgUrl);
+                        }
+                    }, 300);
+                }
+            },
+
+            textEmptyImgUrl : 'You need to specify image URL.',
+            txtNotUrl       : 'This field should be a URL in the format \"http://www.example.com\"'
+        }
+    })());
+});

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

@@ -0,0 +1,213 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/add/AddOther'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.AddOther = Backbone.Controller.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
+                    }
+                });
+            },
+
+            setApi: function (api) {
+                var me = this;
+                me.api = api;
+
+                // me.api.asc_registerCallback('asc_onInitEditorFonts',    _.bind(onApiLoadFonts, me));
+
+            },
+
+            onLaunch: function () {
+                this.createView('AddOther').render();
+            },
+
+            initEvents: function () {
+                var me = this;
+                $('#add-other-pagebreak').single('click',   _.bind(me.onPageBreak, me));
+                $('#add-other-linebreak').single('click',   _.bind(me.onLineBreak, me));
+            },
+
+            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 : '');
+                        });
+                    }
+                }
+            },
+
+            // Handlers
+
+            onInsertLink: function (e) {
+                var me      = this,
+                    url     = $('#add-link-url input').val(),
+                    display = $('#add-link-display input').val(),
+                    tip     = $('#add-link-tip input').val(),
+                    urltype = me.api.asc_getUrlType($.trim(url)),
+                    isEmail = (urltype == 2);
+
+                if (urltype < 1) {
+                    uiApp.alert(me.txtNotUrl);
+                    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.asc_CHyperlink();
+                // props.asc_setType(1);
+                props.asc_setHyperlinkUrl(url);
+                props.asc_setText(_.isEmpty(display) ? url : display);
+                props.asc_setTooltip(tip);
+
+                me.api.add_Hyperlink(props);
+
+                DE.getController('AddContainer').hideModal();
+            },
+
+            onPageBreak: function (e) {
+                this.api && this.api.put_AddPageBreak();
+                DE.getController('AddContainer').hideModal();
+            },
+
+            onLineBreak: function (e) {
+                this.api && this.api.put_AddLineBreak();
+                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();
+            },
+
+            txtNotUrl:          'This field should be a URL in the format \"http://www.example.com\"'
+
+        }
+    })());
+});

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

@@ -0,0 +1,227 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/add/AddShape'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.AddShape = Backbone.Controller.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: 'leftArrowCallout'
+                    },
+                    {
+                        title: 'Right arrow callout',
+                        thumb: 'shape-16.svg',
+                        type: 'rightArrowCallout'
+                    },
+                    {
+                        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'
+                    }
+                ];
+
+                Common.SharedSettings.set('shapes', _styles);
+                Common.NotificationCenter.trigger('shapes:load', _styles);
+            },
+
+            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, 100, me));
+            },
+
+            onShapeClick: function (e) {
+                var me = this,
+                    $target = $(e.currentTarget);
+
+                if ($target && me.api) {
+                    me.api.AddShapeOnCurrentPage($target.data('type'));
+                }
+
+                DE.getController('AddContainer').hideModal();
+            },
+
+            // Public
+
+            getStyles: function () {
+                return _styles;
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,167 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/add/AddTable'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.AddTable = Backbone.Controller.extend((function() {
+        var _styles = [];
+
+        return {
+            models: [],
+            collections: [],
+            views: [
+                'AddTable'
+            ],
+
+            initialize: function () {
+                Common.NotificationCenter.on('addcontainer:show', _.bind(this.initEvents, this));
+            },
+
+            setApi: function (api) {
+                var me = this;
+                me.api = api;
+
+                me.api.asc_registerCallback('asc_onInitTableTemplates', _.bind(me.onApiInitTemplates, me));
+            },
+
+            onLaunch: function () {
+                this.createView('AddTable').render();
+            },
+
+            initEvents: function () {
+                var me = this;
+
+                if (_styles.length < 1) {
+                    me.api.asc_GetDefaultTableStyles();
+                }
+
+                $('#add-table li').single('click',  _.buffered(me.onStyleClick, 100, me));
+            },
+
+            onStyleClick: function (e) {
+                var me = this,
+                    $target = $(e.currentTarget);
+
+                DE.getController('AddContainer').hideModal();
+
+                _.delay(function () {
+                    if ($target) {
+                        var picker;
+                        var modal = uiApp.modal({
+                            title: 'Table Size',
+                            text: '',
+                            afterText:
+                            '<div class="content-block">' +
+                                '<div class="row">' +
+                                    '<div class="col-50">Columns</div>' +
+                                    '<div class="col-50">Rows</div>' +
+                                '</div>' +
+                            '<div id="picker-table-size"></div>' +
+                            '</div>',
+                            buttons: [
+                                {
+                                    text: 'Cancel'
+                                },
+                                {
+                                    text: 'OK',
+                                    bold: true,
+                                    onClick: function () {
+                                        var size = picker.value;
+
+                                        if (me.api) {
+                                            me.api.put_Table(parseInt(size[0]), parseInt(size[1]));
+                                            //TODO: Style ?
+                                        }
+                                    }
+                                }
+                            ]
+                        });
+
+                        picker = uiApp.picker({
+                            container: '#picker-table-size',
+                            toolbar: false,
+                            rotateEffect: true,
+                            value: [3, 3],
+                            cols: [{
+                                textAlign: 'left',
+                                values: [1,2,3,4,5,6,7,8,9,10]
+                            }, {
+                                values: [1,2,3,4,5,6,7,8,9,10]
+                            }]
+                        });
+
+                        // Vertical align
+                        $$(modal).css({
+                            marginTop: - Math.round($$(modal).outerHeight() / 2) + 'px'
+                        });
+                    }
+                }, 300);
+            },
+
+            // Public
+
+            getStyles: function () {
+                return _styles;
+            },
+
+            // API handlers
+
+            onApiInitTemplates: function(templates){
+                _styles = [];
+                _.each(templates, function(template){
+                    _styles.push({
+                        imageUrl    : template.get_Image(),
+                        templateId  : template.get_Id()
+                    });
+                });
+
+                Common.SharedSettings.set('tablestyles', _styles);
+                Common.NotificationCenter.trigger('tablestyles:load', _styles);
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,597 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/edit/EditChart'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.EditChart = Backbone.Controller.extend((function() {
+        // Private
+        var _stack = [],
+            _chartObject = undefined,
+            _shapeObject = 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;
+                },
+            }
+        })();
+
+        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];
+                },
+
+                sizeByValue: function (value) {
+                    var index = 0;
+                    _.each(_sizes, function (size, idx) {
+                        if (Math.abs(size - value) < 0.25) {
+                            index = idx;
+                        }
+                    });
+                    return _sizes[index];
+                }
+            }
+        })();
+
+        return {
+            models: [],
+            collections: [],
+            views: [
+                'EditChart'
+            ],
+
+            initialize: function () {
+                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
+
+                this.addListeners({
+                    'EditChart': {
+                        'page:show': this.onPageShow
+                    }
+                });
+            },
+
+            setApi: function (api) {
+                var me = this;
+                me.api = api;
+
+                me.api.asc_registerCallback('asc_onFocusObject',        _.bind(me.onApiFocusObject, me));
+                me.api.asc_registerCallback('asc_onUpdateChartStyles',  _.bind(me.onApiUpdateChartStyles, 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('click',             _.bind(me.onMoveText, me));
+                $('#edit-chart-overlap input').single('click',              _.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;
+
+                if (_chartObject) {
+                    if (pageId == '#edit-chart-wrap') {
+                        me._initWrapView();
+                    } else if (pageId == '#edit-chart-style') {
+                        me._updateChartStyles(me.api.asc_getChartPreviews(_chartObject.get_ChartProperties().getType()));
+                        me._initStyleView();
+                    } else if (pageId == '#edit-chart-border-color-view') {
+                        me._initStyleView();
+                    }
+                }
+            },
+
+            _initWrapView: function() {
+                // Wrap type
+                var me = this,
+                    wrapping = _chartObject.get_WrappingStyle(),
+                    $chartWrapInput = $('.chart-wrap input'),
+                    chartWrapType = wrapTypesTransform.sdkToUi(wrapping);
+
+                $chartWrapInput.val([chartWrapType]);
+                me._uiTransformByWrap(chartWrapType);
+
+                // Wrap align
+                var chartHAlign = _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', _chartObject.get_PositionV().get_RelativeFrom() == Asc.c_oAscRelativeFromV.Paragraph);
+                $('#edit-chart-overlap input').prop('checked', _chartObject.get_AllowOverlap());
+
+                // Wrap distance
+                var paddings = _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 = _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 = borderSizeTransform.sizeByValue(shapeProperties.get_stroke().get_width());
+                $('#edit-chart-bordersize input').val([borderSizeTransform.sizeByIndex(shapeProperties.get_stroke().get_width())]);
+                $('#edit-chart-bordersize .item-after').text(borderSize + ' ' + _metricText);
+
+
+                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
+                var stroke = shapeProperties.get_stroke(),
+                    strokeType = stroke.get_type();
+
+                color = 'transparent';
+
+                if (stroke && strokeType == Asc.c_oAscStrokeType.STROKE_COLOR) {
+                    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());
+                        }
+                    }
+                }
+
+                paletteBorderColor && paletteBorderColor.select(color);
+                $('#edit-chart-bordercolor .color-preview').css('background-color', ('transparent' == color) ? color : ('#' + (_.isObject(color) ? color.color : color)))
+            },
+
+            // Public
+
+            getChart: function () {
+                return _chartObject;
+            },
+
+            // Handlers
+
+            onType: function (e) {
+                var me = this,
+                    $target = $(e.currentTarget),
+                    type = $target.data('type');
+
+                var image = new Asc.asc_CImgProperty(),
+                    chart = _chartObject.get_ChartProperties();
+
+                chart.changeType(type);
+                image.put_ChartProperties(chart);
+
+                me.api.ImgApply(image);
+
+                $('.chart-types li').removeClass('active');
+                $target.addClass('active');
+
+                // Force update styles
+                me._updateChartStyles(me.api.asc_getChartPreviews(chart.getType()));
+            },
+
+            onStyle: function (e) {
+                var me = this,
+                    $target = $(e.currentTarget),
+                    type = $target.data('type');
+
+                var image = new Asc.asc_CImgProperty(),
+                    chart = _chartObject.get_ChartProperties();
+
+                chart.putStyle(type);
+                image.put_ChartProperties(chart);
+
+                me.api.ImgApply(image);
+            },
+
+            onRemoveChart: function () {
+                console.debug('REMOVE Chart!!!');
+            },
+
+            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(),
+                    currentShape = _shapeObject.get_ShapeProperties(),
+                    image = new Asc.asc_CImgProperty(),
+                    shape = new Asc.asc_CShapeProperty(),
+                    stroke = new Asc.asc_CStroke(),
+                    currentColor = Common.Utils.ThemeColor.getRgbColor('000000');
+
+                value = borderSizeTransform.sizeByIndex(parseInt(value));
+
+                var currentStroke = currentShape.get_stroke();
+
+                if (currentStroke) {
+                    var currentStrokeType = currentStroke.get_type();
+
+                    if (currentStrokeType == Asc.c_oAscStrokeType.STROKE_COLOR) {
+                        currentColor = currentStroke.get_color();
+                    }
+                }
+
+                if (value < 0.01) {
+                    stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
+                } else {
+                    stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
+                    stroke.put_color(currentColor);
+                    stroke.put_width(value * 25.4 / 72.0);
+                }
+
+                shape.put_stroke(stroke);
+                image.put_ShapeProperties(shape);
+
+                me.api.ImgApply(image);
+            },
+
+            onBorderSizeChanging: function (e) {
+                var $target = $(e.currentTarget);
+                $('#edit-chart-bordersize .item-after').text(borderSizeTransform.sizeByIndex($target.val()) + ' ' + _metricText);
+            },
+
+            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.get_ShapeProperties();
+
+                $('#edit-chart-bordercolor .color-preview').css('background-color', ('transparent' == color) ? color : ('#' + (_.isObject(color) ? color.color : color)));
+
+                if (me.api && currentShape) {
+                    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;
+                    }
+                };
+
+                _chartObject = getTopObject(charts);
+                _shapeObject = getTopObject(shapes);
+            },
+
+            onApiUpdateChartStyles: function () {
+                if (this.api && _chartObject && _chartObject.get_ChartProperties()) {
+                    this._updateChartStyles(this.api.asc_getChartPreviews(_chartObject.get_ChartProperties().getType()));
+                }
+            },
+
+            // Helpers
+
+            _updateChartStyles: function(styles) {
+                Common.SharedSettings.set('chartstyles', styles);
+                Common.NotificationCenter.trigger('chartstyles:load', styles);
+
+                $('#tab-chart-style .dataview .row div').single('click',    _.bind(this.onStyle, this));
+            },
+
+            _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;
+            }
+        };
+    })());
+});

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

@@ -0,0 +1,369 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+define([
+    'core'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.EditContainer = Backbone.Controller.extend((function() {
+        // Private
+        var _settings = [];
+
+        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);
+                }
+            },
+
+            _dummyEditController: function () {
+                var layout =
+                    '<div class="content-block inset">' +
+                        '<div class="content-block-inner"> ' +
+                            '<p>Implement settings!!!!</p>' +
+                        '</div>' +
+                    '</div>';
+
+                return {
+                    caption: 'Dummy',
+                    layout: layout
+                }
+            },
+
+            _emptyEditController: function () {
+                var layout =
+                    '<div class="content-block inset">' +
+                        '<div class="content-block-inner"> ' +
+                            '<p>Select object to edit</p>' +
+                        '</div>' +
+                    '</div>';
+
+                return {
+                    caption: 'Settings',
+                    layout: layout
+                }
+            },
+
+            _layoutEditorsByStack: function () {
+                var editors = [];
+
+                if (_settings.length < 0) {
+                    editors.push(this._emptyEditController());
+                } else {
+                    if (_.contains(_settings, 'text')) {
+                        editors.push({
+                            caption: 'Text',
+                            id: 'edit-text',
+                            layout: DE.getController('EditText').getView('EditText').rootLayout()
+                        })
+                    }
+                    if (_.contains(_settings, 'paragraph')) {
+                        editors.push({
+                            caption: 'Paragraph',
+                            id: 'edit-paragraph',
+                            layout: DE.getController('EditParagraph').getView('EditParagraph').rootLayout()
+                        })
+                    }
+                    if (_.contains(_settings, 'table')) {
+                        editors.push({
+                            caption: 'Table',
+                            id: 'edit-table',
+                            layout: DE.getController('EditTable').getView('EditTable').rootLayout()
+                        })
+                    }
+                    if (_.contains(_settings, 'shape')) {
+                        editors.push({
+                            caption: 'Shape',
+                            id: 'edit-shape',
+                            layout: DE.getController('EditShape').getView('EditShape').rootLayout()
+                        })
+                    }
+                    if (_.contains(_settings, 'image')) {
+                        editors.push({
+                            caption: 'Image',
+                            id: 'edit-image',
+                            layout: DE.getController('EditImage').getView('EditImage').rootLayout()
+                        })
+                    }
+                    if (_.contains(_settings, 'chart')) {
+                        editors.push({
+                            caption: 'Chart',
+                            id: 'edit-chart',
+                            layout: DE.getController('EditChart').getView('EditChart').rootLayout()
+                        })
+                    }
+                    if (_.contains(_settings, 'hyperlink')) {
+                        editors.push({
+                            caption: 'Hyperlink',
+                            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">' +
+                                '<div class="tabs-animated-wrap">' +
+                                    '<div class="tabs"></div>' +
+                                '</div>' +
+                            '</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 container-edit">' +
+                            '<div class="view edit-root-view navbar-through">' +
+                                $layoutNavbar.prop('outerHTML') +
+                                $layoutPages.prop('outerHTML') +
+                            '</div>' +
+                        '</div>'
+                    )).on('close', function (e) {
+                        mainView.showNavbar();
+                    });
+                    mainView.hideNavbar();
+                } else {
+                    me.picker = uiApp.popover(
+                        '<div class="popover 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')
+                            }
+                        });
+                    }).on('close', function () {
+                        $overlay.off('removeClass');
+                        $overlay.removeClass('modal-overlay-visible')
+                    });
+                }
+
+                $('.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');
+            },
+
+            // API handlers
+
+            onApiFocusObject: function (objects) {
+                _settings = [];
+
+                // 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');
+                    }
+                });
+
+                // Exclude shapes if chart exist
+                if (_settings.indexOf('chart') > -1) {
+                    _settings = _.without(_settings, 'shape');
+                }
+
+                _settings = _.uniq(_settings);
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,177 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/edit/EditHyperlink'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.EditHyperlink = Backbone.Controller.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);
+                    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.asc_CHyperlink();
+                // props.asc_setType(1);
+                props.asc_setHyperlinkUrl(url);
+                props.asc_setText(_.isEmpty(display) ? url : display);
+                props.asc_setTooltip(tip);
+
+                me.api.change_Hyperlink(props);
+
+                DE.getController('EditContainer').hideModal();
+            },
+
+            onRemoveLink: function () {
+                this.api && this.api.remove_Hyperlink();
+                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\"'
+        };
+    })());
+});

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

@@ -0,0 +1,400 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/edit/EditImage'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.EditImage = Backbone.Controller.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('click',             _.bind(me.onMoveText, me));
+                $('#edit-image-overlap input').single('click',              _.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;
+
+                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();
+
+                    properties.put_Width(imgsize.get_ImageWidth());
+                    properties.put_Height(imgsize.get_ImageHeight());
+
+                    me.api.ImgApply(properties);
+                }
+            },
+
+            onRemoveImage: function () {
+                console.debug('REMOVE image!!!');
+            },
+
+            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, '');
+
+                    _.delay(function () {
+                        if (!_.isEmpty(value)) {
+                            if ((/((^https?)|(^ftp)):\/\/.+/i.test(value))) {
+                                var image = new Asc.asc_CImgProperty();
+                                image.put_ImageUrl(value);
+                                me.api.ImgApply(image);
+                                DE.getController('EditContainer').hideModal();
+                            } else {
+                                uiApp.alert(me.txtNotUrl);
+                            }
+                        } else {
+                            uiApp.alert(me.textEmptyImgUrl);
+                        }
+                    }, 300);
+                }
+            },
+
+            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')[('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\"'
+        };
+    })());
+});

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

@@ -0,0 +1,327 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/edit/EditParagraph'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.EditParagraph = Backbone.Controller.extend((function() {
+        // Private
+        var _stack = [],
+            _paragraphInfo = {},
+            _paragraphObject = undefined,
+            _styles = [],
+            _styleTumbSize,
+            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
+                    }
+                });
+            },
+
+            setApi: function (api) {
+                var me = this;
+                me.api = api;
+
+                me.api.asc_registerCallback('asc_onInitEditorStyles',   _.bind(me.onApiInitEditorStyles, me));
+                me.api.asc_registerCallback('asc_onFocusObject',        _.bind(me.onApiFocusObject, me));
+                me.api.asc_registerCallback('asc_onParaStyleName',      _.bind(me.onApiParagraphStyleChange, me));
+            },
+
+            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-space input:checkbox').single('click',            _.bind(me.onSpaceBetween, me));
+                $('#paragraph-page-break input:checkbox').single('click',       _.bind(me.onBreakBefore, me));
+                $('#paragraph-page-orphan input:checkbox').single('click',      _.bind(me.onOrphan, me));
+                $('#paragraph-page-keeptogether input:checkbox').single('click',_.bind(me.onKeepTogether, me));
+                $('#paragraph-page-keepnext input:checkbox').single('click',    _.bind(me.onKeepNext, me));
+
+                paletteBackgroundColor && paletteBackgroundColor.on('select',   _.bind(me.onBackgroundColor, me));
+
+                me.initSettings();
+            },
+
+            initSettings: function () {
+                var me = this;
+
+                if (_paragraphObject) {
+                    _paragraphInfo.spaceBefore = _paragraphObject.get_Spacing().get_Before() < 0 ? _paragraphObject.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_Spacing().get_Before());
+                    _paragraphInfo.spaceAfter  = _paragraphObject.get_Spacing().get_After() < 0 ? _paragraphObject.get_Spacing().get_After() : Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_Spacing().get_After());
+                    $('#paragraph-distance-before .item-after label').text(_paragraphInfo.spaceBefore < 0 ? 'Auto' : _paragraphInfo.spaceBefore + ' ' + metricText);
+                    $('#paragraph-distance-after .item-after label').text(_paragraphInfo.spaceAfter < 0 ? 'Auto' : _paragraphInfo.spaceAfter + ' ' + metricText);
+
+                    $('#paragraph-space input:checkbox').prop('checked', _paragraphObject.get_ContextualSpacing());
+                    $('#paragraph-page-break input:checkbox').prop('checked', _paragraphObject.get_PageBreakBefore());
+                    $('#paragraph-page-orphan input:checkbox').prop('checked', _paragraphObject.get_WidowControl());
+                    $('#paragraph-page-keeptogether input:checkbox').prop('checked', _paragraphObject.get_KeepLines());
+                    $('#paragraph-page-keepnext input:checkbox').prop('checked', _paragraphObject.get_KeepNext());
+
+
+                    // Background color
+                    var shade = _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);
+                    }
+                }
+            },
+
+            onStyleClick: function (view, e) {
+                var $item = $(e.currentTarget).find('input');
+
+                if ($item) {
+                    this.api.put_Style($item.prop('value'));
+                }
+            },
+
+            // Public
+            getStyles: function () {
+                return _styles || [];
+            },
+
+            getTumbSize: function () {
+                return _styleTumbSize || {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;
+
+                if ($button.hasClass('decrement')) {
+                    distance = Math.max(-1, --distance);
+                } else {
+                    distance = Math.min(100, ++distance);
+                }
+
+                _paragraphInfo.spaceBefore = distance;
+
+                $('#paragraph-distance-before .item-after label').text(_paragraphInfo.spaceBefore < 0 ? 'Auto' : (_paragraphInfo.spaceBefore) + ' ' + 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;
+
+                if ($button.hasClass('decrement')) {
+                    distance = Math.max(-1, --distance);
+                } else {
+                    distance = Math.min(100, ++distance);
+                }
+
+                _paragraphInfo.spaceAfter = distance;
+
+                $('#paragraph-distance-after .item-after label').text(_paragraphInfo.spaceAfter < 0 ? 'Auto' : (_paragraphInfo.spaceAfter) + ' ' + metricText);
+
+                this.api.put_LineSpacingBeforeAfter(1, (_paragraphInfo.spaceAfter < 0) ? -1 : Common.Utils.Metric.fnRecalcToMM(_paragraphInfo.spaceAfter));
+            },
+
+            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
+
+            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;
+                }
+            },
+
+            onApiInitEditorStyles: function (styles) {
+                window.styles_loaded = false;
+
+                if (styles.length < 1) {
+                    return;
+                }
+
+                _styles = [];
+
+                _styleTumbSize = {
+                    width   : styles.STYLE_THUMBNAIL_WIDTH / uiApp.device.pixelRatio,
+                    height  : styles.STYLE_THUMBNAIL_HEIGHT / uiApp.device.pixelRatio
+                };
+
+                _.each(styles.get_MergedStyles(), function(style){
+                    _styles.push({
+                        image   : style.asc_getImage(),
+                        name    : style.get_Name()
+                    });
+                });
+
+                window.styles_loaded = true;
+            },
+
+            onApiParagraphStyleChange: function(name) {
+                $('#paragraph-list input[name=paragraph-style]').val([name]);
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,562 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/edit/EditShape'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.EditShape = Backbone.Controller.extend((function() {
+        // Private
+        var _stack = [],
+            _shapeObject = 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;
+                },
+            }
+        })();
+
+        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];
+                },
+
+                sizeByValue: function (value) {
+                    var index = 0;
+                    _.each(_sizes, function (size, idx) {
+                        if (Math.abs(size - value) < 0.25) {
+                            index = idx;
+                        }
+                    });
+                    return _sizes[index];
+                }
+            }
+        })();
+
+        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('click',             _.bind(me.onMoveText, me));
+                $('#edit-shape-overlap input').single('click',              _.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();
+
+                if (_shapeObject) {
+                    if (pageId == '#edit-shape-wrap') {
+                        me._initWrapView();
+                    } else if (pageId == '#edit-shape-style' || pageId == '#edit-shape-border-color-view') {
+                        me._initStyleView();
+                    }
+                }
+            },
+
+            _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 = borderSizeTransform.sizeByValue(shapeProperties.get_stroke().get_width());
+                $('#edit-shape-bordersize input').val([borderSizeTransform.sizeByIndex(shapeProperties.get_stroke().get_width())]);
+                $('#edit-shape-bordersize .item-after').text(borderSize + ' ' + _metricText);
+
+                // Init style opacity
+                $('#edit-shape-effect input').val([shapeProperties.get_fill().transparent ? shapeProperties.get_fill().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
+                var stroke = shapeProperties.get_stroke(),
+                    strokeType = stroke.get_type();
+
+                color = 'transparent';
+
+                if (stroke && strokeType == Asc.c_oAscStrokeType.STROKE_COLOR) {
+                    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());
+                        }
+                    }
+                }
+
+                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 () {
+                console.debug('REMOVE SHAPE!!!');
+            },
+
+            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);
+            },
+
+            onReplace: function (e) {
+                var $target = $(e.currentTarget),
+                    type = $target.data('type');
+
+                this.api.ChangeShapeType(type);
+            },
+
+            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(),
+                    currentShape = _shapeObject.get_ShapeProperties(),
+                    image = new Asc.asc_CImgProperty(),
+                    shape = new Asc.asc_CShapeProperty(),
+                    stroke = new Asc.asc_CStroke(),
+                    currentColor = Common.Utils.ThemeColor.getRgbColor('000000');
+
+                value = borderSizeTransform.sizeByIndex(parseInt(value));
+
+                var currentStroke = currentShape.get_stroke();
+
+                if (currentStroke) {
+                    var currentStrokeType = currentStroke.get_type();
+
+                    if (currentStrokeType == Asc.c_oAscStrokeType.STROKE_COLOR) {
+                        currentColor = currentStroke.get_color();
+                    }
+                }
+
+                if (value < 0.01) {
+                    stroke.put_type(Asc.c_oAscStrokeType.STROKE_NONE);
+                } else {
+                    stroke.put_type(Asc.c_oAscStrokeType.STROKE_COLOR);
+                    stroke.put_color(currentColor);
+                    stroke.put_width(value * 25.4 / 72.0);
+                }
+
+                shape.put_stroke(stroke);
+                image.put_ShapeProperties(shape);
+
+                me.api.ImgApply(image);
+            },
+
+            onBorderSizeChanging: function (e) {
+                var $target = $(e.currentTarget);
+                $('#edit-shape-bordersize .item-after').text(borderSizeTransform.sizeByIndex($target.val()) + ' ' + _metricText);
+            },
+
+            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,
+                    currentShape = _shapeObject.get_ShapeProperties();
+
+                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.get_ShapeProperties();
+
+                $('#edit-shape-bordercolor .color-preview').css('background-color', ('transparent' == color) ? color : ('#' + (_.isObject(color) ? color.color : color)));
+
+                if (me.api && currentShape) {
+                    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();
+                } 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;
+            }
+        };
+    })());
+});

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

@@ -0,0 +1,650 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/edit/EditTable'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.EditTable = Backbone.Controller.extend((function() {
+        // Private
+        var _stack = [],
+            _metricText = Common.Utils.Metric.getCurrentMetricName(),
+            _tableObject = undefined,
+            _tableLook = {},
+            _cellBorders = new Asc.CBorders(),
+            _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];
+                },
+
+                sizeByValue: function (value) {
+                    var index = 0;
+                    _.each(_sizes, function (size, idx) {
+                        if (Math.abs(size - value) < 0.25) {
+                            index = idx;
+                        }
+                    });
+                    return _sizes[index];
+                }
+            }
+        })();
+
+        return {
+            models: [],
+            collections: [],
+            views: [
+                'EditTable'
+            ],
+
+            initialize: function () {
+                Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this));
+
+                this.addListeners({
+                    'EditTable': {
+                        '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('EditTable').render();
+            },
+
+            initEvents: function () {
+                var me = this;
+
+                $('#table-remove-all').single('click',                  _.bind(function(){me.api.remTable(); me._closeIfNeed()}, me));
+                $('#insert-column-left').single('click',                _.bind(function(){me.api.addColumnLeft(); me._closeIfNeed()}, me));
+                $('#insert-column-right').single('click',               _.bind(function(){me.api.addColumnRight(); me._closeIfNeed()}, me));
+                $('#insert-row-above').single('click',                  _.bind(function(){me.api.addRowAbove(); me._closeIfNeed()}, me));
+                $('#insert-row-below').single('click',                  _.bind(function(){me.api.addRowBelow(); me._closeIfNeed()}, me));
+                $('#remove-column').single('click',                     _.bind(function(){me.api.remColumn(); me._closeIfNeed()}, me));
+                $('#remove-row').single('click',                        _.bind(function(){me.api.remRow(); me._closeIfNeed()}, me));
+
+                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').single('click',             _.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').single('click', _.bind(me.onOptionRepeat, me));
+                $('#table-option-resizetofit input').single('click',    _.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').single('click',    _.bind(me.onCheckTemplateChange, me, 0));
+                $('#table-options-total-row input').single('click',     _.bind(me.onCheckTemplateChange, me, 1));
+                $('#table-options-banded-row input').single('click',    _.bind(me.onCheckTemplateChange, me, 2));
+                $('#table-options-first-column input').single('click',  _.bind(me.onCheckTemplateChange, me, 3));
+                $('#table-options-last-column input').single('click',   _.bind(me.onCheckTemplateChange, me, 4));
+                $('#table-options-banded-column input').single('click', _.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;
+
+                if (_tableObject) {
+                    if (pageId == '#edit-table-wrap') {
+                        me._initWrappView();
+                    } else if (pageId == "#edit-table-style" || pageId == '#edit-table-border-color-view') {
+                        me._initStyleView();
+                    } else if (pageId == '#edit-table-options') {
+                        me._initTableOptionsView();
+                    } else if (pageId == '#edit-table-style-options-view') {
+                        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());
+                $('#table-option-resizetofit input').prop('checked', _tableObject.get_TableLayout()==Asc.c_oAscTableLayout.AutoFit);
+
+                var margins = _tableObject.get_DefaultMargins();
+                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.sizeByIndex(_cellBorderWidth)]);
+                $('#edit-table-bordersize .item-after').text(borderSizeTransform.sizeByValue(_cellBorderWidth) + ' ' + _metricText);
+
+                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') ? 1 : 0);
+                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.asc_CPaddings();
+
+                $('#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);
+
+                properties.put_DefaultMargins(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();
+                    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);
+                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()) + ' ' + _metricText);
+            },
+
+            // 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');
+                }
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,598 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'documenteditor/mobile/app/view/edit/EditText'
+], function (core) {
+    'use strict';
+
+    DE.Controllers.EditText = Backbone.Controller.extend((function() {
+        var _fontsArray = [],
+            _stack = [],
+            _paragraphObject = undefined,
+            _fontInfo = {};
+
+        function onApiLoadFonts(fonts, select) {
+            _.each(fonts, function(font){
+                var fontId = font.asc_getFontId();
+                _fontsArray.push({
+                    id          : fontId,
+                    name        : font.asc_getFontName(),
+//                    displayValue: font.asc_getFontName(),
+                    imgidx      : font.asc_getFontThumbnail(),
+                    type        : font.asc_getFontType()
+                });
+            });
+
+            Common.NotificationCenter.trigger('fonts:load', _fontsArray, select);
+        }
+
+        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
+                    }
+                });
+            },
+
+            setApi: function (api) {
+                var me = this
+                me.api = api;
+
+                me.api.asc_registerCallback('asc_onInitEditorFonts',    _.bind(onApiLoadFonts, me));
+                me.api.asc_registerCallback('asc_onFocusObject',        _.bind(me.onApiFocusObject, me));
+                me.api.asc_registerCallback('asc_onFontFamily',         _.bind(me.onApiChangeFont, me));
+                me.api.asc_registerCallback('asc_onFontSize',           _.bind(me.onApiFontSize, me));
+                me.api.asc_registerCallback('asc_onBold',               _.bind(me.onApiBold, me));
+                me.api.asc_registerCallback('asc_onItalic',             _.bind(me.onApiItalic, me));
+                me.api.asc_registerCallback('asc_onUnderline',          _.bind(me.onApiUnderline, me));
+                me.api.asc_registerCallback('asc_onStrikeout',          _.bind(me.onApiStrikeout, me));
+                me.api.asc_registerCallback('asc_onVerticalAlign',      _.bind(me.onApiVerticalAlign, me));
+                // this.api.asc_registerCallback('asc_onCanUndo',              _.bind(this.onApiCanRevert, this, 'undo'));
+                // this.api.asc_registerCallback('asc_onCanRedo',              _.bind(this.onApiCanRevert, this, 'redo'));
+                me.api.asc_registerCallback('asc_onListType',           _.bind(me.onApiBullets, me));
+                me.api.asc_registerCallback('asc_onPrAlign',            _.bind(me.onApiParagraphAlign, me));
+                me.api.asc_registerCallback('asc_onTextColor',          _.bind(me.onApiTextColor, me));
+                me.api.asc_registerCallback('asc_onParaSpacingLine',    _.bind(me.onApiLineSpacing, me));
+                // this.api.asc_registerCallback('asc_onCanAddHyperlink',      _.bind(this.onApiCanAddHyperlink, this));
+                // this.api.asc_registerCallback('asc_onFocusObject',          _.bind(this.onApiFocusObject, this));
+                // this.api.asc_registerCallback('asc_onDocSize',              _.bind(this.onApiPageSize, this));
+                // this.api.asc_registerCallback('asc_onPaintFormatChanged',   _.bind(this.onApiStyleChange, this));
+                // this.api.asc_registerCallback('asc_onParaStyleName',        _.bind(this.onApiParagraphStyleChange, this));
+                // this.api.asc_registerCallback('asc_onEndAddShape',          _.bind(this.onApiEndAddShape, this)); //for shapes
+                // this.api.asc_registerCallback('asc_onPageOrient',           _.bind(this.onApiPageOrient, this));
+                // this.api.asc_registerCallback('asc_onLockDocumentProps',    _.bind(this.onApiLockDocumentProps, this));
+                // this.api.asc_registerCallback('asc_onUnLockDocumentProps',  _.bind(this.onApiUnLockDocumentProps, this));
+                // this.api.asc_registerCallback('asc_onLockDocumentSchema',   _.bind(this.onApiLockDocumentSchema, this));
+                // this.api.asc_registerCallback('asc_onUnLockDocumentSchema', _.bind(this.onApiUnLockDocumentSchema, this));
+                // this.api.asc_registerCallback('asc_onLockHeaderFooters',    _.bind(this.onApiLockHeaderFooters, this));
+                // this.api.asc_registerCallback('asc_onUnLockHeaderFooters',  _.bind(this.onApiUnLockHeaderFooters, this));
+                // this.api.asc_registerCallback('asc_onZoomChange',           _.bind(this.onApiZoomChange, this));
+                // this.api.asc_registerCallback('asc_onMarkerFormatChanged',  _.bind(this.onApiStartHighlight, this));
+                // this.api.asc_registerCallback('asc_onTextHighLight',        _.bind(this.onApiHighlightColor, this));
+                // this.api.asc_registerCallback('asc_onInitEditorStyles',     _.bind(this.onApiInitEditorStyles, this));
+                // this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',_.bind(this.onApiCoAuthoringDisconnect, this));
+                // Common.NotificationCenter.on('api:disconnect',              _.bind(this.onApiCoAuthoringDisconnect, this));
+                // this.api.asc_registerCallback('asc_onCanCopyCut',           _.bind(this.onApiCanCopyCut, this));
+                // this.api.asc_registerCallback('asc_onMathTypes',            _.bind(this.onMathTypes, this));
+                // this.api.asc_registerCallback('asc_onColumnsProps',         _.bind(this.onColumnsProps, this));
+                // this.api.asc_registerCallback('asc_onSectionProps',         _.bind(this.onSectionProps, this));
+            },
+
+            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(); // TODO: refactor me
+
+                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 = Common.Utils.Metric.fnRecalcFromMM(_paragraphObject.get_TextSpacing());
+                    $('#letter-spacing .item-after label').text(_fontInfo.letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName());
+
+                    // Background color
+                    var shade = _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());
+                            }
+                        }
+                    }
+
+                    $('#font-background .color-preview').css('background-color', '#' + (_.isObject(backColor) ? backColor.color : backColor));
+
+                    if (pageId == '#edit-text-background') {
+                        var palette = me.getView('EditText').paletteBackgroundColor;
+
+                        if (palette) {
+                            palette.select(backColor);
+                        }
+                    }
+                }
+            },
+
+            // Public
+
+            getFonts: function() {
+                return _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 = Math.max(-100, --spacing);
+                } else {
+                    spacing = 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) {
+                    this.api.put_TextColor(Common.Utils.ThemeColor.getRgbColor("000000"));
+                }
+            },
+
+            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()) || 'Fonts';
+                _fontInfo.name = name;
+
+                $('#font-fonts .item-title').html(name);
+            },
+
+            onApiFontSize: function(size) {
+                _fontInfo.size = size;
+                var displaySize = _fontInfo.size;
+
+                _.isUndefined(displaySize) ? displaySize = 'Auto' : displaySize = displaySize + ' ' + 'pt';
+
+                $('#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();
+
+                switch (type) {
+                    case 0:
+                        $('.dataview.bullets li[data-type=' + subtype + ']').addClass('active');
+                        break;
+                    case 1:
+                        $('.dataview.numbers li[data-type=' + subtype + ']').addClass('active');
+                        break;
+                }
+            },
+
+            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;
+
+                if (color.get_auto()) {
+                    // on auto
+                } else {
+                    var palette = me.getView('EditText').paletteTextColor,
+                        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));
+                    }
+
+                    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]);
+            },
+
+            // Helpers
+            _toggleButton: function (e) {
+                return $(e.currentTarget).toggleClass('active').hasClass('active');
+            }
+        }
+    })());
+});

apps/documenteditor/mobile/app/controller/phone/Main.js

@@ -1,93 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.controller.phone.Main', {
-    extend: 'DE.controller.Main',
-
-    requires: [
-        'Ext.Anim'
-    ],
-
-    config: {
-        refs: {
-            viewToolbar         : 'viewtoolbar',
-            searchToolbar       : 'searchtoolbar',
-            readableBtn         : '#id-tb-btn-readable',
-            searchButton        : '#id-tb-btn-search',
-            incFontSizeButton   : '#id-tb-btn-incfontsize',
-            decFontSizeButton   : '#id-tb-btn-decfontsize',
-            shareButton         : '#id-tb-btn-view-share'
-        }
-    },
-
-    launch: function() {
-        this.callParent(arguments);
-    },
-    
-    initControl: function() {
-        this.callParent(arguments);
-    },
-    
-    initApi: function() {
-        this.callParent(arguments);
-    },
-
-    setApi: function(o){
-        this.api = o;
-        var viewToolbar     = this.getViewToolbar();
-
-        viewToolbar         && viewToolbar.show();
-        this.api            && this.api.asc_enableKeyEvents(false);
-    },
-
-    setReadableMode: function(readable) {
-        var readableBtn         = this.getReadableBtn(),
-            searchButton        = this.getSearchButton(),
-            incFontSizeButton   = this.getIncFontSizeButton(),
-            decFontSizeButton   = this.getDecFontSizeButton(),
-            shareButton         = this.getShareButton();
-
-        if (readable) {
-            readableBtn && readableBtn.show();
-            searchButton && searchButton.hide();
-            incFontSizeButton && incFontSizeButton.show();
-            decFontSizeButton && decFontSizeButton.show();
-            shareButton && shareButton.hide();
-        } else {
-            readableBtn && readableBtn.hide();
-            searchButton && searchButton.show();
-            incFontSizeButton && incFontSizeButton.hide();
-            decFontSizeButton && decFontSizeButton.hide();
-            shareButton && shareButton.show();
-        }
-    }
-}); 

apps/documenteditor/mobile/app/controller/tablet/Main.js

@@ -1,99 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.controller.tablet.Main', {
-    extend: 'DE.controller.Main',
-
-    requires: [
-        'Ext.Anim'
-    ],
-
-    config: {
-        refs: {
-            editToolbar     : 'edittoolbar',
-            viewToolbar     : 'viewtoolbar',
-            searchToolbar   : 'searchtoolbar',
-            readableBtn     : '#id-tb-btn-readable'
-        },
-
-        control: {
-        }
-    },
-
-    launch: function() {
-        this.callParent(arguments);
-    },
-    
-    initControl: function() {
-        this.callParent(arguments);
-    },
-    
-    initApi: function() {
-        this.callParent(arguments);
-    },
-
-    setApi: function(o){
-        this.api = o;
-    },
-
-    setMode: function(mode){
-        var editToolbar         = this.getEditToolbar(),
-            viewToolbar         = this.getViewToolbar(),
-            searchToolbar       = this.getSearchToolbar(),
-            popClipController   = this.getApplication().getController('Common.controller.PopClip');
-
-        if (mode == 'edit') {
-            viewToolbar         && viewToolbar.hide();
-            searchToolbar       && searchToolbar.hide();
-            editToolbar         && editToolbar.show();
-            this.api            && this.api.asc_enableKeyEvents(true);
-            this.api            && this.api.asc_setViewMode(false);
-        } else {
-            editToolbar         && editToolbar.hide();
-            viewToolbar         && viewToolbar.show();
-            this.api            && this.api.asc_enableKeyEvents(false);
-            this.api            && this.api.asc_setViewMode(true);
-        }
-
-        if (popClipController) {
-            popClipController.setMode(mode);
-        }
-    },
-
-    setReadableMode: function(readable) {
-        var readableBtn = this.getReadableBtn();
-
-        if (readableBtn)
-            readable ? readableBtn.show() : readableBtn.hide();
-    }
-
-}); 

apps/documenteditor/mobile/app/controller/tablet/panel/Font.js

@@ -1,382 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.controller.tablet.panel.Font', {
-    extend: 'Ext.app.Controller',
-
-    config: {
-        refs: {
-            fontPanel           : 'fontpanel',
-            navigateView        : '#id-font-navigate',
-            fontSizeSpinner     : 'fontpanel planarspinnerfield',
-            fontView            : '#id-font-root',
-            fontNameView        : '#id-font-name',
-            fontNameButton      : '#id-btn-fontname',
-            fontButton          : '#id-tb-btn-font',
-            fontBaseToggle      : '#id-toggle-baseline',
-            fontBaseUp          : '#id-btn-baseline-up',
-            fontBaseDown        : '#id-btn-baseline-down'
-        },
-
-        control: {
-            fontPanel       : {
-                show    : 'onFontPanelShow',
-                hide    : 'onFontPanelHide'
-            },
-            navigateView    : {
-                push    : 'onNavigateViewPush',
-                pop     : 'onNavigateViewPop',
-                back    : 'onNavigateViewBack'
-            },
-            fontNameButton  : {
-                tap     : 'onFontNameButtonTap'
-            },
-            fontSizeSpinner : {
-                blur    : 'onFontSizeSpinnerBlur',
-                focus   : 'onFontSizeSpinnerFocus',
-                keyup   : 'onFontSizeSpinnerKeyUp',
-                spin    : 'onFontSizeSpinnerSpin'
-            },
-            fontNameView    : {
-                select  : 'onFontNameSelect',
-                itemtap : 'onFontNameItemTap'
-            },
-            fontBaseUp      : {
-                tap     : 'onFontBaseUpTap'
-            },
-            fontBaseDown    : {
-                tap     : 'onFontBaseDownTap'
-            }
-        },
-
-        handleApiEvent  : false
-    },
-
-    init: function() {
-    },
-
-    launch: function() {
-    },
-
-    setApi: function(o) {
-        this.api = o;
-
-        if (this.api) {
-            this.api.asc_registerCallback('asc_onFontFamily',           Ext.bind(this.onApiFontChange, this));
-            this.api.asc_registerCallback('asc_onInitEditorFonts',      Ext.bind(this.onApiLoadFonts, this)); // deprecated
-            this.api.asc_registerCallback('asc_onFontSize',             Ext.bind(this.onApiFontSize, this));
-            this.api.asc_registerCallback('asc_onVerticalAlign',        Ext.bind(this.onApiVerticalAlign, this));
-            this.api.asc_registerCallback('asc_onDocumentContentReady', Ext.bind(this.onDocumentContentReady, this));
-        }
-    },
-
-    onFontPanelShow: function(cmp) {
-        this.setHandleApiEvent(true);
-
-        // update ui data
-        this.api && this.api.UpdateInterfaceState();
-    },
-
-    onFontPanelHide: function(cmp) {
-        this.setHandleApiEvent(false);
-
-        var navigateView    = this.getNavigateView(),
-            fontSizeSpinner = this.getFontSizeSpinner();
-
-        if (fontSizeSpinner) {
-            Ext.defer(function(){
-                fontSizeSpinner.blur();
-            }, 200);
-        }
-
-        if (navigateView) {
-            navigateView.reset();
-            navigateView.addCls('plain');
-            navigateView.getNavigationBar().hide();
-
-            var activeItem = navigateView.getActiveItem(),
-                panelSize = this.getSizeById(activeItem && activeItem.id);
-
-            cmp.setSize(panelSize.width, panelSize.height);
-        }
-    },
-
-    onFontNameButtonTap: function() {
-        var navigateView = this.getNavigateView(),
-            fontNameView = this.getFontNameView();
-
-        if (navigateView) {
-            var navigationBar = navigateView.getNavigationBar();
-
-            if (navigationBar)
-                navigationBar.show();
-
-            navigateView.push(fontNameView);
-        }
-    },
-
-    onFontSizeSpinnerFocus: function() {
-        this.api && this.api.asc_enableKeyEvents(false);
-    },
-
-    onFontSizeSpinnerBlur: function(field) {
-        this.api && this.api.asc_enableKeyEvents(true);
-
-        this.getFontSizeSpinner().setValue(field.getValue());
-
-        if (this.api) {
-            this.api.put_TextPrFontSize(field.getValue());
-
-            Common.component.Analytics.trackEvent('ToolBar', 'Font Size');
-        }
-    },
-
-    onFontSizeSpinnerKeyUp: function(field, event) {
-        if (event.browserEvent.keyCode == 13 ||
-            event.browserEvent.keyCode == 10) {
-            event.stopEvent();
-            field.element.dom.blur();
-
-            if (this.api) {
-                this.api.put_TextPrFontSize(field.getValue());
-
-                Common.component.Analytics.trackEvent('ToolBar', 'Font Size');
-            }
-        }
-    },
-
-    onFontSizeSpinnerSpin: function(spin, value) {
-        if (this.api) {
-            this.api.put_TextPrFontSize(value);
-
-            Common.component.Analytics.trackEvent('ToolBar', 'Font Size');
-        }
-    },
-
-    getSizeById: function(id){
-        switch(id){
-            case 'id-font-name':    return {width: 350, height: 300};
-            default:
-            case 'id-font-root':    return {width: 440, height: 46};
-        }
-    },
-
-    toggleSegmentedButton: function(btn) {
-        var toggler = this.getFontBaseToggle();
-
-        if (toggler) {
-            var pressedButtonsNew = [];
-
-            if (btn)
-                pressedButtonsNew.push(btn);
-
-            toggler.setPressedButtons(pressedButtonsNew);
-        }
-    },
-
-//    scrollToSelectFont: function() {
-//        var fontNameView = this.getFontNameView();
-//
-//        if (fontNameView) {
-//            var el       = fontNameView.element,
-//                cls      = fontNameView.getSelectedCls(),
-//                selected = el.down('.' + cls),
-//                y;
-//
-//            if (selected) {
-//                y = selected.dom.offsetTop;
-//
-//                fontNameView.getScrollable().getScroller().scrollTo(0, y, true);
-//            }
-//        }
-//    },
-
-    onNavigateViewPush: function(cmp, view) {
-        var parentCmp = cmp.getParent(),
-            panelSize = this.getSizeById(view && view.id);
-
-        if (parentCmp) {
-            parentCmp.setSize(panelSize.width, panelSize.height);
-
-            var navigationView = this.getNavigateView();
-
-            if (navigationView){
-                navigationView.removeCls('plain');
-                navigationView.getNavigationBar().show();
-            }
-
-            var fontButton = this.getFontButton();
-
-            if (fontButton)
-                parentCmp.alignTo(fontButton);
-
-//            if (view && view.id == 'id-font-name') {
-//                this.scrollToSelectFont();
-//            }
-        }
-    },
-
-    onNavigateViewPop: function(cmp, view) {
-//        //
-    },
-
-    onNavigateViewBack: function(cmp) {
-        var parentCmp  = cmp.getParent(),
-            activeItem = cmp.getActiveItem(),
-            panelSize  = this.getSizeById(activeItem && activeItem.id);
-
-
-        if (activeItem && activeItem.id == 'id-font-root') {
-            var navigationView = this.getNavigateView();
-
-            if (navigationView) {
-                navigationView.addCls('plain');
-                navigationView.getNavigationBar().hide();
-            }
-        }
-
-        if (parentCmp) {
-            parentCmp.setSize(panelSize.width, panelSize.height);
-
-            var fontButton = this.getFontButton();
-
-            if (fontButton)
-                parentCmp.alignTo(fontButton);
-        }
-    },
-
-    onFontNameSelect: function(cmp, rec) {
-        var fontNameButton = this.getFontNameButton();
-
-        if (fontNameButton) {
-            fontNameButton.setText(rec.get('setting'));
-        }
-    },
-
-    onFontNameItemTap: function(cmp, index, item, rec) {
-        if (this.api) {
-            this.api.put_TextPrFontName(rec.get('setting'));
-
-            Common.component.Analytics.trackEvent('ToolBar', 'Font Name');
-        }
-    },
-
-    onFontBaseUpTap: function(btn) {
-        if (this.api) {
-            var toggler = this.getFontBaseToggle();
-
-            if (toggler) {
-                this.api.put_TextPrBaseline(toggler.isPressed(btn) ? 1 : 0);
-
-                Common.component.Analytics.trackEvent('ToolBar', 'Superscript');
-            }
-        }
-    },
-
-    onFontBaseDownTap: function(btn) {
-        if (this.api) {
-            var toggler = this.getFontBaseToggle();
-
-            if (toggler) {
-                this.api.put_TextPrBaseline(toggler.isPressed(btn) ? 2 : 0);
-
-                Common.component.Analytics.trackEvent('ToolBar', 'Subscript');
-            }
-        }
-    },
-
-    onDocumentContentReady: function() {
-    },
-
-    onApiFontChange: function(font) {
-        if (this.getHandleApiEvent()) {
-            var fontNameView = this.getFontNameView();
-
-            if (fontNameView) {
-                var fontName = font.get_Name(),
-                    fontRec = fontNameView.getStore().findRecord('setting', fontName);
-
-                if (fontRec) {
-                    fontNameView.select(fontRec);
-                }
-            }
-        }
-    },
-
-    onApiLoadFonts: function(fl) {
-        var fontNameView = this.getFontNameView();
-
-        if (fontNameView) {
-            var rawFontsArray = [];
-            Ext.each(fl, function(font){
-                rawFontsArray.push({
-                    setting : font.asc_getFontName(),
-                    group   : 'font'
-                });
-            });
-
-            fontNameView.getStore().setData(rawFontsArray);
-        }
-    },
-
-    onApiFontSize: function(size) {
-        if (this.getHandleApiEvent()) {
-            var fontSizeSpinner = this.getFontSizeSpinner();
-
-            if (fontSizeSpinner)
-                fontSizeSpinner.setValue(size);
-//        if (!this.flg.setFontSize) {
-////            var str_size = size + ' pt';
-//            var str_size = String(size);
-//            if (this.cmbFontSize.getValue() != str_size) {
-//                this.cmbFontSize.setValue(str_size);
-////                this.cmbFontSize.setRawValue(this.cmbFontSize.getValue() + ' pt');
-//            }
-//        }
-        }
-    },
-
-    onApiVerticalAlign: function(type) {
-        if (this.getHandleApiEvent()) {
-            switch(type) {
-                case 1:
-                    this.toggleSegmentedButton(this.getFontBaseUp());
-                    break;
-                case 2:
-                    this.toggleSegmentedButton(this.getFontBaseDown());
-                    break;
-                default:
-                    this.toggleSegmentedButton();
-            }
-        }
-    }
-});

apps/documenteditor/mobile/app/controller/tablet/panel/FontStyle.js

@@ -1,155 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.controller.tablet.panel.FontStyle', {
-    extend: 'Ext.app.Controller',
-
-    config: {
-        refs: {
-            fontStylePanel      : 'fontstylepanel',
-            fontStylesToggle    : '#id-toggle-fontstyles',
-            fontStyleBold       : '#id-btn-fontstyle-bold',
-            fontStyleItalic     : '#id-btn-fontstyle-italic',
-            fontStyleUnderline  : '#id-btn-fontstyle-underline'
-        },
-
-        control: {
-            fontStylePanel  : {
-                show    : 'onFontStyleShow',
-                hide    : 'onFontStyleHide'
-            },
-            fontStyleBold   : {
-                tap     : 'onBoldButtonTap'
-            },
-            fontStyleItalic : {
-                tap     : 'onItalicButtonTap'
-            },
-            fontStyleUnderline: {
-                tap     : 'onUnderlineButtonTap'
-            }
-        },
-
-        handleApiEvent  : false
-    },
-
-    init: function() {
-    },
-
-    launch: function() {
-    },
-
-    setApi: function(o) {
-        this.api = o;
-
-        if (this.api) {
-            this.api.asc_registerCallback('asc_onBold',         Ext.bind(this.onApiBold, this));
-            this.api.asc_registerCallback('asc_onItalic',       Ext.bind(this.onApiItalic, this));
-            this.api.asc_registerCallback('asc_onUnderline',    Ext.bind(this.onApiUnderline, this));
-        }
-    },
-
-    onFontStyleShow: function(cmp){
-        this.setHandleApiEvent(true);
-
-        // update ui data
-        this.api && this.api.UpdateInterfaceState();
-    },
-
-    onFontStyleHide: function(cmp){
-        this.setHandleApiEvent(false);
-    },
-
-    _toggleSegmentedButton: function(btn, toggle) {
-        var toggler = this.getFontStylesToggle();
-
-        if (toggler && btn) {
-            var pressedButtonsOld = toggler.getPressedButtons().slice(),
-                pressedButtonsNew = toggler.getPressedButtons(),
-                pressedIndex = pressedButtonsNew.indexOf(btn);
-
-            if (toggle) {
-                if (pressedIndex < 0)
-                    pressedButtonsNew.push(btn)
-            } else {
-                if (pressedIndex > -1)
-                    pressedButtonsNew.splice(pressedIndex, 1);
-            }
-
-//            toggler.setPressedButtons(pressedButtons);
-            toggler.updatePressedButtons(pressedButtonsNew, pressedButtonsOld);
-        }
-    },
-
-    onApiBold: function(on) {
-        if (this.getHandleApiEvent())
-            this._toggleSegmentedButton(this.getFontStyleBold(), on);
-    },
-
-    onApiItalic: function(on) {
-        if (this.getHandleApiEvent())
-            this._toggleSegmentedButton(this.getFontStyleItalic(), on);
-    },
-
-    onApiUnderline: function(on) {
-        if (this.getHandleApiEvent())
-            this._toggleSegmentedButton(this.getFontStyleUnderline(), on);
-    },
-
-    onBoldButtonTap: function(btn) {
-        var toggler = this.getFontStylesToggle();
-
-        if (toggler && this.api) {
-            this.api.put_TextPrBold(toggler.isPressed(btn));
-
-            Common.component.Analytics.trackEvent('ToolBar', 'Bold');
-        }
-    },
-
-    onItalicButtonTap: function(btn) {
-        var toggler = this.getFontStylesToggle();
-
-        if (toggler && this.api) {
-            this.api.put_TextPrItalic(toggler.isPressed(btn));
-
-            Common.component.Analytics.trackEvent('ToolBar', 'Italic');
-        }
-    },
-
-    onUnderlineButtonTap: function(btn) {
-        var toggler = this.getFontStylesToggle();
-        if (toggler && this.api) {
-            this.api.put_TextPrUnderline(toggler.isPressed(btn));
-
-            Common.component.Analytics.trackEvent('ToolBar', 'Underline');
-        }
-    }
-});

apps/documenteditor/mobile/app/controller/tablet/panel/Insert.js

@@ -1,257 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.controller.tablet.panel.Insert', {
-    extend: 'Ext.app.Controller',
-
-    config: {
-        refs: {
-            insertPanel         : 'insertpanel',
-            navigateView        : '#id-insert-navigate',
-            insertListView      : '#id-insert-root',
-            insertTableView     : '#id-insert-table-container',
-            insertPictureView   : '#id-insert-picture-container',
-            insertTableButton   : '#id-btn-insert-table',
-            tableColumnsSpinner : '#id-spinner-table-columns',
-            tableRowsSpinner    : '#id-spinner-table-rows',
-            insertImageList     : '#id-insert-picture-container'
-        },
-
-        control: {
-            insertPanel: {
-                hide            : 'onInsertPanelHide'
-            },
-            navigateView: {
-                push            : 'onNavigateViewPush',
-                pop             : 'onNavigateViewPop',
-                back            : 'onNavigateViewBack'
-            },
-            insertListView: {
-                itemsingletap   : 'onInsertListItemTap'
-            },
-            insertTableButton: {
-                tap             : 'onInsertTableButtonTap'
-            },
-            insertImageList: {
-                itemtap         : 'onInsertImageItemTap'
-            }
-        }
-    },
-
-    init: function() {
-    },
-
-    onInsertImageListShow: function(list) {
-        var me = this,
-            inputInlineMedia = document.querySelector('#id-insert-picture-inline input[type=file]'),
-            inputFloatMedia  = document.querySelector('#id-insert-picture-float input[type=file]');
-
-        var onChangeInput = function(input) {
-            if (Ext.isDefined(input)) {
-                var file = input.files[0];
-
-                if (Ext.isDefined(file)){
-                    var panel = me.getInsertPanel(),
-                        mpImg = new MegaPixImage(file);
-
-                    mpImg.imageLoadListeners.push(function() {
-                        var canvas = document.createElement('canvas'),
-                            imgProperty = new Asc.asc_CImgProperty();
-
-                        mpImg.render(canvas, { maxWidth: 1024, maxHeight: 1024 });
-                        imgProperty.put_WrappingStyle((input == inputInlineMedia) ? Asc.c_oAscWrapStyle2.Inline : Asc.c_oAscWrapStyle2.Square);
-
-                        me.api.AddImageUrl(canvas.toDataURL(), imgProperty);
-
-                        Ext.Viewport.unmask();
-                    });
-
-                    input.value = '';
-
-                    panel && panel.hide();
-
-                    Ext.Viewport.setMasked({
-                        xtype   : 'loadmask',
-                        message : me.uploadingText + '...'
-                    });
-                }
-            }
-        };
-
-        inputInlineMedia && (inputInlineMedia.onchange = Ext.bind(onChangeInput, me, [inputInlineMedia]));
-        inputFloatMedia  && (inputFloatMedia.onchange  = Ext.bind(onChangeInput, me, [inputFloatMedia]));
-    },
-
-    launch: function() {
-        var insertImageList = this.getInsertImageList();
-
-        insertImageList && insertImageList.on('show', Ext.bind(this.onInsertImageListShow, this), this, {
-                delay   : 1000,
-                single  : true
-            }
-        );
-    },
-
-    setApi: function(o) {
-        this.api = o;
-    },
-
-    onInsertPanelHide: function(cmp) {
-        var navigateView        = this.getNavigateView(),
-            tableColumnsSpinner = this.getTableColumnsSpinner(),
-            tableRowsSpinner    = this.getTableRowsSpinner();
-
-        if (navigateView) {
-            if (Ext.isDefined(navigateView.getLayout().getAnimation().getInAnimation))
-                navigateView.getLayout().getAnimation().getInAnimation().stop();
-
-            if (Ext.isDefined(navigateView.getLayout().getAnimation().getOutAnimation))
-                navigateView.getLayout().getAnimation().getOutAnimation().stop();
-
-            navigateView.reset();
-
-            var activeItem  = navigateView.getActiveItem(),
-                panelHeight = this.getHeightById(activeItem && activeItem.id);
-
-            cmp.setHeight(panelHeight);
-        }
-
-        tableColumnsSpinner && tableColumnsSpinner.setValue(tableColumnsSpinner.getMinValue());
-        tableRowsSpinner    && tableRowsSpinner.setValue(tableRowsSpinner.getMinValue());
-    },
-
-    onInsertListItemTap: function(cmp, index, target, record) {
-        var navigateView = this.getNavigateView(),
-            cmdId        = record.get('id');
-
-        if (!Ext.isEmpty(cmdId)) {
-            if (cmdId == 'id-insert-table-row') {
-                this.insertTableObject('row');
-                Common.component.Analytics.trackEvent('ToolBar', 'Insert Row');
-            } else if (cmdId == 'id-insert-table-column') {
-                this.insertTableObject('column');
-                Common.component.Analytics.trackEvent('ToolBar', 'Insert Column');
-            }
-        }
-
-        if (navigateView) {
-            var cmpId = record.get('child');
-
-            if (!Ext.isEmpty(cmpId)) {
-                var childCmp = Ext.getCmp(cmpId);
-
-                if (childCmp)
-                    navigateView.push(childCmp);
-            }
-        }
-    },
-
-    getHeightById: function(id){
-        switch(id){
-            case 'id-insert-table-container':   return 225;
-            case 'id-insert-picture-container': return 174;
-            default:
-            case 'id-insert-root':              return 283;
-        }
-    },
-
-    onNavigateViewPush: function(cmp, view) {
-        var parentCmp = cmp.getParent();
-
-        if (parentCmp)
-            parentCmp.setHeight(this.getHeightById(view && view.id));
-    },
-
-    onNavigateViewPop: function(cmp, view) {
-        //
-    },
-
-    onNavigateViewBack: function(cmp) {
-        var parentCmp  = cmp.getParent(),
-            activeItem = cmp.getActiveItem();
-
-        if (parentCmp && activeItem) {
-            parentCmp.setHeight(this.getHeightById(activeItem && activeItem.id));
-        }
-    },
-
-    onInsertTableButtonTap: function(btn) {
-        var insertPanel         = this.getInsertPanel(),
-            tableColumnsSpinner = this.getTableColumnsSpinner(),
-            tableRowsSpinner    = this.getTableRowsSpinner();
-
-        if (this.api && tableColumnsSpinner && tableRowsSpinner) {
-            this.api.put_Table(tableColumnsSpinner.getValue(), tableRowsSpinner.getValue());
-        }
-
-        if (insertPanel)
-            insertPanel.hide();
-
-        Common.component.Analytics.trackEvent('ToolBar', 'Table');
-    },
-
-    onInsertImageItemTap: function(list) {
-        if ((Ext.os.is.iOS && Ext.os.version.lt('6.0')) ||
-            (Ext.os.is.Android && Ext.os.version.lt('3.0'))) {
-            Ext.Msg.show({
-                message     : this.unsupportUploadText,
-                promptConfig: false,
-                buttons     : [
-                    {text: 'OK', itemId: 'ok', ui: 'base'}
-                ]
-            });
-        }
-    },
-
-    insertTableObject: function(type) {
-        if (this.api) {
-            var selectedElements = this.api.getSelectedElements();
-
-            if (selectedElements && selectedElements.length > 0) {
-                var elementType = selectedElements[0].get_ObjectType();
-
-                if (Asc.c_oAscTypeSelectElement.Table == elementType) {
-                    type === 'row'
-                        ? this.api.addRowBelow()
-                        : type === 'column'
-                            ? this.api.addColumnRight()
-                            : this.api.put_Table(1, 1);
-                } else {
-                    this.api.put_Table(1, 1);
-                }
-            }
-        }
-    },
-
-    uploadingText       : 'Uploading',
-    unsupportUploadText : 'Feature is not supported on this device.'
-});

apps/documenteditor/mobile/app/controller/tablet/panel/ParagraphAlignment.js

@@ -1,167 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.controller.tablet.panel.ParagraphAlignment', {
-    extend: 'Ext.app.Controller',
-
-    config: {
-        refs: {
-            paraAlignPanel          : 'paragraphalignmentpanel',
-            paraAlignsToggle        : '#id-toggle-paragraphalignment',
-            paragraphAlignmentButton: '#id-tb-btn-align',
-            paraAlignLeft           : '#id-btn-paragraphalignment-left',
-            paraAlignCenter         : '#id-btn-paragraphalignment-center',
-            paraAlignRight          : '#id-btn-paragraphalignment-right',
-            paraAlignFill           : '#id-btn-paragraphalignment-fill'
-        },
-
-        control: {
-            paraAlignPanel  : {
-                show    : 'onParaAlignPanelShow',
-                hide    : 'onParaAlignPanelHide'
-            },
-            paraAlignLeft   : {
-                tap     : 'onParaAlignLeftTap'
-            },
-            paraAlignCenter : {
-                tap     : 'onParaAlignCenterTap'
-            },
-            paraAlignRight  : {
-                tap     : 'onParaAlignRightTap'
-            },
-            paraAlignFill   : {
-                tap     : 'onParaAlignFillTap'
-            }
-        },
-
-        handleApiEvent  : false
-    },
-
-    init: function() {
-    },
-
-    launch: function() {
-    },
-
-    onParaAlignPanelShow: function(cmp) {
-        this.setHandleApiEvent(true);
-
-        // update ui data
-        this.api && this.api.UpdateInterfaceState();
-    },
-
-    onParaAlignPanelHide: function(cmp) {
-        this.setHandleApiEvent(false);
-    },
-
-    setApi: function(o) {
-        this.api = o;
-
-        if (this.api) {
-            this.api.asc_registerCallback('asc_onPrAlign', Ext.bind(this.onApiParagraphAlign, this));
-        }
-    },
-
-    onParaAlignLeftTap: function(btn) {
-        if (this.api) {
-            this.api.put_PrAlign(1);
-
-            Common.component.Analytics.trackEvent('ToolBar', 'Align');
-        }
-    },
-
-    onParaAlignCenterTap: function(btn) {
-        if (this.api) {
-            this.api.put_PrAlign(2);
-
-            Common.component.Analytics.trackEvent('ToolBar', 'Align');
-        }
-    },
-
-    onParaAlignRightTap: function(btn) {
-        if (this.api) {
-            this.api.put_PrAlign(0);
-
-            Common.component.Analytics.trackEvent('ToolBar', 'Align');
-        }
-    },
-
-    onParaAlignFillTap: function(btn) {
-        if (this.api) {
-            this.api.put_PrAlign(3);
-
-            Common.component.Analytics.trackEvent('ToolBar', 'Align');
-        }
-    },
-
-    toggleSegmentedButton: function(btn) {
-        var toggler = this.getParaAlignsToggle();
-
-        if (toggler) {
-            var pressedButtonsNew = [];
-
-            if (btn)
-                pressedButtonsNew.push(btn);
-
-            toggler.setPressedButtons(pressedButtonsNew);
-        }
-    },
-
-    onApiParagraphAlign: function(v) {
-        var paragraphAlignmentButton = this.getParagraphAlignmentButton();
-
-        if (paragraphAlignmentButton && Ext.isDefined(v)) {
-            switch(v) {
-                case 0: paragraphAlignmentButton.setIconCls('align-right');  break;
-                case 1: paragraphAlignmentButton.setIconCls('align-left');   break;
-                case 2: paragraphAlignmentButton.setIconCls('align-center'); break;
-                default:
-                case 3: paragraphAlignmentButton.setIconCls('align-fill');
-            }
-        }
-
-        if (this.getHandleApiEvent()) {
-            if (!Ext.isDefined(v)) {
-                this.toggleSegmentedButton();
-                return;
-            }
-
-            switch(v) {
-                case 0: this.toggleSegmentedButton(this.getParaAlignRight());  break;
-                case 1: this.toggleSegmentedButton(this.getParaAlignLeft());   break;
-                case 2: this.toggleSegmentedButton(this.getParaAlignCenter()); break;
-                default:
-                case 3: this.toggleSegmentedButton(this.getParaAlignFill());
-            }
-        }
-    }
-});

apps/documenteditor/mobile/app/controller/tablet/panel/Spacing.js

@@ -1,203 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.controller.tablet.panel.Spacing', {
-    extend: 'Ext.app.Controller',
-
-    config: {
-        refs: {
-            spacingPanel        : 'spacingpanel',
-            navigateView        : '#id-spacing-navigate',
-            spacingListView     : '#id-spacing-root',
-            spacingValueListView: '#id-spacing-linespacing'
-        },
-
-        control: {
-            spacingPanel: {
-                show            : 'onSpacingPanelShow',
-                hide            : 'onSpacingPanelHide'
-            },
-            navigateView: {
-                push            : 'onSpacingListViewPush',
-                pop             : 'onSpacingListViewPop',
-                back            : 'onSpacingListViewBack'
-            },
-            spacingListView: {
-                itemsingletap   : 'onSpacingListItemTap'
-            },
-            spacingValueListView: {
-                itemsingletap   : 'onSpacingValueListItemTap'
-            }
-        },
-
-        handleApiEvent  : false
-    },
-
-    init: function() {
-    },
-
-    launch: function() {
-    },
-
-    setApi: function(o) {
-        this.api = o;
-
-        if (this.api) {
-            this.api.asc_registerCallback('asc_onParaSpacingLine', Ext.bind(this.onApiLineSpacing, this));
-        }
-    },
-
-    onSpacingPanelShow: function(cmp) {
-        this.setHandleApiEvent(true);
-
-        // update ui data
-        this.api && this.api.UpdateInterfaceState();
-    },
-
-    onSpacingPanelHide: function(cmp) {
-        this.setHandleApiEvent(false);
-
-        var navigateView = this.getNavigateView();
-
-        if (navigateView) {
-            if (Ext.isDefined(navigateView.getLayout().getAnimation().getInAnimation))
-                navigateView.getLayout().getAnimation().getInAnimation().stop();
-
-            if (Ext.isDefined(navigateView.getLayout().getAnimation().getOutAnimation))
-                navigateView.getLayout().getAnimation().getOutAnimation().stop();
-
-            navigateView.reset();
-
-            var activeItem  = navigateView.getActiveItem(),
-                panelHeight = this.getHeightById(activeItem && activeItem.id);
-
-            cmp.setHeight(panelHeight);
-        }
-    },
-
-    onSpacingListItemTap: function(cmp, index, target, record) {
-        var navigateView = this.getNavigateView(),
-            cmdId        = record.get('id');
-
-        if (!Ext.isEmpty(cmdId)) {
-            if (cmdId == 'id-linespacing-increaseindent') {
-                this.api && this.api.IncreaseIndent();
-                Common.component.Analytics.trackEvent('ToolBar', 'Indent');
-            } else if (cmdId == 'id-linespacing-decrementindent') {
-                this.api && this.api.DecreaseIndent();
-                Common.component.Analytics.trackEvent('ToolBar', 'Indent');
-            }
-        }
-
-        if (navigateView) {
-            var cmpId = record.get('child');
-
-            if (!Ext.isEmpty(cmpId)) {
-                var childCmp = Ext.getCmp(cmpId);
-
-                if (childCmp)
-                    navigateView.push(childCmp);
-            }
-        }
-    },
-
-    onSpacingValueListItemTap: function(cmp, index, target, record) {
-        var spacingVal      = parseFloat(record.get('setting')),
-            LINERULE_AUTO   = 1;
-
-        this.api && this.api.put_PrLineSpacing(LINERULE_AUTO, spacingVal);
-
-        Common.component.Analytics.trackEvent('ToolBar', 'Line Spacing');
-    },
-
-    getHeightById: function(id){
-        switch(id){
-            case 'id-spacing-linespacing':  return 360;
-            default:
-            case 'id-spacing-root':         return 235;
-        }
-    },
-
-    onSpacingListViewPush: function(cmp, view) {
-        var parentCmp = cmp.getParent();
-
-        if (parentCmp)
-            parentCmp.setHeight(this.getHeightById(view.id));
-    },
-
-    onSpacingListViewPop: function(cmp, view) {
-        //
-    },
-
-    onSpacingListViewBack: function(cmp) {
-        var parentCmp = cmp.getParent(),
-            activeItem = cmp.getActiveItem();
-
-        if (parentCmp && activeItem) {
-            parentCmp.setHeight(this.getHeightById(activeItem && activeItem.id));
-        }
-    },
-
-    onApiLineSpacing: function(info) {
-        if (this.getHandleApiEvent()) {
-            if (Ext.isDefined(info)) {
-                var spacingValueListView = this.getSpacingValueListView();
-
-                if (spacingValueListView) {
-                    if (info.get_Line() === null ||
-                        info.get_LineRule() === null ||
-                        info.get_LineRule() != 1) {
-
-                        spacingValueListView.deselectAll();
-                        return;
-                    }
-
-                    var line = info.get_Line();
-                    if (Math.abs(line - 1.0) < 0.0001)
-                        spacingValueListView.select(0);
-                    else if (Math.abs(line - 1.15) < 0.0001)
-                        spacingValueListView.select(1);
-                    else if (Math.abs(line - 1.5) < 0.0001)
-                        spacingValueListView.select(2);
-                    else if (Math.abs(line - 2.0) < 0.0001)
-                        spacingValueListView.select(3);
-                    else if (Math.abs(line - 2.5) < 0.0001)
-                        spacingValueListView.select(4);
-                    else if (Math.abs(line - 3.0) < 0.0001)
-                        spacingValueListView.select(5);
-                    else
-                        spacingValueListView.deselectAll();
-                }
-            }
-        }
-    }
-});

apps/documenteditor/mobile/app/controller/tablet/panel/Style.js

@@ -1,185 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.controller.tablet.panel.Style', {
-    extend: 'Ext.app.Controller',
-
-    config: {
-        refs: {
-            listStylePanel      : 'liststylepanel',
-            navigateView        : '#id-liststyle-navigate',
-            listStyleView       : '#id-liststyle-root',
-            bulletsListView     : '#id-liststyle-bullets',
-            numberingListView   : '#id-liststyle-numbering',
-            outlineListView     : '#id-liststyle-outline',
-            bulletsList         : '#id-liststyle-bullets dataview',
-            numberingList       : '#id-liststyle-numbering dataview',
-            outlineList         : '#id-liststyle-outline dataview'
-        },
-
-        control: {
-            listStylePanel: {
-                show            : 'onListStylePanelShow',
-                hide            : 'onListStylePanelHide'
-            },
-            navigateView: {
-                push            : 'onListStyleViewPush',
-                pop             : 'onListStyleViewPop',
-                back            : 'onListStyleViewBack'
-            },
-            listStyleView: {
-                itemsingletap   : 'onListStyleItemTap'
-            },
-            bulletsList: {
-                itemsingletap   : 'onCommonListItemTap'
-            },
-            numberingList: {
-                itemsingletap   : 'onCommonListItemTap'
-            },
-            outlineList: {
-                itemsingletap   : 'onCommonListItemTap'
-            }
-        },
-
-        handleApiEvent  : false
-    },
-
-    init: function() {
-    },
-
-    launch: function() {
-    },
-
-    setApi: function(o) {
-        this.api = o;
-    },
-
-    onListStylePanelShow: function(cmp) {
-        this.setHandleApiEvent(true);
-
-        // update ui data
-        this.api && this.api.UpdateInterfaceState();
-    },
-
-    onListStylePanelHide: function(cmp) {
-        this.setHandleApiEvent(false);
-
-        var navigateView = this.getNavigateView();
-
-        if (navigateView) {
-            if (Ext.isDefined(navigateView.getLayout().getAnimation().getInAnimation))
-                navigateView.getLayout().getAnimation().getInAnimation().stop();
-
-            if (Ext.isDefined(navigateView.getLayout().getAnimation().getOutAnimation))
-                navigateView.getLayout().getAnimation().getOutAnimation().stop();
-
-            navigateView.reset();
-
-            var activeItem  = navigateView.getActiveItem(),
-                panelHeight = this.getHeightById(activeItem && activeItem.id);
-
-            cmp.setHeight(panelHeight);
-        }
-    },
-
-    onListStyleItemTap: function(cmp, index, target, record) {
-        var navigateView = this.getNavigateView(),
-            cmdId        = record.get('id');
-
-        if (!Ext.isEmpty(cmdId)) {
-            if (cmdId == 'id-list-indent-increment') {
-                this.onIncrementIndentButton();
-            } else if (cmdId == 'id-list-indent-decrement') {
-                this.onDecrementIndentButton();
-            }
-        }
-
-        if (navigateView) {
-            var childId = record.get('child');
-
-            if (!Ext.isEmpty(childId)) {
-                var childCmp = Ext.getCmp(childId);
-
-                if (childCmp)
-                    navigateView.push(childCmp);
-            }
-        }
-    },
-
-    getHeightById: function(id){
-        switch(id){
-            case 'id-liststyle-bullets':
-            case 'id-liststyle-numbering':  return 225;
-            case 'id-liststyle-outline':    return 150;
-            default:
-            case 'id-liststyle-root':       return 328;
-        }
-    },
-
-    onListStyleViewPush: function(cmp, view) {
-        var parentCmp = cmp.getParent();
-
-        if (parentCmp)
-            parentCmp.setHeight(this.getHeightById(view.id));
-    },
-
-    onListStyleViewPop: function(cmp, view) {
-        //
-    },
-
-    onListStyleViewBack: function(cmp) {
-        var parentCmp = cmp.getParent(),
-            activeItem = cmp.getActiveItem();
-
-        if (parentCmp && activeItem) {
-            parentCmp.setHeight(this.getHeightById(activeItem && activeItem.id));
-        }
-    },
-
-    onCommonListItemTap: function(view, index, target, record){
-        this.api && this.api.put_ListType(parseInt(record.get('type')), parseInt(record.get('subtype')));
-
-        Common.component.Analytics.trackEvent('ToolBar', 'List Type');
-    },
-
-    onIncrementIndentButton: function() {
-        this.api && this.api.IncreaseIndent();
-
-        Common.component.Analytics.trackEvent('ToolBar', 'Indent');
-    },
-
-    onDecrementIndentButton: function() {
-        this.api && this.api.DecreaseIndent();
-
-        Common.component.Analytics.trackEvent('ToolBar', 'Indent');
-    }
-});

apps/documenteditor/mobile/app/controller/tablet/panel/TextColor.js

@@ -1,316 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.controller.tablet.panel.TextColor', {
-    extend: 'Ext.app.Controller',
-
-    config: {
-        refs: {
-            textColorPanel      : 'textcolorsettingspanel',
-            navigateView        : '#id-textcolor-navigate',
-            textColorView       : '#id-textcolor-root',
-            highlightColorList  : '#id-textcolor-highlight dataview',
-            textColorList       : '#id-textcolor-text dataview',
-            noFillColorButton   : '#id-btn-highlight-none'
-
-        },
-
-        control: {
-            textColorPanel      : {
-                show        : 'onTextColorPanelShow',
-                hide        : 'onTextColorPanelHide'
-            },
-            navigateView        : {
-                push        : 'onNavigateViewPush',
-                pop         : 'onNavigateViewPop',
-                back        : 'onNavigateViewBack'
-            },
-            textColorView       : {
-                itemsingletap: 'onTextColorItemTap'
-            },
-            highlightColorList: {
-                itemsingletap: 'onHighlightListItemTap'
-            },
-            noFillColorButton   : {
-                tap         : 'onNoFillColorTap'
-            },
-            textColorList   : {
-                itemsingletap: 'onTextColorListItemTap'
-            }
-        },
-
-        handleApiEvent  : false
-    },
-
-    init: function() {
-    },
-
-    launch: function() {
-    },
-
-    setApi: function(o) {
-        this.api = o;
-
-        if (this.api) {
-            this.api.asc_registerCallback('asc_onTextColor',        Ext.bind(this.onApiTextColor, this));
-            this.api.asc_registerCallback('asc_onTextHighLight',    Ext.bind(this.onApiHighlightColor, this));
-        }
-    },
-
-    onTextColorPanelShow: function(cmp) {
-        this.setHandleApiEvent(true);
-
-        // update ui data
-        this.api && this.api.UpdateInterfaceState();
-    },
-
-    onTextColorPanelHide: function(cmp) {
-        this.setHandleApiEvent(false);
-
-        var navigateView = this.getNavigateView();
-
-        if (navigateView) {
-            if (Ext.isDefined(navigateView.getLayout().getAnimation().getInAnimation))
-                navigateView.getLayout().getAnimation().getInAnimation().stop();
-
-            if (Ext.isDefined(navigateView.getLayout().getAnimation().getOutAnimation))
-                navigateView.getLayout().getAnimation().getOutAnimation().stop();
-
-            navigateView.reset();
-
-            var activeItem  = navigateView.getActiveItem(),
-                panelHeight = this.getHeightById(activeItem && activeItem.id);
-
-            cmp.setHeight(panelHeight);
-        }
-    },
-
-    onTextColorItemTap: function(cmp, index, target, record) {
-        var navigateView = this.getNavigateView();
-
-        if (navigateView) {
-            var cmpId = record.get('child');
-
-            if (!Ext.isEmpty(cmpId)) {
-                    var childCmp = Ext.getCmp(cmpId);
-
-                if (childCmp)
-                    navigateView.push(childCmp);
-            }
-        }
-    },
-
-    onHighlightListItemTap: function(cmp, index, target, record) {
-        var noFillColorButton   = this.getNoFillColorButton(),
-            highlightColorList  = this.getHighlightColorList();
-
-        if (noFillColorButton && highlightColorList) {
-            noFillColorButton.removeCls('x-button-pressing pressed');
-            highlightColorList.select(record);
-
-            var color = record.get('color'),
-                r = color[0] + color[1],
-                g = color[2] + color[3],
-                b = color[4] + color[5];
-
-            this.api && this.api.SetMarkerFormat(true, true, parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));
-
-            Common.component.Analytics.trackEvent('ToolBar', 'Highlight Color');
-        }
-    },
-
-    onNoFillColorTap: function(btn){
-        var noFillColorButton   = this.getNoFillColorButton(),
-            highlightColorList  = this.getHighlightColorList();
-
-        if (noFillColorButton && highlightColorList) {
-            if (!btn.element.hasCls('x-button-pressing pressed')) {
-                highlightColorList.deselectAll();
-                noFillColorButton.addCls('x-button-pressing pressed');
-
-                this.api && this.api.SetMarkerFormat(true, false);
-
-                Common.component.Analytics.trackEvent('ToolBar', 'Highlight Color');
-            }
-        }
-    },
-
-    onTextColorListItemTap: function(cmp, index, target, record) {
-        var textColorList = this.getTextColorList();
-
-        if (textColorList) {
-            textColorList.select(record);
-
-            var color = record.get('color'),
-                ascColor = new Asc.asc_CColor();
-
-            ascColor.put_r(parseInt((color[0] + color[1]), 16));
-            ascColor.put_g(parseInt((color[2] + color[3]), 16));
-            ascColor.put_b(parseInt((color[4] + color[5]), 16));
-
-            this.api && this.api.put_TextColor(ascColor);
-
-            Common.component.Analytics.trackEvent('ToolBar', 'Text Color');
-        }
-    },
-
-    scrollToSelected: function(view) {
-        if (view && view.isXType('dataview')) {
-            var el       = view.element,
-                cls      = view.getSelectedCls(),
-                selected = el.down('.' + cls),
-                y;
-
-            if (selected) {
-                y = selected.dom.offsetTop;
-
-                Ext.defer(function(){
-                    var scroller = view.getScrollable().getScroller().getTranslatable()._element;
-
-                    if (scroller && y > scroller.getHeight() - view.element.getHeight())
-                        y = scroller.getHeight() - view.element.getHeight();
-
-                    view.getScrollable().getScroller().scrollTo(0, y, true)
-                }, 500);
-            }
-        }
-    },
-
-    animateSetHeight: function(cmp, height){
-        if (Ext.isDefined(cmp)){
-            cmp.setHeight(height);
-//            Ext.Animator.run({
-//                element: cmp.element,
-//                preserveEndState: true,
-//                to: {
-//                    height: height
-//                },
-//                from: {
-//                    height: cmp.element.getHeight()
-//                }
-//            });
-        }
-    },
-
-    getHeightById: function(id){
-        switch(id){
-            case 'id-textcolor-root':       return 172;
-            case 'id-textcolor-highlight':  return 326;
-            default:
-            case 'id-textcolor-text':       return 336;
-        }
-    },
-
-    onNavigateViewPush: function(cmp, view) {
-        this.animateSetHeight(cmp.getParent(), this.getHeightById(view.id));
-
-        if (view.id == 'id-textcolor-highlight')
-            this.scrollToSelected(this.getHighlightColorList());
-        else if (view.id == 'id-textcolor-text')
-            this.scrollToSelected(this.getTextColorList());
-    },
-
-    onNavigateViewPop: function(cmp, view) {
-        //
-    },
-
-    onNavigateViewBack: function(cmp) {
-        var parentCmp = cmp.getParent(),
-            activeItem = cmp.getActiveItem();
-
-        if (parentCmp && activeItem) {
-            this.animateSetHeight(parentCmp, this.getHeightById(activeItem && activeItem.id));
-        }
-    },
-
-    onApiTextColor: function(color) {
-        if (this.getHandleApiEvent() && Ext.isDefined(color)) {
-            var textColorList = this.getTextColorList();
-
-            if (textColorList) {
-                var colorToHex = function(r, g, b) {
-                    var r = r.toString(16),
-                        g = g.toString(16),
-                        b = b.toString(16);
-
-                    if (r.length == 1) r = '0' + r;
-                    if (g.length == 1) g = '0' + g;
-                    if (b.length == 1) b = '0' + b;
-
-                    return (r + g + b).toUpperCase();
-                };
-
-                var hexColor = colorToHex(color.get_r(), color.get_g(), color.get_b()),
-                    recColor = textColorList.getStore().findRecord('color', hexColor);
-
-                if (recColor) {
-                    textColorList.select(recColor);
-                } else {
-                    textColorList.deselectAll();
-                }
-            }
-        }
-    },
-
-    onApiHighlightColor: function(color) {
-        if (this.getHandleApiEvent() && Ext.isDefined(color)) {
-            var textPara            = this.api.get_TextProps().get_TextPr(),
-                highlightColorList  = this.getHighlightColorList(),
-                noFillColorButton   = this.getNoFillColorButton();
-
-            var pressNoColor = function() {
-                highlightColorList.deselectAll();
-                noFillColorButton.addCls('x-button-pressing pressed');
-            };
-
-            if (textPara) {
-                color = textPara.get_HighLight();
-                if (color == -1) {
-                    pressNoColor();
-                } else {
-                    var hexColor = color.get_hex().toUpperCase();
-
-                    if (highlightColorList) {
-                        var recColor = highlightColorList.getStore().findRecord('color', hexColor);
-
-                        if (recColor) {
-                            noFillColorButton.removeCls('x-button-pressing pressed');
-                            highlightColorList.select(recColor);
-                        } else {
-                            pressNoColor();
-                        }
-                    }
-                }
-            }
-        }
-    }
-});

apps/documenteditor/mobile/app/controller/toolbar/Edit.js

@@ -1,322 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.controller.toolbar.Edit', {
-    extend: 'Ext.app.Controller',
-
-    requires: ([
-        'Ext.MessageBox',
-        'Ext.util.Point',
-        'Ext.util.Region',
-        'DE.view.tablet.panel.Font',
-        'DE.view.tablet.panel.FontStyle',
-        'DE.view.tablet.panel.Insert',
-        'DE.view.tablet.panel.ListStyle',
-        'DE.view.tablet.panel.ParagraphAlignment',
-        'DE.view.tablet.panel.Spacing',
-        'DE.view.tablet.panel.TextColor'
-    ]),
-
-    config: {
-        refs: {
-            doneButton              : '#id-tb-btn-done',
-            saveButton              : '#id-tb-btn-save',
-            undoButton              : '#id-tb-btn-undo',
-            fontButton              : '#id-tb-btn-font',
-            fontStyleButton         : '#id-tb-btn-style',
-            textColorButton         : '#id-tb-btn-color',
-            paragraphAlignmentButton: '#id-tb-btn-align',
-            listStyleButton         : '#id-tb-btn-liststyle',
-            paragraphButton         : '#id-tb-btn-paragraph',
-            tableButton             : '#id-tb-btn-table',
-            shareButton             : '#id-tb-btn-share',
-            textColorPanel          : '#id-panel-text-color',
-            paragraphPanel          : '#id-panel-spacing',
-            paragraphAlignmentPanel : '#id-panel-paragraph-alignment',
-            fontStylePanel          : '#id-panel-font-style',
-            listStylePanel          : '#id-panel-liststyle',
-            insertPanel             : '#id-panel-insert',
-            fontPanel               : '#id-panel-font'
-        },
-
-        control: {
-            doneButton: {
-                tap     : 'onTapDone'
-            },
-            saveButton: {
-                tap     : 'onTapSave'
-            },
-            undoButton: {
-                tap     : 'onTapUndo'
-            },
-            fontButton: {
-                tap     : 'onTapFont'
-            },
-            fontStyleButton: {
-                tap     : 'onTapFontStyle'
-            },
-            textColorButton: {
-                tap     : 'onTapTextColor'
-            },
-            paragraphAlignmentButton: {
-                tap     : 'onTabParagraphAlignment'
-            },
-            listStyleButton: {
-                tap     : 'onTapListStyle'
-            },
-            paragraphButton: {
-                tap     : 'onTapParagraphButton'
-            },
-            tableButton: {
-                tap     : 'onTapTable'
-            },
-            shareButton: {
-                tap     : 'onTapShare'
-            }
-        }
-    },
-
-    launch: function() {
-        this.callParent(arguments);
-
-        Ext.getCmp('id-conteiner-document').on('resize', this.onEditorResize, this);
-        var toolbarButtons = Ext.ComponentQuery.query('edittoolbar > button, edittoolbar > toolbar > button');
-
-        Ext.each(Ext.ComponentQuery.query('commonpopoverpanel'), function(panel) {
-            var modal = panel.getModal();
-
-            if (modal) {
-                modal.on('tap', function(mask, event) {
-                    Ext.each(toolbarButtons, function(button) {
-                        if (button !== panel.alignByCmp) {
-                            var mousePoint = Ext.util.Point.fromEvent(event),
-                                buttonRect = Ext.util.Region.from(button.element.getPageBox());
-
-                            if (!buttonRect.isOutOfBound(mousePoint)) {
-                                button.fireEvent('tap', button, event);
-                            }
-                        }
-                    }, this);
-                }, this);
-            }
-        }, this);
-
-        if (Ext.os.is.iOS) {
-            Ext.each(Ext.ComponentQuery.query('button'), function(button) {
-                button.element.dom.ontouchstart = Ext.emptyFn();
-                button.element.dom.ontouchmove = Ext.emptyFn();
-                button.element.dom.ontouchend = Ext.emptyFn();
-            }, this);
-
-            Ext.each(Ext.ComponentQuery.query('toolbar'), function(toolbar) {
-                var preventFn = function(e){
-                    e.preventDefault();
-                };
-
-                toolbar.element.dom.ontouchstart = preventFn;
-                toolbar.element.dom.ontouchmove = preventFn;
-                toolbar.element.dom.ontouchend = preventFn;
-            }, this);
-        }
-
-        Common.Gateway.on('init', Ext.bind(this.loadConfig, this));
-    },
-
-    initControl: function() {
-        this.callParent(arguments);
-    },
-
-    initApi: function() {
-        //
-    },
-
-    setApi: function(o){
-        this.api = o;
-
-        if (this.api) {
-            this.api.asc_registerCallback('asc_onCanUndo',                  Ext.bind(this.onApiCanUndo, this));
-            this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',    Ext.bind(this.onCoAuthoringDisconnect, this));
-            this.api.asc_registerCallback('asc_onDocumentModifiedChanged',  Ext.bind(this.onApiDocumentModified, this));
-            this.api.asc_registerCallback('asc_onDocumentCanSaveChanged',   Ext.bind(this.onApiDocumentCanSaveChanged, this));
-        }
-    },
-
-    loadConfig: function(data) {
-        var doneButton = this.getDoneButton();
-
-        if (doneButton && data && data.config && data.config.canBackToFolder !== false &&
-            data.config.customization && data.config.customization.goback && data.config.customization.goback.url){
-            this.gobackUrl = data.config.customization.goback.url;
-            doneButton.show();
-        }
-    },
-
-    onApiCanUndo: function(can) {
-        var undoButton = this.getUndoButton();
-        undoButton && undoButton.setDisabled(!can);
-    },
-
-    onCoAuthoringDisconnect: function() {
-        Ext.each(Ext.ComponentQuery.query('commonpopoverpanel'), function(panel) {
-            panel.hide();
-        });
-
-        Ext.each(Ext.ComponentQuery.query('edittoolbar > button, edittoolbar > toolbar > button'), function(btn) {
-            btn.removeCls('x-button-pressing');
-            btn.disable();
-        });
-
-        var shareButton = this.getShareButton();
-        shareButton && shareButton.enable();
-    },
-
-    onApiDocumentModified: function() {
-        var isModified = this.api.asc_isDocumentCanSave();
-        if (this.isDocModified !== isModified) {
-            if (this.getSaveButton()) {
-                this.getSaveButton().setDisabled(!isModified);
-            }
-
-            Common.Gateway.setDocumentModified(isModified);
-            this.isDocModified = isModified;
-        }
-    },
-
-    onApiDocumentCanSaveChanged: function (isCanSave) {
-        if (this.getSaveButton()) {
-            this.getSaveButton().setDisabled(!isCanSave);
-        }
-    },
-
-    showToolbarPanel: function(panel, button){
-        if (panel && button){
-            panel.on('hide', Ext.bind(function(){
-                button.removeCls('x-button-pressing');
-            }, this), this, {single: true});
-
-            button.addCls('x-button-pressing');
-
-            Ext.each(Ext.ComponentQuery.query('popclip'), function(cmp) {
-                cmp.hide(true);
-            }, this);
-
-            panel.alignByCmp = button;
-            panel.setLeft(0);
-            panel.setTop(0);
-            panel.showBy(button);
-        }
-    },
-
-    onTapDone: function() {
-        var me = this;
-        if (this.api.isDocumentModified()) {
-            Ext.Msg.show({
-                title       : this.dlgLeaveTitleText,
-                message     : this.dlgLeaveMsgText,
-                buttons     : [
-                    {text: this.leaveButtonText, itemId: 'cancel',  ui: 'base'},
-                    {text: this.stayButtonText,  itemId: 'ok',      ui: 'base-blue'}
-                ],
-                promptConfig: false,
-                scope       : this,
-                fn          : function(button) {
-                    if (button == 'cancel') {
-                        me.goBack();
-                    }
-                }
-            });
-        } else {
-            me.goBack();
-        }
-    },
-
-    goBack: function() {
-        if (this.gobackUrl) window.parent.location.href = this.gobackUrl;
-    },
-
-    onTapSave: function() {
-        this.api && this.api.asc_Save();
-        this.getSaveButton().setDisabled(true);
-
-        Common.component.Analytics.trackEvent('ToolBar', 'Save');
-    },
-
-    onTapUndo: function() {
-        this.api && this.api.Undo();
-        Common.component.Analytics.trackEvent('ToolBar', 'Undo');
-    },
-
-    onTapShare: function() {
-        this.api && this.api.asc_Print();
-        Common.component.Analytics.trackEvent('ToolBar', 'Share');
-    },
-
-    onTapFont: function() {
-        this.showToolbarPanel(this.getFontPanel(), this.getFontButton());
-    },
-
-    onTapFontStyle: function() {
-        this.showToolbarPanel(this.getFontStylePanel(), this.getFontStyleButton());
-    },
-
-    onTapTextColor: function() {
-        this.showToolbarPanel(this.getTextColorPanel(), this.getTextColorButton());
-    },
-
-    onTabParagraphAlignment: function() {
-        this.showToolbarPanel(this.getParagraphAlignmentPanel(), this.getParagraphAlignmentButton());
-    },
-
-    onTapListStyle: function() {
-        this.showToolbarPanel(this.getListStylePanel(), this.getListStyleButton());
-    },
-
-    onTapParagraphButton: function() {
-        this.showToolbarPanel(this.getParagraphPanel(), this.getParagraphButton());
-    },
-
-    onTapTable: function() {
-        this.showToolbarPanel(this.getInsertPanel(), this.getTableButton());
-    },
-
-    onEditorResize: function(cmp) {
-        var overlayPanels = Ext.ComponentQuery.query('commonpopoverpanel');
-        Ext.each(overlayPanels, function(panel){
-            panel.hide();
-        });
-    },
-
-    dlgLeaveTitleText   : 'You leave the application',
-    dlgLeaveMsgText     : 'You have unsaved changes in this document. Click \'Stay on this Page\' then \'Save\' to save them. Click \'Leave this Page\' to discard all the unsaved changes.',
-    leaveButtonText     : 'Leave this Page',
-    stayButtonText      : 'Stay on this Page'
-});

apps/documenteditor/mobile/app/controller/toolbar/View.js

@@ -1,399 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.controller.toolbar.View', {
-    extend: 'Ext.app.Controller',
-
-    config: {
-        refs: {
-            viewToolbar         : 'viewtoolbar',
-            searchToolbar       : 'searchtoolbar',
-            doneButton          : '#id-tb-btn-view-done',
-            editModeButton      : '#id-tb-btn-editmode',
-            readModeButton      : '#id-tb-btn-readable',
-            searchButton        : '#id-tb-btn-search',
-            fullscreenButton    : '#id-tb-btn-fullscreen',
-            shareButton         : '#id-tb-btn-view-share',
-            incFontSizeButton   : '#id-tb-btn-incfontsize',
-            decFontSizeButton   : '#id-tb-btn-decfontsize'
-        },
-
-        control: {
-            doneButton      : {
-                tap         : 'onTapDoneButton'
-            },
-            editModeButton  : {
-                tap         : 'onTapEditModeButton'
-            },
-            searchButton    : {
-                tap         : 'onTapSearchButton'
-            },
-            readModeButton  : {
-                tap         : 'onTapReaderButton'
-            },
-            shareButton     : {
-                tap         : 'onTapShareButton'
-            },
-            incFontSizeButton: {
-                tap         : 'onTapIncFontSizeButton'
-            },
-            decFontSizeButton: {
-                tap         : 'onTapDecFontSizeButton'
-            }
-        },
-
-        searchMode      : false,
-        fullscreenMode  : false,
-        readableMode    : false
-    },
-
-    init: function() {
-        this.control({
-            fullscreenButton: {
-                tap: Ext.Function.createBuffered(this.onTapFullscreenButton, 500, this)
-            }
-        });
-    },
-
-    launch: function() {
-        this.callParent(arguments);
-
-        if (Ext.os.is.iOS) {
-            Ext.each(Ext.ComponentQuery.query('button'), function(button) {
-                button.element.dom.ontouchstart = Ext.emptyFn();
-                button.element.dom.ontouchmove = Ext.emptyFn();
-                button.element.dom.ontouchend = Ext.emptyFn();
-            }, this);
-
-            Ext.each(Ext.ComponentQuery.query('toolbar'), function(toolbar) {
-                var preventFn = function(e){
-                    e.preventDefault();
-                };
-
-                toolbar.element.dom.ontouchstart = preventFn;
-                toolbar.element.dom.ontouchmove = preventFn;
-                toolbar.element.dom.ontouchend = preventFn;
-            }, this);
-        }
-
-        Common.Gateway.on('init',           Ext.bind(this.loadConfig, this));
-        Common.Gateway.on('opendocument',   Ext.bind(this.loadDocument, this));
-        Common.Gateway.on('applyeditrights',Ext.bind(this.onApplyEditRights, this));
-    },
-
-    initControl: function() {
-        this.callParent(arguments);
-    },
-
-    initApi: function() {
-        //
-    },
-
-    setApi: function(o){
-        this.api = o;
-
-        if (this.api) {
-            this.api.asc_registerCallback('asc_onTapEvent',                 Ext.bind(this.onSingleTapDocument, this));
-            this.api.asc_registerCallback('asc_onCoAuthoringDisconnect',    Ext.bind(this.onCoAuthoringDisconnect, this));
-        }
-    },
-
-    loadConfig: function(data) {
-        var doneButton = this.getDoneButton();
-
-        if (doneButton && data && data.config && data.config.canBackToFolder !== false &&
-            data.config.customization && data.config.customization.goback && data.config.customization.goback.url){
-            this.gobackUrl = data.config.customization.goback.url;
-            doneButton.show();
-        }
-    },
-
-    loadDocument: function(data) {
-        var permissions = {};
-        if (data.doc) {
-            permissions = Ext.merge(permissions, data.doc.permissions);
-
-            var editModeButton = this.getEditModeButton();
-
-            if (editModeButton)
-                editModeButton.setHidden(permissions.edit === false);
-        }
-    },
-
-    onApplyEditRights: function(data) {
-        Ext.Viewport.unmask();
-
-        if (data && data.allowed) {
-            var mainController = this.getApplication().getController('tablet.Main');
-
-            if (this.getReadableMode())
-                this.setReadableMode(false);
-
-            if (this.getFullscreenMode())
-                this.setFullscreenMode(false);
-
-            if (mainController)
-                mainController.setMode('edit');
-        } else {
-            var editModeButton = this.getEditModeButton();
-
-            editModeButton && editModeButton.hide();
-
-            Ext.Msg.show({
-                title: this.requestEditFailedTitleText,
-                message: (data && data.message) || this.requestEditFailedMessageText,
-                icon: Ext.Msg.INFO,
-                buttons: Ext.Msg.OK
-            });
-        }
-    },
-
-    applySearchMode: function(search){
-        if (!Ext.isBoolean(search)) {
-            Ext.Logger.error('Invalid parameters.');
-        } else {
-            var me              = this,
-                searchToolbar   = me.getSearchToolbar(),
-                searchButton    = me.getSearchButton();
-
-            if (searchToolbar) {
-                if (search) {
-                    searchButton && searchButton.addCls('x-button-pressing');
-
-                    if (me.getFullscreenMode()) {
-                        searchToolbar.show({
-                            easing: 'ease-out',
-                            preserveEndState: true,
-                            autoClear: false,
-                            from: {
-                                opacity : 0.3
-                            },
-                            to: {
-                                opacity : 0.9
-                            }
-                        });
-                    } else {
-                        searchToolbar.show();
-                    }
-                } else {
-                    searchButton && searchButton.removeCls('x-button-pressing');
-
-                    if (me.getFullscreenMode()) {
-                        searchToolbar.hide({
-                            easing: 'ease-in',
-                            to: {
-                                opacity : 0.3
-                            }
-                        });
-                    } else {
-                        searchToolbar.hide();
-                    }
-                }
-            }
-            return search;
-        }
-    },
-
-    applyFullscreenMode: function(fullscreen) {
-        if (!Ext.isBoolean(fullscreen)) {
-            Ext.Logger.error('Invalid parameters.');
-        } else {
-            var viewToolbar     = this.getViewToolbar(),
-                searchToolbar   = this.getSearchToolbar(),
-                fullscreenButton= this.getFullscreenButton(),
-                popClipCmp      = Ext.ComponentQuery.query('popclip');
-
-            if (popClipCmp.length > 0) {
-                popClipCmp[0].hide();
-            }
-
-            if (viewToolbar && searchToolbar) {
-                if (fullscreen) {
-                    fullscreenButton && fullscreenButton.addCls('x-button-pressing');
-
-                    viewToolbar.setStyle({
-                        position    : 'absolute',
-                        left        : 0,
-                        top         : 0,
-                        right       : 0,
-                        opacity     : 0.9,
-                        'z-index'   : 17
-                    });
-
-                    searchToolbar.setStyle({
-                        position    : 'absolute',
-                        left        : 0,
-                        top         : '44px',
-                        right       : 0,
-                        opacity     : 0.9,
-                        'z-index'   : 16
-                    });
-
-                    this.setHiddenToolbars(true);
-                } else {
-                    viewToolbar.setStyle({
-                        position    : 'initial',
-                        opacity     : 1
-                    });
-                    searchToolbar.setStyle({
-                        position    : 'initial',
-                        opacity     : 1
-                    });
-
-                    viewToolbar.setDocked('top');
-                    searchToolbar.setDocked('top');
-                }
-            }
-
-            return fullscreen;
-        }
-    },
-
-    applyReadableMode: function(readable) {
-        if (!Ext.isBoolean(readable)) {
-            Ext.Logger.error('Invalid parameters.');
-        } else {
-            var searchButton        = this.getSearchButton(),
-                incFontSizeButton   = this.getIncFontSizeButton(),
-                decFontSizeButton   = this.getDecFontSizeButton(),
-                readModeButton      = this.getReadModeButton(),
-                popClipCmp          = Ext.ComponentQuery.query('popclip'),
-                shareButton         = this.getShareButton();
-
-            if (popClipCmp.length > 0) {
-                popClipCmp[0].hide();
-            }
-
-            if (readable) {
-                this.getSearchMode() && this.setSearchMode(false);
-                readable && readModeButton && readModeButton.addCls('x-button-pressing');
-
-                searchButton      && searchButton.hide();
-                incFontSizeButton && incFontSizeButton.show();
-                decFontSizeButton && decFontSizeButton.show();
-                shareButton       && shareButton.setDisabled(true);
-            } else {
-                incFontSizeButton && incFontSizeButton.hide();
-                decFontSizeButton && decFontSizeButton.hide();
-                searchButton      && searchButton.show();
-                shareButton       && shareButton.setDisabled(false);
-            }
-
-            this.api && this.api.ChangeReaderMode();
-
-            return readable;
-        }
-    },
-
-    setHiddenToolbars: function(hide) {
-        var viewToolbar     = this.getViewToolbar(),
-            searchToolbar   = this.getSearchToolbar();
-
-        if (viewToolbar && searchToolbar){
-            if (hide){
-                viewToolbar.hide({
-                    easing  : 'ease-out',
-                    from    : {opacity : 0.9},
-                    to      : {opacity : 0}
-                });
-                searchToolbar.hide({
-                    easing  : 'ease-out',
-                    from    : {opacity : 0.9},
-                    to      : {opacity : 0}
-                });
-            } else {
-                viewToolbar.show({
-                    preserveEndState: true,
-                    easing  : 'ease-in',
-                    from    : {opacity : 0},
-                    to      : {opacity : 0.9}
-                });
-                this.getSearchMode() && searchToolbar.show({
-                    preserveEndState: true,
-                    easing  : 'ease-in',
-                    from    : {opacity : 0},
-                    to      : {opacity : 0.9}
-                });
-            }
-        }
-    },
-
-    onTapDoneButton: function() {
-        if (this.gobackUrl) window.parent.location.href = this.gobackUrl;
-    },
-
-    onTapEditModeButton: function() {
-        Ext.Viewport.mask();
-        Common.Gateway.requestEditRights();
-    },
-
-    onTapReaderButton: function() {
-        this.setReadableMode(!this.getReadableMode());
-    },
-
-    onTapSearchButton: function(btn) {
-        this.setSearchMode(!this.getSearchMode());
-    },
-
-    onTapFullscreenButton: function(btn) {
-        this.setFullscreenMode(!this.getFullscreenMode());
-    },
-
-    onTapShareButton: function() {
-        this.api && this.api.asc_Print();
-        Common.component.Analytics.trackEvent('ToolBar View', 'Share');
-    },
-
-    onSingleTapDocument: function() {
-        var viewToolbar = this.getViewToolbar();
-
-        if (viewToolbar && this.getFullscreenMode()) {
-            this.setHiddenToolbars(!viewToolbar.isHidden());
-        }
-    },
-
-    onCoAuthoringDisconnect: function() {
-        var editModeButton = this.getEditModeButton();
-        editModeButton && editModeButton.setHidden(true);
-    },
-
-    onTapIncFontSizeButton: function() {
-        this.api && this.api.IncreaseReaderFontSize();
-    },
-
-    onTapDecFontSizeButton: function() {
-        this.api && this.api.DecreaseReaderFontSize();
-    },
-
-    requestEditFailedTitleText  : 'Access denied',
-    requestEditFailedMessageText: 'You can\'t edit the document right now. Please try again later.'
-});

apps/documenteditor/mobile/app/plugin/Pinchemu.js

@@ -1,284 +0,0 @@
-/**
- * @filename Ex.plugin.Pinchemu.js
- *
- * @name Pinch emulator plugin for Sencha Touch
- * @fileOverview Emulation of double touch pinch event for desktops
- *
- * @author Constantine V. Smirnov kostysh(at)gmail.com
- * @date 20120220
- * @version 0.2
- * @license Free
- *
- * @requires Sencha Touch 2.0
- * 
- * Usage:
- 
- .....
- items: [
-            {
-                xtype: 'panel',
-                id: 'mypinchitem',
-                plugins: [
-                    {
-                        xclass: 'Ext.plugin.Pinchemu',
-                        helpers: true//enable touches visualization
-                    }
-                ]
-            }
-        ]
- 
- *
- */
-
-Ext.define('DE.plugin.Pinchemu', {
-    extend: 'Ext.Component',
-    alias: 'plugin.pinchemu',
-    
-    config: {
-        helpers: true
-    },
-  
-    init: function(cmp) {
-        var self = this;
-        
-        self.touchHelpers = [];
-        
-        self.touchHelpers[0] = Ext.create('Ext.Button', {
-            top: 0,
-            left: 0,
-            style: 'opacity: 0.6;',
-            iconMask: true,
-            round: true,
-            hidden: true
-        });
-        
-        self.touchHelpers[1] = Ext.create('Ext.Button', {
-            top: 0,
-            left: 0,
-            style: 'opacity: 0.6;',
-            iconMask: true,
-            round: true,
-            hidden: true
-        });
-        
-        Ext.Viewport.add(self.touchHelpers[0]);
-        Ext.Viewport.add(self.touchHelpers[1]);
-        
-        self.cmp = cmp;
-        self.cmp.on({
-            scope: self,
-            painted: self.initPinchsim
-        });
-    },
-    
-    //Plugin initialisation
-    initPinchsim: function() {
-        var self = this;
-        
-        this.pinchStarted = false;
-        
-        var item = self.cmp;
-        
-        if (!item.pinchSimEnabled) {
-
-            if (item.rendered) {
-                self.initHandlers(item);
-            } else {
-                item.on({
-                    painted: self.initHandlers
-                });
-            }
-        }
-    },
-    
-    initHandlers: function(item) {
-        var self = this;
-        
-        //Setup touch handlers on enabled item
-        item.element.on({
-            scope: self,
-            touchstart: function(ev) {
-                if ((ev.event.ctrlKey || ev.event.shiftKey) && 
-                    self.pinchStarted === false) {
-                    self.pinchStarted = true;
-                    
-                    if (ev.event.ctrlKey) {
-                        self.zoomStart = 100;
-                        self.zoomDirection = 1;
-                    } else if (ev.event.shiftKey) {
-                        self.zoomStart = 340;
-                        self.zoomDirection = -1;
-                    }
-                    
-                    self.zoomFactor = 1;
-                    
-                    self.onTouchStart(item, ev);
-                }
-            },
-            
-            touchend: function(ev) {
-                if (self.pinchStarted) {
-                    self.pinchStarted = false;
-                    self.onTouchEnd(item, ev);
-                }
-            },
-            
-            touchcancel: function(ev) {
-                if (self.pinchStarted) {
-                    self.pinchStarted = false;
-                    self.onTouchEnd(item, ev);
-                }
-            },
-            
-            touchmove: function(ev) {
-                if ((ev.event.ctrlKey || ev.event.shiftKey) && 
-                    this.pinchStarted === true) {
-                    self.onTouchMove(item, ev);
-                } else if (self.pinchStarted) {
-                    self.pinchStarted = false;
-                    self.onTouchEnd(item, ev);
-                }
-            }
-        });
-        
-        item.pinchSimEnabled = true;
-    },
-    
-    showHelpers: function(ev) {
-        var touches = ev.touches;
-        if (typeof touches === 'object' && this.getHelpers()) {
-            this.moveHelpers(touches);
-            this.setHelpersArrows(ev);
-            this.touchHelpers[0].show();
-            this.touchHelpers[1].show();
-        }
-    },
-    
-    setHelpersArrows: function(ev) {
-        if (ev.event.ctrlKey) {
-            this.touchHelpers[0].setIconCls('arrow_right');
-            this.touchHelpers[1].setIconCls('arrow_left');
-        } else {
-            this.touchHelpers[0].setIconCls('arrow_left');
-            this.touchHelpers[1].setIconCls('arrow_right');
-        }        
-    },
-    
-    moveHelpers: function(touches) {
-        this.touchHelpers[0].setTop(touches[0].point.y);
-        this.touchHelpers[0].setLeft(touches[0].point.x);
-        this.touchHelpers[1].setTop(touches[1].point.y);
-        this.touchHelpers[1].setLeft(touches[1].point.x);
-    },
-    
-    hideHelpers: function() {
-        this.touchHelpers[0].hide();
-        this.touchHelpers[1].hide();
-    },
-    
-    //Converting of single touch event to double touch
-    convertEvent: function(ev) {
-        var self = this;
-        
-        //Clone of original touch object
-        var touches = Array.prototype.slice.call(ev.touches);
-        
-        if (!touches) {
-            touches = self.lastTouches;//at the pinchend only
-        }
-        
-        ev.touches = touches;        
-        
-        if (touches.length > 0) {
-            
-            if (!self.touchStartPoint) {
-                
-                var startX = touches[0].point.x;
-                var startY = touches[0].point.y;
-                var startPageX = touches[0].pageX;
-                var startPageY = touches[0].pageY;
-                
-                touches[0].point.x = touches[0].point.x + self.zoomStart / 2;
-                touches[0].pageX = touches[0].pageX + self.zoomStart / 2;
-                
-                //Build new touch point
-                touches[1] = {};
-                touches[1].identifier = 2;
-                touches[1].pageX = startPageX - self.zoomStart / 2;
-                touches[1].pageY = startPageY;
-                touches[1].point = touches[0].point.clone();
-                touches[1].point.x = startX - self.zoomStart / 2;
-                touches[1].point.y = touches[0].point.y;
-                touches[1].target = touches[0].target;
-                touches[1].targets = touches[0].targets;
-                touches[1].timeStamp = touches[0].timeStamp;
-                
-                //Remember the current start point
-                this.touchStartPoint = {
-                    x: startX,
-                    y: startY,
-                    pageX: startPageX,
-                    pageY: startPageY,
-                    distance: touches[0].point.getDistanceTo(touches[1].point)
-                };
-                
-            } else {
-                
-                touches[0].point = self.lastTouches[0].point.clone();//replace original by previous
-                touches[0].point.x = Ext.Number.constrain(self.lastTouches[0].point.x + self.zoomFactor * self.zoomDirection, 
-                                                          self.touchStartPoint.x + self.zoomFactor);
-                touches[0].pageX = Ext.Number.constrain(self.lastTouches[0].pageX + self.zoomFactor * self.zoomDirection, 
-                                                        self.touchStartPoint.x + self.zoomFactor);
-                
-                touches[1] = {};
-                touches[1].point = self.lastTouches[1].point.clone();
-                touches[1].point.x = Ext.Number.constrain(self.lastTouches[1].point.x - self.zoomFactor * self.zoomDirection, 
-                                                          self.touchStartPoint.x + self.zoomFactor);
-                touches[1].pageX = Ext.Number.constrain(self.lastTouches[1].pageX - self.zoomFactor * self.zoomDirection, 
-                                                        self.touchStartPoint.x + self.zoomFactor);
-                touches[1].pageY = self.lastTouches[1].pageY;
-                touches[1].target = touches[0].target;
-                touches[1].targets = touches[0].targets;
-                touches[1].timeStamp = touches[0].timeStamp;
-                
-            }
-            
-            self.lastTouches = touches;
-        }
-        
-        ev.scale = self.getNewScale(ev);
-        return ev;
-    },
-    
-    getNewScale: function(ev) {
-        var self = this;
-        
-        if (ev.touches.length > 0) {
-            var newDistance = ev.touches[0].point.getDistanceTo(ev.touches[1].point);
-            self.lastScale = newDistance / self.touchStartPoint.distance;            
-            return self.lastScale;
-        } else {
-            return self.lastScale;
-        }        
-    },
-    
-    onTouchStart: function() {
-        this.lastScale = 1;
-        var ev = this.convertEvent(arguments[1]);
-        this.showHelpers(ev);
-    },
-    
-    onTouchMove: function() {
-        var ev = this.convertEvent(arguments[1]);
-        this.lastTouches = Array.prototype.slice.call(ev.touches);
-        this.moveHelpers(ev.touches);
-    },
-    
-    onTouchEnd: function() {
-        var ev = this.convertEvent(arguments[1]);
-        this.hideHelpers();
-        this.touchStartPoint = null;
-        this.lastTouches = null;
-        this.lastScale = null;
-    }
-});

apps/documenteditor/mobile/app/profile/Phone.js

@@ -1,58 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.profile.Phone', {
-    extend: 'Ext.app.Profile',
-    
-    config: {
-        name: 'phone',
-        namespace: 'phone',
-        controllers: [
-            'Main',
-            'DE.controller.Document',
-            'DE.controller.Search',
-            'DE.controller.toolbar.Edit',
-            'DE.controller.toolbar.View'
-        ],
-        views: [
-            'Main'
-        ]
-    },
-    
-    isActive: function() {
-        return (Ext.os.is.Phone && (Ext.os.is.iOS || Ext.os.is.Android));
-    },
-    
-    launch: function() {
-        Ext.widget('dephonemain');
-    }
-});

apps/documenteditor/mobile/app/profile/Tablet.js

@@ -1,72 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.profile.Tablet', {
-    extend: 'Ext.app.Profile',
-    
-    config: {
-        name: 'tablet',
-        namespace: 'tablet',
-        controllers: [
-            'Main',
-            'Common.controller.PopClip',
-            'DE.controller.Document',
-            'DE.controller.Search',
-            'DE.controller.tablet.panel.Font',
-            'DE.controller.tablet.panel.FontStyle',
-            'DE.controller.tablet.panel.Insert',
-            'DE.controller.tablet.panel.Style',
-            'DE.controller.tablet.panel.ParagraphAlignment',
-            'DE.controller.tablet.panel.Spacing',
-            'DE.controller.tablet.panel.TextColor',
-            'DE.controller.toolbar.Edit',
-            'DE.controller.toolbar.View'
-        ],
-        views: [
-            'Main'
-        ],
-        models: [
-            'Common.model.SettingItem'
-        ],
-        stores: [
-            'Common.store.SettingsList'
-        ]
-    },
-    
-    isActive: function() {
-        return (Ext.browser.is.WebKit && ((Ext.os.is.Tablet && (Ext.os.is.iOS || Ext.os.is.Android)) || Ext.os.is.Desktop));
-    },
-    
-    launch: function() {
-        Ext.widget('detabletmain');
-    }
-});

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

@@ -0,0 +1,70 @@
+<!-- Root view -->
+<div id="addimage-root-view">
+    <div class="list-block">
+        <ul>
+            <li>
+                <a id="add-image-file" 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">Picture from Library</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">Picture from URL</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>Back</span><% } %></a></div>
+            <div class="center sliding">Link Settings</div>
+        </div>
+    </div>
+    <div class="page" id="addimage-url">
+        <div class="page-content">
+            <div class="content-block-title">Address</div>
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <div id="addimage-link-url" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-input">
+                                    <input type="url" placeholder="Image URL">
+                                </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;">Insert Image</a>
+                <% } else { %>
+                <ul>
+                    <li>
+                        <a href="#" class="list-button item-link">Insert Image</a>
+                    </li>
+                </ul>
+                <% } %>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,261 @@
+<!-- Root view -->
+<div id="addother-root-view">
+    <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">Page Break</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">Section Break</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+            <li>
+                <a id="add-other-linebreak" 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">Line Break</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">Link</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">Page Number</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>Back</span><% } %></a></div>
+            <div class="center sliding">Section Break</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">Next Page</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">Continuous Page</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">Even Page</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">Odd Page</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>Back</span><% } %></a></div>
+            <div class="center sliding">Add Link</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">Link</div>
+                                <div class="item-input">
+                                    <input type="url" placeholder="Link">
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div id="add-link-display" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title label">Display</div>
+                                <div class="item-input">
+                                    <input type="text" placeholder="Display">
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                    <li>
+                        <div id="add-link-tip" class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title label">Screen Tip</div>
+                                <div class="item-input">
+                                    <input type="text" placeholder="Screen Tip">
+                                </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;">Insert</a>
+                <% } else { %>
+                <ul>
+                    <li>
+                        <a href="#" class="list-button item-link">Insert</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>Back</span><% } %></a></div>
+            <div class="center sliding">Position</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">Left Top</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">Center Top</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">Right Top</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">Left Bottom</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">Center Bottom</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">Right Bottom</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">Current Position</div>
+                                </div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,12 @@
+<!-- Root view -->
+<div id="add-shapes-root">
+    <div class="page-content dataview shapes">
+        <ul>
+            <% _.each(shapes, 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

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

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

@@ -0,0 +1,380 @@
+<!-- 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">Style</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">Wrap</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">Reorder</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">Remove Chart</a>
+            </li>
+        </ul>
+        <% } else { %>
+        <a id="chart-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Chart</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>Back</span><% } %></a></div>
+            <div class="center sliding">Reorder</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-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Bring to Foreground</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-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Send to Background</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-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Move Forward</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-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Move Backward</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>Back</span><% } %></a></div>
+            <div class="center sliding">Wrap</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Inline</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Square</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Tight</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Through</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Top and Bottom</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">In Front</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Behind</div>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title align">Align</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">Move with Text</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">Allow Overlap</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">Distance from text</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>Back</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">Type</a>
+                        <a href="#tab-chart-style" data-type="style" class="tab-link">Style</a>
+                        <a href="#tab-chart-fill" data-type="fill" class="tab-link">Fill</a>
+                        <a href="#tab-chart-border" data-type="border" class="tab-link">Border</a>
+                    </div>
+                </div>
+                <% } else { %>
+                <div class="buttons-row">
+                    <a href="#tab-chart-type" data-type="type" class="tab-link button active">Type</a>
+                    <a href="#tab-chart-style" data-type="style" class="tab-link button">Style</a>
+                    <a href="#tab-chart-fill" data-type="fill" class="tab-link button">Fill</a>
+                    <a href="#tab-chart-border" data-type="border" class="tab-link button">Border</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-chart-style">
+        <div class="tabs-animated-wrap">
+            <div class="tabs">
+                <div id="tab-chart-type" class="page-content tab active dataview chart-types">
+                    <ul>
+                        <% _.each(types, 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">
+                    <div class="list-block">
+                        <ul>
+                            <li id="edit-chart-styles">
+                                <div class="item-content">
+                                    <div class="item-inner"></div>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </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;">Size</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">Color</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>Back</span><% } %></a></div>
+            <div class="center sliding">Color</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>

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

@@ -0,0 +1,52 @@
+<!-- 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">Link</div>
+                        <div class="item-input">
+                            <input type="url" placeholder="Link">
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div id="edit-link-display" class="item-content">
+                    <div class="item-inner">
+                        <div class="item-title label">Display</div>
+                        <div class="item-input">
+                            <input type="text" placeholder="Display">
+                        </div>
+                    </div>
+                </div>
+            </li>
+            <li>
+                <div id="edit-link-tip" class="item-content">
+                    <div class="item-inner">
+                        <div class="item-title label">Screen Tip</div>
+                        <div class="item-input">
+                            <input type="text" placeholder="Screen Tip">
+                        </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;">Edit Link</a>
+        <a href="#" id="edit-link-remove" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Link</a>
+        <% } else { %>
+        <ul>
+            <li>
+                <a href="#" id="edit-link-edit" class="list-button item-link disabled" style="text-align: center;">Edit Link</a>
+            </li>
+            <li>
+                <a href="#" id="edit-link-remove" class="list-button item-link" style="text-align: center; color: #f00">Remove Link</a>
+            </li>
+        </ul>
+        <% } %>
+    </div>
+</div>

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

@@ -0,0 +1,366 @@
+<!-- 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">Wrap</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">Replace</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">Reorder</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;">Default Size</a>
+                <% } else { %>
+                <a id="image-default" class="item-link list-button" style="text-align: center;">Default Size</a>
+                <% } %>
+            </li>
+            <li>
+                <% if (android) { %>
+                <a id="image-default" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Image</a>
+                <% } else { %>
+                <a id="image-remove" class="item-link list-button" style="text-align: center; color: #f00">Remove Image</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>Back</span><% } %></a></div>
+            <div class="center sliding">Reorder</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-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Bring to Foreground</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-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Send to Background</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-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Move Forward</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-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Move Backward</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>Back</span><% } %></a></div>
+            <div class="center sliding">Wrap</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Inline</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Square</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Tight</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Through</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Top and Bottom</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">In Front</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Behind</div>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title align">Align</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">Move with Text</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">Allow Overlap</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">Distance from text</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>Back</span><% } %></a></div>
+            <div class="center sliding">Replace</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">
+                            <div class="item-content">
+                                <div class="item-media">
+                                    <i class="icon icon-search"></i>
+                                </div>
+                                <div class="item-inner">
+                                    <div class="item-title">Picture from Library</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-search"></i>
+                                </div>
+                                <div class="item-inner">
+                                    <div class="item-title">Picture from URL</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>Back</span><% } %></a></div>
+            <div class="center sliding">Link Settings</div>
+        </div>
+    </div>
+    <div class="page edit-image-url-link">
+        <div class="page-content">
+            <div class="content-block-title">Address</div>
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-input">
+                                    <input type="url" placeholder="Image URL">
+                                </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;">Replace Image</a>
+                <% } else { %>
+                <ul>
+                    <li>
+                        <a href="#" class="list-button item-link">Replace Image</a>
+                    </li>
+                </ul>
+                <% } %>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,172 @@
+<!-- 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">Background</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">Advanced settings</div>
+                        </div>
+                    </div>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="content-block-title">Paragraph styles</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>Back</span><% } %></a></div>
+            <div class="center sliding">Background</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>Back</span><% } %></a></div>
+            <div class="center sliding">Advanced</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">Distance from text</div>
+            <div class="list-block">
+                <ul>
+                    <li id="paragraph-distance-before">
+                        <div class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Before</div>
+                                <div class="item-after splitter">
+                                    <% if (!android) { %><label>Auto</label><% } %>
+                                    <p class="buttons-row">
+                                        <span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
+                                        <% if (android) { %><label>Auto</label><% } %>
+                                        <span class="button increment"><% 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">After</div>
+                                <div class="item-after splitter">
+                                    <% if (!android) { %><label>Auto</label><% } %>
+                                    <p class="buttons-row">
+                                        <span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
+                                        <% if (android) { %><label>Auto</label><% } %>
+                                        <span class="button increment"><% 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">Space Between Paragraphs</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">Page Break Before</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">Orphan Control</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">Keep Lines Together</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">Keep with Next</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/EditShape.template

@@ -0,0 +1,408 @@
+<!-- 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">Style</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">Wrap</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">Replace</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">Reorder</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;">Remove Shape</a>
+                <% } else { %>
+                <a id="shape-remove" class="item-link list-button" style="text-align: center; color: #f00">Remove Shape</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>Back</span><% } %></a></div>
+            <div class="center sliding">Reorder</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-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Bring to Foreground</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-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Send to Background</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-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Move Forward</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-search"></i></div>
+                                <div class="item-inner">
+                                    <div class="item-title">Move Backward</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>Back</span><% } %></a></div>
+            <div class="center sliding">Replace</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">
+            <ul>
+                <% _.each(shapes, 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>Back</span><% } %></a></div>
+            <div class="center sliding">Wrap</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Inline</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Square</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Tight</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Through</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Top and Bottom</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">In Front</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Behind</div>
+                            </div>
+                        </label>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title align">Align</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">Move with Text</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">Allow Overlap</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">Distance from text</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>Back</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">Fill</a>
+                        <a href="#tab-shape-border" data-type="border" class="tab-link">Border</a>
+                        <a href="#tab-shape-effects" data-type="effects" class="tab-link">Effects</a>
+                    </div>
+                </div>
+                <% } else { %>
+                <div class="buttons-row">
+                    <a href="#tab-shape-fill" data-type="fill" class="tab-link button active">Fill</a>
+                    <a href="#tab-shape-border" data-type="border" class="tab-link button">Border</a>
+                    <a href="#tab-shape-effects" data-type="effects" class="tab-link button">Effects</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="tabs-animated-wrap">
+            <div class="tabs">
+                <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;">Size</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">Color</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;">Opacity</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>
+
+<!-- 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>Back</span><% } %></a></div>
+            <div class="center sliding">Color</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>

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

@@ -0,0 +1,453 @@
+<!-- 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">Remove Table</a>
+                <% } %>
+            </li>
+        </ul>
+        <% if (android) { %>
+        <a id="table-remove-all" class="button button-raised button-fill" style="margin: 20px 16px; background-color: #f44336;">Remove Table</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">Table Options</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">Style</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">Wrap</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>Back</span><% } %></a></div>
+            <div class="center sliding">Wrap</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Inline</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-search"></i></div>
+                            <% } %>
+                            <div class="item-inner">
+                                <div class="item-title">Flow</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">Move with Text</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">Distance from text</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">Align</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-text-align-left"></i></a>
+                                    <a id="table-align-center" class="button no-ripple"><i class="icon icon-text-align-center"></i></a>
+                                    <a id="table-align-right" class="button no-ripple"><i class="icon icon-text-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>Back</span><% } %></a></div>
+            <div class="center sliding">Options</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">Repeat as Header Row</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">Resize to Fit Content</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">Cell margins</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="150" 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>Back</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">Style</a>
+                        <a href="#tab-table-fill" data-type="fill" class="tab-link">Fill</a>
+                        <a href="#tab-table-border" data-type="border" class="tab-link">Border</a>
+                    </div>
+                </div>
+                <% } else { %>
+                <div class="buttons-row">
+                    <a href="#tab-table-style" data-type="style" class="tab-link button active">Style</a>
+                    <a href="#tab-table-fill"  data-type="fill" class="tab-link button">Fill</a>
+                    <a href="#tab-table-border" data-type="border" class="tab-link button">Border</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="tabs-animated-wrap">
+            <div class="tabs">
+                <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">Style Options</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;">Size</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">Color</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-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type=""><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="cm"><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="lrtb"><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="l"><i class="icon icon-text-align-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-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="r"><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="t"><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="m"><i class="icon icon-text-align-left"></i></a>
+                                            <a class="button no-ripple" style="min-width:0;" data-type="b"><i class="icon icon-text-align-left"></i></a>
+                                        </div>
+                                    </div>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </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>Back</span><% } %></a></div>
+            <div class="center sliding">Options</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">Header Row</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">Total Row</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">Banded Row</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">First Column</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">Last Column</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">Banded Column</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>Back</span><% } %></a></div>
+            <div class="center sliding">Color</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>

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

@@ -0,0 +1,404 @@
+<!-- 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">Fonts</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"><b>B</b></a>
+                        <a id="font-italic" class="button"><i>I</i></a>
+                        <a id="font-underline" class="button" style="text-decoration: underline;">U</a>
+                        <a id="font-strikethrough" class="button" style="text-decoration: line-through">S</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">Font color</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">Highlight color</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">Additional formatting</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">Bullets</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">Numbers</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">Line Spacing</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>Back</span><% } %></a></div>
+            <div class="center sliding">Fonts</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">Size</div>
+                                <div class="item-after splitter">
+                                    <% if (!android) { %><label></label><% } %>
+                                    <p class="buttons-row">
+                                        <span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
+                                        <% if (android) { %><label></label><% } %>
+                                        <span class="button increment"><% if (android) { %><i class="icon icon-expand-up"></i><% } else { %>+<% } %></span>
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </div>
+            <div class="content-block-title">Fonts</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>Back</span><% } %></a></a></div>
+            <div class="center sliding">Font Colors</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 style="width:22px; height: 22px; background-color: #000;"></div>
+                                </div>
+                                <div class="item-inner">
+                                    <div class="item-title">Automatic</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>Back</span><% } %></a></a></div>
+            <div class="center sliding">Highlight Colors</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>Back</span><% } %></a></a></div>
+            <div class="center sliding">Additional</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">Strikethrough</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">Double Strikethrough</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">Superscript</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">Subscript</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">Small Caps</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">All Caps</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">Letter Spacing</div>
+                                <div class="item-after splitter">
+                                    <% if (!android) { %><label></label><% } %>
+                                    <p class="buttons-row">
+                                        <span class="button decrement"><% if (android) { %><i class="icon icon-expand-down"></i><% } else { %>-<% } %></span>
+                                        <% if (android) { %><label></label><% } %>
+                                        <span class="button increment"><% 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>Back</span><% } %></a></a></div>
+            <div class="center sliding">Line Spacing</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>Back</span><% } %></a></a></div>
+            <div class="center sliding">Bullets</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">
+            <div class="list-block">
+                <ul>
+                    <% _.each(bullets, function(bullet) { %>
+                    <li data-type="<%= bullet.type %>">
+                        <% if (bullet.thumb.length < 1) { %>
+                        <div class="thumb"><label>None</label></div>
+                        <% } else { %>
+                        <div class="thumb" style="background-image:url('../mobile/resources/img/bullets/<%= bullet.thumb %>')"></div>
+                        <% } %>
+                    </li>
+                    <% }); %>
+                </ul>
+            </div>
+        </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>Back</span><% } %></a></a></div>
+            <div class="center sliding">Numbers</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">
+            <div class="list-block">
+                <ul>
+                    <% _.each(numbers, function(number) { %>
+                    <li data-type="<%= number.type %>">
+                        <% if (number.thumb.length < 1) { %>
+                        <div class="thumb"><label>None</label></div>
+                        <% } else { %>
+                        <div class="thumb" style="background-image:url('../mobile/resources/img/numbers/<%= number.thumb %>')"></div>
+                        <% } %>
+                    </li>
+                    <% }); %>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>

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

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

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

@@ -0,0 +1,358 @@
+<!-- Root view -->
+<div id="settings-root-view">
+    <div class="navbar">
+        <div class="navbar-inner">
+            <div class="center sliding">Settings</div>
+            <div class="right"><% if (phone) { %><a href="#" class="link close-popup">Done</a><% } %></div>
+        </div>
+    </div>
+    <div class="pages">
+        <div class="page" data-page="settings-root-view">
+            <div class="page-content">
+                <div class="list-block">
+                    <ul>
+                        <!--<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">Search</div>-->
+                                    <!--</div>-->
+                                <!--</div>-->
+                            <!--</a>-->
+                        <!--</li>-->
+                        <li>
+                            <a id="settings-edit-document" class="item-link no-indicator">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-edit"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">Edit Document</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">Reader Mode</div>
+                                    <div class="item-after">
+                                        <label class="label-switch">
+                                            <input type="checkbox">
+                                            <div class="checkbox"></div>
+                                        </label>
+                                    </div>
+                                </div>
+                            </div>
+                        </li>
+                        <li>
+                            <a id="settings-download" class="item-link">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-download"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">Download</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a id="settings-document-info" class="item-link">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-info"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">Document Info</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <!--<li>-->
+                            <!--<a id="settings-history" class="item-link">-->
+                                <!--<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">Help</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                        <li>
+                            <a id="settings-about" class="item-link">
+                                <div class="item-content">
+                                    <div class="item-media">
+                                        <i class="icon icon-about"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">About</div>
+                                    </div>
+                                </div>
+                            </a>
+                        </li>
+                    </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>Back</span>
+                    <% } %>
+                </a>
+            </div>
+            <div class="center sliding">Document Info</div>
+        </div>
+    </div>
+    <div class="pages">
+        <div class="page" data-page="settings-info-view">
+            <div class="page-content">
+                <div class="content-block-title">Document title</div>
+                <div class="list-block">
+                    <ul>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div id="settings-document-title" class="item-title">Loading...</div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="content-block-title">Author</div>
+                <div class="list-block">
+                    <ul>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div id="settings-document-autor" class="item-title">Loading...</div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="content-block-title">Create date</div>
+                <div class="list-block">
+                    <ul>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div id="settings-document-date" class="item-title">Loading...</div>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="content-block-title">Statistic</div>
+                <div class="list-block">
+                    <ul>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Pages</div>
+                                <div class="item-after" id="statistic-pages">0</div>
+                            </div>
+                        </li>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Paragraphs</div>
+                                <div class="item-after" id="statistic-paragraphs">0</div>
+                            </div>
+                        </li>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Words</div>
+                                <div class="item-after" id="statistic-words">0</div>
+                            </div>
+                        </li>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Symbols</div>
+                                <div class="item-after" id="statistic-symbols">0</div>
+                            </div>
+                        </li>
+                        <li class="item-content">
+                            <div class="item-inner">
+                                <div class="item-title">Spaces</div>
+                                <div class="item-after" id="statistic-spaces">0</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>Back</span><% } %>
+                </a>
+            </div>
+            <div class="center sliding">Download</div>
+        </div>
+    </div>
+    <div class="pages">
+        <div class="page formats" data-page="settings-download-view">
+            <div class="page-content">
+                <div class="content-block-title">Download As...</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-search"></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-search"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">PDF</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-search"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">TXT</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-search"></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-search"></i>
+                                    </div>
+                                    <div class="item-inner">
+                                        <div class="item-title">HTML</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>Back</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>Back</span>
+                    <% } %>
+                </a>
+            </div>
+            <div class="center sliding">About</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>
+                <div class="content-block">
+                    <h3>DOCUMENT EDITOR</h3>
+                    <h3>Version 4.1</h3>
+                </div>
+                <div class="content-block">
+                    <h3 class="vendor">Ascensio System SIA</h3>
+                    <p><label>address:</label><a class="external" href="#">Lubanas st. 125a-25, Riga, Latvia, EU, LV-1021</a></p>
+                    <p><label>email:</label><a class="external" target="_blank" href="mailto:support@onlyoffice.com">support@onlyoffice.com</a></p>
+                    <p><label>tel:</label><a class="external" target="_blank" href="tel:+371 660-16425">+371 660-16425</a></p>
+                    <p><a class="external" target="_blank" href="http://www.onlyoffice.com">www.onlyoffice.com</a></p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,45 @@
+<div class="navbar" id="editor-navbar">
+    <div class="navbar-inner">
+        <div class="left">
+            <a id="document-back" href="#" class="link" style="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"></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-search" class="link icon-only">
+                <i class="icon icon-search"></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

@@ -0,0 +1,132 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'jquery',
+    'underscore',
+    'backbone'
+], 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);
+
+                el.append(this.template({
+                    //
+                }));
+
+                // this.f7View = uiApp.addView('.view-main', {
+                //     // params
+                // });
+
+                return this;
+            },
+
+            showMenu: function (items, posX, posY) {
+                if (items.length < 1) {
+                    return;
+                }
+
+                var menuItemTemplate = _.template([
+                    '<% _.each(menuItems, function(item) { %>',
+                    '<li data-event="<%= item.event %>"><a href="#" class="item-link list-button"><%= item.caption %></li>',
+                    '<% }); %>'
+                ].join(''));
+
+                $('#' + _anchorId)
+                    .css('left', posX)
+                    .css('top', 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>';
+                uiApp.popover(popoverHTML, $('#' + _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));
+
+                // console.log('Show menu at position:', posX, posY);
+            },
+
+            hideMenu: function () {
+                $('#' + _anchorId)
+                    .css('left', -1000)
+                    .css('top', -1000);
+
+                uiApp.closeModal('.document-menu.modal-in');
+            }
+        }
+    })());
+});

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

@@ -29,51 +29,53 @@
  * Creative Commons Attribution-ShareAlike 4.0 International. See the License
  * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
  *
-*/
-Ext.define('DE.view.phone.Main', {
-    extend: 'DE.view.Main',
-    alias: 'widget.dephonemain',
+ */
 
-    requires: ([
-        'DE.view.phone.toolbar.Search',
-        'DE.view.phone.toolbar.View'
-    ]),
+/**
+ *  Editor.js
+ *  Document Editor
+ *
+ *  Created by Alexander Yuzhin on 9/22/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
 
-    config: {
-        cls: 'de-phone-main',
-        fullscreen: true,
-        layout: {
-            type: 'vbox',
-            pack: 'center'
+
+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.html(this.template({
+                backTitle: Framework7.prototype.device.android ? '' : ''
+            }));
+
+            this.f7View = uiApp.addView('.view-main', {
+                // params
+            });
+
+            return this;
         }
-    },
-
-    initialize: function() {
-        var me = this;
-
-        this.add(Ext.create('DE.view.phone.toolbar.View', {
-            hidden      : true
-        }));
-
-        this.add(Ext.create('DE.view.phone.toolbar.Search', {
-            hidden      : true
-        }));
-
-        this.add({
-            xtype   : 'container',
-            layout  : 'vbox',
-            id      : 'id-conteiner-document',
-            flex    : 1,
-            items   : [
-                {
-                    xtype   : 'container',
-                    flex    : 1,
-                    id      : 'id-sdkeditor',
-                    style   : 'z-index: 1'
-                }
-            ]
-        });
-
-        this.callParent(arguments);
-    }
+    });
 });

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

@@ -1,39 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.view.Main', {
-    extend: 'Ext.Container',
-
-    initialize: function() {
-        this.callParent(arguments);
-    }
-});

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

@@ -0,0 +1,188 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 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((function() {
+        // private
+        var isEdit;
+
+        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));
+            },
+
+            initEvents: function () {
+                var me = this;
+
+                $('#settings-document-info').single('click',    _.bind(me.showDocumentInfo, me));
+                $('#settings-download').single('click',         _.bind(me.showDownload, me));
+                $('#settings-history').single('click',          _.bind(me.showHistory, me));
+                $('#settings-help').single('click',             _.bind(me.showHelp, me));
+                $('#settings-about').single('click',            _.bind(me.showAbout, me));
+
+                me.initControls();
+            },
+
+            // Render layout
+            render: function() {
+                this.layout = $('<div/>').append(this.template({
+                    android : Common.SharedSettings.get('android'),
+                    phone   : Common.SharedSettings.get('phone')
+                }));
+
+                return this;
+            },
+
+            setMode: function (mode) {
+                isEdit = (mode === 'edit')
+            },
+
+            rootLayout: function () {
+                if (this.layout) {
+                    var $layour = this.layout
+                        .find('#settings-root-view');
+                    var isPhone = Common.SharedSettings.get('phone');
+
+                    if (isEdit) {
+                        $layour.find('#settings-edit-document').hide();
+                        $layour.find('#settings-readermode').hide();
+                    } else {
+                        $layour.find('#settings-readermode input:checkbox')
+                            .attr('checked', Common.SharedSettings.get('readerMode'))
+                            .prop('checked', Common.SharedSettings.get('readerMode'));
+                    }
+
+                    return $layour.html();
+                }
+
+                return '';
+            },
+
+            initControls: function() {
+                //
+            },
+
+            showPage: function(templateId) {
+                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()
+                    });
+
+                    this.fireEvent('page:show', this);
+                }
+            },
+
+            showDocumentInfo: function() {
+                this.showPage('#settings-info-view');
+
+                var api = DE.getController('Settings').api;
+                if (api) {
+                    api.startGetDocInfo();
+
+                    var document = Common.SharedSettings.get('document') || {},
+                        info = document.info || {};
+
+                    $('#settings-document-title').html(document.title ? document.title : this.unknownText);
+                    $('#settings-document-autor').html(info.author ? info.author : this.unknownText);
+                    $('#settings-document-date').html(info.created ? info.created : this.unknownText);
+                }
+            },
+
+            showDownload: function () {
+                this.showPage('#settings-download-view');
+            },
+
+            showHistory: function () {
+                this.showPage('#settings-history-view');
+            },
+
+            showHelp: function () {
+                window.open('http://support.onlyoffice.com/', "_blank");
+                DE.getController('Settings').hideModal();
+            },
+
+            showAbout: function () {
+                this.showPage('#settings-about-view');
+            },
+
+            loadDocument: function(data) {
+                var permissions = {};
+
+                if (data.doc) {
+                    permissions = _.extend(permissions, data.doc.permissions);
+
+                    if (permissions.edit === false) {
+                        $('#settings-edit-document').hide();
+                    }
+                }
+            },
+
+            unknownText: 'Unknown'
+        }
+    })());
+});

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

@@ -0,0 +1,190 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 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((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"
+            },
+
+            // 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 $el = $(this.el);
+
+                $el.prepend(this.template({
+                    android     : Common.SharedSettings.get('android'),
+                    phone       : Common.SharedSettings.get('phone'),
+                    backTitle   : Common.SharedSettings.get('android') ? '' : 'Back'
+                }));
+
+                return this;
+            },
+
+            setMode: function (mode) {
+                var isEdit = (mode === 'edit');
+
+                if (isEdit) {
+                    $('#toolbar-edit, #toolbar-add, #toolbar-undo, #toolbar-redo').show();
+                }
+            },
+
+            // Search
+            searchToggle: function() {
+                if ($$('.searchbar.document').length > 0) {
+                    this.hideSearch();
+                } else {
+                    this.showSearch();
+                }
+            },
+
+            showSearch: function () {
+                var me = this,
+                    searchBar = $$('.searchbar.document');
+
+                if (searchBar.length < 1) {
+                    $(me.el).find('.pages .page').first().prepend(_.template(
+                        '<form class="searchbar document navbar navbar-hidden">' +
+                            '<div class="searchbar-input">' +
+                                '<input type="search" placeholder="Search"><a href="#" class="searchbar-clear"></a>' +
+                            '</div>' +
+                            '<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>' +
+                        '</form>', {}
+                    ));
+                    me.fireEvent('searchbar:render', me);
+
+                    searchBar = $$('.searchbar.document');
+
+                    if (Common.SharedSettings.get('android')) {
+                        searchBar.find('.buttons-row').css('margin-left', '10px');
+                        searchBar.find('.buttons-row a').css('min-width', '0px');
+                    } else {
+                        searchBar.find('.buttons-row .next').css('margin-left', '10px');
+                    }
+
+                    _.defer(function() {
+                        uiApp.showNavbar(searchBar);
+
+                        searchBar.transitionEnd(function () {
+                            if (!searchBar.hasClass('navbar-hidden')) {
+                                me.fireEvent('searchbar:show', me);
+                                $('.searchbar input').focus();
+                            }
+                        });
+                    }, 10);
+                }
+            },
+
+            hideSearch: function () {
+                var me = this,
+                    searchBar = $$('.searchbar.document');
+
+                if (searchBar.length > 0) {
+                    // Animating
+                    if (searchBar.hasClass('.navbar-hidding')) {
+                        return;
+                    }
+
+                    _.defer(function() {
+                        searchBar.transitionEnd(function () {
+                            me.fireEvent('searchbar:hide', me);
+                            searchBar.remove();
+                        });
+
+                        uiApp.hideNavbar(searchBar);
+                    }, 10);
+                }
+            },
+
+            // Editor
+            showEdition: function () {
+                DE.getController('EditContainer').showModal();
+            },
+
+            // Inserts
+
+            showInserts: function () {
+                DE.getController('AddContainer').showModal();
+            },
+
+            // Settings
+            showSettings: function () {
+                DE.getController('Settings').showModal();
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,123 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 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((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')
+                }));
+
+                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');
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,141 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 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((function() {
+        // private
+        var fontNames;
+
+        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-section').single('click',     _.bind(me.showSectionBreak, me));
+                $('#add-other-link').single('click',        _.bind(me.showLink, me));
+                $('#add-other-pagenumber').single('click',  _.bind(me.showPagePosition, me));
+
+                me.initControls();
+            },
+
+            // Render layout
+            render: function () {
+                this.layout = $('<div/>').append(this.template({
+                    android : Common.SharedSettings.get('android'),
+                    phone   : Common.SharedSettings.get('phone')
+                }));
+
+                return this;
+            },
+
+            rootLayout: function () {
+                if (this.layout) {
+                    return this.layout
+                        .find('#addother-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, templateId]);
+                }
+            },
+
+            showSectionBreak: function () {
+                this.showPage('#addother-sectionbreak');
+            },
+
+            showLink: function () {
+                this.showPage('#addother-link');
+
+                $('.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');
+            }
+        }
+    })());
+});

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

@@ -29,65 +29,72 @@
  * Creative Commons Attribution-ShareAlike 4.0 International. See the License
  * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
  *
-*/
-Ext.define('DE.view.phone.toolbar.View', {
-    extend: 'Ext.Toolbar',
-    xtype: 'viewtoolbar',
+ */
 
-    config: {
-        docked      : 'top',
-        zIndex      : 10,
-        minHeight   : 44,
-        ui          : 'edit'
-    },
+/**
+ *  AddShape.js
+ *  Document Editor
+ *
+ *  Created by Alexander Yuzhin on 10/18/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
 
-    initialize: function() {
-        this.add([
-            {
-                id      : 'id-tb-btn-view-done',
-                ui      : 'base-blue',
-                cls     : 'text-offset-12',
-                hidden  : true,
-                text    : this.doneText
+
+define([
+    'text!documenteditor/mobile/app/template/AddShape.template',
+    'jquery',
+    'underscore',
+    'backbone'
+], function (addTemplate, $, _, Backbone) {
+    'use strict';
+
+    DE.Views.AddShape = Backbone.View.extend((function() {
+        // private
+
+        return {
+            // el: '.view-main',
+
+            template: _.template(addTemplate),
+
+            events: {
             },
-            {
-                xtype   : 'spacer'
+
+            initialize: function () {
+                Common.NotificationCenter.on('addcontainer:show',   _.bind(this.initEvents, this));
+                Common.NotificationCenter.on('shapes:load',         _.bind(this.render, this));
             },
-            {
-                id      : 'id-tb-btn-incfontsize',
-                ui      : 'base',
-                iconCls : 'textbigger',
-                hidden  : true
+
+            initEvents: function () {
+                var me = this;
+
+                me.initControls();
             },
-            {
-                id      : 'id-tb-btn-decfontsize',
-                ui      : 'base',
-                iconCls : 'textless',
-                hidden  : true
+
+            // 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;
             },
-            {
-                id      : 'id-tb-btn-search',
-                ui      : 'base',
-                iconCls : 'search'
+
+            rootLayout: function () {
+                if (this.layout) {
+                    return this.layout
+                        .find('#add-shapes-root')
+                        .html();
+                }
+
+                return '';
             },
-            {
-                id      : 'id-tb-btn-fullscreen',
-                ui      : 'base',
-                iconCls : 'fullscreen'
-            },
-            {
-                xtype   : 'spacer'
-            },
-            {
-                id      : 'id-tb-btn-view-share',
-                ui      : 'base',
-                iconCls : 'share'
+
+            initControls: function () {
+                //
             }
-        ]);
-
-        this.callParent(arguments);
-    },
-
-    doneText    : 'Done',
-    readerText  : 'Reader'
+        }
+    })());
 });

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

@@ -0,0 +1,104 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 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((function() {
+        // private
+
+        return {
+            // el: '.view-main',
+
+            template: _.template(addTemplate),
+
+            events: {
+            },
+
+            initialize: function () {
+                Common.NotificationCenter.on('addcontainer:show', _.bind(this.initEvents, this));
+                Common.NotificationCenter.on('tablestyles:load',  _.bind(this.render, 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  : Common.SharedSettings.get('tablestyles')
+                }));
+
+                var $tableStyles = $('.table-styles');
+                if ($tableStyles) {
+                    $tableStyles.replaceWith(this.layout.find('#add-table-root').html());
+                }
+
+                return this;
+            },
+
+            rootLayout: function () {
+                if (this.layout) {
+                    return this.layout
+                        .find('#add-table-root')
+                        .html();
+                }
+
+                return '';
+            },
+
+            initControls: function () {
+                //
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,241 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 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((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));
+
+                me.initControls();
+                me.renderStyles();
+            },
+
+            categoryShow: function(e) {
+                //
+            },
+
+            onStylesLoad: function () {
+                _styles = Common.SharedSettings.get('chartstyles');
+                this.renderStyles();
+            },
+
+            // Render layout
+            render: function () {
+                this.layout = $('<div/>').append(this.template({
+                    android : Common.SharedSettings.get('android'),
+                    phone   : Common.SharedSettings.get('phone'),
+                    types   : _types
+                }));
+
+                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 = $('#edit-chart-styles .item-inner');
+
+                if ($styleContainer.length > 0) {
+                    var columns = parseInt($styleContainer.width() / 60), // 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 chart-styles" style="width: 100%;">',
+                            '<% _.each(styles, function(row) { %>',
+                            '<div class="row">',
+                                '<% _.each(row, function(style) { %>',
+                                '<div data-type="<%= style.asc_getStyle() %>">',
+                                    '<img src="<%= style.asc_getImageUrl() %>" width="50px" height="50px">',
+                                '</div>',
+                                '<% }); %>',
+                            '</div>',
+                            '<% }); %>',
+                        '</div>'
+                    ].join(''), {
+                        styles: styles
+                    });
+
+                    $styleContainer.html(template);
+                }
+            },
+
+            showStyle: function () {
+                var selector = '#edit-chart-style';
+                this.showPage(selector, true);
+
+                this.paletteFillColor = new Common.UI.ThemeColorPalette({
+                    el: $('#tab-chart-fill'),
+                    transparent: true
+                });
+
+                this.fireEvent('page:show', [this, selector]);
+            },
+
+            showWrap: function () {
+                this.showPage('#edit-chart-wrap');
+            },
+
+            showReorder: function () {
+                this.showPage('#edit-chart-reorder');
+            },
+
+            showBorderColor: function () {
+                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.fireEvent('page:show', [this, selector]);
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,99 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 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((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));
+            },
+
+            categoryShow: function(e) {
+                //
+            },
+
+            // Render layout
+            render: function () {
+                this.layout = $('<div/>').append(this.template({
+                    android : Common.SharedSettings.get('android'),
+                    phone   : Common.SharedSettings.get('phone')
+                }));
+
+                return this;
+            },
+
+            rootLayout: function () {
+                if (this.layout) {
+                    return this.layout
+                        .find('#edit-link-root')
+                        .html();
+                }
+
+                return '';
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,155 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 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((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));
+
+                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')
+                }));
+
+                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');
+            },
+
+            showReplace: function () {
+                this.showPage('#edit-image-replace-view');
+            },
+
+            showReorder: function () {
+                this.showPage('#edit-image-reorder-view');
+            },
+
+            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);
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,160 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 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((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();
+            },
+
+            // Render layout
+            render: function () {
+                this.layout = $('<div/>').append(this.template({
+                    android : Common.SharedSettings.get('android'),
+                    phone   : Common.SharedSettings.get('phone')
+                }));
+
+                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,
+                    thimbSize = DE.getController('EditParagraph').getTumbSize(),
+                    $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: ' +  thimbSize.width + 'px; height: ' + thimbSize.height + 'px; background-size: contain;"></div>' +
+                                '</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 () {
+                this.showPage('#edit-paragraph-color', true);
+
+                this.paletteBackgroundColor = new Common.UI.ThemeColorPalette({
+                    el: $('.page[data-page=edit-paragraph-color] .page-content'),
+                    transparent: true
+                });
+
+                this.fireEvent('page:show', [this, '#edit-paragraph-color']);
+            },
+
+            showAdvanced: function () {
+                this.showPage('#edit-paragraph-advanced');
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,176 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'text!documenteditor/mobile/app/template/EditShape.template',
+    'jquery',
+    'underscore',
+    'backbone'
+], function (editTemplate, $, _, Backbone) {
+    'use strict';
+
+    DE.Views.EditShape = Backbone.View.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;
+
+                $('#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));
+
+                me.initControls();
+            },
+
+            categoryShow: function(e) {
+                // if ('edit-shape' == $(e.currentTarget).prop('id')) {
+                //     this.initEvents();
+                // }
+            },
+
+            // 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('#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 selector = '#edit-shape-style';
+                this.showPage(selector, true);
+
+                this.paletteFillColor = new Common.UI.ThemeColorPalette({
+                    el: $('#tab-shape-fill'),
+                    transparent: true
+                });
+
+                this.fireEvent('page:show', [this, selector]);
+            },
+
+            showWrap: function () {
+                this.showPage('#edit-shape-wrap');
+            },
+
+            showReplace: function () {
+                this.showPage('#edit-shape-replace');
+            },
+
+            showReorder: function () {
+                this.showPage('#edit-shape-reorder');
+            },
+
+            showBorderColor: function () {
+                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.fireEvent('page:show', [this, selector]);
+            }
+        }
+    })());
+});

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

@@ -0,0 +1,220 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 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((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));
+                Common.NotificationCenter.on('tablestyles:load',   _.bind(this.onStylesLoad, 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));
+
+                me.initControls();
+                me.renderStyles();
+            },
+
+            // Render layout
+            render: function () {
+                this.layout = $('<div/>').append(this.template({
+                    android : Common.SharedSettings.get('android'),
+                    phone   : Common.SharedSettings.get('phone')
+                }));
+
+                return this;
+            },
+
+            rootLayout: function () {
+                if (this.layout) {
+                    return this.layout
+                        .find('#edit-table-root')
+                        .html();
+                }
+
+                return '';
+            },
+
+            initControls: function () {
+                //
+            },
+
+            onStylesLoad: function () {
+                _styles = Common.SharedSettings.get('tablestyles');
+            },
+
+            renderStyles: function() {
+                var $editTableStyle = $('#edit-table-styles .item-inner .dataview.table-styles'),
+                    $styleContainer = $('#edit-table-styles .item-inner');
+
+                if ($editTableStyle.length < 1 && $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([
+                        '<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');
+            },
+
+            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 () {
+                this.showPage('#edit-table-style', true);
+
+                this.paletteFillColor = new Common.UI.ThemeColorPalette({
+                    el: $('#tab-table-fill'),
+                    transparent: true
+                });
+
+                this.fireEvent('page:show', [this, '#edit-table-style']);
+            },
+
+            showBorderColor: function () {
+                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.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');
+            }
+
+        }
+    })());
+});

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

@@ -0,0 +1,224 @@
+/*
+ *
+ * (c) Copyright Ascensio System Limited 2010-2016
+ *
+ * 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 Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * 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) 2016 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((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));
+
+                me.initControls();
+            },
+
+            // Render layout
+            render: function () {
+                this.layout = $('<div/>').append(this.template({
+                    android : Common.SharedSettings.get('android'),
+                    phone   : Common.SharedSettings.get('phone'),
+                    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));
+                    }
+                });
+            },
+
+            showFontColor: function () {
+                this.showPage('#edit-text-color', true);
+
+                this.paletteTextColor = new Common.UI.ThemeColorPalette({
+                    el: $('.page[data-page=edit-text-font-color] .page-content')
+                });
+
+                this.fireEvent('page:show', [this, '#edit-text-color']);
+            },
+
+            showBackgroundColor: function () {
+                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.fireEvent('page:show', [this, '#edit-text-background']);
+            },
+
+            showAdditional: function () {
+                this.showPage('#edit-text-additional');
+            },
+
+            showLineSpacing: function () {
+                this.showPage('#edit-text-linespacing');
+            },
+
+            showBullets: function () {
+                this.showPage('#edit-text-bullets');
+            },
+
+            showNumbers: function () {
+                this.showPage('#edit-text-numbers');
+            }
+
+        }
+    })());
+});

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

@@ -1,81 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.view.phone.toolbar.Search', {
-    extend: 'Ext.Toolbar',
-    xtype: 'searchtoolbar',
-
-    requires: ([
-        'Ext.field.Search'
-    ]),
-
-    config: {
-        docked      : 'top',
-        zIndex      : 10,
-        minHeight   : 52,
-        ui          : 'search'
-    },
-
-    initialize: function() {
-        this.add([
-            {
-                xtype       : 'searchfield',
-                id          : 'id-field-search',
-                placeHolder : this.searchText,
-                flex        : 1
-            },
-            {
-                xtype       : 'segmentedbutton',
-                allowToggle : false,
-                ui          : 'base',
-                items       : [
-                    {
-                        id      : 'id-btn-search-up',
-                        ui      : 'base',
-                        iconCls : 'spinner-prev',
-                        disabled: true
-                    },
-                    {
-                        id      : 'id-btn-search-down',
-                        ui      : 'base',
-                        iconCls : 'spinner-next',
-                        disabled: true
-                    }
-                ]
-            }
-        ]);
-
-        this.callParent(arguments);
-    },
-
-    searchText: 'Search'
-});

apps/documenteditor/mobile/app/view/tablet/Main.js

@@ -1,95 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.view.tablet.Main', {
-    extend: 'DE.view.Main',
-    alias: 'widget.detabletmain',
-
-    requires: ([
-        'Common.view.PopClip',
-        'DE.view.tablet.panel.FontStyle',
-        'DE.view.tablet.panel.Insert',
-        'DE.view.tablet.panel.ListStyle',
-        'DE.view.tablet.panel.ParagraphAlignment',
-        'DE.view.tablet.panel.Spacing',
-        'DE.view.tablet.panel.TextColor',
-        'DE.view.tablet.toolbar.Edit',
-        'DE.view.tablet.toolbar.Search',
-        'DE.view.tablet.toolbar.View'
-    ]),
-
-    config: {
-        cls: 'de-tablet-main',
-        fullscreen: true,
-        layout: {
-            type: 'vbox',
-            pack: 'center'
-        }
-    },
-
-    initialize: function() {
-        var me = this;
-
-        this.add(Ext.create('DE.view.tablet.toolbar.Edit', {
-            hidden      : true
-        }));
-
-        this.add(Ext.create('DE.view.tablet.toolbar.View', {
-            hidden      : true
-        }));
-
-        this.add(Ext.create('DE.view.tablet.toolbar.Search', {
-            hidden      : true
-        }));
-
-        this.add({
-            xtype   : 'container',
-            layout  : 'vbox',
-            id      : 'id-conteiner-document',
-            flex    : 1,
-            items   : [
-                {
-                    xtype   : 'container',
-                    flex    : 1,
-                    id      : 'id-sdkeditor'
-                }
-            ]
-        });
-
-        this.add({
-            xtype   : 'popclip',
-            hidden  : true
-        });
-
-        this.callParent(arguments);
-    }
-});

apps/documenteditor/mobile/app/view/tablet/panel/Font.js

@@ -1,135 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.view.tablet.panel.Font', {
-    extend: 'Common.view.PopoverPanel',
-    alias: 'widget.fontpanel',
-
-    requires: ([
-        'Ext.NavigationView',
-        'Common.component.PlanarSpinner'
-    ]),
-
-    initialize: function() {
-        var me = this;
-
-        me.add({
-            xtype       : 'navigationview',
-            id          : 'id-font-navigate',
-            autoDestroy : false,
-            cls         : 'plain',
-            defaultBackButtonText: this.backText,
-            navigationBar: {
-                height      : 44,
-                minHeight   : 44,
-                hidden      : true,
-                ui          : 'edit'
-            },
-            layout: {
-                type        : 'card',
-                animation   : null
-            },
-            items       : [
-                {
-                    xtype   : 'container',
-                    layout  : 'hbox',
-                    height  : 31,
-                    id      : 'id-font-root',
-                    style   : 'background: transparent;',
-                    items   : [
-                        {
-                            xtype   : 'button',
-                            id      : 'id-btn-fontname',
-                            ui      : 'base',
-                            style   : 'font-size: .7em;',
-                            text    : this.fontNameText,
-                            width   : 185
-                        },
-                        {
-                            xtype   : 'spacer',
-                            width   : 7
-                        },
-                        {
-                            xtype       : 'planarspinnerfield',
-                            width       : 135,
-                            minValue    : 6,
-                            maxValue    : 100,
-                            stepValue   : 1,
-                            cycle       : false,
-                            component   : {
-                                disabled : false
-                            }
-                        },
-                        {
-                            xtype   : 'spacer',
-                            width   : 7
-                        },
-                        {
-                            xtype   : 'segmentedbutton',
-                            id      : 'id-toggle-baseline',
-                            ui      : 'base',
-                            cls     : 'divided',
-                            allowDepress: true,
-                            items   : [
-                                {
-                                    id      : 'id-btn-baseline-up',
-                                    ui      : 'base',
-                                    iconCls : 'superscript'
-                                },
-                                {
-                                    id      : 'id-btn-baseline-down',
-                                    ui      : 'base',
-                                    iconCls : 'subscript'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        });
-
-        me.add({
-            xtype   : 'settingslist',
-            hidden  : true,
-            title   : this.fontNameText,
-            id      : 'id-font-name',
-            disableSelection: false,
-            variableHeights: false,
-            store   : Ext.create('Common.store.SettingsList', {})
-        });
-
-        this.callParent(arguments);
-    },
-
-    fontNameText: 'Font Name',
-    backText    : 'Back'
-});

apps/documenteditor/mobile/app/view/tablet/panel/FontStyle.js

@@ -1,77 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.view.tablet.panel.FontStyle', {
-    extend: 'Common.view.PopoverPanel',
-    alias: 'widget.fontstylepanel',
-
-    requires: ([
-        'Ext.SegmentedButton'
-    ]),
-
-    initialize: function() {
-        var me = this;
-
-        me.add({
-            xtype   : 'container',
-            layout  : 'hbox',
-            items   : [
-                {
-                    xtype   : 'segmentedbutton',
-                    id      : 'id-toggle-fontstyles',
-                    ui      : 'base',
-                    cls     : 'divided',
-                    allowMultiple: true,
-                    items   : [
-                        {
-                            id      : 'id-btn-fontstyle-bold',
-                            ui      : 'base',
-                            iconCls : 'bold'
-                        },
-                        {
-                            id      : 'id-btn-fontstyle-italic',
-                            ui      : 'base',
-                            iconCls : 'italic'
-                        },
-                        {
-                            id      : 'id-btn-fontstyle-underline',
-                            ui      : 'base',
-                            iconCls : 'underline'
-                        }
-                    ]
-                }
-            ]
-        });
-
-        this.callParent(arguments);
-    }
-});

apps/documenteditor/mobile/app/view/tablet/panel/Insert.js

@@ -1,186 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.view.tablet.panel.Insert', {
-    extend: 'Common.view.PopoverPanel',
-    alias: 'widget.insertpanel',
-
-    requires: ([
-        'Ext.NavigationView',
-        'Common.component.PlanarSpinner'
-    ]),
-
-    initialize: function() {
-        var me = this;
-
-        me.add({
-            xtype       : 'navigationview',
-            id          : 'id-insert-navigate',
-            autoDestroy : false,
-            defaultBackButtonText: this.backText,
-            navigationBar: {
-                height      : 44,
-                minHeight   : 44,
-                ui          : 'edit'
-            },
-            items       : [
-                {
-                    xtype   : 'settingslist',
-                    title   : this.insertText,
-                    id      : 'id-insert-root',
-                    scrollable: {
-                        disabled: true
-                    },
-                    store   : Ext.create('Common.store.SettingsList', {
-                        data: [
-                            {
-                                setting : this.insertTableText,
-                                icon    : 'table',
-                                group   : 'table',
-                                child   : 'id-insert-table-container'
-                            },
-                            {
-                                setting : this.insertRowText,
-                                icon    : 'insert-row',
-                                group   : 'table',
-                                id      : 'id-insert-table-row'
-                            },
-                            {
-                                setting : this.insertColumnText,
-                                icon    : 'insert-column',
-                                group   : 'table',
-                                id      : 'id-insert-table-column'
-                            },
-                            {
-                                setting : this.insertPicture,
-                                icon    : 'picture',
-                                group   : 'image',
-                                child   : 'id-insert-picture-container'
-                            }
-                        ]
-                    })
-                }
-            ]
-        });
-
-        me.add({
-            xtype   : 'container',
-            hidden  : true,
-            title   : this.tableText,
-            id      : 'id-insert-table-container',
-            padding : 10,
-            cls     : 'round',
-            items   : [
-                {
-                    xtype       : 'planarspinnerfield',
-                    id          : 'id-spinner-table-columns',
-                    margin      : '9',
-                    label       : this.columnsText,
-                    labelWidth  : '55%',
-                    minValue    : 2,
-                    maxValue    : 20,
-                    stepValue   : 1,
-                    cycle       : false
-                },
-                {
-                    xtype       : 'spacer',
-                    height      : 2
-                },
-                {
-                    xtype       : 'planarspinnerfield',
-                    id          : 'id-spinner-table-rows',
-                    margin      : '9',
-                    label       : this.rowsText,
-                    labelWidth  : '55%',
-                    minValue    : 2,
-                    maxValue    : 20,
-                    stepValue   : 1,
-                    cycle       : false
-                },
-                {
-                    xtype   : 'container',
-                    padding : '5 5',
-                    items   : [
-                        {
-                            xtype   : 'button',
-                            id      : 'id-btn-insert-table',
-                            ui      : 'light',
-                            cls     : 'border-radius-10',
-                            height  : 44,
-                            text    : this.insertTableText
-                        }
-                    ]
-                }
-            ]
-        });
-
-        me.add({
-            xtype   : 'settingslist',
-            title   : this.pictureText,
-            hidden  : true,
-            id      : 'id-insert-picture-container',
-            ui      : 'round',
-            scrollable: {
-                disabled: true
-            },
-            store   : Ext.create('Common.store.SettingsList', {
-                data: [
-                    {
-                        setting : '<div class="btn-input-image" style="display: inline-block;" id="id-insert-picture-inline">' + this.pictureUploadInline + '<input style="height: 44px;" type="file" accept="image/*" capture="camera"></div>',
-//                        icon    : 'spacing',
-                        group   : 'wrap'
-                    },
-                    {
-                        setting : '<div class="btn-input-image" style="display: inline-block;" id="id-insert-picture-float">' + this.pictureUploadFloat + '<input style="height: 44px;" type="file" accept="image/*" capture="camera"></div>',
-//                        icon    : 'indent-inc',
-                        group   : 'wrap'
-                    }
-                ]
-            })
-        });
-
-        this.callParent(arguments);
-    },
-
-    backText            : 'Back',
-    insertText          : 'Insert',
-    insertTableText     : 'Insert Table',
-    insertRowText       : 'Insert Row',
-    insertColumnText    : 'Insert Column',
-    insertPicture       : 'Insert Picture',
-    tableText           : 'Table',
-    columnsText         : 'Columns',
-    rowsText            : 'Rows',
-    pictureText         : 'Picture',
-    pictureUploadInline : 'Insert Inline',
-    pictureUploadFloat  : 'Insert Float'
-});

apps/documenteditor/mobile/app/view/tablet/panel/ListStyle.js

@@ -1,249 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.view.tablet.panel.ListStyle', {
-    extend: 'Common.view.PopoverPanel',
-    alias: 'widget.liststylepanel',
-
-    requires: ([
-        'Ext.NavigationView',
-        'Common.component.SettingsList'
-    ]),
-
-    initialize: function() {
-        var me = this;
-
-        me.add({
-            xtype       : 'navigationview',
-            id          : 'id-liststyle-navigate',
-            autoDestroy : false,
-            defaultBackButtonText: this.backText,
-            navigationBar: {
-                height      : 44,
-                minHeight   : 44,
-                ui          : 'edit'
-            },
-
-            items: [
-                {
-                    xtype   : 'settingslist',
-                    title   : this.listStyleText,
-                    id      : 'id-liststyle-root',
-                    ui      : 'round',
-                    scrollable: {
-                        disabled: true
-                    },
-                    store   : Ext.create('Common.store.SettingsList', {
-                        data: [
-                            {
-                                setting : this.bulletsText,
-                                icon    : 'bullets',
-                                group   : 'markers',
-                                child   : 'id-liststyle-bullets'
-                            },
-                            {
-                                setting : this.numberingText,
-                                icon    : 'numbering',
-                                group   : 'markers',
-                                child   : 'id-liststyle-numbering'
-                            },
-                            {
-                                setting : this.outlineText,
-                                icon    : 'outline',
-                                group   : 'markers',
-                                child   : 'id-liststyle-outline'
-                            },
-                            {
-                                setting : this.incIndentText,
-                                icon    : 'indent-inc',
-                                group   : 'indent',
-                                id      : 'id-list-indent-increment'
-                            },
-                            {
-                                setting : this.decIndentText,
-                                icon    : 'indent-dec',
-                                group   : 'indent',
-                                id      : 'id-list-indent-decrement'
-                            }
-                        ]
-                    })
-                }
-            ]
-        });
-
-        me.add({
-            title   : this.bulletsText,
-            hidden  : true,
-            id      : 'id-liststyle-bullets',
-            xtype   : 'container',
-            layout  : 'vbox',
-            cls     : 'round',
-            items   : [
-                {
-                    xtype   : 'dataview',
-                    flex    : 1,
-                    cls     : 'icon-view bullets',
-                    action  : 'style',
-                    style   : 'display: inline-block;',
-                    disableSelection: true,
-                    scrollable: {
-                        disabled: true
-                    },
-                    store   : {
-                        field   : ['bullet', 'cls', 'type', 'subtype'],
-                        data    : [
-                            {bullet: 'none',     type: 0, subtype:-1, cls: 'top-left'},
-                            {bullet: 'bullet-0', type: 0, subtype: 1, cls: ''},
-                            {bullet: 'bullet-1', type: 0, subtype: 2, cls: ''},
-                            {bullet: 'bullet-2', type: 0, subtype: 3, cls: 'top-right'},
-                            {bullet: 'bullet-3', type: 0, subtype: 4, cls: 'bottom-left'},
-                            {bullet: 'bullet-4', type: 0, subtype: 5, cls: ''},
-                            {bullet: 'bullet-5', type: 0, subtype: 6, cls: ''},
-                            {bullet: 'bullet-6', type: 0, subtype: 7, cls: 'bottom-right'}
-                        ]
-                    },
-                    itemTpl: Ext.create('Ext.XTemplate',
-                        '<tpl for=".">',
-                            '<div class="item-inner {cls}">',
-                                '<tpl if="bullet == \'none\'">',
-                                    '<div class="text">' + me.noneText + '</div>',
-                                '<tpl else>',
-                                    '<div class="icon {bullet}">&nbsp;</div>',
-                                '</tpl>',
-                            '</div>',
-                        '</tpl>'
-                    )
-                }
-            ]
-        });
-
-        me.add({
-            title   : this.numberingText,
-            hidden  : true,
-            id      : 'id-liststyle-numbering',
-            xtype   : 'container',
-            layout  : 'vbox',
-            cls     : 'round',
-            items   : [
-                {
-                    xtype   : 'dataview',
-                    flex    : 1,
-                    cls     : 'icon-view numbering',
-                    action  : 'style',
-                    style   : 'display: inline-block;',
-                    disableSelection: true,
-                    scrollable: {
-                        disabled: true
-                    },
-                    store   : {
-                        field   : ['numbering', 'cls', 'type', 'subtype'],
-                        data    : [
-                            {numbering: 'none',        type: 1, subtype:-1, cls: 'top-left'},
-                            {numbering: 'numbering-0', type: 1, subtype: 4, cls: ''},
-                            {numbering: 'numbering-1', type: 1, subtype: 5, cls: ''},
-                            {numbering: 'numbering-2', type: 1, subtype: 6, cls: 'top-right'},
-                            {numbering: 'numbering-3', type: 1, subtype: 1, cls: 'bottom-left'},
-                            {numbering: 'numbering-4', type: 1, subtype: 2, cls: ''},
-                            {numbering: 'numbering-5', type: 1, subtype: 3, cls: ''},
-                            {numbering: 'numbering-6', type: 1, subtype: 7, cls: 'bottom-right'}
-                        ]
-                    },
-                    itemTpl: Ext.create('Ext.XTemplate',
-                        '<tpl for=".">',
-                            '<div class="item-inner {cls}">',
-                                '<tpl if="numbering == \'none\'">',
-                                    '<div class="text">' + me.noneText + '</div>',
-                                '<tpl else>',
-                                    '<div class="icon {numbering}">&nbsp;</div>',
-                                '</tpl>',
-                            '</div>',
-                        '</tpl>'
-                    )
-                }
-            ]
-        });
-
-
-        me.add({
-            title   : this.outlineText,
-            hidden  : true,
-            id      : 'id-liststyle-outline',
-            xtype   : 'container',
-            layout  : 'vbox',
-            cls     : 'round',
-            items   : [
-                {
-                    xtype   : 'dataview',
-                    flex    : 1,
-                    cls     : 'icon-view outline',
-                    action  : 'style',
-                    style   : 'display: inline-block;',
-                    disableSelection: true,
-                    scrollable: {
-                        disabled: true
-                    },
-                    store   : {
-                        field   : ['outline', 'cls', 'type', 'subtype'],
-                        data    : [
-                            {outline: 'none',      type: 2, subtype:-1, cls: 'top-left bottom-left'},
-                            {outline: 'outline-0', type: 2, subtype: 1, cls: ''},
-                            {outline: 'outline-1', type: 2, subtype: 2, cls: ''},
-                            {outline: 'outline-2', type: 2, subtype: 3, cls: 'top-right bottom-right'}
-                        ]
-                    },
-                    itemTpl: Ext.create('Ext.XTemplate',
-                        '<tpl for=".">',
-                            '<div class="item-inner {cls}">',
-                                '<tpl if="outline == \'none\'">',
-                                    '<div class="text">' + me.noneText + '</div>',
-                                '<tpl else>',
-                                    '<div class="icon {outline}">&nbsp;</div>',
-                                '</tpl>',
-                            '</div>',
-                        '</tpl>'
-                    )
-                }
-            ]
-        });
-
-        this.callParent(arguments);
-    },
-
-    backText        : 'Back',
-    listStyleText   : 'List Style',
-    bulletsText     : 'Bullets',
-    numberingText   : 'Numbering',
-    outlineText     : 'Outline',
-    incIndentText   : 'Increment indent',
-    decIndentText   : 'Decrement Indent',
-    noneText        : 'none'
-});

apps/documenteditor/mobile/app/view/tablet/panel/ParagraphAlignment.js

@@ -1,77 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.view.tablet.panel.ParagraphAlignment', {
-    extend: 'Common.view.PopoverPanel',
-    alias: 'widget.paragraphalignmentpanel',
-
-    initialize: function() {
-        var me = this;
-
-        me.add({
-            xtype   : 'container',
-            layout  : 'hbox',
-            items   : [
-                {
-                    xtype   : 'segmentedbutton',
-                    id      : 'id-toggle-paragraphalignment',
-                    ui      : 'base',
-                    cls     : 'divided',
-                    items   : [
-                        {
-                            id      : 'id-btn-paragraphalignment-left',
-                            ui      : 'base',
-                            iconCls : 'align-left'
-                        },
-                        {
-                            id      : 'id-btn-paragraphalignment-center',
-                            ui      : 'base',
-                            iconCls : 'align-center'
-                        },
-                        {
-                            id      : 'id-btn-paragraphalignment-right',
-                            ui      : 'base',
-                            iconCls : 'align-right'
-                        },
-                        {
-                            id      : 'id-btn-paragraphalignment-fill',
-                            ui      : 'base',
-                            iconCls : 'align-fill'
-                        }
-                    ]
-                }
-            ]
-        });
-
-        this.callParent(arguments);
-    }
-});

apps/documenteditor/mobile/app/view/tablet/panel/Spacing.js

@@ -1,118 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.view.tablet.panel.Spacing', {
-    extend: 'Common.view.PopoverPanel',
-    alias: 'widget.spacingpanel',
-
-    requires: ([
-        'Ext.NavigationView',
-        'Common.component.SettingsList'
-    ]),
-
-    initialize: function() {
-        var me = this;
-
-        me.add({
-            xtype       : 'navigationview',
-            id          : 'id-spacing-navigate',
-            autoDestroy : false,
-            defaultBackButtonText: this.backText,
-            navigationBar: {
-                height      : 44,
-                minHeight   : 44,
-                ui          : 'edit'
-            },
-
-            items: [
-                {
-                    xtype   : 'settingslist',
-                    title   : this.spacingText,
-                    id      : 'id-spacing-root',
-                    ui      : 'round',
-                    scrollable: {
-                        disabled: true
-                    },
-                    store   : Ext.create('Common.store.SettingsList', {
-                        data: [
-                            {
-                                setting : this.lineSpacingText,
-                                icon    : 'spacing',
-                                group   : 'line',
-                                child   : 'id-spacing-linespacing'
-                            },
-                            {
-                                setting : this.incIndentText,
-                                icon    : 'indent-inc',
-                                group   : 'indent',
-                                id      : 'id-linespacing-increaseindent'
-                            },
-                            {
-                                setting : this.decIndentText,
-                                icon    : 'indent-dec',
-                                group   : 'indent',
-                                id      : 'id-linespacing-decrementindent'
-                            }
-                        ]
-                    })
-                }
-            ]
-        });
-
-        me.add({
-            title           : this.spacingText,
-            hidden          : true,
-            id              : 'id-spacing-linespacing',
-            xtype           : 'settingslist',
-            disableSelection: false,
-            allowDeselect   : true,
-            store           : Ext.create('Common.store.SettingsList', {
-                data: [
-                    {setting: '1.0',    group: 'spacing'},
-                    {setting: '1.15',   group: 'spacing'},
-                    {setting: '1.5',    group: 'spacing'},
-                    {setting: '2',      group: 'spacing'},
-                    {setting: '2.5',    group: 'spacing'},
-                    {setting: '3.0',    group: 'spacing'}
-                ]
-            })
-        });
-
-        this.callParent(arguments);
-    },
-
-    backText        : 'Back',
-    spacingText     : 'Spacing',
-    lineSpacingText : 'Paragraph Line Spacing',
-    incIndentText   : 'Increase Indent',
-    decIndentText   : 'Decrement Indent'
-});

apps/documenteditor/mobile/app/view/tablet/panel/TextColor.js

@@ -1,194 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.view.tablet.panel.TextColor', {
-    extend: 'Common.view.PopoverPanel',
-    alias: 'widget.textcolorsettingspanel',
-
-    requires: ([
-        'Ext.NavigationView',
-        'Common.component.SettingsList'
-    ]),
-
-    initialize: function() {
-        var me = this;
-
-        me.add({
-            xtype       : 'navigationview',
-            id          : 'id-textcolor-navigate',
-            autoDestroy : false,
-            defaultBackButtonText: this.backText,
-            navigationBar: {
-                height      : 44,
-                minHeight   : 44,
-                ui          : 'edit'
-            },
-
-            items: [
-                {
-                    xtype   : 'settingslist',
-                    title   : this.colorText,
-                    id      : 'id-textcolor-root',
-                    scrollable: {
-                        disabled: true
-                    },
-                    store   : Ext.create('Common.store.SettingsList', {
-                        data: [
-                            {
-                                setting : this.highlightColorText,
-                                icon    : 'highlightcolor',
-                                group   : 'color',
-                                child   : 'id-textcolor-highlight'
-                            },
-                            {
-                                setting : this.textColorText,
-                                icon    : 'textcolor',
-                                group   : 'color',
-                                child   : 'id-textcolor-text'
-                            }
-                        ]
-                    })
-                }
-            ]
-        });
-
-        me.add({
-            title   : this.highlightColorText,
-            hidden  : true,
-            id      : 'id-textcolor-highlight',
-            xtype   : 'container',
-            layout  : 'vbox',
-            cls     : 'round',
-            items   : [
-                {
-                    xtype   : 'dataview',
-                    flex    : 1,
-                    cls     : 'color',
-                    style   : 'display: inline-block;',
-                    store   : {
-                        field   : ['color'],
-                        data    : [
-                            {color: 'FFFF00'}, {color: '00FF00'}, {color: '00FFFF'}, {color: 'FF00FF'},
-                            {color: '0000FF'}, {color: 'FF0000'}, {color: '00008B'}, {color: '008B8B'},
-                            {color: '006400'}, {color: '800080'}, {color: '8B0000'}, {color: '808000'},
-                            {color: 'FFFFFF'}, {color: 'D3D3D3'}, {color: 'A9A9A9'}, {color: '000000'}
-                        ]
-                    },
-                    itemTpl: Ext.create('Ext.XTemplate',
-                        '<tpl for=".">',
-                            '<div class="item-inner" style="background-color: #{color};"></div>',
-                        '</tpl>'
-                    )
-                },
-                {
-                    xtype   : 'container',
-                    padding : '12 18',
-                    items   : [
-                        {
-                            xtype   : 'button',
-                            id      : 'id-btn-highlight-none',
-                            ui      : 'light',
-                            cls     : 'border-radius-10',
-                            height  : 44,
-                            text    : this.noFillText
-                        }
-                    ]
-                }
-            ]
-        });
-
-        me.add({
-            title   : this.textColorText,
-            hidden  : true,
-            id      : 'id-textcolor-text',
-            xtype   : 'container',
-            layout  : 'vbox',
-            cls     : 'round',
-            items   : [
-                {
-                    xtype   : 'dataview',
-                    flex    : 1,
-                    cls     : 'color',
-                    style   : 'display: inline-block;',
-                    store   : {
-                        field   : ['color'],
-                        data    : [
-                            {color: 'FFFFFF'}, {color: 'EBEBEB'}, {color: 'D6D6D6'}, {color: 'C0C0C0'},
-                            {color: 'AAAAAA'}, {color: '929292'}, {color: '7A7A7A'}, {color: '606060'},
-                            {color: '444444'}, {color: '232323'}, {color: '000000'}, {color: '0C3649'},
-                            {color: '0E1957'}, {color: '14003B'}, {color: '2E013E'}, {color: '3A051C'},
-                            {color: '580504'}, {color: '561C04'}, {color: '553403'}, {color: '523E02'},
-                            {color: '646302'}, {color: '4E5703'}, {color: '263F0E'}, {color: '144C64'},
-                            {color: '18297A'}, {color: '1F0052'}, {color: '440259'}, {color: '530D2A'},
-                            {color: '7D0C08'}, {color: '772907'}, {color: '764A05'}, {color: '745904'},
-                            {color: '8A8803'}, {color: '6D780A'}, {color: '395919'}, {color: '216C8E'},
-                            {color: '253AA9'}, {color: '310076'}, {color: '60047C'}, {color: '74153F'},
-                            {color: 'AE1610'}, {color: 'A63D0E'}, {color: 'A3690B'}, {color: 'A27D09'},
-                            {color: 'C0BF06'}, {color: '98A811'}, {color: '507C27'}, {color: '2C8BB3'},
-                            {color: '314DD5'}, {color: '3E0094'}, {color: '7A069F'}, {color: '941E51'},
-                            {color: 'DA1E17'}, {color: 'D15014'}, {color: 'CE8611'}, {color: 'CC9F0E'},
-                            {color: 'F0EF0A'}, {color: 'C0D41B'}, {color: '689F34'}, {color: '36A1D7'},
-                            {color: '3D55FE'}, {color: '5301B3'}, {color: '980ABD'}, {color: 'B2275F'},
-                            {color: 'F83D26'}, {color: 'F86A1D'}, {color: 'F7AC16'}, {color: 'F7CA12'},
-                            {color: 'FAFF44'}, {color: 'D6EF39'}, {color: '79BE40'}, {color: '41C5FB'},
-                            {color: '5581FD'}, {color: '6800EB'}, {color: 'BD10F3'}, {color: 'DE337D'},
-                            {color: 'F86056'}, {color: 'F8864D'}, {color: 'F8B544'}, {color: 'F8CD44'},
-                            {color: 'FBFA6D'}, {color: 'E1F266'}, {color: '97D65F'}, {color: '6CD4FC'},
-                            {color: '81A3FE'}, {color: '8D3BFD'}, {color: 'D145FE'}, {color: 'E76DA0'},
-                            {color: 'FA8B84'}, {color: 'F9A67F'}, {color: 'F9C879'}, {color: 'FADA79'},
-                            {color: 'FBFB96'}, {color: 'E8F590'}, {color: 'B2E08B'}, {color: '9FE3FD'},
-                            {color: 'AEC3FE'}, {color: 'B385FD'}, {color: 'E18BFF'}, {color: 'EFA2C1'},
-                            {color: 'FBB4B0'}, {color: 'FBC5AC'}, {color: 'FBDAA9'}, {color: 'FBE6A9'},
-                            {color: 'FCFDBA'}, {color: 'F0F9B8'}, {color: 'CDEAB5'}, {color: 'CFF0FE'},
-                            {color: 'D6E2FE'}, {color: 'DAC7FE'}, {color: 'F0C7FE'}, {color: 'F6D2E1'},
-                            {color: 'FCDAD9'}, {color: 'FDE2D7'}, {color: 'FDEDD5'}, {color: 'FDF2D5'},
-                            {color: 'FDFDDD'}, {color: 'F7FBDB'}, {color: 'E0EED4'}
-                        ]
-                    },
-                    itemTpl: Ext.create('Ext.XTemplate',
-                        '<tpl for=".">',
-                            '<div class="item-inner" style="background-color: #{color};"></div>',
-                        '</tpl>'
-                    )
-                }
-            ]
-        });
-
-        this.callParent(arguments);
-    },
-
-    backText            : 'Back',
-    colorText           : 'Color',
-    highlightColorText  : 'Highlight color',
-    textColorText       : 'Text color',
-    noFillText          : 'No Fill'
-});

apps/documenteditor/mobile/app/view/tablet/toolbar/Edit.js

@@ -1,241 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.view.tablet.toolbar.Edit', {
-    extend: 'Ext.Toolbar',
-    xtype: 'edittoolbar',
-
-    requires: ([
-        'Common.component.RepeatableButton'
-    ]),
-
-    config: {
-        docked      : 'top',
-        zIndex      : 5,
-        minHeight   : 44,
-        ui          : 'edit'
-    },
-
-    initialize: function() {
-        var me = this;
-
-        this.add([
-            {
-                xtype   : 'toolbar',
-                minHeight: 40,
-                flex    : 1,
-                style   : 'margin: 0; padding: 0;',
-                items   : [
-                    {
-                        id      : 'id-tb-btn-done',
-                        ui      : 'base-blue',
-                        cls     : 'text-offset-12',
-                        text    : this.doneText
-                    },
-                    {
-                        id      : 'id-tb-btn-save',
-                        ui      : 'base',
-                        iconCls : 'save'
-                    }
-                ]
-            },
-            {
-                xtype   : 'repeatablebutton',
-                id      : 'id-tb-btn-undo',
-                disabled: true,
-                ui      : 'base',
-                iconCls : 'undo'
-            },
-            {
-                xtype   : 'spacer',
-                width   : 30
-            },
-            {
-                id      : 'id-tb-btn-font',
-                ui      : 'base',
-                cls     : 'text-offset-30',
-                text    : this.fontText
-            },
-            {
-                id      : 'id-tb-btn-style',
-                ui      : 'base',
-                iconCls : 'font-style'
-            },
-            {
-                id      : 'id-tb-btn-color',
-                ui      : 'base',
-                iconCls : 'font-color'
-            },
-            {
-                xtype   : 'spacer',
-                width   : 30
-            },
-            {
-                id      : 'id-tb-btn-align',
-                ui      : 'base',
-                iconCls : 'align-left'
-            },
-            {
-                id      : 'id-tb-btn-liststyle',
-                ui      : 'base',
-                iconCls : 'bullets'
-            },
-            {
-                id      : 'id-tb-btn-paragraph',
-                ui      : 'base',
-                iconCls : 'spacing'
-            },
-            {
-                xtype   : 'spacer',
-                width   : 30
-            },
-            {
-                id      : 'id-tb-btn-table',
-                ui      : 'base',
-                iconCls : 'insert'
-            },
-            {
-                xtype   : 'toolbar',
-                minHeight: 40,
-                flex    : 1,
-                style   : 'margin: 0; padding: 0;',
-                layout  : {
-                    type    : 'hbox',
-                    pack    : 'end'
-                },
-                items   : [
-                    {
-                        id      : 'id-tb-btn-share',
-                        ui      : 'base',
-                        iconCls : 'share'
-                    }
-                ]
-            }
-        ]);
-
-        this.add({
-            xtype   : 'fontpanel',
-            layout  : 'fit',
-            ui      : 'settings',
-            width   : 440,
-            height  : 46,
-            id      : 'id-panel-font',
-            top     : 0,
-            left    : 0,
-            hidden  : true,
-            hideOnMaskTap: true
-        });
-
-        this.add({
-            xtype   : 'fontstylepanel',
-            layout  : 'fit',
-            ui      : 'settings',
-            width   : 154,
-            height  : 45,
-            id      : 'id-panel-font-style',
-            top     : 0,
-            left    : 0,
-            hidden  : true,
-            hideOnMaskTap: true
-        });
-
-        this.add({
-            xtype   : 'textcolorsettingspanel',
-            layout  : 'fit',
-            ui      : 'settings',
-            width   : 350,
-            height  : 172,
-            id      : 'id-panel-text-color',
-            top     : 0,
-            left    : 0,
-            hidden  : true,
-            hideOnMaskTap: true
-        });
-
-        this.add({
-            xtype   : 'paragraphalignmentpanel',
-            layout  : 'fit',
-            ui      : 'settings',
-            width   : 205,
-            height  : 45,
-            id      : 'id-panel-paragraph-alignment',
-            top     : 0,
-            left    : 0,
-            hidden  : true,
-            hideOnMaskTap: true
-        });
-
-        this.add({
-            xtype   : 'liststylepanel',
-            layout  : 'fit',
-            ui      : 'settings',
-            width   : 337,
-            height  : 328,
-            id      : 'id-panel-liststyle',
-            top     : 0,
-            left    : 0,
-            hidden  : true,
-            hideOnMaskTap: true
-        });
-
-        this.add({
-            xtype   : 'spacingpanel',
-            layout  : 'fit',
-            ui      : 'settings',
-            width   : 350,
-            height  : 235,
-            id      : 'id-panel-spacing',
-            top     : 0,
-            left    : 0,
-            hidden  : true,
-            hideOnMaskTap: true
-        });
-
-        this.add({
-            xtype   : 'insertpanel',
-            layout  : 'fit',
-            ui      : 'settings',
-            width   : 350,
-            height  : 283,
-            id      : 'id-panel-insert',
-            top     : 0,
-            left    : 0,
-            hidden  : true,
-            hideOnMaskTap: true
-        });
-
-        this.callParent(arguments);
-    },
-
-    doneText: 'Done',
-    fontText: 'Font'
-});

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

@@ -1,82 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.view.tablet.toolbar.Search', {
-    extend: 'Ext.Toolbar',
-    xtype: 'searchtoolbar',
-
-    requires: ([
-        'Ext.Label',
-        'Ext.field.Search'
-    ]),
-
-    config: {
-        docked      : 'top',
-        zIndex      : 10,
-        minHeight   : 52,
-        ui          : 'search'
-    },
-
-    initialize: function() {
-        this.add([
-            {
-                xtype       : 'searchfield',
-                id          : 'id-field-search',
-                placeHolder : this.searchText,
-                flex        : 1
-            },
-            {
-                xtype       : 'segmentedbutton',
-                allowToggle : false,
-                ui          : 'base',
-                items       : [
-                    {
-                        id      : 'id-btn-search-up',
-                        ui      : 'base',
-                        iconCls : 'spinner-prev',
-                        disabled: true
-                    },
-                    {
-                        id      : 'id-btn-search-down',
-                        ui      : 'base',
-                        iconCls : 'spinner-next',
-                        disabled: true
-                    }
-                ]
-            }
-        ]);
-
-        this.callParent(arguments);
-    },
-
-    searchText: 'Search'
-});

apps/documenteditor/mobile/app/view/tablet/toolbar/View.js

@@ -1,120 +0,0 @@
-/*
- *
- * (c) Copyright Ascensio System Limited 2010-2016
- *
- * 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 Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * 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
- *
-*/
-Ext.define('DE.view.tablet.toolbar.View', {
-    extend: 'Ext.Toolbar',
-    xtype: 'viewtoolbar',
-
-    config: {
-        docked      : 'top',
-        zIndex      : 10,
-        minHeight   : 44,
-        ui          : 'edit'
-    },
-
-    initialize: function() {
-        this.add([
-            {
-                xtype   : 'toolbar',
-                minHeight: 40,
-                flex    : 1,
-                style   : 'margin: 0; padding: 0;',
-                items   : [
-                    {
-                        id      : 'id-tb-btn-view-done',
-                        ui      : 'base-blue',
-                        cls     : 'text-offset-12',
-                        hidden  : true,
-                        text    : this.doneText
-                    },
-                    {
-                        id      : 'id-tb-btn-editmode',
-                        ui      : 'base',
-                        cls     : 'text-offset-12',
-                        text    : this.editText
-                    },
-                    {
-                        id      : 'id-tb-btn-readable',
-                        ui      : 'base',
-                        cls     : 'text-offset-12',
-                        text    : this.readerText
-                    }
-                ]
-            },
-            {
-                id      : 'id-tb-btn-search',
-                ui      : 'base',
-                iconCls : 'search'
-            },
-            {
-                id      : 'id-tb-btn-incfontsize',
-                ui      : 'base',
-                iconCls : 'textbigger',
-                hidden  : true
-            },
-            {
-                id      : 'id-tb-btn-decfontsize',
-                ui      : 'base',
-                iconCls : 'textless',
-                hidden  : true
-            },
-            {
-                id      : 'id-tb-btn-fullscreen',
-                ui      : 'base',
-                iconCls : 'fullscreen'
-            },
-            {
-                xtype   : 'toolbar',
-                minHeight: 40,
-                style   : 'margin: 0; padding: 0;',
-                layout  : {
-                    type    : 'hbox',
-                    pack    : 'end'
-                },
-                flex    : 1,
-                items   : [
-                    {
-                        id      : 'id-tb-btn-view-share',
-                        ui      : 'base',
-                        iconCls : 'share'
-                    }
-                ]
-            }
-        ]);
-
-        this.callParent(arguments);
-    },
-
-    doneText    : 'Done',
-    editText    : 'Edit',
-    readerText  : 'Reader'
-});

apps/documenteditor/mobile/index.html

@@ -1,10 +1,16 @@
 <!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>
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-        <meta name="description" content="" />
-        <meta name="keywords" content="" />
+
+        <link href="http://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
+        <!-- App styles -->
 
         <!-- splash -->
 
@@ -174,52 +180,67 @@
                 100%    { top:100px; background: #55bce6; }
             }
         </style>
-
-        <!-- debug -->
-        <!--<script src="http://192.168.3.97:3030/target/target-script-min.js#anonymous"></script>-->
-
-        <!-- vendor -->
-        <script type="text/javascript" src="../../../vendor/touch/sencha-touch-debug.js"></script>
-        <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/sockjs/sockjs.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/underscore/underscore-min.js"></script>
-        <script type="text/javascript" src="../../../vendor/megapixel/src/megapix-image.js"></script>
-        <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
-        <script type="text/javascript" src="../../../vendor/jszip/jszip.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/jszip-utils/jszip-utils.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/jsrsasign/jsrsasign-latest-all-min.js"></script>
-
-        <!-- Application -->
-
-        <!--<link rel="stylesheet" href="resources/css/application-normal.css" type="text/css"/>-->
+    </head>
+    <body>
         <script type="text/javascript">
-            var injectStyleElement = function(url) {
-                var style = document.createElement('link'),
-                        documentHead = typeof document != 'undefined' && (document.head || document.getElementsByTagName('head')[0]);
+            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 = {};
 
-                style.rel = 'stylesheet';
-                style.href = url;
-                style.type = 'text/css';
+                while (e = r.exec(q))
+                    urlParams[d(e[1])] = d(e[2]);
 
-                if (documentHead) {
-                    documentHead.appendChild(style);
-                    return true;
-                }
+                return urlParams;
+            }
 
-                return false;
-            };
+            function encodeUrlParam(str) {
+                return str.replace(/&/g, '&amp;')
+                        .replace(/"/g, '&quot;')
+                        .replace(/'/g, '&#39;')
+                        .replace(/</g, '&lt;')
+                        .replace(/>/g, '&gt;');
+            }
 
-            injectStyleElement((window.devicePixelRatio > 1)
-                ? 'resources/css/application-retina.css'
-                : 'resources/css/application-normal.css'
-            );
+            var params = getUrlParams(),
+                lang = (params["lang"] || 'en').split("-")[0],
+                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                margin = (customer !== '') ? 50 : 20,
+                loading = 'Loading...',
+                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+            if ( lang == 'de')      loading = 'Ladevorgang...';
+            else if ( lang == 'es') loading = 'Cargando...';
+            else if ( lang == 'fr') loading = 'Chargement en cours...';
+            else if ( lang == 'it') loading = 'Caricamento in corso...';
+            else if ( lang == 'pt') loading = 'Carregando...';
+            else if ( lang == 'ru') loading = 'Загрузка...';
+            else if ( lang == 'sl') loading = 'Nalaganje...';
+            else if ( lang == 'tr') loading = 'Yükleniyor...';
+
+            document.write(
+                '<div id="loading-mask" class="loadmask">' +
+                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                        ((logo!==null) ? logo :
+                        '<div class="loader-page-romb">' +
+                            '<div class="romb" id="blue"></div>' +
+                            '<div class="romb" id="green"></div>' +
+                            '<div class="romb" id="red"></div>' +
+                        '</div>') +
+                    '</div>' +
+                    '<div class="loader-page-text">' +  customer +
+                    '<div class="loader-page-text-loading">' + loading + '</div>' +
+                    '</div>' +
+                '</div>');
         </script>
 
-        <script type="text/javascript" src="../../common/Analytics.js"></script>
-        <script type="text/javascript" src="../../common/Gateway.js"></script>
-        <script type="text/javascript" src="../../common/mobile/loader.js"></script>
-        <script type="text/javascript" src="app.js"></script>
-        <script type="text/javascript" src="../../common/locale.js"></script>
+        <div id="viewport"></div>
+
+        <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="../sdk_dev_scripts.js"></script>
         <script>
@@ -227,67 +248,8 @@
                 document.write('<script type="text/javascript" src="' + item + '"><\/script>');
             });
         </script>
-    </head>
-    <body>
-        <script type="text/javascript">
-            if (!(Ext.browser.is.WebKit && (Ext.os.is.iOS || Ext.os.is.Android || Ext.os.is.Desktop))) {
-                document.write(
-                    '<div id="unsuported-view-id" class="unsuported-view"></div>'
-                );
-            } else {
-                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 = {};
+        <!-- application -->
+        <script data-main="app-dev" src="../../../vendor/requirejs/require.js"></script>
 
-                    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],
-                    customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
-                    margin = (customer !== '') ? 50 : 20,
-                    loading = 'Loading...',
-                    logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
-
-                if ( lang == 'de')      loading = 'Ladevorgang...';
-                else if ( lang == 'es') loading = 'Cargando...';
-                else if ( lang == 'fr') loading = 'Chargement en cours...';
-                else if ( lang == 'it') loading = 'Caricamento in corso...';
-                else if ( lang == 'pt') loading = 'Carregando...';
-                else if ( lang == 'ru') loading = 'Загрузка...';
-                else if ( lang == 'sl') loading = 'Nalaganje...';
-                else if ( lang == 'tr') loading = 'Yükleniyor...';
-
-                document.write(
-                    '<div id="loading-mask" class="loadmask">' +
-                        '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                            ((logo!==null) ? logo :
-                            '<div class="loader-page-romb">' +
-                                '<div class="romb" id="blue"></div>' +
-                                '<div class="romb" id="green"></div>' +
-                                '<div class="romb" id="red"></div>' +
-                            '</div>') +
-                        '</div>' +
-                        '<div class="loader-page-text">' +  customer +
-                        '<div class="loader-page-text-loading">' + loading + '</div>' +
-                        '</div>' +
-                    '</div>');
-            }
-        </script>
     </body>
 </html>

apps/documenteditor/mobile/index.html.deploy

@@ -1,10 +1,15 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <title>ONLYOFFICE Documents</title>
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-        <meta name="description" content="" />
-        <meta name="keywords" content="" />
+        <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 Document Editor</title>
+
+        <link href="http://fonts.googleapis.com/css?family=Roboto:400,300,500,700" rel="stylesheet" type="text/css">
 
         <!-- splash -->
 
@@ -174,111 +179,64 @@
                 100%    { top:100px; background: #55bce6; }
             }
         </style>
-
-        <!-- vendor -->
-
-        <script type="text/javascript" src="../../../vendor/touch/sencha-touch-all.js"></script>
-        <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/sockjs/sockjs.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/underscore/underscore-min.js"></script>
-        <script type="text/javascript" src="../../../vendor/megapixel/megapix-image-min.js"></script>
-        <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
-        <script type="text/javascript" src="../../../vendor/jszip/jszip.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/jszip-utils/jszip-utils.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/jsrsasign/jsrsasign-latest-all-min.js"></script>
-
-        <!-- Application -->
-
-        <script type="text/javascript">
-            var injectStyleElement = function(url) {
-                var style = document.createElement('link'),
-                        documentHead = typeof document != 'undefined' && (document.head || document.getElementsByTagName('head')[0]);
-
-                style.rel = 'stylesheet';
-                style.href = url;
-                style.type = 'text/css';
-
-                if (documentHead) {
-                    documentHead.appendChild(style);
-                    return true;
-                }
-
-                return false;
-            };
-
-            injectStyleElement((window.devicePixelRatio > 1)
-                ? 'resources/css/application-retina.css'
-                : 'resources/css/application-normal.css'
-            );
-        </script>
-
-        <script type="text/javascript" src="../../../apps/documenteditor/mobile/app-all.js"></script>
-        
-        <!-- SDK -->
-
-        <script type="text/javascript" src="../../../../sdkjs/common/AllFonts.js"></script>
-        <script type="text/javascript" src="../../../../sdkjs/word/sdk-all-min.js"></script>
     </head>
     <body>
         <script type="text/javascript">
-            if (!(Ext.browser.is.WebKit && (Ext.os.is.iOS || Ext.os.is.Android || Ext.os.is.Desktop))) {
-                document.write(
-                    '<div id="unsuported-view-id" class="unsuported-view"></div>'
-                );
-            } else {
-                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 = {};
+            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]);
+                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],
-                    customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
-                    margin = (customer !== '') ? 50 : 20,
-                    loading = 'Loading...',
-                    logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
-
-                if ( lang == 'de')      loading = 'Ladevorgang...';
-                else if ( lang == 'es') loading = 'Cargando...';
-                else if ( lang == 'fr') loading = 'Chargement en cours...';
-                else if ( lang == 'it') loading = 'Caricamento in corso...';
-                else if ( lang == 'pt') loading = 'Carregando...';
-                else if ( lang == 'ru') loading = 'Загрузка...';
-                else if ( lang == 'sl') loading = 'Nalaganje...';
-                else if ( lang == 'tr') loading = 'Yükleniyor...';
-
-                document.write(
-                    '<div id="loading-mask" class="loadmask">' +
-                        '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
-                            ((logo!==null) ? logo :
-                            '<div class="loader-page-romb">' +
-                                '<div class="romb" id="blue"></div>' +
-                                '<div class="romb" id="green"></div>' +
-                                '<div class="romb" id="red"></div>' +
-                            '</div>') +
-                        '</div>' +
-                        '<div class="loader-page-text">' +  customer +
-                        '<div class="loader-page-text-loading">' + loading + '</div>' +
-                        '</div>' +
-                    '</div>');
+                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],
+                customer = params["customer"] ? ('<div class="loader-page-text-customer">' + encodeUrlParam(params["customer"]) + '</div>') : '',
+                margin = (customer !== '') ? 50 : 20,
+                loading = 'Loading...',
+                logo = params["logo"] ? ((params["logo"] !== 'none') ? ('<img src="' + encodeUrlParam(params["logo"]) + '" class="loader-logo" />') : '') : null;
+
+            if ( lang == 'de')      loading = 'Ladevorgang...';
+            else if ( lang == 'es') loading = 'Cargando...';
+            else if ( lang == 'fr') loading = 'Chargement en cours...';
+            else if ( lang == 'it') loading = 'Caricamento in corso...';
+            else if ( lang == 'pt') loading = 'Carregando...';
+            else if ( lang == 'ru') loading = 'Загрузка...';
+            else if ( lang == 'sl') loading = 'Nalaganje...';
+            else if ( lang == 'tr') loading = 'Yükleniyor...';
+
+            document.write(
+                '<div id="loading-mask" class="loadmask">' +
+                    '<div class="loader-page" style="margin-bottom: ' + margin + 'px;' + ((logo!==null) ? 'height: auto;' : '') + '">' +
+                        ((logo!==null) ? logo :
+                        '<div class="loader-page-romb">' +
+                            '<div class="romb" id="blue"></div>' +
+                            '<div class="romb" id="green"></div>' +
+                            '<div class="romb" id="red"></div>' +
+                        '</div>') +
+                    '</div>' +
+                    '<div class="loader-page-text">' +  customer +
+                    '<div class="loader-page-text-loading">' + loading + '</div>' +
+                    '</div>' +
+                '</div>');
         </script>
+
+        <div id="viewport"></div>
+        <script data-main="app" src="../../../vendor/requirejs/require.js"></script>
     </body>
 </html>

apps/documenteditor/mobile/index.html.opensource

@@ -1,185 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>ONLYOFFICE Documents</title>
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-        <meta name="description" content="" />
-        <meta name="keywords" content="" />
-
-        <!-- splash -->
-
-        <style type="text/css">
-            .loadmask {
-                position: absolute;
-                left: 0;
-                top: 0;
-                height: 100%;
-                width: 100%;
-                overflow: hidden;
-                border: none;
-                background-color: #f4f4f4;
-                z-index: 20002;
-            }
-
-            .loadmask-body {
-                position:relative;
-                top:44%;
-            }
-
-            .loadmask-logo {
-                display: inline-block;
-                min-width:220px;
-                min-height:62px;
-                vertical-align: top;
-                background-image: url('./resources/img/loading-logo.gif');
-                background-image: -webkit-image-set(url('./resources/img/loading-logo.gif') 1x, url('./resources/img/loading-logo@2x.gif') 2x);
-                background-repeat: no-repeat;
-            }
-        </style>
-
-        <!--vendor-->
-        <script type="text/javascript" src="../../../vendor/jquery/jquery.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/jquery/jquery.browser.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/bootstrap/dist/js/bootstrap.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/ZeroClipboard/ZeroClipboard.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/sockjs/sockjs.min.js"></script>
-        <script type="text/javascript" src="../../../vendor/xregexp/xregexp-all-min.js"></script>
-
-        <!--application-->
-        <script type="text/javascript" src="../../common/Analytics.js"></script>
-        <script type="text/javascript" src="../../common/Gateway.js"></script>
-        <script type="text/javascript" src="../../common/mobile/loader.js"></script>
-        <script type="text/javascript" src="app.js"></script>
-        <script type="text/javascript" src="../../common/locale.js"></script>
-
-        <!--sdk-->
-        <script type="text/javascript" src="../../../sdk/Common/AllFonts.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/browser.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/docscoapicommon.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/docscoapi.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/apiCommon.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/spellcheckapisettings.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/spellcheckapi.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/wordcopypaste.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/spellCheckLanguage.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/spellCheckLanguagesAll.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/downloaderfiles.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/commonDefines.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/editorscommon.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/NumFormat.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/Shapes/EditorSettings.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/Shapes/Serialize.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/Shapes/SerializeWriter.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/SerializeCommonWordExcel.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/trackFile.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/Charts/charts.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/Charts/DrawingObjects.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/FontsFreeType/font_engine.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/FontsFreeType/FontFile.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/FontsFreeType/FontManager.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/Externals.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/GlobalLoaders.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/translations.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/GraphicObjects.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/GraphicPage.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/States.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/Math.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/TrackGraphicObjects.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/WrapManager.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/Spline.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/PolyLine.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/ObjectTypes/WordShape.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/ObjectTypes/WordImage.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/ObjectTypes/WordGroupShapes.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/ObjectTypes/Format.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/ObjectTypes/Geometry.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/ObjectTypes/ShapeTracks.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/ObjectTypes/GroupTracks.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/ObjectTypes/CreateGeometry.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/ObjectTypes/Path.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/ObjectTypes/Chart.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/ObjectTypes/ChartLayout.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/ObjectTypes/ChartLegend.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/ObjectTypes/ChartTitle.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/GraphicObjects/ObjectTypes/TextBody.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/Metafile.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/CollaborativeEditing.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/Comments.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/History.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/Styles.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/DrawingObjects.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/FlowObjects.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/ParagraphContent.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/Paragraph.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/Sections.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/Numbering.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/HeaderFooter.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/Document.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/Common.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/DocumentContent.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/Table.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/Serialize2.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/Search.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/FontClassification.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/Spelling.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/Graphics.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/ArcTo.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/Hit.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/ColorArray.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/Overlay.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/HatchPattern.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/ShapeDrawer.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/DrawingDocument.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/GraphicsEvents.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/scrolls/iscroll.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/WorkEvents.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/Controls.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/Rulers.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/HtmlPage.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Drawing/documentrenderer.js"></script>
-        <script type="text/javascript" src="../../../sdk/Common/scroll.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/Editor/SerializeCommon.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/apiDefines.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/api.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/apiCommon.js"></script>
-        <script type="text/javascript" src="../../../sdk/Word/document/empty.js"></script>
-        <script type="text/javascript" src="../../../sdk/Excel/graphics/DrawingContextWord.js"></script>
-    </head>
-    <body>
-        <script type="text/javascript">
-            if (!(Ext.browser.is.WebKit && (Ext.os.is.iOS || Ext.os.is.Android || Ext.os.is.Desktop))) {
-                document.write(
-                    '<div id="unsuported-view-id" class="unsuported-view"></div>'
-                );
-            } else {
-                document.write(
-                    '<div id="loading-mask" class="loadmask">' +
-                        '<div class="loadmask-body" align="center">' +
-                            '<div class="loadmask-logo"></div>' +
-                        '</div>' +
-                    '</div>');
-            }
-
-            var injectStyleElement = function(url) {
-                var style = document.createElement('link'),
-                        documentHead = typeof document != 'undefined' && (document.head || document.getElementsByTagName('head')[0]);
-
-                style.rel = 'stylesheet';
-                style.href = url;
-                style.type = 'text/css';
-
-                if (documentHead) {
-                    documentHead.appendChild(style);
-                    return true;
-                }
-
-                return false;
-            };
-
-            injectStyleElement((window.devicePixelRatio > 1)
-                ? 'resources/css/application-retina.css'
-                : 'resources/css/application-normal.css'
-            );
-        </script>
-    </body>
-</html>

apps/documenteditor/mobile/locale/de.json

@@ -1,89 +0,0 @@
-{
-  "Common.view.PopClip.copyButtonText": "Kopieren",
-  "Common.view.PopClip.cutButtonText": "Ausschneiden",
-  "Common.view.PopClip.pasteButtonText": "Einfügen",
-  "DE.controller.Main.convertationErrorText": "Konvertierung ist fehlgeschlagen.",
-  "DE.controller.Main.convertationTimeoutText": "Timeout für die Konvertierung wurde überschritten.",
-  "DE.controller.Main.criticalErrorExtText": "Klicken Sie auf \"OK\", um die Seite neu zu laden.",
-  "DE.controller.Main.criticalErrorTitle": "Fehler",
-  "DE.controller.Main.downloadErrorText": "Download ist fehlgeschlagen.",
-  "DE.controller.Main.editModeText": "Bearbeitungsmodus",
-  "DE.controller.Main.errorCoAuthoringDisconnect": "Verbindung zum Server verloren. Das Dokument kann momentan nicht bearbeitet werden.",
-  "DE.controller.Main.errorDefaultMessage": "Fehlercode: %1",
-  "DE.controller.Main.errorDocTooBig": "Das Dokument, das Sie zu öffnen versuchen, hat mehr als 30000 Zeichen oder 1000 Absätze und es kann nicht auf Ihrem Mobilgerät geöffnet werden. Versuchen Sie bitte, es auf dem PC zu öffnen.",
-  "DE.controller.Main.errorKeyEncrypt": "Unbekannter Schlüsseldeskriptor",
-  "DE.controller.Main.errorKeyExpire": "Der Schlüsseldeskriptor ist abgelaufen",
-  "DE.controller.Main.errorUsersExceed": "Die nach dem Zahlungsplan erlaubte Anzahl der Benutzer ist überschritten",
-  "DE.controller.Main.loadingDocText": "LADEVORGANG",
-  "DE.controller.Main.notcriticalErrorTitle": "Warnung",
-  "DE.controller.Main.printText": "Drucken...",
-  "DE.controller.Main.reloadButtonText": "Seite neu laden",
-  "DE.controller.Main.requestEditFailedMessageText": "Jemand bearbeitet dieses Dokument in diesem Moment. Bitte versuchen Sie es später erneut.",
-  "DE.controller.Main.requestEditFailedTitleText": "Zugriff verweigert",
-  "DE.controller.Main.requestEditRightsText": "Anfrage betreffend die Bearbeitungsberechtigung...",
-  "DE.controller.Main.saveText": "Speicherung...",
-  "DE.controller.Main.splitDividerErrorText": "Die Zeilenanzahl muss ein Divisor von %1 sein.",
-  "DE.controller.Main.splitMaxColsErrorText": "Die Spaltenanzahl muss weniger sein als %1",
-  "DE.controller.Main.splitMaxRowsErrorText": "Die Zeilenanzahl muss weniger sein als %1",
-  "DE.controller.Main.textAnonymous": "Anonym",
-  "DE.controller.Main.unknownErrorText": "Unbekannter Fehler.",
-  "DE.controller.Main.unsupportedBrowserErrorText ": "Ihr Webbrowser wird nicht unterstützt.",
-  "DE.controller.Main.uploadImageExtMessage": "Unbekanntes Bildformat.",
-  "DE.controller.Main.uploadImageFileCountMessage": "Keine Bilder hochgeladen.",
-  "DE.controller.Main.uploadImageSizeMessage": "Die maximal zulässige Bildgröße ist überschritten.",
-  "DE.controller.Main.viewModeText": "Lesemodus",
-  "DE.controller.phone.Main.pageText": "Seite",
-  "DE.controller.tablet.Main.pageText": "Seite",
-  "DE.controller.tablet.panel.Insert.unsupportUploadText": "Die Funktion wird auf diesem Gerät nicht unterstützt.",
-  "DE.controller.tablet.panel.Insert.uploadingText": "Hochladevorgang",
-  "DE.controller.toolbar.Edit.dlgLeaveMsgText": "In diesem Dokument gibt es nicht gespeicherte Änderungen. Klicken Sie auf \"Auf der Seite bleiben\", dann auf \"Speichern\", um sie zu speichern. Klicken Sie auf \"Die Seite verlassen\", um alle nicht gespeicherten Änderungen zu verwerfen.",
-  "DE.controller.toolbar.Edit.dlgLeaveTitleText": "Sie verlassen die Anwendung",
-  "DE.controller.toolbar.Edit.leaveButtonText": "Die Seite verlassen",
-  "DE.controller.toolbar.Edit.stayButtonText": "Auf der Seite bleiben",
-  "DE.controller.toolbar.View.requestEditFailedMessageText": "Es ist unmöglich, momentan das Dokument zu bearbeiten. Bitte später erneut versuchen.",
-  "DE.controller.toolbar.View.requestEditFailedTitleText": "Zugriff verweigert",
-  "DE.view.phone.Main.cancelText": "Abbrechen",
-  "DE.view.phone.Main.searchText": "Suchen",
-  "DE.view.phone.toolbar.Search.searchText": "Suchen",
-  "DE.view.phone.toolbar.View.doneText": "Fertig",
-  "DE.view.phone.toolbar.View.readerText": "Leseanwendung",
-  "DE.view.tablet.Main.searchText": "Suchen",
-  "DE.view.tablet.panel.Font.backText": "Zurück",
-  "DE.view.tablet.panel.Font.fontNameText": "Schriftart",
-  "DE.view.tablet.panel.Insert.backText": "Zurück",
-  "DE.view.tablet.panel.Insert.columnsText": "Spalten",
-  "DE.view.tablet.panel.Insert.insertColumnText": "Spalte einfügen",
-  "DE.view.tablet.panel.Insert.insertPicture": "Bild einfügen",
-  "DE.view.tablet.panel.Insert.insertRowText": "Zeile einfügen",
-  "DE.view.tablet.panel.Insert.insertTableText": "Tabelle einfügen",
-  "DE.view.tablet.panel.Insert.insertText": "Einfügen",
-  "DE.view.tablet.panel.Insert.pictureText": "Bild",
-  "DE.view.tablet.panel.Insert.pictureUploadFloat": "Unverankert einfügen",
-  "DE.view.tablet.panel.Insert.pictureUploadInline": "Inline einfügen",
-  "DE.view.tablet.panel.Insert.rowsText": "Zeilen",
-  "DE.view.tablet.panel.Insert.tableText": "Tabelle",
-  "DE.view.tablet.panel.ListStyle.backText": "Zurück",
-  "DE.view.tablet.panel.ListStyle.bulletsText": "Aufzählung",
-  "DE.view.tablet.panel.ListStyle.decIndentText": "Einzug verkleinern",
-  "DE.view.tablet.panel.ListStyle.incIndentText": "Einzug vergrößern",
-  "DE.view.tablet.panel.ListStyle.listStyleText": "Listenstil",
-  "DE.view.tablet.panel.ListStyle.noneText": "keine",
-  "DE.view.tablet.panel.ListStyle.numberingText": "Nummerierung",
-  "DE.view.tablet.panel.ListStyle.outlineText": "Gliederung",
-  "DE.view.tablet.panel.Spacing.backText": "Zurück",
-  "DE.view.tablet.panel.Spacing.decIndentText": "Einzug verkleinern",
-  "DE.view.tablet.panel.Spacing.incIndentText": "Einzug vergrößern",
-  "DE.view.tablet.panel.Spacing.lineSpacingText": "Zeilenabstand",
-  "DE.view.tablet.panel.Spacing.spacingText": "Abstand",
-  "DE.view.tablet.panel.TextColor.backText": "Zurück",
-  "DE.view.tablet.panel.TextColor.colorText": "Farbe",
-  "DE.view.tablet.panel.TextColor.highlightColorText": "Texthervorhebungsfarbe",
-  "DE.view.tablet.panel.TextColor.noFillText": "Keine Füllung",
-  "DE.view.tablet.panel.TextColor.textColorText": "Textfarbe",
-  "DE.view.tablet.toolbar.Edit.doneText": "Fertig",
-  "DE.view.tablet.toolbar.Edit.fontText": "Schriftart",
-  "DE.view.tablet.toolbar.Search.searchText": "Suchen",
-  "DE.view.tablet.toolbar.View.doneText": "Fertig",
-  "DE.view.tablet.toolbar.View.editText": "Bearbeiten",
-  "DE.view.tablet.toolbar.View.readerText": "Leseanwendung"
-}

apps/documenteditor/mobile/locale/en.json

@@ -1,89 +0,0 @@
-{
-  "Common.view.PopClip.copyButtonText": "Copy",
-  "Common.view.PopClip.cutButtonText": "Cut",
-  "Common.view.PopClip.pasteButtonText": "Paste",
-  "DE.controller.Main.convertationErrorText": "Conversion failed.",
-  "DE.controller.Main.convertationTimeoutText": "Conversion timeout exceeded.",
-  "DE.controller.Main.criticalErrorExtText": "Press \"OK\" to reload the page.",
-  "DE.controller.Main.criticalErrorTitle": "Error",
-  "DE.controller.Main.downloadErrorText": "Download failed.",
-  "DE.controller.Main.editModeText": "Edit Mode",
-  "DE.controller.Main.errorCoAuthoringDisconnect": "Server connection lost. The document cannot be edited right now.",
-  "DE.controller.Main.errorDefaultMessage": "Error code: %1",
-  "DE.controller.Main.errorDocTooBig": "The document you are trying to open has more than 30000 characters or 1000 paragraphs in it and cannot be opened on your mobile device. Please try to open it using a desktop PC.",
-  "DE.controller.Main.errorKeyEncrypt": "Unknown key descriptor",
-  "DE.controller.Main.errorKeyExpire": "Key descriptor expired",
-  "DE.controller.Main.errorUsersExceed": "The number of users allowed by the pricing plan was exceeded",
-  "DE.controller.Main.loadingDocText": "LOADING DOCUMENT",
-  "DE.controller.Main.notcriticalErrorTitle": "Warning",
-  "DE.controller.Main.printText": "Printing...",
-  "DE.controller.Main.reloadButtonText": "Reload Page",
-  "DE.controller.Main.requestEditFailedMessageText": "Someone is editing this document right now. Please try again later.",
-  "DE.controller.Main.requestEditFailedTitleText": "Access denied",
-  "DE.controller.Main.requestEditRightsText": "Requesting editing rights...",
-  "DE.controller.Main.saveText": "Saving...",
-  "DE.controller.Main.splitDividerErrorText": "The number of rows must be a divisor of %1",
-  "DE.controller.Main.splitMaxColsErrorText": "The number of columns must be less than %1",
-  "DE.controller.Main.splitMaxRowsErrorText": "The number of rows must be less than %1",
-  "DE.controller.Main.textAnonymous": "Anonymous",
-  "DE.controller.Main.unknownErrorText": "Unknown error.",
-  "DE.controller.Main.unsupportedBrowserErrorText ": "Your browser is not supported.",
-  "DE.controller.Main.uploadImageExtMessage": "Unknown image format.",
-  "DE.controller.Main.uploadImageFileCountMessage": "No images uploaded.",
-  "DE.controller.Main.uploadImageSizeMessage": "Maximium image size limit exceeded.",
-  "DE.controller.Main.viewModeText": "View Mode",
-  "DE.controller.phone.Main.pageText": "Page",
-  "DE.controller.tablet.Main.pageText": "Page",
-  "DE.controller.tablet.panel.Insert.unsupportUploadText": "Feature is not supported on this device.",
-  "DE.controller.tablet.panel.Insert.uploadingText": "Uploading",
-  "DE.controller.toolbar.Edit.dlgLeaveMsgText": "You have unsaved changes in this document. Click \"Stay on this Page\" then \"Save\" to save them. Click \"Leave this Page\" to discard all the unsaved changes.",
-  "DE.controller.toolbar.Edit.dlgLeaveTitleText": "You leave the application",
-  "DE.controller.toolbar.Edit.leaveButtonText": "Leave this Page",
-  "DE.controller.toolbar.Edit.stayButtonText": "Stay on this Page",
-  "DE.controller.toolbar.View.requestEditFailedMessageText": "You cannot edit the document right now. Please try again later.",
-  "DE.controller.toolbar.View.requestEditFailedTitleText": "Access denied",
-  "DE.view.phone.Main.cancelText": "Cancel",
-  "DE.view.phone.Main.searchText": "Search",
-  "DE.view.phone.toolbar.Search.searchText": "Search",
-  "DE.view.phone.toolbar.View.doneText": "Done",
-  "DE.view.phone.toolbar.View.readerText": "Reader",
-  "DE.view.tablet.Main.searchText": "Search",
-  "DE.view.tablet.panel.Font.backText": "Back",
-  "DE.view.tablet.panel.Font.fontNameText": "Font Name",
-  "DE.view.tablet.panel.Insert.backText": "Back",
-  "DE.view.tablet.panel.Insert.columnsText": "Columns",
-  "DE.view.tablet.panel.Insert.insertColumnText": "Insert Column",
-  "DE.view.tablet.panel.Insert.insertPicture": "Insert Picture",
-  "DE.view.tablet.panel.Insert.insertRowText": "Insert Row",
-  "DE.view.tablet.panel.Insert.insertTableText": "Insert Table",
-  "DE.view.tablet.panel.Insert.insertText": "Insert",
-  "DE.view.tablet.panel.Insert.pictureText": "Picture",
-  "DE.view.tablet.panel.Insert.pictureUploadFloat": "Insert Float",
-  "DE.view.tablet.panel.Insert.pictureUploadInline": "Insert Inline",
-  "DE.view.tablet.panel.Insert.rowsText": "Rows",
-  "DE.view.tablet.panel.Insert.tableText": "Table",
-  "DE.view.tablet.panel.ListStyle.backText": "Back",
-  "DE.view.tablet.panel.ListStyle.bulletsText": "Bullets",
-  "DE.view.tablet.panel.ListStyle.decIndentText": "Decrease Indent",
-  "DE.view.tablet.panel.ListStyle.incIndentText": "Increase indent",
-  "DE.view.tablet.panel.ListStyle.listStyleText": "List Style",
-  "DE.view.tablet.panel.ListStyle.noneText": "none",
-  "DE.view.tablet.panel.ListStyle.numberingText": "Numbering",
-  "DE.view.tablet.panel.ListStyle.outlineText": "Outline",
-  "DE.view.tablet.panel.Spacing.backText": "Back",
-  "DE.view.tablet.panel.Spacing.decIndentText": "Decrease Indent",
-  "DE.view.tablet.panel.Spacing.incIndentText": "Increase Indent",
-  "DE.view.tablet.panel.Spacing.lineSpacingText": "Paragraph Line Spacing",
-  "DE.view.tablet.panel.Spacing.spacingText": "Spacing",
-  "DE.view.tablet.panel.TextColor.backText": "Back",
-  "DE.view.tablet.panel.TextColor.colorText": "Color",
-  "DE.view.tablet.panel.TextColor.highlightColorText": "Highlight color",
-  "DE.view.tablet.panel.TextColor.noFillText": "No Fill",
-  "DE.view.tablet.panel.TextColor.textColorText": "Text color",
-  "DE.view.tablet.toolbar.Edit.doneText": "Done",
-  "DE.view.tablet.toolbar.Edit.fontText": "Font",
-  "DE.view.tablet.toolbar.Search.searchText": "Search",
-  "DE.view.tablet.toolbar.View.doneText": "Done",
-  "DE.view.tablet.toolbar.View.editText": "Edit",
-  "DE.view.tablet.toolbar.View.readerText": "Reader"
-}

apps/documenteditor/mobile/locale/es.json

@@ -1,89 +0,0 @@
-{
-  "Common.view.PopClip.copyButtonText": "Copiar ",
-  "Common.view.PopClip.cutButtonText": "Cortar",
-  "Common.view.PopClip.pasteButtonText": "Pegar",
-  "DE.controller.Main.convertationErrorText": "Error de conversión.",
-  "DE.controller.Main.convertationTimeoutText": "Tiempo de conversión está superado.",
-  "DE.controller.Main.criticalErrorExtText": "Pulse \"OK\" para recargar la página. ",
-  "DE.controller.Main.criticalErrorTitle": "Error",
-  "DE.controller.Main.downloadErrorText": "Descarga fallida.",
-  "DE.controller.Main.editModeText": "Modo de edición",
-  "DE.controller.Main.errorCoAuthoringDisconnect": "Se ha perdido la conexión con servidor. El documento no puede ser editado ahora.",
-  "DE.controller.Main.errorDefaultMessage": "Código de error: %1",
-  "DE.controller.Main.errorDocTooBig": "El documento que usted está intentando abrir tiene más de 30000 caracteres o 1000 párrafos y no puede ser abierto en su dispositivo móvil. Por favor, intente abrirlo usando su ordenador.",
-  "DE.controller.Main.errorKeyEncrypt": "Descriptor de clave desconocido",
-  "DE.controller.Main.errorKeyExpire": "Descriptor de clave ha expirado",
-  "DE.controller.Main.errorUsersExceed": "El número de usuarios permitido según su plan de precios fue excedido",
-  "DE.controller.Main.loadingDocText": "CARGANDO DOCUMENTO",
-  "DE.controller.Main.notcriticalErrorTitle": "Aviso",
-  "DE.controller.Main.printText": "Imprimiendo...",
-  "DE.controller.Main.reloadButtonText": "Recargar página",
-  "DE.controller.Main.requestEditFailedMessageText": "Alguien está editando el documento en este momento. Por favor, inténtelo de nuevo más tarde.",
-  "DE.controller.Main.requestEditFailedTitleText": "Acceso negado",
-  "DE.controller.Main.requestEditRightsText": "Solicitando derechos de edición...",
-  "DE.controller.Main.saveText": "Guardando...",
-  "DE.controller.Main.splitDividerErrorText": "El número de filas hay que ser un divisor de %1",
-  "DE.controller.Main.splitMaxColsErrorText": "El número de columnas debe ser menos que %1",
-  "DE.controller.Main.splitMaxRowsErrorText": "El número de filas debe ser menos que %1",
-  "DE.controller.Main.textAnonymous": "Anónimo",
-  "DE.controller.Main.unknownErrorText": "Error desconocido.",
-  "DE.controller.Main.unsupportedBrowserErrorText ": "Su navegador no está soportado.",
-  "DE.controller.Main.uploadImageExtMessage": "Formato de imagen desconocido.",
-  "DE.controller.Main.uploadImageFileCountMessage": "No hay imágenes subidas.",
-  "DE.controller.Main.uploadImageSizeMessage": "Tamaño de imagen máximo está superado.",
-  "DE.controller.Main.viewModeText": "Modo de vista",
-  "DE.controller.phone.Main.pageText": "Página",
-  "DE.controller.tablet.Main.pageText": "Página",
-  "DE.controller.tablet.panel.Insert.unsupportUploadText": "Esta característica no admite este dispositivo",
-  "DE.controller.tablet.panel.Insert.uploadingText": "Subiendo",
-  "DE.controller.toolbar.Edit.dlgLeaveMsgText": "Hay unos cambios no guardados en este documento. Pulse \"Permanecer\" después \"Guardar\" para guardarlos. Pulse \"Abandonar esta página\" para cancelar todos los cambios no guardados",
-  "DE.controller.toolbar.Edit.dlgLeaveTitleText": "Usted sale de la aplicación",
-  "DE.controller.toolbar.Edit.leaveButtonText": "Abandonar esta página",
-  "DE.controller.toolbar.Edit.stayButtonText": "Permanecer",
-  "DE.controller.toolbar.View.requestEditFailedMessageText": "Es imposible editar el documento ahora. Intente de nuevo más tarde.",
-  "DE.controller.toolbar.View.requestEditFailedTitleText": "Acceso negado",
-  "DE.view.phone.Main.cancelText": "Cancelar",
-  "DE.view.phone.Main.searchText": "Búsqueda",
-  "DE.view.phone.toolbar.Search.searchText": "Búsqueda",
-  "DE.view.phone.toolbar.View.doneText": "Listo",
-  "DE.view.phone.toolbar.View.readerText": "Lector",
-  "DE.view.tablet.Main.searchText": "Búsqueda",
-  "DE.view.tablet.panel.Font.backText": "Atrás",
-  "DE.view.tablet.panel.Font.fontNameText": "Nombre de letra",
-  "DE.view.tablet.panel.Insert.backText": "Atrás",
-  "DE.view.tablet.panel.Insert.columnsText": "Columnas",
-  "DE.view.tablet.panel.Insert.insertColumnText": "Insertar columna",
-  "DE.view.tablet.panel.Insert.insertPicture": "Insertar imagen",
-  "DE.view.tablet.panel.Insert.insertRowText": "Insertar fila",
-  "DE.view.tablet.panel.Insert.insertTableText": "Insertar tabla",
-  "DE.view.tablet.panel.Insert.insertText": "Insertar",
-  "DE.view.tablet.panel.Insert.pictureText": "Imagen",
-  "DE.view.tablet.panel.Insert.pictureUploadFloat": "Insertar flotante",
-  "DE.view.tablet.panel.Insert.pictureUploadInline": "Insertar en línea",
-  "DE.view.tablet.panel.Insert.rowsText": "Filas",
-  "DE.view.tablet.panel.Insert.tableText": "Tabla",
-  "DE.view.tablet.panel.ListStyle.backText": "Atrás",
-  "DE.view.tablet.panel.ListStyle.bulletsText": "Viñetas",
-  "DE.view.tablet.panel.ListStyle.decIndentText": "Reducir sangría",
-  "DE.view.tablet.panel.ListStyle.incIndentText": "Aumentar sangría",
-  "DE.view.tablet.panel.ListStyle.listStyleText": "Estilo de lista",
-  "DE.view.tablet.panel.ListStyle.noneText": "ninguno",
-  "DE.view.tablet.panel.ListStyle.numberingText": "Numeración",
-  "DE.view.tablet.panel.ListStyle.outlineText": "Esquema",
-  "DE.view.tablet.panel.Spacing.backText": "Atrás",
-  "DE.view.tablet.panel.Spacing.decIndentText": "Reducir sangría",
-  "DE.view.tablet.panel.Spacing.incIndentText": "Aumentar sangría",
-  "DE.view.tablet.panel.Spacing.lineSpacingText": "Espaciado de línea de párrafo",
-  "DE.view.tablet.panel.Spacing.spacingText": "Espaciado",
-  "DE.view.tablet.panel.TextColor.backText": "Atrás",
-  "DE.view.tablet.panel.TextColor.colorText": "Color",
-  "DE.view.tablet.panel.TextColor.highlightColorText": "Color de resaltado",
-  "DE.view.tablet.panel.TextColor.noFillText": "Sin relleno",
-  "DE.view.tablet.panel.TextColor.textColorText": "Color de texto",
-  "DE.view.tablet.toolbar.Edit.doneText": "Listo",
-  "DE.view.tablet.toolbar.Edit.fontText": "Letra ",
-  "DE.view.tablet.toolbar.Search.searchText": "Búsqueda",
-  "DE.view.tablet.toolbar.View.doneText": "Listo",
-  "DE.view.tablet.toolbar.View.editText": "Editar",
-  "DE.view.tablet.toolbar.View.readerText": "Lector"
-}

apps/documenteditor/mobile/locale/fr.json

@@ -1,89 +0,0 @@
-{
-  "Common.view.PopClip.copyButtonText": "Copier",
-  "Common.view.PopClip.cutButtonText": "Couper",
-  "Common.view.PopClip.pasteButtonText": "Coller",
-  "DE.controller.Main.convertationErrorText": "Échec de la conversion.",
-  "DE.controller.Main.convertationTimeoutText": "Expiration du délai de conversion.",
-  "DE.controller.Main.criticalErrorExtText": "Cliquez sur \"OK\" pour recharger la page.",
-  "DE.controller.Main.criticalErrorTitle": "Erreur",
-  "DE.controller.Main.downloadErrorText": "Échec du téléchargement.",
-  "DE.controller.Main.editModeText": "Mode d'édition",
-  "DE.controller.Main.errorCoAuthoringDisconnect": "Connexion au serveur perdue. Le document ne peut être modifié en ce moment.",
-  "DE.controller.Main.errorDefaultMessage": "Code d'erreur: %1",
-  "DE.controller.Main.errorDocTooBig": "Il est impossible d'ouvrir ce document sur un dispositif portable car il contient plus de 30000 caractères ou 1000 paragraphes. Essayez de l'ouvrir en utilisant votre ordinateur de bureau.",
-  "DE.controller.Main.errorKeyEncrypt": "Descripteur de clés inconnu",
-  "DE.controller.Main.errorKeyExpire": "Descripteur de clés expiré",
-  "DE.controller.Main.errorUsersExceed": "Le nombre d'utilisateurs autorisés par le plan tarifaire a été dépassé",
-  "DE.controller.Main.loadingDocText": "CHARGEMENT DU DOCUMENT",
-  "DE.controller.Main.notcriticalErrorTitle": "Avertissement",
-  "DE.controller.Main.printText": "Impression en cours...",
-  "DE.controller.Main.reloadButtonText": "Recharger la page",
-  "DE.controller.Main.requestEditFailedMessageText": "Quelqu'un est en train de modifier ce document. Veuillez réessayer plus tard.",
-  "DE.controller.Main.requestEditFailedTitleText": "Accès refusé",
-  "DE.controller.Main.requestEditRightsText": "Demande des droits de modification...",
-  "DE.controller.Main.saveText": "Enregistrement en cours...",
-  "DE.controller.Main.splitDividerErrorText": "Le nombre de lignes doit être un diviseur de %1",
-  "DE.controller.Main.splitMaxColsErrorText": "Le nombre de colonnes doit être inférieure à %1",
-  "DE.controller.Main.splitMaxRowsErrorText": "Le nombre de lignes doit être inférieure à %1",
-  "DE.controller.Main.textAnonymous": "Anonyme",
-  "DE.controller.Main.unknownErrorText": "Erreur inconnue.",
-  "DE.controller.Main.unsupportedBrowserErrorText ": "Votre navigateur n'est pas pris en charge.",
-  "DE.controller.Main.uploadImageExtMessage": "Format d'image inconnu.",
-  "DE.controller.Main.uploadImageFileCountMessage": "Aucune image n'est téléchargée.",
-  "DE.controller.Main.uploadImageSizeMessage": "La taille de l'image a dépassé la limite maximale.",
-  "DE.controller.Main.viewModeText": "Mode d'affichage",
-  "DE.controller.phone.Main.pageText": "Page",
-  "DE.controller.tablet.Main.pageText": "Page",
-  "DE.controller.tablet.panel.Insert.unsupportUploadText": "Cette fonction n'est pas prise en charge par cet périphérique.",
-  "DE.controller.tablet.panel.Insert.uploadingText": "Chargement",
-  "DE.controller.toolbar.Edit.dlgLeaveMsgText": "Vous avez des modifications non enregistrées dans ce document. Cliquez sur \"Rester sur cette page\" ensuite \"Enregistrer\" pour les enregistrer. Cliquez sur \"Quitter cette page\" pour annuler toutes les modifications non enregistrées.",
-  "DE.controller.toolbar.Edit.dlgLeaveTitleText": "Vous quittez l'application",
-  "DE.controller.toolbar.Edit.leaveButtonText": "Quitter cette page",
-  "DE.controller.toolbar.Edit.stayButtonText": "Rester sur cette page",
-  "DE.controller.toolbar.View.requestEditFailedMessageText": "Impossible de modifier le document en ce moment. Réessayez ultérieurement.",
-  "DE.controller.toolbar.View.requestEditFailedTitleText": "Accès refusé",
-  "DE.view.phone.Main.cancelText": "Annuler",
-  "DE.view.phone.Main.searchText": "Recherche",
-  "DE.view.phone.toolbar.Search.searchText": "Recherche",
-  "DE.view.phone.toolbar.View.doneText": "Fait",
-  "DE.view.phone.toolbar.View.readerText": "Lecteur",
-  "DE.view.tablet.Main.searchText": "Recherche",
-  "DE.view.tablet.panel.Font.backText": "Retour",
-  "DE.view.tablet.panel.Font.fontNameText": "Nom de la police",
-  "DE.view.tablet.panel.Insert.backText": "Retour",
-  "DE.view.tablet.panel.Insert.columnsText": "Colonnes",
-  "DE.view.tablet.panel.Insert.insertColumnText": "Insérer une colonne",
-  "DE.view.tablet.panel.Insert.insertPicture": "Insérer une image",
-  "DE.view.tablet.panel.Insert.insertRowText": "Insérer une ligne",
-  "DE.view.tablet.panel.Insert.insertTableText": "Insérer un tableau",
-  "DE.view.tablet.panel.Insert.insertText": "Insérer",
-  "DE.view.tablet.panel.Insert.pictureText": "Image",
-  "DE.view.tablet.panel.Insert.pictureUploadFloat": "Insérer flottant",
-  "DE.view.tablet.panel.Insert.pictureUploadInline": "Insérer inline",
-  "DE.view.tablet.panel.Insert.rowsText": "Lignes",
-  "DE.view.tablet.panel.Insert.tableText": "Tableau",
-  "DE.view.tablet.panel.ListStyle.backText": "Retour",
-  "DE.view.tablet.panel.ListStyle.bulletsText": "Puces",
-  "DE.view.tablet.panel.ListStyle.decIndentText": "Réduire le retrait",
-  "DE.view.tablet.panel.ListStyle.incIndentText": "Augmenter le retrait",
-  "DE.view.tablet.panel.ListStyle.listStyleText": "Style de liste",
-  "DE.view.tablet.panel.ListStyle.noneText": "aucun",
-  "DE.view.tablet.panel.ListStyle.numberingText": "Numérotation",
-  "DE.view.tablet.panel.ListStyle.outlineText": "Plan",
-  "DE.view.tablet.panel.Spacing.backText": "Retour",
-  "DE.view.tablet.panel.Spacing.decIndentText": "Réduire le retrait",
-  "DE.view.tablet.panel.Spacing.incIndentText": "Augmenter le retrait",
-  "DE.view.tablet.panel.Spacing.lineSpacingText": "Interligne du paragraphe",
-  "DE.view.tablet.panel.Spacing.spacingText": "Espacement",
-  "DE.view.tablet.panel.TextColor.backText": "Retour",
-  "DE.view.tablet.panel.TextColor.colorText": "Couleur",
-  "DE.view.tablet.panel.TextColor.highlightColorText": "Couleur de surlignage",
-  "DE.view.tablet.panel.TextColor.noFillText": "Pas de remplissage",
-  "DE.view.tablet.panel.TextColor.textColorText": "Couleur de texte",
-  "DE.view.tablet.toolbar.Edit.doneText": "Fait",
-  "DE.view.tablet.toolbar.Edit.fontText": "Police",
-  "DE.view.tablet.toolbar.Search.searchText": "Recherche",
-  "DE.view.tablet.toolbar.View.doneText": "Fait",
-  "DE.view.tablet.toolbar.View.editText": "Modifier",
-  "DE.view.tablet.toolbar.View.readerText": "Lecteur"
-}

apps/documenteditor/mobile/locale/it.json

@@ -1,89 +0,0 @@
-{
-  "Common.view.PopClip.copyButtonText": "Copia",
-  "Common.view.PopClip.cutButtonText": "Taglia",
-  "Common.view.PopClip.pasteButtonText": "Incolla",
-  "DE.controller.Main.convertationErrorText": "Conversione fallita.",
-  "DE.controller.Main.convertationTimeoutText": "E' stato superato il tempo limite della conversione.",
-  "DE.controller.Main.criticalErrorExtText": "Clicca su \"OK\" per ricaricare la pagina.",
-  "DE.controller.Main.criticalErrorTitle": "Errore",
-  "DE.controller.Main.downloadErrorText": "Download fallito.",
-  "DE.controller.Main.editModeText": "Modifica",
-  "DE.controller.Main.errorCoAuthoringDisconnect": "Connessione al server persa. Impossibile modificare il documento.",
-  "DE.controller.Main.errorDefaultMessage": "Codice errore: %1",
-  "DE.controller.Main.errorDocTooBig": "E' impossibile aprire questo documento con il portatile, il documento contiene più di 30000 caratteri o 1000 paragrafi. Prova ad aprirlo usando il tuo PC.",
-  "DE.controller.Main.errorKeyEncrypt": "Descrittore di chiave sconosciuto",
-  "DE.controller.Main.errorKeyExpire": "Descrittore di chiave scaduto",
-  "DE.controller.Main.errorUsersExceed": "E' stato superato il numero di utenti consentito dal piano tariffario",
-  "DE.controller.Main.loadingDocText": "CARICAMENTO DEL DOCUMENTO",
-  "DE.controller.Main.notcriticalErrorTitle": "Avviso",
-  "DE.controller.Main.printText": "Stampa in corso...",
-  "DE.controller.Main.reloadButtonText": "Ricarica pagina",
-  "DE.controller.Main.requestEditFailedMessageText": "Qualcuno sta modificando questo documento. Si prega di provare più tardi.",
-  "DE.controller.Main.requestEditFailedTitleText": "Accesso vietato",
-  "DE.controller.Main.requestEditRightsText": "Richiesta di autorizzazione di modifica...",
-  "DE.controller.Main.saveText": "Salvataggio in corso...",
-  "DE.controller.Main.splitDividerErrorText": "Il numero di righe deve essere un divisore di %1",
-  "DE.controller.Main.splitMaxColsErrorText": "Il numero di colonne deve essere inferiore a %1",
-  "DE.controller.Main.splitMaxRowsErrorText": "Il numero di righe deve essere inferiore a %1",
-  "DE.controller.Main.textAnonymous": "Anonimo",
-  "DE.controller.Main.unknownErrorText": "Errore sconosciuto.",
-  "DE.controller.Main.unsupportedBrowserErrorText ": "Il tuo browser non è supportato.",
-  "DE.controller.Main.uploadImageExtMessage": "Formato immagine sconosciuto.",
-  "DE.controller.Main.uploadImageFileCountMessage": "Nessun immagine caricata.",
-  "DE.controller.Main.uploadImageSizeMessage": "E' stata superata la dimensione massima.",
-  "DE.controller.Main.viewModeText": "Visualizzazione",
-  "DE.controller.phone.Main.pageText": "Pagina",
-  "DE.controller.tablet.Main.pageText": "Pagina",
-  "DE.controller.tablet.panel.Insert.unsupportUploadText": "La funzionalità non è supportata da questo dispositivo.",
-  "DE.controller.tablet.panel.Insert.uploadingText": "Caricamento in corso",
-  "DE.controller.toolbar.Edit.dlgLeaveMsgText": "Hai qualche modifica non salvata in questo documento. Clicca su \"Rimanere in pagina\" e \"Salva\" in seguito per salvarle. Clicca su \"Uscire da pagina\" per annullare tutte le modifiche non salvate.",
-  "DE.controller.toolbar.Edit.dlgLeaveTitleText": "Esci dall'applicazione",
-  "DE.controller.toolbar.Edit.leaveButtonText": "Uscire da pagina",
-  "DE.controller.toolbar.Edit.stayButtonText": "Rimanere in pagina",
-  "DE.controller.toolbar.View.requestEditFailedMessageText": "E' impossibile modificare il documento. Si prega di provare più tardi.",
-  "DE.controller.toolbar.View.requestEditFailedTitleText": "Accesso vietato",
-  "DE.view.phone.Main.cancelText": "Annulla",
-  "DE.view.phone.Main.searchText": "Ricerca",
-  "DE.view.phone.toolbar.Search.searchText": "Ricerca",
-  "DE.view.phone.toolbar.View.doneText": "Fatto",
-  "DE.view.phone.toolbar.View.readerText": "Lettore",
-  "DE.view.tablet.Main.searchText": "Ricerca",
-  "DE.view.tablet.panel.Font.backText": "Indietro",
-  "DE.view.tablet.panel.Font.fontNameText": "Nome tipo di carattere",
-  "DE.view.tablet.panel.Insert.backText": "Indietro",
-  "DE.view.tablet.panel.Insert.columnsText": "Colonne",
-  "DE.view.tablet.panel.Insert.insertColumnText": "Inserisci colonna",
-  "DE.view.tablet.panel.Insert.insertPicture": "Inserisci immagine",
-  "DE.view.tablet.panel.Insert.insertRowText": "Inserisci riga",
-  "DE.view.tablet.panel.Insert.insertTableText": "Inserisci tabella",
-  "DE.view.tablet.panel.Insert.insertText": "Inserisci",
-  "DE.view.tablet.panel.Insert.pictureText": "Immagine",
-  "DE.view.tablet.panel.Insert.pictureUploadFloat": "Rendi mobile",
-  "DE.view.tablet.panel.Insert.pictureUploadInline": "Inserisci inline",
-  "DE.view.tablet.panel.Insert.rowsText": "Righe",
-  "DE.view.tablet.panel.Insert.tableText": "Tabella",
-  "DE.view.tablet.panel.ListStyle.backText": "Indietro",
-  "DE.view.tablet.panel.ListStyle.bulletsText": "Elenchi puntati",
-  "DE.view.tablet.panel.ListStyle.decIndentText": "Riduci rientro",
-  "DE.view.tablet.panel.ListStyle.incIndentText": "Aumenta rientro",
-  "DE.view.tablet.panel.ListStyle.listStyleText": "Stile elenco",
-  "DE.view.tablet.panel.ListStyle.noneText": "niente",
-  "DE.view.tablet.panel.ListStyle.numberingText": "Elenchi numerati",
-  "DE.view.tablet.panel.ListStyle.outlineText": "Struttura",
-  "DE.view.tablet.panel.Spacing.backText": "Indietro",
-  "DE.view.tablet.panel.Spacing.decIndentText": "Riduci rientro",
-  "DE.view.tablet.panel.Spacing.incIndentText": "Aumenta rientro",
-  "DE.view.tablet.panel.Spacing.lineSpacingText": "Interlinea tra i paragrafi",
-  "DE.view.tablet.panel.Spacing.spacingText": "Spaziatura",
-  "DE.view.tablet.panel.TextColor.backText": "Indietro",
-  "DE.view.tablet.panel.TextColor.colorText": "Colore",
-  "DE.view.tablet.panel.TextColor.highlightColorText": "Colore evidenziatore",
-  "DE.view.tablet.panel.TextColor.noFillText": "Nessun riempimento",
-  "DE.view.tablet.panel.TextColor.textColorText": "Colore di testo",
-  "DE.view.tablet.toolbar.Edit.doneText": "Fatto",
-  "DE.view.tablet.toolbar.Edit.fontText": "Tipo di carattere",
-  "DE.view.tablet.toolbar.Search.searchText": "Ricerca",
-  "DE.view.tablet.toolbar.View.doneText": "Fatto",
-  "DE.view.tablet.toolbar.View.editText": "Modifica",
-  "DE.view.tablet.toolbar.View.readerText": "Lettore"
-}

apps/documenteditor/mobile/locale/lv.json

@@ -1,89 +0,0 @@
-{
-  "Common.view.PopClip.copyButtonText": "Kopēt",
-  "Common.view.PopClip.cutButtonText": "Cut",
-  "Common.view.PopClip.pasteButtonText": "Ievietot",
-  "DE.controller.Main.convertationErrorText": "Conversion failed.",
-  "DE.controller.Main.convertationTimeoutText": "Conversion timeout exceeded.",
-  "DE.controller.Main.criticalErrorExtText": "Press \"OK\" to reload the page.",
-  "DE.controller.Main.criticalErrorTitle": "Kļūda",
-  "DE.controller.Main.downloadErrorText": "Lejuplāde neizdevās.",
-  "DE.controller.Main.editModeText": "Rediģēšanas režīms",
-  "DE.controller.Main.errorCoAuthoringDisconnect": "Server connection lost. The document cannot be edited right now.",
-  "DE.controller.Main.errorDefaultMessage": "Kļūdas kods: %1",
-  "DE.controller.Main.errorDocTooBig": "The document you are trying to open has more than 30000 characters or 1000 paragraphs in it and cannot be opened on your mobile device. Please try to open it using a desktop PC.",
-  "DE.controller.Main.errorKeyEncrypt": "Unknown key descriptor",
-  "DE.controller.Main.errorKeyExpire": "Key descriptor expired",
-  "DE.controller.Main.errorUsersExceed": "The number of users allowed by the pricing plan was exceeded",
-  "DE.controller.Main.loadingDocText": "LOADING DOCUMENT",
-  "DE.controller.Main.notcriticalErrorTitle": "Warning",
-  "DE.controller.Main.printText": "Drukā...",
-  "DE.controller.Main.reloadButtonText": "Reload Page",
-  "DE.controller.Main.requestEditFailedMessageText": "Someone is editing this document right now. Please try again later.",
-  "DE.controller.Main.requestEditFailedTitleText": "Access denied",
-  "DE.controller.Main.requestEditRightsText": "Requesting editing rights...",
-  "DE.controller.Main.saveText": "Saglabā ...",
-  "DE.controller.Main.splitDividerErrorText": "The number of rows must be a divisor of %1",
-  "DE.controller.Main.splitMaxColsErrorText": "The number of columns must be less than %1",
-  "DE.controller.Main.splitMaxRowsErrorText": "The number of rows must be less than %1",
-  "DE.controller.Main.textAnonymous": "Anonymous",
-  "DE.controller.Main.unknownErrorText": "Unknown error.",
-  "DE.controller.Main.unsupportedBrowserErrorText ": "Your browser is not supported.",
-  "DE.controller.Main.uploadImageExtMessage": "Unknown image format.",
-  "DE.controller.Main.uploadImageFileCountMessage": "No images uploaded.",
-  "DE.controller.Main.uploadImageSizeMessage": "Maximium image size limit exceeded.",
-  "DE.controller.Main.viewModeText": "Skatīšanas režīms",
-  "DE.controller.phone.Main.pageText": "Lapa",
-  "DE.controller.tablet.Main.pageText": "Lapa",
-  "DE.controller.tablet.panel.Insert.unsupportUploadText": "Feature is not supported on this device.",
-  "DE.controller.tablet.panel.Insert.uploadingText": "Uploading",
-  "DE.controller.toolbar.Edit.dlgLeaveMsgText": "You have unsaved changes in this document. Click \"Stay on this Page\" then \"Save\" to save them. Click \"Leave this Page\" to discard all the unsaved changes.",
-  "DE.controller.toolbar.Edit.dlgLeaveTitleText": "You leave the application",
-  "DE.controller.toolbar.Edit.leaveButtonText": "Leave this Page",
-  "DE.controller.toolbar.Edit.stayButtonText": "Stay on this Page",
-  "DE.controller.toolbar.View.requestEditFailedMessageText": "You cannot edit the document right now. Please try again later.",
-  "DE.controller.toolbar.View.requestEditFailedTitleText": "Access denied",
-  "DE.view.phone.Main.cancelText": "Atcelt",
-  "DE.view.phone.Main.searchText": "Meklēt",
-  "DE.view.phone.toolbar.Search.searchText": "Meklēt",
-  "DE.view.phone.toolbar.View.doneText": "Done",
-  "DE.view.phone.toolbar.View.readerText": "Reader",
-  "DE.view.tablet.Main.searchText": "Meklēt",
-  "DE.view.tablet.panel.Font.backText": "Atpakaļ",
-  "DE.view.tablet.panel.Font.fontNameText": "Font Name",
-  "DE.view.tablet.panel.Insert.backText": "Back",
-  "DE.view.tablet.panel.Insert.columnsText": "Columns",
-  "DE.view.tablet.panel.Insert.insertColumnText": "Insert Column",
-  "DE.view.tablet.panel.Insert.insertPicture": "Ievietot attēlu",
-  "DE.view.tablet.panel.Insert.insertRowText": "Ievietot rindu",
-  "DE.view.tablet.panel.Insert.insertTableText": "Ievietot tabulu",
-  "DE.view.tablet.panel.Insert.insertText": "Ievietot",
-  "DE.view.tablet.panel.Insert.pictureText": "Attēls",
-  "DE.view.tablet.panel.Insert.pictureUploadFloat": "Insert Float",
-  "DE.view.tablet.panel.Insert.pictureUploadInline": "Insert Inline",
-  "DE.view.tablet.panel.Insert.rowsText": "Rindas",
-  "DE.view.tablet.panel.Insert.tableText": "Table",
-  "DE.view.tablet.panel.ListStyle.backText": "Atpakaļ",
-  "DE.view.tablet.panel.ListStyle.bulletsText": "Bullets",
-  "DE.view.tablet.panel.ListStyle.decIndentText": "Decrease Indent",
-  "DE.view.tablet.panel.ListStyle.incIndentText": "Palielināt atstarpi",
-  "DE.view.tablet.panel.ListStyle.listStyleText": "List Style",
-  "DE.view.tablet.panel.ListStyle.noneText": "none",
-  "DE.view.tablet.panel.ListStyle.numberingText": "Numbering",
-  "DE.view.tablet.panel.ListStyle.outlineText": "Struktūrskats",
-  "DE.view.tablet.panel.Spacing.backText": "Atpakaļ",
-  "DE.view.tablet.panel.Spacing.decIndentText": "Decrease Indent",
-  "DE.view.tablet.panel.Spacing.incIndentText": "Palielināt atstarpi",
-  "DE.view.tablet.panel.Spacing.lineSpacingText": "Paragraph Line Spacing",
-  "DE.view.tablet.panel.Spacing.spacingText": "Spacing",
-  "DE.view.tablet.panel.TextColor.backText": "Back",
-  "DE.view.tablet.panel.TextColor.colorText": "Krāsa",
-  "DE.view.tablet.panel.TextColor.highlightColorText": "Highlight color",
-  "DE.view.tablet.panel.TextColor.noFillText": "No Fill",
-  "DE.view.tablet.panel.TextColor.textColorText": "Text color",
-  "DE.view.tablet.toolbar.Edit.doneText": "Done",
-  "DE.view.tablet.toolbar.Edit.fontText": "Font",
-  "DE.view.tablet.toolbar.Search.searchText": "Meklēt",
-  "DE.view.tablet.toolbar.View.doneText": "Done",
-  "DE.view.tablet.toolbar.View.editText": "Rediģēt",
-  "DE.view.tablet.toolbar.View.readerText": "Reader"
-}

apps/documenteditor/mobile/locale/pt.json

@@ -1,89 +0,0 @@
-{
-  "Common.view.PopClip.copyButtonText": "Copiar",
-  "Common.view.PopClip.cutButtonText": "Cortar",
-  "Common.view.PopClip.pasteButtonText": "Colar",
-  "DE.controller.Main.convertationErrorText": "Conversão falhou.",
-  "DE.controller.Main.convertationTimeoutText": "Tempo limite de conversão excedido.",
-  "DE.controller.Main.criticalErrorExtText": "Pressione \"OK\" para recarregar a página.",
-  "DE.controller.Main.criticalErrorTitle": "Erro",
-  "DE.controller.Main.downloadErrorText": "Download falhou.",
-  "DE.controller.Main.editModeText": "Modo de edição",
-  "DE.controller.Main.errorCoAuthoringDisconnect": "Conexão com servidor perdida. O documento não pode ser editado neste momento.",
-  "DE.controller.Main.errorDefaultMessage": "Código do erro: %1",
-  "DE.controller.Main.errorDocTooBig": "O documento que você está tentando abrir tem mais de 30.000 caracteres ou 1.000 parágrafos e não pode ser aberto em seu dispositivo móvel. Tente abri-lo usando um PC desktop.",
-  "DE.controller.Main.errorKeyEncrypt": "Descritor de chave desconhecido",
-  "DE.controller.Main.errorKeyExpire": "Descritor de chave expirado",
-  "DE.controller.Main.errorUsersExceed": "O número de usuários permitidos pelo plano de preços foi excedido",
-  "DE.controller.Main.loadingDocText": "CARREGANDO DOCUMENTO",
-  "DE.controller.Main.notcriticalErrorTitle": "Aviso",
-  "DE.controller.Main.printText": "Imprimindo...",
-  "DE.controller.Main.reloadButtonText": "Recarregar página",
-  "DE.controller.Main.requestEditFailedMessageText": "Alguém está editando este documento neste momento. Tente novamente mais tarde.",
-  "DE.controller.Main.requestEditFailedTitleText": "Acesso negado",
-  "DE.controller.Main.requestEditRightsText": "Solicitando direitos de edição...",
-  "DE.controller.Main.saveText": "Salvando...",
-  "DE.controller.Main.splitDividerErrorText": "O número de linhas deve ser um divisor de %1",
-  "DE.controller.Main.splitMaxColsErrorText": "O número de colunas deve ser menor que %1",
-  "DE.controller.Main.splitMaxRowsErrorText": "O número de linhas deve ser menor que %1",
-  "DE.controller.Main.textAnonymous": "Anônimo",
-  "DE.controller.Main.unknownErrorText": "Erro desconhecido.",
-  "DE.controller.Main.unsupportedBrowserErrorText ": "Seu navegador não é suportado.",
-  "DE.controller.Main.uploadImageExtMessage": "Formato de imagem desconhecido.",
-  "DE.controller.Main.uploadImageFileCountMessage": "Sem imagens carregadas.",
-  "DE.controller.Main.uploadImageSizeMessage": "Tamanho limite máximo da imagem excedido.",
-  "DE.controller.Main.viewModeText": "Modo de exibição",
-  "DE.controller.phone.Main.pageText": "Página",
-  "DE.controller.tablet.Main.pageText": "Página",
-  "DE.controller.tablet.panel.Insert.unsupportUploadText": "Recurso não é suportado neste dispositivo.",
-  "DE.controller.tablet.panel.Insert.uploadingText": "Carregando",
-  "DE.controller.toolbar.Edit.dlgLeaveMsgText": "Você não salvou as alterações neste documento. Clique em \"Permanecer nesta página\" e, em seguida, \"Salvar\" para salvá-las. Clique em \"Sair desta página\" para descartar todas as alterações não salvas.",
-  "DE.controller.toolbar.Edit.dlgLeaveTitleText": "Você saiu do aplicativo",
-  "DE.controller.toolbar.Edit.leaveButtonText": "Sair desta página",
-  "DE.controller.toolbar.Edit.stayButtonText": "Ficar nesta página",
-  "DE.controller.toolbar.View.requestEditFailedMessageText": "Você não pode editar o documento neste momento. Tente novamente depois.",
-  "DE.controller.toolbar.View.requestEditFailedTitleText": "Acesso negado",
-  "DE.view.phone.Main.cancelText": "Cancelar",
-  "DE.view.phone.Main.searchText": "Pesquisar",
-  "DE.view.phone.toolbar.Search.searchText": "Pesquisar",
-  "DE.view.phone.toolbar.View.doneText": "Concluído",
-  "DE.view.phone.toolbar.View.readerText": "Leitor",
-  "DE.view.tablet.Main.searchText": "Pesquisar",
-  "DE.view.tablet.panel.Font.backText": "Voltar",
-  "DE.view.tablet.panel.Font.fontNameText": "Nome da fonte",
-  "DE.view.tablet.panel.Insert.backText": "Voltar",
-  "DE.view.tablet.panel.Insert.columnsText": "Colunas",
-  "DE.view.tablet.panel.Insert.insertColumnText": "Inserir coluna",
-  "DE.view.tablet.panel.Insert.insertPicture": "Inserir imagem",
-  "DE.view.tablet.panel.Insert.insertRowText": "Inserir linha",
-  "DE.view.tablet.panel.Insert.insertTableText": "Inserir tabela",
-  "DE.view.tablet.panel.Insert.insertText": "Inserir",
-  "DE.view.tablet.panel.Insert.pictureText": "Imagem",
-  "DE.view.tablet.panel.Insert.pictureUploadFloat": "Inserir flutuação",
-  "DE.view.tablet.panel.Insert.pictureUploadInline": "Inserir embutido",
-  "DE.view.tablet.panel.Insert.rowsText": "Linhas",
-  "DE.view.tablet.panel.Insert.tableText": "Tabela",
-  "DE.view.tablet.panel.ListStyle.backText": "Voltar",
-  "DE.view.tablet.panel.ListStyle.bulletsText": "Marcadores",
-  "DE.view.tablet.panel.ListStyle.decIndentText": "Diminuir recuo",
-  "DE.view.tablet.panel.ListStyle.incIndentText": "Aumentar recuo",
-  "DE.view.tablet.panel.ListStyle.listStyleText": "Estilo da lista",
-  "DE.view.tablet.panel.ListStyle.noneText": "nenhum",
-  "DE.view.tablet.panel.ListStyle.numberingText": "Numeração",
-  "DE.view.tablet.panel.ListStyle.outlineText": "Contorno",
-  "DE.view.tablet.panel.Spacing.backText": "Voltar",
-  "DE.view.tablet.panel.Spacing.decIndentText": "Diminuir recuo",
-  "DE.view.tablet.panel.Spacing.incIndentText": "Aumentar recuo",
-  "DE.view.tablet.panel.Spacing.lineSpacingText": "Espaçamento entre linhas do parágrafo",
-  "DE.view.tablet.panel.Spacing.spacingText": "Espaçamento",
-  "DE.view.tablet.panel.TextColor.backText": "Voltar",
-  "DE.view.tablet.panel.TextColor.colorText": "Cor",
-  "DE.view.tablet.panel.TextColor.highlightColorText": "Cor de realce",
-  "DE.view.tablet.panel.TextColor.noFillText": "Sem preenchimento",
-  "DE.view.tablet.panel.TextColor.textColorText": "Cor do texto",
-  "DE.view.tablet.toolbar.Edit.doneText": "Concluído",
-  "DE.view.tablet.toolbar.Edit.fontText": "Fonte",
-  "DE.view.tablet.toolbar.Search.searchText": "Pesquisar",
-  "DE.view.tablet.toolbar.View.doneText": "Concluído",
-  "DE.view.tablet.toolbar.View.editText": "Editar",
-  "DE.view.tablet.toolbar.View.readerText": "Leitor"
-}

apps/documenteditor/mobile/locale/ru.json

@@ -1,89 +0,0 @@
-{
-  "Common.view.PopClip.copyButtonText": "Копировать",
-  "Common.view.PopClip.cutButtonText": "Вырезать",
-  "Common.view.PopClip.pasteButtonText": "Вставить",
-  "DE.controller.Main.convertationErrorText": "Конвертация не удалась.",
-  "DE.controller.Main.convertationTimeoutText": "Превышено время ожидания конвертации.",
-  "DE.controller.Main.criticalErrorExtText": "Нажмите \"OK\", чтобы обновить страницу.",
-  "DE.controller.Main.criticalErrorTitle": "Ошибка",
-  "DE.controller.Main.downloadErrorText": "Загрузка не удалась.",
-  "DE.controller.Main.editModeText": "Режим редактирования",
-  "DE.controller.Main.errorCoAuthoringDisconnect": "Потеряно соединение с сервером. В данный момент нельзя отредактировать документ.",
-  "DE.controller.Main.errorDefaultMessage": "Код ошибки: %1",
-  "DE.controller.Main.errorDocTooBig": "Документ, который вы пытаетесь открыть, содержит более 30000 символов или 1000 абзацев, и его нельзя открыть на вашем мобильном устройстве. Пожалуйста, попробуйте открыть его на настольном компьютере.",
-  "DE.controller.Main.errorKeyEncrypt": "Неизвестный дескриптор ключа",
-  "DE.controller.Main.errorKeyExpire": "Срок действия дескриптора ключа истек",
-  "DE.controller.Main.errorUsersExceed": "Превышено количество пользователей, разрешенных согласно тарифному плану",
-  "DE.controller.Main.loadingDocText": "ЗАГРУЗКА ДОКУМЕНТА",
-  "DE.controller.Main.notcriticalErrorTitle": "Предупреждение",
-  "DE.controller.Main.printText": "Печать...",
-  "DE.controller.Main.reloadButtonText": "Обновить страницу",
-  "DE.controller.Main.requestEditFailedMessageText": "В настоящее время документ редактируется. Пожалуйста, попробуйте позже.",
-  "DE.controller.Main.requestEditFailedTitleText": "Доступ запрещен",
-  "DE.controller.Main.requestEditRightsText": "Запрос прав на редактирование...",
-  "DE.controller.Main.saveText": "Сохранение...",
-  "DE.controller.Main.splitDividerErrorText": "Число строк должно являться делителем для %1",
-  "DE.controller.Main.splitMaxColsErrorText": "Число столбцов должно быть меньше, чем %1",
-  "DE.controller.Main.splitMaxRowsErrorText": "Число строк должно быть меньше, чем %1",
-  "DE.controller.Main.textAnonymous": "Аноним",
-  "DE.controller.Main.unknownErrorText": "Неизвестная ошибка.",
-  "DE.controller.Main.unsupportedBrowserErrorText ": "Ваш браузер не поддерживается.",
-  "DE.controller.Main.uploadImageExtMessage": "Неизвестный формат изображения.",
-  "DE.controller.Main.uploadImageFileCountMessage": "Ни одного изображения не загружено.",
-  "DE.controller.Main.uploadImageSizeMessage": "Превышен максимальный размер изображения.",
-  "DE.controller.Main.viewModeText": "Режим просмотра",
-  "DE.controller.phone.Main.pageText": "Страница",
-  "DE.controller.tablet.Main.pageText": "Страница",
-  "DE.controller.tablet.panel.Insert.unsupportUploadText": "Функция не поддерживается на этом устройстве.",
-  "DE.controller.tablet.panel.Insert.uploadingText": "Загрузка",
-  "DE.controller.toolbar.Edit.dlgLeaveMsgText": "Документ содержит несохраненные изменения. Чтобы сохранить их, нажмите \"Остаться\", затем \"Сохранить\". Нажмите \"Покинуть страницу\", чтобы сбросить все несохраненные изменения.",
-  "DE.controller.toolbar.Edit.dlgLeaveTitleText": "Вы выходите из приложения",
-  "DE.controller.toolbar.Edit.leaveButtonText": "Покинуть страницу",
-  "DE.controller.toolbar.Edit.stayButtonText": "Остаться",
-  "DE.controller.toolbar.View.requestEditFailedMessageText": "В настоящий момент нельзя отредактировать документ. Пожалуйста, попробуйте позже.",
-  "DE.controller.toolbar.View.requestEditFailedTitleText": "Доступ запрещен",
-  "DE.view.phone.Main.cancelText": "Отмена",
-  "DE.view.phone.Main.searchText": "Поиск",
-  "DE.view.phone.toolbar.Search.searchText": "Поиск",
-  "DE.view.phone.toolbar.View.doneText": "Готово",
-  "DE.view.phone.toolbar.View.readerText": "Режим чтения",
-  "DE.view.tablet.Main.searchText": "Поиск",
-  "DE.view.tablet.panel.Font.backText": "Назад",
-  "DE.view.tablet.panel.Font.fontNameText": "Название шрифта",
-  "DE.view.tablet.panel.Insert.backText": "Назад",
-  "DE.view.tablet.panel.Insert.columnsText": "Столбцы",
-  "DE.view.tablet.panel.Insert.insertColumnText": "Вставить столбец",
-  "DE.view.tablet.panel.Insert.insertPicture": "Вставить изображение",
-  "DE.view.tablet.panel.Insert.insertRowText": "Вставить строку",
-  "DE.view.tablet.panel.Insert.insertTableText": "Вставить таблицу",
-  "DE.view.tablet.panel.Insert.insertText": "Вставить",
-  "DE.view.tablet.panel.Insert.pictureText": "Изображение",
-  "DE.view.tablet.panel.Insert.pictureUploadFloat": "Вставить плавающее",
-  "DE.view.tablet.panel.Insert.pictureUploadInline": "Вставить встроенное",
-  "DE.view.tablet.panel.Insert.rowsText": "Строки",
-  "DE.view.tablet.panel.Insert.tableText": "Таблица",
-  "DE.view.tablet.panel.ListStyle.backText": "Назад",
-  "DE.view.tablet.panel.ListStyle.bulletsText": "Маркированный список",
-  "DE.view.tablet.panel.ListStyle.decIndentText": "Уменьшить отступ",
-  "DE.view.tablet.panel.ListStyle.incIndentText": "Увеличить отступ",
-  "DE.view.tablet.panel.ListStyle.listStyleText": "Стиль списка",
-  "DE.view.tablet.panel.ListStyle.noneText": "нет",
-  "DE.view.tablet.panel.ListStyle.numberingText": "Нумерованный список",
-  "DE.view.tablet.panel.ListStyle.outlineText": "Структура",
-  "DE.view.tablet.panel.Spacing.backText": "Назад",
-  "DE.view.tablet.panel.Spacing.decIndentText": "Уменьшить отступ",
-  "DE.view.tablet.panel.Spacing.incIndentText": "Увеличить отступ",
-  "DE.view.tablet.panel.Spacing.lineSpacingText": "Междустрочный интервал в абзацах",
-  "DE.view.tablet.panel.Spacing.spacingText": "Интервал",
-  "DE.view.tablet.panel.TextColor.backText": "Назад",
-  "DE.view.tablet.panel.TextColor.colorText": "Цвет",
-  "DE.view.tablet.panel.TextColor.highlightColorText": "Цвет выделения",
-  "DE.view.tablet.panel.TextColor.noFillText": "Без заливки",
-  "DE.view.tablet.panel.TextColor.textColorText": "Цвет текста",
-  "DE.view.tablet.toolbar.Edit.doneText": "Готово",
-  "DE.view.tablet.toolbar.Edit.fontText": "Шрифт",
-  "DE.view.tablet.toolbar.Search.searchText": "Поиск",
-  "DE.view.tablet.toolbar.View.doneText": "Готово",
-  "DE.view.tablet.toolbar.View.editText": "Редактировать",
-  "DE.view.tablet.toolbar.View.readerText": "Режим чтения"
-}

apps/documenteditor/mobile/locale/sl.json

@@ -1,89 +0,0 @@
-{
-  "Common.view.PopClip.copyButtonText": "Kopiraj",
-  "Common.view.PopClip.cutButtonText": "Izreži",
-  "Common.view.PopClip.pasteButtonText": "Prilepi",
-  "DE.controller.Main.convertationErrorText": "Pogovor ni uspel.",
-  "DE.controller.Main.convertationTimeoutText": "Pretvorbena prekinitev presežena.",
-  "DE.controller.Main.criticalErrorExtText": "Pritisnite \"OK\" za osvežitev strani.",
-  "DE.controller.Main.criticalErrorTitle": "Napaka",
-  "DE.controller.Main.downloadErrorText": "Prenos ni uspel.",
-  "DE.controller.Main.editModeText": "Urejevalni način",
-  "DE.controller.Main.errorCoAuthoringDisconnect": "Povezava s strežnikom izgubljena. Dokument v tem trenutku ne more biti urejen.",
-  "DE.controller.Main.errorDefaultMessage": "Koda napake: %1",
-  "DE.controller.Main.errorDocTooBig": "Dokument, ki ga poskušate odpreti ima več kot 30000 znakov ali 1000 odstavkov in ne more biti odprt na vaši mobilni napravi. Prosim poskušajte jo odpreti z uporabo PC-ja.",
-  "DE.controller.Main.errorKeyEncrypt": "Neznan ključni deskriptor",
-  "DE.controller.Main.errorKeyExpire": "Ključni deskriptor je potekel",
-  "DE.controller.Main.errorUsersExceed": "Število uporabnikov, ki ga dovoljuje cenovni načrt, je bilo preseženo",
-  "DE.controller.Main.loadingDocText": "NALAGANJE DOKUMENTA",
-  "DE.controller.Main.notcriticalErrorTitle": "Opozorilo",
-  "DE.controller.Main.printText": "Tiskanje...",
-  "DE.controller.Main.reloadButtonText": "Osveži stran",
-  "DE.controller.Main.requestEditFailedMessageText": "Nekdo v tem trenutku ureja ta dokument. Prosim ponovno poskusite kasneje.",
-  "DE.controller.Main.requestEditFailedTitleText": "Dostop zavrnjen",
-  "DE.controller.Main.requestEditRightsText": "Zahtevanje urejevalnih pravic...",
-  "DE.controller.Main.saveText": "Shranjevanje...",
-  "DE.controller.Main.splitDividerErrorText": "Število vrstic mora biti delitelj %1",
-  "DE.controller.Main.splitMaxColsErrorText": "Število stolpcev mora biti manj kot %1",
-  "DE.controller.Main.splitMaxRowsErrorText": "Število vrstic mora biti manj kot %1",
-  "DE.controller.Main.textAnonymous": "Anonimno",
-  "DE.controller.Main.unknownErrorText": "Neznana napaka.",
-  "DE.controller.Main.unsupportedBrowserErrorText ": "Vaš brskalnik ni podprt.",
-  "DE.controller.Main.uploadImageExtMessage": "Neznan format slike.",
-  "DE.controller.Main.uploadImageFileCountMessage": "Ni naloženih slik.",
-  "DE.controller.Main.uploadImageSizeMessage": "Maksimalni limit velikosti slike je presežen.",
-  "DE.controller.Main.viewModeText": "Način ogleda",
-  "DE.controller.phone.Main.pageText": "Stran",
-  "DE.controller.tablet.Main.pageText": "Stran",
-  "DE.controller.tablet.panel.Insert.unsupportUploadText": "Funkcija v tej napravi ni podprta.",
-  "DE.controller.tablet.panel.Insert.uploadingText": "Nalaganje",
-  "DE.controller.toolbar.Edit.dlgLeaveMsgText": "V tem dokumentu imate neshranjene spremembe. Pritisnite \"Ostani na tej strani\" in nato \"Shrani\", da se shranijo. Pritisnite \"Zapusti to stran\", če želite zavreči vse neshranjene spremembe.",
-  "DE.controller.toolbar.Edit.dlgLeaveTitleText": "Zapustite aplikacijo",
-  "DE.controller.toolbar.Edit.leaveButtonText": "Zapusti to stran",
-  "DE.controller.toolbar.Edit.stayButtonText": "Ostani na tej strani",
-  "DE.controller.toolbar.View.requestEditFailedMessageText": "V tem trenutku ne morete urediti dokumenta. Ponovno prosim poskusite kasneje.",
-  "DE.controller.toolbar.View.requestEditFailedTitleText": "Dostop zavrnjen",
-  "DE.view.phone.Main.cancelText": "Prekliči",
-  "DE.view.phone.Main.searchText": "Iskanje",
-  "DE.view.phone.toolbar.Search.searchText": "Iskanje",
-  "DE.view.phone.toolbar.View.doneText": "Končano",
-  "DE.view.phone.toolbar.View.readerText": "Bralnik",
-  "DE.view.tablet.Main.searchText": "Iskanje",
-  "DE.view.tablet.panel.Font.backText": "Nazaj",
-  "DE.view.tablet.panel.Font.fontNameText": "Ime pisave",
-  "DE.view.tablet.panel.Insert.backText": "Nazaj",
-  "DE.view.tablet.panel.Insert.columnsText": "Stolpci",
-  "DE.view.tablet.panel.Insert.insertColumnText": "Vstavi stolpec",
-  "DE.view.tablet.panel.Insert.insertPicture": "Vstavi sliko",
-  "DE.view.tablet.panel.Insert.insertRowText": "Vstavi vrsto",
-  "DE.view.tablet.panel.Insert.insertTableText": "Vstavi tabelo",
-  "DE.view.tablet.panel.Insert.insertText": "Vstavi",
-  "DE.view.tablet.panel.Insert.pictureText": "Slika",
-  "DE.view.tablet.panel.Insert.pictureUploadFloat": "Vstavi plovnost",
-  "DE.view.tablet.panel.Insert.pictureUploadInline": "Vstavi v vrstici",
-  "DE.view.tablet.panel.Insert.rowsText": "Vrste",
-  "DE.view.tablet.panel.Insert.tableText": "Tabela",
-  "DE.view.tablet.panel.ListStyle.backText": "Nazaj",
-  "DE.view.tablet.panel.ListStyle.bulletsText": "Krogle",
-  "DE.view.tablet.panel.ListStyle.decIndentText": "Zmanjšaj zamik",
-  "DE.view.tablet.panel.ListStyle.incIndentText": "Povečajte zamik",
-  "DE.view.tablet.panel.ListStyle.listStyleText": "Slog seznama",
-  "DE.view.tablet.panel.ListStyle.noneText": "nič",
-  "DE.view.tablet.panel.ListStyle.numberingText": "Oštevilčenje",
-  "DE.view.tablet.panel.ListStyle.outlineText": "Obroba",
-  "DE.view.tablet.panel.Spacing.backText": "Nazaj",
-  "DE.view.tablet.panel.Spacing.decIndentText": "Zmanjšaj zamik",
-  "DE.view.tablet.panel.Spacing.incIndentText": "Povečajte zamik",
-  "DE.view.tablet.panel.Spacing.lineSpacingText": "Razmik črt odstavka",
-  "DE.view.tablet.panel.Spacing.spacingText": "Razmik",
-  "DE.view.tablet.panel.TextColor.backText": "Nazaj",
-  "DE.view.tablet.panel.TextColor.colorText": "Barva",
-  "DE.view.tablet.panel.TextColor.highlightColorText": "Označi barvo",
-  "DE.view.tablet.panel.TextColor.noFillText": "Ni polnila",
-  "DE.view.tablet.panel.TextColor.textColorText": "Barva besedila",
-  "DE.view.tablet.toolbar.Edit.doneText": "Končano",
-  "DE.view.tablet.toolbar.Edit.fontText": "Pisava",
-  "DE.view.tablet.toolbar.Search.searchText": "Iskanje",
-  "DE.view.tablet.toolbar.View.doneText": "Končano",
-  "DE.view.tablet.toolbar.View.editText": "Uredi",
-  "DE.view.tablet.toolbar.View.readerText": "Bralnik"
-}

apps/documenteditor/mobile/locale/tr.json

@@ -1,89 +0,0 @@
-{
-  "Common.view.PopClip.copyButtonText": "Kopyala",
-  "Common.view.PopClip.cutButtonText": "Kes",
-  "Common.view.PopClip.pasteButtonText": "Yapıştır",
-  "DE.controller.Main.convertationErrorText": "Değişim başarısız oldu.",
-  "DE.controller.Main.convertationTimeoutText": "Değişim süresi aşıldı.",
-  "DE.controller.Main.criticalErrorExtText": "Sayfayı yenilemek için \"TAMAM\"'a tıklayınız",
-  "DE.controller.Main.criticalErrorTitle": "Hata",
-  "DE.controller.Main.downloadErrorText": "Yükleme başarısız oldu.",
-  "DE.controller.Main.editModeText": "Düzenleme modu",
-  "DE.controller.Main.errorCoAuthoringDisconnect": "Sunucu bağlantısı kesildi. Döküman şu an düzenlenemez.",
-  "DE.controller.Main.errorDefaultMessage": "Hata kodu: %1",
-  "DE.controller.Main.errorDocTooBig": "Açmaya çalıştığınız dökümanda 30000'den fazla karaktar yada 1000'den fazla paragraf var ve mobil aygıtınızda açılamıyor. Lütfen masaüstü PC'nizi kullanarak açmayı deneyin.",
-  "DE.controller.Main.errorKeyEncrypt": "Bilinmeyen anahtar tanımlayıcı",
-  "DE.controller.Main.errorKeyExpire": "Anahtar tanımlayıcının süresi doldu",
-  "DE.controller.Main.errorUsersExceed": "Fiyat planının izin verdiği kullanıcı sayısı aşıldı",
-  "DE.controller.Main.loadingDocText": "DÖKÜMAN YÜKLENİYOR",
-  "DE.controller.Main.notcriticalErrorTitle": "Dikkat",
-  "DE.controller.Main.printText": "Yazdırılıyor...",
-  "DE.controller.Main.reloadButtonText": "Sayfayı Yenile",
-  "DE.controller.Main.requestEditFailedMessageText": "Şu bu döküman biri tarafından düzenleniyor. Lütfen daha sonra tekrar deneyin.",
-  "DE.controller.Main.requestEditFailedTitleText": "Erişim reddedildi",
-  "DE.controller.Main.requestEditRightsText": "Düzenleme hakları isteniyor...",
-  "DE.controller.Main.saveText": "Kaydediliyor...",
-  "DE.controller.Main.splitDividerErrorText": "Satır sayısı %1'in böleni olmalıdır",
-  "DE.controller.Main.splitMaxColsErrorText": "Sütun sayısı %1'den az olmalıdır",
-  "DE.controller.Main.splitMaxRowsErrorText": "Satır sayısı %1'den az olmalıdır",
-  "DE.controller.Main.textAnonymous": "Anonim",
-  "DE.controller.Main.unknownErrorText": "Bilinmeyen hata.",
-  "DE.controller.Main.unsupportedBrowserErrorText ": "Tarayıcınız desteklenmiyor.",
-  "DE.controller.Main.uploadImageExtMessage": "Bilinmeyen resim formatı",
-  "DE.controller.Main.uploadImageFileCountMessage": "Resim yüklenmedi.",
-  "DE.controller.Main.uploadImageSizeMessage": "Maksimum resim boyutu aşıldı.",
-  "DE.controller.Main.viewModeText": "Görüntüleme Modu",
-  "DE.controller.phone.Main.pageText": "Sayfa",
-  "DE.controller.tablet.Main.pageText": "Sayfa",
-  "DE.controller.tablet.panel.Insert.unsupportUploadText": "Özellik bu aygıtta desteklenmiyor.",
-  "DE.controller.tablet.panel.Insert.uploadingText": "Yükleniyor",
-  "DE.controller.toolbar.Edit.dlgLeaveMsgText": "Bu dökümandaki değişiklikleri kaydetmediniz. \"Bu sayfada kal\"'a tıklayınız ve sonrasında kaydetmek için \"Kaydet\"'e tıklayınız. Kaydedilmeyen değişikliklerin tümünü göz ardı etmek için \"Bu Sayfadan Ayrıl\"'a tıklayınız.",
-  "DE.controller.toolbar.Edit.dlgLeaveTitleText": "Uygulamadan çıkıyorsunuz",
-  "DE.controller.toolbar.Edit.leaveButtonText": "Bu sayfadan ayrıl",
-  "DE.controller.toolbar.Edit.stayButtonText": "Bu sayfada kal",
-  "DE.controller.toolbar.View.requestEditFailedMessageText": "Dökümanı şimdi düzenleyemezsiniz. Lütfen daha sonra tekrar deneyin.",
-  "DE.controller.toolbar.View.requestEditFailedTitleText": "Erişim reddedildi",
-  "DE.view.phone.Main.cancelText": "İptal Et",
-  "DE.view.phone.Main.searchText": "Ara",
-  "DE.view.phone.toolbar.Search.searchText": "Ara",
-  "DE.view.phone.toolbar.View.doneText": "Tamamlandı",
-  "DE.view.phone.toolbar.View.readerText": "Okuyucu",
-  "DE.view.tablet.Main.searchText": "Ara",
-  "DE.view.tablet.panel.Font.backText": "Geri",
-  "DE.view.tablet.panel.Font.fontNameText": "Yazı Tipi İsmi",
-  "DE.view.tablet.panel.Insert.backText": "Geri",
-  "DE.view.tablet.panel.Insert.columnsText": "Sütunlar",
-  "DE.view.tablet.panel.Insert.insertColumnText": "Sütun Ekle",
-  "DE.view.tablet.panel.Insert.insertPicture": "Resim ekle",
-  "DE.view.tablet.panel.Insert.insertRowText": "Satır Ekle",
-  "DE.view.tablet.panel.Insert.insertTableText": "Tablo ekle",
-  "DE.view.tablet.panel.Insert.insertText": "Ekle",
-  "DE.view.tablet.panel.Insert.pictureText": "Resim",
-  "DE.view.tablet.panel.Insert.pictureUploadFloat": "Kaydırma Ekle",
-  "DE.view.tablet.panel.Insert.pictureUploadInline": "Satıriçi Ekle",
-  "DE.view.tablet.panel.Insert.rowsText": "Satırlar",
-  "DE.view.tablet.panel.Insert.tableText": "Tablo",
-  "DE.view.tablet.panel.ListStyle.backText": "Geri",
-  "DE.view.tablet.panel.ListStyle.bulletsText": "İmler",
-  "DE.view.tablet.panel.ListStyle.decIndentText": "Girintiyi Azalt",
-  "DE.view.tablet.panel.ListStyle.incIndentText": "Girintiyi Arttır",
-  "DE.view.tablet.panel.ListStyle.listStyleText": "Listeleme Stili",
-  "DE.view.tablet.panel.ListStyle.noneText": "hiçbiri",
-  "DE.view.tablet.panel.ListStyle.numberingText": "Numaralandırma",
-  "DE.view.tablet.panel.ListStyle.outlineText": "Çerçeve",
-  "DE.view.tablet.panel.Spacing.backText": "Geri",
-  "DE.view.tablet.panel.Spacing.decIndentText": "Girintiyi Azalt",
-  "DE.view.tablet.panel.Spacing.incIndentText": "Girintiyi Arttır",
-  "DE.view.tablet.panel.Spacing.lineSpacingText": "Paragraf Satır Aralığı",
-  "DE.view.tablet.panel.Spacing.spacingText": "Aralık",
-  "DE.view.tablet.panel.TextColor.backText": "Geri",
-  "DE.view.tablet.panel.TextColor.colorText": "Renk",
-  "DE.view.tablet.panel.TextColor.highlightColorText": "Vurgu Rengi",
-  "DE.view.tablet.panel.TextColor.noFillText": "Dolgu Yok",
-  "DE.view.tablet.panel.TextColor.textColorText": "Metin rengi",
-  "DE.view.tablet.toolbar.Edit.doneText": "Tamamlandı",
-  "DE.view.tablet.toolbar.Edit.fontText": "Yazı Tipi",
-  "DE.view.tablet.toolbar.Search.searchText": "Ara",
-  "DE.view.tablet.toolbar.View.doneText": "Tamamlandı",
-  "DE.view.tablet.toolbar.View.editText": "Düzenle",
-  "DE.view.tablet.toolbar.View.readerText": "Okuyucu"
-}