init repo

OfficeWeb/apps/documenteditor/mobile/app/controller/Document.js

@@ -0,0 +1,65 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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.Document", {
+    extend: "Ext.app.Controller",
+    init: function () {},
+    launch: function () {
+        Ext.getCmp("id-conteiner-document").on("resize", this.onEditorResize, this);
+    },
+    setApi: function (o) {
+        this.api = o;
+        if (this.api) {
+            this.api.asc_registerCallback("asc_onShowPopMenu", Ext.bind(this.onApiShowPopMenu, this));
+            this.api.asc_registerCallback("asc_onHidePopMenu", Ext.bind(this.onApiHidePopMenu, this));
+        }
+    },
+    onEditorResize: function (cmp) {
+        if (this.api) {
+            this.api.Resize();
+            this.onApiHidePopMenu();
+        }
+    },
+    onApiShowPopMenu: function (posX, posY) {
+        var popClipCmp = Ext.ComponentQuery.query("popclip");
+        if (popClipCmp.length > 0) {
+            popClipCmp[0].setLeft(posX);
+            popClipCmp[0].setTop(posY);
+            popClipCmp[0].show();
+        }
+    },
+    onApiHidePopMenu: function () {
+        var popClipCmp = Ext.ComponentQuery.query("popclip");
+        if (popClipCmp.length > 0) {
+            popClipCmp[0].hide();
+        }
+    }
+});

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

@@ -0,0 +1,321 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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.Main", {
+    extend: "Ext.app.Controller",
+    editMode: false,
+    requires: ["Ext.Anim", "Ext.LoadMask", "Ext.MessageBox"],
+    launch: function () {
+        if (!this._isSupport()) {
+            Common.Gateway.reportError(undefined, this.unsupportedBrowserErrorText);
+            return;
+        }
+        this.initControl();
+        Common.component.Analytics.initialize("UA-12442749-13", "Document Editor Mobile");
+        var api = this.api,
+        app = this.getApplication();
+        api = new asc_docs_api("id-sdkeditor");
+        api.SetMobileVersion(true);
+        api.CreateComponents();
+        api.SetFontsPath("../../../sdk/Fonts/");
+        api.Init();
+        api.initEvents2MobileAdvances();
+        api.asc_registerCallback("asc_onStartAction", Ext.bind(this.onLongActionBegin, this));
+        api.asc_registerCallback("asc_onError", Ext.bind(this.onError, this));
+        api.asc_registerCallback("asc_onEndAction", Ext.bind(this.onLongActionEnd, this));
+        api.asc_registerCallback("asc_onDocumentContentReady", Ext.bind(this.onDocumentContentReady, this));
+        api.asc_registerCallback("asc_onOpenDocumentProgress2", Ext.bind(this.onOpenDocument, this));
+        api.asc_registerCallback("asc_onSaveUrl", Ext.bind(this.onSaveUrl, this));
+        api.asc_registerCallback("asc_onGetEditorPermissions", Ext.bind(this.onEditorPermissions, this));
+        Ext.each(app.getControllers(), function (controllerName) {
+            var controller = this.getApplication().getController(controllerName);
+            controller && Ext.isFunction(controller.setApi) && controller.setApi(api);
+        },
+        this);
+        this.initApi();
+        this.editorConfig = {};
+        Common.Gateway.on("init", Ext.bind(this.loadConfig, this));
+        Common.Gateway.on("opendocument", Ext.bind(this.loadDocument, this));
+        Common.Gateway.on("showmessage", Ext.bind(this.onExternalMessage, this));
+        Common.Gateway.on("resetfocus", Ext.bind(this.onResetFocus, this));
+        Common.Gateway.on("processsaveresult", Ext.bind(this.onProcessSaveResult, this));
+        Common.Gateway.on("processrightschange", Ext.bind(this.onProcessRightsChange, this));
+        Common.Gateway.ready();
+    },
+    initControl: function () {},
+    initApi: function () {},
+    loadConfig: function (data) {
+        this.editorConfig = Ext.merge(this.editorConfig, data.config);
+        if ((this.editorConfig.user === undefined || this.editorConfig.user === null)) {
+            this.editorConfig.user = {};
+            if (this.editorConfig.users) {
+                this.editorConfig.userId = this.editorConfig.userId || 0;
+                for (var i = 0; i < this.editorConfig.users.length; i++) {
+                    if (this.editorConfig.users[i].id === this.editorConfig.userId) {
+                        this.editorConfig.user = {
+                            id: this.editorConfig.users[i].id,
+                            name: this.editorConfig.users[i].username
+                        };
+                        break;
+                    }
+                }
+            }
+        }
+        this.editorConfig.user.id = this.editorConfig.user.id || ("uid-" + Ext.Date.now());
+        this.editorConfig.user.name = this.editorConfig.user.name || this.textAnonymous;
+    },
+    loadDocument: function (data) {
+        if (data.doc) {
+            this.permissions = data.doc.permissions;
+            var docInfo = new CDocInfo();
+            docInfo.put_Id(data.doc.key);
+            docInfo.put_Url(data.doc.url);
+            docInfo.put_Title(data.doc.title);
+            docInfo.put_Format(data.doc.fileType);
+            docInfo.put_VKey(data.doc.vkey);
+            docInfo.put_Options(data.doc.options);
+            docInfo.put_UserId(this.editorConfig.user.id);
+            docInfo.put_UserName(this.editorConfig.user.name);
+            this.api.asc_setDocInfo(docInfo);
+            this.api.asc_getEditorPermissions();
+            Common.component.Analytics.trackEvent("Load", "Start");
+        }
+    },
+    onEditorPermissions: function (params) {
+        this.permissions.edit !== false && (this.permissions.edit = params.asc_getCanEdit());
+        this.permissions.reader !== false && (this.permissions.reader = params.asc_getCanReaderMode());
+        var profile = this.getApplication().getCurrentProfile(),
+        deviceController = this.getApplication().getController("Main", profile ? profile.getNamespace() : null),
+        editMode = (this.permissions.edit === true && this.editorConfig.mode !== "view"),
+        readerMode = this.permissions.reader === true;
+        if (deviceController) {
+            if (Ext.os.is.Phone) {
+                if (readerMode) {
+                    this.api.SetReaderModeOnly();
+                    editMode = false;
+                }
+            }
+            if (Ext.isFunction(deviceController.setMode)) {
+                deviceController.setMode(editMode ? "edit" : "view");
+            }
+            if (Ext.isFunction(deviceController.setReadableMode)) {
+                deviceController.setReadableMode(readerMode);
+            }
+        }
+        this.api.SetViewMode(!editMode);
+        this.api.LoadDocument();
+        this.api.Resize();
+    },
+    goBack: function () {
+        Common.Gateway.goBack();
+    },
+    onDocumentContentReady: function () {
+        if (this.api) {
+            this.api.Resize();
+            this.api.zoomFitToWidth();
+        }
+        this._hideLoadSplash();
+        Common.component.Analytics.trackEvent("Load", "Complete");
+    },
+    onOpenDocument: function (progress) {
+        var elem = document.getElementById("loadmask-text");
+        if (elem) {
+            elem.innerHTML = this.loadingDocText + ": " + Math.round(progress) + "%";
+        }
+    },
+    onSaveUrl: function (url) {
+        Common.Gateway.save(url);
+    },
+    onLongActionBegin: function (type, id) {
+        var text = "";
+        switch (id) {
+        case c_oAscAsyncAction["Save"]:
+            text = this.saveText;
+            break;
+        case c_oAscAsyncAction["Print"]:
+            text = this.printText;
+        }
+        if (type == c_oAscAsyncActionType["BlockInteraction"]) {
+            Ext.Viewport.setMasked({
+                xtype: "loadmask",
+                message: text
+            });
+        }
+    },
+    onLongActionEnd: function (type) {
+        Ext.Viewport.unmask();
+    },
+    onError: function (id, level, errData) {
+        this._hideLoadSplash();
+        var config = {
+            closable: false
+        };
+        switch (id) {
+        case c_oAscError.ID.Unknown:
+            config.message = this.unknownErrorText;
+            break;
+        case c_oAscError.ID.ConvertationTimeout:
+            config.message = this.convertationTimeoutText;
+            break;
+        case c_oAscError.ID.ConvertationError:
+            config.message = this.convertationErrorText;
+            break;
+        case c_oAscError.ID.DownloadError:
+            config.message = this.downloadErrorText;
+            break;
+        case c_oAscError.ID.UplImageSize:
+            config.message = this.uploadImageSizeMessage;
+            break;
+        case c_oAscError.ID.UplImageExt:
+            config.message = this.uploadImageExtMessage;
+            break;
+        case c_oAscError.ID.UplImageFileCount:
+            config.message = this.uploadImageFileCountMessage;
+            break;
+        case c_oAscError.ID.SplitCellMaxRows:
+            config.message = this.splitMaxRowsErrorText.replace("%1", errData.get_Value());
+            break;
+        case c_oAscError.ID.SplitCellMaxCols:
+            config.message = this.splitMaxColsErrorText.replace("%1", errData.get_Value());
+            break;
+        case c_oAscError.ID.SplitCellRowsDivider:
+            config.message = this.splitDividerErrorText.replace("%1", errData.get_Value());
+            break;
+        case c_oAscError.ID.VKeyEncrypt:
+            config.message = this.errorKeyEncrypt;
+            break;
+        case c_oAscError.ID.KeyExpire:
+            config.message = this.errorKeyExpire;
+            break;
+        case c_oAscError.ID.UserCountExceed:
+            config.message = this.errorUsersExceed;
+            break;
+        case c_oAscError.ID.CoAuthoringDisconnect:
+            config.message = this.errorCoAuthoringDisconnect;
+            break;
+        case c_oAscError.ID.MobileUnexpectedCharCount:
+            config.message = this.errorDocTooBig;
+            config.out = true;
+            break;
+        default:
+            config.message = this.errorDefaultMessage.replace("%1", id);
+            break;
+        }
+        if (level == c_oAscError.Level.Critical) {
+            Common.Gateway.reportError(id, config.message);
+            config.title = this.criticalErrorTitle;
+            config.message += "<br/>" + this.criticalErrorExtText;
+            config.buttons = Ext.Msg.OK;
+            config.fn = function (btn) {
+                if (btn == "ok") {
+                    if (config.out === true) {
+                        Common.Gateway.goBack();
+                    } else {
+                        window.location.reload();
+                    }
+                }
+            };
+        } else {
+            config.title = this.notcriticalErrorTitle;
+            config.buttons = Ext.Msg.OK;
+            config.fn = Ext.emptyFn;
+        }
+        Ext.Msg.show(config);
+        Common.component.Analytics.trackEvent("Internal Error", id.toString());
+    },
+    onExternalMessage: function (msg) {
+        if (msg) {
+            this._hideLoadSplash();
+            Ext.Msg.show({
+                title: msg.title,
+                msg: "<br/>" + msg.msg,
+                icon: Ext.Msg[msg.severity.toUpperCase()],
+                buttons: Ext.Msg.OK
+            });
+            Common.component.Analytics.trackEvent("External Error", msg.title);
+        }
+    },
+    onResetFocus: function (data) {
+        var activeElement = document.activeElement;
+        activeElement.focus();
+    },
+    onProcessSaveResult: function (data) {
+        this.api && this.api.asc_OnSaveEnd(data.result);
+    },
+    onProcessRightsChange: function (data) {
+        if (this.api && data && data.enabled === false) {
+            this.api.asc_coAuthoringDisconnect();
+        }
+    },
+    _hideLoadSplash: function () {
+        var preloader = Ext.get("loading-mask");
+        if (preloader) {
+            Ext.Anim.run(preloader, "fade", {
+                out: true,
+                duration: 250,
+                after: function () {
+                    preloader.destroy();
+                }
+            });
+        }
+    },
+    _isSupport: function () {
+        return (Ext.browser.is.WebKit && (Ext.os.is.iOS || Ext.os.is.Android || Ext.os.is.Desktop));
+    },
+    loadingDocText: "LOADING DOCUMENT",
+    saveText: "Saving...",
+    printText: "Printing...",
+    criticalErrorTitle: "Error",
+    notcriticalErrorTitle: "Warning",
+    errorDefaultMessage: "Error code: %1",
+    criticalErrorExtText: 'Press "Ok" to reload view page.',
+    uploadImageSizeMessage: "Maximium image size limit exceeded.",
+    uploadImageExtMessage: "Unknown image format.",
+    uploadImageFileCountMessage: "No images uploaded.",
+    reloadButtonText: "Reload Page",
+    unknownErrorText: "Unknown error.",
+    convertationTimeoutText: "Convertation timeout exceeded.",
+    convertationErrorText: "Convertation failed.",
+    downloadErrorText: "Download failed.",
+    unsupportedBrowserErrorText: "Your browser is not supported.",
+    splitMaxRowsErrorText: "The number of rows must be less than %1",
+    splitMaxColsErrorText: "The number of columns must be less than %1",
+    splitDividerErrorText: "The number of rows must be a divisor of %1",
+    requestEditRightsText: "Requesting editing rights...",
+    requestEditFailedTitleText: "Access denied",
+    requestEditFailedMessageText: "Someone is editing this document right now. Please try again later.",
+    errorKeyEncrypt: "Unknown key descriptor",
+    errorKeyExpire: "Key descriptor expired",
+    errorUsersExceed: "Count of users was exceed",
+    errorCoAuthoringDisconnect: "Server connection lost. You can't edit anymore.",
+    errorDocTooBig: "The document you are trying to open has more than 30000 characters or 1000 paragraphs in it and cannot by opened on your mobile device. Please try open it using a desktop PC.",
+    textAnonymous: "Anonymous"
+});

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

@@ -0,0 +1,98 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.controller.Search", (function () {
+    return {
+        extend: "Ext.app.Controller",
+        config: {
+            refs: {
+                searchToolbar: "searchtoolbar",
+                nextResultButton: "#id-btn-search-down",
+                previousResultButton: "#id-btn-search-up",
+                searchField: "#id-field-search"
+            },
+            control: {
+                searchToolbar: {
+                    hide: "onSearchToolbarHide"
+                },
+                previousResultButton: {
+                    tap: "onPreviousResultButtonTap"
+                },
+                nextResultButton: {
+                    tap: "onNextResultButtonTap"
+                },
+                searchField: {
+                    keyup: "onSearchKeyUp",
+                    change: "onSearchChange",
+                    clearicontap: "onClearSearch"
+                }
+            }
+        },
+        init: function () {},
+        setApi: function (o) {
+            this.api = o;
+        },
+        updateNavigation: function () {
+            var text = this.getSearchField().getValue();
+            this.getNextResultButton().setDisabled(!(text.length > 0));
+            this.getPreviousResultButton().setDisabled(!(text.length > 0));
+        },
+        clearSearchResults: function () {
+            if (this.getSearchField()) {
+                this.getSearchField().setValue("");
+                this.updateNavigation();
+            }
+            window.focus();
+            document.activeElement.blur();
+        },
+        onSearchToolbarHide: function () {
+            this.clearSearchResults();
+        },
+        onNextResultButtonTap: function () {
+            this.api.asc_findText(this.getSearchField().getValue(), true);
+        },
+        onPreviousResultButtonTap: function () {
+            this.api.asc_findText(this.getSearchField().getValue(), false);
+        },
+        onSearchKeyUp: function (field, e) {
+            if (e.event.keyCode == 13 && field.getValue().length > 0) {
+                this.api.asc_findText(field.getValue(), true);
+            }
+            this.updateNavigation();
+        },
+        onSearchChange: function (field, newValue, oldValue) {
+            this.updateNavigation();
+        },
+        onClearSearch: function (field, e) {
+            this.clearSearchResults();
+        }
+    };
+})());

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

@@ -0,0 +1,81 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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();
+        }
+    }
+});

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

@@ -0,0 +1,83 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.controller.tablet.Main", {
+    extend: "DE.controller.Main",
+    requires: ["Ext.Anim"],
+    config: {
+        refs: {
+            editToolbar: "edittoolbar",
+            viewToolbar: "viewtoolbar",
+            searchToolbar: "searchtoolbar",
+            readableBtn: "#id-tb-btn-readable"
+        },
+        control: {}
+    },
+    launch: function () {
+        this.callParent(arguments);
+    },
+    initControl: function () {
+        this.callParent(arguments);
+    },
+    initApi: function () {
+        this.callParent(arguments);
+    },
+    setApi: function (o) {
+        this.api = o;
+    },
+    setMode: function (mode) {
+        var editToolbar = this.getEditToolbar(),
+        viewToolbar = this.getViewToolbar(),
+        searchToolbar = this.getSearchToolbar(),
+        popClipController = this.getApplication().getController("Common.controller.PopClip");
+        if (mode == "edit") {
+            viewToolbar && viewToolbar.hide();
+            searchToolbar && searchToolbar.hide();
+            editToolbar && editToolbar.show();
+            this.api && this.api.asc_enableKeyEvents(true);
+            this.api && this.api.SetViewMode(false);
+        } else {
+            editToolbar && editToolbar.hide();
+            viewToolbar && viewToolbar.show();
+            this.api && this.api.asc_enableKeyEvents(false);
+            this.api && this.api.SetViewMode(true);
+        }
+        if (popClipController) {
+            popClipController.setMode(mode);
+        }
+    },
+    setReadableMode: function (readable) {
+        var readableBtn = this.getReadableBtn();
+        if (readableBtn) {
+            readable ? readableBtn.show() : readableBtn.hide();
+        }
+    }
+});

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

@@ -0,0 +1,298 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.controller.tablet.panel.Font", {
+    extend: "Ext.app.Controller",
+    config: {
+        refs: {
+            fontPanel: "fontpanel",
+            navigateView: "#id-font-navigate",
+            fontSizeSpinner: "fontpanel planarspinnerfield",
+            fontView: "#id-font-root",
+            fontNameView: "#id-font-name",
+            fontNameButton: "#id-btn-fontname",
+            fontButton: "#id-tb-btn-font",
+            fontBaseToggle: "#id-toggle-baseline",
+            fontBaseUp: "#id-btn-baseline-up",
+            fontBaseDown: "#id-btn-baseline-down"
+        },
+        control: {
+            fontPanel: {
+                show: "onFontPanelShow",
+                hide: "onFontPanelHide"
+            },
+            navigateView: {
+                push: "onNavigateViewPush",
+                pop: "onNavigateViewPop",
+                back: "onNavigateViewBack"
+            },
+            fontNameButton: {
+                tap: "onFontNameButtonTap"
+            },
+            fontSizeSpinner: {
+                blur: "onFontSizeSpinnerBlur",
+                focus: "onFontSizeSpinnerFocus",
+                keyup: "onFontSizeSpinnerKeyUp",
+                spin: "onFontSizeSpinnerSpin"
+            },
+            fontNameView: {
+                select: "onFontNameSelect",
+                itemtap: "onFontNameItemTap"
+            },
+            fontBaseUp: {
+                tap: "onFontBaseUpTap"
+            },
+            fontBaseDown: {
+                tap: "onFontBaseDownTap"
+            }
+        },
+        handleApiEvent: false
+    },
+    init: function () {},
+    launch: function () {},
+    setApi: function (o) {
+        this.api = o;
+        if (this.api) {
+            this.api.asc_registerCallback("asc_onFontFamily", Ext.bind(this.onApiFontChange, this));
+            this.api.asc_registerCallback("asc_onInitEditorFonts", Ext.bind(this.onApiLoadFonts, this));
+            this.api.asc_registerCallback("asc_onFontSize", Ext.bind(this.onApiFontSize, this));
+            this.api.asc_registerCallback("asc_onVerticalAlign", Ext.bind(this.onApiVerticalAlign, this));
+            this.api.asc_registerCallback("asc_onDocumentContentReady", Ext.bind(this.onDocumentContentReady, this));
+        }
+    },
+    onFontPanelShow: function (cmp) {
+        this.setHandleApiEvent(true);
+        this.api && this.api.UpdateInterfaceState();
+    },
+    onFontPanelHide: function (cmp) {
+        this.setHandleApiEvent(false);
+        var navigateView = this.getNavigateView(),
+        fontSizeSpinner = this.getFontSizeSpinner();
+        if (fontSizeSpinner) {
+            Ext.defer(function () {
+                fontSizeSpinner.blur();
+            },
+            200);
+        }
+        if (navigateView) {
+            navigateView.reset();
+            navigateView.addCls("plain");
+            navigateView.getNavigationBar().hide();
+            var activeItem = navigateView.getActiveItem(),
+            panelSize = this.getSizeById(activeItem && activeItem.id);
+            cmp.setSize(panelSize.width, panelSize.height);
+        }
+    },
+    onFontNameButtonTap: function () {
+        var navigateView = this.getNavigateView(),
+        fontNameView = this.getFontNameView();
+        if (navigateView) {
+            var navigationBar = navigateView.getNavigationBar();
+            if (navigationBar) {
+                navigationBar.show();
+            }
+            navigateView.push(fontNameView);
+        }
+    },
+    onFontSizeSpinnerFocus: function () {
+        this.api && this.api.asc_enableKeyEvents(false);
+    },
+    onFontSizeSpinnerBlur: function (field) {
+        this.api && this.api.asc_enableKeyEvents(true);
+        this.getFontSizeSpinner().setValue(field.getValue());
+        if (this.api) {
+            this.api.put_TextPrFontSize(field.getValue());
+            Common.component.Analytics.trackEvent("ToolBar", "Font Size");
+        }
+    },
+    onFontSizeSpinnerKeyUp: function (field, event) {
+        if (event.browserEvent.keyCode == 13 || event.browserEvent.keyCode == 10) {
+            event.stopEvent();
+            field.element.dom.blur();
+            if (this.api) {
+                this.api.put_TextPrFontSize(field.getValue());
+                Common.component.Analytics.trackEvent("ToolBar", "Font Size");
+            }
+        }
+    },
+    onFontSizeSpinnerSpin: function (spin, value) {
+        if (this.api) {
+            this.api.put_TextPrFontSize(value);
+            Common.component.Analytics.trackEvent("ToolBar", "Font Size");
+        }
+    },
+    getSizeById: function (id) {
+        switch (id) {
+        case "id-font-name":
+            return {
+                width: 350,
+                height: 300
+            };
+        default:
+            case "id-font-root":
+            return {
+                width: 440,
+                height: 46
+            };
+        }
+    },
+    toggleSegmentedButton: function (btn) {
+        var toggler = this.getFontBaseToggle();
+        if (toggler) {
+            var pressedButtonsNew = [];
+            if (btn) {
+                pressedButtonsNew.push(btn);
+            }
+            toggler.setPressedButtons(pressedButtonsNew);
+        }
+    },
+    onNavigateViewPush: function (cmp, view) {
+        var parentCmp = cmp.getParent(),
+        panelSize = this.getSizeById(view && view.id);
+        if (parentCmp) {
+            parentCmp.setSize(panelSize.width, panelSize.height);
+            var navigationView = this.getNavigateView();
+            if (navigationView) {
+                navigationView.removeCls("plain");
+                navigationView.getNavigationBar().show();
+            }
+            var fontButton = this.getFontButton();
+            if (fontButton) {
+                parentCmp.alignTo(fontButton);
+            }
+        }
+    },
+    onNavigateViewPop: function (cmp, view) {},
+    onNavigateViewBack: function (cmp) {
+        var parentCmp = cmp.getParent(),
+        activeItem = cmp.getActiveItem(),
+        panelSize = this.getSizeById(activeItem && activeItem.id);
+        if (activeItem && activeItem.id == "id-font-root") {
+            var navigationView = this.getNavigateView();
+            if (navigationView) {
+                navigationView.addCls("plain");
+                navigationView.getNavigationBar().hide();
+            }
+        }
+        if (parentCmp) {
+            parentCmp.setSize(panelSize.width, panelSize.height);
+            var fontButton = this.getFontButton();
+            if (fontButton) {
+                parentCmp.alignTo(fontButton);
+            }
+        }
+    },
+    onFontNameSelect: function (cmp, rec) {
+        var fontNameButton = this.getFontNameButton();
+        if (fontNameButton) {
+            fontNameButton.setText(rec.get("setting"));
+        }
+    },
+    onFontNameItemTap: function (cmp, index, item, rec) {
+        if (this.api) {
+            this.api.put_TextPrFontName(rec.get("setting"));
+            Common.component.Analytics.trackEvent("ToolBar", "Font Name");
+        }
+    },
+    onFontBaseUpTap: function (btn) {
+        if (this.api) {
+            var toggler = this.getFontBaseToggle();
+            if (toggler) {
+                this.api.put_TextPrBaseline(toggler.isPressed(btn) ? 1 : 0);
+                Common.component.Analytics.trackEvent("ToolBar", "Superscript");
+            }
+        }
+    },
+    onFontBaseDownTap: function (btn) {
+        if (this.api) {
+            var toggler = this.getFontBaseToggle();
+            if (toggler) {
+                this.api.put_TextPrBaseline(toggler.isPressed(btn) ? 2 : 0);
+                Common.component.Analytics.trackEvent("ToolBar", "Subscript");
+            }
+        }
+    },
+    onDocumentContentReady: function () {
+        if (this.api) {
+            var fl = this.api.get_PropertyEditorFonts();
+            if (fl) {
+                this.onApiLoadFonts(fl);
+            }
+        }
+    },
+    onApiFontChange: function (font) {
+        if (this.getHandleApiEvent()) {
+            var fontNameView = this.getFontNameView();
+            if (fontNameView) {
+                var fontName = font.get_Name(),
+                fontRec = fontNameView.getStore().findRecord("setting", fontName);
+                if (fontRec) {
+                    fontNameView.select(fontRec);
+                }
+            }
+        }
+    },
+    onApiLoadFonts: function (fl) {
+        var fontNameView = this.getFontNameView();
+        if (fontNameView) {
+            var rawFontsArray = [];
+            Ext.each(fl, function (font) {
+                rawFontsArray.push({
+                    setting: font.asc_getFontName(),
+                    group: "font"
+                });
+            });
+            fontNameView.getStore().setData(rawFontsArray);
+        }
+    },
+    onApiFontSize: function (size) {
+        if (this.getHandleApiEvent()) {
+            var fontSizeSpinner = this.getFontSizeSpinner();
+            if (fontSizeSpinner) {
+                fontSizeSpinner.setValue(size);
+            }
+        }
+    },
+    onApiVerticalAlign: function (type) {
+        if (this.getHandleApiEvent()) {
+            switch (type) {
+            case 1:
+                this.toggleSegmentedButton(this.getFontBaseUp());
+                break;
+            case 2:
+                this.toggleSegmentedButton(this.getFontBaseDown());
+                break;
+            default:
+                this.toggleSegmentedButton();
+            }
+        }
+    }
+});

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

@@ -0,0 +1,130 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.controller.tablet.panel.FontStyle", {
+    extend: "Ext.app.Controller",
+    config: {
+        refs: {
+            fontStylePanel: "fontstylepanel",
+            fontStylesToggle: "#id-toggle-fontstyles",
+            fontStyleBold: "#id-btn-fontstyle-bold",
+            fontStyleItalic: "#id-btn-fontstyle-italic",
+            fontStyleUnderline: "#id-btn-fontstyle-underline"
+        },
+        control: {
+            fontStylePanel: {
+                show: "onFontStyleShow",
+                hide: "onFontStyleHide"
+            },
+            fontStyleBold: {
+                tap: "onBoldButtonTap"
+            },
+            fontStyleItalic: {
+                tap: "onItalicButtonTap"
+            },
+            fontStyleUnderline: {
+                tap: "onUnderlineButtonTap"
+            }
+        },
+        handleApiEvent: false
+    },
+    init: function () {},
+    launch: function () {},
+    setApi: function (o) {
+        this.api = o;
+        if (this.api) {
+            this.api.asc_registerCallback("asc_onBold", Ext.bind(this.onApiBold, this));
+            this.api.asc_registerCallback("asc_onItalic", Ext.bind(this.onApiItalic, this));
+            this.api.asc_registerCallback("asc_onUnderline", Ext.bind(this.onApiUnderline, this));
+        }
+    },
+    onFontStyleShow: function (cmp) {
+        this.setHandleApiEvent(true);
+        this.api && this.api.UpdateInterfaceState();
+    },
+    onFontStyleHide: function (cmp) {
+        this.setHandleApiEvent(false);
+    },
+    _toggleSegmentedButton: function (btn, toggle) {
+        var toggler = this.getFontStylesToggle();
+        if (toggler && btn) {
+            var pressedButtonsOld = toggler.getPressedButtons().slice(),
+            pressedButtonsNew = toggler.getPressedButtons(),
+            pressedIndex = pressedButtonsNew.indexOf(btn);
+            if (toggle) {
+                if (pressedIndex < 0) {
+                    pressedButtonsNew.push(btn);
+                }
+            } else {
+                if (pressedIndex > -1) {
+                    pressedButtonsNew.splice(pressedIndex, 1);
+                }
+            }
+            toggler.updatePressedButtons(pressedButtonsNew, pressedButtonsOld);
+        }
+    },
+    onApiBold: function (on) {
+        if (this.getHandleApiEvent()) {
+            this._toggleSegmentedButton(this.getFontStyleBold(), on);
+        }
+    },
+    onApiItalic: function (on) {
+        if (this.getHandleApiEvent()) {
+            this._toggleSegmentedButton(this.getFontStyleItalic(), on);
+        }
+    },
+    onApiUnderline: function (on) {
+        if (this.getHandleApiEvent()) {
+            this._toggleSegmentedButton(this.getFontStyleUnderline(), on);
+        }
+    },
+    onBoldButtonTap: function (btn) {
+        var toggler = this.getFontStylesToggle();
+        if (toggler && this.api) {
+            this.api.put_TextPrBold(toggler.isPressed(btn));
+            Common.component.Analytics.trackEvent("ToolBar", "Bold");
+        }
+    },
+    onItalicButtonTap: function (btn) {
+        var toggler = this.getFontStylesToggle();
+        if (toggler && this.api) {
+            this.api.put_TextPrItalic(toggler.isPressed(btn));
+            Common.component.Analytics.trackEvent("ToolBar", "Italic");
+        }
+    },
+    onUnderlineButtonTap: function (btn) {
+        var toggler = this.getFontStylesToggle();
+        if (toggler && this.api) {
+            this.api.put_TextPrUnderline(toggler.isPressed(btn));
+            Common.component.Analytics.trackEvent("ToolBar", "Underline");
+        }
+    }
+});

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

@@ -0,0 +1,218 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.controller.tablet.panel.Insert", {
+    extend: "Ext.app.Controller",
+    config: {
+        refs: {
+            insertPanel: "insertpanel",
+            navigateView: "#id-insert-navigate",
+            insertListView: "#id-insert-root",
+            insertTableView: "#id-insert-table-container",
+            insertPictureView: "#id-insert-picture-container",
+            insertTableButton: "#id-btn-insert-table",
+            tableColumnsSpinner: "#id-spinner-table-columns",
+            tableRowsSpinner: "#id-spinner-table-rows",
+            insertImageList: "#id-insert-picture-container"
+        },
+        control: {
+            insertPanel: {
+                hide: "onInsertPanelHide"
+            },
+            navigateView: {
+                push: "onNavigateViewPush",
+                pop: "onNavigateViewPop",
+                back: "onNavigateViewBack"
+            },
+            insertListView: {
+                itemsingletap: "onInsertListItemTap"
+            },
+            insertTableButton: {
+                tap: "onInsertTableButtonTap"
+            },
+            insertImageList: {
+                itemtap: "onInsertImageItemTap"
+            }
+        }
+    },
+    init: function () {},
+    onInsertImageListShow: function (list) {
+        var me = this,
+        inputInlineMedia = document.querySelector("#id-insert-picture-inline input[type=file]"),
+        inputFloatMedia = document.querySelector("#id-insert-picture-float input[type=file]");
+        var onChangeInput = function (input) {
+            if (Ext.isDefined(input)) {
+                var file = input.files[0];
+                if (Ext.isDefined(file)) {
+                    var panel = me.getInsertPanel(),
+                    mpImg = new MegaPixImage(file);
+                    mpImg.imageLoadListeners.push(function () {
+                        var canvas = document.createElement("canvas"),
+                        imgProperty = new CImgProperty();
+                        mpImg.render(canvas, {
+                            maxWidth: 1024,
+                            maxHeight: 1024
+                        });
+                        imgProperty.put_WrappingStyle((input == inputInlineMedia) ? c_oAscWrapStyle2.Inline : c_oAscWrapStyle2.Square);
+                        me.api.AddImageUrl(canvas.toDataURL(), imgProperty);
+                        Ext.Viewport.unmask();
+                    });
+                    input.value = "";
+                    panel && panel.hide();
+                    Ext.Viewport.setMasked({
+                        xtype: "loadmask",
+                        message: me.uploadingText + "..."
+                    });
+                }
+            }
+        };
+        inputInlineMedia && (inputInlineMedia.onchange = Ext.bind(onChangeInput, me, [inputInlineMedia]));
+        inputFloatMedia && (inputFloatMedia.onchange = Ext.bind(onChangeInput, me, [inputFloatMedia]));
+    },
+    launch: function () {
+        var insertImageList = this.getInsertImageList();
+        insertImageList && insertImageList.on("show", Ext.bind(this.onInsertImageListShow, this), this, {
+            delay: 1000,
+            single: true
+        });
+    },
+    setApi: function (o) {
+        this.api = o;
+    },
+    onInsertPanelHide: function (cmp) {
+        var navigateView = this.getNavigateView(),
+        tableColumnsSpinner = this.getTableColumnsSpinner(),
+        tableRowsSpinner = this.getTableRowsSpinner();
+        if (navigateView) {
+            if (Ext.isDefined(navigateView.getLayout().getAnimation().getInAnimation)) {
+                navigateView.getLayout().getAnimation().getInAnimation().stop();
+            }
+            if (Ext.isDefined(navigateView.getLayout().getAnimation().getOutAnimation)) {
+                navigateView.getLayout().getAnimation().getOutAnimation().stop();
+            }
+            navigateView.reset();
+            var activeItem = navigateView.getActiveItem(),
+            panelHeight = this.getHeightById(activeItem && activeItem.id);
+            cmp.setHeight(panelHeight);
+        }
+        tableColumnsSpinner && tableColumnsSpinner.setValue(tableColumnsSpinner.getMinValue());
+        tableRowsSpinner && tableRowsSpinner.setValue(tableRowsSpinner.getMinValue());
+    },
+    onInsertListItemTap: function (cmp, index, target, record) {
+        var navigateView = this.getNavigateView(),
+        cmdId = record.get("id");
+        if (!Ext.isEmpty(cmdId)) {
+            if (cmdId == "id-insert-table-row") {
+                this.insertTableObject("row");
+                Common.component.Analytics.trackEvent("ToolBar", "Insert Row");
+            } else {
+                if (cmdId == "id-insert-table-column") {
+                    this.insertTableObject("column");
+                    Common.component.Analytics.trackEvent("ToolBar", "Insert Column");
+                }
+            }
+        }
+        if (navigateView) {
+            var cmpId = record.get("child");
+            if (!Ext.isEmpty(cmpId)) {
+                var childCmp = Ext.getCmp(cmpId);
+                if (childCmp) {
+                    navigateView.push(childCmp);
+                }
+            }
+        }
+    },
+    getHeightById: function (id) {
+        switch (id) {
+        case "id-insert-table-container":
+            return 225;
+        case "id-insert-picture-container":
+            return 174;
+        default:
+            case "id-insert-root":
+            return 283;
+        }
+    },
+    onNavigateViewPush: function (cmp, view) {
+        var parentCmp = cmp.getParent();
+        if (parentCmp) {
+            parentCmp.setHeight(this.getHeightById(view && view.id));
+        }
+    },
+    onNavigateViewPop: function (cmp, view) {},
+    onNavigateViewBack: function (cmp) {
+        var parentCmp = cmp.getParent(),
+        activeItem = cmp.getActiveItem();
+        if (parentCmp && activeItem) {
+            parentCmp.setHeight(this.getHeightById(activeItem && activeItem.id));
+        }
+    },
+    onInsertTableButtonTap: function (btn) {
+        var insertPanel = this.getInsertPanel(),
+        tableColumnsSpinner = this.getTableColumnsSpinner(),
+        tableRowsSpinner = this.getTableRowsSpinner();
+        if (this.api && tableColumnsSpinner && tableRowsSpinner) {
+            this.api.put_Table(tableColumnsSpinner.getValue(), tableRowsSpinner.getValue());
+        }
+        if (insertPanel) {
+            insertPanel.hide();
+        }
+        Common.component.Analytics.trackEvent("ToolBar", "Table");
+    },
+    onInsertImageItemTap: function (list) {
+        if ((Ext.os.is.iOS && Ext.os.version.lt("6.0")) || (Ext.os.is.Android && Ext.os.version.lt("3.0"))) {
+            Ext.Msg.show({
+                message: this.unsupportUploadText,
+                promptConfig: false,
+                buttons: [{
+                    text: "OK",
+                    itemId: "ok",
+                    ui: "base"
+                }]
+            });
+        }
+    },
+    insertTableObject: function (type) {
+        if (this.api) {
+            var selectedElements = this.api.getSelectedElements();
+            if (selectedElements && selectedElements.length > 0) {
+                var elementType = selectedElements[0].get_ObjectType();
+                if (c_oAscTypeSelectElement.Table == elementType) {
+                    type === "row" ? this.api.addRowBelow() : type === "column" ? this.api.addColumnRight() : this.api.put_Table(1, 1);
+                } else {
+                    this.api.put_Table(1, 1);
+                }
+            }
+        }
+    },
+    uploadingText: "Uploading",
+    unsupportUploadText: "Feature is not supported on this device."
+});

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

@@ -0,0 +1,152 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.controller.tablet.panel.ParagraphAlignment", {
+    extend: "Ext.app.Controller",
+    config: {
+        refs: {
+            paraAlignPanel: "paragraphalignmentpanel",
+            paraAlignsToggle: "#id-toggle-paragraphalignment",
+            paragraphAlignmentButton: "#id-tb-btn-align",
+            paraAlignLeft: "#id-btn-paragraphalignment-left",
+            paraAlignCenter: "#id-btn-paragraphalignment-center",
+            paraAlignRight: "#id-btn-paragraphalignment-right",
+            paraAlignFill: "#id-btn-paragraphalignment-fill"
+        },
+        control: {
+            paraAlignPanel: {
+                show: "onParaAlignPanelShow",
+                hide: "onParaAlignPanelHide"
+            },
+            paraAlignLeft: {
+                tap: "onParaAlignLeftTap"
+            },
+            paraAlignCenter: {
+                tap: "onParaAlignCenterTap"
+            },
+            paraAlignRight: {
+                tap: "onParaAlignRightTap"
+            },
+            paraAlignFill: {
+                tap: "onParaAlignFillTap"
+            }
+        },
+        handleApiEvent: false
+    },
+    init: function () {},
+    launch: function () {},
+    onParaAlignPanelShow: function (cmp) {
+        this.setHandleApiEvent(true);
+        this.api && this.api.UpdateInterfaceState();
+    },
+    onParaAlignPanelHide: function (cmp) {
+        this.setHandleApiEvent(false);
+    },
+    setApi: function (o) {
+        this.api = o;
+        if (this.api) {
+            this.api.asc_registerCallback("asc_onPrAlign", Ext.bind(this.onApiParagraphAlign, this));
+        }
+    },
+    onParaAlignLeftTap: function (btn) {
+        if (this.api) {
+            this.api.put_PrAlign(1);
+            Common.component.Analytics.trackEvent("ToolBar", "Align");
+        }
+    },
+    onParaAlignCenterTap: function (btn) {
+        if (this.api) {
+            this.api.put_PrAlign(2);
+            Common.component.Analytics.trackEvent("ToolBar", "Align");
+        }
+    },
+    onParaAlignRightTap: function (btn) {
+        if (this.api) {
+            this.api.put_PrAlign(0);
+            Common.component.Analytics.trackEvent("ToolBar", "Align");
+        }
+    },
+    onParaAlignFillTap: function (btn) {
+        if (this.api) {
+            this.api.put_PrAlign(3);
+            Common.component.Analytics.trackEvent("ToolBar", "Align");
+        }
+    },
+    toggleSegmentedButton: function (btn) {
+        var toggler = this.getParaAlignsToggle();
+        if (toggler) {
+            var pressedButtonsNew = [];
+            if (btn) {
+                pressedButtonsNew.push(btn);
+            }
+            toggler.setPressedButtons(pressedButtonsNew);
+        }
+    },
+    onApiParagraphAlign: function (v) {
+        var paragraphAlignmentButton = this.getParagraphAlignmentButton();
+        if (paragraphAlignmentButton && Ext.isDefined(v)) {
+            switch (v) {
+            case 0:
+                paragraphAlignmentButton.setIconCls("align-right");
+                break;
+            case 1:
+                paragraphAlignmentButton.setIconCls("align-left");
+                break;
+            case 2:
+                paragraphAlignmentButton.setIconCls("align-center");
+                break;
+            default:
+                case 3:
+                paragraphAlignmentButton.setIconCls("align-fill");
+            }
+        }
+        if (this.getHandleApiEvent()) {
+            if (!Ext.isDefined(v)) {
+                this.toggleSegmentedButton();
+                return;
+            }
+            switch (v) {
+            case 0:
+                this.toggleSegmentedButton(this.getParaAlignRight());
+                break;
+            case 1:
+                this.toggleSegmentedButton(this.getParaAlignLeft());
+                break;
+            case 2:
+                this.toggleSegmentedButton(this.getParaAlignCenter());
+                break;
+            default:
+                case 3:
+                this.toggleSegmentedButton(this.getParaAlignFill());
+            }
+        }
+    }
+});

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

@@ -0,0 +1,180 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.controller.tablet.panel.Spacing", {
+    extend: "Ext.app.Controller",
+    config: {
+        refs: {
+            spacingPanel: "spacingpanel",
+            navigateView: "#id-spacing-navigate",
+            spacingListView: "#id-spacing-root",
+            spacingValueListView: "#id-spacing-linespacing"
+        },
+        control: {
+            spacingPanel: {
+                show: "onSpacingPanelShow",
+                hide: "onSpacingPanelHide"
+            },
+            navigateView: {
+                push: "onSpacingListViewPush",
+                pop: "onSpacingListViewPop",
+                back: "onSpacingListViewBack"
+            },
+            spacingListView: {
+                itemsingletap: "onSpacingListItemTap"
+            },
+            spacingValueListView: {
+                itemsingletap: "onSpacingValueListItemTap"
+            }
+        },
+        handleApiEvent: false
+    },
+    init: function () {},
+    launch: function () {},
+    setApi: function (o) {
+        this.api = o;
+        if (this.api) {
+            this.api.asc_registerCallback("asc_onParaSpacingLine", Ext.bind(this.onApiLineSpacing, this));
+        }
+    },
+    onSpacingPanelShow: function (cmp) {
+        this.setHandleApiEvent(true);
+        this.api && this.api.UpdateInterfaceState();
+    },
+    onSpacingPanelHide: function (cmp) {
+        this.setHandleApiEvent(false);
+        var navigateView = this.getNavigateView();
+        if (navigateView) {
+            if (Ext.isDefined(navigateView.getLayout().getAnimation().getInAnimation)) {
+                navigateView.getLayout().getAnimation().getInAnimation().stop();
+            }
+            if (Ext.isDefined(navigateView.getLayout().getAnimation().getOutAnimation)) {
+                navigateView.getLayout().getAnimation().getOutAnimation().stop();
+            }
+            navigateView.reset();
+            var activeItem = navigateView.getActiveItem(),
+            panelHeight = this.getHeightById(activeItem && activeItem.id);
+            cmp.setHeight(panelHeight);
+        }
+    },
+    onSpacingListItemTap: function (cmp, index, target, record) {
+        var navigateView = this.getNavigateView(),
+        cmdId = record.get("id");
+        if (!Ext.isEmpty(cmdId)) {
+            if (cmdId == "id-linespacing-increaseindent") {
+                this.api && this.api.IncreaseIndent();
+                Common.component.Analytics.trackEvent("ToolBar", "Indent");
+            } else {
+                if (cmdId == "id-linespacing-decrementindent") {
+                    this.api && this.api.DecreaseIndent();
+                    Common.component.Analytics.trackEvent("ToolBar", "Indent");
+                }
+            }
+        }
+        if (navigateView) {
+            var cmpId = record.get("child");
+            if (!Ext.isEmpty(cmpId)) {
+                var childCmp = Ext.getCmp(cmpId);
+                if (childCmp) {
+                    navigateView.push(childCmp);
+                }
+            }
+        }
+    },
+    onSpacingValueListItemTap: function (cmp, index, target, record) {
+        var spacingVal = parseFloat(record.get("setting")),
+        LINERULE_AUTO = 1;
+        this.api && this.api.put_PrLineSpacing(LINERULE_AUTO, spacingVal);
+        Common.component.Analytics.trackEvent("ToolBar", "Line Spacing");
+    },
+    getHeightById: function (id) {
+        switch (id) {
+        case "id-spacing-linespacing":
+            return 360;
+        default:
+            case "id-spacing-root":
+            return 235;
+        }
+    },
+    onSpacingListViewPush: function (cmp, view) {
+        var parentCmp = cmp.getParent();
+        if (parentCmp) {
+            parentCmp.setHeight(this.getHeightById(view.id));
+        }
+    },
+    onSpacingListViewPop: function (cmp, view) {},
+    onSpacingListViewBack: function (cmp) {
+        var parentCmp = cmp.getParent(),
+        activeItem = cmp.getActiveItem();
+        if (parentCmp && activeItem) {
+            parentCmp.setHeight(this.getHeightById(activeItem && activeItem.id));
+        }
+    },
+    onApiLineSpacing: function (info) {
+        if (this.getHandleApiEvent()) {
+            if (Ext.isDefined(info)) {
+                var spacingValueListView = this.getSpacingValueListView();
+                if (spacingValueListView) {
+                    if (info.get_Line() === null || info.get_LineRule() === null || info.get_LineRule() != 1) {
+                        spacingValueListView.deselectAll();
+                        return;
+                    }
+                    var line = info.get_Line();
+                    if (Math.abs(line - 1) < 0.0001) {
+                        spacingValueListView.select(0);
+                    } else {
+                        if (Math.abs(line - 1.15) < 0.0001) {
+                            spacingValueListView.select(1);
+                        } else {
+                            if (Math.abs(line - 1.5) < 0.0001) {
+                                spacingValueListView.select(2);
+                            } else {
+                                if (Math.abs(line - 2) < 0.0001) {
+                                    spacingValueListView.select(3);
+                                } else {
+                                    if (Math.abs(line - 2.5) < 0.0001) {
+                                        spacingValueListView.select(4);
+                                    } else {
+                                        if (Math.abs(line - 3) < 0.0001) {
+                                            spacingValueListView.select(5);
+                                        } else {
+                                            spacingValueListView.deselectAll();
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+});

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

@@ -0,0 +1,156 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.controller.tablet.panel.Style", {
+    extend: "Ext.app.Controller",
+    config: {
+        refs: {
+            listStylePanel: "liststylepanel",
+            navigateView: "#id-liststyle-navigate",
+            listStyleView: "#id-liststyle-root",
+            bulletsListView: "#id-liststyle-bullets",
+            numberingListView: "#id-liststyle-numbering",
+            outlineListView: "#id-liststyle-outline",
+            bulletsList: "#id-liststyle-bullets dataview",
+            numberingList: "#id-liststyle-numbering dataview",
+            outlineList: "#id-liststyle-outline dataview"
+        },
+        control: {
+            listStylePanel: {
+                show: "onListStylePanelShow",
+                hide: "onListStylePanelHide"
+            },
+            navigateView: {
+                push: "onListStyleViewPush",
+                pop: "onListStyleViewPop",
+                back: "onListStyleViewBack"
+            },
+            listStyleView: {
+                itemsingletap: "onListStyleItemTap"
+            },
+            bulletsList: {
+                itemsingletap: "onCommonListItemTap"
+            },
+            numberingList: {
+                itemsingletap: "onCommonListItemTap"
+            },
+            outlineList: {
+                itemsingletap: "onCommonListItemTap"
+            }
+        },
+        handleApiEvent: false
+    },
+    init: function () {},
+    launch: function () {},
+    setApi: function (o) {
+        this.api = o;
+    },
+    onListStylePanelShow: function (cmp) {
+        this.setHandleApiEvent(true);
+        this.api && this.api.UpdateInterfaceState();
+    },
+    onListStylePanelHide: function (cmp) {
+        this.setHandleApiEvent(false);
+        var navigateView = this.getNavigateView();
+        if (navigateView) {
+            if (Ext.isDefined(navigateView.getLayout().getAnimation().getInAnimation)) {
+                navigateView.getLayout().getAnimation().getInAnimation().stop();
+            }
+            if (Ext.isDefined(navigateView.getLayout().getAnimation().getOutAnimation)) {
+                navigateView.getLayout().getAnimation().getOutAnimation().stop();
+            }
+            navigateView.reset();
+            var activeItem = navigateView.getActiveItem(),
+            panelHeight = this.getHeightById(activeItem && activeItem.id);
+            cmp.setHeight(panelHeight);
+        }
+    },
+    onListStyleItemTap: function (cmp, index, target, record) {
+        var navigateView = this.getNavigateView(),
+        cmdId = record.get("id");
+        if (!Ext.isEmpty(cmdId)) {
+            if (cmdId == "id-list-indent-increment") {
+                this.onIncrementIndentButton();
+            } else {
+                if (cmdId == "id-list-indent-decrement") {
+                    this.onDecrementIndentButton();
+                }
+            }
+        }
+        if (navigateView) {
+            var childId = record.get("child");
+            if (!Ext.isEmpty(childId)) {
+                var childCmp = Ext.getCmp(childId);
+                if (childCmp) {
+                    navigateView.push(childCmp);
+                }
+            }
+        }
+    },
+    getHeightById: function (id) {
+        switch (id) {
+        case "id-liststyle-bullets":
+            case "id-liststyle-numbering":
+            return 225;
+        case "id-liststyle-outline":
+            return 150;
+        default:
+            case "id-liststyle-root":
+            return 328;
+        }
+    },
+    onListStyleViewPush: function (cmp, view) {
+        var parentCmp = cmp.getParent();
+        if (parentCmp) {
+            parentCmp.setHeight(this.getHeightById(view.id));
+        }
+    },
+    onListStyleViewPop: function (cmp, view) {},
+    onListStyleViewBack: function (cmp) {
+        var parentCmp = cmp.getParent(),
+        activeItem = cmp.getActiveItem();
+        if (parentCmp && activeItem) {
+            parentCmp.setHeight(this.getHeightById(activeItem && activeItem.id));
+        }
+    },
+    onCommonListItemTap: function (view, index, target, record) {
+        this.api && this.api.put_ListType(parseInt(record.get("type")), parseInt(record.get("subtype")));
+        Common.component.Analytics.trackEvent("ToolBar", "List Type");
+    },
+    onIncrementIndentButton: function () {
+        this.api && this.api.IncreaseIndent();
+        Common.component.Analytics.trackEvent("ToolBar", "Indent");
+    },
+    onDecrementIndentButton: function () {
+        this.api && this.api.DecreaseIndent();
+        Common.component.Analytics.trackEvent("ToolBar", "Indent");
+    }
+});

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

@@ -0,0 +1,258 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.controller.tablet.panel.TextColor", {
+    extend: "Ext.app.Controller",
+    config: {
+        refs: {
+            textColorPanel: "textcolorsettingspanel",
+            navigateView: "#id-textcolor-navigate",
+            textColorView: "#id-textcolor-root",
+            highlightColorList: "#id-textcolor-highlight dataview",
+            textColorList: "#id-textcolor-text dataview",
+            noFillColorButton: "#id-btn-highlight-none"
+        },
+        control: {
+            textColorPanel: {
+                show: "onTextColorPanelShow",
+                hide: "onTextColorPanelHide"
+            },
+            navigateView: {
+                push: "onNavigateViewPush",
+                pop: "onNavigateViewPop",
+                back: "onNavigateViewBack"
+            },
+            textColorView: {
+                itemsingletap: "onTextColorItemTap"
+            },
+            highlightColorList: {
+                itemsingletap: "onHighlightListItemTap"
+            },
+            noFillColorButton: {
+                tap: "onNoFillColorTap"
+            },
+            textColorList: {
+                itemsingletap: "onTextColorListItemTap"
+            }
+        },
+        handleApiEvent: false
+    },
+    init: function () {},
+    launch: function () {},
+    setApi: function (o) {
+        this.api = o;
+        if (this.api) {
+            this.api.asc_registerCallback("asc_onTextColor", Ext.bind(this.onApiTextColor, this));
+            this.api.asc_registerCallback("asc_onTextHighLight", Ext.bind(this.onApiHighlightColor, this));
+        }
+    },
+    onTextColorPanelShow: function (cmp) {
+        this.setHandleApiEvent(true);
+        this.api && this.api.UpdateInterfaceState();
+    },
+    onTextColorPanelHide: function (cmp) {
+        this.setHandleApiEvent(false);
+        var navigateView = this.getNavigateView();
+        if (navigateView) {
+            if (Ext.isDefined(navigateView.getLayout().getAnimation().getInAnimation)) {
+                navigateView.getLayout().getAnimation().getInAnimation().stop();
+            }
+            if (Ext.isDefined(navigateView.getLayout().getAnimation().getOutAnimation)) {
+                navigateView.getLayout().getAnimation().getOutAnimation().stop();
+            }
+            navigateView.reset();
+            var activeItem = navigateView.getActiveItem(),
+            panelHeight = this.getHeightById(activeItem && activeItem.id);
+            cmp.setHeight(panelHeight);
+        }
+    },
+    onTextColorItemTap: function (cmp, index, target, record) {
+        var navigateView = this.getNavigateView();
+        if (navigateView) {
+            var cmpId = record.get("child");
+            if (!Ext.isEmpty(cmpId)) {
+                var childCmp = Ext.getCmp(cmpId);
+                if (childCmp) {
+                    navigateView.push(childCmp);
+                }
+            }
+        }
+    },
+    onHighlightListItemTap: function (cmp, index, target, record) {
+        var noFillColorButton = this.getNoFillColorButton(),
+        highlightColorList = this.getHighlightColorList();
+        if (noFillColorButton && highlightColorList) {
+            noFillColorButton.removeCls("x-button-pressing pressed");
+            highlightColorList.select(record);
+            var color = record.get("color"),
+            r = color[0] + color[1],
+            g = color[2] + color[3],
+            b = color[4] + color[5];
+            this.api && this.api.SetMarkerFormat(true, true, parseInt(r, 16), parseInt(g, 16), parseInt(b, 16));
+            Common.component.Analytics.trackEvent("ToolBar", "Highlight Color");
+        }
+    },
+    onNoFillColorTap: function (btn) {
+        var noFillColorButton = this.getNoFillColorButton(),
+        highlightColorList = this.getHighlightColorList();
+        if (noFillColorButton && highlightColorList) {
+            if (!btn.element.hasCls("x-button-pressing pressed")) {
+                highlightColorList.deselectAll();
+                noFillColorButton.addCls("x-button-pressing pressed");
+                this.api && this.api.SetMarkerFormat(true, false);
+                Common.component.Analytics.trackEvent("ToolBar", "Highlight Color");
+            }
+        }
+    },
+    onTextColorListItemTap: function (cmp, index, target, record) {
+        var textColorList = this.getTextColorList();
+        if (textColorList) {
+            textColorList.select(record);
+            var color = record.get("color"),
+            ascColor = new CAscColor();
+            ascColor.put_r(parseInt((color[0] + color[1]), 16));
+            ascColor.put_g(parseInt((color[2] + color[3]), 16));
+            ascColor.put_b(parseInt((color[4] + color[5]), 16));
+            this.api && this.api.put_TextColor(ascColor);
+            Common.component.Analytics.trackEvent("ToolBar", "Text Color");
+        }
+    },
+    scrollToSelected: function (view) {
+        if (view && view.isXType("dataview")) {
+            var el = view.element,
+            cls = view.getSelectedCls(),
+            selected = el.down("." + cls),
+            y;
+            if (selected) {
+                y = selected.dom.offsetTop;
+                Ext.defer(function () {
+                    var scroller = view.getScrollable().getScroller().getTranslatable()._element;
+                    if (scroller && y > scroller.getHeight() - view.element.getHeight()) {
+                        y = scroller.getHeight() - view.element.getHeight();
+                    }
+                    view.getScrollable().getScroller().scrollTo(0, y, true);
+                },
+                500);
+            }
+        }
+    },
+    animateSetHeight: function (cmp, height) {
+        if (Ext.isDefined(cmp)) {
+            cmp.setHeight(height);
+        }
+    },
+    getHeightById: function (id) {
+        switch (id) {
+        case "id-textcolor-root":
+            return 172;
+        case "id-textcolor-highlight":
+            return 326;
+        default:
+            case "id-textcolor-text":
+            return 336;
+        }
+    },
+    onNavigateViewPush: function (cmp, view) {
+        this.animateSetHeight(cmp.getParent(), this.getHeightById(view.id));
+        if (view.id == "id-textcolor-highlight") {
+            this.scrollToSelected(this.getHighlightColorList());
+        } else {
+            if (view.id == "id-textcolor-text") {
+                this.scrollToSelected(this.getTextColorList());
+            }
+        }
+    },
+    onNavigateViewPop: function (cmp, view) {},
+    onNavigateViewBack: function (cmp) {
+        var parentCmp = cmp.getParent(),
+        activeItem = cmp.getActiveItem();
+        if (parentCmp && activeItem) {
+            this.animateSetHeight(parentCmp, this.getHeightById(activeItem && activeItem.id));
+        }
+    },
+    onApiTextColor: function (color) {
+        if (this.getHandleApiEvent() && Ext.isDefined(color)) {
+            var textColorList = this.getTextColorList();
+            if (textColorList) {
+                var colorToHex = function (r, g, b) {
+                    var r = r.toString(16),
+                    g = g.toString(16),
+                    b = b.toString(16);
+                    if (r.length == 1) {
+                        r = "0" + r;
+                    }
+                    if (g.length == 1) {
+                        g = "0" + g;
+                    }
+                    if (b.length == 1) {
+                        b = "0" + b;
+                    }
+                    return (r + g + b).toUpperCase();
+                };
+                var hexColor = colorToHex(color.get_r(), color.get_g(), color.get_b()),
+                recColor = textColorList.getStore().findRecord("color", hexColor);
+                if (recColor) {
+                    textColorList.select(recColor);
+                } else {
+                    textColorList.deselectAll();
+                }
+            }
+        }
+    },
+    onApiHighlightColor: function (color) {
+        if (this.getHandleApiEvent() && Ext.isDefined(color)) {
+            var textPara = this.api.get_TextProps().get_TextPr(),
+            highlightColorList = this.getHighlightColorList(),
+            noFillColorButton = this.getNoFillColorButton();
+            var pressNoColor = function () {
+                highlightColorList.deselectAll();
+                noFillColorButton.addCls("x-button-pressing pressed");
+            };
+            if (textPara) {
+                color = textPara.get_HighLight();
+                if (color == -1) {
+                    pressNoColor();
+                } else {
+                    var hexColor = color.get_hex().toUpperCase();
+                    if (highlightColorList) {
+                        var recColor = highlightColorList.getStore().findRecord("color", hexColor);
+                        if (recColor) {
+                            noFillColorButton.removeCls("x-button-pressing pressed");
+                            highlightColorList.select(recColor);
+                        } else {
+                            pressNoColor();
+                        }
+                    }
+                }
+            }
+        }
+    }
+});

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

@@ -0,0 +1,238 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.controller.toolbar.Edit", {
+    extend: "Ext.app.Controller",
+    requires: (["Ext.MessageBox", "Ext.util.Point", "Ext.util.Region", "DE.view.tablet.panel.Font", "DE.view.tablet.panel.FontStyle", "DE.view.tablet.panel.Insert", "DE.view.tablet.panel.ListStyle", "DE.view.tablet.panel.ParagraphAlignment", "DE.view.tablet.panel.Spacing", "DE.view.tablet.panel.TextColor"]),
+    config: {
+        refs: {
+            doneButton: "#id-tb-btn-done",
+            saveButton: "#id-tb-btn-save",
+            undoButton: "#id-tb-btn-undo",
+            fontButton: "#id-tb-btn-font",
+            fontStyleButton: "#id-tb-btn-style",
+            textColorButton: "#id-tb-btn-color",
+            paragraphAlignmentButton: "#id-tb-btn-align",
+            listStyleButton: "#id-tb-btn-liststyle",
+            paragraphButton: "#id-tb-btn-paragraph",
+            tableButton: "#id-tb-btn-table",
+            shareButton: "#id-tb-btn-share",
+            textColorPanel: "#id-panel-text-color",
+            paragraphPanel: "#id-panel-spacing",
+            paragraphAlignmentPanel: "#id-panel-paragraph-alignment",
+            fontStylePanel: "#id-panel-font-style",
+            listStylePanel: "#id-panel-liststyle",
+            insertPanel: "#id-panel-insert",
+            fontPanel: "#id-panel-font"
+        },
+        control: {
+            doneButton: {
+                tap: "onTapDone"
+            },
+            saveButton: {
+                tap: "onTapSave"
+            },
+            undoButton: {
+                tap: "onTapUndo"
+            },
+            fontButton: {
+                tap: "onTapFont"
+            },
+            fontStyleButton: {
+                tap: "onTapFontStyle"
+            },
+            textColorButton: {
+                tap: "onTapTextColor"
+            },
+            paragraphAlignmentButton: {
+                tap: "onTabParagraphAlignment"
+            },
+            listStyleButton: {
+                tap: "onTapListStyle"
+            },
+            paragraphButton: {
+                tap: "onTapParagraphButton"
+            },
+            tableButton: {
+                tap: "onTapTable"
+            },
+            shareButton: {
+                tap: "onTapShare"
+            }
+        }
+    },
+    launch: function () {
+        this.callParent(arguments);
+        Ext.getCmp("id-conteiner-document").on("resize", this.onEditorResize, this);
+        var toolbarButtons = Ext.ComponentQuery.query("edittoolbar > button, edittoolbar > toolbar > button");
+        Ext.each(Ext.ComponentQuery.query("commonpopoverpanel"), function (panel) {
+            var modal = panel.getModal();
+            if (modal) {
+                modal.on("tap", function (mask, event) {
+                    Ext.each(toolbarButtons, function (button) {
+                        if (button !== panel.alignByCmp) {
+                            var mousePoint = Ext.util.Point.fromEvent(event),
+                            buttonRect = Ext.util.Region.from(button.element.getPageBox());
+                            if (!buttonRect.isOutOfBound(mousePoint)) {
+                                button.fireEvent("tap", button, event);
+                            }
+                        }
+                    },
+                    this);
+                },
+                this);
+            }
+        },
+        this);
+        Common.Gateway.on("init", Ext.bind(this.loadConfig, this));
+    },
+    initControl: function () {
+        this.callParent(arguments);
+    },
+    initApi: function () {},
+    setApi: function (o) {
+        this.api = o;
+        if (this.api) {
+            this.api.asc_registerCallback("asc_onCanUndo", Ext.bind(this.onApiCanUndo, this));
+            this.api.asc_registerCallback("asc_onСoAuthoringDisconnect", Ext.bind(this.onCoAuthoringDisconnect, this));
+        }
+    },
+    loadConfig: function (data) {
+        var doneButton = this.getDoneButton();
+        if (doneButton && data && data.config && data.config.canBackToFolder === true) {
+            doneButton.show();
+        }
+    },
+    onApiCanUndo: function (can) {
+        var undoButton = this.getUndoButton();
+        undoButton && undoButton.setDisabled(!can);
+    },
+    onCoAuthoringDisconnect: function () {
+        Ext.each(Ext.ComponentQuery.query("commonpopoverpanel"), function (panel) {
+            panel.hide();
+        });
+        Ext.each(Ext.ComponentQuery.query("edittoolbar > button, edittoolbar > toolbar > button"), function (btn) {
+            btn.removeCls("x-button-pressing");
+            btn.disable();
+        });
+        var shareButton = this.getShareButton();
+        shareButton && shareButton.enable();
+    },
+    showToolbarPanel: function (panel, button) {
+        if (panel && button) {
+            panel.on("hide", Ext.bind(function () {
+                button.removeCls("x-button-pressing");
+            },
+            this), this, {
+                single: true
+            });
+            button.addCls("x-button-pressing");
+            Ext.each(Ext.ComponentQuery.query("popclip"), function (cmp) {
+                cmp.hide(true);
+            },
+            this);
+            panel.alignByCmp = button;
+            panel.setLeft(0);
+            panel.setTop(0);
+            panel.showBy(button);
+        }
+    },
+    onTapDone: function () {
+        if (this.api.isDocumentModified()) {
+            Ext.Msg.show({
+                title: this.dlgLeaveTitleText,
+                message: this.dlgLeaveMsgText,
+                buttons: [{
+                    text: this.leaveButtonText,
+                    itemId: "cancel",
+                    ui: "base"
+                },
+                {
+                    text: this.stayButtonText,
+                    itemId: "ok",
+                    ui: "base-blue"
+                }],
+                promptConfig: false,
+                scope: this,
+                fn: function (button) {
+                    if (button == "cancel") {
+                        Common.Gateway.goBack();
+                    }
+                }
+            });
+        } else {
+            Common.Gateway.goBack();
+        }
+    },
+    onTapSave: function () {
+        this.api && this.api.asc_Save();
+        Common.component.Analytics.trackEvent("ToolBar", "Save");
+    },
+    onTapUndo: function () {
+        this.api && this.api.Undo();
+        Common.component.Analytics.trackEvent("ToolBar", "Undo");
+    },
+    onTapShare: function () {
+        this.api && this.api.asc_Print();
+        Common.component.Analytics.trackEvent("ToolBar", "Share");
+    },
+    onTapFont: function () {
+        this.showToolbarPanel(this.getFontPanel(), this.getFontButton());
+    },
+    onTapFontStyle: function () {
+        this.showToolbarPanel(this.getFontStylePanel(), this.getFontStyleButton());
+    },
+    onTapTextColor: function () {
+        this.showToolbarPanel(this.getTextColorPanel(), this.getTextColorButton());
+    },
+    onTabParagraphAlignment: function () {
+        this.showToolbarPanel(this.getParagraphAlignmentPanel(), this.getParagraphAlignmentButton());
+    },
+    onTapListStyle: function () {
+        this.showToolbarPanel(this.getListStylePanel(), this.getListStyleButton());
+    },
+    onTapParagraphButton: function () {
+        this.showToolbarPanel(this.getParagraphPanel(), this.getParagraphButton());
+    },
+    onTapTable: function () {
+        this.showToolbarPanel(this.getInsertPanel(), this.getTableButton());
+    },
+    onEditorResize: function (cmp) {
+        var overlayPanels = Ext.ComponentQuery.query("commonpopoverpanel");
+        Ext.each(overlayPanels, function (panel) {
+            panel.hide();
+        });
+    },
+    dlgLeaveTitleText: "You leave the application",
+    dlgLeaveMsgText: "You have unsaved changes in this document. Click 'Stay on this Page' then 'Save' to save them. Click 'Leave this Page' to discard all the unsaved changes.",
+    leaveButtonText: "Leave this Page",
+    stayButtonText: "Stay on this Page"
+});

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

@@ -0,0 +1,342 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.controller.toolbar.View", {
+    extend: "Ext.app.Controller",
+    config: {
+        refs: {
+            viewToolbar: "viewtoolbar",
+            searchToolbar: "searchtoolbar",
+            doneButton: "#id-tb-btn-view-done",
+            editModeButton: "#id-tb-btn-editmode",
+            readModeButton: "#id-tb-btn-readable",
+            searchButton: "#id-tb-btn-search",
+            fullscreenButton: "#id-tb-btn-fullscreen",
+            shareButton: "#id-tb-btn-view-share",
+            incFontSizeButton: "#id-tb-btn-incfontsize",
+            decFontSizeButton: "#id-tb-btn-decfontsize"
+        },
+        control: {
+            doneButton: {
+                tap: "onTapDoneButton"
+            },
+            editModeButton: {
+                tap: "onTapEditModeButton"
+            },
+            searchButton: {
+                tap: "onTapSearchButton"
+            },
+            readModeButton: {
+                tap: "onTapReaderButton"
+            },
+            shareButton: {
+                tap: "onTapShareButton"
+            },
+            incFontSizeButton: {
+                tap: "onTapIncFontSizeButton"
+            },
+            decFontSizeButton: {
+                tap: "onTapDecFontSizeButton"
+            }
+        },
+        searchMode: false,
+        fullscreenMode: false,
+        readableMode: false
+    },
+    init: function () {
+        this.control({
+            fullscreenButton: {
+                tap: Ext.Function.createBuffered(this.onTapFullscreenButton, 500, this)
+            }
+        });
+    },
+    launch: function () {
+        this.callParent(arguments);
+        Common.Gateway.on("init", Ext.bind(this.loadConfig, this));
+        Common.Gateway.on("opendocument", Ext.bind(this.loadDocument, this));
+        Common.Gateway.on("applyeditrights", Ext.bind(this.onApplyEditRights, this));
+    },
+    initControl: function () {
+        this.callParent(arguments);
+    },
+    initApi: function () {},
+    setApi: function (o) {
+        this.api = o;
+        if (this.api) {
+            this.api.asc_registerCallback("asc_onTapEvent", Ext.bind(this.onSingleTapDocument, this));
+            this.api.asc_registerCallback("asc_onСoAuthoringDisconnect", Ext.bind(this.onCoAuthoringDisconnect, this));
+        }
+    },
+    loadConfig: function (data) {
+        var doneButton = this.getDoneButton();
+        if (doneButton && data && data.config && data.config.canBackToFolder === true) {
+            doneButton.show();
+        }
+    },
+    loadDocument: function (data) {
+        var permissions = {};
+        if (data.doc) {
+            permissions = Ext.merge(permissions, data.doc.permissions);
+            var editModeButton = this.getEditModeButton();
+            if (editModeButton) {
+                editModeButton.setHidden(permissions.edit !== true);
+            }
+        }
+    },
+    onApplyEditRights: function (data) {
+        Ext.Viewport.unmask();
+        if (data && data.allowed) {
+            var mainController = this.getApplication().getController("tablet.Main");
+            if (this.getReadableMode()) {
+                this.setReadableMode(false);
+            }
+            if (this.getFullscreenMode()) {
+                this.setFullscreenMode(false);
+            }
+            if (mainController) {
+                mainController.setMode("edit");
+            }
+        } else {
+            var editModeButton = this.getEditModeButton();
+            editModeButton && editModeButton.hide();
+            Ext.Msg.show({
+                title: this.requestEditFailedTitleText,
+                message: (data && data.message) || this.requestEditFailedMessageText,
+                icon: Ext.Msg.INFO,
+                buttons: Ext.Msg.OK
+            });
+        }
+    },
+    applySearchMode: function (search) {
+        if (!Ext.isBoolean(search)) {
+            Ext.Logger.error("Invalid parameters.");
+        } else {
+            var me = this,
+            searchToolbar = me.getSearchToolbar(),
+            searchButton = me.getSearchButton();
+            if (searchToolbar) {
+                if (search) {
+                    searchButton && searchButton.addCls("x-button-pressing");
+                    if (me.getFullscreenMode()) {
+                        searchToolbar.show({
+                            easing: "ease-out",
+                            preserveEndState: true,
+                            autoClear: false,
+                            from: {
+                                opacity: 0.3
+                            },
+                            to: {
+                                opacity: 0.9
+                            }
+                        });
+                    } else {
+                        searchToolbar.show();
+                    }
+                } else {
+                    searchButton && searchButton.removeCls("x-button-pressing");
+                    if (me.getFullscreenMode()) {
+                        searchToolbar.hide({
+                            easing: "ease-in",
+                            to: {
+                                opacity: 0.3
+                            }
+                        });
+                    } else {
+                        searchToolbar.hide();
+                    }
+                }
+            }
+            return search;
+        }
+    },
+    applyFullscreenMode: function (fullscreen) {
+        if (!Ext.isBoolean(fullscreen)) {
+            Ext.Logger.error("Invalid parameters.");
+        } else {
+            var viewToolbar = this.getViewToolbar(),
+            searchToolbar = this.getSearchToolbar(),
+            fullscreenButton = this.getFullscreenButton(),
+            popClipCmp = Ext.ComponentQuery.query("popclip");
+            if (popClipCmp.length > 0) {
+                popClipCmp[0].hide();
+            }
+            if (viewToolbar && searchToolbar) {
+                if (fullscreen) {
+                    fullscreenButton && fullscreenButton.addCls("x-button-pressing");
+                    viewToolbar.setStyle({
+                        position: "absolute",
+                        left: 0,
+                        top: 0,
+                        right: 0,
+                        opacity: 0.9,
+                        "z-index": 17
+                    });
+                    searchToolbar.setStyle({
+                        position: "absolute",
+                        left: 0,
+                        top: "44px",
+                        right: 0,
+                        opacity: 0.9,
+                        "z-index": 16
+                    });
+                    this.setHiddenToolbars(true);
+                } else {
+                    viewToolbar.setStyle({
+                        position: "initial",
+                        opacity: 1
+                    });
+                    searchToolbar.setStyle({
+                        position: "initial",
+                        opacity: 1
+                    });
+                    viewToolbar.setDocked("top");
+                    searchToolbar.setDocked("top");
+                }
+            }
+            return fullscreen;
+        }
+    },
+    applyReadableMode: function (readable) {
+        if (!Ext.isBoolean(readable)) {
+            Ext.Logger.error("Invalid parameters.");
+        } else {
+            var searchButton = this.getSearchButton(),
+            incFontSizeButton = this.getIncFontSizeButton(),
+            decFontSizeButton = this.getDecFontSizeButton(),
+            readModeButton = this.getReadModeButton(),
+            popClipCmp = Ext.ComponentQuery.query("popclip"),
+            shareButton = this.getShareButton();
+            if (popClipCmp.length > 0) {
+                popClipCmp[0].hide();
+            }
+            if (readable) {
+                this.getSearchMode() && this.setSearchMode(false);
+                readable && readModeButton && readModeButton.addCls("x-button-pressing");
+                searchButton && searchButton.hide();
+                incFontSizeButton && incFontSizeButton.show();
+                decFontSizeButton && decFontSizeButton.show();
+                shareButton && shareButton.setDisabled(true);
+            } else {
+                incFontSizeButton && incFontSizeButton.hide();
+                decFontSizeButton && decFontSizeButton.hide();
+                searchButton && searchButton.show();
+                shareButton && shareButton.setDisabled(false);
+            }
+            this.api && this.api.ChangeReaderMode();
+            return readable;
+        }
+    },
+    setHiddenToolbars: function (hide) {
+        var viewToolbar = this.getViewToolbar(),
+        searchToolbar = this.getSearchToolbar();
+        if (viewToolbar && searchToolbar) {
+            if (hide) {
+                viewToolbar.hide({
+                    easing: "ease-out",
+                    from: {
+                        opacity: 0.9
+                    },
+                    to: {
+                        opacity: 0
+                    }
+                });
+                searchToolbar.hide({
+                    easing: "ease-out",
+                    from: {
+                        opacity: 0.9
+                    },
+                    to: {
+                        opacity: 0
+                    }
+                });
+            } else {
+                viewToolbar.show({
+                    preserveEndState: true,
+                    easing: "ease-in",
+                    from: {
+                        opacity: 0
+                    },
+                    to: {
+                        opacity: 0.9
+                    }
+                });
+                this.getSearchMode() && searchToolbar.show({
+                    preserveEndState: true,
+                    easing: "ease-in",
+                    from: {
+                        opacity: 0
+                    },
+                    to: {
+                        opacity: 0.9
+                    }
+                });
+            }
+        }
+    },
+    onTapDoneButton: function () {
+        Common.Gateway.goBack();
+    },
+    onTapEditModeButton: function () {
+        Ext.Viewport.mask();
+        Common.Gateway.requestEditRights();
+    },
+    onTapReaderButton: function () {
+        this.setReadableMode(!this.getReadableMode());
+    },
+    onTapSearchButton: function (btn) {
+        this.setSearchMode(!this.getSearchMode());
+    },
+    onTapFullscreenButton: function (btn) {
+        this.setFullscreenMode(!this.getFullscreenMode());
+    },
+    onTapShareButton: function () {
+        this.api && this.api.asc_Print();
+        Common.component.Analytics.trackEvent("ToolBar View", "Share");
+    },
+    onSingleTapDocument: function () {
+        var viewToolbar = this.getViewToolbar();
+        if (viewToolbar && this.getFullscreenMode()) {
+            this.setHiddenToolbars(!viewToolbar.isHidden());
+        }
+    },
+    onCoAuthoringDisconnect: function () {
+        var editModeButton = this.getEditModeButton();
+        editModeButton && editModeButton.setHidden(true);
+    },
+    onTapIncFontSizeButton: function () {
+        this.api && this.api.IncreaseReaderFontSize();
+    },
+    onTapDecFontSizeButton: function () {
+        this.api && this.api.DecreaseReaderFontSize();
+    },
+    requestEditFailedTitleText: "Access denied",
+    requestEditFailedMessageText: "You can't edit the document right now. Please try again later."
+});

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

@@ -0,0 +1,229 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * 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.plugin.Pinchemu", {
+    extend: "Ext.Component",
+    alias: "plugin.pinchemu",
+    config: {
+        helpers: true
+    },
+    init: function (cmp) {
+        var self = this;
+        self.touchHelpers = [];
+        self.touchHelpers[0] = Ext.create("Ext.Button", {
+            top: 0,
+            left: 0,
+            style: "opacity: 0.6;",
+            iconMask: true,
+            round: true,
+            hidden: true
+        });
+        self.touchHelpers[1] = Ext.create("Ext.Button", {
+            top: 0,
+            left: 0,
+            style: "opacity: 0.6;",
+            iconMask: true,
+            round: true,
+            hidden: true
+        });
+        Ext.Viewport.add(self.touchHelpers[0]);
+        Ext.Viewport.add(self.touchHelpers[1]);
+        self.cmp = cmp;
+        self.cmp.on({
+            scope: self,
+            painted: self.initPinchsim
+        });
+    },
+    initPinchsim: function () {
+        var self = this;
+        this.pinchStarted = false;
+        var item = self.cmp;
+        if (!item.pinchSimEnabled) {
+            if (item.rendered) {
+                self.initHandlers(item);
+            } else {
+                item.on({
+                    painted: self.initHandlers
+                });
+            }
+        }
+    },
+    initHandlers: function (item) {
+        var self = this;
+        item.element.on({
+            scope: self,
+            touchstart: function (ev) {
+                if ((ev.event.ctrlKey || ev.event.shiftKey) && self.pinchStarted === false) {
+                    self.pinchStarted = true;
+                    if (ev.event.ctrlKey) {
+                        self.zoomStart = 100;
+                        self.zoomDirection = 1;
+                    } else {
+                        if (ev.event.shiftKey) {
+                            self.zoomStart = 340;
+                            self.zoomDirection = -1;
+                        }
+                    }
+                    self.zoomFactor = 1;
+                    self.onTouchStart(item, ev);
+                }
+            },
+            touchend: function (ev) {
+                if (self.pinchStarted) {
+                    self.pinchStarted = false;
+                    self.onTouchEnd(item, ev);
+                }
+            },
+            touchcancel: function (ev) {
+                if (self.pinchStarted) {
+                    self.pinchStarted = false;
+                    self.onTouchEnd(item, ev);
+                }
+            },
+            touchmove: function (ev) {
+                if ((ev.event.ctrlKey || ev.event.shiftKey) && this.pinchStarted === true) {
+                    self.onTouchMove(item, ev);
+                } else {
+                    if (self.pinchStarted) {
+                        self.pinchStarted = false;
+                        self.onTouchEnd(item, ev);
+                    }
+                }
+            }
+        });
+        item.pinchSimEnabled = true;
+    },
+    showHelpers: function (ev) {
+        var touches = ev.touches;
+        if (typeof touches === "object" && this.getHelpers()) {
+            this.moveHelpers(touches);
+            this.setHelpersArrows(ev);
+            this.touchHelpers[0].show();
+            this.touchHelpers[1].show();
+        }
+    },
+    setHelpersArrows: function (ev) {
+        if (ev.event.ctrlKey) {
+            this.touchHelpers[0].setIconCls("arrow_right");
+            this.touchHelpers[1].setIconCls("arrow_left");
+        } else {
+            this.touchHelpers[0].setIconCls("arrow_left");
+            this.touchHelpers[1].setIconCls("arrow_right");
+        }
+    },
+    moveHelpers: function (touches) {
+        this.touchHelpers[0].setTop(touches[0].point.y);
+        this.touchHelpers[0].setLeft(touches[0].point.x);
+        this.touchHelpers[1].setTop(touches[1].point.y);
+        this.touchHelpers[1].setLeft(touches[1].point.x);
+    },
+    hideHelpers: function () {
+        this.touchHelpers[0].hide();
+        this.touchHelpers[1].hide();
+    },
+    convertEvent: function (ev) {
+        var self = this;
+        var touches = Array.prototype.slice.call(ev.touches);
+        if (!touches) {
+            touches = self.lastTouches;
+        }
+        ev.touches = touches;
+        if (touches.length > 0) {
+            if (!self.touchStartPoint) {
+                var startX = touches[0].point.x;
+                var startY = touches[0].point.y;
+                var startPageX = touches[0].pageX;
+                var startPageY = touches[0].pageY;
+                touches[0].point.x = touches[0].point.x + self.zoomStart / 2;
+                touches[0].pageX = touches[0].pageX + self.zoomStart / 2;
+                touches[1] = {};
+                touches[1].identifier = 2;
+                touches[1].pageX = startPageX - self.zoomStart / 2;
+                touches[1].pageY = startPageY;
+                touches[1].point = touches[0].point.clone();
+                touches[1].point.x = startX - self.zoomStart / 2;
+                touches[1].point.y = touches[0].point.y;
+                touches[1].target = touches[0].target;
+                touches[1].targets = touches[0].targets;
+                touches[1].timeStamp = touches[0].timeStamp;
+                this.touchStartPoint = {
+                    x: startX,
+                    y: startY,
+                    pageX: startPageX,
+                    pageY: startPageY,
+                    distance: touches[0].point.getDistanceTo(touches[1].point)
+                };
+            } else {
+                touches[0].point = self.lastTouches[0].point.clone();
+                touches[0].point.x = Ext.Number.constrain(self.lastTouches[0].point.x + self.zoomFactor * self.zoomDirection, self.touchStartPoint.x + self.zoomFactor);
+                touches[0].pageX = Ext.Number.constrain(self.lastTouches[0].pageX + self.zoomFactor * self.zoomDirection, self.touchStartPoint.x + self.zoomFactor);
+                touches[1] = {};
+                touches[1].point = self.lastTouches[1].point.clone();
+                touches[1].point.x = Ext.Number.constrain(self.lastTouches[1].point.x - self.zoomFactor * self.zoomDirection, self.touchStartPoint.x + self.zoomFactor);
+                touches[1].pageX = Ext.Number.constrain(self.lastTouches[1].pageX - self.zoomFactor * self.zoomDirection, self.touchStartPoint.x + self.zoomFactor);
+                touches[1].pageY = self.lastTouches[1].pageY;
+                touches[1].target = touches[0].target;
+                touches[1].targets = touches[0].targets;
+                touches[1].timeStamp = touches[0].timeStamp;
+            }
+            self.lastTouches = touches;
+        }
+        ev.scale = self.getNewScale(ev);
+        return ev;
+    },
+    getNewScale: function (ev) {
+        var self = this;
+        if (ev.touches.length > 0) {
+            var newDistance = ev.touches[0].point.getDistanceTo(ev.touches[1].point);
+            self.lastScale = newDistance / self.touchStartPoint.distance;
+            return self.lastScale;
+        } else {
+            return self.lastScale;
+        }
+    },
+    onTouchStart: function () {
+        this.lastScale = 1;
+        var ev = this.convertEvent(arguments[1]);
+        this.showHelpers(ev);
+    },
+    onTouchMove: function () {
+        var ev = this.convertEvent(arguments[1]);
+        this.lastTouches = Array.prototype.slice.call(ev.touches);
+        this.moveHelpers(ev.touches);
+    },
+    onTouchEnd: function () {
+        var ev = this.convertEvent(arguments[1]);
+        this.hideHelpers();
+        this.touchStartPoint = null;
+        this.lastTouches = null;
+        this.lastScale = null;
+    }
+});

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

@@ -0,0 +1,46 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.profile.Phone", {
+    extend: "Ext.app.Profile",
+    config: {
+        name: "phone",
+        namespace: "phone",
+        controllers: ["Main", "DE.controller.Document", "DE.controller.Search", "DE.controller.toolbar.Edit", "DE.controller.toolbar.View"],
+        views: ["Main"]
+    },
+    isActive: function () {
+        return (Ext.os.is.Phone && (Ext.os.is.iOS || Ext.os.is.Android));
+    },
+    launch: function () {
+        Ext.widget("dephonemain");
+    }
+});

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

@@ -0,0 +1,48 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.profile.Tablet", {
+    extend: "Ext.app.Profile",
+    config: {
+        name: "tablet",
+        namespace: "tablet",
+        controllers: ["Main", "Common.controller.PopClip", "DE.controller.Document", "DE.controller.Search", "DE.controller.tablet.panel.Font", "DE.controller.tablet.panel.FontStyle", "DE.controller.tablet.panel.Insert", "DE.controller.tablet.panel.Style", "DE.controller.tablet.panel.ParagraphAlignment", "DE.controller.tablet.panel.Spacing", "DE.controller.tablet.panel.TextColor", "DE.controller.toolbar.Edit", "DE.controller.toolbar.View"],
+        views: ["Main"],
+        models: ["Common.model.SettingItem"],
+        stores: ["Common.store.SettingsList"]
+    },
+    isActive: function () {
+        return (Ext.browser.is.WebKit && ((Ext.os.is.Tablet && (Ext.os.is.iOS || Ext.os.is.Android)) || Ext.os.is.Desktop));
+    },
+    launch: function () {
+        Ext.widget("detabletmain");
+    }
+});

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

@@ -0,0 +1,37 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.Main", {
+    extend: "Ext.Container",
+    initialize: function () {
+        this.callParent(arguments);
+    }
+});

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

@@ -0,0 +1,66 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.phone.Main", {
+    extend: "DE.view.Main",
+    alias: "widget.dephonemain",
+    requires: (["DE.view.phone.toolbar.Search", "DE.view.phone.toolbar.View"]),
+    config: {
+        cls: "de-phone-main",
+        fullscreen: true,
+        layout: {
+            type: "vbox",
+            pack: "center"
+        }
+    },
+    initialize: function () {
+        var me = this;
+        this.add(Ext.create("DE.view.phone.toolbar.View", {
+            hidden: true
+        }));
+        this.add(Ext.create("DE.view.phone.toolbar.Search", {
+            hidden: true
+        }));
+        this.add({
+            xtype: "container",
+            layout: "vbox",
+            id: "id-conteiner-document",
+            flex: 1,
+            items: [{
+                xtype: "container",
+                flex: 1,
+                id: "id-sdkeditor",
+                style: "z-index: 1"
+            }]
+        });
+        this.callParent(arguments);
+    }
+});

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

@@ -0,0 +1,69 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.phone.toolbar.Search", {
+    extend: "Ext.Toolbar",
+    xtype: "searchtoolbar",
+    requires: (["Ext.field.Search"]),
+    config: {
+        docked: "top",
+        zIndex: 10,
+        minHeight: 52,
+        ui: "search"
+    },
+    initialize: function () {
+        this.add([{
+            xtype: "searchfield",
+            id: "id-field-search",
+            placeHolder: this.searchText,
+            flex: 1
+        },
+        {
+            xtype: "segmentedbutton",
+            allowToggle: false,
+            ui: "base",
+            items: [{
+                id: "id-btn-search-up",
+                ui: "base",
+                iconCls: "spinner-prev",
+                disabled: true
+            },
+            {
+                id: "id-btn-search-down",
+                ui: "base",
+                iconCls: "spinner-next",
+                disabled: true
+            }]
+        }]);
+        this.callParent(arguments);
+    },
+    searchText: "Search"
+});

OfficeWeb/apps/documenteditor/mobile/app/view/phone/toolbar/View.js

@@ -0,0 +1,86 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.phone.toolbar.View", {
+    extend: "Ext.Toolbar",
+    xtype: "viewtoolbar",
+    config: {
+        docked: "top",
+        zIndex: 10,
+        minHeight: 44,
+        ui: "edit"
+    },
+    initialize: function () {
+        this.add([{
+            id: "id-tb-btn-view-done",
+            ui: "base-blue",
+            cls: "text-offset-12",
+            hidden: true,
+            text: this.doneText
+        },
+        {
+            xtype: "spacer"
+        },
+        {
+            id: "id-tb-btn-incfontsize",
+            ui: "base",
+            iconCls: "textbigger",
+            hidden: true
+        },
+        {
+            id: "id-tb-btn-decfontsize",
+            ui: "base",
+            iconCls: "textless",
+            hidden: true
+        },
+        {
+            id: "id-tb-btn-search",
+            ui: "base",
+            iconCls: "search"
+        },
+        {
+            id: "id-tb-btn-fullscreen",
+            ui: "base",
+            iconCls: "fullscreen"
+        },
+        {
+            xtype: "spacer"
+        },
+        {
+            id: "id-tb-btn-view-share",
+            ui: "base",
+            iconCls: "share"
+        }]);
+        this.callParent(arguments);
+    },
+    doneText: "Done",
+    readerText: "Reader"
+});

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

@@ -0,0 +1,72 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.tablet.Main", {
+    extend: "DE.view.Main",
+    alias: "widget.detabletmain",
+    requires: (["Common.view.PopClip", "DE.view.tablet.panel.FontStyle", "DE.view.tablet.panel.Insert", "DE.view.tablet.panel.ListStyle", "DE.view.tablet.panel.ParagraphAlignment", "DE.view.tablet.panel.Spacing", "DE.view.tablet.panel.TextColor", "DE.view.tablet.toolbar.Edit", "DE.view.tablet.toolbar.Search", "DE.view.tablet.toolbar.View"]),
+    config: {
+        cls: "de-tablet-main",
+        fullscreen: true,
+        layout: {
+            type: "vbox",
+            pack: "center"
+        }
+    },
+    initialize: function () {
+        var me = this;
+        this.add(Ext.create("DE.view.tablet.toolbar.Edit", {
+            hidden: true
+        }));
+        this.add(Ext.create("DE.view.tablet.toolbar.View", {
+            hidden: true
+        }));
+        this.add(Ext.create("DE.view.tablet.toolbar.Search", {
+            hidden: true
+        }));
+        this.add({
+            xtype: "container",
+            layout: "vbox",
+            id: "id-conteiner-document",
+            flex: 1,
+            items: [{
+                xtype: "container",
+                flex: 1,
+                id: "id-sdkeditor"
+            }]
+        });
+        this.add({
+            xtype: "popclip",
+            hidden: true
+        });
+        this.callParent(arguments);
+    }
+});

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

@@ -0,0 +1,119 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.tablet.panel.Font", {
+    extend: "Common.view.PopoverPanel",
+    alias: "widget.fontpanel",
+    requires: (["Ext.NavigationView", "Common.component.PlanarSpinner"]),
+    initialize: function () {
+        var me = this;
+        me.add({
+            xtype: "navigationview",
+            id: "id-font-navigate",
+            autoDestroy: false,
+            cls: "plain",
+            defaultBackButtonText: this.backText,
+            navigationBar: {
+                height: 44,
+                minHeight: 44,
+                hidden: true,
+                ui: "edit"
+            },
+            layout: {
+                type: "card",
+                animation: null
+            },
+            items: [{
+                xtype: "container",
+                layout: "hbox",
+                height: 31,
+                id: "id-font-root",
+                style: "background: transparent;",
+                items: [{
+                    xtype: "button",
+                    id: "id-btn-fontname",
+                    ui: "base",
+                    style: "font-size: .7em;",
+                    text: this.fontNameText,
+                    width: 185
+                },
+                {
+                    xtype: "spacer",
+                    width: 7
+                },
+                {
+                    xtype: "planarspinnerfield",
+                    width: 135,
+                    minValue: 6,
+                    maxValue: 100,
+                    stepValue: 1,
+                    cycle: false,
+                    component: {
+                        disabled: false
+                    }
+                },
+                {
+                    xtype: "spacer",
+                    width: 7
+                },
+                {
+                    xtype: "segmentedbutton",
+                    id: "id-toggle-baseline",
+                    ui: "base",
+                    cls: "divided",
+                    allowDepress: true,
+                    items: [{
+                        id: "id-btn-baseline-up",
+                        ui: "base",
+                        iconCls: "superscript"
+                    },
+                    {
+                        id: "id-btn-baseline-down",
+                        ui: "base",
+                        iconCls: "subscript"
+                    }]
+                }]
+            }]
+        });
+        me.add({
+            xtype: "settingslist",
+            hidden: true,
+            title: this.fontNameText,
+            id: "id-font-name",
+            disableSelection: false,
+            variableHeights: false,
+            store: Ext.create("Common.store.SettingsList", {})
+        });
+        this.callParent(arguments);
+    },
+    fontNameText: "Font Name",
+    backText: "Back"
+});

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

@@ -0,0 +1,66 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.tablet.panel.FontStyle", {
+    extend: "Common.view.PopoverPanel",
+    alias: "widget.fontstylepanel",
+    requires: (["Ext.SegmentedButton"]),
+    initialize: function () {
+        var me = this;
+        me.add({
+            xtype: "container",
+            layout: "hbox",
+            items: [{
+                xtype: "segmentedbutton",
+                id: "id-toggle-fontstyles",
+                ui: "base",
+                cls: "divided",
+                allowMultiple: true,
+                items: [{
+                    id: "id-btn-fontstyle-bold",
+                    ui: "base",
+                    iconCls: "bold"
+                },
+                {
+                    id: "id-btn-fontstyle-italic",
+                    ui: "base",
+                    iconCls: "italic"
+                },
+                {
+                    id: "id-btn-fontstyle-underline",
+                    ui: "base",
+                    iconCls: "underline"
+                }]
+            }]
+        });
+        this.callParent(arguments);
+    }
+});

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

@@ -0,0 +1,163 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.tablet.panel.Insert", {
+    extend: "Common.view.PopoverPanel",
+    alias: "widget.insertpanel",
+    requires: (["Ext.NavigationView", "Common.component.PlanarSpinner"]),
+    initialize: function () {
+        var me = this;
+        me.add({
+            xtype: "navigationview",
+            id: "id-insert-navigate",
+            autoDestroy: false,
+            defaultBackButtonText: this.backText,
+            navigationBar: {
+                height: 44,
+                minHeight: 44,
+                ui: "edit"
+            },
+            items: [{
+                xtype: "settingslist",
+                title: this.insertText,
+                id: "id-insert-root",
+                scrollable: {
+                    disabled: true
+                },
+                store: Ext.create("Common.store.SettingsList", {
+                    data: [{
+                        setting: this.insertTableText,
+                        icon: "table",
+                        group: "table",
+                        child: "id-insert-table-container"
+                    },
+                    {
+                        setting: this.insertRowText,
+                        icon: "insert-row",
+                        group: "table",
+                        id: "id-insert-table-row"
+                    },
+                    {
+                        setting: this.insertColumnText,
+                        icon: "insert-column",
+                        group: "table",
+                        id: "id-insert-table-column"
+                    },
+                    {
+                        setting: this.insertPicture,
+                        icon: "picture",
+                        group: "image",
+                        child: "id-insert-picture-container"
+                    }]
+                })
+            }]
+        });
+        me.add({
+            xtype: "container",
+            hidden: true,
+            title: this.tableText,
+            id: "id-insert-table-container",
+            padding: 10,
+            cls: "round",
+            items: [{
+                xtype: "planarspinnerfield",
+                id: "id-spinner-table-columns",
+                margin: "9",
+                label: this.columnsText,
+                labelWidth: "55%",
+                minValue: 2,
+                maxValue: 20,
+                stepValue: 1,
+                cycle: false
+            },
+            {
+                xtype: "spacer",
+                height: 2
+            },
+            {
+                xtype: "planarspinnerfield",
+                id: "id-spinner-table-rows",
+                margin: "9",
+                label: this.rowsText,
+                labelWidth: "55%",
+                minValue: 2,
+                maxValue: 20,
+                stepValue: 1,
+                cycle: false
+            },
+            {
+                xtype: "container",
+                padding: "5 5",
+                items: [{
+                    xtype: "button",
+                    id: "id-btn-insert-table",
+                    ui: "light",
+                    cls: "border-radius-10",
+                    height: 44,
+                    text: this.insertTableText
+                }]
+            }]
+        });
+        me.add({
+            xtype: "settingslist",
+            title: this.pictureText,
+            hidden: true,
+            id: "id-insert-picture-container",
+            ui: "round",
+            scrollable: {
+                disabled: true
+            },
+            store: Ext.create("Common.store.SettingsList", {
+                data: [{
+                    setting: '<div class="btn-input-image" style="display: inline-block;" id="id-insert-picture-inline">' + this.pictureUploadInline + '<input style="height: 44px;" type="file" accept="image/*" capture="camera"></div>',
+                    group: "wrap"
+                },
+                {
+                    setting: '<div class="btn-input-image" style="display: inline-block;" id="id-insert-picture-float">' + this.pictureUploadFloat + '<input style="height: 44px;" type="file" accept="image/*" capture="camera"></div>',
+                    group: "wrap"
+                }]
+            })
+        });
+        this.callParent(arguments);
+    },
+    backText: "Back",
+    insertText: "Insert",
+    insertTableText: "Insert Table",
+    insertRowText: "Insert Row",
+    insertColumnText: "Insert Column",
+    insertPicture: "Insert Picture",
+    tableText: "Table",
+    columnsText: "Columns",
+    rowsText: "Rows",
+    pictureText: "Picture",
+    pictureUploadInline: "Insert Inline",
+    pictureUploadFloat: "Insert Float"
+});

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

@@ -0,0 +1,289 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.tablet.panel.ListStyle", {
+    extend: "Common.view.PopoverPanel",
+    alias: "widget.liststylepanel",
+    requires: (["Ext.NavigationView", "Common.component.SettingsList"]),
+    initialize: function () {
+        var me = this;
+        me.add({
+            xtype: "navigationview",
+            id: "id-liststyle-navigate",
+            autoDestroy: false,
+            defaultBackButtonText: this.backText,
+            navigationBar: {
+                height: 44,
+                minHeight: 44,
+                ui: "edit"
+            },
+            items: [{
+                xtype: "settingslist",
+                title: this.listStyleText,
+                id: "id-liststyle-root",
+                ui: "round",
+                scrollable: {
+                    disabled: true
+                },
+                store: Ext.create("Common.store.SettingsList", {
+                    data: [{
+                        setting: this.bulletsText,
+                        icon: "bullets",
+                        group: "markers",
+                        child: "id-liststyle-bullets"
+                    },
+                    {
+                        setting: this.numberingText,
+                        icon: "numbering",
+                        group: "markers",
+                        child: "id-liststyle-numbering"
+                    },
+                    {
+                        setting: this.outlineText,
+                        icon: "outline",
+                        group: "markers",
+                        child: "id-liststyle-outline"
+                    },
+                    {
+                        setting: this.incIndentText,
+                        icon: "indent-inc",
+                        group: "indent",
+                        id: "id-list-indent-increment"
+                    },
+                    {
+                        setting: this.decIndentText,
+                        icon: "indent-dec",
+                        group: "indent",
+                        id: "id-list-indent-decrement"
+                    }]
+                })
+            }]
+        });
+        me.add({
+            title: this.bulletsText,
+            hidden: true,
+            id: "id-liststyle-bullets",
+            xtype: "container",
+            layout: "vbox",
+            cls: "round",
+            items: [{
+                xtype: "dataview",
+                flex: 1,
+                cls: "icon-view bullets",
+                action: "style",
+                style: "display: inline-block;",
+                disableSelection: true,
+                scrollable: {
+                    disabled: true
+                },
+                store: {
+                    field: ["bullet", "cls", "type", "subtype"],
+                    data: [{
+                        bullet: "none",
+                        type: 0,
+                        subtype: -1,
+                        cls: "top-left"
+                    },
+                    {
+                        bullet: "bullet-0",
+                        type: 0,
+                        subtype: 1,
+                        cls: ""
+                    },
+                    {
+                        bullet: "bullet-1",
+                        type: 0,
+                        subtype: 2,
+                        cls: ""
+                    },
+                    {
+                        bullet: "bullet-2",
+                        type: 0,
+                        subtype: 3,
+                        cls: "top-right"
+                    },
+                    {
+                        bullet: "bullet-3",
+                        type: 0,
+                        subtype: 4,
+                        cls: "bottom-left"
+                    },
+                    {
+                        bullet: "bullet-4",
+                        type: 0,
+                        subtype: 5,
+                        cls: ""
+                    },
+                    {
+                        bullet: "bullet-5",
+                        type: 0,
+                        subtype: 6,
+                        cls: ""
+                    },
+                    {
+                        bullet: "bullet-6",
+                        type: 0,
+                        subtype: 7,
+                        cls: "bottom-right"
+                    }]
+                },
+                itemTpl: Ext.create("Ext.XTemplate", '<tpl for=".">', '<div class="item-inner {cls}">', "<tpl if=\"bullet == 'none'\">", '<div class="text">' + me.noneText + "</div>", "<tpl else>", '<div class="icon {bullet}">&nbsp;</div>', "</tpl>", "</div>", "</tpl>")
+            }]
+        });
+        me.add({
+            title: this.numberingText,
+            hidden: true,
+            id: "id-liststyle-numbering",
+            xtype: "container",
+            layout: "vbox",
+            cls: "round",
+            items: [{
+                xtype: "dataview",
+                flex: 1,
+                cls: "icon-view numbering",
+                action: "style",
+                style: "display: inline-block;",
+                disableSelection: true,
+                scrollable: {
+                    disabled: true
+                },
+                store: {
+                    field: ["numbering", "cls", "type", "subtype"],
+                    data: [{
+                        numbering: "none",
+                        type: 1,
+                        subtype: -1,
+                        cls: "top-left"
+                    },
+                    {
+                        numbering: "numbering-0",
+                        type: 1,
+                        subtype: 4,
+                        cls: ""
+                    },
+                    {
+                        numbering: "numbering-1",
+                        type: 1,
+                        subtype: 5,
+                        cls: ""
+                    },
+                    {
+                        numbering: "numbering-2",
+                        type: 1,
+                        subtype: 6,
+                        cls: "top-right"
+                    },
+                    {
+                        numbering: "numbering-3",
+                        type: 1,
+                        subtype: 1,
+                        cls: "bottom-left"
+                    },
+                    {
+                        numbering: "numbering-4",
+                        type: 1,
+                        subtype: 2,
+                        cls: ""
+                    },
+                    {
+                        numbering: "numbering-5",
+                        type: 1,
+                        subtype: 3,
+                        cls: ""
+                    },
+                    {
+                        numbering: "numbering-6",
+                        type: 1,
+                        subtype: 7,
+                        cls: "bottom-right"
+                    }]
+                },
+                itemTpl: Ext.create("Ext.XTemplate", '<tpl for=".">', '<div class="item-inner {cls}">', "<tpl if=\"numbering == 'none'\">", '<div class="text">' + me.noneText + "</div>", "<tpl else>", '<div class="icon {numbering}">&nbsp;</div>', "</tpl>", "</div>", "</tpl>")
+            }]
+        });
+        me.add({
+            title: this.outlineText,
+            hidden: true,
+            id: "id-liststyle-outline",
+            xtype: "container",
+            layout: "vbox",
+            cls: "round",
+            items: [{
+                xtype: "dataview",
+                flex: 1,
+                cls: "icon-view outline",
+                action: "style",
+                style: "display: inline-block;",
+                disableSelection: true,
+                scrollable: {
+                    disabled: true
+                },
+                store: {
+                    field: ["outline", "cls", "type", "subtype"],
+                    data: [{
+                        outline: "none",
+                        type: 2,
+                        subtype: -1,
+                        cls: "top-left bottom-left"
+                    },
+                    {
+                        outline: "outline-0",
+                        type: 2,
+                        subtype: 1,
+                        cls: ""
+                    },
+                    {
+                        outline: "outline-1",
+                        type: 2,
+                        subtype: 2,
+                        cls: ""
+                    },
+                    {
+                        outline: "outline-2",
+                        type: 2,
+                        subtype: 3,
+                        cls: "top-right bottom-right"
+                    }]
+                },
+                itemTpl: Ext.create("Ext.XTemplate", '<tpl for=".">', '<div class="item-inner {cls}">', "<tpl if=\"outline == 'none'\">", '<div class="text">' + me.noneText + "</div>", "<tpl else>", '<div class="icon {outline}">&nbsp;</div>', "</tpl>", "</div>", "</tpl>")
+            }]
+        });
+        this.callParent(arguments);
+    },
+    backText: "Back",
+    listStyleText: "List Style",
+    bulletsText: "Bullets",
+    numberingText: "Numbering",
+    outlineText: "Outline",
+    incIndentText: "Increment indent",
+    decIndentText: "Decrement Indent",
+    noneText: "none"
+});

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

@@ -0,0 +1,69 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.tablet.panel.ParagraphAlignment", {
+    extend: "Common.view.PopoverPanel",
+    alias: "widget.paragraphalignmentpanel",
+    initialize: function () {
+        var me = this;
+        me.add({
+            xtype: "container",
+            layout: "hbox",
+            items: [{
+                xtype: "segmentedbutton",
+                id: "id-toggle-paragraphalignment",
+                ui: "base",
+                cls: "divided",
+                items: [{
+                    id: "id-btn-paragraphalignment-left",
+                    ui: "base",
+                    iconCls: "align-left"
+                },
+                {
+                    id: "id-btn-paragraphalignment-center",
+                    ui: "base",
+                    iconCls: "align-center"
+                },
+                {
+                    id: "id-btn-paragraphalignment-right",
+                    ui: "base",
+                    iconCls: "align-right"
+                },
+                {
+                    id: "id-btn-paragraphalignment-fill",
+                    ui: "base",
+                    iconCls: "align-fill"
+                }]
+            }]
+        });
+        this.callParent(arguments);
+    }
+});

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

@@ -0,0 +1,119 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.tablet.panel.Spacing", {
+    extend: "Common.view.PopoverPanel",
+    alias: "widget.spacingpanel",
+    requires: (["Ext.NavigationView", "Common.component.SettingsList"]),
+    initialize: function () {
+        var me = this;
+        me.add({
+            xtype: "navigationview",
+            id: "id-spacing-navigate",
+            autoDestroy: false,
+            defaultBackButtonText: this.backText,
+            navigationBar: {
+                height: 44,
+                minHeight: 44,
+                ui: "edit"
+            },
+            items: [{
+                xtype: "settingslist",
+                title: this.spacingText,
+                id: "id-spacing-root",
+                ui: "round",
+                scrollable: {
+                    disabled: true
+                },
+                store: Ext.create("Common.store.SettingsList", {
+                    data: [{
+                        setting: this.lineSpacingText,
+                        icon: "spacing",
+                        group: "line",
+                        child: "id-spacing-linespacing"
+                    },
+                    {
+                        setting: this.incIndentText,
+                        icon: "indent-inc",
+                        group: "indent",
+                        id: "id-linespacing-increaseindent"
+                    },
+                    {
+                        setting: this.decIndentText,
+                        icon: "indent-dec",
+                        group: "indent",
+                        id: "id-linespacing-decrementindent"
+                    }]
+                })
+            }]
+        });
+        me.add({
+            title: this.spacingText,
+            hidden: true,
+            id: "id-spacing-linespacing",
+            xtype: "settingslist",
+            disableSelection: false,
+            allowDeselect: true,
+            store: Ext.create("Common.store.SettingsList", {
+                data: [{
+                    setting: "1.0",
+                    group: "spacing"
+                },
+                {
+                    setting: "1.15",
+                    group: "spacing"
+                },
+                {
+                    setting: "1.5",
+                    group: "spacing"
+                },
+                {
+                    setting: "2",
+                    group: "spacing"
+                },
+                {
+                    setting: "2.5",
+                    group: "spacing"
+                },
+                {
+                    setting: "3.0",
+                    group: "spacing"
+                }]
+            })
+        });
+        this.callParent(arguments);
+    },
+    backText: "Back",
+    spacingText: "Spacing",
+    lineSpacingText: "Paragraph Line Spacing",
+    incIndentText: "Increase Indent",
+    decIndentText: "Decrement Indent"
+});

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

@@ -0,0 +1,531 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.tablet.panel.TextColor", {
+    extend: "Common.view.PopoverPanel",
+    alias: "widget.textcolorsettingspanel",
+    requires: (["Ext.NavigationView", "Common.component.SettingsList"]),
+    initialize: function () {
+        var me = this;
+        me.add({
+            xtype: "navigationview",
+            id: "id-textcolor-navigate",
+            autoDestroy: false,
+            defaultBackButtonText: this.backText,
+            navigationBar: {
+                height: 44,
+                minHeight: 44,
+                ui: "edit"
+            },
+            items: [{
+                xtype: "settingslist",
+                title: this.colorText,
+                id: "id-textcolor-root",
+                scrollable: {
+                    disabled: true
+                },
+                store: Ext.create("Common.store.SettingsList", {
+                    data: [{
+                        setting: this.highlightColorText,
+                        icon: "highlightcolor",
+                        group: "color",
+                        child: "id-textcolor-highlight"
+                    },
+                    {
+                        setting: this.textColorText,
+                        icon: "textcolor",
+                        group: "color",
+                        child: "id-textcolor-text"
+                    }]
+                })
+            }]
+        });
+        me.add({
+            title: this.highlightColorText,
+            hidden: true,
+            id: "id-textcolor-highlight",
+            xtype: "container",
+            layout: "vbox",
+            cls: "round",
+            items: [{
+                xtype: "dataview",
+                flex: 1,
+                cls: "color",
+                style: "display: inline-block;",
+                store: {
+                    field: ["color"],
+                    data: [{
+                        color: "FFFF00"
+                    },
+                    {
+                        color: "00FF00"
+                    },
+                    {
+                        color: "00FFFF"
+                    },
+                    {
+                        color: "FF00FF"
+                    },
+                    {
+                        color: "0000FF"
+                    },
+                    {
+                        color: "FF0000"
+                    },
+                    {
+                        color: "00008B"
+                    },
+                    {
+                        color: "008B8B"
+                    },
+                    {
+                        color: "006400"
+                    },
+                    {
+                        color: "800080"
+                    },
+                    {
+                        color: "8B0000"
+                    },
+                    {
+                        color: "808000"
+                    },
+                    {
+                        color: "FFFFFF"
+                    },
+                    {
+                        color: "D3D3D3"
+                    },
+                    {
+                        color: "A9A9A9"
+                    },
+                    {
+                        color: "000000"
+                    }]
+                },
+                itemTpl: Ext.create("Ext.XTemplate", '<tpl for=".">', '<div class="item-inner" style="background-color: #{color};"></div>', "</tpl>")
+            },
+            {
+                xtype: "container",
+                padding: "12 18",
+                items: [{
+                    xtype: "button",
+                    id: "id-btn-highlight-none",
+                    ui: "light",
+                    cls: "border-radius-10",
+                    height: 44,
+                    text: this.noFillText
+                }]
+            }]
+        });
+        me.add({
+            title: this.textColorText,
+            hidden: true,
+            id: "id-textcolor-text",
+            xtype: "container",
+            layout: "vbox",
+            cls: "round",
+            items: [{
+                xtype: "dataview",
+                flex: 1,
+                cls: "color",
+                style: "display: inline-block;",
+                store: {
+                    field: ["color"],
+                    data: [{
+                        color: "FFFFFF"
+                    },
+                    {
+                        color: "EBEBEB"
+                    },
+                    {
+                        color: "D6D6D6"
+                    },
+                    {
+                        color: "C0C0C0"
+                    },
+                    {
+                        color: "AAAAAA"
+                    },
+                    {
+                        color: "929292"
+                    },
+                    {
+                        color: "7A7A7A"
+                    },
+                    {
+                        color: "606060"
+                    },
+                    {
+                        color: "444444"
+                    },
+                    {
+                        color: "232323"
+                    },
+                    {
+                        color: "000000"
+                    },
+                    {
+                        color: "0C3649"
+                    },
+                    {
+                        color: "0E1957"
+                    },
+                    {
+                        color: "14003B"
+                    },
+                    {
+                        color: "2E013E"
+                    },
+                    {
+                        color: "3A051C"
+                    },
+                    {
+                        color: "580504"
+                    },
+                    {
+                        color: "561C04"
+                    },
+                    {
+                        color: "553403"
+                    },
+                    {
+                        color: "523E02"
+                    },
+                    {
+                        color: "646302"
+                    },
+                    {
+                        color: "4E5703"
+                    },
+                    {
+                        color: "263F0E"
+                    },
+                    {
+                        color: "144C64"
+                    },
+                    {
+                        color: "18297A"
+                    },
+                    {
+                        color: "1F0052"
+                    },
+                    {
+                        color: "440259"
+                    },
+                    {
+                        color: "530D2A"
+                    },
+                    {
+                        color: "7D0C08"
+                    },
+                    {
+                        color: "772907"
+                    },
+                    {
+                        color: "764A05"
+                    },
+                    {
+                        color: "745904"
+                    },
+                    {
+                        color: "8A8803"
+                    },
+                    {
+                        color: "6D780A"
+                    },
+                    {
+                        color: "395919"
+                    },
+                    {
+                        color: "216C8E"
+                    },
+                    {
+                        color: "253AA9"
+                    },
+                    {
+                        color: "310076"
+                    },
+                    {
+                        color: "60047C"
+                    },
+                    {
+                        color: "74153F"
+                    },
+                    {
+                        color: "AE1610"
+                    },
+                    {
+                        color: "A63D0E"
+                    },
+                    {
+                        color: "A3690B"
+                    },
+                    {
+                        color: "A27D09"
+                    },
+                    {
+                        color: "C0BF06"
+                    },
+                    {
+                        color: "98A811"
+                    },
+                    {
+                        color: "507C27"
+                    },
+                    {
+                        color: "2C8BB3"
+                    },
+                    {
+                        color: "314DD5"
+                    },
+                    {
+                        color: "3E0094"
+                    },
+                    {
+                        color: "7A069F"
+                    },
+                    {
+                        color: "941E51"
+                    },
+                    {
+                        color: "DA1E17"
+                    },
+                    {
+                        color: "D15014"
+                    },
+                    {
+                        color: "CE8611"
+                    },
+                    {
+                        color: "CC9F0E"
+                    },
+                    {
+                        color: "F0EF0A"
+                    },
+                    {
+                        color: "C0D41B"
+                    },
+                    {
+                        color: "689F34"
+                    },
+                    {
+                        color: "36A1D7"
+                    },
+                    {
+                        color: "3D55FE"
+                    },
+                    {
+                        color: "5301B3"
+                    },
+                    {
+                        color: "980ABD"
+                    },
+                    {
+                        color: "B2275F"
+                    },
+                    {
+                        color: "F83D26"
+                    },
+                    {
+                        color: "F86A1D"
+                    },
+                    {
+                        color: "F7AC16"
+                    },
+                    {
+                        color: "F7CA12"
+                    },
+                    {
+                        color: "FAFF44"
+                    },
+                    {
+                        color: "D6EF39"
+                    },
+                    {
+                        color: "79BE40"
+                    },
+                    {
+                        color: "41C5FB"
+                    },
+                    {
+                        color: "5581FD"
+                    },
+                    {
+                        color: "6800EB"
+                    },
+                    {
+                        color: "BD10F3"
+                    },
+                    {
+                        color: "DE337D"
+                    },
+                    {
+                        color: "F86056"
+                    },
+                    {
+                        color: "F8864D"
+                    },
+                    {
+                        color: "F8B544"
+                    },
+                    {
+                        color: "F8CD44"
+                    },
+                    {
+                        color: "FBFA6D"
+                    },
+                    {
+                        color: "E1F266"
+                    },
+                    {
+                        color: "97D65F"
+                    },
+                    {
+                        color: "6CD4FC"
+                    },
+                    {
+                        color: "81A3FE"
+                    },
+                    {
+                        color: "8D3BFD"
+                    },
+                    {
+                        color: "D145FE"
+                    },
+                    {
+                        color: "E76DA0"
+                    },
+                    {
+                        color: "FA8B84"
+                    },
+                    {
+                        color: "F9A67F"
+                    },
+                    {
+                        color: "F9C879"
+                    },
+                    {
+                        color: "FADA79"
+                    },
+                    {
+                        color: "FBFB96"
+                    },
+                    {
+                        color: "E8F590"
+                    },
+                    {
+                        color: "B2E08B"
+                    },
+                    {
+                        color: "9FE3FD"
+                    },
+                    {
+                        color: "AEC3FE"
+                    },
+                    {
+                        color: "B385FD"
+                    },
+                    {
+                        color: "E18BFF"
+                    },
+                    {
+                        color: "EFA2C1"
+                    },
+                    {
+                        color: "FBB4B0"
+                    },
+                    {
+                        color: "FBC5AC"
+                    },
+                    {
+                        color: "FBDAA9"
+                    },
+                    {
+                        color: "FBE6A9"
+                    },
+                    {
+                        color: "FCFDBA"
+                    },
+                    {
+                        color: "F0F9B8"
+                    },
+                    {
+                        color: "CDEAB5"
+                    },
+                    {
+                        color: "CFF0FE"
+                    },
+                    {
+                        color: "D6E2FE"
+                    },
+                    {
+                        color: "DAC7FE"
+                    },
+                    {
+                        color: "F0C7FE"
+                    },
+                    {
+                        color: "F6D2E1"
+                    },
+                    {
+                        color: "FCDAD9"
+                    },
+                    {
+                        color: "FDE2D7"
+                    },
+                    {
+                        color: "FDEDD5"
+                    },
+                    {
+                        color: "FDF2D5"
+                    },
+                    {
+                        color: "FDFDDD"
+                    },
+                    {
+                        color: "F7FBDB"
+                    },
+                    {
+                        color: "E0EED4"
+                    }]
+                },
+                itemTpl: Ext.create("Ext.XTemplate", '<tpl for=".">', '<div class="item-inner" style="background-color: #{color};"></div>', "</tpl>")
+            }]
+        });
+        this.callParent(arguments);
+    },
+    backText: "Back",
+    colorText: "Color",
+    highlightColorText: "Highlight color",
+    textColorText: "Text color",
+    noFillText: "No Fill"
+});

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

@@ -0,0 +1,219 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.tablet.toolbar.Edit", {
+    extend: "Ext.Toolbar",
+    xtype: "edittoolbar",
+    requires: (["Common.component.RepeatableButton"]),
+    config: {
+        docked: "top",
+        zIndex: 5,
+        minHeight: 44,
+        ui: "edit"
+    },
+    initialize: function () {
+        var me = this;
+        this.add([{
+            xtype: "toolbar",
+            minHeight: 40,
+            flex: 1,
+            style: "margin: 0; padding: 0;",
+            items: [{
+                id: "id-tb-btn-done",
+                ui: "base-blue",
+                cls: "text-offset-12",
+                text: this.doneText
+            },
+            {
+                id: "id-tb-btn-save",
+                ui: "base",
+                iconCls: "save"
+            }]
+        },
+        {
+            xtype: "repeatablebutton",
+            id: "id-tb-btn-undo",
+            disabled: true,
+            ui: "base",
+            iconCls: "undo"
+        },
+        {
+            xtype: "spacer",
+            width: 30
+        },
+        {
+            id: "id-tb-btn-font",
+            ui: "base",
+            cls: "text-offset-30",
+            text: this.fontText
+        },
+        {
+            id: "id-tb-btn-style",
+            ui: "base",
+            iconCls: "font-style"
+        },
+        {
+            id: "id-tb-btn-color",
+            ui: "base",
+            iconCls: "font-color"
+        },
+        {
+            xtype: "spacer",
+            width: 30
+        },
+        {
+            id: "id-tb-btn-align",
+            ui: "base",
+            iconCls: "align-left"
+        },
+        {
+            id: "id-tb-btn-liststyle",
+            ui: "base",
+            iconCls: "bullets"
+        },
+        {
+            id: "id-tb-btn-paragraph",
+            ui: "base",
+            iconCls: "spacing"
+        },
+        {
+            xtype: "spacer",
+            width: 30
+        },
+        {
+            id: "id-tb-btn-table",
+            ui: "base",
+            iconCls: "insert"
+        },
+        {
+            xtype: "toolbar",
+            minHeight: 40,
+            flex: 1,
+            style: "margin: 0; padding: 0;",
+            layout: {
+                type: "hbox",
+                pack: "end"
+            },
+            items: [{
+                id: "id-tb-btn-share",
+                ui: "base",
+                iconCls: "share"
+            }]
+        }]);
+        this.add({
+            xtype: "fontpanel",
+            layout: "fit",
+            ui: "settings",
+            width: 440,
+            height: 46,
+            id: "id-panel-font",
+            top: 0,
+            left: 0,
+            hidden: true,
+            hideOnMaskTap: true
+        });
+        this.add({
+            xtype: "fontstylepanel",
+            layout: "fit",
+            ui: "settings",
+            width: 154,
+            height: 45,
+            id: "id-panel-font-style",
+            top: 0,
+            left: 0,
+            hidden: true,
+            hideOnMaskTap: true
+        });
+        this.add({
+            xtype: "textcolorsettingspanel",
+            layout: "fit",
+            ui: "settings",
+            width: 350,
+            height: 172,
+            id: "id-panel-text-color",
+            top: 0,
+            left: 0,
+            hidden: true,
+            hideOnMaskTap: true
+        });
+        this.add({
+            xtype: "paragraphalignmentpanel",
+            layout: "fit",
+            ui: "settings",
+            width: 205,
+            height: 45,
+            id: "id-panel-paragraph-alignment",
+            top: 0,
+            left: 0,
+            hidden: true,
+            hideOnMaskTap: true
+        });
+        this.add({
+            xtype: "liststylepanel",
+            layout: "fit",
+            ui: "settings",
+            width: 337,
+            height: 328,
+            id: "id-panel-liststyle",
+            top: 0,
+            left: 0,
+            hidden: true,
+            hideOnMaskTap: true
+        });
+        this.add({
+            xtype: "spacingpanel",
+            layout: "fit",
+            ui: "settings",
+            width: 350,
+            height: 235,
+            id: "id-panel-spacing",
+            top: 0,
+            left: 0,
+            hidden: true,
+            hideOnMaskTap: true
+        });
+        this.add({
+            xtype: "insertpanel",
+            layout: "fit",
+            ui: "settings",
+            width: 350,
+            height: 283,
+            id: "id-panel-insert",
+            top: 0,
+            left: 0,
+            hidden: true,
+            hideOnMaskTap: true
+        });
+        this.callParent(arguments);
+    },
+    doneText: "Done",
+    fontText: "Font"
+});

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

@@ -0,0 +1,69 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.tablet.toolbar.Search", {
+    extend: "Ext.Toolbar",
+    xtype: "searchtoolbar",
+    requires: (["Ext.Label", "Ext.field.Search"]),
+    config: {
+        docked: "top",
+        zIndex: 10,
+        minHeight: 52,
+        ui: "search"
+    },
+    initialize: function () {
+        this.add([{
+            xtype: "searchfield",
+            id: "id-field-search",
+            placeHolder: this.searchText,
+            flex: 1
+        },
+        {
+            xtype: "segmentedbutton",
+            allowToggle: false,
+            ui: "base",
+            items: [{
+                id: "id-btn-search-up",
+                ui: "base",
+                iconCls: "spinner-prev",
+                disabled: true
+            },
+            {
+                id: "id-btn-search-down",
+                ui: "base",
+                iconCls: "spinner-next",
+                disabled: true
+            }]
+        }]);
+        this.callParent(arguments);
+    },
+    searchText: "Search"
+});

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

@@ -0,0 +1,109 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2014
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ Ext.define("DE.view.tablet.toolbar.View", {
+    extend: "Ext.Toolbar",
+    xtype: "viewtoolbar",
+    config: {
+        docked: "top",
+        zIndex: 10,
+        minHeight: 44,
+        ui: "edit"
+    },
+    initialize: function () {
+        this.add([{
+            xtype: "toolbar",
+            minHeight: 40,
+            flex: 1,
+            style: "margin: 0; padding: 0;",
+            items: [{
+                id: "id-tb-btn-view-done",
+                ui: "base-blue",
+                cls: "text-offset-12",
+                hidden: true,
+                text: this.doneText
+            },
+            {
+                id: "id-tb-btn-editmode",
+                ui: "base",
+                cls: "text-offset-12",
+                text: this.editText
+            },
+            {
+                id: "id-tb-btn-readable",
+                ui: "base",
+                cls: "text-offset-12",
+                text: this.readerText
+            }]
+        },
+        {
+            id: "id-tb-btn-search",
+            ui: "base",
+            iconCls: "search"
+        },
+        {
+            id: "id-tb-btn-incfontsize",
+            ui: "base",
+            iconCls: "textbigger",
+            hidden: true
+        },
+        {
+            id: "id-tb-btn-decfontsize",
+            ui: "base",
+            iconCls: "textless",
+            hidden: true
+        },
+        {
+            id: "id-tb-btn-fullscreen",
+            ui: "base",
+            iconCls: "fullscreen"
+        },
+        {
+            xtype: "toolbar",
+            minHeight: 40,
+            style: "margin: 0; padding: 0;",
+            layout: {
+                type: "hbox",
+                pack: "end"
+            },
+            flex: 1,
+            items: [{
+                id: "id-tb-btn-view-share",
+                ui: "base",
+                iconCls: "share"
+            }]
+        }]);
+        this.callParent(arguments);
+    },
+    doneText: "Done",
+    editText: "Edit",
+    readerText: "Reader"
+});