[SSE mobile] added new-styled mobile apps

apps/spreadsheeteditor/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 Maxim Kadushkin on 11/14/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',
+        analytics       : 'common/Analytics',
+        gateway         : 'common/Gateway',
+        locale          : 'common/locale',
+        irregularstack  : 'common/IrregularStack',
+        sharedsettings  : 'common/mobile/utils/SharedSettings'
+    },
+
+    shim: {
+        framework7: {
+            exports: 'Framework7'
+        },
+        underscore: {
+            exports: '_'
+        },
+        backbone: {
+            deps: [
+                'underscore',
+                'jquery'
+            ],
+            exports: 'Backbone'
+        },
+        core: {
+            deps: [
+                'backbone',
+                'notification',
+                'irregularstack',
+                'sharedsettings'
+            ]
+        }
+    }
+});
+
+require([
+    'backbone',
+    'framework7',
+    'core',
+    'underscore',
+    'extendes',
+    'api',
+    'analytics',
+    'gateway',
+    'locale',
+    'jszip',
+    'jsziputils',
+    'jsrsasign',
+    'sockjs'
+], function (Backbone, Framework7) {
+    Backbone.history.start();
+
+    /**
+     * Application instance with DE namespace defined
+     */
+    var app = new Backbone.Application({
+        nameSpace: 'SSE',
+        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',
+        'spreadsheeteditor/mobile/app/controller/Editor',
+        'spreadsheeteditor/mobile/app/controller/Toolbar',
+        'spreadsheeteditor/mobile/app/controller/Main',
+        'spreadsheeteditor/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/spreadsheeteditor/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 Maxim Kadushkin on 11/15/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+define([
+    'core',
+    'spreadsheeteditor/mobile/app/view/DocumentHolder'
+], function (core) {
+    'use strict';
+
+    SSE.Controllers.DocumentHolder = Backbone.Controller.extend((function() {
+        // private
+        var _stack,
+            _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));
+            },
+
+            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.asc_Cut();
+                } else if ('copy' == eventName) {
+                    me.api.asc_Copy();
+                } else if ('paste' == eventName) {
+                    me.api.asc_Paste();
+                } else if ('delete' == eventName) {
+                    console.debug('IMPLEMENT: Delete fragment');
+                } else if ('edit' == eventName) {
+                    me.view.hideMenu();
+
+                    SSE.getController('EditContainer').showModal();
+                } else if ('addlink' == eventName) {
+                    me.view.hideMenu();
+
+                    SSE.getController('AddContainer').showModal();
+                    SSE.getController('AddOther').getView('AddOther').showLink();
+                } else if ('openlink' == eventName) {
+                    _.some(_stack, function (item) {
+                        if (item.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) {
+                            me._openLink(item.get_ObjectValue().get_Value());
+                            return true;
+                        }
+                    });
+                }
+
+                me.view.hideMenu();
+            },
+
+            // API Handlers
+
+            onEditorResize: function(cmp) {
+                // Hide context menu
+            },
+
+            onApiShowPopMenu: function(posX, posY) {
+                var me = this,
+                    items;
+
+                _stack = me.api.getSelectedElements();
+                items = me._initMenu(_stack);
+
+                me.view.showMenu(items, posX, posY);
+            },
+
+            onApiHidePopMenu: function() {
+                this.view.hideMenu();
+            },
+
+            // Internal
+
+            _openLink: function(url) {
+                if (this.api.asc_getUrlType(url) > 0) {
+                    var newDocumentPage = window.open(url, '_blank');
+
+                    if (newDocumentPage) {
+                        newDocumentPage.focus();
+                    }
+                }
+            },
+
+            _initMenu: function (stack) {
+                var me = this,
+                    menuItems = [],
+                    canCopy = me.api.can_CopyCut();
+
+                if (canCopy) {
+                    menuItems.push({
+                        caption: 'Copy',
+                        event: 'copy'
+                    });
+                }
+
+                var isText = false,
+                    isTable = false,
+                    isImage = false,
+                    isChart = false,
+                    isShape = false,
+                    isLink = false;
+
+                _.each(stack, function (item) {
+                    var objectType = item.get_ObjectType(),
+                        objectValue = item.get_ObjectValue();
+
+                    if (objectType == Asc.c_oAscTypeSelectElement.Text) {
+                        isText = true;
+                    } else if (objectType == Asc.c_oAscTypeSelectElement.Image) {
+                        if (objectValue && objectValue.get_ChartProperties()) {
+                            isChart = true;
+                        } else if (objectType && objectValue.get_ShapeProperties()) {
+                            isShape = true;
+                        } else {
+                            isImage = true;
+                        }
+                    } else if (objectType == Asc.c_oAscTypeSelectElement.Table) {
+                        isTable = true;
+                    } else if (objectType == Asc.c_oAscTypeSelectElement.Hyperlink) {
+                        isLink = true;
+                    }
+                });
+
+                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 Link',
+                            event: 'addlink'
+                        });
+                    }
+
+                    if (isLink) {
+                        menuItems.push({
+                            caption: 'Open Link',
+                            event: 'openlink'
+                        });
+                    }
+                }
+
+                if (Common.SharedSettings.get('phone') && menuItems.length > 3) {
+                    menuItems = menuItems.slice(0, 3);
+                }
+
+                return menuItems;
+            }
+        }
+    })());
+});
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/controller/Editor.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
+ *
+ */
+
+/**
+ *  Editor.js
+ *  Document Editor
+ *
+ *  Created by Maxim Kadushkin on 11/15/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'spreadsheeteditor/mobile/app/view/Editor'
+], function (core) {
+    'use strict';
+
+    SSE.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.asc_Resize();
+            }
+        }
+    })());
+});

apps/spreadsheeteditor/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 Maxim Kadushkin on 11/15/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'core',
+    'spreadsheeteditor/mobile/app/view/Toolbar'
+], function (core) {
+    'use strict';
+
+    SSE.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.asc_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.asc_Undo();
+            },
+
+            onRedo: function (e) {
+                if ( this.api ) this.api.asc_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/spreadsheeteditor/mobile/app/template/AddImage.template

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

apps/spreadsheeteditor/mobile/app/template/AddShape.template

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

apps/spreadsheeteditor/mobile/app/template/AddTable.template

+<!-- Root view -->
+<div id="add-table-root">
+    <div class="page-content dataview table-styles">
+        <ul class="row">
+            <% _.each(styles, function(style) { %>
+            <li data-type="<%= style.templateId %>">
+                <img src="<%= style.imageUrl %>">
+            </li>
+            <% }); %>
+        </ul>
+    </div>
+</div>
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/template/EditHyperlink.template

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

apps/spreadsheeteditor/mobile/app/template/EditParagraph.template

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

apps/spreadsheeteditor/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

apps/spreadsheeteditor/mobile/app/template/Toolbar.template

+<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/spreadsheeteditor/mobile/app/view/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 Maxim Kadushkin on 11/8/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'jquery',
+    'underscore',
+    'backbone'
+], function ($, _, Backbone) {
+    'use strict';
+
+    SSE.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');
+            }
+        }
+    })());
+});
\ No newline at end of file

apps/spreadsheeteditor/mobile/app/view/Editor.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
+ *
+ */
+
+/**
+ *  Editor.js
+ *  Document Editor
+ *
+ *  Created by Maxim Kadushkin on 11/15/16
+ *  Copyright (c) 2016 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+
+define([
+    'text!spreadsheeteditor/mobile/app/template/Editor.template',
+    'jquery',
+    'underscore',
+    'backbone'
+], function (editorTemplate, $, _, Backbone) {
+    'use strict';
+
+    SSE.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;
+        }
+    });
+});
\ No newline at end of file