[DE mobile] Update document editor mobile.

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

+/*
+ *
+ * (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 || {}));
+});
\ No newline at end of file

apps/common/mobile/utils/SharedSettings.js

+/**
+ *  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/documenteditor/mobile/app/controller/Document.js → 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() {
-    },
-
-    launch: function() {
-        Ext.getCmp('id-conteiner-document').on('resize', this.onEditorResize, this);
-    },
+/**
+ *  extendes.js
+ *
+ *  Created by Alexander Yuzhin on 10/14/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
 
-    setApi: function(o) {
-        this.api = o;
+(function() {
 
-        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);
+        };
+    };
+
+})();
\ No newline at end of file

apps/documenteditor/mobile/app-dev.js

+/*
+ *
+ * (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();
+    }
+});
\ No newline at end of file

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();
+    }
+});
\ No newline at end of file

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

+/*
+ *
+ * (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;
+            }
+        }
+    })());
+});
\ No newline at end of file

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

@@ -29,71 +29,84 @@
  * 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);
+ */
+
+/**
+ *  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);
         }
 
-        if (popClipController) {
-            popClipController.setMode(mode);
+        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)));
         }
-    },
 
-    setReadableMode: function(readable) {
-        var readableBtn = this.getReadableBtn();
+        return {
+            // Specifying a EditorController model
+            models: [],
 
-        if (readableBtn)
-            readable ? readableBtn.show() : readableBtn.hide();
-    }
+            // Specifying a collection of out EditorView
+            collections: [],
 
-}); 
+            // Specifying application views
\ No newline at end of file
+            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/Toolbar.js

+/*
+ *
+ * (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',
+        }
+    })());
+});
\ No newline at end of file

apps/documenteditor/mobile/app/view/tablet/toolbar/View.js → apps/documenteditor/mobile/app/controller/add/AddImage.js

@@ -29,92 +29,107 @@
  * 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
+ */
+
+/**
+ *  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();
             },
-            {
-                id      : 'id-tb-btn-search',
-                ui      : 'base',
-                iconCls : 'search'
+
+            initEvents: function () {
+                var me = this;
+                $('#add-image-file').single('click', _.bind(me.onInsertByFile, me));
             },
-            {
-                id      : 'id-tb-btn-incfontsize',
-                ui      : 'base',
-                iconCls : 'textbigger',
-                hidden  : true
+
+            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);
             },
-            {
-                id      : 'id-tb-btn-decfontsize',
-                ui      : 'base',
-                iconCls : 'textless',
-                hidden  : true
+
+            // Handlers
+
+            onInsertByFile: function (e) {
+                DE.getController('AddContainer').hideModal();
+
+                if (this.api) {
+                    this.api.asc_addImage();
+                }
             },
-            {
-                id      : 'id-tb-btn-fullscreen',
-                ui      : 'base',
-                iconCls : 'fullscreen'
+
+            onUrlChange: function (e) {
+                $('#addimage-insert')[_.isEmpty($(e.currentTarget).val()) ? 'addClass' : 'removeClass']('disabled');
             },
-            {
-                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);
-    },
+            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);
+                }
+            },
 
-    doneText    : 'Done',
-    editText    : 'Edit',
-    readerText  : 'Reader'
-});
+            textEmptyImgUrl : 'You need to specify image URL.',
+            txtNotUrl       : 'This field should be a URL in the format \"http://www.example.com\"'
+        }
+    })());
\ No newline at end of file
+});

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

+/*
+ *
+ * (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

+/*
+ *
+ * (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;
+            }
+        }
+    })());
+});
\ No newline at end of file

apps/documenteditor/mobile/app/view/tablet/panel/Font.js → apps/documenteditor/mobile/app/controller/add/AddTable.js

@@ -29,107 +29,139 @@
  * 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'
+ */
+
+/**
+ *  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));
             },
-            layout: {
-                type        : 'card',
-                animation   : null
+
+            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();
             },
-            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   : [
+
+            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: [
                                 {
-                                    id      : 'id-btn-baseline-up',
-                                    ui      : 'base',
-                                    iconCls : 'superscript'
+                                    text: 'Cancel'
                                 },
                                 {
-                                    id      : 'id-btn-baseline-down',
-                                    ui      : 'base',
-                                    iconCls : 'subscript'
+                                    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 ?
+                                        }
+                                    }
                                 }
                             ]
-                        }
-                    ]
-                }
-            ]
-        });
-
-        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'
-});
+                        });
+
+                        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);
+            },
\ No newline at end of file
+
+            // 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/phone/Main.js

-/*
- *
- * (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();
-        }
-    }
-}); 
\ No newline at end of file

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

+<!-- 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>
\ No newline at end of file

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

+<!-- 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>
\ No newline at end of file

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

+<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>
\ No newline at end of file