init repo

OfficeWeb/apps/presentationeditor/main/app/view/CreateFile.js

@@ -0,0 +1,90 @@
+/*
+ * (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("PE.view.CreateFile", {
+    extend: "Ext.panel.Panel",
+    alias: "widget.pecreatenew",
+    cls: "pe-file-createnew",
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    requires: ["Ext.container.Container", "Ext.data.Model", "Ext.data.Store", "Ext.view.View", "Ext.XTemplate", "Common.plugin.DataViewScrollPane"],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this.callParent(arguments);
+        var me = this;
+        me.add({
+            xtype: "container",
+            html: "<h3>" + me.fromBlankText + "</h3>" + "<hr noshade>" + '<div class="blank-document">' + '<div id="id-create-blank-document" class="btn-blank-document"></div>' + '<div class="blank-document-info">' + "<h3>" + me.newDocumentText + "</h3>" + me.newDescriptionText + "</div>" + "</div>" + '<div style="clear: both;"></div>' + "<h3>" + me.fromTemplateText + "</h3>" + "<hr noshade>"
+        },
+        {
+            xtype: "container",
+            flex: 1,
+            layout: "fit",
+            cls: "container-template-list",
+            items: [{
+                xtype: "dataview",
+                store: "FileTemplates",
+                tpl: Ext.create("Ext.XTemplate", '<tpl for=".">', '<div class="thumb-wrap">', '<tpl if="this.isEmptyIcon(icon)">', '<div class="thumb"></div>', "</tpl>", '<tpl if="this.isEmptyIcon(icon) == false">', '<div class="thumb" style="background-image: url(' + "'{icon}'" + ');"></div>', "</tpl>", '<div class="title">{name:htmlEncode}</div>', "</div>", "</tpl>", {
+                    isEmptyIcon: function (icon) {
+                        return icon == "";
+                    }
+                }),
+                singleSelect: true,
+                trackOver: true,
+                autoScroll: true,
+                overItemCls: "x-item-over",
+                itemSelector: "div.thumb-wrap",
+                cls: "x-view-context",
+                emptyText: '<div class="empty-text">' + this.noTemplatesText + "</div>",
+                deferEmptyText: false,
+                plugins: [{
+                    ptype: "dataviewscrollpane",
+                    pluginId: "scrollpane",
+                    areaSelector: ".x-view-context",
+                    settings: {
+                        enableKeyboardNavigation: true
+                    }
+                }]
+            }]
+        });
+    },
+    fromBlankText: "From Blank",
+    newDocumentText: "New Presentation",
+    newDescriptionText: "Create a new blank presentation which you will be able to style and format after it is created during the editing. Or choose one of the templates to start a document of a certain type or purpose where some styles have already been pre-applied.",
+    fromTemplateText: "From Template",
+    noTemplatesText: "There are no templates"
+});

OfficeWeb/apps/presentationeditor/main/app/view/DockableTabPanel.js

@@ -0,0 +1,231 @@
+/*
+ * (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("PE.view.DockableTabPanel", {
+    extend: "Ext.panel.Panel",
+    alias: "widget.pedockabletabpanel",
+    requires: ["PE.view.UndockedWindow"],
+    draggable: true,
+    tolerance: 5,
+    layout: "card",
+    constructor: function (config) {
+        this.controls = [];
+        this.callParent(arguments);
+        this.initConfig(config);
+        return this;
+    },
+    initComponent: function () {
+        var me = this;
+        me.tools = [{
+            type: "pin",
+            qtip: this.textUndock,
+            handler: function () {
+                var pos = me.ownerCt.ownerCt.getPosition();
+                if (me.actionConfig) {
+                    me.undock.apply(me, [me.actionConfig.undockPos[0], me.actionConfig.undockPos[1]]);
+                } else {
+                    me.undock.apply(me, [pos[0] - 20, pos[1] + 10]);
+                }
+            },
+            scope: me
+        }];
+        me.addEvents("docked", "undocked");
+        me.callParent(arguments);
+    },
+    initDraggable: function () {
+        var me = this;
+        me.draggable = {
+            delegate: me.getHeader().getEl(),
+            tolerance: 100,
+            constrain: true,
+            constrainTo: document.body,
+            listeners: {
+                dragstart: function () {
+                    me.startDragPos = me.getPosition(true);
+                },
+                dragend: function () {
+                    var owner_pos = me.ownerCt.getPosition(),
+                    pos = me.getPosition(true);
+                    if (pos[0] < owner_pos[0] - 20) {
+                        var calcSizeObj = me.getPanelSize.apply(me);
+                        me.hide();
+                        Ext.defer(me.undock, 5, me, [pos[0], pos[1], false, null, calcSizeObj]);
+                    } else {
+                        me.setPosition(me.startDragPos);
+                    }
+                }
+            }
+        };
+        if (me.tabButtons) {
+            me.getHeader().insert(0, me.tabButtons);
+        }
+        Ext.Component.prototype.initDraggable.call(me);
+    },
+    dock: function (suspend) {
+        var me = this,
+        ownerCt, size, win;
+        if (me.dockConfig) {
+            ownerCt = me.dockConfig.ownerCt;
+            win = me.dockConfig.win;
+            size = me.dockConfig.size;
+            win.remove(me, false);
+            if (me.tabButtons) {
+                me.getHeader().insert(0, me.tabButtons);
+            }
+            me.getHeader().show();
+            me.setSize(size);
+            ownerCt.add(me);
+            win.hide();
+            delete me.dockConfig;
+            if (!suspend) {
+                me.fireEvent("docked", me);
+            }
+        }
+    },
+    getPanelSize: function () {
+        return {
+            size: this.getSize(),
+            bodySize: this.body.getSize(),
+            header: this.getHeader().getHeight()
+        };
+    },
+    undock: function (x, y, suspend, ownerWidth, calcSizeObj) {
+        var me = this,
+        ownerCt = me.ownerCt,
+        ownerPos = (ownerCt) ? ownerCt.ownerCt.getPosition() : [0, 0],
+        ctWidth = (ownerWidth > 0) ? ownerWidth : ownerCt.ownerCt.getWidth(),
+        size = (calcSizeObj) ? calcSizeObj.size : me.getSize(),
+        bodySize = (calcSizeObj) ? calcSizeObj.bodySize : me.body.getSize(),
+        header = (calcSizeObj) ? calcSizeObj.header : me.getHeader().getHeight();
+        if (me.dockConfig) {
+            return;
+        }
+        size.width = ctWidth;
+        bodySize.width = ctWidth;
+        ownerCt.remove(me, false);
+        me.show();
+        me.getHeader().hide();
+        me.setPosition(0, 0);
+        if (me.isVisible()) {
+            me.setSize(bodySize);
+            me.body.setSize(bodySize);
+        } else {
+            me.setWidth(ctWidth);
+        }
+        if (me.win === undefined) {
+            me.win = Ext.create("PE.view.UndockedWindow", {
+                items: me,
+                title: me.title,
+                tools: [{
+                    type: "pin",
+                    qtip: me.textRedock,
+                    handler: function () {
+                        me.dock();
+                    }
+                }],
+                listeners: {
+                    move: function (cmp, x, y) {
+                        var xy = ownerCt.getPosition();
+                        if (ownerCt.isVisible(true)) {
+                            if ((xy[0] - x) <= me.tolerance) {
+                                Ext.defer(me.dock, 10, me);
+                            }
+                        }
+                    },
+                    afterrender: function () {
+                        me.win.dd.addListener("dragend", Ext.bind(function () {
+                            var xy = me.win.getPosition();
+                            me.actionConfig = {
+                                undockPos: [xy[0], xy[1]]
+                            };
+                            me.fireEvent("changeposition", me);
+                        },
+                        this), this);
+                    }
+                }
+            });
+        } else {
+            me.win.add(me);
+        }
+        if (me.tabButtons) {
+            me.win.getHeader().insert(0, me.tabButtons);
+        }
+        me.dockConfig = {
+            ownerCt: ownerCt,
+            win: me.win,
+            size: size,
+            headerHeight: header
+        };
+        me.win.show();
+        if (Ext.isNumber(x) && Ext.isNumber(y)) {
+            var pos = this.checkWindowPosition({
+                x: x,
+                y: y
+            },
+            {
+                width: me.win.getWidth(),
+                height: me.win.getHeight()
+            });
+            me.win.setPagePosition(pos.x, (pos.y + me.win.getHeight() > Ext.getBody().getSize().height) ? 0 : pos.y);
+            me.actionConfig = {
+                undockPos: [pos.x, pos.y]
+            };
+        }
+        ownerCt.doLayout();
+        me.doLayout();
+        if (!suspend) {
+            me.fireEvent("undocked", me, ownerPos, ctWidth);
+        }
+    },
+    isUndocked: function () {
+        return typeof this.dockConfig !== "undefined";
+    },
+    checkWindowPosition: function (position, size) {
+        var bodypos = Ext.getBody().getSize();
+        if (position.x > bodypos.width - 10) {
+            position.x = Math.max(bodypos.width - 10 - size.width, 0);
+        } else {
+            if (position.x < 0) {
+                position.x = 10;
+            }
+        }
+        if (position.y > bodypos.height - 10) {
+            position.y = Math.max(bodypos.height - 10 - size.height, 0);
+        } else {
+            if (position.y < 0) {
+                position.y = 10;
+            }
+        }
+        return position;
+    },
+    textRedock: "Redock to original panel",
+    textUndock: "Undock panel"
+});

OfficeWeb/apps/presentationeditor/main/app/view/DocumentHelp.js

@@ -0,0 +1,246 @@
+/*
+ * (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("PE.model.ModelHelpMenu", {
+    extend: "Ext.data.Model",
+    fields: [{
+        type: "string",
+        name: "name"
+    },
+    {
+        type: "string",
+        name: "src"
+    },
+    {
+        type: "string",
+        name: "headername"
+    }]
+});
+Ext.define("PE.view.DocumentHelp", {
+    extend: "Ext.container.Container",
+    alias: "widget.pedocumenthelp",
+    cls: "pe-documenthelp-body",
+    autoScroll: true,
+    requires: ["Ext.container.Container", "Ext.XTemplate", "Ext.view.View", "Ext.data.Model", "Ext.data.Store", "Common.plugin.DataViewScrollPane"],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this;
+        this.urlPref = "resources/help/en/";
+        var en_data = [{
+            src: "UsageInstructions/SetPageParameters.htm",
+            name: "Set page parameters",
+            headername: "Usage Instructions"
+        },
+        {
+            src: "UsageInstructions/CopyPasteUndoRedo.htm",
+            name: "Copy/paste text passages, undo/redo your actions"
+        },
+        {
+            src: "UsageInstructions/AlignText.htm",
+            name: "Align your text in a line or paragraph"
+        },
+        {
+            src: "UsageInstructions/LineSpacing.htm",
+            name: "Set paragraph line spacing"
+        },
+        {
+            src: "UsageInstructions/CopyClearFormatting.htm",
+            name: "Copy/clear text formatting"
+        },
+        {
+            src: "UsageInstructions/CreateLists.htm",
+            name: "Create lists"
+        },
+        {
+            src: "UsageInstructions/InsertImages.htm",
+            name: "Insert images"
+        },
+        {
+            src: "UsageInstructions/ViewDocInfo.htm",
+            name: "View document information"
+        },
+        {
+            src: "UsageInstructions/SavePrintDownload.htm",
+            name: "Save/print/download your document"
+        },
+        {
+            src: "UsageInstructions/OpenCreateNew.htm",
+            name: "Create a new document or open an existing one"
+        },
+        {
+            src: "HelpfulHints/About.htm",
+            name: "About ONLYOFFICE Document Editor",
+            headername: "Helpful Hints"
+        },
+        {
+            src: "HelpfulHints/SupportedFormats.htm",
+            name: "Supported Formats of Electronic Documents"
+        },
+        {
+            src: "HelpfulHints/Navigation.htm",
+            name: "Navigation through Your Document"
+        },
+        {
+            src: "HelpfulHints/Search.htm",
+            name: "Search Function"
+        },
+        {
+            src: "HelpfulHints/KeyboardShortcuts.htm",
+            name: "Keyboard Shortcuts"
+        }];
+        this.menuStore = Ext.create("Ext.data.Store", {
+            model: "PE.model.ModelHelpMenu",
+            proxy: {
+                type: "ajax",
+                url: "help/Contents.json",
+                noCache: false
+            },
+            listeners: {
+                load: function (store, records, successful) {
+                    if (!successful) {
+                        if (me.urlPref.indexOf("resources/help/en/") < 0) {
+                            me.urlPref = "resources/help/en/";
+                            store.getProxy().url = "resources/help/en/Contents.json";
+                            store.load();
+                        } else {
+                            me.urlPref = "resources/help/en/";
+                            store.loadData(en_data);
+                        }
+                    }
+                }
+            }
+        });
+        var menuTpl = new Ext.XTemplate('<tpl for=".">', '<tpl if="headername">', '<div class="header-wrap">', '<span class="header">{headername}</span>', "</div>", "</tpl>", '<div class="thumb-wrap">', '<span class="caption">{name}</span>', "</div>", "</tpl>", '<div class="x-clear"></div>');
+        this.cntMenu = Ext.create("Ext.container.Container", {
+            layout: "fit",
+            cls: "help-menu-container",
+            width: 200,
+            items: [this.menuView = Ext.create("Ext.view.View", {
+                store: this.menuStore,
+                tpl: menuTpl,
+                singleSelect: true,
+                trackOver: true,
+                width: "100%",
+                overItemCls: "x-item-over",
+                itemSelector: "div.thumb-wrap",
+                cls: "help-menu-view",
+                listeners: {
+                    afterrender: function (view) {
+                        view.getSelectionModel().deselectOnContainerClick = false;
+                        if (view.getStore().getCount()) {
+                            view.select(0);
+                            me.iFrame.src = me.urlPref + view.getStore().getAt(0).data.src;
+                        }
+                    },
+                    selectionchange: function (model, selections) {
+                        var record = model.getLastSelected();
+                        if (record) {
+                            me.iFrame.src = me.urlPref + record.data.src;
+                        }
+                    }
+                },
+                plugins: [{
+                    ptype: "dataviewscrollpane",
+                    areaSelector: ".help-menu-view",
+                    pluginId: "docHelpPluginId",
+                    settings: {
+                        enableKeyboardNavigation: true,
+                        keyboardSpeed: 0.001
+                    }
+                }]
+            })]
+        });
+        this.iFrame = document.createElement("iframe");
+        this.iFrame.src = "";
+        this.iFrame.align = "top";
+        this.iFrame.frameBorder = "0";
+        this.iFrame.width = "100%";
+        this.iFrame.height = "100%";
+        this.iFrame.onload = Ext.bind(function () {
+            var src = arguments[0].currentTarget.contentDocument.URL;
+            Ext.each(this.menuStore.data.items, function (item, index) {
+                var res = src.indexOf(item.data.src);
+                if (res > 0) {
+                    this.menuView.select(index);
+                    var node = this.menuView.getNode(index),
+                    plugin = this.menuView.getPlugin("docHelpPluginId");
+                    if (plugin) {
+                        plugin.scrollToElement(node);
+                    }
+                    return false;
+                }
+            },
+            this);
+        },
+        this);
+        this.items = [{
+            xtype: "container",
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            height: "100%",
+            items: [this.cntMenu, {
+                xtype: "tbspacer",
+                width: 2,
+                style: "border-left: 1px solid #C7C7C7"
+            },
+            {
+                xtype: "container",
+                flex: 1,
+                layout: "fit",
+                listeners: {
+                    afterrender: function (cmp) {
+                        cmp.getEl().appendChild(me.iFrame);
+                    }
+                }
+            }]
+        }];
+        this.callParent(arguments);
+    },
+    setApi: function (o) {
+        if (o) {
+            this.api = o;
+        }
+    },
+    setLangConfig: function (lang) {
+        if (lang) {
+            lang = lang.split("-")[0];
+            this.menuStore.getProxy().url = "resources/help/" + lang + "/Contents.json";
+            this.menuStore.load();
+            this.urlPref = "resources/help/" + lang + "/";
+        }
+    }
+});

OfficeWeb/apps/presentationeditor/main/app/view/DocumentInfo.js

@@ -0,0 +1,249 @@
+/*
+ * (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("PE.view.DocumentInfo", {
+    extend: "Ext.container.Container",
+    alias: "widget.pedocumentinfo",
+    cls: "pe-documentinfo-body",
+    autoScroll: true,
+    requires: ["Ext.button.Button", "Ext.container.Container", "Common.plugin.ScrollPane", "Ext.form.Label", "Ext.XTemplate", "Ext.Date"],
+    uses: ["Common.view.DocumentAccessDialog"],
+    listeners: {
+        afterrender: function (cmp, eOpts) {
+            cmp.updateInfo(cmp.doc);
+        }
+    },
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this.infoObj = {
+            PageCount: 0,
+            WordsCount: 0,
+            ParagraphCount: 0,
+            SymbolsCount: 0,
+            SymbolsWSCount: 0
+        };
+        this.inProgress = false;
+        this.lblTitle = Ext.create("Ext.form.Label", {
+            text: "-",
+            height: 14
+        });
+        this.lblPlacement = Ext.create("Ext.form.Label", {
+            text: "-",
+            width: 150,
+            height: 14,
+            style: "text-align:left",
+            hideId: "element-to-hide"
+        });
+        this.lblDate = Ext.create("Ext.form.Label", {
+            text: "-",
+            width: 150,
+            height: 14,
+            style: "text-align:left",
+            hideId: "element-to-hide"
+        });
+        var userTpl = Ext.create("Ext.XTemplate", '<span class="userLink">{text:htmlEncode}</span>');
+        this.cntAuthor = Ext.create("Ext.container.Container", {
+            tpl: userTpl,
+            data: {
+                text: "-"
+            },
+            hideId: "element-to-hide"
+        });
+        var rightsTpl = Ext.create("Ext.XTemplate", "<table>", '<tpl for=".">', "<tr>", '<td style="padding: 0 20px 5px 0;"><span class="userLink">{user:htmlEncode}</span></td>', '<td style="padding: 0 20px 5px 0;">{permissions:htmlEncode}</td>', "</tr>", "</tpl>", "</table>");
+        this.cntRights = Ext.create("Ext.container.Container", {
+            tpl: rightsTpl,
+            hideId: "element-to-hide"
+        });
+        this.items = [{
+            xtype: "tbspacer",
+            height: 30
+        },
+        {
+            xtype: "container",
+            layout: {
+                type: "table",
+                columns: 2,
+                tableAttrs: {
+                    style: "width: 100%;"
+                },
+                tdAttrs: {
+                    style: "padding: 5px 10px;vertical-align: top;"
+                }
+            },
+            items: [{
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.txtTitle,
+                style: "display: block;text-align: right;",
+                width: "100%"
+            },
+            this.lblTitle, {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.txtAuthor,
+                style: "display: block;text-align: right;",
+                width: "100%"
+            },
+            this.cntAuthor, {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.txtPlacement,
+                style: "display: block;text-align: right;",
+                width: "100%"
+            },
+            this.lblPlacement, {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.txtDate,
+                style: "display: block;text-align: right;",
+                width: "100%"
+            },
+            this.lblDate, {
+                xtype: "tbspacer",
+                colspan: 2,
+                height: 5
+            },
+            {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.txtRights,
+                style: "display: block;text-align: right;",
+                width: "100%"
+            },
+            this.cntRights, this.tbsRights = Ext.create("Ext.toolbar.Spacer", {
+                colspan: 2,
+                height: 5,
+                hideId: "element-to-hide"
+            }), {
+                xtype: "box"
+            },
+            this.btnEditRights = Ext.widget("button", {
+                id: "doc-info-set-rights",
+                cls: "asc-blue-button",
+                text: this.txtBtnAccessRights,
+                hideId: "element-to-hide",
+                listeners: {
+                    click: Ext.bind(this._changeAccessRights, this)
+                }
+            })]
+        }];
+        Ext.apply(this, {
+            plugins: [{
+                ptype: "scrollpane",
+                areaSelector: ".x-container",
+                pluginId: "docInfoPluginId",
+                settings: {
+                    enableKeyboardNavigation: true
+                }
+            }]
+        });
+        this.callParent(arguments);
+    },
+    updateInfo: function (doc) {
+        this.doc = doc;
+        if (!this.rendered) {
+            return;
+        }
+        doc = doc || {};
+        this.lblTitle.setText((doc.title) ? doc.title : "-");
+        if (doc.info) {
+            if (doc.info.author) {
+                this.cntAuthor.update({
+                    text: doc.info.author
+                });
+            }
+            this._ShowHideInfoItem(this.cntAuthor, doc.info.author !== undefined && doc.info.author !== null);
+            if (doc.info.created) {
+                this.lblDate.setText(doc.info.created);
+            }
+            this._ShowHideInfoItem(this.lblDate, doc.info.created !== undefined && doc.info.created !== null);
+            if (doc.info.folder) {
+                this.lblPlacement.setText(doc.info.folder);
+            }
+            this._ShowHideInfoItem(this.lblPlacement, doc.info.folder !== undefined && doc.info.folder !== null);
+            if (doc.info.sharingSettings) {
+                this.cntRights.update(doc.info.sharingSettings);
+            }
+            this._ShowHideInfoItem(this.cntRights, doc.info.sharingSettings !== undefined && doc.info.sharingSettings !== null && this._readonlyRights !== true);
+            this._ShowHideInfoItem(this.tbsRights, doc.info.sharingSettings !== undefined && doc.info.sharingSettings !== null && this._readonlyRights !== true);
+            this._ShowHideInfoItem(this.btnEditRights, !!this.sharingSettingsUrl && this.sharingSettingsUrl.length && this._readonlyRights !== true);
+        } else {
+            this._ShowHideDocInfo(false);
+        }
+    },
+    _ShowHideInfoItem: function (cmp, visible) {
+        var tr = cmp.getEl().up("tr");
+        if (tr) {
+            tr.setDisplayed(visible);
+        }
+    },
+    _ShowHideDocInfo: function (visible) {
+        var components = Ext.ComponentQuery.query('[hideId="element-to-hide"]', this);
+        for (var i = 0; i < components.length; i++) {
+            this._ShowHideInfoItem(components[i], visible);
+        }
+    },
+    setApi: function (o) {},
+    loadConfig: function (data) {
+        this.sharingSettingsUrl = data.config.sharingSettingsUrl;
+        return this;
+    },
+    _changeAccessRights: function (btn, event, opts) {
+        var win = Ext.widget("commondocumentaccessdialog", {
+            settingsurl: this.sharingSettingsUrl
+        });
+        var me = this;
+        win.on("accessrights", function (obj, rights) {
+            me.doc.info.sharingSettings = rights;
+            me.cntRights.update(rights);
+        });
+        win.show();
+    },
+    onLostEditRights: function () {
+        this._readonlyRights = true;
+        if (!this.rendered) {
+            return;
+        }
+        this._ShowHideInfoItem(this.cntRights, false);
+        this._ShowHideInfoItem(this.tbsRights, false);
+        this._ShowHideInfoItem(this.btnEditRights, false);
+    },
+    txtTitle: "Document Title",
+    txtAuthor: "Author",
+    txtPlacement: "Placement",
+    txtDate: "Creation Date",
+    txtRights: "Persons who have rights",
+    txtBtnAccessRights: "Change access rights"
+});

OfficeWeb/apps/presentationeditor/main/app/view/DocumentPreview.js

@@ -0,0 +1,363 @@
+/*
+ * (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("PE.view.DocumentPreview", {
+    extend: "Ext.container.Container",
+    alias: "widget.pedocumentpreview",
+    layout: "fit",
+    shadow: false,
+    floating: true,
+    toFrontOnShow: true,
+    hidden: true,
+    modal: true,
+    requires: ["Ext.container.Container", "Ext.button.Button", "Ext.form.Label"],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    listeners: {
+        afterrender: function () {
+            var parent = this.floatParent;
+            if (Ext.isDefined(parent)) {
+                parent.addListener("resize", Ext.bind(this.resizePreview, this));
+            }
+        },
+        hide: function (cmp, eOpts) {
+            this.controlsContainer.hide();
+            Ext.getCmp("pe-applicationUI").show();
+            if (this.api) {
+                setTimeout(Ext.bind(function () {
+                    this.api.Resize();
+                    var tb = Ext.getCmp("toolbar-combo-view-themes");
+                    if (tb) {
+                        tb.doComponentLayout();
+                        tb.fillComboView(tb.dataMenu.picker.getSelectedRec(), true, true);
+                        tb.dataMenu.picker.updateScrollPane();
+                    }
+                },
+                this), 50);
+            }
+            this.fireEvent("editcomplete", this);
+        },
+        show: function (cmp, eOpts) {
+            this.controlsContainer.show();
+            this.controlsContainer.setPosition(0, this.getHeight() - this._ControlPanelHeight);
+            var span = this.btnPlay.getEl().down(".asc-slide-preview-btn");
+            if (span.hasCls("btn-play")) {
+                span.removeCls("btn-play");
+                span.addCls("btn-pause");
+                this.btnPlay.getEl().set({
+                    "data-qtip": this.txtPause,
+                    "data-qalign": "bl-tl?"
+                });
+            }
+            this.fireEvent("editcomplete", this);
+        }
+    },
+    initComponent: function () {
+        var me = this;
+        me.btnPrev = Ext.create("Ext.button.Button", {
+            iconCls: "asc-slide-preview-btn btn-prev",
+            listeners: {
+                click: function () {
+                    if (me.api) {
+                        me.api.DemonstrationPrevSlide();
+                    }
+                },
+                render: function (obj) {
+                    obj.getEl().set({
+                        "data-qtip": me.txtPrev,
+                        "data-qalign": "bl-tl?"
+                    });
+                }
+            }
+        });
+        me.btnNext = Ext.create("Ext.button.Button", {
+            iconCls: "asc-slide-preview-btn btn-next",
+            listeners: {
+                click: function () {
+                    if (me.api) {
+                        me.api.DemonstrationNextSlide();
+                    }
+                },
+                render: function (obj) {
+                    obj.getEl().set({
+                        "data-qtip": me.txtNext,
+                        "data-qalign": "bl-tl?"
+                    });
+                }
+            }
+        });
+        me.btnClose = Ext.create("Ext.button.Button", {
+            iconCls: "asc-slide-preview-btn btn-close",
+            listeners: {
+                click: function () {
+                    if (me.api) {
+                        me.api.EndDemonstration();
+                    }
+                },
+                render: function (obj) {
+                    obj.getEl().set({
+                        "data-qtip": me.txtClose,
+                        "data-qalign": "bl-tl?"
+                    });
+                }
+            }
+        });
+        me.btnPlay = Ext.create("Ext.button.Button", {
+            iconCls: "asc-slide-preview-btn btn-play",
+            listeners: {
+                click: function () {
+                    var span = me.btnPlay.getEl().down(".asc-slide-preview-btn");
+                    if (span.hasCls("btn-play")) {
+                        span.removeCls("btn-play");
+                        span.addCls("btn-pause");
+                        me.btnPlay.getEl().set({
+                            "data-qtip": me.txtPause,
+                            "data-qalign": "bl-tl?"
+                        });
+                        if (me.api) {
+                            me.api.DemonstrationPlay();
+                        }
+                    } else {
+                        if (span.hasCls("btn-pause")) {
+                            span.removeCls("btn-pause");
+                            span.addCls("btn-play");
+                            me.btnPlay.getEl().set({
+                                "data-qtip": me.txtPlay,
+                                "data-qalign": "bl-tl?"
+                            });
+                            if (me.api) {
+                                me.api.DemonstrationPause();
+                            }
+                        }
+                    }
+                },
+                render: function (obj) {
+                    obj.getEl().set({
+                        "data-qtip": me.txtPlay,
+                        "data-qalign": "bl-tl?"
+                    });
+                }
+            }
+        });
+        me.txtPages = Ext.widget("label", {
+            cls: "preview-slides",
+            listeners: {
+                afterrender: Ext.bind(function (ct) {
+                    ct.getEl().on("mousedown", onShowPageMenu, this);
+                },
+                this)
+            }
+        });
+        var txtGoToPage = Ext.widget("label", {
+            text: me.goToSlideText
+        });
+        var fieldPageNumber = Ext.widget("numberfield", {
+            id: "preview-field-slide",
+            width: 40,
+            minValue: 1,
+            maxValue: 10000,
+            value: 1,
+            allowDecimals: false,
+            hideTrigger: true,
+            keyNavEnabled: false,
+            mouseWheelEnabled: false,
+            enableKeyEvents: true,
+            selectOnFocus: true,
+            listeners: {
+                specialkey: function (field, event, eOpts) {
+                    if (event.getKey() == event.ENTER) {
+                        if (me.api) {
+                            var page = fieldPageNumber.getValue();
+                            if (Ext.isNumber(page)) {
+                                if (page > fieldPageNumber.maxValue) {
+                                    page = fieldPageNumber.maxValue;
+                                }
+                                if (page < fieldPageNumber.minValue) {
+                                    page = fieldPageNumber.minValue;
+                                }
+                                fieldPageNumber.setValue(page);
+                                fieldPageNumber.selectText();
+                                me.api.DemonstrationGoToSlide(page - 1);
+                            }
+                        }
+                    }
+                }
+            }
+        });
+        var defaultPadding = 20;
+        var defaultContainerOffset = 7;
+        me.menuGoToPage = Ext.widget("menu", {
+            id: "preview-menu-slide",
+            autoHeight: true,
+            autoWidth: true,
+            plain: true,
+            items: [{
+                xtype: "container",
+                cls: "pe-documentstatusinfo-menu-inner",
+                layout: {
+                    type: "hbox",
+                    align: "middle",
+                    padding: defaultPadding / 2 + "px " + defaultPadding + "px"
+                },
+                items: [txtGoToPage, {
+                    xtype: "tbspacer",
+                    width: defaultContainerOffset
+                },
+                fieldPageNumber],
+                listeners: {
+                    afterrender: function (ct) {
+                        var textWidth = txtGoToPage.getWidth();
+                        ct.getEl().setWidth(defaultContainerOffset + 2 * defaultPadding + textWidth + fieldPageNumber.getWidth());
+                    }
+                }
+            }],
+            listeners: {
+                show: function (ct) {
+                    if (me.api) {
+                        fieldPageNumber.setValue(me.api.getCurrentPage() + 1);
+                        fieldPageNumber.focus(true, 300);
+                    }
+                }
+            }
+        });
+        var onShowPageMenu = function () {
+            me.menuGoToPage.show();
+            me.menuGoToPage.showBy(me.txtPages, "bl-tl", [0, -10]);
+        };
+        me.onCountSlides = function (count) {
+            fieldPageNumber.setMinValue((count > 0) ? 1 : 0);
+            fieldPageNumber.setMaxValue(count);
+        };
+        me.onDemonstrationSlideChanged = function (slideNum) {
+            if (me.api && Ext.isNumber(slideNum)) {
+                var count = me.api.getCountPages();
+                me.txtPages.setText(Ext.String.format(me.slideIndexText, slideNum + 1, count));
+                me.btnPrev.setDisabled(slideNum <= 0);
+                me.btnNext.setDisabled(slideNum >= count - 1);
+                fieldPageNumber.setValue(slideNum + 1);
+                var w = me.txtPages.getWidth();
+                if (me._PagesPanelSize !== w) {
+                    me.controlsContainer.setWidth(me._ControlPanelWidth + w);
+                    me._PagesPanelSize = w;
+                }
+                me.controlsContainer.doLayout();
+            }
+        };
+        me.items = [{
+            xtype: "container",
+            id: "presentation-preview",
+            listeners: {
+                resize: function (Component, adjWidth, adjHeight, eOpts) {
+                    if (this.api) {
+                        setTimeout(Ext.bind(function () {
+                            this.api.Resize();
+                        },
+                        this), 50);
+                    }
+                },
+                scope: this
+            }
+        }];
+        this.controlsContainer = Ext.create("Ext.container.Container", {
+            id: "preview-controls-panel",
+            cls: "pe-documentpreview",
+            floating: true,
+            shadow: false,
+            toFrontOnShow: true,
+            layout: {
+                type: "hbox",
+                align: "middle"
+            },
+            height: me._ControlPanelHeight = 35,
+            width: me._ControlPanelWidth = 122,
+            items: [{
+                xtype: "tbspacer",
+                width: 3
+            },
+            me.btnPrev, me.btnPlay, me.btnNext, {
+                xtype: "tbseparator",
+                width: 2,
+                height: "100%",
+                style: "padding-top:8px; padding-bottom:8px;",
+                html: '<div style="width: 100%; height: 100%; border-right: 1px solid #DADADA"></div>'
+            },
+            {
+                xtype: "tbspacer",
+                width: 8
+            },
+            me.txtPages, {
+                xtype: "tbspacer",
+                width: 8
+            },
+            {
+                xtype: "tbseparator",
+                width: 6,
+                height: "100%",
+                style: "padding-top:8px; padding-bottom:8px;",
+                html: '<div style="width: 100%; height: 100%; border-left: 1px solid #DADADA"></div>'
+            },
+            me.btnClose]
+        });
+        this.addEvents("editcomplete");
+        this.callParent(arguments);
+    },
+    setApi: function (o) {
+        this.api = o;
+        if (this.api) {
+            this.api.asc_registerCallback("asc_onCountPages", Ext.bind(this.onCountSlides, this));
+            this.api.asc_registerCallback("asc_onEndDemonstration", Ext.bind(this.onEndDemonstration, this));
+            this.api.asc_registerCallback("asc_onDemonstrationSlideChanged", Ext.bind(this.onDemonstrationSlideChanged, this));
+            this.api.DemonstrationEndShowMessage(this.txtFinalMessage);
+        }
+        return this;
+    },
+    resizePreview: function (Component, adjWidth, adjHeight, eOpts) {
+        this.setSize(adjWidth, adjHeight);
+        this.controlsContainer.setPosition(0, adjHeight - this._ControlPanelHeight);
+        if (this.menuGoToPage.isVisible()) {
+            this.menuGoToPage.showBy(this.txtPages, "bl-tl", [0, -10]);
+        }
+    },
+    onEndDemonstration: function () {
+        this.hide();
+    },
+    txtPrev: "Previous Slide",
+    txtNext: "Next Slide",
+    txtClose: "Close Preview",
+    goToSlideText: "Go to Slide",
+    slideIndexText: "Slide {0} of {1}",
+    txtPlay: "Start Presentation",
+    txtPause: "Pause Presentation",
+    txtFinalMessage: "The end of slide preview. Click to exit."
+});

OfficeWeb/apps/presentationeditor/main/app/view/DocumentSettings.js

@@ -0,0 +1,360 @@
+/*
+ * (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("PE.view.DocumentSettings", {
+    extend: "Ext.container.Container",
+    alias: "widget.pedocumentsettings",
+    cls: "pe-documentsettings-body",
+    requires: ["Ext.button.Button", "Ext.container.Container", "Ext.form.Label", "Ext.form.field.Checkbox"],
+    listeners: {
+        show: function (cmp, eOpts) {
+            cmp.updateSettings();
+        }
+    },
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this._changedProps = {
+            zoomIdx: 0,
+            unitIdx: 0,
+            saveVal: 600,
+            showchangesIdx: 1
+        };
+        this._oldUnit = undefined;
+        this.chInputMode = Ext.create("Ext.form.field.Checkbox", {
+            id: "docsettings-input-mode",
+            boxLabel: this.strInputMode,
+            width: 500
+        });
+        this.chLiveComment = Ext.create("Ext.form.field.Checkbox", {
+            id: "docsettings-live-comment",
+            checked: true,
+            boxLabel: this.strLiveComment,
+            width: 500
+        });
+        this._arrZoom = [[-1, this.txtFitSlide], [50, "50%"], [60, "60%"], [70, "70%"], [80, "80%"], [90, "90%"], [100, "100%"], [110, "110%"], [120, "120%"], [150, "150%"], [175, "175%"], [200, "200%"]];
+        this.cmbZoom = Ext.create("Ext.form.field.ComboBox", {
+            id: "docsettings-combo-zoom",
+            width: 150,
+            editable: false,
+            store: this._arrZoom,
+            mode: "local",
+            triggerAction: "all",
+            value: this._arrZoom[0][1],
+            listeners: {
+                select: Ext.bind(function (combo, records, eOpts) {
+                    this._changedProps.zoomIdx = records[0].index;
+                    combo.blur();
+                },
+                this)
+            }
+        });
+        this._arrUnit = [[Common.MetricSettings.c_MetricUnits.cm, this.txtCm], [Common.MetricSettings.c_MetricUnits.pt, this.txtPt]];
+        this.cmbUnit = Ext.create("Ext.form.field.ComboBox", {
+            id: "docsettings-combo-unit",
+            width: 150,
+            editable: false,
+            store: this._arrUnit,
+            mode: "local",
+            triggerAction: "all",
+            value: this._arrUnit[0][1],
+            listeners: {
+                select: Ext.bind(function (combo, records, eOpts) {
+                    this._changedProps.unitIdx = records[0].index;
+                    combo.blur();
+                },
+                this)
+            }
+        });
+        this._arrAutoSave = [[0, this.textDisabled], [60, this.textMinute], [300, this.text5Minutes], [600, this.text10Minutes], [1800, this.text30Minutes], [3600, this.text60Minutes]];
+        this.cmbAutoSave = Ext.create("Ext.form.field.ComboBox", {
+            id: "docsettings-combo-save",
+            width: 150,
+            editable: false,
+            store: this._arrAutoSave,
+            mode: "local",
+            triggerAction: "all",
+            value: this._arrAutoSave[3][1],
+            listeners: {
+                select: Ext.bind(function (combo, records, eOpts) {
+                    this._changedProps.saveVal = records[0].data.field1;
+                    combo.blur();
+                },
+                this)
+            }
+        });
+        this._arrShowChanges = [this.txtAll, this.txtLast];
+        this.cmbShowChanges = Ext.create("Ext.form.field.ComboBox", {
+            id: "docsettings-show-changes",
+            width: 150,
+            editable: false,
+            store: this._arrShowChanges,
+            mode: "local",
+            triggerAction: "all",
+            value: this._arrShowChanges[1],
+            listeners: {
+                select: Ext.bind(function (combo, records, eOpts) {
+                    this._changedProps.showchangesIdx = records[0].index;
+                    combo.blur();
+                },
+                this)
+            }
+        });
+        this.btnOk = Ext.widget("button", {
+            cls: "asc-blue-button",
+            width: 90,
+            height: 22,
+            text: this.okButtonText,
+            listeners: {
+                click: function (btn) {
+                    this.applySettings();
+                },
+                scope: this
+            }
+        });
+        this.items = [{
+            xtype: "container",
+            layout: {
+                type: "table",
+                columns: 2,
+                tableAttrs: {
+                    style: "width: 100%;"
+                },
+                tdAttrs: {
+                    style: "padding: 5px 10px;"
+                }
+            },
+            items: [{
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.txtInput,
+                style: "display: block;text-align: right; margin-bottom: 1px;",
+                width: "100%",
+                hideId: "element-edit-mode"
+            },
+            this.chInputMode, {
+                xtype: "tbspacer",
+                hideId: "element-edit-mode"
+            },
+            {
+                xtype: "tbspacer"
+            },
+            {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.strZoom,
+                style: "display: block;text-align: right; margin-bottom: 5px;",
+                width: "100%"
+            },
+            this.cmbZoom, {
+                xtype: "tbspacer",
+                hideId: "element-edit-mode"
+            },
+            {
+                xtype: "tbspacer"
+            },
+            {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.strShowChanges,
+                style: "display: block;text-align: right; margin-bottom: 5px;",
+                width: "100%",
+                hideId: "element-coauthoring"
+            },
+            this.cmbShowChanges, {
+                xtype: "tbspacer",
+                hideId: "element-coauthoring"
+            },
+            {
+                xtype: "tbspacer"
+            },
+            {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.textAutoSave,
+                style: "display: block;text-align: right; margin-bottom: 5px;",
+                width: "100%",
+                hideId: "element-autosave"
+            },
+            this.cmbAutoSave, {
+                xtype: "tbspacer",
+                hideId: "element-autosave"
+            },
+            {
+                xtype: "tbspacer"
+            },
+            {
+                xtype: "label",
+                cellCls: "doc-info-label-cell",
+                text: this.strUnit,
+                style: "display: block;text-align: right; margin-bottom: 5px;",
+                width: "100%",
+                hideId: "element-edit-mode"
+            },
+            this.cmbUnit, {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "tbspacer"
+            },
+            this.btnOk]
+        }];
+        this.addEvents("savedocsettings");
+        this.addEvents("changemeasureunit");
+        this.callParent(arguments);
+    },
+    setApi: function (o) {
+        this.api = o;
+        return this;
+    },
+    applySettings: function () {
+        this.api.SetTextBoxInputMode(this.chInputMode.getValue());
+        if (this.mode.canAutosave > -1) {
+            this.api.asc_setAutoSaveGap(this._changedProps.saveVal);
+        }
+        this.api.SetCollaborativeMarksShowType((this._changedProps.showchangesIdx == 0) ? c_oAscCollaborativeMarksShowType.All : c_oAscCollaborativeMarksShowType.LastChanges);
+        window.localStorage.setItem("pe-settings-inputmode", this.chInputMode.getValue() ? 1 : 0);
+        window.localStorage.setItem("pe-settings-zoom", this._arrZoom[this._changedProps.zoomIdx][0]);
+        window.localStorage.setItem("pe-settings-showchanges", this._changedProps.showchangesIdx);
+        window.localStorage.setItem("pe-settings-livecomment", this.chLiveComment.getValue() ? 1 : 0);
+        window.localStorage.setItem("pe-settings-unit", this._arrUnit[this._changedProps.unitIdx][0]);
+        window.localStorage.setItem("pe-settings-autosave", this._changedProps.saveVal);
+        Common.component.Analytics.trackEvent("File Menu", "SaveSettings");
+        this.fireEvent("savedocsettings", this);
+        if (this._oldUnit !== this._arrUnit[this._changedProps.unitIdx][0]) {
+            this.fireEvent("changemeasureunit", this);
+        }
+    },
+    updateSettings: function () {
+        var value = window.localStorage.getItem("pe-settings-inputmode");
+        this.chInputMode.setValue(value !== null && parseInt(value) == 1);
+        value = window.localStorage.getItem("pe-settings-livecomment");
+        this.chLiveComment.setValue(!(value !== null && parseInt(value) == 0));
+        value = window.localStorage.getItem("pe-settings-zoom");
+        this._changedProps.zoomIdx = 0;
+        if (value !== null) {
+            for (var i = 0; i < this._arrZoom.length; i++) {
+                if (this._arrZoom[i][0] == parseInt(value)) {
+                    this._changedProps.zoomIdx = i;
+                    break;
+                }
+            }
+        }
+        this.cmbZoom.setValue(this._arrZoom[this._changedProps.zoomIdx][1]);
+        value = window.localStorage.getItem("pe-settings-showchanges");
+        this._changedProps.showchangesIdx = (value !== null && parseInt(value) == 0) ? 0 : 1;
+        this.cmbShowChanges.setValue(this._arrShowChanges[this._changedProps.showchangesIdx]);
+        value = window.localStorage.getItem("pe-settings-unit");
+        this._changedProps.unitIdx = 0;
+        if (value !== null) {
+            for (var i = 0; i < this._arrUnit.length; i++) {
+                if (this._arrUnit[i][0] == parseInt(value)) {
+                    this._changedProps.unitIdx = i;
+                    break;
+                }
+            }
+        }
+        this.cmbUnit.setValue(this._arrUnit[this._changedProps.unitIdx][1]);
+        this._oldUnit = this._arrUnit[this._changedProps.unitIdx][0];
+        value = window.localStorage.getItem("pe-settings-autosave");
+        value = (value !== null) ? parseInt(value) : 600;
+        this._changedProps.saveVal = 600;
+        var idx = 3;
+        for (var i = 0; i < this._arrAutoSave.length; i++) {
+            if (this._arrAutoSave[i][0] == value) {
+                this._changedProps.saveVal = value;
+                idx = i;
+                break;
+            }
+        }
+        this.cmbAutoSave.setValue(this._arrAutoSave[idx][1]);
+        this._ShowHideDocSettings("element-edit-mode", this.mode.isEdit);
+        this._ShowHideDocSettings("element-coauthoring", this.mode.canCoAuthoring && this.mode.isEdit);
+        this._ShowHideDocSettings("element-autosave", this.mode.isEdit && (this.mode.canAutosave > -1));
+    },
+    _ShowHideSettingsItem: function (cmp, visible) {
+        var tr = cmp.getEl().up("tr");
+        if (tr) {
+            tr.setDisplayed(visible);
+        }
+    },
+    _ShowHideDocSettings: function (id, visible) {
+        var components = Ext.ComponentQuery.query('[hideId="' + id + '"]', this);
+        for (var i = 0; i < components.length; i++) {
+            this._ShowHideSettingsItem(components[i], visible);
+        }
+    },
+    setMode: function (mode) {
+        this.mode = mode;
+        if (this.mode.canAutosave > -1) {
+            var idx = 0;
+            for (idx = 1; idx < this._arrAutoSave.length; idx++) {
+                if (this.mode.canAutosave < this._arrAutoSave[idx][0]) {
+                    break;
+                }
+            }
+        }
+        var arr = [];
+        arr = this._arrAutoSave.slice(idx, this._arrAutoSave.length);
+        arr.unshift(this._arrAutoSave[0]);
+        if (arr.length > 0) {
+            this.cmbAutoSave.getStore().loadData(arr);
+        }
+    },
+    strInputMode: "Turn on hieroglyphs",
+    strZoom: "Default Zoom Value",
+    okButtonText: "Apply",
+    txtFitSlide: "Fit Slide",
+    txtInput: "Alternate Input",
+    strLiveComment: "Turn on option",
+    txtLiveComment: "Live Commenting",
+    strUnit: "Unit of Measurement",
+    txtCm: "Centimeter",
+    txtPt: "Point",
+    textDisabled: "Disabled",
+    textMinute: "Every Minute",
+    text5Minutes: "Every 5 Minutes",
+    text10Minutes: "Every 10 Minutes",
+    text30Minutes: "Every 30 Minutes",
+    text60Minutes: "Every Hour",
+    textAutoSave: "Autosave",
+    strShowChanges: "Realtime Collaboration Changes",
+    txtAll: "View All",
+    txtLast: "View Last"
+});

OfficeWeb/apps/presentationeditor/main/app/view/DocumentStatusInfo.js

@@ -0,0 +1,367 @@
+/*
+ * (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("PE.view.DocumentStatusInfo", {
+    extend: "Ext.container.Container",
+    alias: "widget.documentstatusinfo",
+    requires: ["Ext.form.field.Number", "Ext.button.Button", "Ext.form.Label", "Ext.toolbar.Spacer", "Ext.util.Cookies"],
+    uses: ["Ext.tip.ToolTip", "Ext.menu.Menu", "Common.view.Participants"],
+    layout: {
+        type: "hbox",
+        align: "middle"
+    },
+    config: {
+        caption: ""
+    },
+    cls: "pe-documentstatusinfo",
+    height: 27,
+    initComponent: function () {
+        var me = this,
+        cfg = Ext.apply({},
+        me.initialConfig);
+        this.addEvents("editcomplete");
+        var txtPages = Ext.widget("label", {
+            id: "status-label-pages",
+            text: Ext.String.format(me.pageIndexText, 0, 0),
+            cls: "statusinfo-pages",
+            style: "cursor: pointer;margin:0 40px;",
+            listeners: {
+                afterrender: function (ct) {
+                    ct.getEl().on("mousedown", onShowPageMenu, me);
+                }
+            }
+        });
+        var txtCaption = Ext.widget("label", {
+            id: "status-label-caption",
+            text: this.getCaption(),
+            cls: "statusinfo-caption",
+            height: 14
+        });
+        var txtZoom = Ext.widget("label", {
+            id: "status-label-zoom",
+            text: Ext.String.format(me.zoomText, 0),
+            cls: "statusinfo-pages",
+            style: "cursor: pointer; white-space:nowrap; text-align: center; margin: 0 5px;",
+            listeners: {
+                afterrender: Ext.bind(function (ct) {
+                    ct.getEl().on("mousedown", onShowZoomMenu, this);
+                    ct.getEl().set({
+                        "data-qtip": me.tipZoomFactor,
+                        "data-qalign": "bl-tl?"
+                    });
+                    ct.setWidth(Ext.util.TextMetrics.measure(ct.getEl(), Ext.String.format(me.zoomText, 999)).width);
+                },
+                this)
+            }
+        });
+        var btnFitToPage = Ext.widget("button", {
+            id: "status-button-fit-page",
+            cls: "asc-statusbar-icon-btn",
+            iconCls: "asc-statusbar-btn btn-fittopage",
+            enableToggle: true,
+            listeners: {
+                toggle: function (btn, pressed) {
+                    if (me.api) {
+                        if (pressed) {
+                            me.api.zoomFitToPage();
+                        } else {
+                            me.api.zoomCustomMode();
+                        }
+                    }
+                    btnFitToWidth.toggle(false, true);
+                },
+                render: function (obj) {
+                    obj.getEl().set({
+                        "data-qtip": me.tipFitPage,
+                        "data-qalign": "bl-tl?"
+                    });
+                }
+            }
+        });
+        var btnFitToWidth = Ext.widget("button", {
+            id: "status-button-fit-width",
+            cls: "asc-statusbar-icon-btn",
+            iconCls: "asc-statusbar-btn btn-fittowidth",
+            enableToggle: true,
+            style: "margin: 0 20px 0 5px;",
+            listeners: {
+                toggle: function (btn, pressed) {
+                    if (me.api) {
+                        if (pressed) {
+                            me.api.zoomFitToWidth();
+                        } else {
+                            me.api.zoomCustomMode();
+                        }
+                    }
+                    btnFitToPage.toggle(false, true);
+                },
+                render: function (obj) {
+                    obj.getEl().set({
+                        "data-qtip": me.tipFitWidth,
+                        "data-qalign": "bl-tl?"
+                    });
+                }
+            }
+        });
+        var btnZoomIn = Ext.widget("button", {
+            id: "status-button-zoom-in",
+            cls: "asc-btn-zoom asc-statusbar-icon-btn",
+            iconCls: "asc-statusbar-btn btn-zoomin",
+            style: "margin-right:40px",
+            listeners: {
+                click: function () {
+                    if (me.api) {
+                        me.api.zoomIn();
+                    }
+                },
+                render: function (obj) {
+                    obj.getEl().set({
+                        "data-qtip": me.tipZoomIn + " (Ctrl++)",
+                        "data-qalign": "bl-tl?"
+                    });
+                }
+            }
+        });
+        var btnZoomOut = Ext.widget("button", {
+            id: "status-button-zoom-out",
+            cls: "asc-btn-zoom asc-statusbar-icon-btn",
+            iconCls: "asc-statusbar-btn btn-zoomout",
+            listeners: {
+                click: function () {
+                    if (me.api) {
+                        me.api.zoomOut();
+                    }
+                },
+                render: function (obj) {
+                    obj.getEl().set({
+                        "data-qtip": me.tipZoomOut + " (Ctrl+-)",
+                        "data-qalign": "bl-tl?"
+                    });
+                }
+            }
+        });
+        this.userPanel = Ext.widget("statusinfoparticipants", {
+            userIconCls: "pe-icon-statusinfo-users"
+        });
+        this.fieldPageNumber = Ext.widget("numberfield", {
+            id: "status-field-page",
+            width: 40,
+            minValue: 1,
+            maxValue: 10000,
+            value: 1,
+            allowDecimals: false,
+            hideTrigger: true,
+            keyNavEnabled: false,
+            mouseWheelEnabled: false,
+            enableKeyEvents: true,
+            selectOnFocus: true,
+            listeners: {
+                specialkey: function (field, event, eOpts) {
+                    if (event.getKey() == event.ENTER) {
+                        if (me.api) {
+                            var page = me.fieldPageNumber.getValue();
+                            if (Ext.isNumber(page)) {
+                                if (page > me.fieldPageNumber.maxValue) {
+                                    page = me.fieldPageNumber.maxValue;
+                                }
+                                if (page < me.fieldPageNumber.minValue) {
+                                    page = me.fieldPageNumber.minValue;
+                                }
+                                me.fieldPageNumber.setValue(page);
+                                me.fieldPageNumber.selectText();
+                                me.api.goToPage(page - 1);
+                            }
+                        }
+                    }
+                }
+            }
+        });
+        var onShowPageMenu = function () {
+            this.menuGoToPage.show();
+            this.menuGoToPage.showBy(txtPages, "bl-tl", [0, -10]);
+        };
+        var onShowZoomMenu = function () {
+            me.menuZoomTo.show();
+            me.menuZoomTo.showBy(txtZoom, "b-t", [0, -10]);
+        };
+        var onZoomChange = function (percent, type) {
+            btnFitToPage.toggle(type == 2, true);
+            btnFitToWidth.toggle(type == 1, true);
+            txtZoom.setText(Ext.String.format(me.zoomText, percent));
+            txtZoom.zf = percent;
+            me.doLayout();
+        };
+        var onCountPages = function (count) {
+            if (me.api) {
+                txtPages.setText(Ext.String.format(me.pageIndexText, me.api.getCurrentPage() + 1, count));
+            }
+            me.fieldPageNumber.setMinValue((count > 0) ? 1 : 0);
+            me.fieldPageNumber.setMaxValue(count);
+        };
+        var onCurrentPage = function (number) {
+            if (me.api) {
+                txtPages.setText(Ext.String.format(me.pageIndexText, number + 1, me.api.getCountPages()));
+            }
+            me.fieldPageNumber.setValue(number + 1);
+        };
+        this.setApi = function (o) {
+            this.api = o;
+            if (this.api) {
+                this.api.asc_registerCallback("asc_onZoomChange", Ext.bind(onZoomChange, this));
+                this.api.asc_registerCallback("asc_onCountPages", Ext.bind(onCountPages, this));
+                this.api.asc_registerCallback("asc_onCurrentPage", Ext.bind(onCurrentPage, this));
+                this.userPanel.setApi(this.api);
+            }
+            return this;
+        };
+        this.items = [txtPages, me.userPanel, {
+            xtype: "container",
+            flex: 1,
+            layout: {
+                type: "hbox",
+                pack: "center"
+            },
+            items: [txtCaption]
+        },
+        btnFitToPage, btnFitToWidth, btnZoomOut, txtZoom, btnZoomIn];
+        me.callParent(arguments);
+    },
+    applyCaption: function (value) {
+        var c = Ext.get("status-label-caption");
+        if (c) {
+            Ext.DomHelper.overwrite(c, value);
+        }
+        this.doLayout();
+        return value;
+    },
+    createDelayedElements: function () {
+        var me = this;
+        var txtGoToPage = Ext.widget("label", {
+            id: "status-label-page",
+            text: me.goToPageText
+        });
+        var defaultPadding = 20;
+        var defaultContainerOffset = 7;
+        this.menuGoToPage = Ext.widget("menu", {
+            id: "status-menu-page",
+            autoHeight: true,
+            autoWidth: true,
+            plain: true,
+            items: [{
+                xtype: "container",
+                cls: "pe-documentstatusinfo-menu-inner",
+                layout: {
+                    type: "hbox",
+                    align: "middle",
+                    padding: defaultPadding / 2 + "px " + defaultPadding + "px"
+                },
+                items: [txtGoToPage, {
+                    xtype: "tbspacer",
+                    width: defaultContainerOffset
+                },
+                me.fieldPageNumber],
+                listeners: {
+                    afterrender: function (ct) {
+                        var textWidth = txtGoToPage.getWidth();
+                        ct.getEl().setWidth(defaultContainerOffset + 2 * defaultPadding + textWidth + me.fieldPageNumber.getWidth());
+                    }
+                }
+            }],
+            listeners: {
+                show: function (ct) {
+                    if (me.api) {
+                        me.fieldPageNumber.setValue(me.api.getCurrentPage() + 1);
+                        me.fieldPageNumber.focus(true, 300);
+                    }
+                }
+            }
+        });
+        function onItemClick(item) {
+            if (me.api) {
+                me.api.zoom(item.zf);
+            }
+        }
+        this.menuZoomTo = Ext.widget("menu", {
+            plain: true,
+            bodyCls: "status-zoom-menu",
+            minWidth: 100,
+            defaults: {
+                listeners: {
+                    click: onItemClick
+                }
+            },
+            listeners: {
+                hide: function () {
+                    me.fireEvent("editcomplete", me);
+                }
+            },
+            items: [{
+                text: "50%",
+                zf: 50
+            },
+            {
+                text: "75%",
+                zf: 75
+            },
+            {
+                text: "100%",
+                zf: 100
+            },
+            {
+                text: "125%",
+                zf: 125
+            },
+            {
+                text: "150%",
+                zf: 150
+            },
+            {
+                text: "175%",
+                zf: 175
+            },
+            {
+                text: "200%",
+                zf: 200
+            }]
+        });
+    },
+    setMode: function (m) {
+        this.userPanel.setMode(m);
+    },
+    zoomText: "Zoom {0}%",
+    goToPageText: "Go to Slide",
+    pageIndexText: "Slide {0} of {1}",
+    tipFitPage: "Fit Slide",
+    tipFitWidth: "Fit Width",
+    tipZoomIn: "Zoom In",
+    tipZoomOut: "Zoom Out",
+    tipZoomFactor: "Magnification"
+});

OfficeWeb/apps/presentationeditor/main/app/view/File.js

@@ -0,0 +1,425 @@
+/*
+ * (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("PE.view.File", {
+    extend: "Ext.panel.Panel",
+    alias: "widget.pefile",
+    cls: "pe-file-body",
+    layout: "card",
+    toolbarWidth: 260,
+    activeBtn: undefined,
+    requires: ["Ext.toolbar.Toolbar", "Ext.button.Button", "Ext.container.Container"],
+    uses: ["PE.view.DocumentInfo", "PE.view.DocumentHelp", "PE.view.DocumentSettings", "Common.view.About"],
+    listeners: {
+        afterrender: function (Component, eOpts) {
+            var cnt = this.ownerCt;
+            if (Ext.isDefined(cnt)) {
+                cnt.addListener("show", Ext.Function.bind(this._onShow, this));
+            }
+        }
+    },
+    initComponent: function () {
+        this.addEvents("editdocument");
+        this.callParent(arguments);
+    },
+    loadConfig: function (data) {
+        this.editorConfig = data.config;
+    },
+    loadDocument: function (data) {
+        this.document = data.doc;
+    },
+    _onShow: function () {
+        if (this.activeBtn === undefined) {
+            var btn = this[this.btnDomnloadAs.isVisible() ? "btnDomnloadAs" : "btnDocumentInfo"];
+            this.activeBtn = btn.toggle(true);
+        } else {
+            this.redrawButton(this.activeBtn);
+        }
+        if (this.activeBtn == this.btnDocumentInfo) {
+            this.getLayout().setActiveItem(this.cardDocumentInfo);
+        } else {
+            if (this.activeBtn == this.btnDocumentSettings) {
+                this.getLayout().setActiveItem(this.cardDocumentSettings);
+                this.cardDocumentSettings.updateSettings();
+            }
+        }
+    },
+    buildItems: function () {
+        var docInfo = [{
+            name: "PDF",
+            imgCls: "doc-format btn-pdf",
+            type: c_oAscFileType.PDF
+        },
+        {
+            name: "PPTX",
+            imgCls: "doc-format btn-pptx",
+            type: c_oAscFileType.PPTX
+        }];
+        this.cardDownloadAs = Ext.widget("container", {
+            cls: "pe-file-table",
+            layout: {
+                type: "table",
+                columns: 4
+            }
+        });
+        var me = this;
+        Ext.each(docInfo, function (item) {
+            this.cardDownloadAs.add({
+                xtype: "container",
+                items: [{
+                    xtype: "button",
+                    id: "file-format-" + item.name,
+                    cls: item.imgCls + " download-button-style",
+                    docType: item.type,
+                    width: 102,
+                    height: 129,
+                    margin: "65px 25px 0 25px",
+                    listeners: {
+                        click: Ext.bind(function (btn) {
+                            var api = me.ownerCt.getApi();
+                            if (api) {
+                                api.asc_DownloadAs(btn.docType);
+                                me.closeMenu();
+                            }
+                            Common.component.Analytics.trackEvent("Download As", item.name);
+                        },
+                        this)
+                    }
+                }]
+            });
+        },
+        this);
+        this.cardDocumentInfo = Ext.widget("pedocumentinfo");
+        this.cardCreateNew = Ext.widget("pecreatenew");
+        this.cardRecentFiles = Ext.widget("perecentfiles");
+        this.cardHelp = Ext.widget("pedocumenthelp");
+        this.cardDocumentSettings = Ext.widget("pedocumentsettings");
+        this.cardDocumentSettings.addListener("savedocsettings", Ext.bind(this.closeMenu, this));
+        return [this.cardDownloadAs, this.cardDocumentInfo, this.cardCreateNew, this.cardRecentFiles, this.cardHelp, this.cardDocumentSettings];
+    },
+    buildDockedItems: function () {
+        this.btnSave = Ext.create("Ext.button.Button", {
+            id: "file-button-save",
+            text: this.btnSaveCaption,
+            textAlign: "left",
+            enableToggle: true,
+            cls: "asc-filemenu-btn",
+            padding: "0 27px",
+            height: 27,
+            listeners: {
+                click: Ext.bind(function (btnCall) {
+                    if (btnCall.pressed) {
+                        this.api = this.ownerCt.getApi();
+                        if (this.api) {
+                            this.redrawButton(btnCall);
+                            this.api.asc_Save();
+                            this.closeMenu();
+                        }
+                        Common.component.Analytics.trackEvent("Save");
+                        Common.component.Analytics.trackEvent("File Menu", "Save");
+                    }
+                },
+                this)
+            }
+        });
+        this.btnPrint = this.btnSave.cloneConfig({
+            id: "file-button-print",
+            text: this.btnPrintCaption,
+            listeners: {
+                click: Ext.bind(function (btnCall) {
+                    if (btnCall.pressed) {
+                        this.api = this.ownerCt.getApi();
+                        if (this.api) {
+                            this.api.asc_Print();
+                            this.closeMenu();
+                        }
+                        Common.component.Analytics.trackEvent("Print");
+                        Common.component.Analytics.trackEvent("File Menu", "Print");
+                    }
+                },
+                this)
+            }
+        });
+        this.btnToEdit = this.btnSave.cloneConfig({
+            id: "file-button-edit",
+            text: this.btnToEditCaption,
+            listeners: {
+                click: Ext.bind(function (btnCall) {
+                    this.redrawButton(btnCall);
+                    if (btnCall.pressed) {
+                        this.closeMenu();
+                        this.fireEvent("editdocument");
+                        Common.component.Analytics.trackEvent("Edit");
+                        Common.component.Analytics.trackEvent("File Menu", "Edit");
+                    }
+                },
+                this)
+            }
+        });
+        this.btnDomnloadAs = Ext.create("Ext.button.Button", Ext.applyIf(this.getFileMenuButton(this.btnDownloadCaption, this.cardDownloadAs), {
+            id: "file-button-download"
+        }));
+        this.btnDocumentInfo = Ext.create("Ext.button.Button", Ext.applyIf(this.getFileMenuButton(this.btnInfoCaption, this.cardDocumentInfo), {
+            id: "file-button-info"
+        }));
+        this.btnDocumentSettings = Ext.create("Ext.button.Button", Ext.applyIf(this.getFileMenuButton(this.btnSettingsCaption, this.cardDocumentSettings), {
+            id: "file-button-settings"
+        }));
+        this.btnBack = this.btnSave.cloneConfig({
+            id: "file-button-back",
+            text: this.btnBackCaption,
+            listeners: {
+                click: Ext.bind(function (btnCall) {
+                    this.redrawButton(btnCall);
+                    if (btnCall.pressed) {
+                        Common.Gateway.goBack();
+                        this.closeMenu();
+                    }
+                },
+                this)
+            }
+        });
+        this.btnHelp = Ext.create("Ext.button.Button", this.getFileMenuButton(this.btnHelpCaption, this.cardHelp));
+        this.btnReturn = Ext.create("Ext.button.Button", {
+            id: "file-button-return",
+            text: this.btnReturnCaption,
+            textAlign: "left",
+            enableToggle: true,
+            cls: "asc-filemenu-btn",
+            padding: "0 27px",
+            height: 27,
+            listeners: {
+                click: Ext.bind(function (btnCall) {
+                    if (btnCall.pressed) {
+                        this.closeMenu();
+                        Common.component.Analytics.trackEvent("File Menu", "Return");
+                    }
+                },
+                this)
+            }
+        });
+        this.btnCreateNew = Ext.create("Ext.button.Button", {
+            id: "file-button-createnew",
+            text: this.btnCreateNewCaption,
+            textAlign: "left",
+            enableToggle: true,
+            cls: "asc-filemenu-btn",
+            padding: "0 27px",
+            height: 27
+        });
+        this.btnOpenRecent = Ext.create("Ext.button.Button", Ext.applyIf(this.getFileMenuButton(this.btnRecentFilesCaption, this.cardRecentFiles), {
+            id: "file-button-recentfiles",
+            label: "Recent"
+        }));
+        this.tbFileMenu = Ext.create("Ext.toolbar.Toolbar", {
+            dock: "left",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            cls: "pe-file-toolbar",
+            vertical: true,
+            width: this.toolbarWidth,
+            defaults: {
+                height: 22,
+                width: "100%"
+            },
+            items: [{
+                xtype: "container",
+                height: 15
+            },
+            this.btnReturn, this.getSeparator(), this.btnSave, this.btnToEdit, this.btnDomnloadAs, this.btnPrint, this.getSeparator(), this.btnOpenRecent, this.btnCreateNew, this.getSeparator(), this.btnDocumentInfo, this.getSeparator(), this.btnDocumentSettings, this.getSeparator(), this.btnHelp, this.getSeparator(), this.btnBack]
+        });
+        return this.tbFileMenu;
+    },
+    setApi: function (api) {
+        this.api = api;
+    },
+    getSeparator: function () {
+        return {
+            xtype: "container",
+            html: '<hr class="pe-file-separator" />'
+        };
+    },
+    getFileMenuButton: function (caption, card) {
+        return {
+            text: caption,
+            textAlign: "left",
+            enableToggle: true,
+            cls: "asc-filemenu-btn",
+            padding: "0 27px",
+            height: 27,
+            listeners: {
+                click: Ext.Function.bind(function (btnCall) {
+                    if (btnCall.pressed) {
+                        if (this.activeBtn != btnCall) {
+                            this.getLayout().setActiveItem(card);
+                            this.activeBtn = btnCall;
+                        }
+                        Common.component.Analytics.trackEvent("File Menu", btnCall.label);
+                    }
+                },
+                this),
+                toggle: Ext.Function.bind(function (btnCall) {
+                    this.redrawButton(btnCall);
+                },
+                this)
+            }
+        };
+    },
+    redrawButton: function (btnCall) {
+        var tb = this.tbFileMenu;
+        for (var i = 0; i < tb.items.length; i++) {
+            var btn = tb.items.items[i];
+            if (btn.componentCls === "x-btn") {
+                if (btn.id != btnCall.id && btn.pressed) {
+                    btn.toggle(false, true);
+                }
+            }
+        }
+        btnCall.toggle(true, true);
+    },
+    closeMenu: function () {
+        this.ownerCt.closeMenu();
+    },
+    applyMode: function () {
+        this.cardDocumentInfo.updateInfo(this.document);
+        this.btnBack.setVisible(this.mode.canBack);
+        this.tbFileMenu.items.items[16].setVisible(this.mode.canBack);
+        this.btnOpenRecent.setVisible(this.mode.canOpenRecent);
+        this.btnCreateNew.setVisible(this.mode.canCreateNew);
+        this.tbFileMenu.items.items[10].setVisible(this.mode.canCreateNew);
+        this.btnDomnloadAs.setVisible(this.mode.canDownload);
+        this.hkSaveAs[this.mode.canDownload ? "enable" : "disable"]();
+        this.btnSave.setVisible(this.mode.isEdit);
+        this.btnToEdit.setVisible(this.mode.canEdit && this.mode.isEdit === false);
+        this.cardDocumentSettings.setMode(this.mode);
+    },
+    setMode: function (mode, delay) {
+        if (mode.isDisconnected) {
+            this.mode.canEdit = this.mode.isEdit = false;
+            this.mode.canOpenRecent = this.mode.canCreateNew = false;
+        } else {
+            this.mode = mode;
+        }
+        if (!delay) {
+            this.applyMode();
+        }
+    },
+    createDelayedElements: function () {
+        this.hkSaveAs = new Ext.util.KeyMap(document, {
+            key: "s",
+            ctrl: true,
+            shift: true,
+            defaultEventAction: "stopEvent",
+            scope: this,
+            fn: function () {
+                if (this.ownerCt && this.ownerCt.isVisible()) {
+                    this.btnDomnloadAs.toggle(true);
+                    this.btnDomnloadAs.fireEvent("click", this.btnDomnloadAs);
+                }
+            }
+        });
+        this.hkHelp = new Ext.util.KeyMap(document, {
+            key: Ext.EventObject.F1,
+            ctrl: false,
+            shift: false,
+            defaultEventAction: "stopEvent",
+            scope: this,
+            fn: function () {
+                if (this.ownerCt && this.ownerCt.isVisible()) {
+                    this.btnHelp.toggle(true);
+                    this.btnHelp.fireEvent("click", this.btnHelp);
+                }
+            }
+        });
+        this.add(this.buildItems.call(this));
+        this.addDocked(this.buildDockedItems());
+        this.setConfig();
+        this.applyMode();
+    },
+    setConfig: function () {
+        var me = this;
+        if (this.editorConfig.templates && this.editorConfig.templates.length > 0) {
+            this.btnCreateNew.setText(this.btnCreateNew.getText() + "...");
+            this.btnCreateNew.enableToggle = true;
+            this.btnCreateNew.on("click", function (btnCall) {
+                if (btnCall.pressed) {
+                    if (me.activeBtn != btnCall) {
+                        me.getLayout().setActiveItem(me.cardCreateNew);
+                        me.activeBtn = btnCall;
+                    }
+                    Common.component.Analytics.trackEvent("File Menu", "Create");
+                }
+            });
+            this.btnCreateNew.on("toggle", function (btnCall) {
+                me.redrawButton(btnCall);
+            });
+        } else {
+            this.btnCreateNew.on("click", function (btnCall) {
+                if (Ext.isEmpty(me.editorConfig.createUrl)) {
+                    Ext.MessageBox.show({
+                        title: me.textError,
+                        msg: me.textCanNotCreateNewDoc,
+                        buttons: Ext.Msg.OK,
+                        icon: Ext.Msg.ERROR,
+                        width: 300
+                    });
+                } else {
+                    if (btnCall.pressed) {
+                        var newDocumentPage = window.open(Ext.String.format("{0}?title={1}&action=create&doctype=presentation", me.editorConfig.createUrl, me.newDocumentTitle));
+                        if (newDocumentPage) {
+                            newDocumentPage.focus();
+                        }
+                        Common.component.Analytics.trackEvent("Create New", "Blank");
+                    }
+                }
+                this.closeMenu();
+            });
+        }
+        this.cardHelp.setLangConfig(this.editorConfig.lang);
+    },
+    btnSaveCaption: "Save",
+    btnDownloadCaption: "Download as...",
+    btnInfoCaption: "Document Info...",
+    btnCreateNewCaption: "Create New",
+    btnRecentFilesCaption: "Open Recent...",
+    btnPrintCaption: "Print",
+    btnHelpCaption: "Help...",
+    btnReturnCaption: "Back to Document",
+    btnToEditCaption: "Edit Document",
+    btnBackCaption: "Go to Documents",
+    newDocumentTitle: "Unnamed presentation",
+    textError: "Error",
+    textCanNotCreateNewDoc: "Can not create a new presentation. Address to create a document is not configured.",
+    btnSettingsCaption: "Advanced Settings...",
+    btnAboutCaption: "About"
+});

OfficeWeb/apps/presentationeditor/main/app/view/HyperlinkSettings.js

@@ -0,0 +1,440 @@
+/*
+ * (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
+ *
+ */
+ var c_oHyperlinkType = {
+    InternalLink: 0,
+    WebLink: 1
+};
+Ext.define("PE.view.HyperlinkSettings", {
+    extend: "Ext.window.Window",
+    alias: "widget.pehyperlinksettings",
+    requires: ["Ext.window.Window", "Ext.form.field.ComboBox", "Ext.form.field.Text", "Ext.Array", "Ext.form.field.Radio", "Common.plugin.ComboBoxScrollPane"],
+    cls: "asc-advanced-settings-window",
+    modal: true,
+    resizable: false,
+    plain: true,
+    constrain: true,
+    height: 410,
+    width: 366,
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    listeners: {
+        show: function () {
+            if (this.contExtLink.isVisible()) {
+                this.txtLink.focus(false, 500);
+            } else {
+                this.txtLinkText.focus(false, 500);
+            }
+        }
+    },
+    initComponent: function () {
+        var me = this;
+        this.addEvents("onmodalresult");
+        this.isTextChanged = false;
+        this._spacer = Ext.create("Ext.toolbar.Spacer", {
+            width: "100%",
+            height: 10,
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        });
+        this.cmbLinkType = Ext.widget("combo", {
+            store: Ext.create("Ext.data.Store", {
+                fields: ["description", "type"],
+                data: [{
+                    type: c_oHyperlinkType.InternalLink,
+                    description: me.textInternalLink
+                },
+                {
+                    type: c_oHyperlinkType.WebLink,
+                    description: me.textExternalLink
+                }]
+            }),
+            displayField: "description",
+            valueField: "type",
+            queryMode: "local",
+            editable: false,
+            value: me.textExternalLink,
+            listeners: {
+                change: function (o, nV, oV) {
+                    var isinter = nV == c_oHyperlinkType.InternalLink;
+                    me.contIntLink.setVisible(isinter);
+                    me.contExtLink.setVisible(!isinter);
+                }
+            }
+        });
+        this.cmbSlides = Ext.create("Ext.form.field.ComboBox", {
+            store: this.slides,
+            mode: "local",
+            triggerAction: "all",
+            editable: false,
+            width: 50,
+            listConfig: {
+                maxHeight: 200
+            },
+            listeners: {
+                select: Ext.bind(function (combo, records, eOpts) {
+                    this.slideNum = records[0].index + 1;
+                    combo.blur();
+                    me.radioSlide.setValue(true);
+                },
+                this)
+            },
+            plugins: [{
+                ptype: "comboboxscrollpane",
+                pluginId: "scrollpane",
+                settings: {
+                    enableKeyboardNavigation: true
+                }
+            }]
+        });
+        this.txtLink = Ext.widget("textfield", {
+            allowBlank: false,
+            blankText: me.txtEmpty,
+            emptyText: me.textEmptyLink,
+            validateOnChange: false,
+            msgTarget: "side",
+            regex: /(([\-\wа-яё]+\.)+[\wа-яё]{2,3}(\/[%\-\wа-яё]+(\.[\wа-яё]{2,})?)*(([\wа-яё\-\.\?\\\/+@&#;`~=%!]*)(\.[\wа-яё]{2,})?)*\/?)/i,
+            regexText: me.txtNotUrl,
+            listeners: {
+                specialkey: function (field, e) {
+                    if (e.getKey() == e.ENTER) {
+                        me.btnOk.fireEvent("click");
+                    } else {
+                        if (e.getKey() == e.ESC) {
+                            me.btnCancel.fireEvent("click");
+                        }
+                    }
+                }
+            }
+        });
+        this.txtLinkText = Ext.widget("textfield", {
+            allowBlank: false,
+            blankText: me.txtEmpty,
+            msgTarget: "side",
+            emptyText: me.textEmptyDesc,
+            listeners: {
+                specialkey: function (field, e) {
+                    if (e.getKey() == e.ENTER) {
+                        me.btnOk.fireEvent("click");
+                    } else {
+                        if (e.getKey() == e.ESC) {
+                            me.btnCancel.fireEvent("click");
+                        }
+                    }
+                },
+                change: function (field, newValue, oldValue) {
+                    me.isTextChanged = true;
+                },
+                scope: this
+            }
+        });
+        this.txtLinkTip = Ext.widget("textfield", {
+            emptyText: me.textEmptyTooltip,
+            listeners: {
+                specialkey: function (field, e) {
+                    if (e.getKey() == e.ENTER) {
+                        me.btnOk.fireEvent("click");
+                    } else {
+                        if (e.getKey() == e.ESC) {
+                            me.btnCancel.fireEvent("click");
+                        }
+                    }
+                }
+            }
+        });
+        this.label = Ext.widget("label", {
+            width: "100%",
+            margin: "0 0 2 0",
+            style: "font-weight: bold;"
+        });
+        this.contExtLink = Ext.widget("container", {
+            height: 44,
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            items: [this.label.cloneConfig({
+                text: me.strLinkTo
+            }), this.txtLink]
+        });
+        this.contIntLink = Ext.widget("container", {
+            height: 120,
+            hidden: true,
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "container",
+                flex: 1,
+                layout: {
+                    type: "vbox",
+                    align: "stretch"
+                },
+                items: [this.radioNext = Ext.create("Ext.form.field.Radio", {
+                    boxLabel: this.txtNext,
+                    name: "asc-radio-slide",
+                    checked: true
+                }), this.radioPrev = Ext.create("Ext.form.field.Radio", {
+                    boxLabel: this.txtPrev,
+                    name: "asc-radio-slide"
+                }), this.radioFirst = Ext.create("Ext.form.field.Radio", {
+                    boxLabel: this.txtFirst,
+                    name: "asc-radio-slide"
+                }), this.radioLast = Ext.create("Ext.form.field.Radio", {
+                    boxLabel: this.txtLast,
+                    name: "asc-radio-slide"
+                }), {
+                    xtype: "container",
+                    flex: 1,
+                    layout: {
+                        type: "hbox",
+                        align: "stretch"
+                    },
+                    items: [this.radioSlide = Ext.create("Ext.form.field.Radio", {
+                        boxLabel: this.txtSlide,
+                        name: "asc-radio-slide"
+                    }), {
+                        xtype: "tbspacer",
+                        width: 10
+                    },
+                    this.cmbSlides]
+                }]
+            }]
+        });
+        this.items = [{
+            xtype: "container",
+            height: 316,
+            padding: "18 25",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            items: [this.label.cloneConfig({
+                text: me.textLinkType
+            }), this.cmbLinkType, {
+                xtype: "tbspacer",
+                height: 10
+            },
+            this.contExtLink, this.contIntLink, {
+                xtype: "tbspacer",
+                height: 10
+            },
+            this.labelDisplay = this.label.cloneConfig({
+                text: me.strDisplay
+            }), this.txtLinkText, {
+                xtype: "tbspacer",
+                height: 10
+            },
+            this.label.cloneConfig({
+                text: me.textTipText
+            }), this.txtLinkTip]
+        },
+        this._spacer.cloneConfig(), {
+            xtype: "container",
+            height: 40,
+            layout: {
+                type: "vbox",
+                align: "center",
+                pack: "center"
+            },
+            items: [{
+                xtype: "container",
+                width: 182,
+                height: 24,
+                layout: {
+                    type: "hbox",
+                    align: "middle"
+                },
+                items: [this.btnOk = Ext.widget("button", {
+                    cls: "asc-blue-button",
+                    width: 86,
+                    height: 22,
+                    margin: "0 5px 0 0",
+                    text: this.okButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            if (me.cmbLinkType.getValue() == c_oHyperlinkType.WebLink && !me.txtLink.isValid()) {
+                                me.txtLink.focus(true, 500);
+                                return;
+                            }
+                            if (!me.txtLinkText.isValid()) {
+                                me.txtLinkText.focus(true, 500);
+                                return;
+                            }
+                            this.fireEvent("onmodalresult", 1);
+                            this.close();
+                        },
+                        scope: this
+                    }
+                }), this.btnCancel = Ext.widget("button", {
+                    cls: "asc-darkgray-button",
+                    width: 86,
+                    height: 22,
+                    text: this.cancelButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", 0);
+                            this.close();
+                        },
+                        scope: this
+                    }
+                })]
+            }]
+        }];
+        this.callParent(arguments);
+        this.setTitle(this.textTitle);
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+    },
+    setSettings: function (props, currentPage) {
+        if (props) {
+            var type = this.parseUrl(props.get_Value());
+            this.cmbLinkType.setValue(type);
+            if (props.get_Text() !== null) {
+                this.txtLinkText.setValue(props.get_Text());
+                this.txtLinkText.setDisabled(false);
+            } else {
+                this.txtLinkText.setValue(this.textDefault);
+                this.txtLinkText.setDisabled(true);
+            }
+            this.isTextChanged = false;
+            this.txtLinkTip.setValue(props.get_ToolTip());
+        }
+    },
+    getSettings: function () {
+        var props = new CHyperlinkProperty();
+        if (this.cmbLinkType.getValue() == c_oHyperlinkType.InternalLink) {
+            var url = "ppaction://hlink";
+            var tip = "";
+            var txttip = this.txtLinkTip.getValue();
+            if (this.radioSlide.getValue()) {
+                url = url + "sldjumpslide" + (this.cmbSlides.getValue() - 1);
+                tip = this.txtSlide + " " + this.cmbSlides.getValue();
+            } else {
+                if (this.radioFirst.getValue()) {
+                    url = url + "showjump?jump=firstslide";
+                    tip = this.txtFirst;
+                } else {
+                    if (this.radioLast.getValue()) {
+                        url = url + "showjump?jump=lastslide";
+                        tip = this.txtLast;
+                    } else {
+                        if (this.radioNext.getValue()) {
+                            url = url + "showjump?jump=nextslide";
+                            tip = this.txtNext;
+                        } else {
+                            if (this.radioPrev.getValue()) {
+                                url = url + "showjump?jump=previousslide";
+                                tip = this.txtPrev;
+                            }
+                        }
+                    }
+                }
+            }
+            props.put_Value(url);
+            props.put_ToolTip((txttip !== "") ? txttip : tip);
+        } else {
+            var url = this.txtLink.getValue();
+            if (!/(((^https?)|(^ftp)):\/\/)/i.test(url)) {
+                url = "http://" + url;
+            }
+            props.put_Value(url);
+            props.put_ToolTip(this.txtLinkTip.getValue());
+        }
+        if (!this.txtLinkText.isDisabled() && this.isTextChanged) {
+            props.put_Text(this.txtLinkText.getValue());
+        } else {
+            props.put_Text(null);
+        }
+        return props;
+    },
+    parseUrl: function (url) {
+        if (url === null || url === undefined || url == "") {
+            return c_oHyperlinkType.WebLink;
+        }
+        var indAction = url.indexOf("ppaction://hlink");
+        if (0 == indAction) {
+            if (url == "ppaction://hlinkshowjump?jump=firstslide") {
+                this.radioFirst.setValue(true);
+            } else {
+                if (url == "ppaction://hlinkshowjump?jump=lastslide") {
+                    this.radioLast.setValue(true);
+                } else {
+                    if (url == "ppaction://hlinkshowjump?jump=nextslide") {
+                        this.radioNext.setValue(true);
+                    } else {
+                        if (url == "ppaction://hlinkshowjump?jump=previousslide") {
+                            this.radioPrev.setValue(true);
+                        } else {
+                            this.radioSlide.setValue(true);
+                            var mask = "ppaction://hlinksldjumpslide";
+                            var indSlide = url.indexOf(mask);
+                            if (0 == indSlide) {
+                                var slideNum = parseInt(url.substring(mask.length));
+                                if (slideNum >= 0 && slideNum < this.slides.length) {
+                                    this.cmbSlides.setValue(slideNum + 1);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            return c_oHyperlinkType.InternalLink;
+        } else {
+            this.txtLink.setValue(url ? url : "");
+            return c_oHyperlinkType.WebLink;
+        }
+    },
+    textTitle: "Hyperlink Settings",
+    textInternalLink: "Place In This Document",
+    textExternalLink: "File or Web Page",
+    textEmptyLink: "Enter link here",
+    textEmptyDesc: "Enter caption here",
+    textEmptyTooltip: "Enter tooltip here",
+    txtSlide: "Slide",
+    textLinkType: "Link Type",
+    strDisplay: "Display",
+    textTipText: "Screen Tip Text",
+    strLinkTo: "Link To",
+    txtEmpty: "This field is required",
+    textInvalidRange: "ERROR! Invalid cells range",
+    txtNotUrl: 'This field should be a URL in the format "http://www.example.com"',
+    strPlaceInDocument: "Select a Place in This Document",
+    cancelButtonText: "Cancel",
+    okButtonText: "Ok",
+    txtNext: "Next Slide",
+    txtPrev: "Previous Slide",
+    txtFirst: "First Slide",
+    txtLast: "Last Slide"
+});

OfficeWeb/apps/presentationeditor/main/app/view/HyperlinkSettingsDialog.js

@@ -0,0 +1,259 @@
+/*
+ * (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("PE.view.HyperlinkSettingsDialog", {
+    extend: "Ext.window.Window",
+    alias: "widget.pehyperlinksettingsdialog",
+    requires: ["Ext.window.Window"],
+    modal: true,
+    closable: true,
+    resizable: false,
+    preventHeader: true,
+    plain: true,
+    height: 215,
+    width: 350,
+    padding: "20px",
+    layout: "vbox",
+    layoutConfig: {
+        align: "stretch"
+    },
+    listeners: {
+        show: function () {
+            this.txtUrl.focus(false, 500);
+        }
+    },
+    constructor: function (config) {
+        this.callParent(arguments);
+        this.initConfig(config);
+        return this;
+    },
+    initComponent: function () {
+        this.isTextChanged = false;
+        var _btnOk = Ext.create("Ext.Button", {
+            id: "addhyperlink-button-ok",
+            text: this.okButtonText,
+            width: 80,
+            cls: "asc-blue-button",
+            listeners: {
+                click: function () {
+                    if (!this.txtUrl.isValid() || !this.txtDisplay.isValid()) {
+                        return;
+                    }
+                    this._modalresult = 1;
+                    this.fireEvent("onmodalresult", this._modalresult);
+                    this.close();
+                },
+                scope: this
+            }
+        });
+        var _btnCancel = Ext.create("Ext.Button", {
+            id: "addhyperlink-button-cancel",
+            text: this.cancelButtonText,
+            width: 80,
+            cls: "asc-darkgray-button",
+            listeners: {
+                click: function () {
+                    this._modalresult = 0;
+                    this.fireEvent("onmodalresult", this._modalresult);
+                    this.close();
+                },
+                scope: this
+            }
+        });
+        this.txtUrl = Ext.create("Ext.form.Text", {
+            id: "addhyperlink-text-url",
+            width: 310,
+            msgTarget: "side",
+            validateOnChange: false,
+            allowBlank: false,
+            value: "http://",
+            blankText: this.txtEmpty,
+            regex: /(([\-\wа-яё]+\.)+[\wа-яё]{2,3}(\/[%\-\wа-яё]+(\.[\wа-яё]{2,})?)*(([\wа-яё\-\.\?\\\/+@&#;`~=%!]*)(\.[\wа-яё]{2,})?)*\/?)/i,
+            regexText: this.txtNotUrl,
+            listeners: {
+                specialkey: function (field, e) {
+                    if (e.getKey() == e.ENTER) {
+                        _btnOk.fireEvent("click");
+                    } else {
+                        if (e.getKey() == e.ESC) {
+                            _btnCancel.fireEvent("click");
+                        }
+                    }
+                }
+            }
+        });
+        this.txtDisplay = Ext.create("Ext.form.Text", {
+            id: "addhyperlink-text-display",
+            width: 310,
+            msgTarget: "side",
+            validateOnBlur: false,
+            allowBlank: false,
+            blankText: this.txtEmpty,
+            value: "",
+            listeners: {
+                specialkey: function (field, e) {
+                    if (e.getKey() == e.ENTER) {
+                        _btnOk.fireEvent("click");
+                    } else {
+                        if (e.getKey() == e.ESC) {
+                            _btnCancel.fireEvent("click");
+                        }
+                    }
+                },
+                change: function (field, newValue, oldValue) {
+                    this.isTextChanged = true;
+                },
+                scope: this
+            }
+        });
+        this.txtTooltip = Ext.create("Ext.form.Text", {
+            id: "addhyperlink-text-tooltip",
+            width: 310,
+            msgTarget: "side",
+            validateOnBlur: false,
+            allowBlank: true,
+            value: "",
+            listeners: {
+                specialkey: function (field, e) {
+                    if (e.getKey() == e.ENTER) {
+                        _btnOk.fireEvent("click");
+                    } else {
+                        if (e.getKey() == e.ESC) {
+                            _btnCancel.fireEvent("click");
+                        }
+                    }
+                }
+            }
+        });
+        this.addEvents("onmodalresult");
+        this.items = [{
+            xtype: "label",
+            text: this.textUrl,
+            width: "100%",
+            style: "text-align:left"
+        },
+        {
+            xtype: "tbspacer",
+            height: 3
+        },
+        this.txtUrl, {
+            xtype: "tbspacer",
+            height: 3
+        },
+        {
+            xtype: "label",
+            text: this.textDisplay,
+            width: "100%",
+            style: "text-align:left"
+        },
+        {
+            xtype: "tbspacer",
+            height: 3
+        },
+        this.txtDisplay, {
+            xtype: "tbspacer",
+            height: 3
+        },
+        {
+            xtype: "label",
+            text: this.textTooltip,
+            width: "100%",
+            style: "text-align:left"
+        },
+        {
+            xtype: "tbspacer",
+            height: 3
+        },
+        this.txtTooltip, {
+            xtype: "tbspacer",
+            height: 8
+        },
+        {
+            xtype: "container",
+            width: 310,
+            layout: "hbox",
+            layoutConfig: {
+                align: "stretch"
+            },
+            items: [{
+                xtype: "tbspacer",
+                flex: 1
+            },
+            _btnOk, {
+                xtype: "tbspacer",
+                width: 5
+            },
+            _btnCancel]
+        }];
+        this.callParent(arguments);
+    },
+    setSettings: function (props) {
+        if (props) {
+            if (props.get_Value()) {
+                this.txtUrl.setValue(props.get_Value());
+            } else {
+                this.txtUrl.setValue("");
+            }
+            if (props.get_Text() !== null) {
+                this.txtDisplay.setValue(props.get_Text());
+                this.txtDisplay.setDisabled(false);
+            } else {
+                this.txtDisplay.setValue(this.textDefault);
+                this.txtDisplay.setDisabled(true);
+            }
+            this.isTextChanged = false;
+            this.txtTooltip.setValue(props.get_ToolTip());
+        }
+    },
+    getSettings: function () {
+        var props = new CHyperlinkProperty();
+        var url = this.txtUrl.getValue().trim();
+        if (!/(((^https?)|(^ftp)):\/\/)/i.test(url)) {
+            url = "http://" + url;
+        }
+        props.put_Value(url);
+        if (!this.txtDisplay.isDisabled() && this.isTextChanged) {
+            props.put_Text(this.txtDisplay.getValue());
+        } else {
+            props.put_Text(null);
+        }
+        props.put_ToolTip(this.txtTooltip.getValue());
+        return props;
+    },
+    textUrl: "Link to",
+    textDisplay: "Display",
+    cancelButtonText: "Cancel",
+    okButtonText: "Ok",
+    txtEmpty: "This field is required",
+    txtNotUrl: 'This field should be a URL in the format "http://www.example.com"',
+    textTooltip: "ScreenTip text",
+    textDefault: "Selected text"
+});

OfficeWeb/apps/presentationeditor/main/app/view/ImageSettings.js

@@ -0,0 +1,338 @@
+/*
+ * (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("PE.view.ImageSettings", {
+    extend: "Common.view.AbstractSettingsPanel",
+    alias: "widget.peimagesettings",
+    height: 202,
+    requires: ["Ext.ComponentQuery", "Ext.container.Container", "Ext.button.Button", "Ext.form.Label", "Ext.toolbar.Spacer", "Common.view.ImageFromUrlDialog", "PE.view.ImageSettingsAdvanced"],
+    constructor: function (config) {
+        this.callParent(arguments);
+        this.initConfig(config);
+        return this;
+    },
+    initComponent: function () {
+        this.title = this.txtTitle;
+        this._initSettings = true;
+        this._nRatio = 1;
+        this._state = {
+            Width: 0,
+            Height: 0
+        };
+        this._btnOriginalSize = Ext.create("Ext.Button", {
+            id: "image-button-original-size",
+            text: this.textOriginalSize,
+            width: 100,
+            listeners: {
+                click: this.setOriginalSize,
+                scope: this
+            }
+        });
+        this._btnInsertFromFile = Ext.create("Ext.Button", {
+            id: "image-button-from-file",
+            text: this.textFromFile,
+            width: 85,
+            listeners: {
+                click: function (btn) {
+                    if (this.api) {
+                        this.api.ChangeImageFromFile();
+                    }
+                    this.fireEvent("editcomplete", this);
+                },
+                scope: this
+            }
+        });
+        this._btnInsertFromUrl = Ext.create("Ext.Button", {
+            id: "image-button-from-url",
+            text: this.textFromUrl,
+            width: 85,
+            listeners: {
+                click: function (btn) {
+                    var w = Ext.create("Common.view.ImageFromUrlDialog");
+                    w.addListener("onmodalresult", Ext.bind(this._onOpenImageFromURL, [this, w]), false);
+                    w.addListener("close", Ext.bind(function (cnt, eOpts) {
+                        this.fireEvent("editcomplete", this);
+                    },
+                    this));
+                    w.show();
+                },
+                scope: this
+            }
+        });
+        this._SizePanel = Ext.create("Ext.container.Container", {
+            layout: "vbox",
+            layoutConfig: {
+                align: "stretch"
+            },
+            height: 61,
+            width: 200,
+            items: [{
+                xtype: "tbspacer",
+                height: 8
+            },
+            {
+                xtype: "container",
+                layout: {
+                    type: "table",
+                    columns: 2,
+                    tdAttrs: {
+                        style: "padding-right: 8px;"
+                    }
+                },
+                defaults: {
+                    xtype: "container",
+                    layout: "vbox",
+                    layoutConfig: {
+                        align: "stretch"
+                    },
+                    height: 16,
+                    style: "float:left;"
+                },
+                items: [{
+                    items: [this.labelWidth = Ext.create("Ext.form.Label", {
+                        text: this.textWidth,
+                        width: 85
+                    })]
+                },
+                {
+                    items: [this.labelHeight = Ext.create("Ext.form.Label", {
+                        text: this.textHeight,
+                        width: 85
+                    })]
+                }]
+            },
+            {
+                xtype: "tbspacer",
+                height: 7
+            },
+            this._btnOriginalSize, {
+                xtype: "tbspacer",
+                height: 3
+            }]
+        });
+        this._UrlPanel = Ext.create("Ext.container.Container", {
+            layout: "vbox",
+            layoutConfig: {
+                align: "stretch"
+            },
+            height: 36,
+            width: 200,
+            items: [{
+                xtype: "tbspacer",
+                height: 8
+            },
+            {
+                xtype: "container",
+                layout: {
+                    type: "table",
+                    columns: 2,
+                    tdAttrs: {
+                        style: "padding-right: 8px;"
+                    }
+                },
+                items: [this._btnInsertFromFile, this._btnInsertFromUrl]
+            },
+            {
+                xtype: "tbspacer",
+                height: 2
+            }]
+        });
+        this.items = [{
+            xtype: "tbspacer",
+            height: 9
+        },
+        {
+            xtype: "label",
+            style: "font-weight: bold;margin-top: 1px;",
+            text: this.textSize
+        },
+        this._SizePanel, {
+            xtype: "tbspacer",
+            height: 5
+        },
+        {
+            xtype: "tbspacer",
+            width: "100%",
+            height: 10,
+            style: "padding-right: 10px;",
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        },
+        {
+            xtype: "label",
+            style: "font-weight: bold;margin-top: 1px;",
+            text: this.textInsert
+        },
+        this._UrlPanel, {
+            xtype: "tbspacer",
+            height: 8
+        },
+        {
+            xtype: "tbspacer",
+            width: "100%",
+            height: 10,
+            style: "padding-right: 10px;",
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        },
+        {
+            xtype: "tbspacer",
+            height: 3
+        },
+        {
+            xtype: "container",
+            height: 20,
+            width: 200,
+            items: [{
+                xtype: "box",
+                html: '<div style="width:100%;text-align:center;padding-right:15px;"><label id="image-advanced-link" class="asc-advanced-link">' + this.textAdvanced + "</label></div>",
+                listeners: {
+                    afterrender: function (cmp) {
+                        document.getElementById("image-advanced-link").onclick = Ext.bind(this._openAdvancedSettings, this);
+                    },
+                    scope: this
+                }
+            }]
+        }];
+        this.addEvents("editcomplete");
+        this.callParent(arguments);
+    },
+    setOriginalSize: function () {
+        if (this.api) {
+            var imgsize = this.api.get_OriginalSizeImage();
+            if (imgsize) {
+                var w = imgsize.get_ImageWidth();
+                var h = imgsize.get_ImageHeight();
+                this.labelWidth.setText(this.textWidth + ": " + Ext.util.Format.round(Common.MetricSettings.fnRecalcFromMM(w), 1) + " " + Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]);
+                this.labelHeight.setText(this.textHeight + ": " + Ext.util.Format.round(Common.MetricSettings.fnRecalcFromMM(h), 1) + " " + Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]);
+                var properties = new CImgProperty();
+                properties.put_Width(w);
+                properties.put_Height(h);
+                this.api.ImgApply(properties);
+            }
+            this.fireEvent("editcomplete", this);
+        }
+    },
+    setApi: function (api) {
+        if (api == undefined) {
+            return;
+        }
+        this.api = api;
+    },
+    ChangeSettings: function (props) {
+        if (this._initSettings) {
+            this.createDelayedElements();
+            this._initSettings = false;
+        }
+        if (props) {
+            var value = props.get_Width();
+            if (Math.abs(this._state.Width - value) > 0.001 || (this._state.Width === null || value === null) && (this._state.Width !== value)) {
+                this.labelWidth.setText(this.textWidth + ": " + ((value !== null) ? (Ext.util.Format.round(Common.MetricSettings.fnRecalcFromMM(value), 1) + " " + Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]) : "-"));
+                this._state.Width = value;
+            }
+            value = props.get_Height();
+            if (Math.abs(this._state.Height - value) > 0.001 || (this._state.Height === null || value === null) && (this._state.Height !== value)) {
+                this.labelHeight.setText(this.textHeight + ": " + ((value !== null) ? (Ext.util.Format.round(Common.MetricSettings.fnRecalcFromMM(value), 1) + " " + Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]) : "-"));
+                this._state.Height = value;
+            }
+            this._btnOriginalSize.setDisabled(props.get_ImageUrl() === null || props.get_ImageUrl() === undefined);
+        }
+    },
+    _onOpenImageFromURL: function (mr) {
+        var self = this[0];
+        var url = this[1].txtUrl;
+        if (mr == 1 && self.api) {
+            var checkurl = url.value.replace(/ /g, "");
+            if (checkurl != "") {
+                var props = new CImgProperty();
+                props.put_ImageUrl(url.value);
+                self.api.ImgApply(props);
+            }
+        }
+    },
+    _openAdvancedSettings: function (e) {
+        var me = this;
+        var win;
+        if (me.api) {
+            var selectedElements = me.api.getSelectedElements();
+            if (selectedElements && Ext.isArray(selectedElements)) {
+                var elType, elValue;
+                for (var i = selectedElements.length - 1; i >= 0; i--) {
+                    elType = selectedElements[i].get_ObjectType();
+                    elValue = selectedElements[i].get_ObjectValue();
+                    if (c_oAscTypeSelectElement.Image == elType) {
+                        win = Ext.create("PE.view.ImageSettingsAdvanced", {});
+                        win.updateMetricUnit();
+                        win.setSettings(elValue);
+                        break;
+                    }
+                }
+            }
+        }
+        if (win) {
+            if (!me._btnOriginalSize.isDisabled()) {
+                var imgsize = this.api.get_OriginalSizeImage();
+                if (imgsize) {
+                    win.setSizeOriginal({
+                        width: imgsize.get_ImageWidth(),
+                        height: imgsize.get_ImageHeight()
+                    });
+                }
+            }
+            win.addListener("onmodalresult", Ext.bind(function (o, mr, s) {
+                if (mr == 1 && s) {
+                    me.api.ImgApply(s);
+                }
+                this.fireEvent("editcomplete", this);
+            },
+            this), false);
+            win.show();
+        }
+    },
+    updateMetricUnit: function () {
+        var value = Common.MetricSettings.fnRecalcFromMM(this._state.Width);
+        this.labelWidth.setText(this.textWidth + ": " + Ext.util.Format.round(value, 1) + " " + Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]);
+        value = Common.MetricSettings.fnRecalcFromMM(this._state.Height);
+        this.labelHeight.setText(this.textHeight + ": " + Ext.util.Format.round(value, 1) + " " + Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]);
+    },
+    createDelayedElements: function () {
+        this.updateMetricUnit();
+    },
+    textSize: "Size",
+    textKeepRatio: "Constant Proportions",
+    textWidth: "Width",
+    textHeight: "Height",
+    textOriginalSize: "Default Size",
+    textUrl: "Image URL",
+    textInsert: "Change Image",
+    textFromUrl: "From URL",
+    textFromFile: "From File",
+    textAdvanced: "Show advanced settings",
+    txtTitle: "Picture"
+});

OfficeWeb/apps/presentationeditor/main/app/view/ImageSettingsAdvanced.js

@@ -0,0 +1,484 @@
+/*
+ * (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("PE.view.ImageSettingsAdvanced", {
+    extend: "Ext.window.Window",
+    alias: "widget.peimagesettingsadvanced",
+    requires: ["Common.component.MetricSpinner", "Ext.window.Window", "Ext.util.Cookies"],
+    cls: "asc-advanced-settings-window",
+    modal: true,
+    resizable: false,
+    plain: true,
+    constrain: true,
+    height: 253,
+    width: 516,
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    _defaults: {
+        sizeOriginal: {
+            width: 0,
+            height: 0
+        },
+        sizeMax: {
+            width: 55.88,
+            height: 55.88
+        },
+        properties: null
+    },
+    initComponent: function () {
+        var me = this;
+        this.addEvents("onmodalresult");
+        this._nRatio = 1;
+        this._spnWidth = Ext.create("Common.component.MetricSpinner", {
+            id: "image-advanced-spin-width",
+            readOnly: false,
+            maxValue: 55.88,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "3 cm",
+            width: 80,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._btnRatio.pressed) {
+                        var w = field.getNumberValue();
+                        var h = w / this._nRatio;
+                        if (h > this._defaults.sizeMax.height) {
+                            h = this._defaults.sizeMax.height;
+                            w = h * this._nRatio;
+                            this._spnWidth.suspendEvents(false);
+                            this._spnWidth.setValue(w);
+                            this._spnWidth.resumeEvents();
+                        }
+                        this._spnHeight.suspendEvents(false);
+                        this._spnHeight.setValue(h);
+                        this._spnHeight.resumeEvents();
+                    }
+                },
+                this)
+            }
+        });
+        this._spnHeight = Ext.create("Common.component.MetricSpinner", {
+            id: "image-advanced-span-height",
+            readOnly: false,
+            maxValue: 55.88,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "3 cm",
+            width: 80,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    var h = field.getNumberValue(),
+                    w = null;
+                    if (this._btnRatio.pressed) {
+                        w = h * this._nRatio;
+                        if (w > this._defaults.sizeMax.width) {
+                            w = this._defaults.sizeMax.width;
+                            h = w / this._nRatio;
+                            this._spnHeight.suspendEvents(false);
+                            this._spnHeight.setValue(h);
+                            this._spnHeight.resumeEvents();
+                        }
+                        this._spnWidth.suspendEvents(false);
+                        this._spnWidth.setValue(w);
+                        this._spnWidth.resumeEvents();
+                    }
+                },
+                this)
+            }
+        });
+        this._btnOriginalSize = Ext.create("Ext.Button", {
+            id: "image-advanced-button-original-size",
+            text: this.textOriginalSize,
+            width: 100,
+            height: 22,
+            style: "margin: 0 0 0 7px",
+            listeners: {
+                click: function (o, e) {
+                    this._spnWidth.suspendEvents(false);
+                    this._spnHeight.suspendEvents(false);
+                    this._spnWidth.setValue(this._defaults.sizeOriginal.width);
+                    this._spnHeight.setValue(this._defaults.sizeOriginal.height);
+                    this._spnWidth.resumeEvents();
+                    this._spnHeight.resumeEvents();
+                    this._nRatio = this._defaults.sizeOriginal.width / this._defaults.sizeOriginal.height;
+                },
+                scope: this
+            }
+        });
+        this._btnRatio = Ext.create("Ext.Button", {
+            id: "image-advanced-button-ratio",
+            iconCls: "advanced-btn-ratio",
+            enableToggle: true,
+            width: 22,
+            height: 22,
+            style: "margin: 0 0 0 6px;",
+            tooltip: this.textKeepRatio,
+            toggleHandler: Ext.bind(function (btn) {
+                if (btn.pressed && this._spnHeight.getNumberValue() > 0) {
+                    this._nRatio = this._spnWidth.getNumberValue() / this._spnHeight.getNumberValue();
+                }
+            },
+            this)
+        });
+        this._spacer = Ext.create("Ext.toolbar.Spacer", {
+            width: "100%",
+            height: 10,
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        });
+        this._spnX = Ext.create("Common.component.MetricSpinner", {
+            id: "image-span-x",
+            readOnly: false,
+            maxValue: 55.87,
+            minValue: -55.87,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0 cm",
+            width: 85
+        });
+        this._spnY = Ext.create("Common.component.MetricSpinner", {
+            id: "image-span-y",
+            readOnly: false,
+            maxValue: 55.87,
+            minValue: -55.87,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0 cm",
+            width: 85
+        });
+        this._contPosition = Ext.create("Ext.Container", {
+            cls: "image-advanced-container",
+            padding: "0 10",
+            layout: {
+                type: "table",
+                columns: 2,
+                tdAttrs: {
+                    style: "padding-right: 8px;"
+                }
+            },
+            defaults: {
+                xtype: "container",
+                layout: "vbox",
+                layoutConfig: {
+                    align: "stretch"
+                },
+                height: 40,
+                style: "float:left;"
+            },
+            items: [{
+                width: 113,
+                items: [{
+                    xtype: "label",
+                    text: "X",
+                    width: 85
+                },
+                {
+                    xtype: "tbspacer",
+                    height: 3
+                },
+                this._spnX]
+            },
+            {
+                items: [{
+                    xtype: "label",
+                    text: "Y",
+                    width: 85
+                },
+                {
+                    xtype: "tbspacer",
+                    height: 3
+                },
+                this._spnY]
+            }]
+        });
+        this.items = [{
+            xtype: "container",
+            height: 157,
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "container",
+                width: 160,
+                padding: "18 0 0 0",
+                layout: {
+                    type: "vbox",
+                    align: "stretch"
+                },
+                defaults: {
+                    xtype: "container",
+                    padding: "0 10 0 0",
+                    layout: {
+                        type: "hbox",
+                        align: "middle",
+                        pack: "end"
+                    }
+                },
+                items: [{
+                    height: 54,
+                    items: [{
+                        xtype: "label",
+                        text: this.textSize,
+                        style: "font-weight: bold;"
+                    }]
+                },
+                {
+                    height: 80,
+                    cls: "image-advanced-container",
+                    items: [{
+                        xtype: "label",
+                        text: this.textPosition,
+                        style: "font-weight: bold;"
+                    }]
+                }]
+            },
+            {
+                xtype: "box",
+                cls: "advanced-settings-separator",
+                height: "100%",
+                width: 8
+            },
+            {
+                xtype: "container",
+                padding: "18 0 0 10",
+                width: 330,
+                layout: {
+                    type: "vbox",
+                    align: "stretch"
+                },
+                items: [{
+                    xtype: "container",
+                    padding: "0 10",
+                    layout: {
+                        type: "table",
+                        columns: 2
+                    },
+                    defaults: {
+                        xtype: "container",
+                        layout: "vbox",
+                        layoutConfig: {
+                            align: "stretch"
+                        },
+                        height: 43,
+                        style: "float:left;"
+                    },
+                    items: [{
+                        width: 108,
+                        items: [{
+                            xtype: "label",
+                            text: this.textWidth,
+                            width: 80
+                        },
+                        {
+                            xtype: "tbspacer",
+                            height: 3
+                        },
+                        {
+                            xtype: "container",
+                            width: 108,
+                            layout: {
+                                type: "hbox"
+                            },
+                            items: [this._spnWidth, this._btnRatio]
+                        }]
+                    },
+                    {
+                        width: 195,
+                        margin: "0 0 0 7",
+                        items: [{
+                            xtype: "label",
+                            text: this.textHeight,
+                            width: 80
+                        },
+                        {
+                            xtype: "tbspacer",
+                            height: 3
+                        },
+                        {
+                            xtype: "container",
+                            width: 195,
+                            layout: {
+                                type: "hbox"
+                            },
+                            items: [this._spnHeight, this._btnOriginalSize]
+                        }]
+                    }]
+                },
+                this._spacer.cloneConfig({
+                    style: "margin: 16px 0 11px 0;",
+                    height: 6
+                }), this._contPosition]
+            }]
+        },
+        this._spacer.cloneConfig({
+            style: "margin: 0 18px"
+        }), {
+            xtype: "container",
+            height: 40,
+            layout: {
+                type: "vbox",
+                align: "center",
+                pack: "center"
+            },
+            items: [{
+                xtype: "container",
+                width: 182,
+                height: 24,
+                layout: {
+                    type: "hbox",
+                    align: "middle"
+                },
+                items: [this.btnOk = Ext.widget("button", {
+                    cls: "asc-blue-button",
+                    width: 86,
+                    height: 22,
+                    margin: "0 5px 0 0",
+                    text: this.okButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", this, 1, this.getSettings());
+                            this.close();
+                        },
+                        scope: this
+                    }
+                }), this.btnCancel = Ext.widget("button", {
+                    cls: "asc-darkgray-button",
+                    width: 86,
+                    height: 22,
+                    text: this.cancelButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", this, 0);
+                            this.close();
+                        },
+                        scope: this
+                    }
+                })]
+            }]
+        }];
+        this.callParent(arguments);
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+        this._setDefaults(this._defaults.properties);
+        this.setTitle(this.textTitle);
+    },
+    setSizeOriginal: function (p) {
+        this._defaults.sizeOriginal.width = Common.MetricSettings.fnRecalcFromMM(p.width);
+        this._defaults.sizeOriginal.height = Common.MetricSettings.fnRecalcFromMM(p.height);
+    },
+    setSizeMax: function (p) {
+        this._defaults.sizeMax.width = Common.MetricSettings.fnRecalcFromMM(p.width);
+        this._defaults.sizeMax.height = Common.MetricSettings.fnRecalcFromMM(p.height);
+    },
+    setSettings: function (props) {
+        this._defaults.properties = props;
+    },
+    _setDefaults: function (props) {
+        if (props) {
+            this._spnWidth.suspendEvents(false);
+            this._spnHeight.suspendEvents(false);
+            this._spnWidth.setMaxValue(this._defaults.sizeMax.width);
+            this._spnHeight.setMaxValue(this._defaults.sizeMax.height);
+            this._spnWidth.setValue((props.get_Width() !== null) ? Common.MetricSettings.fnRecalcFromMM(props.get_Width()).toFixed(2) : "");
+            this._spnHeight.setValue((props.get_Height() !== null) ? Common.MetricSettings.fnRecalcFromMM(props.get_Height()).toFixed(2) : "");
+            this._spnWidth.resumeEvents();
+            this._spnHeight.resumeEvents();
+            if (props.get_Position()) {
+                var Position = {
+                    X: props.get_Position().get_X(),
+                    Y: props.get_Position().get_Y()
+                };
+                if (Position.X !== null && Position.X !== undefined) {
+                    this._spnX.setValue(Common.MetricSettings.fnRecalcFromMM(Position.X));
+                }
+                if (Position.Y !== null && Position.Y !== undefined) {
+                    this._spnY.setValue(Common.MetricSettings.fnRecalcFromMM(Position.Y));
+                }
+            } else {
+                this._spnX.setValue("");
+                this._spnY.setValue("");
+            }
+            if (props.get_Height() > 0) {
+                this._nRatio = props.get_Width() / props.get_Height();
+            }
+            var value = window.localStorage.getItem("pe-settings-imageratio");
+            if (value === null || parseInt(value) == 1) {
+                this._btnRatio.toggle(true);
+            }
+            this._btnOriginalSize.setDisabled(props.get_ImageUrl() === null || props.get_ImageUrl() === undefined);
+        }
+    },
+    getSettings: function () {
+        window.localStorage.setItem("pe-settings-imageratio", (this._btnRatio.pressed) ? 1 : 0);
+        var properties = new CImgProperty();
+        if (this._spnWidth.getValue() !== "") {
+            properties.put_Width(Common.MetricSettings.fnRecalcToMM(this._spnWidth.getNumberValue()));
+        }
+        if (this._spnHeight.getValue() !== "") {
+            properties.put_Height(Common.MetricSettings.fnRecalcToMM(this._spnHeight.getNumberValue()));
+        }
+        var Position = new CPosition();
+        if (this._spnX.getValue() !== "") {
+            Position.put_X(Common.MetricSettings.fnRecalcToMM(this._spnX.getNumberValue()));
+        }
+        if (this._spnY.getValue() !== "") {
+            Position.put_Y(Common.MetricSettings.fnRecalcToMM(this._spnY.getNumberValue()));
+        }
+        properties.put_Position(Position);
+        return properties;
+    },
+    updateMetricUnit: function () {
+        var spinners = this.query("commonmetricspinner");
+        if (spinners) {
+            for (var i = 0; i < spinners.length; i++) {
+                var spinner = spinners[i];
+                spinner.setDefaultUnit(Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]);
+                spinner.setStep(Common.MetricSettings.getCurrentMetric() == Common.MetricSettings.c_MetricUnits.cm ? 0.01 : 1);
+            }
+        }
+        this._defaults.sizeMax.width = Common.MetricSettings.fnRecalcFromMM(this._defaults.sizeMax.width * 10);
+        this._defaults.sizeMax.height = Common.MetricSettings.fnRecalcFromMM(this._defaults.sizeMax.height * 10);
+    },
+    textOriginalSize: "Default Size",
+    textPosition: "Position",
+    textSize: "Size",
+    textWidth: "Width",
+    textHeight: "Height",
+    textTitle: "Image - Advanced Settings",
+    textKeepRatio: "Constant Proportions",
+    cancelButtonText: "Cancel",
+    okButtonText: "Ok"
+});

OfficeWeb/apps/presentationeditor/main/app/view/InsertTableDialog.js

@@ -0,0 +1,194 @@
+/*
+ * (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("PE.view.InsertTableDialog", {
+    extend: "Ext.window.Window",
+    alias: "widget.peinserttabledialog",
+    requires: ["Ext.window.Window"],
+    modal: true,
+    closable: false,
+    resizable: false,
+    preventHeader: true,
+    plain: true,
+    height: 172,
+    width: 236,
+    padding: "20px",
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    listeners: {
+        show: function () {
+            this.udColumns.focus(false, 500);
+        }
+    },
+    initComponent: function () {
+        var me = this;
+        this.addEvents("onmodalresult");
+        this.items = [{
+            xtype: "label",
+            text: this.labelTitle || this.txtTitle,
+            style: "margin: 0 0 15px 0; font-size: 15px;"
+        },
+        {
+            xtype: "container",
+            height: 32,
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "label",
+                padding: "4px 0 0 0",
+                width: 130,
+                text: this.txtColumns
+            },
+            this.udColumns = Ext.widget("numberfield", {
+                minValue: 1,
+                maxValue: 63,
+                value: 2,
+                step: 1,
+                width: 64,
+                allowDecimals: false,
+                validateOnBlur: false,
+                msgTarget: "side",
+                minText: this.txtMinText,
+                maxText: this.txtMaxText,
+                listeners: {
+                    specialkey: Ext.bind(function (field, e) {
+                        if (e.getKey() == e.ENTER) {
+                            this.btnOk.fireEvent("click");
+                        } else {
+                            if (e.getKey() == e.ESC) {
+                                this.btnCancel.fireEvent("click");
+                            }
+                        }
+                    },
+                    this)
+                }
+            })]
+        },
+        {
+            xtype: "container",
+            height: 42,
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "label",
+                padding: "4px 0 0 0",
+                width: 130,
+                text: this.txtRows
+            },
+            this.udRows = Ext.widget("numberfield", {
+                minValue: 1,
+                maxValue: 100,
+                value: 2,
+                step: 1,
+                width: 64,
+                allowDecimals: false,
+                validateOnBlur: false,
+                msgTarget: "side",
+                minText: this.txtMinText,
+                maxText: this.txtMaxText,
+                listeners: {
+                    specialkey: Ext.bind(function (field, e) {
+                        if (e.getKey() == e.ENTER) {
+                            this.btnOk.fireEvent("click");
+                        } else {
+                            if (e.getKey() == e.ESC) {
+                                this.btnCancel.fireEvent("click");
+                            }
+                        }
+                    },
+                    this)
+                }
+            })]
+        },
+        {
+            xtype: "container",
+            height: 30,
+            layout: {
+                type: "vbox",
+                align: "center"
+            },
+            items: [{
+                xtype: "container",
+                width: 182,
+                layout: {
+                    type: "hbox",
+                    align: "middle"
+                },
+                items: [this.btnOk = Ext.widget("button", {
+                    cls: "asc-blue-button",
+                    width: 86,
+                    height: 22,
+                    margin: "0 5px 0 0",
+                    text: this.okButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            var valid_cols = this.udColumns.isValid();
+                            var valid_rows = this.udRows.isValid();
+                            if (!valid_cols || !valid_rows) {
+                                return;
+                            }
+                            this.fireEvent("onmodalresult", this, 1, [this.udColumns.value, this.udRows.value]);
+                            this.close();
+                        },
+                        scope: this
+                    }
+                }), this.btnCancel = Ext.widget("button", {
+                    cls: "asc-darkgray-button",
+                    width: 86,
+                    height: 22,
+                    text: this.cancelButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", this, 0);
+                            this.close();
+                        },
+                        scope: this
+                    }
+                })]
+            }]
+        }];
+        this.callParent(arguments);
+    },
+    txtTitle: "Table size",
+    txtColumns: "Number of Columns",
+    txtRows: "Number of Rows",
+    textInvalidRowsCols: "You need to specify valid rows and columns count.",
+    cancelButtonText: "Cancel",
+    okButtonText: "Ok",
+    txtMinText: "The minimum value for this field is {0}",
+    txtMaxText: "The maximum value for this field is {0}"
+});

OfficeWeb/apps/presentationeditor/main/app/view/MainMenu.js

@@ -0,0 +1,379 @@
+/*
+ * (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
+ *
+ */
+ var SCALE_MIN = 40;
+var SCALE_FULL = "100%";
+var SCALE_PART = 250;
+var MAINMENU_TOOLBAR_ID = "mainmenu-toolbar-id";
+var MAINMENU_PANEL_ID = "mainmenu-panel-id";
+var MAINMENU_FULL_PANEL_ID = "mainmenu-full-panel-id";
+Ext.define("PE.view.MainMenu", {
+    extend: "Ext.panel.Panel",
+    alias: "widget.pemainmenu",
+    requires: ["Ext.toolbar.Toolbar", "Ext.button.Button", "Ext.container.Container", "Ext.toolbar.Spacer"],
+    cls: "lm-style",
+    id: MAINMENU_PANEL_ID,
+    bodyCls: "lm-body",
+    width: SCALE_MIN,
+    layout: "card",
+    currentFullScaleMenuBtn: undefined,
+    fullScaledItemCnt: undefined,
+    buttonCollection: [],
+    listeners: {
+        afterrender: function () {
+            var owner = this.ownerCt;
+            if (Ext.isDefined(owner)) {
+                owner.addListener("resize", Ext.bind(this.resizeMenu, this));
+            }
+        }
+    },
+    initComponent: function () {
+        this.items = [];
+        this.dockedItems = this.buildDockedItems();
+        this.slidesBtnVisible = false;
+        this.addEvents("panelshow", "panelhide");
+        this.callParent(arguments);
+    },
+    buildDockedItems: function () {
+        var addedButtons = [],
+        item,
+        config;
+        var me = this;
+        for (var i = 0; i < this.buttonCollection.length; i++) {
+            item = this.buttonCollection[i];
+            config = {
+                xtype: "button",
+                id: item.id,
+                itemScale: item.scale,
+                tooltip: item.tooltip,
+                disabled: item.disabled === true,
+                toggleGroup: item.toggleGroup,
+                cls: "asc-main-menu-buttons",
+                iconCls: "asc-main-menu-btn " + item.cls,
+                style: "margin-bottom: 8px;"
+            };
+            if (item.scale == "modal") {
+                config.enableToggle = true;
+                config.listeners = item.listeners;
+                config.getApi = function () {
+                    return me.api;
+                };
+            } else {
+                config.isFullScale = item.scale == "full";
+                config.bodyItems = item.items;
+                config.enableToggle = true;
+                config.listeners = {
+                    click: function (btnCall) {
+                        if (btnCall.pressed) {
+                            me.openButtonMenu(btnCall);
+                        }
+                    },
+                    toggle: function (btnCall, pressed) {
+                        btnCall[pressed ? "addCls" : "removeCls"]("asc-main-menu-btn-selected");
+                        if (!pressed) {
+                            me.fireEvent("panelbeforehide");
+                            if (btnCall.isFullScale) {
+                                if (Ext.isDefined(me.fullScaledItemCnt) && me.fullScaledItemCnt.isVisible()) {
+                                    me.fullScaledItemCnt.hide();
+                                    me.currentFullScaleMenuBtn = undefined;
+                                }
+                                var panel = me.fullScaledItemCnt;
+                            } else {
+                                window.localStorage.setItem("pe-mainmenu-width", me.getWidth());
+                                panel = Ext.getCmp(btnCall.bodyCardId);
+                                me.setWidth(SCALE_MIN);
+                            }
+                            me.fireEvent("panelhide", panel, btnCall.isFullScale);
+                        }
+                    }
+                };
+            }
+            addedButtons.push(config);
+        }
+        this.mainToolbar = Ext.create("Ext.toolbar.Toolbar", {
+            cls: "lm-default-toolbar",
+            width: this.width || SCALE_MIN,
+            vertical: true,
+            dock: "left",
+            defaultType: "button",
+            items: addedButtons,
+            style: "padding-top:15px;",
+            listeners: {
+                afterrender: function (cmp) {
+                    cmp.getEl().on("keydown", me._onContainerKeyDown, me, {
+                        button: undefined
+                    });
+                }
+            }
+        });
+        return this.mainToolbar;
+    },
+    closeFullScaleMenu: function () {
+        if (Ext.isDefined(this.currentFullScaleMenuBtn)) {
+            this.currentFullScaleMenuBtn.toggle(false);
+        }
+    },
+    openButtonMenu: function (btn) {
+        this.fireEvent("panelbeforeshow", btn.isFullScale);
+        if (Ext.isNumber(btn.itemScale)) {
+            var saved_width = window.localStorage.getItem("pe-mainmenu-width");
+            saved_width = saved_width ? parseInt(saved_width) : btn.itemScale;
+            this.setSize({
+                width: saved_width
+            });
+        } else {
+            this.setWidth(btn.isFullScale ? SCALE_MIN : SCALE_PART);
+        }
+        if (btn.isFullScale) {
+            var ownerEl = this.ownerCt.el;
+            var startPos = ownerEl.getXY();
+            var panel = this.fullScaledItemCnt;
+            this.currentFullScaleMenuBtn = btn;
+            this.fullScaledItemCnt.setSize(ownerEl.getWidth() - SCALE_MIN, ownerEl.getHeight());
+            this.fullScaledItemCnt.setPosition(startPos[0] + this.width, startPos[1]);
+            this.fullScaledItemCnt.show();
+            this.fullScaledItemCnt.getLayout().setActiveItem(Ext.getCmp(btn.bodyCardId));
+        } else {
+            panel = Ext.getCmp(btn.bodyCardId);
+            this.getLayout().setActiveItem(btn.bodyCardId);
+        }
+        this.doComponentLayout();
+        this.fireEvent("panelshow", panel, btn.isFullScale);
+        Common.component.Analytics.trackEvent("Main Menu", btn.tooltip);
+    },
+    resizeMenu: function (Component, adjWidth, adjHeight, eOpts) {
+        if (Ext.isDefined(this.fullScaledItemCnt) && this.fullScaledItemCnt.isVisible()) {
+            var ownerEl = this.ownerCt.el;
+            var startPos = ownerEl.getXY();
+            this.fullScaledItemCnt.setSize(adjWidth - SCALE_MIN, adjHeight);
+            this.fullScaledItemCnt.setPosition(startPos[0] + this.width, startPos[1]);
+        } else {
+            for (var i = 0; i < this.items.length; i++) {
+                if (adjHeight != this.items.items[i].getHeight()) {
+                    this.items.items[i].setHeight(adjHeight);
+                }
+            }
+        }
+        this.doComponentLayout();
+    },
+    setApi: function (o) {
+        this.api = o;
+        if (this.api) {
+            this.api.asc_registerCallback("asc_onThumbnailsShow", Ext.bind(this.onThumbnailsShow, this));
+            this.api.asc_registerCallback("asc_onCoAuthoringChatReceiveMessage", Ext.bind(this.onCoAuthoringChatReceiveMessage, this));
+            this.api.asc_registerCallback("asc_onСoAuthoringDisconnect", Ext.bind(this.onCoAuthoringDisconnect, this));
+            this.api.asc_registerCallback("asc_onGetLicense", Ext.bind(this.onGetLicense, this));
+            this.api.asc_getLicense();
+        }
+        return this;
+    },
+    selectMenu: function (clsname, ignorcls) {
+        var btnCall, btn, i, panel;
+        var tbMain = this.mainToolbar;
+        for (i = tbMain.items.length; i > 0; i--) {
+            btnCall = tbMain.items.items[i - 1];
+            if (btnCall.isVisible() && btnCall.iconCls && !(btnCall.iconCls.search(clsname) < 0)) {
+                break;
+            } else {
+                btnCall = undefined;
+            }
+        }
+        if (btnCall && !btnCall.pressed) {
+            if (Ext.isDefined(tbMain)) {
+                for (i = 0; i < tbMain.items.length; i++) {
+                    btn = tbMain.items.items[i];
+                    if (Ext.isDefined(btn) && btn.componentCls === "x-btn") {
+                        if (btn.id != btnCall.id && btn.pressed && (ignorcls === undefined || btn.iconCls.search(ignorcls) < 0)) {
+                            btn.toggle(false);
+                        }
+                    }
+                }
+            }
+            btnCall.toggle(true);
+            if (btnCall.itemScale != "modal") {
+                this.openButtonMenu(btnCall);
+            }
+        }
+    },
+    clearSelection: function (exclude) {
+        var btn, i;
+        var tbMain = this.mainToolbar;
+        if (Ext.isDefined(tbMain)) {
+            for (i = 0; i < tbMain.items.length; i++) {
+                btn = tbMain.items.items[i];
+                if (Ext.isDefined(btn) && btn.componentCls === "x-btn") {
+                    if (btn.pressed) {
+                        if (exclude && btn.iconCls) {
+                            var next = false;
+                            for (var j = 0; j < exclude.length; j++) {
+                                if (! (btn.iconCls.search(exclude[j]) < 0)) {
+                                    next = true;
+                                    break;
+                                }
+                            }
+                            if (next) {
+                                continue;
+                            }
+                        }
+                        btn.toggle(false);
+                    }
+                }
+            }
+        }
+    },
+    disableMenu: function (btns, disabled) {
+        var btn, i;
+        var tbMain = this.mainToolbar;
+        if (Ext.isDefined(tbMain)) {
+            var apply_all = false;
+            typeof btns == "string" && (btns == "all" ? apply_all = true : btns = [btns]);
+            for (i = 0; i < tbMain.items.length; i++) {
+                btn = tbMain.items.items[i];
+                if (Ext.isDefined(btn) && btn.componentCls === "x-btn") {
+                    if (apply_all || !(btns.indexOf(btn.id) < 0)) {
+                        btn.pressed && btn.toggle(false);
+                        btn.setDisabled(disabled);
+                    }
+                }
+            }
+        }
+    },
+    onThumbnailsShow: function (isShow) {
+        if (isShow) {
+            this.selectMenu("menuSlides", "menuSearch");
+        } else {
+            this.clearSelection(["menuSearch"]);
+        }
+        this.slidesBtnVisible = isShow;
+    },
+    selectThumbnailsBtn: function (isVisible) {
+        var btnCall, i;
+        var tbMain = this.mainToolbar;
+        for (i = tbMain.items.length; i > 0; i--) {
+            btnCall = tbMain.items.items[i - 1];
+            if (btnCall.iconCls && !(btnCall.iconCls.search("menuSlides") < 0)) {
+                btnCall.toggle(isVisible && this.slidesBtnVisible, true);
+                if (this.api) {
+                    this.api.ShowThumbnails(isVisible && this.slidesBtnVisible);
+                }
+                break;
+            }
+        }
+    },
+    onCoAuthoringChatReceiveMessage: function (messages) {
+        var mainMenu = Ext.getCmp("view-main-menu");
+        if (mainMenu) {
+            var activeStep = mainMenu.getLayout().getActiveItem().down("container");
+            if (activeStep) {
+                var btnChat = Ext.getCmp("id-menu-chat");
+                if (btnChat) {
+                    if (!activeStep.isXType("commonchatpanel") || activeStep.getWidth() < 1) {
+                        btnChat.addCls("notify");
+                    }
+                }
+            }
+        }
+    },
+    onCoAuthoringDisconnect: function () {
+        this.disableMenu(["id-menu-comments", "id-menu-chat"], true);
+    },
+    onGetLicense: function (license) {
+        var panel = Ext.getCmp("main-menu-about");
+        if (panel) {
+            panel.setLicInfo(license);
+        }
+    },
+    createDelayedElements: function () {
+        var me = this;
+        this.hkEsc = new Ext.util.KeyMap(document, [{
+            key: Ext.EventObject.ESC,
+            fn: function (key, e) {
+                if (Ext.isDefined(me.currentFullScaleMenuBtn)) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    me.clearSelection(["menuSlides"]);
+                }
+            }
+        }]);
+        var addedItems = [],
+        addedButtons = this.mainToolbar.items.items;
+        for (var i = 0; i < this.buttonCollection.length; i++) {
+            var item = this.buttonCollection[i],
+            cardId = -1;
+            if (item.scale == "modal") {
+                continue;
+            }
+            if (item.scale != "full") {
+                var cardPanel = Ext.create("Ext.container.Container", {
+                    items: item.items,
+                    menubutton: addedButtons[i],
+                    listeners: {
+                        afterrender: function (cmp) {
+                            cmp.getEl().on("keydown", me._onContainerKeyDown, me, {
+                                button: cmp.menubutton
+                            });
+                        }
+                    }
+                });
+                addedButtons[i].bodyCardId = cardPanel.getId();
+                addedItems.push(cardPanel);
+            } else {
+                if (this.fullScaledItemCnt === undefined) {
+                    this.fullScaledItemCnt = Ext.create("Ext.container.Container", {
+                        id: MAINMENU_FULL_PANEL_ID,
+                        layout: "card",
+                        shadow: false,
+                        floating: true,
+                        toFrontOnShow: true,
+                        closeMenu: function () {
+                            me.closeFullScaleMenu();
+                        },
+                        getApi: function () {
+                            return me.api;
+                        }
+                    });
+                }
+                addedButtons[i].bodyCardId = item.items[0].id;
+                this.fullScaledItemCnt.add(item.items);
+            }
+        }
+        this.add(addedItems);
+    },
+    _onContainerKeyDown: function (event, target, opt) {
+        if (event.getKey() == event.ESC) {
+            if (opt.button) {
+                opt.button.toggle(false);
+            } else {
+                this.clearSelection(["menuSlides"]);
+            }
+        }
+    }
+});

OfficeWeb/apps/presentationeditor/main/app/view/ParagraphSettings.js

@@ -0,0 +1,438 @@
+/*
+ * (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("PE.view.ParagraphSettings", {
+    extend: "Common.view.AbstractSettingsPanel",
+    alias: "widget.peparagraphsettings",
+    height: 176,
+    requires: ["Ext.DomHelper", "Ext.button.Button", "Ext.form.Label", "Ext.container.Container", "Ext.toolbar.Spacer", "Common.component.MetricSpinner", "Ext.form.field.ComboBox", "PE.view.ParagraphSettingsAdvanced"],
+    constructor: function (config) {
+        this.callParent(arguments);
+        this.initConfig(config);
+        return this;
+    },
+    setApi: function (o) {
+        this.api = o;
+        if (o) {
+            this.api.asc_registerCallback("asc_onParaSpacingLine", Ext.bind(this._onLineSpacing, this));
+        }
+    },
+    initComponent: function () {
+        this.title = this.txtTitle;
+        this._initSettings = true;
+        this._state = {
+            LineRuleIdx: 1,
+            LineHeight: 1.5,
+            LineSpacingBefore: 0,
+            LineSpacingAfter: 0.35
+        };
+        this._arrLineRule = [this.textAtLeast, this.textAuto, this.textExact];
+        this._arrLineDefaults = [[5, "cm", 0.03, 0.01], [1, "", 0.5, 0.01], [5, "cm", 0.03, 0.01]];
+        this.cmbLineRule = Ext.create("Ext.form.field.ComboBox", {
+            id: "table-combo-line-rule",
+            width: 85,
+            editable: false,
+            store: this._arrLineRule,
+            mode: "local",
+            triggerAction: "all",
+            listeners: {
+                select: Ext.bind(function (combo, records, eOpts) {
+                    if (this.api) {
+                        this.api.put_PrLineSpacing(records[0].index, this._arrLineDefaults[records[0].index][0]);
+                    }
+                    this.numLineHeight.setDefaultUnit(this._arrLineDefaults[records[0].index][1]);
+                    this.numLineHeight.setMinValue(this._arrLineDefaults[records[0].index][2]);
+                    this.numLineHeight.setStep(this._arrLineDefaults[records[0].index][3]);
+                    this.fireEvent("editcomplete", this);
+                },
+                this)
+            }
+        });
+        this.cmbLineRule.setValue(this._arrLineRule[1]);
+        this.controls.push(this.cmbLineRule);
+        this.numLineHeight = Ext.widget("commonmetricspinner", {
+            id: "paragraph-spin-line-height",
+            readOnly: false,
+            step: 0.01,
+            width: 85,
+            value: "1.5",
+            defaultUnit: "",
+            maxValue: 132,
+            minValue: 0,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this.cmbLineRule.getValue() == "") {
+                        return;
+                    }
+                    var type = c_paragraphLinerule.LINERULE_AUTO;
+                    for (var i = 0; i < this._arrLineRule.length; i++) {
+                        if (this.cmbLineRule.getValue() == this._arrLineRule[i]) {
+                            type = i;
+                            break;
+                        }
+                    }
+                    if (this.api) {
+                        this.api.put_PrLineSpacing(type, (type == c_paragraphLinerule.LINERULE_AUTO) ? field.getNumberValue() : Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                    }
+                    this.fireEvent("editcomplete", this);
+                },
+                this)
+            }
+        });
+        this.controls.push(this.numLineHeight);
+        this.numSpacingBefore = Ext.create("Common.component.MetricSpinner", {
+            id: "paragraph-spin-spacing-before",
+            readOnly: false,
+            step: 0.1,
+            width: 85,
+            defaultUnit: "cm",
+            value: "0 cm",
+            maxValue: 55.88,
+            minValue: 0,
+            allowAuto: true,
+            autoText: this.txtAutoText,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this.api) {
+                        var num = field.getNumberValue();
+                        if (num < 0) {
+                            this.api.put_LineSpacingBeforeAfter(0, -1);
+                        } else {
+                            this.api.put_LineSpacingBeforeAfter(0, Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                        }
+                    }
+                    this.fireEvent("editcomplete", this);
+                },
+                this)
+            }
+        });
+        this.controls.push(this.numSpacingBefore);
+        this.numSpacingAfter = Ext.create("Common.component.MetricSpinner", {
+            id: "paragraph-spin-spacing-after",
+            readOnly: false,
+            step: 0.1,
+            width: 85,
+            defaultUnit: "cm",
+            value: "0.35 cm",
+            maxValue: 55.88,
+            minValue: 0,
+            allowAuto: true,
+            autoText: this.txtAutoText,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this.api) {
+                        var num = field.getNumberValue();
+                        if (num < 0) {
+                            this.api.put_LineSpacingBeforeAfter(1, -1);
+                        } else {
+                            this.api.put_LineSpacingBeforeAfter(1, Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                        }
+                    }
+                    this.fireEvent("editcomplete", this);
+                },
+                this)
+            }
+        });
+        this.controls.push(this.numSpacingAfter);
+        this._SpacingPanel = Ext.create("Ext.container.Container", {
+            layout: "vbox",
+            layoutConfig: {
+                align: "stretch"
+            },
+            height: 107,
+            width: 190,
+            items: [{
+                xtype: "tbspacer",
+                height: 8
+            },
+            {
+                xtype: "container",
+                height: 41,
+                layout: {
+                    type: "table",
+                    columns: 2,
+                    tdAttrs: {
+                        style: "padding-right: 8px;vertical-align: middle;"
+                    }
+                },
+                items: [{
+                    xtype: "label",
+                    text: this.strLineHeight,
+                    style: "display: block;",
+                    width: 85
+                },
+                {
+                    xtype: "label",
+                    text: this.textAt,
+                    style: "display: block;",
+                    width: 85
+                },
+                {
+                    xtype: "tbspacer",
+                    height: 2
+                },
+                {
+                    xtype: "tbspacer",
+                    height: 2
+                },
+                this.cmbLineRule, this.numLineHeight]
+            },
+            {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "container",
+                layout: {
+                    type: "table",
+                    columns: 2,
+                    tdAttrs: {
+                        style: "padding-right: 8px;"
+                    }
+                },
+                defaults: {
+                    xtype: "container",
+                    layout: "vbox",
+                    layoutConfig: {
+                        align: "stretch"
+                    },
+                    height: 48,
+                    style: "float:left;"
+                },
+                items: [{
+                    items: [{
+                        xtype: "label",
+                        text: this.strSpacingBefore,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.numSpacingBefore]
+                },
+                {
+                    items: [{
+                        xtype: "label",
+                        text: this.strSpacingAfter,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.numSpacingAfter]
+                }]
+            }]
+        });
+        this.items = [{
+            xtype: "tbspacer",
+            height: 9
+        },
+        {
+            xtype: "label",
+            style: "font-weight: bold;margin-top: 1px;",
+            text: this.strParagraphSpacing
+        },
+        this._SpacingPanel, {
+            xtype: "tbspacer",
+            height: 3
+        },
+        {
+            xtype: "tbspacer",
+            width: "100%",
+            height: 10,
+            style: "padding-right: 10px;",
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        },
+        {
+            xtype: "tbspacer",
+            height: 3
+        },
+        {
+            xtype: "container",
+            height: 20,
+            width: "100%",
+            items: [{
+                xtype: "box",
+                html: '<div style="width:100%;text-align:center;padding-right:15px;"><label id="paragraph-advanced-link" class="asc-advanced-link">' + this.textAdvanced + "</label></div>",
+                listeners: {
+                    afterrender: function (cmp) {
+                        document.getElementById("paragraph-advanced-link").onclick = Ext.bind(this._openAdvancedSettings, this);
+                    },
+                    scope: this
+                }
+            }]
+        }];
+        this.addEvents("editcomplete");
+        this.callParent(arguments);
+    },
+    _onLineSpacing: function (value) {
+        var linerule = value.get_LineRule();
+        var line = value.get_Line();
+        this.numLineHeight.suspendEvents(false);
+        this.cmbLineRule.suspendEvents(false);
+        if (this._state.LineRuleIdx !== linerule) {
+            this.cmbLineRule.setValue((linerule !== null) ? this._arrLineRule[linerule] : "");
+            this.numLineHeight.setMinValue(this._arrLineDefaults[(linerule !== null) ? linerule : 1][2]);
+            this.numLineHeight.setDefaultUnit(this._arrLineDefaults[(linerule !== null) ? linerule : 1][1]);
+            this.numLineHeight.setStep(this._arrLineDefaults[(linerule !== null) ? linerule : 1][3]);
+            this._state.LineRuleIdx = linerule;
+        }
+        if (Math.abs(this._state.LineHeight - line) > 0.001 || (this._state.LineHeight === null || line === null) && (this._state.LineHeight !== line)) {
+            var val = "";
+            if (linerule == c_paragraphLinerule.LINERULE_AUTO) {
+                val = line;
+            } else {
+                if (linerule !== null && line !== null) {
+                    val = Common.MetricSettings.fnRecalcFromMM(line);
+                }
+            }
+            this.numLineHeight.setValue((val !== null) ? val : "");
+            this._state.LineHeight = line;
+        }
+        this.numLineHeight.resumeEvents();
+        this.cmbLineRule.resumeEvents();
+    },
+    ChangeSettings: function (prop) {
+        if (this._initSettings) {
+            this.createDelayedElements();
+            this._initSettings = false;
+        }
+        if (prop) {
+            this.SuspendEvents();
+            var Spacing = {
+                Line: prop.get_Spacing().get_Line(),
+                Before: prop.get_Spacing().get_Before(),
+                After: prop.get_Spacing().get_After(),
+                LineRule: prop.get_Spacing().get_LineRule()
+            };
+            if (this._state.LineRuleIdx !== Spacing.LineRule) {
+                this.cmbLineRule.setValue((Spacing.LineRule !== null) ? this._arrLineRule[Spacing.LineRule] : "");
+                this.numLineHeight.setMinValue(this._arrLineDefaults[(Spacing.LineRule !== null) ? Spacing.LineRule : 1][2]);
+                this.numLineHeight.setDefaultUnit(this._arrLineDefaults[(Spacing.LineRule !== null) ? Spacing.LineRule : 1][1]);
+                this.numLineHeight.setStep(this._arrLineDefaults[(Spacing.LineRule !== null) ? Spacing.LineRule : 1][3]);
+                this._state.LineRuleIdx = Spacing.LineRule;
+            }
+            if (Math.abs(this._state.LineHeight - Spacing.Line) > 0.001 || (this._state.LineHeight === null || Spacing.Line === null) && (this._state.LineHeight !== Spacing.Line)) {
+                var val = "";
+                if (Spacing.LineRule == c_paragraphLinerule.LINERULE_AUTO) {
+                    val = Spacing.Line;
+                } else {
+                    if (Spacing.LineRule !== null && Spacing.Line !== null) {
+                        val = Common.MetricSettings.fnRecalcFromMM(Spacing.Line);
+                    }
+                }
+                this.numLineHeight.setValue((val !== null) ? val : "");
+                this._state.LineHeight = Spacing.Line;
+            }
+            if (Math.abs(this._state.LineSpacingBefore - Spacing.Before) > 0.001 || (this._state.LineSpacingBefore === null || Spacing.Before === null) && (this._state.LineSpacingBefore !== Spacing.Before)) {
+                this.numSpacingBefore.setValue((Spacing.Before !== null) ? ((Spacing.Before < 0) ? Spacing.Before : Common.MetricSettings.fnRecalcFromMM(Spacing.Before)) : "");
+                this._state.LineSpacingBefore = Spacing.Before;
+            }
+            if (Math.abs(this._state.LineSpacingAfter - Spacing.After) > 0.001 || (this._state.LineSpacingAfter === null || Spacing.After === null) && (this._state.LineSpacingAfter !== Spacing.After)) {
+                this.numSpacingAfter.setValue((Spacing.After !== null) ? ((Spacing.After < 0) ? Spacing.After : Common.MetricSettings.fnRecalcFromMM(Spacing.After)) : "");
+                this._state.LineSpacingAfter = Spacing.After;
+            }
+            this.ResumeEvents();
+        }
+    },
+    updateMetricUnit: function () {
+        var spinners = this.query("commonmetricspinner");
+        if (spinners) {
+            for (var i = 0; i < spinners.length; i++) {
+                var spinner = spinners[i];
+                if (spinner.id == "paragraph-spin-line-height") {
+                    continue;
+                }
+                spinner.setDefaultUnit(Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]);
+                spinner.setStep(Common.MetricSettings.getCurrentMetric() == Common.MetricSettings.c_MetricUnits.cm ? 0.01 : 1);
+            }
+        }
+        this._arrLineDefaults[2][1] = this._arrLineDefaults[0][1] = Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()];
+        this._arrLineDefaults[2][2] = this._arrLineDefaults[0][2] = parseFloat(Common.MetricSettings.fnRecalcFromMM(0.3).toFixed(2));
+        this._arrLineDefaults[2][3] = this._arrLineDefaults[0][3] = (Common.MetricSettings.getCurrentMetric() == Common.MetricSettings.c_MetricUnits.cm) ? 0.01 : 1;
+        if (this._state.LineRuleIdx !== null) {
+            this.numLineHeight.setDefaultUnit(this._arrLineDefaults[this._state.LineRuleIdx][1]);
+            this.numLineHeight.setStep(this._arrLineDefaults[this._state.LineRuleIdx][3]);
+        }
+    },
+    _openAdvancedSettings: function (e) {
+        var me = this;
+        var win;
+        if (me.api) {
+            var selectedElements = me.api.getSelectedElements();
+            if (selectedElements && Ext.isArray(selectedElements)) {
+                var elType, elValue;
+                for (var i = selectedElements.length - 1; i >= 0; i--) {
+                    elType = selectedElements[i].get_ObjectType();
+                    elValue = selectedElements[i].get_ObjectValue();
+                    if (c_oAscTypeSelectElement.Paragraph == elType) {
+                        win = Ext.create("PE.view.ParagraphSettingsAdvanced");
+                        win.updateMetricUnit();
+                        win.setSettings({
+                            paragraphProps: elValue,
+                            api: me.api
+                        });
+                        break;
+                    }
+                }
+            }
+        }
+        if (win) {
+            win.addListener("onmodalresult", Ext.bind(function (o, mr, s) {
+                if (mr == 1 && s) {
+                    me.api.paraApply(s.paragraphProps);
+                }
+            },
+            this), false);
+            win.addListener("close", function () {
+                me.fireEvent("editcomplete", me);
+            },
+            false);
+            win.show();
+        }
+    },
+    createDelayedElements: function () {
+        this.updateMetricUnit();
+    },
+    strParagraphSpacing: "Spacing",
+    strLineHeight: "Line Spacing",
+    strSpacingBefore: "Before",
+    strSpacingAfter: "After",
+    textAuto: "Multiple",
+    textAtLeast: "At least",
+    textExact: "Exactly",
+    textAt: "At",
+    txtTitle: "Paragraph",
+    txtAutoText: "Auto",
+    textAdvanced: "Show advanced settings"
+});

OfficeWeb/apps/presentationeditor/main/app/view/ParagraphSettingsAdvanced.js

@@ -0,0 +1,964 @@
+/*
+ * (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("PE.view.ParagraphSettingsAdvanced", {
+    extend: "Ext.window.Window",
+    alias: "widget.peparagraphsettingsadvanced",
+    requires: ["Ext.Array", "Ext.form.field.ComboBox", "Ext.window.Window", "Common.component.ThemeColorPalette", "Common.component.MetricSpinner", "Common.component.IndeterminateCheckBox", "Common.plugin.GridScrollPane", "Ext.grid.Panel"],
+    cls: "asc-advanced-settings-window",
+    modal: true,
+    resizable: false,
+    plain: true,
+    constrain: true,
+    height: 390,
+    width: 516,
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    initComponent: function () {
+        var me = this;
+        this.addEvents("onmodalresult");
+        this._changedProps = null;
+        this.checkGroup = 0;
+        this._noApply = true;
+        this._tabListChanged = false;
+        this.numFirstLine = Ext.create("Common.component.MetricSpinner", {
+            id: "paragraphadv-spin-first-line",
+            readOnly: false,
+            step: 0.1,
+            width: 85,
+            defaultUnit: "cm",
+            value: "0 cm",
+            maxValue: 55.87,
+            minValue: -55.87,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps) {
+                        if (this._changedProps.get_Ind() === null || this._changedProps.get_Ind() === undefined) {
+                            this._changedProps.put_Ind(new CParagraphInd());
+                        }
+                        this._changedProps.get_Ind().put_FirstLine(Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                    }
+                },
+                this)
+            }
+        });
+        this.numIndentsLeft = Ext.widget("commonmetricspinner", {
+            id: "paragraphadv-spin-indent-left",
+            readOnly: false,
+            step: 0.1,
+            width: 85,
+            defaultUnit: "cm",
+            value: "0 cm",
+            maxValue: 55.87,
+            minValue: -55.87,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps) {
+                        if (this._changedProps.get_Ind() === null || this._changedProps.get_Ind() === undefined) {
+                            this._changedProps.put_Ind(new CParagraphInd());
+                        }
+                        this._changedProps.get_Ind().put_Left(Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                    }
+                },
+                this)
+            }
+        });
+        this.numIndentsRight = Ext.widget("commonmetricspinner", {
+            id: "paragraphadv-spin-indent-right",
+            readOnly: false,
+            step: 0.1,
+            width: 85,
+            defaultUnit: "cm",
+            value: "0 cm",
+            maxValue: 55.87,
+            minValue: -55.87,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps) {
+                        if (this._changedProps.get_Ind() === null || this._changedProps.get_Ind() === undefined) {
+                            this._changedProps.put_Ind(new CParagraphInd());
+                        }
+                        this._changedProps.get_Ind().put_Right(Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                    }
+                },
+                this)
+            }
+        });
+        this._spacer = Ext.create("Ext.toolbar.Spacer", {
+            width: "100%",
+            height: 10,
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        });
+        this.chStrike = Ext.create("Common.component.IndeterminateCheckBox", {
+            id: "paragraphadv-checkbox-strike",
+            width: 140,
+            boxLabel: this.strStrike,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps && this.checkGroup != 1) {
+                        this._changedProps.put_Strikeout(field.getValue() == "checked");
+                    }
+                    this.checkGroup = 0;
+                    if (field.getValue() == "checked") {
+                        this.checkGroup = 1;
+                        this.chDoubleStrike.setValue(0);
+                        if (this._changedProps) {
+                            this._changedProps.put_DStrikeout(false);
+                        }
+                        this.checkGroup = 0;
+                    }
+                    if (this.api && !this._noApply) {
+                        var properties = (this._originalProps) ? this._originalProps : new CParagraphProp();
+                        properties.put_Strikeout(field.getValue() == "checked");
+                        properties.put_DStrikeout(this.chDoubleStrike.getValue() == "checked");
+                        this.api.SetDrawImagePlaceParagraph("paragraphadv-font-img", properties);
+                    }
+                },
+                this)
+            }
+        });
+        this.chDoubleStrike = Ext.create("Common.component.IndeterminateCheckBox", {
+            id: "paragraphadv-checkbox-double-strike",
+            width: 140,
+            boxLabel: this.strDoubleStrike,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps && this.checkGroup != 1) {
+                        this._changedProps.put_DStrikeout(field.getValue() == "checked");
+                    }
+                    this.checkGroup = 0;
+                    if (field.getValue() == "checked") {
+                        this.checkGroup = 1;
+                        this.chStrike.setValue(0);
+                        if (this._changedProps) {
+                            this._changedProps.put_Strikeout(false);
+                        }
+                        this.checkGroup = 0;
+                    }
+                    if (this.api && !this._noApply) {
+                        var properties = (this._originalProps) ? this._originalProps : new CParagraphProp();
+                        properties.put_DStrikeout(field.getValue() == "checked");
+                        properties.put_Strikeout(this.chStrike.getValue() == "checked");
+                        this.api.SetDrawImagePlaceParagraph("paragraphadv-font-img", properties);
+                    }
+                },
+                this)
+            }
+        });
+        this.chSuperscript = Ext.create("Common.component.IndeterminateCheckBox", {
+            id: "paragraphadv-checkbox-superscript",
+            width: 140,
+            boxLabel: this.strSuperscript,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps && this.checkGroup != 2) {
+                        this._changedProps.put_Superscript(field.getValue() == "checked");
+                    }
+                    this.checkGroup = 0;
+                    if (field.getValue() == "checked") {
+                        this.checkGroup = 2;
+                        this.chSubscript.setValue(0);
+                        if (this._changedProps) {
+                            this._changedProps.put_Subscript(false);
+                        }
+                        this.checkGroup = 0;
+                    }
+                    if (this.api && !this._noApply) {
+                        var properties = (this._originalProps) ? this._originalProps : new CParagraphProp();
+                        properties.put_Superscript(field.getValue() == "checked");
+                        properties.put_Subscript(this.chSubscript.getValue() == "checked");
+                        this.api.SetDrawImagePlaceParagraph("paragraphadv-font-img", properties);
+                    }
+                },
+                this)
+            }
+        });
+        this.chSubscript = Ext.create("Common.component.IndeterminateCheckBox", {
+            id: "paragraphadv-checkbox-subscript",
+            width: 140,
+            boxLabel: this.strSubscript,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps && this.checkGroup != 2) {
+                        this._changedProps.put_Subscript(field.getValue() == "checked");
+                    }
+                    this.checkGroup = 0;
+                    if (field.getValue() == "checked") {
+                        this.checkGroup = 2;
+                        this.chSuperscript.setValue(0);
+                        if (this._changedProps) {
+                            this._changedProps.put_Superscript(false);
+                        }
+                        this.checkGroup = 0;
+                    }
+                    if (this.api && !this._noApply) {
+                        var properties = (this._originalProps) ? this._originalProps : new CParagraphProp();
+                        properties.put_Subscript(field.getValue() == "checked");
+                        properties.put_Superscript(this.chSuperscript.getValue() == "checked");
+                        this.api.SetDrawImagePlaceParagraph("paragraphadv-font-img", properties);
+                    }
+                },
+                this)
+            }
+        });
+        this.chSmallCaps = Ext.create("Common.component.IndeterminateCheckBox", {
+            id: "paragraphadv-checkbox-small-caps",
+            width: 140,
+            boxLabel: this.strSmallCaps,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps && this.checkGroup != 3) {
+                        this._changedProps.put_SmallCaps(field.getValue() == "checked");
+                    }
+                    this.checkGroup = 0;
+                    if (field.getValue() == "checked") {
+                        this.checkGroup = 3;
+                        this.chAllCaps.setValue(0);
+                        if (this._changedProps) {
+                            this._changedProps.put_AllCaps(false);
+                        }
+                        this.checkGroup = 0;
+                    }
+                    if (this.api && !this._noApply) {
+                        var properties = (this._originalProps) ? this._originalProps : new CParagraphProp();
+                        properties.put_SmallCaps(field.getValue() == "checked");
+                        properties.put_AllCaps(this.chAllCaps.getValue() == "checked");
+                        this.api.SetDrawImagePlaceParagraph("paragraphadv-font-img", properties);
+                    }
+                },
+                this)
+            }
+        });
+        this.chAllCaps = Ext.create("Common.component.IndeterminateCheckBox", {
+            id: "paragraphadv-checkbox-all-caps",
+            width: 140,
+            boxLabel: this.strAllCaps,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps && this.checkGroup != 3) {
+                        this._changedProps.put_AllCaps(field.getValue() == "checked");
+                    }
+                    this.checkGroup = 0;
+                    if (field.getValue() == "checked") {
+                        this.checkGroup = 3;
+                        this.chSmallCaps.setValue(0);
+                        if (this._changedProps) {
+                            this._changedProps.put_SmallCaps(false);
+                        }
+                        this.checkGroup = 0;
+                    }
+                    if (this.api && !this._noApply) {
+                        var properties = (this._originalProps) ? this._originalProps : new CParagraphProp();
+                        properties.put_AllCaps(field.getValue() == "checked");
+                        properties.put_SmallCaps(this.chSmallCaps.getValue() == "checked");
+                        this.api.SetDrawImagePlaceParagraph("paragraphadv-font-img", properties);
+                    }
+                },
+                this)
+            }
+        });
+        this.numSpacing = Ext.create("Common.component.MetricSpinner", {
+            id: "paragraphadv-spin-spacing",
+            readOnly: false,
+            step: 0.01,
+            width: 100,
+            defaultUnit: "cm",
+            value: "0 cm",
+            maxValue: 55.87,
+            minValue: -55.87,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps) {
+                        this._changedProps.put_TextSpacing(Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                    }
+                    if (this.api && !this._noApply) {
+                        var properties = (this._originalProps) ? this._originalProps : new CParagraphProp();
+                        properties.put_TextSpacing(Common.MetricSettings.fnRecalcToMM(field.getNumberValue()));
+                        this.api.SetDrawImagePlaceParagraph("paragraphadv-font-img", properties);
+                    }
+                },
+                this)
+            }
+        });
+        this.fontImage = Ext.create("Ext.container.Container", {
+            id: "paragraphadv-font-img",
+            width: "100%",
+            height: 80,
+            style: "background-color:#ffffff; border:1px solid #CDCDCD;"
+        });
+        this.numTab = Ext.widget("commonmetricspinner", {
+            id: "paragraphadv-spin-tab",
+            readOnly: false,
+            step: 0.1,
+            width: 180,
+            defaultUnit: "cm",
+            value: "1.25 cm",
+            maxValue: 55.87,
+            minValue: 0
+        });
+        this.numDefaultTab = Ext.widget("commonmetricspinner", {
+            id: "paragraphadv-spin-default-tab",
+            readOnly: false,
+            step: 0.1,
+            width: 107,
+            defaultUnit: "cm",
+            value: "1.25 cm",
+            maxValue: 55.87,
+            minValue: 0,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (this._changedProps) {
+                        this._changedProps.put_DefaultTab(parseFloat(Common.MetricSettings.fnRecalcToMM(field.getNumberValue()).toFixed(1)));
+                    }
+                },
+                this)
+            }
+        });
+        this.btnAddTab = Ext.create("Ext.Button", {
+            width: 90,
+            text: this.textSet,
+            enableToggle: false,
+            listeners: {
+                click: Ext.bind(function (btn, eOpts) {
+                    var val = this.numTab.getNumberValue();
+                    var align = this.radioLeft.getValue() ? 1 : (this.radioCenter.getValue() ? 3 : 2);
+                    var idx = fieldStore.findBy(function (record, id) {
+                        return (Math.abs(record.data.tabPos - val) < 0.001);
+                    },
+                    this);
+                    if (idx < 0) {
+                        var rec = fieldStore.add({
+                            tabPos: val,
+                            tabStr: val + " " + Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()],
+                            tabAlign: align
+                        });
+                        fieldStore.sort();
+                        this.tabList.getSelectionModel().select(rec);
+                    } else {
+                        var rec = fieldStore.getAt(idx);
+                        rec.set("tabAlign", align);
+                    }
+                },
+                this)
+            }
+        });
+        this.btnRemoveTab = Ext.create("Ext.Button", {
+            width: 90,
+            text: this.textRemove,
+            enableToggle: false,
+            listeners: {
+                click: Ext.bind(function (btn, eOpts) {
+                    var rec = this.tabList.getSelectionModel().getSelection();
+                    if (rec.length > 0) {
+                        var idx = rec[0].index;
+                        fieldStore.remove(rec);
+                        if (idx > fieldStore.count() - 1) {
+                            idx = fieldStore.count() - 1;
+                        }
+                        if (idx > -1) {
+                            this.tabList.getSelectionModel().select(idx);
+                        }
+                    }
+                },
+                this)
+            }
+        });
+        this.btnRemoveAll = Ext.create("Ext.Button", {
+            width: 90,
+            text: this.textRemoveAll,
+            enableToggle: false,
+            listeners: {
+                click: Ext.bind(function (btn, eOpts) {
+                    fieldStore.removeAll();
+                },
+                this)
+            }
+        });
+        this.radioLeft = Ext.create("Ext.form.field.Radio", {
+            boxLabel: this.textTabLeft,
+            name: "asc-radio-tab",
+            checked: true
+        });
+        this.radioCenter = Ext.create("Ext.form.field.Radio", {
+            boxLabel: this.textTabCenter,
+            name: "asc-radio-tab",
+            checked: false
+        });
+        this.radioRight = Ext.create("Ext.form.field.Radio", {
+            boxLabel: this.textTabRight,
+            name: "asc-radio-tab",
+            checked: false
+        });
+        Ext.define("PE.model.TabDataModel", {
+            extend: "Ext.data.Model",
+            fields: [{
+                name: "tabPos",
+                name: "tabStr",
+                name: "tabAlign"
+            }]
+        });
+        var fieldStore = Ext.create("Ext.data.Store", {
+            model: "PE.model.TabDataModel",
+            data: [],
+            sorters: ["tabPos"],
+            listeners: {
+                datachanged: Ext.bind(function (btn, eOpts) {
+                    if (!this._noApply) {
+                        this._tabListChanged = true;
+                    }
+                },
+                this),
+                update: Ext.bind(function (btn, eOpts) {
+                    if (!this._noApply) {
+                        this._tabListChanged = true;
+                    }
+                },
+                this),
+                clear: Ext.bind(function (btn, eOpts) {
+                    if (!this._noApply) {
+                        this._tabListChanged = true;
+                    }
+                },
+                this)
+            }
+        });
+        this.tabList = Ext.create("Ext.grid.Panel", {
+            activeItem: 0,
+            id: "paragraphadv-tab-list",
+            store: fieldStore,
+            mode: "local",
+            scroll: false,
+            columns: [{
+                flex: 1,
+                dataIndex: "tabStr"
+            }],
+            height: 80,
+            width: 180,
+            hideHeaders: true,
+            viewConfig: {
+                stripeRows: false
+            },
+            plugins: [{
+                pluginId: "scrollpane",
+                ptype: "gridscrollpane"
+            }],
+            listeners: {
+                select: function (o, record, index, eOpts) {
+                    this.numTab.setValue(record.data.tabPos);
+                    (record.data.tabAlign == 1) ? this.radioLeft.setValue(true) : ((record.data.tabAlign == 3) ? this.radioCenter.setValue(true) : this.radioRight.setValue(true));
+                },
+                scope: this
+            }
+        });
+        this.btnIndents = Ext.widget("button", {
+            width: 160,
+            height: 27,
+            cls: "asc-dialogmenu-btn",
+            text: this.strParagraphIndents,
+            textAlign: "right",
+            enableToggle: true,
+            allowDepress: false,
+            toggleGroup: "advtablecardGroup",
+            pressed: true,
+            listeners: {
+                click: function (btn) {
+                    if (btn.pressed) {
+                        this.mainCard.getLayout().setActiveItem("card-indents");
+                    }
+                },
+                scope: this
+            }
+        });
+        this.btnFont = Ext.widget("button", {
+            width: 160,
+            height: 27,
+            cls: "asc-dialogmenu-btn",
+            text: this.strParagraphFont,
+            textAlign: "right",
+            enableToggle: true,
+            allowDepress: false,
+            toggleGroup: "advtablecardGroup",
+            listeners: {
+                click: function (btn) {
+                    if (btn.pressed) {
+                        this.mainCard.getLayout().setActiveItem("card-font");
+                    }
+                },
+                scope: this
+            }
+        });
+        this.btnTabs = Ext.widget("button", {
+            width: 160,
+            height: 27,
+            cls: "asc-dialogmenu-btn",
+            textAlign: "right",
+            text: this.strTabs,
+            enableToggle: true,
+            allowDepress: false,
+            toggleGroup: "advtablecardGroup",
+            listeners: {
+                click: function (btn) {
+                    if (btn.pressed) {
+                        this.mainCard.getLayout().setActiveItem("card-tabs");
+                        this.tabList.getPlugin("scrollpane").updateScrollPane();
+                    }
+                },
+                scope: this
+            }
+        });
+        this._IndentsContainer = {
+            xtype: "container",
+            itemId: "card-indents",
+            width: 330,
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "container",
+                padding: "0 10",
+                layout: {
+                    type: "table",
+                    columns: 5
+                },
+                defaults: {
+                    xtype: "container",
+                    layout: "vbox",
+                    layoutConfig: {
+                        align: "stretch"
+                    },
+                    height: 40,
+                    style: "float:left;"
+                },
+                items: [{
+                    items: [{
+                        xtype: "label",
+                        text: this.strIndentsFirstLine,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.numFirstLine]
+                },
+                {
+                    xtype: "tbspacer",
+                    width: 23,
+                    height: 3
+                },
+                {
+                    items: [{
+                        xtype: "label",
+                        text: this.strIndentsLeftText,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.numIndentsLeft]
+                },
+                {
+                    xtype: "tbspacer",
+                    width: 23,
+                    height: 3
+                },
+                {
+                    items: [{
+                        xtype: "label",
+                        text: this.strIndentsRightText,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.numIndentsRight]
+                }]
+            }]
+        };
+        this._FontContainer = {
+            xtype: "container",
+            itemId: "card-font",
+            width: 330,
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "label",
+                style: "font-weight: bold;margin-top: 1px; padding-left:10px;height:13px;",
+                text: this.textEffects
+            },
+            {
+                xtype: "tbspacer",
+                height: 8
+            },
+            {
+                xtype: "container",
+                height: 85,
+                width: "100%",
+                padding: "0 10",
+                layout: {
+                    type: "table",
+                    columns: 3,
+                    tdAttrs: {
+                        style: "vertical-align: middle;"
+                    }
+                },
+                items: [this.chStrike, {
+                    xtype: "tbspacer",
+                    width: 20,
+                    height: 2
+                },
+                this.chSubscript, this.chDoubleStrike, {
+                    xtype: "tbspacer",
+                    width: 20,
+                    height: 2
+                },
+                this.chSmallCaps, this.chSuperscript, {
+                    xtype: "tbspacer",
+                    width: 20,
+                    height: 2
+                },
+                this.chAllCaps]
+            },
+            {
+                xtype: "label",
+                style: "font-weight: bold;margin-top: 1px; padding-left:10px;height:13px;",
+                text: this.textCharacterSpacing
+            },
+            {
+                xtype: "tbspacer",
+                height: 8
+            },
+            {
+                xtype: "container",
+                height: 26,
+                padding: "0 10",
+                layout: {
+                    type: "vbox",
+                    align: "left"
+                },
+                items: [this.numSpacing]
+            },
+            {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "container",
+                height: 85,
+                padding: "0 10",
+                items: [this.fontImage]
+            }]
+        };
+        this._TabsContainer = {
+            xtype: "container",
+            itemId: "card-tabs",
+            width: 330,
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "container",
+                padding: "0 0 0 10",
+                layout: {
+                    type: "table",
+                    columns: 3,
+                    tdAttrs: {
+                        style: "padding-right: 7px;"
+                    }
+                },
+                defaults: {
+                    xtype: "container",
+                    layout: "vbox",
+                    layoutConfig: {
+                        align: "stretch"
+                    },
+                    style: "float:left;"
+                },
+                items: [{
+                    height: 50,
+                    colspan: 2,
+                    items: [{
+                        xtype: "label",
+                        text: this.textTabPosition,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.numTab]
+                },
+                {
+                    height: 50,
+                    items: [{
+                        xtype: "label",
+                        text: this.textDefault,
+                        width: 107
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.numDefaultTab]
+                },
+                {
+                    height: 95,
+                    colspan: 3,
+                    items: [this.tabList]
+                },
+                {
+                    height: 100,
+                    colspan: 3,
+                    items: [{
+                        xtype: "label",
+                        text: this.textAlign,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 3
+                    },
+                    this.radioLeft, this.radioCenter, this.radioRight]
+                },
+                this.btnAddTab, this.btnRemoveTab, this.btnRemoveAll]
+            }]
+        };
+        this.items = [{
+            xtype: "container",
+            height: 300,
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "container",
+                width: 160,
+                padding: "5px 0 0 0",
+                layout: {
+                    type: "vbox",
+                    align: "stretch"
+                },
+                defaults: {
+                    xtype: "container",
+                    layout: {
+                        type: "hbox",
+                        align: "middle",
+                        pack: "end"
+                    }
+                },
+                items: [{
+                    height: 30,
+                    items: [this.btnIndents]
+                },
+                {
+                    height: 30,
+                    items: [this.btnFont]
+                },
+                {
+                    height: 30,
+                    items: [this.btnTabs]
+                }]
+            },
+            {
+                xtype: "box",
+                cls: "advanced-settings-separator",
+                height: "100%",
+                width: 8
+            },
+            this.mainCard = Ext.create("Ext.container.Container", {
+                height: 300,
+                flex: 1,
+                padding: "12px 18px 0 10px",
+                layout: "card",
+                items: [this._IndentsContainer, this._FontContainer, this._TabsContainer]
+            })]
+        },
+        this._spacer.cloneConfig({
+            style: "margin: 0 18px"
+        }), {
+            xtype: "container",
+            height: 40,
+            layout: {
+                type: "vbox",
+                align: "center",
+                pack: "center"
+            },
+            items: [{
+                xtype: "container",
+                width: 182,
+                height: 24,
+                layout: {
+                    type: "hbox",
+                    align: "middle"
+                },
+                items: [this.btnOk = Ext.widget("button", {
+                    cls: "asc-blue-button",
+                    width: 86,
+                    height: 22,
+                    margin: "0 5px 0 0",
+                    text: this.okButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", this, 1, this.getSettings());
+                            this.close();
+                        },
+                        scope: this
+                    }
+                }), this.btnCancel = Ext.widget("button", {
+                    cls: "asc-darkgray-button",
+                    width: 86,
+                    height: 22,
+                    text: this.cancelButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", this, 0);
+                            this.close();
+                        },
+                        scope: this
+                    }
+                })]
+            }]
+        }];
+        this.callParent(arguments);
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+        this._setDefaults(this._originalProps);
+        this.setTitle(this.textTitle);
+    },
+    setSettings: function (props) {
+        this._originalProps = new CParagraphProp(props.paragraphProps);
+        this._changedProps = null;
+        this.api = props.api;
+    },
+    _setDefaults: function (props) {
+        if (props) {
+            this._originalProps = new CParagraphProp(props);
+            this.numFirstLine.setValue((props.get_Ind() !== null && props.get_Ind().get_FirstLine() !== null) ? Common.MetricSettings.fnRecalcFromMM(props.get_Ind().get_FirstLine()) : "");
+            this.numIndentsLeft.setValue((props.get_Ind() !== null && props.get_Ind().get_Left() !== null) ? Common.MetricSettings.fnRecalcFromMM(props.get_Ind().get_Left()) : "");
+            this.numIndentsRight.setValue((props.get_Ind() !== null && props.get_Ind().get_Right() !== null) ? Common.MetricSettings.fnRecalcFromMM(props.get_Ind().get_Right()) : "");
+            this._noApply = true;
+            this.chStrike.setValue((props.get_Strikeout() !== null && props.get_Strikeout() !== undefined) ? props.get_Strikeout() : "indeterminate");
+            this.chDoubleStrike.setValue((props.get_DStrikeout() !== null && props.get_DStrikeout() !== undefined) ? props.get_DStrikeout() : "indeterminate");
+            this.chSubscript.setValue((props.get_Subscript() !== null && props.get_Subscript() !== undefined) ? props.get_Subscript() : "indeterminate");
+            this.chSuperscript.setValue((props.get_Superscript() !== null && props.get_Superscript() !== undefined) ? props.get_Superscript() : "indeterminate");
+            this.chSmallCaps.setValue((props.get_SmallCaps() !== null && props.get_SmallCaps() !== undefined) ? props.get_SmallCaps() : "indeterminate");
+            this.chAllCaps.setValue((props.get_AllCaps() !== null && props.get_AllCaps() !== undefined) ? props.get_AllCaps() : "indeterminate");
+            this.numSpacing.setValue((props.get_TextSpacing() !== null && props.get_TextSpacing() !== undefined) ? Common.MetricSettings.fnRecalcFromMM(props.get_TextSpacing()) : "");
+            this.api.SetDrawImagePlaceParagraph("paragraphadv-font-img", this._originalProps);
+            this.numDefaultTab.setValue((props.get_DefaultTab() !== null && props.get_DefaultTab() !== undefined) ? Common.MetricSettings.fnRecalcFromMM(parseFloat(props.get_DefaultTab().toFixed(1))) : "");
+            var tabs = props.get_Tabs();
+            if (tabs) {
+                var arr = [];
+                var count = tabs.get_Count();
+                for (var i = 0; i < count; i++) {
+                    var tab = tabs.get_Tab(i);
+                    var rec = {
+                        tabPos: Common.MetricSettings.fnRecalcFromMM(parseFloat(tab.get_Pos().toFixed(1))),
+                        tabAlign: tab.get_Value()
+                    };
+                    rec.tabStr = parseFloat(Ext.Number.toFixed(rec.tabPos, 3)) + " " + Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()];
+                    arr.push(rec);
+                }
+                this.tabList.getStore().loadData(arr);
+                this.tabList.getStore().sort();
+                if (this.tabList.getStore().count() > 0) {
+                    this.tabList.getSelectionModel().select(0);
+                }
+            }
+            this._noApply = false;
+            this._changedProps = new CParagraphProp();
+        }
+    },
+    getSettings: function () {
+        if (this._tabListChanged) {
+            if (this._changedProps.get_Tabs() === null || this._changedProps.get_Tabs() === undefined) {
+                this._changedProps.put_Tabs(new CParagraphTabs());
+            }
+            this.tabList.getStore().each(function (item, index) {
+                var tab = new CParagraphTab(Common.MetricSettings.fnRecalcToMM(item.data.tabPos), item.data.tabAlign);
+                this._changedProps.get_Tabs().add_Tab(tab);
+            },
+            this);
+        }
+        return {
+            paragraphProps: this._changedProps
+        };
+    },
+    updateMetricUnit: function () {
+        var spinners = this.query("commonmetricspinner");
+        if (spinners) {
+            for (var i = 0; i < spinners.length; i++) {
+                var spinner = spinners[i];
+                spinner.setDefaultUnit(Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]);
+                if (spinner.id == "paragraphadv-spin-spacing") {
+                    spinner.setStep(Common.MetricSettings.getCurrentMetric() == Common.MetricSettings.c_MetricUnits.cm ? 0.01 : 1);
+                } else {
+                    spinner.setStep(Common.MetricSettings.getCurrentMetric() == Common.MetricSettings.c_MetricUnits.cm ? 0.1 : 1);
+                }
+            }
+        }
+    },
+    textTitle: "Paragraph - Advanced Settings",
+    strIndentsFirstLine: "First line",
+    strIndentsLeftText: "Left",
+    strIndentsRightText: "Right",
+    strParagraphIndents: "Indents & Placement",
+    strParagraphFont: "Font",
+    cancelButtonText: "Cancel",
+    okButtonText: "Ok",
+    textEffects: "Effects",
+    textCharacterSpacing: "Character Spacing",
+    strDoubleStrike: "Double strikethrough",
+    strStrike: "Strikethrough",
+    strSuperscript: "Superscript",
+    strSubscript: "Subscript",
+    strSmallCaps: "Small caps",
+    strAllCaps: "All caps",
+    strTabs: "Tab",
+    textSet: "Specify",
+    textRemove: "Remove",
+    textRemoveAll: "Remove All",
+    textTabLeft: "Left",
+    textTabRight: "Right",
+    textTabCenter: "Center",
+    textAlign: "Alignment",
+    textTabPosition: "Tab Position",
+    textDefault: "Default Tab"
+});

OfficeWeb/apps/presentationeditor/main/app/view/RecentFiles.js

@@ -0,0 +1,75 @@
+/*
+ * (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("PE.view.RecentFiles", {
+    extend: "Ext.panel.Panel",
+    alias: "widget.perecentfiles",
+    cls: "pe-recentfiles",
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    requires: ["Ext.container.Container", "Ext.data.Model", "Ext.data.Store", "Ext.view.View", "Ext.XTemplate", "Common.plugin.DataViewScrollPane"],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this.callParent(arguments);
+        var me = this;
+        me.add({
+            xtype: "container",
+            flex: 1,
+            layout: "fit",
+            cls: "container-recent-file-list",
+            items: [{
+                xtype: "dataview",
+                store: "RecentFiles",
+                tpl: Ext.create("Ext.XTemplate", '<tpl for=".">', '<div class="thumb-wrap">', '<div class="thumb"></div>', '<div class="file-name">{title:htmlEncode}</div>', '<div class="file-info">{folder:htmlEncode}</div>', "</div>", "</tpl>"),
+                singleSelect: true,
+                trackOver: true,
+                style: "overflow:auto",
+                overItemCls: "x-item-over",
+                itemSelector: "div.thumb-wrap",
+                cls: "x-view-context",
+                plugins: [{
+                    ptype: "dataviewscrollpane",
+                    pluginId: "scrollpane",
+                    areaSelector: ".x-view-context",
+                    settings: {
+                        enableKeyboardNavigation: true
+                    }
+                }]
+            }]
+        });
+    }
+});

OfficeWeb/apps/presentationeditor/main/app/view/RightMenu.js

@@ -0,0 +1,224 @@
+/*
+ * (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
+ *
+ */
+ var SCALE_MIN = 40;
+var MENU_SCALE_PART = 260;
+var RIGHTMENU_TOOLBAR_ID = "rightmenu-toolbar-id";
+var RIGHTMENU_PANEL_ID = "rightmenu-panel-id";
+Ext.define("PE.view.RightMenu", {
+    extend: "Ext.panel.Panel",
+    alias: "widget.perightmenu",
+    requires: ["Ext.toolbar.Toolbar", "Ext.button.Button", "Ext.container.Container", "Ext.toolbar.Spacer", "PE.view.RightPanel", "Ext.util.Cookies"],
+    cls: "rm-style",
+    id: RIGHTMENU_PANEL_ID,
+    bodyCls: "rm-body",
+    width: SCALE_MIN,
+    buttonCollection: [],
+    listeners: {
+        afterrender: function () {
+            var owner = this.ownerCt;
+            if (Ext.isDefined(owner)) {
+                owner.addListener("resize", Ext.bind(this.resizeMenu, this));
+            }
+        }
+    },
+    initComponent: function () {
+        this.dockedItems = this.buildDockedItems();
+        this._rightSettings = Ext.widget("perightpanel", {
+            id: "view-right-panel-settings",
+            btnText: this.btnText,
+            btnTable: this.btnTable,
+            btnImage: this.btnImage,
+            btnShape: this.btnShape,
+            btnSlide: this.btnSlide
+        });
+        this.items = [this._rightSettings];
+        this.addEvents("editcomplete");
+        this.callParent(arguments);
+    },
+    buildDockedItems: function () {
+        var me = this;
+        me.btnSlide = Ext.create("Ext.button.Button", {
+            id: "id-right-menu-slide",
+            cls: "asc-main-menu-buttons",
+            iconCls: "asc-main-menu-btn menuSlide",
+            asctype: c_oAscTypeSelectElement.Slide,
+            enableToggle: true,
+            allowDepress: true,
+            style: "margin-bottom: 8px;",
+            disabled: true,
+            toggleGroup: "tabpanelbtnsGroup"
+        });
+        me.btnShape = Ext.create("Ext.button.Button", {
+            id: "id-right-menu-shape",
+            cls: "asc-main-menu-buttons",
+            iconCls: "asc-main-menu-btn menuShape",
+            asctype: c_oAscTypeSelectElement.Shape,
+            enableToggle: true,
+            allowDepress: true,
+            style: "margin-bottom: 8px;",
+            disabled: true,
+            toggleGroup: "tabpanelbtnsGroup"
+        });
+        me.btnImage = Ext.create("Ext.Button", {
+            id: "id-right-menu-image",
+            cls: "asc-main-menu-buttons",
+            iconCls: "asc-main-menu-btn menuImage",
+            asctype: c_oAscTypeSelectElement.Image,
+            enableToggle: true,
+            allowDepress: true,
+            style: "margin-bottom: 8px;",
+            disabled: true,
+            toggleGroup: "tabpanelbtnsGroup"
+        });
+        me.btnText = Ext.create("Ext.Button", {
+            id: "id-right-menu-text",
+            cls: "asc-main-menu-buttons",
+            iconCls: "asc-main-menu-btn menuText",
+            asctype: c_oAscTypeSelectElement.Paragraph,
+            enableToggle: true,
+            allowDepress: true,
+            style: "margin-bottom: 8px;",
+            disabled: true,
+            toggleGroup: "tabpanelbtnsGroup"
+        });
+        me.btnTable = Ext.create("Ext.Button", {
+            id: "id-right-menu-table",
+            cls: "asc-main-menu-buttons",
+            iconCls: "asc-main-menu-btn menuTable",
+            asctype: c_oAscTypeSelectElement.Table,
+            enableToggle: true,
+            allowDepress: true,
+            style: "margin-bottom: 8px;",
+            disabled: true,
+            toggleGroup: "tabpanelbtnsGroup"
+        });
+        this.rightToolbar = Ext.create("Ext.toolbar.Toolbar", {
+            cls: "rm-default-toolbar",
+            width: this.width || SCALE_MIN,
+            vertical: true,
+            dock: "right",
+            defaultType: "button",
+            style: "padding-top: 15px;",
+            items: [me.btnSlide, me.btnShape, me.btnImage, me.btnText, me.btnTable]
+        });
+        return this.rightToolbar;
+    },
+    resizeMenu: function (Component, adjWidth, adjHeight, eOpts) {
+        for (var i = 0; i < this.items.length; i++) {
+            if (this.items.items[i].el && adjHeight != this.items.items[i].getHeight()) {
+                this.items.items[i].setHeight(adjHeight);
+            }
+        }
+        this.doComponentLayout();
+    },
+    setApi: function (o) {
+        this.api = o;
+        this.api.asc_registerCallback("asc_onСoAuthoringDisconnect", Ext.bind(this.onCoAuthoringDisconnect, this));
+        return this;
+    },
+    disableMenu: function (disabled) {
+        var btn, i;
+        var tbMain = this.rightToolbar;
+        if (Ext.isDefined(tbMain)) {
+            for (i = 0; i < tbMain.items.length; i++) {
+                btn = tbMain.items.items[i];
+                if (Ext.isDefined(btn) && btn.componentCls === "x-btn") {
+                    btn.pressed && btn.toggle(false);
+                    btn.setDisabled(disabled);
+                }
+            }
+        }
+    },
+    onCoAuthoringDisconnect: function () {
+        this.disableMenu(true);
+        if (this._rightSettings) {
+            this._rightSettings.setDisabled(true);
+            this._rightSettings.setMode({
+                isEdit: false
+            });
+        }
+    },
+    createDelayedElements: function () {
+        var me = this;
+        me._rightSettings.setHeight(me.getHeight());
+        var toggleHandler = function (btn, pressed) {
+            if (pressed && !me._rightSettings.minimizedMode) {
+                btn.addCls("asc-main-menu-btn-selected");
+                var panel = me._rightSettings._settings[btn.asctype].panel;
+                var props = me._rightSettings._settings[btn.asctype].props;
+                me._rightSettings.TabPanel.getLayout().setActiveItem(panel);
+                me._rightSettings.TabPanel.setHeight(panel.initialHeight);
+                if (props) {
+                    panel.ChangeSettings.call(panel, props);
+                }
+            }
+        };
+        var clickHandler = function (btn) {
+            if (btn.pressed) {
+                if (me._rightSettings.minimizedMode) {
+                    if (me._rightSettings.TabPanel.hidden) {
+                        me._rightSettings.TabPanel.setVisible(true);
+                    }
+                    me.setWidth(MENU_SCALE_PART);
+                    me._rightSettings.minimizedMode = false;
+                    toggleHandler(btn, btn.pressed);
+                    window.localStorage.setItem("de-hidden-right-settings", 0);
+                } else {
+                    btn.addCls("asc-main-menu-btn-selected");
+                }
+                me._rightSettings._settings[c_oAscTypeSelectElement.Slide].isCurrent = (btn.asctype == c_oAscTypeSelectElement.Slide);
+            } else {
+                me.setWidth(SCALE_MIN);
+                me._rightSettings.minimizedMode = true;
+                btn.removeCls("asc-main-menu-btn-selected");
+                window.localStorage.setItem("de-hidden-right-settings", 1);
+            }
+            me.fireEvent("editcomplete", me);
+        };
+        var button;
+        var tips = [me.txtSlideSettings, me.txtShapeSettings, me.txtImageSettings, me.txtParagraphSettings, me.txtTableSettings];
+        for (var i = this.rightToolbar.items.items.length; i--;) {
+            button = this.rightToolbar.items.items[i];
+            button.on({
+                "click": clickHandler,
+                "toggle": toggleHandler
+            });
+            button.setTooltip(tips[i]);
+        }
+    },
+    txtParagraphSettings: "Text Settings",
+    txtImageSettings: "Image Settings",
+    txtTableSettings: "Table Settings",
+    txtShapeSettings: "Shape Settings",
+    txtSlideSettings: "Slide Settings",
+    txtChartSettings: "Chart Settings"
+});

OfficeWeb/apps/presentationeditor/main/app/view/RightPanel.js

@@ -0,0 +1,344 @@
+/*
+ * (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("PE.model.PatternDataModel", {
+    extend: "Ext.data.Model",
+    fields: [{
+        name: "imageUrl"
+    },
+    {
+        name: "imageStyle"
+    },
+    {
+        name: "imageCls"
+    },
+    {
+        name: "title"
+    },
+    {
+        name: "data"
+    },
+    {
+        name: "uid"
+    }]
+});
+Ext.define("PE.view.RightPanel", {
+    extend: "Ext.container.Container",
+    alias: "widget.perightpanel",
+    width: 220,
+    layout: {
+        type: "auto"
+    },
+    autoScroll: true,
+    cls: "asc-right-panel-container",
+    preventHeader: true,
+    requires: ["Ext.toolbar.Toolbar", "Ext.container.Container", "Common.plugin.ScrollPane", "PE.view.TableSettings", "PE.view.ParagraphSettings", "PE.view.ImageSettings", "PE.view.ShapeSettings", "PE.view.SlideSettings", "Ext.button.Button", "Ext.panel.Panel"],
+    uses: ["Ext.DomHelper", "Ext.util.Cookies"],
+    listeners: {
+        afterrender: function () {
+            var owner = this.ownerCt;
+            if (Ext.isDefined(owner)) {
+                owner.addListener("resize", Ext.bind(this.resizeRightPanels, this));
+            }
+        }
+    },
+    resizeRightPanels: function (cnt) {
+        this.doComponentLayout();
+        this.hideMenus();
+    },
+    constructor: function (config) {
+        this.callParent(arguments);
+        this.initConfig(config);
+        return this;
+    },
+    initComponent: function () {
+        var me = this;
+        me.editMode = true;
+        me.minimizedMode = true;
+        me.plugins = [{
+            ptype: "scrollpane",
+            pluginId: "scrollpane",
+            areaSelector: ".x-container",
+            settings: {
+                enableKeyboardNavigation: true,
+                verticalGutter: 0
+            }
+        }];
+        me.callParent(arguments);
+    },
+    updateScrollPane: function () {
+        var me = this;
+        me.getPlugin("scrollpane").updateScrollPane();
+    },
+    onFocusObject: function (SelectedObjects) {
+        if (!this.editMode) {
+            return;
+        }
+        for (var i = 0; i < this._settings.length; i++) {
+            if (this._settings[i]) {
+                this._settings[i].hidden = 1;
+                this._settings[i].locked = undefined;
+            }
+        }
+        this._settings[c_oAscTypeSelectElement.Slide].hidden = 0;
+        for (i = 0; i < SelectedObjects.length; i++) {
+            var type = SelectedObjects[i].get_ObjectType();
+            if (type >= this._settings.length || this._settings[type] === undefined) {
+                continue;
+            }
+            this._settings[type].props = SelectedObjects[i].get_ObjectValue();
+            this._settings[type].hidden = 0;
+            if (type == c_oAscTypeSelectElement.Slide) {
+                this._settings[type].locked = this._settings[type].props.get_LockDelete();
+                this._settings[type].lockedBackground = this._settings[type].props.get_LockBackground();
+                this._settings[type].lockedEffects = this._settings[type].props.get_LockTranzition();
+                this._settings[type].lockedTiming = this._settings[type].props.get_LockTiming();
+            } else {
+                this._settings[type].locked = this._settings[type].props.get_Locked();
+            }
+        }
+        if (this._settings[c_oAscTypeSelectElement.Slide].locked) {
+            for (i = 0; i < this._settings.length; i++) {
+                if (this._settings[i]) {
+                    this._settings[i].locked = true;
+                }
+            }
+        }
+        var lastactive = -1,
+        currentactive, priorityactive = -1;
+        for (i = 0; i < this._settings.length; i++) {
+            if (this._settings[i] === undefined) {
+                continue;
+            }
+            if (this._settings[i].hidden) {
+                if (!this._settings[i].btn.isDisabled()) {
+                    this._settings[i].btn.setDisabled(true);
+                }
+                if (this.TabPanel.getLayout().getActiveItem() == this._settings[i].panel) {
+                    currentactive = -1;
+                }
+            } else {
+                if (this._settings[i].btn.isDisabled()) {
+                    this._settings[i].btn.setDisabled(false);
+                }
+                if (i != c_oAscTypeSelectElement.Slide) {
+                    lastactive = i;
+                }
+                if (this._settings[i].needShow) {
+                    this._settings[i].needShow = false;
+                    priorityactive = i;
+                } else {
+                    if (i != c_oAscTypeSelectElement.Slide || this._settings[i].isCurrent) {
+                        if (this.TabPanel.getLayout().getActiveItem() == this._settings[i].panel) {
+                            currentactive = i;
+                        }
+                    }
+                }
+                if (i == c_oAscTypeSelectElement.Slide) {
+                    if (this._settings[i].locked !== undefined) {
+                        this._settings[i].panel.setSlideDisabled(this._settings[i].lockedBackground || this._settings[i].locked, this._settings[i].lockedEffects || this._settings[i].locked, this._settings[i].lockedTiming || this._settings[i].locked);
+                    }
+                } else {
+                    if (this._settings[i].panel.isDisabled() !== this._settings[i].locked) {
+                        this._settings[i].panel.setDisabled(this._settings[i].locked);
+                    }
+                }
+            }
+        }
+        if (!this.minimizedMode) {
+            var active;
+            if (priorityactive > -1) {
+                active = priorityactive;
+            } else {
+                if (currentactive >= 0) {
+                    active = currentactive;
+                } else {
+                    if (lastactive >= 0) {
+                        active = lastactive;
+                    } else {
+                        active = c_oAscTypeSelectElement.Slide;
+                    }
+                }
+            }
+            if (active !== undefined) {
+                if (!this._settings[active].btn.pressed) {
+                    this._settings[active].btn.toggle();
+                } else {
+                    this._settings[active].panel.ChangeSettings.call(this._settings[active].panel, this._settings[active].props);
+                }
+            }
+        }
+        this._settings[c_oAscTypeSelectElement.Image].needShow = false;
+        this._settings[c_oAscTypeSelectElement.Shape].needShow = false;
+    },
+    onInsertTable: function () {
+        this._settings[c_oAscTypeSelectElement.Table].needShow = true;
+    },
+    onInsertImage: function () {
+        this._settings[c_oAscTypeSelectElement.Image].needShow = true;
+    },
+    onInsertShape: function () {
+        this._settings[c_oAscTypeSelectElement.Shape].needShow = true;
+    },
+    setApi: function (api) {
+        this.api = api;
+        return this;
+    },
+    setMode: function (mode) {
+        this.editMode = mode.isEdit;
+    },
+    FillAutoShapes: function () {
+        this.ShapePanel.FillAutoShapes();
+    },
+    hideMenus: function () {
+        if (this._settings) {
+            for (var i = 0; i < this._settings.length; i++) {
+                if (this._settings[i] === undefined) {
+                    continue;
+                }
+                if (Ext.isDefined(this._settings[i].panel.hideMenus)) {
+                    this._settings[i].panel.hideMenus();
+                }
+            }
+        }
+    },
+    updateMetricUnit: function () {
+        this.ParagraphPanel.updateMetricUnit();
+        this.ImagePanel.updateMetricUnit();
+    },
+    SendThemeColors: function (effectcolors, standartcolors) {
+        this.effectcolors = effectcolors;
+        if (standartcolors && standartcolors.length > 0) {
+            this.standartcolors = standartcolors;
+        }
+        if (this.ShapePanel && this.TablePanel && this.SlidePanel) {
+            this.ShapePanel.SendThemeColors(effectcolors, standartcolors);
+            this.TablePanel.SendThemeColors(effectcolors, standartcolors);
+            this.SlidePanel.SendThemeColors(effectcolors, standartcolors);
+        }
+    },
+    createDelayedElements: function () {
+        var me = this;
+        me.panelHolder = Ext.create("Ext.container.Container", {
+            layout: {
+                type: "anchor"
+            },
+            items: [me.TabPanel = Ext.create("Ext.panel.Panel", {
+                hidden: true,
+                id: "view-tab-panel",
+                cls: "asc-right-tabpanel",
+                preventHeader: true,
+                layout: "card",
+                items: [me.SlidePanel = Ext.create("PE.view.SlideSettings", {
+                    id: "view-slide-settings",
+                    cls: "asc-right-panel",
+                    type: c_oAscTypeSelectElement.Slide
+                }), me.ShapePanel = Ext.create("PE.view.ShapeSettings", {
+                    id: "view-shape-settings",
+                    cls: "asc-right-panel",
+                    type: c_oAscTypeSelectElement.Shape
+                }), me.ParagraphPanel = Ext.create("PE.view.ParagraphSettings", {
+                    id: "view-paragraph-settings",
+                    cls: "asc-right-panel",
+                    type: c_oAscTypeSelectElement.Paragraph
+                }), me.TablePanel = Ext.create("PE.view.TableSettings", {
+                    id: "view-table-settings",
+                    cls: "asc-right-panel",
+                    type: c_oAscTypeSelectElement.Table
+                }), me.ImagePanel = Ext.create("PE.view.ImageSettings", {
+                    id: "view-image-settings",
+                    cls: "asc-right-panel",
+                    type: c_oAscTypeSelectElement.Image
+                })],
+                listeners: {
+                    afterlayout: function () {
+                        me.updateScrollPane();
+                    }
+                }
+            })],
+            listeners: {
+                afterlayout: function () {
+                    me.updateScrollPane();
+                }
+            }
+        });
+        me.add(me.panelHolder);
+        me._settings = [];
+        me._settings[c_oAscTypeSelectElement.Paragraph] = {
+            panel: me.ParagraphPanel,
+            btn: me.btnText,
+            hidden: 1,
+            locked: false
+        };
+        me._settings[c_oAscTypeSelectElement.Table] = {
+            panel: me.TablePanel,
+            btn: me.btnTable,
+            hidden: 1,
+            locked: false
+        };
+        me._settings[c_oAscTypeSelectElement.Image] = {
+            panel: me.ImagePanel,
+            btn: me.btnImage,
+            hidden: 1,
+            locked: false
+        };
+        me._settings[c_oAscTypeSelectElement.Shape] = {
+            panel: me.ShapePanel,
+            btn: me.btnShape,
+            hidden: 1,
+            locked: false
+        };
+        me._settings[c_oAscTypeSelectElement.Slide] = {
+            panel: me.SlidePanel,
+            btn: me.btnSlide,
+            hidden: 1,
+            locked: false
+        };
+        if (this.api) {
+            this.ShapePanel.setApi(this.api);
+            this.ImagePanel.setApi(this.api);
+            this.ParagraphPanel.setApi(this.api);
+            this.TablePanel.setApi(this.api);
+            this.SlidePanel.setApi(this.api);
+        }
+        if (this.editMode && this.api) {
+            var selectedElements = this.api.getSelectedElements();
+            if (selectedElements.length > 0) {
+                this.onFocusObject(selectedElements);
+            }
+        }
+        if (this.effectcolors && this.standartcolors) {
+            this.ShapePanel.SendThemeColors(this.effectcolors, this.standartcolors);
+            this.TablePanel.SendThemeColors(this.effectcolors, this.standartcolors);
+            this.SlidePanel.SendThemeColors(this.effectcolors, this.standartcolors);
+        }
+    }
+});

OfficeWeb/apps/presentationeditor/main/app/view/SlideSizeSettings.js

@@ -0,0 +1,349 @@
+/*
+ * (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("PE.view.SlideSizeSettings", {
+    extend: "Ext.window.Window",
+    alias: "widget.peslidesizesettings",
+    requires: ["Ext.window.Window", "Ext.form.field.ComboBox", "Common.component.MetricSpinner", "Ext.Array", "Common.plugin.ComboBoxScrollPane"],
+    cls: "asc-advanced-settings-window",
+    modal: true,
+    resizable: false,
+    plain: true,
+    constrain: true,
+    height: 230,
+    width: 270,
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    listeners: {
+        show: function () {
+            this._spnWidth.focus(false, 500);
+        }
+    },
+    initComponent: function () {
+        var me = this;
+        this.addEvents("onmodalresult");
+        this._noApply = false;
+        this._sizeIdx = 0;
+        this._spacer = Ext.create("Ext.toolbar.Spacer", {
+            width: "100%",
+            height: 10,
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        });
+        this.cmbSlideSize = Ext.widget("combo", {
+            store: Ext.create("Ext.data.Store", {
+                fields: ["description", "type", "size"],
+                data: [{
+                    type: 1,
+                    description: me.txtStandard,
+                    size: [254, 190.5]
+                },
+                {
+                    type: 2,
+                    description: me.txtWidescreen1,
+                    size: [254, 143]
+                },
+                {
+                    type: 3,
+                    description: me.txtWidescreen2,
+                    size: [254, 158.7]
+                },
+                {
+                    type: 4,
+                    description: me.txtLetter,
+                    size: [254, 190.5]
+                },
+                {
+                    type: 5,
+                    description: me.txtLedger,
+                    size: [338.3, 253.7]
+                },
+                {
+                    type: 6,
+                    description: me.txtA3,
+                    size: [355.6, 266.7]
+                },
+                {
+                    type: 7,
+                    description: me.txtA4,
+                    size: [275, 190.5]
+                },
+                {
+                    type: 8,
+                    description: me.txtB4,
+                    size: [300.7, 225.5]
+                },
+                {
+                    type: 9,
+                    description: me.txtB5,
+                    size: [199.1, 149.3]
+                },
+                {
+                    type: 10,
+                    description: me.txt35,
+                    size: [285.7, 190.5]
+                },
+                {
+                    type: 11,
+                    description: me.txtOverhead,
+                    size: [254, 190.5]
+                },
+                {
+                    type: 12,
+                    description: me.txtBanner,
+                    size: [203.2, 25.4]
+                },
+                {
+                    type: -1,
+                    description: me.txtCustom,
+                    size: []
+                }]
+            }),
+            displayField: "description",
+            valueField: "type",
+            queryMode: "local",
+            editable: false,
+            value: me.txtStandard,
+            listeners: {
+                select: Ext.bind(function (combo, records, eOpts) {
+                    me._sizeIdx = records[0].index;
+                    combo.blur();
+                    me._noApply = true;
+                    if (records[0].index == 12) {} else {
+                        me._spnWidth.setValue(Common.MetricSettings.fnRecalcFromMM(records[0].data.size[0]));
+                        me._spnHeight.setValue(Common.MetricSettings.fnRecalcFromMM(records[0].data.size[1]));
+                    }
+                    me._noApply = false;
+                },
+                this)
+            }
+        });
+        this.cmbSlideSize.select(this.cmbSlideSize.getStore().getAt(0));
+        this._spnWidth = Ext.create("Common.component.MetricSpinner", {
+            id: "slide-advanced-spin-width",
+            readOnly: false,
+            maxValue: 55.88,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "25.4 cm",
+            width: 75,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (!me._noApply && me._sizeIdx != 12) {
+                        me.cmbSlideSize.select(me.cmbSlideSize.getStore().getAt(12));
+                        me._sizeIdx = 12;
+                    }
+                },
+                this),
+                specialkey: function (field, e) {
+                    if (e.getKey() == e.ENTER) {
+                        me.btnOk.fireEvent("click");
+                    } else {
+                        if (e.getKey() == e.ESC) {
+                            me.btnCancel.fireEvent("click");
+                        }
+                    }
+                }
+            }
+        });
+        this._spnHeight = Ext.create("Common.component.MetricSpinner", {
+            id: "slide-advanced-span-height",
+            readOnly: false,
+            maxValue: 55.88,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "19.05 cm",
+            width: 75,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (!me._noApply && me._sizeIdx != 12) {
+                        me.cmbSlideSize.select(me.cmbSlideSize.getStore().getAt(12));
+                        me._sizeIdx = 12;
+                    }
+                },
+                this),
+                specialkey: function (field, e) {
+                    if (e.getKey() == e.ENTER) {
+                        me.btnOk.fireEvent("click");
+                    } else {
+                        if (e.getKey() == e.ESC) {
+                            me.btnCancel.fireEvent("click");
+                        }
+                    }
+                }
+            }
+        });
+        this.label = Ext.widget("label", {
+            width: "100%",
+            margin: "0 0 2 0",
+            style: "font-weight: bold;"
+        });
+        this.items = [{
+            xtype: "container",
+            height: 136,
+            padding: "18 25",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            items: [this.label.cloneConfig({
+                text: me.textSlideSize
+            }), this.cmbSlideSize, {
+                xtype: "tbspacer",
+                height: 10
+            },
+            {
+                xtype: "container",
+                height: 44,
+                layout: {
+                    type: "hbox",
+                    align: "stretch"
+                },
+                items: [{
+                    xtype: "container",
+                    flex: 1,
+                    layout: {
+                        type: "vbox",
+                        align: "stretch"
+                    },
+                    items: [this.label.cloneConfig({
+                        text: me.textWidth
+                    }), this._spnWidth]
+                },
+                {
+                    xtype: "tbspacer",
+                    width: 18
+                },
+                {
+                    xtype: "container",
+                    flex: 1,
+                    layout: {
+                        type: "vbox",
+                        align: "stretch"
+                    },
+                    items: [this.label.cloneConfig({
+                        text: me.textHeight
+                    }), this._spnHeight]
+                }]
+            }]
+        },
+        this._spacer.cloneConfig(), {
+            xtype: "container",
+            height: 40,
+            layout: {
+                type: "vbox",
+                align: "center",
+                pack: "center"
+            },
+            items: [{
+                xtype: "container",
+                width: 182,
+                height: 24,
+                layout: {
+                    type: "hbox",
+                    align: "middle"
+                },
+                items: [this.btnOk = Ext.widget("button", {
+                    cls: "asc-blue-button",
+                    width: 86,
+                    height: 22,
+                    margin: "0 5px 0 0",
+                    text: this.okButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", 1);
+                            this.close();
+                        },
+                        scope: this
+                    }
+                }), this.btnCancel = Ext.widget("button", {
+                    cls: "asc-darkgray-button",
+                    width: 86,
+                    height: 22,
+                    text: this.cancelButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", 0);
+                            this.close();
+                        },
+                        scope: this
+                    }
+                })]
+            }]
+        }];
+        this.callParent(arguments);
+        this.setTitle(this.textTitle);
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+    },
+    setSettings: function (type, pagewitdh, pageheight) {
+        this._spnWidth.setValue(Common.MetricSettings.fnRecalcFromMM(pagewitdh));
+        this._spnHeight.setValue(Common.MetricSettings.fnRecalcFromMM(pageheight));
+        this.cmbSlideSize.select(this.cmbSlideSize.getStore().getAt((type < 0) ? 12 : type));
+    },
+    getSettings: function () {
+        var props = [(this._sizeIdx < 12) ? this._sizeIdx : -1, Common.MetricSettings.fnRecalcToMM(this._spnWidth.getNumberValue()), Common.MetricSettings.fnRecalcToMM(this._spnHeight.getNumberValue())];
+        return props;
+    },
+    updateMetricUnit: function () {
+        var spinners = this.query("commonmetricspinner");
+        if (spinners) {
+            for (var i = 0; i < spinners.length; i++) {
+                var spinner = spinners[i];
+                spinner.setDefaultUnit(Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]);
+                spinner.setStep(Common.MetricSettings.getCurrentMetric() == Common.MetricSettings.c_MetricUnits.cm ? 0.1 : 1);
+            }
+        }
+    },
+    textTitle: "Slide Size Settings",
+    textSlideSize: "Slide Size",
+    textWidth: "Width",
+    textHeight: "Height",
+    cancelButtonText: "Cancel",
+    okButtonText: "Ok",
+    txtStandard: "Standard (4:3)",
+    txtWidescreen1: "Widescreen (16:9)",
+    txtWidescreen2: "Widescreen (16:10)",
+    txtLetter: "Letter Paper (8.5x11 in)",
+    txtLedger: "Ledger Paper (11x17 in)",
+    txtA3: "A3 Paper (297x420 mm)",
+    txtA4: "A4 Paper (210x297 mm)",
+    txtB4: "B4 (ICO) Paper (250x353 mm)",
+    txtB5: "B5 (ICO) Paper (176x250 mm)",
+    txt35: "35 mm Slides",
+    txtOverhead: "Overhead",
+    txtBanner: "Banner",
+    txtCustom: "Custom"
+});

OfficeWeb/apps/presentationeditor/main/app/view/TableSettingsAdvanced.js

@@ -0,0 +1,686 @@
+/*
+ * (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("PE.view.TableSettingsAdvanced", {
+    extend: "Ext.window.Window",
+    alias: "widget.petablesettingsadvanced",
+    requires: ["Common.component.MetricSpinner", "Ext.window.Window", "Ext.form.field.Checkbox", "Ext.Button", "Ext.container.Container", "Common.component.IndeterminateCheckBox", "Ext.Array"],
+    cls: "asc-advanced-settings-window",
+    modal: true,
+    resizable: false,
+    plain: true,
+    constrain: true,
+    height: 396,
+    width: 516,
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    listeners: {},
+    initComponent: function () {
+        this.addEvents("onmodalresult");
+        this.controls = [];
+        this._originalProps = null;
+        this._changedProps = null;
+        this._allTable = false;
+        this.TableMargins = {
+            Left: 0.19,
+            Right: 0.19,
+            Top: 0,
+            Bottom: 0
+        };
+        this.CellMargins = {
+            Left: 0.19,
+            Right: 0.19,
+            Top: null,
+            Bottom: null,
+            Flag: 0
+        };
+        this._initialMarginsDefault = false;
+        this._marginsChange = function (field, newValue, oldValue, eOpts, source, property) {
+            if (source == "table") {
+                this.TableMargins[property] = field.getNumberValue();
+            } else {
+                this.CellMargins[property] = field.getNumberValue();
+            }
+        };
+        this._chCellMargins = Ext.create("Common.component.IndeterminateCheckBox", {
+            id: "tableadv-checkbox-margins",
+            boxLabel: this.textCheckMargins,
+            checked: true,
+            style: "margin-left:10px;",
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    if (oldValue == "checked" && this._originalProps && this._originalProps.get_CellMargins().get_Flag() == 1) {
+                        field.suspendEvents(false);
+                        field.setValue("indeterminate");
+                        field.resumeEvents();
+                    }
+                    this.fillMargins.call(this, field.getValue());
+                    this.CellMargins.Flag = field.getValue();
+                    if (this._changedProps) {
+                        if (this._changedProps.get_CellMargins() === undefined) {
+                            this._changedProps.put_CellMargins(new CMargins());
+                        }
+                        this._changedProps.get_CellMargins().put_Left((this.CellMargins.Left !== null) ? Common.MetricSettings.fnRecalcToMM(this.CellMargins.Left) : null);
+                        this._changedProps.get_CellMargins().put_Top((this.CellMargins.Top !== null) ? Common.MetricSettings.fnRecalcToMM(this.CellMargins.Top) : null);
+                        this._changedProps.get_CellMargins().put_Bottom((this.CellMargins.Bottom !== null) ? Common.MetricSettings.fnRecalcToMM(this.CellMargins.Bottom) : null);
+                        this._changedProps.get_CellMargins().put_Right((this.CellMargins.Right !== null) ? Common.MetricSettings.fnRecalcToMM(this.CellMargins.Right) : null);
+                        if (this.CellMargins.Flag == "indeterminate") {
+                            this._changedProps.get_CellMargins().put_Flag(1);
+                        } else {
+                            if (this.CellMargins.Flag == "checked") {
+                                this._changedProps.get_CellMargins().put_Flag(0);
+                            } else {
+                                this._changedProps.get_CellMargins().put_Flag(2);
+                            }
+                        }
+                    }
+                },
+                this)
+            }
+        });
+        this.controls.push(this._chCellMargins);
+        this._spnMarginTop = Ext.create("Common.component.MetricSpinner", {
+            id: "tableadv-number-margin-top",
+            readOnly: false,
+            maxValue: 55.87,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0 cm",
+            width: 85,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    this._marginsChange(field, newValue, oldValue, eOpts, "cell", "Top");
+                    if (this._changedProps) {
+                        if (this._changedProps.get_CellMargins() === undefined) {
+                            this._changedProps.put_CellMargins(new CMargins());
+                        }
+                        this._changedProps.get_CellMargins().put_Top((this.CellMargins.Top !== null) ? Common.MetricSettings.fnRecalcToMM(this.CellMargins.Top) : null);
+                        if (this.CellMargins.Flag == "indeterminate") {
+                            this._changedProps.get_CellMargins().put_Flag(1);
+                        } else {
+                            if (this.CellMargins.Flag == "checked") {
+                                this._changedProps.get_CellMargins().put_Flag(0);
+                            } else {
+                                this._changedProps.get_CellMargins().put_Flag(2);
+                            }
+                        }
+                    }
+                },
+                this)
+            }
+        });
+        this.controls.push(this._spnMarginTop);
+        this._spnMarginBottom = Ext.create("Common.component.MetricSpinner", {
+            id: "tableadv-number-margin-bottom",
+            readOnly: false,
+            maxValue: 55.87,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0 cm",
+            width: 85,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    this._marginsChange(field, newValue, oldValue, eOpts, "cell", "Bottom");
+                    if (this._changedProps) {
+                        if (this._changedProps.get_CellMargins() === undefined) {
+                            this._changedProps.put_CellMargins(new CMargins());
+                        }
+                        this._changedProps.get_CellMargins().put_Bottom((this.CellMargins.Bottom !== null) ? Common.MetricSettings.fnRecalcToMM(this.CellMargins.Bottom) : null);
+                        if (this.CellMargins.Flag == "indeterminate") {
+                            this._changedProps.get_CellMargins().put_Flag(1);
+                        } else {
+                            if (this.CellMargins.Flag == "checked") {
+                                this._changedProps.get_CellMargins().put_Flag(0);
+                            } else {
+                                this._changedProps.get_CellMargins().put_Flag(2);
+                            }
+                        }
+                    }
+                },
+                this)
+            }
+        });
+        this.controls.push(this._spnMarginBottom);
+        this._spnMarginLeft = Ext.create("Common.component.MetricSpinner", {
+            id: "tableadv-number-margin-left",
+            readOnly: false,
+            maxValue: 9.34,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0.19 cm",
+            width: 85,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    this._marginsChange(field, newValue, oldValue, eOpts, "cell", "Left");
+                    if (this._changedProps) {
+                        if (this._changedProps.get_CellMargins() === undefined) {
+                            this._changedProps.put_CellMargins(new CMargins());
+                        }
+                        this._changedProps.get_CellMargins().put_Left((this.CellMargins.Left !== null) ? Common.MetricSettings.fnRecalcToMM(this.CellMargins.Left) : null);
+                        if (this.CellMargins.Flag == "indeterminate") {
+                            this._changedProps.get_CellMargins().put_Flag(1);
+                        } else {
+                            if (this.CellMargins.Flag == "checked") {
+                                this._changedProps.get_CellMargins().put_Flag(0);
+                            } else {
+                                this._changedProps.get_CellMargins().put_Flag(2);
+                            }
+                        }
+                    }
+                },
+                this)
+            }
+        });
+        this.controls.push(this._spnMarginLeft);
+        this._spnMarginRight = Ext.create("Common.component.MetricSpinner", {
+            id: "tableadv-number-margin-right",
+            readOnly: false,
+            maxValue: 9.34,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0.19 cm",
+            width: 85,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    this._marginsChange(field, newValue, oldValue, eOpts, "cell", "Right");
+                    if (this._changedProps) {
+                        if (this._changedProps.get_CellMargins() === undefined) {
+                            this._changedProps.put_CellMargins(new CMargins());
+                        }
+                        this._changedProps.get_CellMargins().put_Right((this.CellMargins.Right !== null) ? Common.MetricSettings.fnRecalcToMM(this.CellMargins.Right) : null);
+                        if (this.CellMargins.Flag == "indeterminate") {
+                            this._changedProps.get_CellMargins().put_Flag(1);
+                        } else {
+                            if (this.CellMargins.Flag == "checked") {
+                                this._changedProps.get_CellMargins().put_Flag(0);
+                            } else {
+                                this._changedProps.get_CellMargins().put_Flag(2);
+                            }
+                        }
+                    }
+                },
+                this)
+            }
+        });
+        this.controls.push(this._spnMarginRight);
+        this._spnTableMarginTop = Ext.create("Common.component.MetricSpinner", {
+            id: "tableadv-number-margin-table-top",
+            readOnly: false,
+            maxValue: 55.87,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0 cm",
+            width: 85,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    this._marginsChange(field, newValue, oldValue, eOpts, "table", "Top");
+                    if (this._changedProps) {
+                        if (this._changedProps.get_DefaultMargins() === undefined) {
+                            this._changedProps.put_DefaultMargins(new CPaddings());
+                        }
+                        this._changedProps.get_DefaultMargins().put_Top((this.TableMargins.Top !== null) ? Common.MetricSettings.fnRecalcToMM(this.TableMargins.Top) : null);
+                    }
+                },
+                this)
+            }
+        });
+        this.controls.push(this._spnTableMarginTop);
+        this._spnTableMarginBottom = Ext.create("Common.component.MetricSpinner", {
+            id: "tableadv-number-margin-table-bottom",
+            readOnly: false,
+            maxValue: 55.87,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0 cm",
+            width: 85,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    this._marginsChange(field, newValue, oldValue, eOpts, "table", "Bottom");
+                    if (this._changedProps) {
+                        if (this._changedProps.get_DefaultMargins() === undefined) {
+                            this._changedProps.put_DefaultMargins(new CPaddings());
+                        }
+                        this._changedProps.get_DefaultMargins().put_Bottom((this.TableMargins.Bottom !== null) ? Common.MetricSettings.fnRecalcToMM(this.TableMargins.Bottom) : null);
+                    }
+                },
+                this)
+            }
+        });
+        this.controls.push(this._spnTableMarginBottom);
+        this._spnTableMarginLeft = Ext.create("Common.component.MetricSpinner", {
+            id: "tableadv-number-margin-table-left",
+            readOnly: false,
+            maxValue: 9.34,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0.19 cm",
+            width: 85,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    this._marginsChange(field, newValue, oldValue, eOpts, "table", "Left");
+                    if (this._changedProps) {
+                        if (this._changedProps.get_DefaultMargins() === undefined) {
+                            this._changedProps.put_DefaultMargins(new CPaddings());
+                        }
+                        this._changedProps.get_DefaultMargins().put_Left((this.TableMargins.Left !== null) ? Common.MetricSettings.fnRecalcToMM(this.TableMargins.Left) : null);
+                    }
+                },
+                this)
+            }
+        });
+        this.controls.push(this._spnTableMarginLeft);
+        this._spnTableMarginRight = Ext.create("Common.component.MetricSpinner", {
+            id: "tableadv-number-margin-table-right",
+            readOnly: false,
+            maxValue: 9.34,
+            minValue: 0,
+            step: 0.1,
+            defaultUnit: "cm",
+            value: "0.19 cm",
+            width: 85,
+            listeners: {
+                change: Ext.bind(function (field, newValue, oldValue, eOpts) {
+                    this._marginsChange(field, newValue, oldValue, eOpts, "table", "Right");
+                    if (this._changedProps) {
+                        if (this._changedProps.get_DefaultMargins() === undefined) {
+                            this._changedProps.put_DefaultMargins(new CPaddings());
+                        }
+                        this._changedProps.get_DefaultMargins().put_Right((this.TableMargins.Right !== null) ? Common.MetricSettings.fnRecalcToMM(this.TableMargins.Right) : null);
+                    }
+                },
+                this)
+            }
+        });
+        this.controls.push(this._spnTableMarginRight);
+        this._spacer = Ext.create("Ext.toolbar.Spacer", {
+            width: "100%",
+            height: 10,
+            html: '<div style="width: 100%; height: 40%; border-bottom: 1px solid #C7C7C7"></div>'
+        });
+        this.items = [{
+            xtype: "container",
+            height: 300,
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "container",
+                width: 160,
+                layout: {
+                    type: "vbox",
+                    align: "stretch"
+                },
+                items: [{
+                    xtype: "container",
+                    padding: "0 10 0 0",
+                    layout: {
+                        type: "hbox",
+                        align: "middle",
+                        pack: "end"
+                    },
+                    height: 300,
+                    items: [{
+                        xtype: "label",
+                        text: this.textWidthSpaces,
+                        style: "font-weight: bold;"
+                    }]
+                }]
+            },
+            {
+                xtype: "box",
+                cls: "advanced-settings-separator",
+                height: "100%",
+                width: 8
+            },
+            {
+                xtype: "container",
+                padding: "18 0 0 10",
+                width: 330,
+                layout: {
+                    type: "vbox",
+                    align: "stretch"
+                },
+                items: [{
+                    xtype: "label",
+                    style: "font-weight: bold;margin-top: 1px; padding-left:10px;height:13px;",
+                    text: this.textMargins
+                },
+                {
+                    xtype: "tbspacer",
+                    height: 8
+                },
+                this._chCellMargins, {
+                    xtype: "tbspacer",
+                    height: 5
+                },
+                {
+                    xtype: "container",
+                    height: 86,
+                    padding: "0 10",
+                    layout: {
+                        type: "table",
+                        columns: 2,
+                        tdAttrs: {
+                            style: "padding-right: 40px;vertical-align: middle;"
+                        }
+                    },
+                    items: [{
+                        xtype: "label",
+                        text: this.textTop,
+                        width: 85
+                    },
+                    {
+                        xtype: "label",
+                        text: this.textLeft,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 2
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 2
+                    },
+                    this._spnMarginTop, this._spnMarginLeft, {
+                        xtype: "tbspacer",
+                        height: 5
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 5
+                    },
+                    {
+                        xtype: "label",
+                        text: this.textBottom,
+                        width: 85
+                    },
+                    {
+                        xtype: "label",
+                        text: this.textRight,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 2
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 2
+                    },
+                    this._spnMarginBottom, this._spnMarginRight]
+                },
+                {
+                    xtype: "tbspacer",
+                    height: 12
+                },
+                {
+                    xtype: "label",
+                    style: "font-weight: bold;margin-top: 1px; padding-left:10px;height:13px;",
+                    text: this.textDefaultMargins
+                },
+                {
+                    xtype: "tbspacer",
+                    height: 8
+                },
+                {
+                    xtype: "container",
+                    height: 84,
+                    padding: "0 10",
+                    layout: {
+                        type: "table",
+                        columns: 2,
+                        tdAttrs: {
+                            style: "padding-right: 40px;vertical-align: middle;"
+                        }
+                    },
+                    items: [{
+                        xtype: "label",
+                        text: this.textTop,
+                        width: 85
+                    },
+                    {
+                        xtype: "label",
+                        text: this.textLeft,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 2
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 2
+                    },
+                    this._spnTableMarginTop, this._spnTableMarginLeft, {
+                        xtype: "tbspacer",
+                        height: 5
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 5
+                    },
+                    {
+                        xtype: "label",
+                        text: this.textBottom,
+                        width: 85
+                    },
+                    {
+                        xtype: "label",
+                        text: this.textRight,
+                        width: 85
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 2
+                    },
+                    {
+                        xtype: "tbspacer",
+                        height: 2
+                    },
+                    this._spnTableMarginBottom, this._spnTableMarginRight]
+                }]
+            }]
+        },
+        this._spacer.cloneConfig({
+            style: "margin: 0 18px"
+        }), {
+            xtype: "container",
+            height: 40,
+            layout: {
+                type: "vbox",
+                align: "center",
+                pack: "center"
+            },
+            items: [{
+                xtype: "container",
+                width: 182,
+                height: 24,
+                layout: {
+                    type: "hbox",
+                    align: "middle"
+                },
+                items: [this.btnOk = Ext.widget("button", {
+                    cls: "asc-blue-button",
+                    width: 86,
+                    height: 22,
+                    margin: "0 5px 0 0",
+                    text: this.okButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", this, 1);
+                            this.close();
+                        },
+                        scope: this
+                    }
+                }), this.btnCancel = Ext.widget("button", {
+                    cls: "asc-darkgray-button",
+                    width: 86,
+                    height: 22,
+                    text: this.cancelButtonText,
+                    listeners: {
+                        click: function (btn) {
+                            this.fireEvent("onmodalresult", this, 0);
+                            this.close();
+                        },
+                        scope: this
+                    }
+                })]
+            }]
+        }];
+        this.callParent(arguments);
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+        this._setDefaults(this._originalProps);
+        this.setTitle(this.textTitle);
+    },
+    setSettings: function (props) {
+        this._originalProps = new CTableProp(props.tableProps);
+        this._changedProps = null;
+    },
+    _setDefaults: function (props) {
+        if (props) {
+            this._allTable = !props.get_CellSelect();
+            var margins = props.get_DefaultMargins();
+            if (margins) {
+                this.TableMargins = {
+                    Left: (margins.get_Left() !== null) ? Common.MetricSettings.fnRecalcFromMM(margins.get_Left()) : null,
+                    Right: (margins.get_Right() !== null) ? Common.MetricSettings.fnRecalcFromMM(margins.get_Right()) : null,
+                    Top: (margins.get_Top() !== null) ? Common.MetricSettings.fnRecalcFromMM(margins.get_Top()) : null,
+                    Bottom: (margins.get_Bottom() !== null) ? Common.MetricSettings.fnRecalcFromMM(margins.get_Bottom()) : null
+                };
+            }
+            margins = props.get_CellMargins();
+            if (margins) {
+                this.CellMargins = {
+                    Left: (margins.get_Left() !== null) ? Common.MetricSettings.fnRecalcFromMM(margins.get_Left()) : null,
+                    Right: (margins.get_Right() !== null) ? Common.MetricSettings.fnRecalcFromMM(margins.get_Right()) : null,
+                    Top: (margins.get_Top() !== null) ? Common.MetricSettings.fnRecalcFromMM(margins.get_Top()) : null,
+                    Bottom: (margins.get_Bottom() !== null) ? Common.MetricSettings.fnRecalcFromMM(margins.get_Bottom()) : null
+                };
+                var flag = margins.get_Flag();
+                if (flag == 1) {
+                    this.CellMargins.Flag = "indeterminate";
+                    this._chCellMargins.setValue(this.CellMargins.Flag);
+                } else {
+                    if (flag == 0) {
+                        this.CellMargins.Flag = "checked";
+                        this._chCellMargins.setValue(1);
+                    } else {
+                        this.CellMargins.Flag = "unchecked";
+                        this._chCellMargins.setValue(0);
+                    }
+                }
+                this._initialMarginsDefault = (flag == 0);
+            }
+            this.fillMargins(this.CellMargins.Flag);
+        }
+        this._changedProps = new CTableProp();
+    },
+    getSettings: function () {
+        return {
+            tableProps: this._changedProps
+        };
+    },
+    SuspendEvents: function () {
+        for (var i = 0; i < this.controls.length; i++) {
+            this.controls[i].suspendEvents(false);
+        }
+    },
+    ResumeEvents: function () {
+        for (var i = 0; i < this.controls.length; i++) {
+            this.controls[i].resumeEvents();
+        }
+    },
+    fillMargins: function (checkMarginsState) {
+        this.SuspendEvents();
+        if (this._initialMarginsDefault && checkMarginsState == "unchecked") {
+            if (this.CellMargins.Left === null) {
+                this.CellMargins.Left = 0;
+            }
+            if (this.CellMargins.Top === null) {
+                this.CellMargins.Top = 0;
+            }
+            if (this.CellMargins.Right === null) {
+                this.CellMargins.Right = 0;
+            }
+            if (this.CellMargins.Bottom === null) {
+                this.CellMargins.Bottom = 0;
+            }
+        }
+        this._spnMarginLeft.setValue((this.CellMargins.Left !== null) ? this.CellMargins.Left : "");
+        this._spnMarginTop.setValue((this.CellMargins.Top !== null) ? this.CellMargins.Top : "");
+        this._spnMarginRight.setValue((this.CellMargins.Right !== null) ? this.CellMargins.Right : "");
+        this._spnMarginBottom.setValue((this.CellMargins.Bottom !== null) ? this.CellMargins.Bottom : "");
+        var disabled = (checkMarginsState == "checked");
+        this._spnMarginTop.setDisabled(disabled);
+        this._spnMarginBottom.setDisabled(disabled);
+        this._spnMarginLeft.setDisabled(disabled);
+        this._spnMarginRight.setDisabled(disabled);
+        this._spnTableMarginLeft.setValue((this.TableMargins.Left !== null) ? this.TableMargins.Left : "");
+        this._spnTableMarginTop.setValue((this.TableMargins.Top !== null) ? this.TableMargins.Top : "");
+        this._spnTableMarginRight.setValue((this.TableMargins.Right !== null) ? this.TableMargins.Right : "");
+        this._spnTableMarginBottom.setValue((this.TableMargins.Bottom !== null) ? this.TableMargins.Bottom : "");
+        this.ResumeEvents();
+    },
+    updateMetricUnit: function () {
+        var spinners = this.query("commonmetricspinner");
+        if (spinners) {
+            for (var i = 0; i < spinners.length; i++) {
+                var spinner = spinners[i];
+                spinner.setDefaultUnit(Common.MetricSettings.metricName[Common.MetricSettings.getCurrentMetric()]);
+                spinner.setStep(Common.MetricSettings.getCurrentMetric() == Common.MetricSettings.c_MetricUnits.cm ? 0.1 : 1);
+            }
+        }
+    },
+    textWidthSpaces: "Margins",
+    textMargins: "Cell Margins",
+    textTop: "Top",
+    textLeft: "Left",
+    textBottom: "Bottom",
+    textRight: "Right",
+    textTitle: "Table - Advanced Settings",
+    textDefaultMargins: "Default Margins",
+    textCheckMargins: "Use default margins",
+    cancelButtonText: "Cancel",
+    okButtonText: "Ok"
+});

OfficeWeb/apps/presentationeditor/main/app/view/UndockedWindow.js

@@ -0,0 +1,54 @@
+/*
+ * (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("PE.view.UndockedWindow", {
+    extend: "Ext.window.Window",
+    cls: "asc-right-panel-undocked",
+    constrain: true,
+    closable: false,
+    resizable: false,
+    shadow: false,
+    ghost: function () {
+        var instance = this.callParent(arguments);
+        if (!instance.getEl().hasCls("asc-right-panel-undocked-ghost")) {
+            instance.getEl().addCls("asc-right-panel-undocked-ghost");
+        }
+        return instance;
+    },
+    constructor: function (config) {
+        this.callParent(arguments);
+        this.initConfig(config);
+        return this;
+    },
+    initComponent: function () {
+        this.callParent(arguments);
+    }
+});

OfficeWeb/apps/presentationeditor/main/app/view/Viewport.js

@@ -0,0 +1,379 @@
+/*
+ * (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("PE.view.Viewport", {
+    extend: "Ext.container.Viewport",
+    alias: "widget.peviewport",
+    layout: "fit",
+    requires: ["Common.view.Header", "PE.view.DocumentHolder", "PE.view.MainMenu", "PE.view.File", "PE.view.DocumentStatusInfo", "PE.view.DocumentPreview", "Common.view.ChatPanel"],
+    uses: ["PE.view.Toolbar", "PE.view.RightMenu", "PE.view.CreateFile", "PE.view.RecentFiles", "Common.view.CommentsPanel"],
+    initComponent: function () {
+        this.header = Ext.widget("commonheader", {
+            config: {
+                headerCaption: "Presentation Editor"
+            }
+        });
+        this._documentHolder = Ext.widget("pedocumentholder", {
+            id: "editor_sdk",
+            flex: 1,
+            maintainFlex: true,
+            style: "background-color:#b0b0b0;"
+        });
+        this.applicationUI = Ext.widget("container", {
+            id: "pe-applicationUI",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            flex: 1,
+            hidden: true,
+            hideMode: "offsets",
+            items: [{
+                xtype: "container",
+                flex: 1,
+                layout: {
+                    type: "hbox",
+                    align: "stretch"
+                },
+                items: [{
+                    xtype: "pemainmenu",
+                    id: "view-main-menu",
+                    maxWidth: 600,
+                    buttonCollection: [{
+                        cls: "menuFile",
+                        id: "id-menu-file",
+                        tooltip: this.tipFile + " (Alt+F)",
+                        scale: "full",
+                        disabled: true,
+                        toggleGroup: "tbMainMenu",
+                        items: [{
+                            xtype: "pefile",
+                            id: "main-menu-file-options",
+                            width: "100%",
+                            height: "100%"
+                        }]
+                    },
+                    {
+                        cls: "menuSearch",
+                        scale: "modal",
+                        id: "main-menu-search",
+                        disabled: true,
+                        tooltip: this.tipSearch + " (Ctrl+F)"
+                    },
+                    {
+                        cls: "menuSlides",
+                        id: "main-menu-slides",
+                        scale: "modal",
+                        tooltip: this.tipSlides,
+                        disabled: true,
+                        listeners: {
+                            click: Ext.Function.bind(function (btnCall) {
+                                var mainmenu = Ext.getCmp("view-main-menu");
+                                mainmenu.slidesBtnVisible = btnCall.pressed;
+                                if (btnCall.pressed) {
+                                    mainmenu.clearSelection(["menuSlides", "menuSearch"]);
+                                }
+                            }),
+                            toggle: function (btn, pressed) {
+                                var api = btn.getApi();
+                                if (api) {
+                                    api.ShowThumbnails(pressed);
+                                }
+                            }
+                        }
+                    },
+                    {
+                        cls: "menuComments",
+                        id: "id-menu-comments",
+                        hideMode: "display",
+                        scale: 300,
+                        tooltip: this.tipComments + " (Ctrl+Shift+H)",
+                        toggleGroup: "tbMainMenu",
+                        disabled: true,
+                        items: [{
+                            xtype: "commoncommentspanel",
+                            noQuotes: true,
+                            height: "100%"
+                        }]
+                    },
+                    {
+                        cls: "menuChat",
+                        id: "id-menu-chat",
+                        scale: 300,
+                        tooltip: this.tipChat + " (Ctrl+Alt+Q)",
+                        toggleGroup: "tbMainMenu",
+                        disabled: true,
+                        items: [{
+                            xtype: "commonchatpanel",
+                            height: "100%"
+                        }]
+                    },
+                    {
+                        cls: "menuAbout",
+                        id: "id-menu-about",
+                        tooltip: "About",
+                        scale: "full",
+                        toggleGroup: "tbMainMenu",
+                        disabled: true,
+                        items: [{
+                            xtype: "commonabout",
+                            id: "main-menu-about",
+                            width: "100%",
+                            height: "100%"
+                        }]
+                    }],
+                    listeners: {
+                        panelshow: Ext.bind(function (panel, fullScale) {
+                            if (fullScale) {
+                                var btn = Ext.getCmp("main-menu-search");
+                                if (btn.pressed) {
+                                    btn.toggle();
+                                }
+                            }
+                            var mainmenu = Ext.getCmp("view-main-menu");
+                            mainmenu.selectThumbnailsBtn(false);
+                            if (!fullScale) {
+                                this._documentHolder.changePosition();
+                            }
+                        },
+                        this),
+                        panelhide: Ext.bind(function (panel, fullScale) {
+                            var mainmenu = Ext.getCmp("view-main-menu");
+                            mainmenu.selectThumbnailsBtn(true);
+                            if (!fullScale) {
+                                this._documentHolder.changePosition();
+                            }
+                        },
+                        this)
+                    }
+                },
+                {
+                    xtype: "splitter",
+                    id: "main-menu-splitter",
+                    cls: "splitter-document-area",
+                    defaultSplitMin: 300,
+                    hidden: true
+                },
+                {
+                    xtype: "container",
+                    flex: 1,
+                    maintainFlex: true,
+                    layout: {
+                        type: "vbox",
+                        align: "stretch"
+                    },
+                    items: [this._documentHolder]
+                }]
+            },
+            this._documentStatus = Ext.widget("documentstatusinfo", {
+                id: "view-status"
+            })]
+        });
+        this.items = {
+            xtype: "container",
+            layout: {
+                type: "vbox",
+                align: "stretch"
+            },
+            items: [{
+                id: "pe-preview",
+                xtype: "pedocumentpreview"
+            },
+            this.header, this.applicationUI]
+        };
+        this.callParent(arguments);
+    },
+    checkCanHotKey: function () {
+        var winElements = Ext.getDoc().query(".x-window");
+        for (var i = 0; i < winElements.length; i++) {
+            var cmp = Ext.getCmp(winElements[i].id);
+            if (cmp && cmp.isVisible() && cmp.modal) {
+                return false;
+            }
+        }
+        return true;
+    },
+    applyMode: function () {
+        this.hkSaveAs[this.mode.canDownload ? "enable" : "disable"]();
+        this.hkCoAuth[this.mode.canCoAuthoring ? "enable" : "disable"]();
+        this.hkComments[(this.mode.canCoAuthoring && this.mode.isEdit) ? "enable" : "disable"]();
+    },
+    setMode: function (mode, delay) {
+        if (mode.isDisconnected) {
+            if (this.mode === undefined) {
+                this.mode = {};
+            }
+            this.mode.canCoAuthoring = false;
+        } else {
+            this.mode = mode;
+        }
+        if (!delay) {
+            this.applyMode();
+        }
+    },
+    setApi: function (o) {
+        this.api = o;
+        return this;
+    },
+    applyEditorMode: function () {
+        var me = this;
+        me._toolbar = Ext.widget("petoolbar", {
+            id: "view-toolbar"
+        });
+        me.applicationUI.insert(0, me._toolbar);
+        me._rightMenu = Ext.widget("perightmenu", {
+            id: "view-right-menu"
+        });
+        me.applicationUI.items.items[1].add(me._rightMenu);
+        var value = window.localStorage.getItem("pe-hidden-status");
+        if (value !== null && parseInt(value) == 1) {
+            this._documentStatus.setVisible(false);
+        }
+    },
+    createDelayedElements: function () {
+        var _self = this;
+        this.hk = new Ext.util.KeyMap(document, [{
+            key: "f",
+            ctrl: true,
+            shift: false,
+            defaultEventAction: "stopEvent",
+            fn: function (key, e) {
+                var cmp = Ext.getCmp("pe-preview");
+                if (cmp && cmp.isVisible()) {
+                    return;
+                }
+                if (_self.checkCanHotKey()) {
+                    cmp = Ext.getCmp("view-main-menu");
+                    if (cmp) {
+                        cmp.selectMenu("menuSearch", "menuSlides");
+                    }
+                }
+            }
+        },
+        {
+            key: "f",
+            alt: true,
+            defaultEventAction: "stopEvent",
+            fn: function (key, e) {
+                var cmp = Ext.getCmp("pe-preview");
+                if (cmp && cmp.isVisible()) {
+                    return;
+                }
+                if (_self.checkCanHotKey()) {
+                    Ext.menu.Manager.hideAll();
+                    cmp = Ext.getCmp("view-main-menu");
+                    if (cmp) {
+                        cmp.selectMenu("menuFile", "menuSlides");
+                    }
+                }
+            }
+        }]);
+        this.hkSaveAs = new Ext.util.KeyMap(document, {
+            key: "s",
+            ctrl: true,
+            shift: true,
+            defaultEventAction: "stopEvent",
+            fn: function (key, e) {
+                var cmp = Ext.getCmp("pe-preview");
+                if (cmp && cmp.isVisible()) {
+                    return;
+                }
+                if (_self.checkCanHotKey()) {
+                    Ext.menu.Manager.hideAll();
+                    cmp = Ext.getCmp("view-main-menu");
+                    if (cmp) {
+                        cmp.selectMenu("menuFile", "menuSlides");
+                    }
+                }
+            }
+        });
+        this.hkHelp = new Ext.util.KeyMap(document, {
+            key: Ext.EventObject.F1,
+            ctrl: false,
+            shift: false,
+            defaultEventAction: "stopEvent",
+            scope: this,
+            fn: function () {
+                var cmp = Ext.getCmp("pe-preview");
+                if (cmp && cmp.isVisible()) {
+                    return;
+                }
+                if (_self.checkCanHotKey()) {
+                    Ext.menu.Manager.hideAll();
+                    cmp = Ext.getCmp("view-main-menu");
+                    if (cmp) {
+                        cmp.selectMenu("menuFile", "menuSlides");
+                    }
+                }
+            }
+        });
+        this.hkCoAuth = new Ext.util.KeyMap(document, [{
+            key: "q",
+            ctrl: true,
+            alt: true,
+            defaultEventAction: "stopEvent",
+            fn: function (key, e) {
+                var cmp = Ext.getCmp("pe-preview");
+                if (cmp && cmp.isVisible()) {
+                    return;
+                }
+                if (_self.checkCanHotKey()) {
+                    cmp = Ext.getCmp("view-main-menu");
+                    if (cmp) {
+                        cmp.selectMenu("menuChat");
+                    }
+                }
+            }
+        }]);
+        this.hkComments = new Ext.util.KeyMap(document, {
+            key: "H",
+            ctrl: true,
+            shift: true,
+            defaultEventAction: "stopEvent",
+            fn: function () {
+                if (_self.checkCanHotKey()) {
+                    var cmp = Ext.getCmp("view-main-menu");
+                    if (cmp) {
+                        cmp.selectMenu("menuComments");
+                    }
+                }
+            }
+        });
+        Ext.tip.QuickTipManager.init();
+        this.applyMode();
+    },
+    tipFile: "File",
+    tipTitles: "Titles",
+    tipSlides: "Slides",
+    tipSearch: "Search",
+    tipChat: "Chat",
+    tipComments: "Comments"
+});