3.0 source code

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

@@ -0,0 +1,523 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * 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
+ *
+ */
+ define(["text!presentationeditor/main/app/template/ChartSettings.template", "jquery", "underscore", "backbone", "common/main/lib/component/Button"], function (menuTemplate, $, _, Backbone) {
+    PE.Views.ChartSettings = Backbone.View.extend(_.extend({
+        el: "#id-chart-settings",
+        template: _.template(menuTemplate),
+        events: {},
+        options: {
+            alias: "ChartSettings"
+        },
+        initialize: function () {
+            var me = this;
+            this._initSettings = true;
+            this._state = {
+                Width: 0,
+                Height: 0,
+                ChartStyle: 1,
+                ChartType: -1,
+                SeveralCharts: false,
+                DisabledControls: false
+            };
+            this._nRatio = 1;
+            this.spinners = [];
+            this.lockedControls = [];
+            this._locked = false;
+            this._noApply = false;
+            this._originalProps = null;
+            this.render();
+            this.btnChartType = new Common.UI.Button({
+                cls: "btn-large-dataview",
+                iconCls: "item-chartlist bar-normal",
+                menu: new Common.UI.Menu({
+                    style: "width: 330px;",
+                    items: [{
+                        template: _.template('<div id="id-chart-menu-type" class="menu-insertchart"  style="margin: 5px 5px 5px 10px;"></div>')
+                    }]
+                })
+            });
+            this.btnChartType.on("render:after", function (btn) {
+                me.mnuChartTypePicker = new Common.UI.DataView({
+                    el: $("#id-chart-menu-type"),
+                    parentMenu: btn.menu,
+                    restoreHeight: 411,
+                    groups: new Common.UI.DataViewGroupStore([{
+                        id: "menu-chart-group-bar",
+                        caption: me.textColumn
+                    },
+                    {
+                        id: "menu-chart-group-line",
+                        caption: me.textLine
+                    },
+                    {
+                        id: "menu-chart-group-pie",
+                        caption: me.textPie
+                    },
+                    {
+                        id: "menu-chart-group-hbar",
+                        caption: me.textBar
+                    },
+                    {
+                        id: "menu-chart-group-area",
+                        caption: me.textArea
+                    },
+                    {
+                        id: "menu-chart-group-scatter",
+                        caption: me.textPoint
+                    },
+                    {
+                        id: "menu-chart-group-stock",
+                        caption: me.textStock
+                    }]),
+                    store: new Common.UI.DataViewStore([{
+                        group: "menu-chart-group-bar",
+                        type: c_oAscChartTypeSettings.barNormal,
+                        iconCls: "column-normal",
+                        selected: true
+                    },
+                    {
+                        group: "menu-chart-group-bar",
+                        type: c_oAscChartTypeSettings.barStacked,
+                        iconCls: "column-stack"
+                    },
+                    {
+                        group: "menu-chart-group-bar",
+                        type: c_oAscChartTypeSettings.barStackedPer,
+                        iconCls: "column-pstack"
+                    },
+                    {
+                        group: "menu-chart-group-line",
+                        type: c_oAscChartTypeSettings.lineNormal,
+                        iconCls: "line-normal"
+                    },
+                    {
+                        group: "menu-chart-group-line",
+                        type: c_oAscChartTypeSettings.lineStacked,
+                        iconCls: "line-stack"
+                    },
+                    {
+                        group: "menu-chart-group-line",
+                        type: c_oAscChartTypeSettings.lineStackedPer,
+                        iconCls: "line-pstack"
+                    },
+                    {
+                        group: "menu-chart-group-pie",
+                        type: c_oAscChartTypeSettings.pie,
+                        iconCls: "pie-normal"
+                    },
+                    {
+                        group: "menu-chart-group-pie",
+                        type: c_oAscChartTypeSettings.doughnut,
+                        iconCls: "pie-doughnut"
+                    },
+                    {
+                        group: "menu-chart-group-hbar",
+                        type: c_oAscChartTypeSettings.hBarNormal,
+                        iconCls: "bar-normal"
+                    },
+                    {
+                        group: "menu-chart-group-hbar",
+                        type: c_oAscChartTypeSettings.hBarStacked,
+                        iconCls: "bar-stack"
+                    },
+                    {
+                        group: "menu-chart-group-hbar",
+                        type: c_oAscChartTypeSettings.hBarStackedPer,
+                        iconCls: "bar-pstack"
+                    },
+                    {
+                        group: "menu-chart-group-area",
+                        type: c_oAscChartTypeSettings.areaNormal,
+                        iconCls: "area-normal"
+                    },
+                    {
+                        group: "menu-chart-group-area",
+                        type: c_oAscChartTypeSettings.areaStacked,
+                        iconCls: "area-stack"
+                    },
+                    {
+                        group: "menu-chart-group-area",
+                        type: c_oAscChartTypeSettings.areaStackedPer,
+                        iconCls: "area-pstack"
+                    },
+                    {
+                        group: "menu-chart-group-scatter",
+                        type: c_oAscChartTypeSettings.scatter,
+                        iconCls: "point-normal"
+                    },
+                    {
+                        group: "menu-chart-group-stock",
+                        type: c_oAscChartTypeSettings.stock,
+                        iconCls: "stock-normal"
+                    }]),
+                    itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
+                });
+            });
+            this.btnChartType.render($("#chart-button-type"));
+            this.mnuChartTypePicker.on("item:click", _.bind(this.onSelectType, this, this.btnChartType));
+            this.lockedControls.push(this.btnChartType);
+            this.btnChartStyle = new Common.UI.Button({
+                cls: "btn-large-dataview",
+                iconCls: "item-wrap",
+                menu: new Common.UI.Menu({
+                    menuAlign: "tr-br",
+                    items: [{
+                        template: _.template('<div id="id-chart-menu-style" style="width: 245px; margin: 0 5px;"></div>')
+                    }]
+                })
+            });
+            this.btnChartStyle.on("render:after", function (btn) {
+                me.mnuChartStylePicker = new Common.UI.DataView({
+                    el: $("#id-chart-menu-style"),
+                    style: "max-height: 411px;",
+                    parentMenu: btn.menu,
+                    store: new Common.UI.DataViewStore(),
+                    itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-image: url(<%= imageUrl %>); background-position: 0 0;"></div>')
+                });
+                if (me.btnChartStyle.menu) {
+                    me.btnChartStyle.menu.on("show:after", function () {
+                        me.mnuChartStylePicker.scroller.update({
+                            alwaysVisibleY: true
+                        });
+                    });
+                }
+            });
+            this.btnChartStyle.render($("#chart-button-style"));
+            this.mnuChartStylePicker.on("item:click", _.bind(this.onSelectStyle, this, this.btnChartStyle));
+            this.lockedControls.push(this.btnChartStyle);
+            this.btnEditData = new Common.UI.Button({
+                el: $("#chart-button-edit-data")
+            });
+            this.btnEditData.on("click", _.bind(this.setEditData, this));
+            this.lockedControls.push(this.btnEditData);
+            this.spnWidth = new Common.UI.MetricSpinner({
+                el: $("#chart-spin-width"),
+                step: 0.1,
+                width: 78,
+                defaultUnit: "cm",
+                value: "3 cm",
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.spinners.push(this.spnWidth);
+            this.lockedControls.push(this.spnWidth);
+            this.spnHeight = new Common.UI.MetricSpinner({
+                el: $("#chart-spin-height"),
+                step: 0.1,
+                width: 78,
+                defaultUnit: "cm",
+                value: "3 cm",
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.spinners.push(this.spnHeight);
+            this.lockedControls.push(this.spnHeight);
+            this.spnWidth.on("change", _.bind(this.onWidthChange, this));
+            this.spnHeight.on("change", _.bind(this.onHeightChange, this));
+            this.btnRatio = new Common.UI.Button({
+                cls: "btn-toolbar btn-toolbar-default",
+                iconCls: "advanced-btn-ratio",
+                style: "margin-bottom: 1px;",
+                enableToggle: true,
+                hint: this.textKeepRatio
+            });
+            this.btnRatio.render($("#chart-button-ratio"));
+            this.lockedControls.push(this.btnRatio);
+            var value = window.localStorage.getItem("pe-settings-chartratio");
+            if (value !== null && parseInt(value) == 1) {
+                this.btnRatio.toggle(true);
+            }
+            this.btnRatio.on("click", _.bind(function (btn, e) {
+                if (btn.pressed && this.spnHeight.getNumberValue() > 0) {
+                    this._nRatio = this.spnWidth.getNumberValue() / this.spnHeight.getNumberValue();
+                }
+                window.localStorage.setItem("pe-settings-chartratio", (btn.pressed) ? 1 : 0);
+            },
+            this));
+        },
+        render: function () {
+            var el = $(this.el);
+            el.html(this.template({
+                scope: this
+            }));
+        },
+        setApi: function (api) {
+            this.api = api;
+            if (this.api) {
+                this.api.asc_registerCallback("asc_onUpdateChartStyles", _.bind(this._onUpdateChartStyles, this));
+            }
+            return this;
+        },
+        ChangeSettings: function (props) {
+            if (this._initSettings) {
+                this.createDelayedElements();
+                this._initSettings = false;
+            }
+            this.disableControls(this._locked);
+            if (props) {
+                this._originalProps = new CAscChartProp(props);
+                this._noApply = true;
+                var value = props.get_SeveralCharts() || this._locked;
+                if (this._state.SeveralCharts !== value) {
+                    this.btnEditData.setDisabled(value);
+                    this._state.SeveralCharts = value;
+                }
+                value = props.get_SeveralChartTypes();
+                if (this._state.SeveralCharts && value) {
+                    this.btnChartType.setIconCls("");
+                    this._state.ChartType = null;
+                } else {
+                    var type = props.getType();
+                    if (this._state.ChartType !== type) {
+                        var record = this.mnuChartTypePicker.store.findWhere({
+                            type: type
+                        });
+                        this.mnuChartTypePicker.selectRecord(record, true);
+                        if (record) {
+                            this.btnChartType.setIconCls("item-chartlist " + record.get("iconCls"));
+                        }
+                        this.updateChartStyles(this.api.asc_getChartPreviews(type));
+                        this._state.ChartType = type;
+                    }
+                }
+                value = props.get_SeveralChartStyles();
+                if (this._state.SeveralCharts && value) {
+                    var btnIconEl = this.btnChartStyle.cmpEl.find("span.btn-icon");
+                    btnIconEl.css("background-image", "none");
+                    this.mnuChartStylePicker.selectRecord(null, true);
+                    this._state.ChartStyle = null;
+                } else {
+                    value = props.getStyle();
+                    if (this._state.ChartStyle !== value) {
+                        var record = this.mnuChartStylePicker.store.findWhere({
+                            data: value
+                        });
+                        this.mnuChartStylePicker.selectRecord(record, true);
+                        if (record) {
+                            var btnIconEl = this.btnChartStyle.cmpEl.find("span.btn-icon");
+                            btnIconEl.css("background-image", "url(" + record.get("imageUrl") + ")");
+                        }
+                        this._state.ChartStyle = value;
+                    }
+                }
+                this._noApply = false;
+                value = props.get_Width();
+                if (Math.abs(this._state.Width - value) > 0.001 || (this._state.Width === null || value === null) && (this._state.Width !== value)) {
+                    this.spnWidth.setValue((value !== null) ? Common.Utils.Metric.fnRecalcFromMM(value) : "", true);
+                    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.spnHeight.setValue((value !== null) ? Common.Utils.Metric.fnRecalcFromMM(value) : "", true);
+                    this._state.Height = value;
+                }
+                if (props.get_Height() > 0) {
+                    this._nRatio = props.get_Width() / props.get_Height();
+                }
+            }
+        },
+        updateMetricUnit: function () {
+            if (this.spinners) {
+                for (var i = 0; i < this.spinners.length; i++) {
+                    var spinner = this.spinners[i];
+                    spinner.setDefaultUnit(Common.Utils.Metric.metricName[Common.Utils.Metric.getCurrentMetric()]);
+                    spinner.setStep(Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.cm ? 0.1 : 1);
+                }
+            }
+        },
+        createDelayedElements: function () {
+            this.updateMetricUnit();
+        },
+        setEditData: function () {
+            var diagramEditor = PE.getController("Common.Controllers.ExternalDiagramEditor").getView("Common.Views.ExternalDiagramEditor");
+            if (diagramEditor) {
+                diagramEditor.setEditMode(true);
+                diagramEditor.show();
+                var chart = this.api.asc_getChartObject();
+                if (chart) {
+                    diagramEditor.setChartData(new Asc.asc_CChartBinary(chart));
+                }
+            }
+        },
+        onSelectType: function (btn, picker, itemView, record) {
+            if (this._noApply) {
+                return;
+            }
+            var rawData = {},
+            isPickerSelect = _.isFunction(record.toJSON);
+            if (isPickerSelect) {
+                if (record.get("selected")) {
+                    rawData = record.toJSON();
+                } else {
+                    return;
+                }
+            } else {
+                rawData = record;
+            }
+            this.btnChartType.setIconCls("item-chartlist " + rawData.iconCls);
+            this._state.ChartType = -1;
+            if (this.api && !this._noApply) {
+                var props = new CAscChartProp();
+                props.changeType(rawData.type);
+                this.api.ChartApply(props);
+            }
+            this.fireEvent("editcomplete", this);
+        },
+        onSelectStyle: function (btn, picker, itemView, record) {
+            if (this._noApply) {
+                return;
+            }
+            var rawData = {},
+            isPickerSelect = _.isFunction(record.toJSON);
+            if (isPickerSelect) {
+                if (record.get("selected")) {
+                    rawData = record.toJSON();
+                } else {
+                    return;
+                }
+            } else {
+                rawData = record;
+            }
+            var style = "url(" + rawData.imageUrl + ")";
+            var btnIconEl = this.btnChartStyle.cmpEl.find("span.btn-icon");
+            btnIconEl.css("background-image", style);
+            if (this.api && !this._noApply) {
+                var props = new CAscChartProp();
+                props.putStyle(rawData.data);
+                this.api.ChartApply(props);
+            }
+            this.fireEvent("editcomplete", this);
+        },
+        _onUpdateChartStyles: function () {
+            if (this.api && this._state.ChartType !== null && this._state.ChartType > -1) {
+                this.updateChartStyles(this.api.asc_getChartPreviews(this._state.ChartType));
+            }
+        },
+        updateChartStyles: function (styles) {
+            var me = this;
+            if (styles && styles.length > 0) {
+                var stylesStore = this.mnuChartStylePicker.store;
+                if (stylesStore) {
+                    var stylearray = [],
+                    selectedIdx = -1,
+                    selectedUrl;
+                    _.each(styles, function (item, index) {
+                        stylearray.push({
+                            imageUrl: item.asc_getImageUrl(),
+                            data: item.asc_getStyle(),
+                            tip: me.textStyle + " " + item.asc_getStyle()
+                        });
+                        if (me._state.ChartStyle == item.asc_getStyle()) {
+                            selectedIdx = index;
+                            selectedUrl = item.asc_getImageUrl();
+                        }
+                    });
+                    stylesStore.reset(stylearray, {
+                        silent: false
+                    });
+                }
+            }
+            this.mnuChartStylePicker.selectByIndex(selectedIdx, true);
+            if (selectedIdx >= 0 && this.btnChartStyle.cmpEl) {
+                var style = "url(" + selectedUrl + ")";
+                var btnIconEl = this.btnChartStyle.cmpEl.find("span.btn-icon");
+                btnIconEl.css("background-image", style);
+            }
+        },
+        onWidthChange: function (field, newValue, oldValue, eOpts) {
+            var w = field.getNumberValue();
+            var h = this.spnHeight.getNumberValue();
+            if (this.btnRatio.pressed) {
+                h = w / this._nRatio;
+                if (h > this.spnHeight.options.maxValue) {
+                    h = this.spnHeight.options.maxValue;
+                    w = h * this._nRatio;
+                    this.spnWidth.setValue(w, true);
+                }
+                this.spnHeight.setValue(h, true);
+            }
+            if (this.api) {
+                var props = new CAscChartProp();
+                props.put_Width(Common.Utils.Metric.fnRecalcToMM(w));
+                props.put_Height(Common.Utils.Metric.fnRecalcToMM(h));
+                this.api.ChartApply(props);
+            }
+            this.fireEvent("editcomplete", this);
+        },
+        onHeightChange: function (field, newValue, oldValue, eOpts) {
+            var h = field.getNumberValue(),
+            w = this.spnWidth.getNumberValue();
+            if (this.btnRatio.pressed) {
+                w = h * this._nRatio;
+                if (w > this.spnWidth.options.maxValue) {
+                    w = this.spnWidth.options.maxValue;
+                    h = w / this._nRatio;
+                    this.spnHeight.setValue(h, true);
+                }
+                this.spnWidth.setValue(w, true);
+            }
+            if (this.api) {
+                var props = new CAscChartProp();
+                props.put_Width(Common.Utils.Metric.fnRecalcToMM(w));
+                props.put_Height(Common.Utils.Metric.fnRecalcToMM(h));
+                this.api.ChartApply(props);
+            }
+            this.fireEvent("editcomplete", this);
+        },
+        setLocked: function (locked) {
+            this._locked = locked;
+        },
+        disableControls: function (disable) {
+            if (this._state.DisabledControls !== disable) {
+                this._state.DisabledControls = disable;
+                _.each(this.lockedControls, function (item) {
+                    item.setDisabled(disable);
+                });
+            }
+        },
+        textKeepRatio: "Constant Proportions",
+        textSize: "Size",
+        textWidth: "Width",
+        textHeight: "Height",
+        textEditData: "Edit Data",
+        textChartType: "Change Chart Type",
+        textLine: "Line Chart",
+        textColumn: "Column Chart",
+        textBar: "Bar Chart",
+        textArea: "Area Chart",
+        textPie: "Pie Chart",
+        textPoint: "Point Chart",
+        textStock: "Stock Chart",
+        textStyle: "Style"
+    },
+    PE.Views.ChartSettings || {}));
+});

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

@@ -1,90 +0,0 @@
-/*
- * (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

@@ -1,231 +0,0 @@
-/*
- * (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

@@ -1,246 +0,0 @@
-/*
- * (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

@@ -1,249 +0,0 @@
-/*
- * (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

@@ -1,363 +1,257 @@
-/*
- * (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."
+/**
+ *  DocumentPreview.js
+ *
+ *  Created by Julia Radzhabova on 4/18/14
+ *  Copyright (c) 2014 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'jquery',
+    'underscore',
+    'backbone',
+    'common/main/lib/component/BaseView',
+    'presentationeditor/main/app/model/Pages'
+], function () {
+    'use strict';
+
+    function _updatePagesCaption(model,value,opts) {
+        var curr = model.get('current'),
+            cnt = model.get('count');
+        $('#preview-label-slides').text(
+            Common.Utils.String.format(this.slideIndexText, (curr<cnt) ? curr : cnt , cnt) );
+    }
+
+    PE.Views.DocumentPreview = Common.UI.BaseView.extend(_.extend({
+        el: '#pe-preview',
+
+        // Delegated events for creating new items, and clearing completed ones.
+        events: {
+        },
+
+        options: {
+            alias: 'DocumentPreview'
+        },
+
+        initialize : function(options) {
+            _.extend(this.options, options || {});
+
+            this.template = [
+                '<div id="presentation-preview" style="width:100%; height:100%"></div>',
+                '<div id="preview-controls-panel" class="preview-controls" style="position: absolute; bottom: 0;">',
+                    '<div class="preview-group" style="">',
+                        '<button id="btn-preview-prev" type="button" class="btn small btn-toolbar btn-toolbar-default"><span class="btn-icon">&nbsp;</span></button>',
+                        '<button id="btn-preview-play" type="button" class="btn small btn-toolbar btn-toolbar-default"><span class="btn-icon">&nbsp;</span></button>',
+                        '<button id="btn-preview-next" type="button" class="btn small btn-toolbar btn-toolbar-default"><span class="btn-icon">&nbsp;</span></button>',
+                    '<div class="separator"/>',
+                    '</div>',
+                    '<div class="preview-group dropup">',
+                        '<label id="preview-label-slides" class="status-label" data-toggle="dropdown">Slide 1 of 1</label>',
+                        '<div id="preview-goto-box" class="dropdown-menu">',
+                            '<label style="float:left;line-height:22px;">' + this.goToSlideText + '</label>',
+                            '<div id="preview-goto-page" style="display:inline-block;"></div>',
+                        '</div>',
+                    '</div>',
+                    '<div class="preview-group" style="">',
+                        '<div class="separator"/>',
+                        '<button id="btn-preview-close" type="button" class="btn small btn-toolbar btn-toolbar-default"><span class="btn-icon">&nbsp;</span></button>',
+                    '</div>',
+                '</div>'
+            ].join('');
+
+            this.pages = new PE.Models.Pages({current:1, count:1});
+            this.pages.on('change', _.bind(_updatePagesCaption,this));
+        },
+
+        render: function () {
+            var el = $(this.el),
+                me = this;
+            el.html(_.template(this.template, {
+                scope: this
+            }));
+
+            this.btnPrev = new Common.UI.Button({
+                el: $('#btn-preview-prev',this.el),
+                hint: this.txtPrev,
+                hintAnchor: 'top'
+            });
+            this.btnPrev.on('click', _.bind(function() {
+                if (this.api) this.api.DemonstrationPrevSlide();
+            }, this));
+
+            this.btnNext = new Common.UI.Button({
+                el: $('#btn-preview-next',this.el),
+                hint: this.txtNext,
+                hintAnchor: 'top'
+            });
+            this.btnNext.on('click', _.bind(function() {
+                if (this.api) this.api.DemonstrationNextSlide();
+            }, this));
+
+            this.btnPlay = new Common.UI.Button({
+                el: $('#btn-preview-play',this.el),
+                hint: this.txtPlay,
+                hintAnchor: 'top'
+            });
+            this.btnPlay.on('click', _.bind(function(btn) {
+                var iconEl = $('.btn-icon', this.btnPlay.cmpEl);
+                if (iconEl.hasClass('btn-pause')) {
+                    iconEl.removeClass('btn-pause');
+                    this.btnPlay.updateHint(this.txtPlay);
+                    if (this.api)
+                        this.api.DemonstrationPause();
+                } else {
+                    iconEl.addClass('btn-pause');
+                    this.btnPlay.updateHint(this.txtPause);
+                    if (this.api)
+                        this.api.DemonstrationPlay ();
+                }
+            }, this));
+
+            this.btnClose = new Common.UI.Button({
+                el: $('#btn-preview-close',this.el),
+                hint: this.txtClose,
+                hintAnchor: 'top'
+            });
+            this.btnClose.on('click', _.bind(function() {
+                if (this.api) this.api.EndDemonstration();
+            }, this));
+
+            this.txtGoToPage = new Common.UI.InputField({
+                el          : $('#preview-goto-page'),
+                allowBlank  : true,
+                validateOnChange: true,
+                style       : 'width: 60px;',
+                maskExp: /[0-9]/,
+                validation  : function(value) {
+                    if (/(^[0-9]+$)/.test(value)) {
+                        value = parseInt(value);
+                        if (undefined !== value && value > 0 && value <= me.pages.get('count'))
+                            return true;
+                    }
+
+                    return me.txtPageNumInvalid;
+                }
+            }).on('keypress:after', function(input, e) {
+                    var box = me.$el.find('#preview-goto-box');
+                    if (e.keyCode === Common.UI.Keys.RETURN) {
+                        var edit = box.find('input[type=text]'), page = parseInt(edit.val());
+                        if (!page || page-- > me.pages.get('count') || page < 0) {
+                            edit.select();
+                            return false;
+                        }
+
+                        box.focus();                        // for IE
+                        box.parent().removeClass('open');
+
+                        me.api.DemonstrationGoToSlide(page);
+                        me.api.asc_enableKeyEvents(true);
+
+                        return false;
+                    }
+                }
+            );
+
+            var goto = this.$el.find('#preview-goto-box');
+            goto.on('click', function() {
+                return false;
+            });
+            goto.parent().on('show.bs.dropdown',
+                function () {
+//                    me.txtGoToPage.setValue(me.api.getCurrentPage() + 1);
+//                    me.txtGoToPage.checkValidate();
+                    var edit = me.txtGoToPage.$el.find('input');
+                    _.defer(function(){edit.focus(); edit.select();}, 100);
+
+                }
+            );
+            goto.parent().on('hide.bs.dropdown',
+                function () { var box = me.$el.find('#preview-goto-box');
+                    if (me.api && box) {
+                        box.focus();                        // for IE
+                        box.parent().removeClass('open');
+
+                        me.api.asc_enableKeyEvents(true);
+                    }
+                }
+            );
+        },
+
+        show: function() {
+            var toolbar = PE.getController('Toolbar').getView('Toolbar');
+            if (toolbar._state.hasCollaborativeChanges) {
+                toolbar._state.hasCollaborativeChanges = false;
+                if (toolbar.synchTooltip) toolbar.synchTooltip.hide();
+                toolbar.needShowSynchTip = true;
+            }
+
+            Common.UI.BaseView.prototype.show.call(this,arguments);
+
+            var iconEl = $('.btn-icon', this.btnPlay.cmpEl);
+            if (!iconEl.hasClass('btn-pause')) {
+                iconEl.addClass('btn-pause');
+                this.btnPlay.updateHint(this.txtPause);
+            }
+            $('#viewport-vbox-layout').css('z-index','0');
+            this.fireEvent('editcomplete', this);
+        },
+
+        hide: function() {
+            Common.UI.BaseView.prototype.hide.call(this,arguments);
+
+            $('#viewport-vbox-layout').css('z-index','auto');
+            Common.NotificationCenter.trigger('layout:changed', 'preview');
+
+            var toolbar = PE.getController('Toolbar').getView('Toolbar');
+            if (toolbar.needShowSynchTip) {
+                toolbar.needShowSynchTip = false;
+                toolbar.onCollaborativeChanges();
+            }
+
+            this.fireEvent('editcomplete', this);
+        },
+
+        setApi: function(o) {
+            this.api = o;
+
+            if (this.api) {
+                this.api.asc_registerCallback('asc_onCountPages',   _.bind(this.onCountSlides, this));
+                this.api.asc_registerCallback('asc_onEndDemonstration',  _.bind(this.onEndDemonstration, this));
+                this.api.asc_registerCallback('asc_onDemonstrationSlideChanged',  _.bind(this.onDemonstrationSlideChanged, this));
+                this.api.DemonstrationEndShowMessage(this.txtFinalMessage);
+            }
+            return this;
+        },
+
+        onCountSlides: function(count){
+            this.pages.set('count', count);
+        },
+
+        onDemonstrationSlideChanged: function(slideNum) {
+            this.pages.set('current', slideNum+1);
+            if (this.api && _.isNumber(slideNum)) {
+                var count = this.api.getCountPages();
+                if (count !== this.pages.get('count'))
+                    this.pages.set('count', count);
+                this.btnPrev.setDisabled(slideNum<=0);
+                this.btnNext.setDisabled(slideNum>=count-1);
+                this.txtGoToPage.setValue(slideNum + 1);
+                this.txtGoToPage.checkValidate();
+            }
+        },
+
+        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.',
+        txtPageNumInvalid: 'Slide number invalid'
+    }, PE.Views.DocumentPreview || {}));
 });

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

@@ -1,360 +0,0 @@
-/*
- * (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

@@ -1,367 +0,0 @@
-/*
- * (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

@@ -1,425 +0,0 @@
-/*
- * (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/FileMenu.js

@@ -0,0 +1,254 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * 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
+ *
+ */
+ define(["text!presentationeditor/main/app/template/FileMenu.template", "underscore", "common/main/lib/component/BaseView"], function (tpl, _) {
+    PE.Views.FileMenu = Common.UI.BaseView.extend(_.extend({
+        el: "#file-menu-panel",
+        template: _.template(tpl),
+        events: function () {
+            return {
+                "click .fm-btn": _.bind(function (event) {
+                    var $item = $(event.currentTarget);
+                    if ($item.hasClass("disabled")) {
+                        return;
+                    } else {
+                        if (!$item.hasClass("active")) {
+                            $(".fm-btn", this.el).removeClass("active");
+                            $item.addClass("active");
+                        }
+                    }
+                    var item = _.findWhere(this.items, {
+                        el: event.currentTarget
+                    });
+                    if (item) {
+                        var panel = this.panels[item.options.action];
+                        this.fireEvent("item:click", [this, item.options.action, !!panel]);
+                        if (panel) {
+                            this.$el.find(".content-box:visible").hide();
+                            this.active = item.options.action;
+                            panel.show();
+                        }
+                    }
+                },
+                this)
+            };
+        },
+        initialize: function () {},
+        render: function () {
+            this.$el = $(this.el);
+            this.$el.html(this.template());
+            this.items = [];
+            this.items.push(new Common.UI.MenuItem({
+                el: $("#fm-btn-return", this.el),
+                action: "back",
+                caption: this.btnReturnCaption,
+                canFocused: false
+            }), new Common.UI.MenuItem({
+                el: $("#fm-btn-save", this.el),
+                action: "save",
+                caption: this.btnSaveCaption,
+                canFocused: false
+            }), new Common.UI.MenuItem({
+                el: $("#fm-btn-edit", this.el),
+                action: "edit",
+                caption: this.btnToEditCaption,
+                canFocused: false
+            }), new Common.UI.MenuItem({
+                el: $("#fm-btn-download", this.el),
+                action: "saveas",
+                caption: this.btnDownloadCaption,
+                canFocused: false
+            }), new Common.UI.MenuItem({
+                el: $("#fm-btn-print", this.el),
+                action: "print",
+                caption: this.btnPrintCaption,
+                canFocused: false
+            }), new Common.UI.MenuItem({
+                el: $("#fm-btn-recent", this.el),
+                action: "recent",
+                caption: this.btnRecentFilesCaption,
+                canFocused: false
+            }), new Common.UI.MenuItem({
+                el: $("#fm-btn-create", this.el),
+                action: "new",
+                caption: this.btnCreateNewCaption,
+                canFocused: false
+            }), new Common.UI.MenuItem({
+                el: $("#fm-btn-info", this.el),
+                action: "info",
+                caption: this.btnInfoCaption,
+                canFocused: false
+            }), new Common.UI.MenuItem({
+                el: $("#fm-btn-settings", this.el),
+                action: "opts",
+                caption: this.btnSettingsCaption,
+                canFocused: false
+            }), new Common.UI.MenuItem({
+                el: $("#fm-btn-help", this.el),
+                action: "help",
+                caption: this.btnHelpCaption,
+                canFocused: false
+            }), new Common.UI.MenuItem({
+                el: $("#fm-btn-back", this.el),
+                action: "exit",
+                caption: this.btnBackCaption,
+                canFocused: false
+            }));
+            var me = this;
+            this.panels = {};
+            require(["presentationeditor/main/app/view/FileMenuPanels"], function () {
+                me.panels = {
+                    "saveas": (new PE.Views.FileMenuPanels.ViewSaveAs({
+                        menu: me
+                    })).render(),
+                    "opts": (new PE.Views.FileMenuPanels.Settings({
+                        menu: me
+                    })).render(),
+                    "info": (new PE.Views.FileMenuPanels.DocumentInfo({
+                        menu: me
+                    })).render(),
+                    "help": (new PE.Views.FileMenuPanels.Help({
+                        menu: me
+                    })).render()
+                };
+                me.$el.find(".content-box").hide();
+            });
+            return this;
+        },
+        show: function (panel) {
+            if (this.isVisible() && panel === undefined) {
+                return;
+            }
+            if (!panel) {
+                panel = this.active || (this.mode.canDownload ? "saveas" : "info");
+            }
+            this.$el.show();
+            this.selectMenu(panel);
+            if (this.mode.isEdit) {
+                PE.getController("Toolbar").DisableToolbar(true);
+            }
+            this.api.asc_enableKeyEvents(false);
+        },
+        hide: function () {
+            this.$el.hide();
+            if (this.mode.isEdit) {
+                PE.getController("Toolbar").DisableToolbar(false);
+            }
+            this.fireEvent("filemenu:hide", [this]);
+            this.api.asc_enableKeyEvents(true);
+        },
+        applyMode: function () {
+            this.items[0][this.mode.canBack ? "show" : "hide"]();
+            this.items[0].$el.find("+.devider")[this.mode.canBack ? "show" : "hide"]();
+            this.items[5][this.mode.canOpenRecent ? "show" : "hide"]();
+            this.items[6][this.mode.canCreateNew ? "show" : "hide"]();
+            this.items[6].$el.find("+.devider")[this.mode.canCreateNew ? "show" : "hide"]();
+            this.items[3][this.mode.canDownload ? "show" : "hide"]();
+            this.items[1][this.mode.isEdit ? "show" : "hide"]();
+            this.items[2][!this.mode.isEdit && this.mode.canEdit ? "show" : "hide"]();
+            this.panels["opts"].setMode(this.mode);
+            this.panels["info"].setMode(this.mode).updateInfo(this.document);
+            if (this.mode.canCreateNew) {
+                if (this.mode.templates && this.mode.templates.length) {
+                    $("a", this.items[6].$el).text(this.btnCreateNewCaption + "...");
+                    this.panels["new"] = ((new PE.Views.FileMenuPanels.CreateNew({
+                        menu: this,
+                        docs: this.mode.templates
+                    })).render());
+                }
+            }
+            if (this.mode.canOpenRecent) {
+                if (this.mode.recent) {
+                    this.panels["recent"] = (new PE.Views.FileMenuPanels.RecentFiles({
+                        menu: this,
+                        recent: this.mode.recent
+                    })).render();
+                }
+            }
+            this.panels["help"].setLangConfig(this.mode.lang);
+        },
+        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();
+            }
+        },
+        setApi: function (api) {
+            this.api = api;
+        },
+        loadDocument: function (data) {
+            this.document = data.doc;
+        },
+        selectMenu: function (menu) {
+            if (menu) {
+                var item = this._getMenuItem(menu),
+                panel = this.panels[menu];
+                if (item && panel) {
+                    $(".fm-btn", this.el).removeClass("active");
+                    item.$el.addClass("active");
+                    this.$el.find(".content-box:visible").hide();
+                    panel.show();
+                    this.active = menu;
+                }
+            }
+        },
+        disableMenu: function (menu, status) {
+            if (menu) {
+                var item = this._getMenuItem(menu);
+                if (item) {
+                    item.setDisabled(status);
+                }
+            }
+        },
+        _getMenuItem: function (action) {
+            return _.find(this.items, function (item) {
+                return item.options.action == action;
+            });
+        },
+        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",
+        btnSettingsCaption: "Advanced Settings..."
+    },
+    PE.Views.FileMenu || {}));
+});

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

@@ -0,0 +1,602 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * 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
+ *
+ */
+ define(["common/main/lib/view/DocumentAccessDialog", "common/main/lib/component/CheckBox"], function () { ! PE.Views.FileMenuPanels && (PE.Views.FileMenuPanels = {});
+    PE.Views.FileMenuPanels.ViewSaveAs = Common.UI.BaseView.extend({
+        el: "#panel-saveas",
+        menu: undefined,
+        formats: [[{
+            name: "PDF",
+            imgCls: "pdf",
+            type: c_oAscFileType.PDF
+        },
+        {
+            name: "PPTX",
+            imgCls: "pptx",
+            type: c_oAscFileType.PPTX
+        }]],
+        template: _.template(["<table><tbody>", "<% _.each(rows, function(row) { %>", "<tr>", "<% _.each(row, function(item) { %>", '<td><span class="btn-doc-format <%= item.imgCls %>" /></td>', "<% }) %>", "</tr>", "<% }) %>", "</tbody></table>"].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, arguments);
+            this.menu = options.menu;
+        },
+        render: function () {
+            $(this.el).html(this.template({
+                rows: this.formats
+            }));
+            $(".btn-doc-format", this.el).on("click", _.bind(this.onFormatClick, this));
+            if (_.isUndefined(this.scroller)) {
+                this.scroller = new Common.UI.Scroller({
+                    el: $(this.el),
+                    suppressScrollX: true
+                });
+            }
+            this.flatFormats = _.flatten(this.formats);
+            return this;
+        },
+        onFormatClick: function (e) {
+            var format = /\s(\w+)/.exec(e.currentTarget.className);
+            if (format) {
+                format = format[1];
+                var item = _.findWhere(this.flatFormats, {
+                    imgCls: format
+                });
+                if (item && this.menu) {
+                    this.menu.fireEvent("saveas:format", [this.menu, item.type]);
+                }
+            }
+        }
+    });
+    PE.Views.FileMenuPanels.Settings = Common.UI.BaseView.extend(_.extend({
+        el: "#panel-settings",
+        menu: undefined,
+        template: _.template(["<table><tbody>", '<tr class="edit">', '<td class="left"><label><%= scope.txtInput %></label></td>', '<td class="right"><div id="fms-chb-input-mode"/></td>', "</tr>", '<tr class="divider edit"></tr>', "<tr>", '<td class="left"><label><%= scope.strZoom %></label></td>', '<td class="right"><div id="fms-cmb-zoom" class="input-group-nr" /></td>', "</tr>", '<tr class="divider"></tr>', '<tr class="coauth">', '<td class="left"><label><%= scope.strShowChanges %></label></td>', '<td class="right"><span id="fms-cmb-show-changes" /></td>', "</tr>", '<tr class="divider coauth"></tr>', '<tr class="autosave">', '<td class="left"><label><%= scope.textAutoSave %></label></td>', '<td class="right"><span id="fms-chb-autosave" /></td>', "</tr>", '<tr class="divider autosave"></tr>', "<tr>", '<td class="left"><label><%= scope.textAlignGuides %></label></td>', '<td class="right"><span id="fms-chb-align-guides" /></td>', "</tr>", '<tr class="divider"></tr>', '<tr class="edit">', '<td class="left"><label><%= scope.strUnit %></label></td>', '<td class="right"><span id="fms-cmb-unit" /></td>', "</tr>", '<tr class="divider edit"></tr>', "<tr>", '<td class="left"></td>', '<td class="right"><button id="fms-btn-apply" class="btn normal dlg-btn primary"><%= scope.okButtonText %></button></td>', "</tr>", "</tbody></table>"].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, arguments);
+            this.menu = options.menu;
+        },
+        render: function () {
+            $(this.el).html(this.template({
+                scope: this
+            }));
+            this.chInputMode = new Common.UI.CheckBox({
+                el: $("#fms-chb-input-mode"),
+                labelText: this.strInputMode
+            });
+            this.cmbZoom = new Common.UI.ComboBox({
+                el: $("#fms-cmb-zoom"),
+                style: "width: 160px;",
+                editable: false,
+                cls: "input-group-nr",
+                data: [{
+                    value: -1,
+                    displayValue: this.txtFitSlide
+                },
+                {
+                    value: 50,
+                    displayValue: "50%"
+                },
+                {
+                    value: 60,
+                    displayValue: "60%"
+                },
+                {
+                    value: 70,
+                    displayValue: "70%"
+                },
+                {
+                    value: 80,
+                    displayValue: "80%"
+                },
+                {
+                    value: 90,
+                    displayValue: "90%"
+                },
+                {
+                    value: 100,
+                    displayValue: "100%"
+                },
+                {
+                    value: 110,
+                    displayValue: "110%"
+                },
+                {
+                    value: 120,
+                    displayValue: "120%"
+                },
+                {
+                    value: 150,
+                    displayValue: "150%"
+                },
+                {
+                    value: 175,
+                    displayValue: "175%"
+                },
+                {
+                    value: 200,
+                    displayValue: "200%"
+                }]
+            });
+            this.cmbShowChanges = new Common.UI.ComboBox({
+                el: $("#fms-cmb-show-changes"),
+                style: "width: 160px;",
+                editable: false,
+                cls: "input-group-nr",
+                data: [{
+                    value: "all",
+                    displayValue: this.txtAll
+                },
+                {
+                    value: "last",
+                    displayValue: this.txtLast
+                }]
+            });
+            this.chAutosave = new Common.UI.CheckBox({
+                el: $("#fms-chb-autosave"),
+                labelText: this.strAutosave
+            });
+            this.chAlignGuides = new Common.UI.CheckBox({
+                el: $("#fms-chb-align-guides"),
+                labelText: this.strAlignGuides
+            });
+            this.cmbUnit = new Common.UI.ComboBox({
+                el: $("#fms-cmb-unit"),
+                style: "width: 160px;",
+                editable: false,
+                cls: "input-group-nr",
+                data: [{
+                    value: Common.Utils.Metric.c_MetricUnits["cm"],
+                    displayValue: this.txtCm
+                },
+                {
+                    value: Common.Utils.Metric.c_MetricUnits["pt"],
+                    displayValue: this.txtPt
+                }]
+            });
+            this.btnApply = new Common.UI.Button({
+                el: "#fms-btn-apply"
+            });
+            this.btnApply.on("click", _.bind(this.applySettings, this));
+            if (_.isUndefined(this.scroller)) {
+                this.scroller = new Common.UI.Scroller({
+                    el: $(this.el),
+                    suppressScrollX: true
+                });
+            }
+            return this;
+        },
+        show: function () {
+            Common.UI.BaseView.prototype.show.call(this, arguments);
+            this.updateSettings();
+        },
+        setMode: function (mode) {
+            $("tr.edit", this.el)[mode.isEdit ? "show" : "hide"]();
+            $("tr.autosave", this.el)[mode.isEdit && mode.canAutosave ? "show" : "hide"]();
+            $("tr.coauth", this.el)[mode.canCoAuthoring && mode.isEdit ? "show" : "hide"]();
+        },
+        updateSettings: function () {
+            var value = window.localStorage.getItem("pe-settings-inputmode");
+            this.chInputMode.setValue(value !== null && parseInt(value) == 1);
+            value = window.localStorage.getItem("pe-settings-zoom");
+            value = (value !== null) ? parseInt(value) : -1;
+            var item = this.cmbZoom.store.findWhere({
+                value: value
+            });
+            this.cmbZoom.setValue(item ? parseInt(item.get("value")) : 100);
+            value = window.localStorage.getItem("pe-settings-showchanges");
+            item = this.cmbShowChanges.store.findWhere({
+                value: value
+            });
+            this.cmbShowChanges.setValue(item ? item.get("value") : "last");
+            value = window.localStorage.getItem("pe-settings-unit");
+            item = this.cmbUnit.store.findWhere({
+                value: parseInt(value)
+            });
+            this.cmbUnit.setValue(item ? parseInt(item.get("value")) : 0);
+            this._oldUnits = this.cmbUnit.getValue();
+            value = window.localStorage.getItem("pe-settings-autosave");
+            this.chAutosave.setValue(value === null || parseInt(value) == 1);
+            value = window.localStorage.getItem("pe-settings-showsnaplines");
+            this.chAlignGuides.setValue(value === null || parseInt(value) == 1);
+        },
+        applySettings: function () {
+            window.localStorage.setItem("pe-settings-inputmode", this.chInputMode.isChecked() ? 1 : 0);
+            window.localStorage.setItem("pe-settings-zoom", this.cmbZoom.getValue());
+            window.localStorage.setItem("pe-settings-showchanges", this.cmbShowChanges.getValue());
+            window.localStorage.setItem("pe-settings-unit", this.cmbUnit.getValue());
+            window.localStorage.setItem("pe-settings-autosave", this.chAutosave.isChecked() ? 1 : 0);
+            window.localStorage.setItem("pe-settings-showsnaplines", this.chAlignGuides.isChecked() ? 1 : 0);
+            if (this.menu) {
+                this.menu.fireEvent("settings:apply", [this.menu]);
+                if (this._oldUnits !== this.cmbUnit.getValue()) {
+                    Common.NotificationCenter.trigger("settings:unitschanged", this);
+                }
+            }
+        },
+        strInputMode: "Turn on hieroglyphs",
+        strZoom: "Default Zoom Value",
+        okButtonText: "Apply",
+        txtFitSlide: "Fit Slide",
+        txtInput: "Alternate Input",
+        strUnit: "Unit of Measurement",
+        txtCm: "Centimeter",
+        txtPt: "Point",
+        textAutoSave: "Autosave",
+        strAutosave: "Turn on autosave",
+        strShowChanges: "Realtime Collaboration Changes",
+        txtAll: "View All",
+        txtLast: "View Last",
+        textAlignGuides: "Alignment Guides",
+        strAlignGuides: "Turn on alignment guides"
+    },
+    PE.Views.FileMenuPanels.Settings || {}));
+    PE.Views.FileMenuPanels.RecentFiles = Common.UI.BaseView.extend({
+        el: "#panel-recentfiles",
+        menu: undefined,
+        template: _.template(['<div id="id-recent-view" style="margin: 20px 0;"></div>'].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, arguments);
+            this.menu = options.menu;
+            this.recent = options.recent;
+        },
+        render: function () {
+            $(this.el).html(this.template());
+            this.viewRecentPicker = new Common.UI.DataView({
+                el: $("#id-recent-view"),
+                store: new Common.UI.DataViewStore(this.recent),
+                itemTemplate: _.template(['<div class="recent-wrap">', '<div class="recent-icon"></div>', '<div class="file-name"><%= Common.Utils.String.htmlEncode(title) %></div>', '<div class="file-info"><%= Common.Utils.String.htmlEncode(folder) %></div>', "</div>"].join(""))
+            });
+            this.viewRecentPicker.on("item:click", _.bind(this.onRecentFileClick, this));
+            if (_.isUndefined(this.scroller)) {
+                this.scroller = new Common.UI.Scroller({
+                    el: $(this.el),
+                    suppressScrollX: true
+                });
+            }
+            return this;
+        },
+        onRecentFileClick: function (view, itemview, record) {
+            if (this.menu) {
+                this.menu.fireEvent("recent:open", [this.menu, record.get("url")]);
+            }
+        }
+    });
+    PE.Views.FileMenuPanels.CreateNew = Common.UI.BaseView.extend(_.extend({
+        el: "#panel-createnew",
+        menu: undefined,
+        events: function () {
+            return {
+                "click .blank-document-btn": _.bind(this._onBlankDocument, this),
+                "click .thumb-list .thumb-wrap": _.bind(this._onDocumentTemplate, this)
+            };
+        },
+        template: _.template(['<h3 style="margin-top: 20px;"><%= scope.fromBlankText %></h3><hr noshade />', '<div class="blank-document">', '<div class="blank-document-btn"></div>', '<div class="blank-document-info">', "<h3><%= scope.newDocumentText %></h3>", "<%= scope.newDescriptionText %>", "</div>", "</div>", "<h3><%= scope.fromTemplateText %></h3><hr noshade />", '<div class="thumb-list">', "<% _.each(docs, function(item) { %>", '<div class="thumb-wrap" template="<%= item.name %>">', '<div class="thumb"<% if (!_.isEmpty(item.icon)) { %> style="background-image: url(<%= item.icon %>);" <% } %> />', '<div class="title"><%= item.name %></div>', "</div>", "<% }) %>", "</div>"].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, arguments);
+            this.menu = options.menu;
+        },
+        render: function () {
+            $(this.el).html(this.template({
+                scope: this,
+                docs: this.options[0].docs
+            }));
+            if (_.isUndefined(this.scroller)) {
+                this.scroller = new Common.UI.Scroller({
+                    el: $(this.el),
+                    suppressScrollX: true
+                });
+            }
+            return this;
+        },
+        _onBlankDocument: function () {
+            if (this.menu) {
+                this.menu.fireEvent("create:new", [this.menu, "blank"]);
+            }
+        },
+        _onDocumentTemplate: function (e) {
+            if (this.menu) {
+                this.menu.fireEvent("create:new", [this.menu, e.currentTarget.attributes["template"].value]);
+            }
+        },
+        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"
+    },
+    PE.Views.FileMenuPanels.CreateNew || {}));
+    PE.Views.FileMenuPanels.DocumentInfo = Common.UI.BaseView.extend(_.extend({
+        el: "#panel-info",
+        menu: undefined,
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, arguments);
+            this.rendered = false;
+            this.template = _.template(['<table class="main">', "<tr>", '<td class="left"><label>' + this.txtTitle + "</label></td>", '<td class="right"><label id="id-info-title">-</label></td>', "</tr>", '<tr class="author">', '<td class="left"><label>' + this.txtAuthor + "</label></td>", '<td class="right"><span class="userLink" id="id-info-author">-</span></td>', "</tr>", '<tr class="placement">', '<td class="left"><label>' + this.txtPlacement + "</label></td>", '<td class="right"><label id="id-info-placement">-</label></td>', "</tr>", '<tr class="date">', '<td class="left"><label>' + this.txtDate + "</label></td>", '<td class="right"><label id="id-info-date">-</label></td>', "</tr>", '<tr class="divider date"></tr>', '<tr class="rights">', '<td class="left" style="vertical-align: top;"><label>' + this.txtRights + "</label></td>", '<td class="right"><div id="id-info-rights"></div></td>', "</tr>", '<tr class="edit-rights">', '<td class="left"></td><td class="right"><button id="id-info-btn-edit" class="btn normal dlg-btn primary" style="margin-right: 10px;width: auto;">' + this.txtBtnAccessRights + "</button></td>", "</tr>", "</table>"].join(""));
+            this.templateRights = _.template(["<table>", "<% _.each(users, function(item) { %>", "<tr>", '<td><span class="userLink"><%= Common.Utils.String.htmlEncode(item.user) %></span></td>', "<td><%= Common.Utils.String.htmlEncode(item.permissions) %></td>", "</tr>", "<% }); %>", "</table>"].join(""));
+            this.menu = options.menu;
+        },
+        render: function () {
+            $(this.el).html(this.template());
+            this.lblTitle = $("#id-info-title");
+            this.lblPlacement = $("#id-info-placement");
+            this.lblDate = $("#id-info-date");
+            this.lblAuthor = $("#id-info-author");
+            this.cntRights = $("#id-info-rights");
+            this.btnEditRights = new Common.UI.Button({
+                el: "#id-info-btn-edit"
+            });
+            this.btnEditRights.on("click", _.bind(this.changeAccessRights, this));
+            this.rendered = true;
+            this.updateInfo(this.doc);
+            if (_.isUndefined(this.scroller)) {
+                this.scroller = new Common.UI.Scroller({
+                    el: $(this.el),
+                    suppressScrollX: true
+                });
+            }
+            return this;
+        },
+        show: function () {
+            Common.UI.BaseView.prototype.show.call(this, arguments);
+        },
+        hide: function () {
+            Common.UI.BaseView.prototype.hide.call(this, arguments);
+        },
+        updateInfo: function (doc) {
+            this.doc = doc;
+            if (!this.rendered) {
+                return;
+            }
+            doc = doc || {};
+            this.lblTitle.text((doc.title) ? doc.title : "-");
+            if (doc.info) {
+                if (doc.info.author) {
+                    this.lblAuthor.text(doc.info.author);
+                }
+                this._ShowHideInfoItem("author", doc.info.author !== undefined && doc.info.author !== null);
+                if (doc.info.created) {
+                    this.lblDate.text(doc.info.created);
+                }
+                this._ShowHideInfoItem("date", doc.info.created !== undefined && doc.info.created !== null);
+                if (doc.info.folder) {
+                    this.lblPlacement.text(doc.info.folder);
+                }
+                this._ShowHideInfoItem("placement", doc.info.folder !== undefined && doc.info.folder !== null);
+                if (doc.info.sharingSettings) {
+                    this.cntRights.html(this.templateRights({
+                        users: doc.info.sharingSettings
+                    }));
+                }
+                this._ShowHideInfoItem("rights", doc.info.sharingSettings !== undefined && doc.info.sharingSettings !== null && this._readonlyRights !== true);
+                this._ShowHideInfoItem("edit-rights", !!this.sharingSettingsUrl && this.sharingSettingsUrl.length && this._readonlyRights !== true);
+            } else {
+                this._ShowHideDocInfo(false);
+            }
+        },
+        _ShowHideInfoItem: function (cls, visible) {
+            $("tr." + cls, this.el)[visible ? "show" : "hide"]();
+        },
+        _ShowHideDocInfo: function (visible) {
+            this._ShowHideInfoItem("date", visible);
+            this._ShowHideInfoItem("placement", visible);
+            this._ShowHideInfoItem("author", visible);
+            this._ShowHideInfoItem("rights", visible);
+            this._ShowHideInfoItem("edit-rights", visible);
+        },
+        setMode: function (mode) {
+            this.sharingSettingsUrl = mode.sharingSettingsUrl;
+            return this;
+        },
+        changeAccessRights: function (btn, event, opts) {
+            var me = this;
+            var win = new Common.Views.DocumentAccessDialog({
+                settingsurl: this.sharingSettingsUrl
+            });
+            win.on("accessrights", function (obj, rights) {
+                me.doc.info.sharingSettings = rights;
+                me.cntRights.html(me.templateRights({
+                    users: me.doc.info.sharingSettings
+                }));
+            });
+            win.show();
+        },
+        onLostEditRights: function () {
+            this._readonlyRights = true;
+            if (!this.rendered) {
+                return;
+            }
+            this._ShowHideInfoItem("rights", false);
+            this._ShowHideInfoItem("edit-rights", false);
+        },
+        txtTitle: "Document Title",
+        txtAuthor: "Author",
+        txtPlacement: "Placement",
+        txtDate: "Creation Date",
+        txtRights: "Persons who have rights",
+        txtBtnAccessRights: "Change access rights"
+    },
+    PE.Views.FileMenuPanels.DocumentInfo || {}));
+    PE.Views.FileMenuPanels.Help = Common.UI.BaseView.extend({
+        el: "#panel-help",
+        menu: undefined,
+        template: _.template(['<div style="width:100%; height:100%; position: relative;">', '<div id="id-help-contents" style="position: absolute; width:200px; top: 0; bottom: 0;" class="no-padding"></div>', '<div id="id-help-frame" style="position: absolute; left: 200px; top: 0; right: 0; bottom: 0;" class="no-padding"></div>', "</div>"].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, arguments);
+            this.menu = options.menu;
+            this.urlPref = "resources/help/en/";
+            this.itemclicked = false;
+            this.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"
+            }];
+            if (Common.Utils.isIE) {
+                window.onhelp = function () {
+                    return false;
+                };
+            }
+        },
+        render: function () {
+            $(this.el).html(this.template());
+            this.viewHelpPicker = new Common.UI.DataView({
+                el: $("#id-help-contents"),
+                store: new Common.UI.DataViewStore([]),
+                keyMoveDirection: "vertical",
+                itemTemplate: _.template(['<div id="<%= id %>" class="help-item-wrap">', '<div class="caption"><%= name %></div>', "</div>"].join(""))
+            });
+            this.viewHelpPicker.on("item:add", _.bind(function (dataview, itemview, record) {
+                if (record.has("headername")) {
+                    $(itemview.el).before('<div class="header-name">' + record.get("headername") + "</div>");
+                }
+            },
+            this));
+            this.viewHelpPicker.on("item:select", _.bind(function (dataview, itemview, record) {
+                this.itemclicked = true;
+                this.iFrame.src = this.urlPref + record.get("src");
+            },
+            this));
+            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 = _.bind(function () {
+                if (!this.itemclicked) {
+                    var src = arguments[0].currentTarget.contentDocument.URL;
+                    var rec = this.viewHelpPicker.store.find(function (record) {
+                        return (src.indexOf(record.get("src")) > 0);
+                    });
+                    if (rec) {
+                        this.viewHelpPicker.selectRecord(rec, true);
+                        this.viewHelpPicker.scrollToRecord(rec);
+                    }
+                }
+                this.itemclicked = false;
+            },
+            this);
+            $("#id-help-frame").append(this.iFrame);
+            return this;
+        },
+        setLangConfig: function (lang) {
+            var me = this;
+            var store = this.viewHelpPicker.store;
+            if (lang) {
+                lang = lang.split("-")[0];
+                var config = {
+                    dataType: "json",
+                    error: function () {
+                        if (me.urlPref.indexOf("resources/help/en/") < 0) {
+                            me.urlPref = "resources/help/en/";
+                            store.url = "resources/help/en/Contents.json";
+                            store.fetch(config);
+                        } else {
+                            me.urlPref = "resources/help/en/";
+                            store.reset(me.en_data);
+                        }
+                    },
+                    success: function () {
+                        var rec = store.at(0);
+                        me.viewHelpPicker.selectRecord(rec);
+                        me.iFrame.src = me.urlPref + rec.get("src");
+                    }
+                };
+                store.url = "resources/help/" + lang + "/Contents.json";
+                store.fetch(config);
+                this.urlPref = "resources/help/" + lang + "/";
+            }
+        },
+        show: function () {
+            Common.UI.BaseView.prototype.show.call(this);
+            if (!this._scrollerInited) {
+                this.viewHelpPicker.scroller.update();
+                this._scrollerInited = true;
+            }
+        }
+    });
+});

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

@@ -1,440 +0,0 @@
-/*
- * (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

@@ -1,259 +1,321 @@
-/*
- * (c) Copyright Ascensio System SIA 2010-2014
- *
- * This program is a free software product. You can redistribute it and/or 
- * modify it under the terms of the GNU Affero General Public License (AGPL) 
- * version 3 as published by the Free Software Foundation. In accordance with 
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under 
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
- Ext.define("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"
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * 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
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+var c_oHyperlinkType = {
+    InternalLink: 0,
+    WebLink: 1
+};
+define(["common/main/lib/util/utils", "common/main/lib/component/InputField", "common/main/lib/component/ComboBox", "common/main/lib/component/RadioBox", "common/main/lib/component/Window"], function () {
+    PE.Views.HyperlinkSettingsDialog = Common.UI.Window.extend(_.extend({
+        options: {
+            width: 350,
+            style: "min-width: 230px;",
+            cls: "modal-dlg",
+            id: "window-hyperlink-settings"
+        },
+        initialize: function (options) {
+            _.extend(this.options, {
+                title: this.textTitle
+            },
+            options || {});
+            this.template = ['<div class="box" style="height: 270px;">', '<div class="input-row">', '<label style="font-weight: bold;">' + this.textLinkType + "</label>", "</div>", '<div id="id-dlg-hyperlink-type" class="input-row" style="margin-bottom: 5px;"></div>', '<div id="id-external-link">', '<div class="input-row">', '<label style="font-weight: bold;">' + this.strLinkTo + " *</label>", "</div>", '<div id="id-dlg-hyperlink-url" class="input-row" style="margin-bottom: 5px;"></div>', "</div>", '<div id="id-internal-link" class="hidden" style="margin-top: 15px;">', '<div id="id-dlg-hyperlink-radio-next" style="display: block;margin-bottom: 5px;"></div>', '<div id="id-dlg-hyperlink-radio-prev" style="display: block;margin-bottom: 5px;"></div>', '<div id="id-dlg-hyperlink-radio-first" style="display: block;margin-bottom: 5px;"></div>', '<div id="id-dlg-hyperlink-radio-last"  style="display: block;margin-bottom: 5px;"></div>', '<div id="id-dlg-hyperlink-radio-slide" style="display: inline-block;margin-bottom: 5px;margin-right: 10px;"></div>', '<div id="id-dlg-hyperlink-slide" style="display: inline-block;margin-bottom: 10px;"></div>', "</div>", '<div class="input-row">', '<label style="font-weight: bold;">' + this.strDisplay + "</label>", "</div>", '<div id="id-dlg-hyperlink-display" class="input-row" style="margin-bottom: 5px;"></div>', '<div class="input-row">', '<label style="font-weight: bold;">' + this.textTipText + "</label>", "</div>", '<div id="id-dlg-hyperlink-tip" class="input-row" style="margin-bottom: 5px;"></div>', "</div>", '<div class="footer right">', '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;">' + this.okButtonText + "</button>", '<button class="btn normal dlg-btn" result="cancel">' + this.cancelButtonText + "</button>", "</div>"].join("");
+            this.options.tpl = _.template(this.template, this.options);
+            this.slides = this.options.slides;
+            Common.UI.Window.prototype.initialize.call(this, this.options);
+        },
+        render: function () {
+            Common.UI.Window.prototype.render.call(this);
+            var me = this,
+            $window = this.getChild();
+            me._arrTypeSrc = [{
+                displayValue: me.textInternalLink,
+                value: c_oHyperlinkType.InternalLink
+            },
+            {
+                displayValue: me.textExternalLink,
+                value: c_oHyperlinkType.WebLink
+            }];
+            me.cmbLinkType = new Common.UI.ComboBox({
+                el: $("#id-dlg-hyperlink-type"),
+                cls: "input-group-nr",
+                style: "width: 100%;",
+                menuStyle: "min-width: 318px;",
+                editable: false,
+                data: this._arrTypeSrc
+            });
+            me.cmbLinkType.setValue(me._arrTypeSrc[1].value);
+            me.cmbLinkType.on("selected", _.bind(function (combo, record) {
+                this.ShowHideElem(record.value);
+            },
+            me));
+            me.inputUrl = new Common.UI.InputField({
+                el: $("#id-dlg-hyperlink-url"),
+                allowBlank: false,
+                blankError: me.txtEmpty,
+                validateOnBlur: false,
+                style: "width: 100%;",
+                validation: function (value) {
+                    me.isEmail = false;
+                    var isvalid = value.strongMatch(Common.Utils.hostnameRe); ! isvalid && (me.isEmail = isvalid = value.strongMatch(Common.Utils.emailRe)); ! isvalid && (isvalid = value.strongMatch(Common.Utils.ipRe)); ! isvalid && (isvalid = value.strongMatch(Common.Utils.localRe));
+                    if (isvalid) {
+                        return true;
+                    } else {
+                        return me.txtNotUrl;
+                    }
+                }
+            });
+            me.inputDisplay = new Common.UI.InputField({
+                el: $("#id-dlg-hyperlink-display"),
+                allowBlank: true,
+                validateOnBlur: false,
+                style: "width: 100%;"
+            }).on("changed:after", function () {
+                me.isTextChanged = true;
+            });
+            me.inputTip = new Common.UI.InputField({
+                el: $("#id-dlg-hyperlink-tip"),
+                style: "width: 100%;"
+            });
+            me.radioNext = new Common.UI.RadioBox({
+                el: $("#id-dlg-hyperlink-radio-next"),
+                labelText: this.txtNext,
+                name: "asc-radio-slide",
+                checked: true
+            });
+            me.radioPrev = new Common.UI.RadioBox({
+                el: $("#id-dlg-hyperlink-radio-prev"),
+                labelText: this.txtPrev,
+                name: "asc-radio-slide"
+            });
+            me.radioFirst = new Common.UI.RadioBox({
+                el: $("#id-dlg-hyperlink-radio-first"),
+                labelText: this.txtFirst,
+                name: "asc-radio-slide"
+            });
+            me.radioLast = new Common.UI.RadioBox({
+                el: $("#id-dlg-hyperlink-radio-last"),
+                labelText: this.txtLast,
+                name: "asc-radio-slide"
+            });
+            me.radioSlide = new Common.UI.RadioBox({
+                el: $("#id-dlg-hyperlink-radio-slide"),
+                labelText: this.txtSlide,
+                name: "asc-radio-slide"
+            });
+            me.cmbSlides = new Common.UI.ComboBox({
+                el: $("#id-dlg-hyperlink-slide"),
+                cls: "input-group-nr",
+                style: "width: 50px;",
+                menuStyle: "min-width: 50px; max-height: 200px;",
+                editable: false,
+                data: this.slides
+            });
+            me.cmbSlides.setValue(0);
+            me.cmbSlides.on("selected", _.bind(function (combo, record) {
+                me.radioSlide.setValue(true);
+            },
+            me));
+            $window.find(".dlg-btn").on("click", _.bind(this.onBtnClick, this));
+            $window.find("input").on("keypress", _.bind(this.onKeyPress, this));
+            me.externalPanel = $window.find("#id-external-link");
+            me.internalPanel = $window.find("#id-internal-link");
+        },
+        setSettings: function (props) {
+            if (props) {
+                var me = this;
+                var type = me.parseUrl(props.get_Value());
+                me.cmbLinkType.setValue(type);
+                me.ShowHideElem(type);
+                if (props.get_Text() !== null) {
+                    me.inputDisplay.setValue(props.get_Text());
+                    me.inputDisplay.setDisabled(false);
+                } else {
+                    this.inputDisplay.setValue(this.textDefault);
+                    this.inputDisplay.setDisabled(true);
+                }
+                this.isTextChanged = false;
+                this.inputTip.setValue(props.get_ToolTip());
+                if (type == c_oHyperlinkType.WebLink) {
+                    me.inputUrl.cmpEl.find("input").focus();
+                }
+            }
+        },
+        getSettings: function () {
+            var me = this,
+            props = new CHyperlinkProperty();
+            var def_display = "";
+            if (me.cmbLinkType.getValue() == c_oHyperlinkType.InternalLink) {
+                var url = "ppaction://hlink";
+                var tip = "";
+                var txttip = me.inputTip.getValue();
+                if (this.radioSlide.getValue()) {
+                    url = url + "sldjumpslide" + (this.cmbSlides.getValue());
+                    tip = this.txtSlide + " " + (this.cmbSlides.getValue() + 1);
+                } 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(_.isEmpty(txttip) ? tip : txttip);
+                def_display = tip;
+            } else {
+                var url = $.trim(me.inputUrl.getValue());
+                if (!/(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url)) {
+                    url = ((me.isEmail) ? "mailto:": "http://") + url;
+                }
+                props.put_Value(url);
+                props.put_ToolTip(me.inputTip.getValue());
+                def_display = url;
+            }
+            if (!me.inputDisplay.isDisabled() && (me.isTextChanged || _.isEmpty(me.inputDisplay.getValue()))) {
+                if (_.isEmpty(me.inputDisplay.getValue())) {
+                    me.inputDisplay.setValue(def_display);
+                }
+                props.put_Text(me.inputDisplay.getValue());
+            } else {
+                props.put_Text(null);
+            }
+            return props;
+        },
+        onBtnClick: function (event) {
+            if (event.currentTarget && event.currentTarget.attributes["result"]) {
+                this._handleInput(event.currentTarget.attributes["result"].value);
+            }
+        },
+        onKeyPress: function (event) {
+            if (event.keyCode == Common.UI.Keys.RETURN) {
+                this._handleInput("ok");
+                return false;
+            }
+        },
+        _handleInput: function (state) {
+            if (this.options.handler) {
+                if (state == "ok") {
+                    var checkurl = (this.cmbLinkType.getValue() == c_oHyperlinkType.WebLink) ? this.inputUrl.checkValidate() : true,
+                    checkdisp = this.inputDisplay.checkValidate();
+                    if (checkurl !== true) {
+                        this.inputUrl.cmpEl.find("input").focus();
+                        return;
+                    }
+                    if (checkdisp !== true) {
+                        this.inputDisplay.cmpEl.find("input").focus();
+                        return;
+                    }
+                }
+                this.options.handler.call(this, this, state);
+            }
+            this.close();
+        },
+        ShowHideElem: function (value) {
+            this.externalPanel.toggleClass("hidden", value !== c_oHyperlinkType.WebLink);
+            this.internalPanel.toggleClass("hidden", value !== c_oHyperlinkType.InternalLink);
+        },
+        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);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                return c_oHyperlinkType.InternalLink;
+            } else {
+                this.inputUrl.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",
+        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",
+        textDefault: "Selected text"
+    },
+    PE.Views.HyperlinkSettingsDialog || {}));
 });

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

@@ -1,338 +1,213 @@
-/*
- * (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"
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * 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
+ *
+ */
+ define(["text!presentationeditor/main/app/template/ImageSettings.template", "jquery", "underscore", "backbone", "common/main/lib/component/Button", "common/main/lib/view/ImageFromUrlDialog", "presentationeditor/main/app/view/ImageSettingsAdvanced"], function (menuTemplate, $, _, Backbone) {
+    PE.Views.ImageSettings = Backbone.View.extend(_.extend({
+        el: "#id-image-settings",
+        template: _.template(menuTemplate),
+        events: {},
+        options: {
+            alias: "ImageSettings"
+        },
+        initialize: function () {
+            var me = this;
+            this._initSettings = true;
+            this._state = {
+                Width: 0,
+                Height: 0,
+                DisabledControls: false
+            };
+            this.lockedControls = [];
+            this._locked = false;
+            this._noApply = false;
+            this._originalProps = null;
+            this.render();
+            this.labelWidth = $(this.el).find("#image-label-width");
+            this.labelHeight = $(this.el).find("#image-label-height");
+            this.btnOriginalSize = new Common.UI.Button({
+                el: $("#image-button-original-size")
+            });
+            this.lockedControls.push(this.btnOriginalSize);
+            this.btnInsertFromFile = new Common.UI.Button({
+                el: $("#image-button-from-file")
+            });
+            this.lockedControls.push(this.btnInsertFromFile);
+            this.btnInsertFromUrl = new Common.UI.Button({
+                el: $("#image-button-from-url")
+            });
+            this.lockedControls.push(this.btnInsertFromUrl);
+            this.btnOriginalSize.on("click", _.bind(this.setOriginalSize, this));
+            this.btnInsertFromFile.on("click", _.bind(function (btn) {
+                if (this.api) {
+                    this.api.ChangeImageFromFile();
+                }
+                this.fireEvent("editcomplete", this);
+            },
+            this));
+            this.btnInsertFromUrl.on("click", _.bind(this.insertFromUrl, this));
+            $(this.el).on("click", "#image-advanced-link", _.bind(this.openAdvancedSettings, this));
+        },
+        render: function () {
+            var el = $(this.el);
+            el.html(this.template({
+                scope: this
+            }));
+            this.linkAdvanced = $("#image-advanced-link");
+        },
+        setApi: function (api) {
+            this.api = api;
+            return this;
+        },
+        updateMetricUnit: function () {
+            var value = Common.Utils.Metric.fnRecalcFromMM(this._state.Width);
+            this.labelWidth[0].innerHTML = this.textWidth + ": " + value.toFixed(1) + " " + Common.Utils.Metric.metricName[Common.Utils.Metric.getCurrentMetric()];
+            value = Common.Utils.Metric.fnRecalcFromMM(this._state.Height);
+            this.labelHeight[0].innerHTML = this.textHeight + ": " + value.toFixed(1) + " " + Common.Utils.Metric.metricName[Common.Utils.Metric.getCurrentMetric()];
+        },
+        createDelayedElements: function () {
+            this.updateMetricUnit();
+        },
+        ChangeSettings: function (props) {
+            if (this._initSettings) {
+                this.createDelayedElements();
+                this._initSettings = false;
+            }
+            this.disableControls(this._locked);
+            if (props) {
+                this._originalProps = new CImgProperty(props);
+                var value = props.get_Width();
+                if (Math.abs(this._state.Width - value) > 0.001) {
+                    this.labelWidth[0].innerHTML = this.textWidth + ": " + Common.Utils.Metric.fnRecalcFromMM(value).toFixed(1) + " " + Common.Utils.Metric.metricName[Common.Utils.Metric.getCurrentMetric()];
+                    this._state.Width = value;
+                }
+                value = props.get_Height();
+                if (Math.abs(this._state.Height - value) > 0.001) {
+                    this.labelHeight[0].innerHTML = this.textHeight + ": " + Common.Utils.Metric.fnRecalcFromMM(value).toFixed(1) + " " + Common.Utils.Metric.metricName[Common.Utils.Metric.getCurrentMetric()];
+                    this._state.Height = value;
+                }
+                this.btnOriginalSize.setDisabled(props.get_ImageUrl() === null || props.get_ImageUrl() === undefined || this._locked);
+            }
+        },
+        setOriginalSize: function () {
+            if (this.api) {
+                var imgsize = this.api.get_OriginalSizeImage();
+                var w = imgsize.get_ImageWidth();
+                var h = imgsize.get_ImageHeight();
+                this.labelWidth[0].innerHTML = this.textWidth + ": " + Common.Utils.Metric.fnRecalcFromMM(w).toFixed(1) + " " + Common.Utils.Metric.metricName[Common.Utils.Metric.getCurrentMetric()];
+                this.labelHeight[0].innerHTML = this.textHeight + ": " + Common.Utils.Metric.fnRecalcFromMM(h).toFixed(1) + " " + Common.Utils.Metric.metricName[Common.Utils.Metric.getCurrentMetric()];
+                var properties = new CImgProperty();
+                properties.put_Width(w);
+                properties.put_Height(h);
+                this.api.ImgApply(properties);
+                this.fireEvent("editcomplete", this);
+            }
+        },
+        insertFromUrl: function () {
+            var me = this;
+            (new Common.Views.ImageFromUrlDialog({
+                handler: function (result, value) {
+                    if (result == "ok") {
+                        if (me.api) {
+                            var checkUrl = value.replace(/ /g, "");
+                            if (!_.isEmpty(checkUrl)) {
+                                var props = new CImgProperty();
+                                props.put_ImageUrl(checkUrl);
+                                me.api.ImgApply(props);
+                            }
+                        }
+                    }
+                    me.fireEvent("editcomplete", me);
+                }
+            })).show();
+        },
+        openAdvancedSettings: function (e) {
+            if (this.linkAdvanced.hasClass("disabled")) {
+                return;
+            }
+            var me = this;
+            if (me.api && !this._locked) {
+                var selectedElements = me.api.getSelectedElements();
+                if (selectedElements && selectedElements.length > 0) {
+                    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) {
+                            var imgsizeOriginal;
+                            if (!me.btnOriginalSize.isDisabled()) {
+                                imgsizeOriginal = me.api.get_OriginalSizeImage();
+                                if (imgsizeOriginal) {
+                                    imgsizeOriginal = {
+                                        width: imgsizeOriginal.get_ImageWidth(),
+                                        height: imgsizeOriginal.get_ImageHeight()
+                                    };
+                                }
+                            } (new PE.Views.ImageSettingsAdvanced({
+                                imageProps: elValue,
+                                sizeOriginal: imgsizeOriginal,
+                                handler: function (result, value) {
+                                    if (result == "ok") {
+                                        if (me.api) {
+                                            me.api.ImgApply(value.imageProps);
+                                        }
+                                    }
+                                    me.fireEvent("editcomplete", me);
+                                }
+                            })).show();
+                            break;
+                        }
+                    }
+                }
+            }
+        },
+        setLocked: function (locked) {
+            this._locked = locked;
+        },
+        disableControls: function (disable) {
+            if (this._state.DisabledControls !== disable) {
+                this._state.DisabledControls = disable;
+                _.each(this.lockedControls, function (item) {
+                    item.setDisabled(disable);
+                });
+                this.linkAdvanced.toggleClass("disabled", disable);
+            }
+        },
+        textSize: "Size",
+        textWidth: "Width",
+        textHeight: "Height",
+        textOriginalSize: "Default Size",
+        textInsert: "Insert Image",
+        textFromUrl: "From URL",
+        textFromFile: "From File",
+        textAdvanced: "Show advanced settings"
+    },
+    PE.Views.ImageSettings || {}));
 });

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

@@ -1,484 +1,240 @@
-/*
- * (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"
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * 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
+ *
+ */
+ define(["text!presentationeditor/main/app/template/ImageSettingsAdvanced.template", "common/main/lib/view/AdvancedSettingsWindow", "common/main/lib/component/MetricSpinner"], function (contentTemplate) {
+    PE.Views.ImageSettingsAdvanced = Common.Views.AdvancedSettingsWindow.extend(_.extend({
+        options: {
+            alias: "ImageSettingsAdvanced",
+            contentWidth: 340,
+            height: 235,
+            sizeOriginal: {
+                width: 0,
+                height: 0
+            },
+            sizeMax: {
+                width: 55.88,
+                height: 55.88
+            }
+        },
+        initialize: function (options) {
+            _.extend(this.options, {
+                title: this.textTitle,
+                template: ['<div class="box" style="height:' + (this.options.height - 85) + 'px;">', '<div class="menu-panel" style="overflow: hidden;">', '<div style="height: 70px; line-height: 70px;" class="div-category">' + this.textSize + "</div>", '<div style="height: 75px; line-height: 75px;" class="div-category">' + this.textPosition + "</div>", "</div>", '<div class="separator"/>', '<div class="content-panel">' + _.template(contentTemplate)({
+                    scope: this
+                }) + "</div>", "</div>", '<div class="separator horizontal"/>', '<div class="footer center">', '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;  width: 86px;">' + this.okButtonText + "</button>", '<button class="btn normal dlg-btn" result="cancel" style="width: 86px;">' + this.cancelButtonText + "</button>", "</div>"].join("")
+            },
+            options);
+            Common.Views.AdvancedSettingsWindow.prototype.initialize.call(this, this.options);
+            this.spinners = [];
+            this._nRatio = 1;
+            this._originalProps = this.options.imageProps;
+        },
+        render: function () {
+            Common.Views.AdvancedSettingsWindow.prototype.render.call(this);
+            var me = this;
+            this.spnWidth = new Common.UI.MetricSpinner({
+                el: $("#image-advanced-spin-width"),
+                step: 0.1,
+                width: 80,
+                defaultUnit: "cm",
+                value: "3 cm",
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.spnWidth.on("change", _.bind(function (field, newValue, oldValue, eOpts) {
+                if (this.btnRatio.pressed) {
+                    var w = field.getNumberValue();
+                    var h = w / this._nRatio;
+                    if (h > this.sizeMax.height) {
+                        h = this.sizeMax.height;
+                        w = h * this._nRatio;
+                        this.spnWidth.setValue(w, true);
+                    }
+                    this.spnHeight.setValue(h, true);
+                }
+            },
+            this));
+            this.spinners.push(this.spnWidth);
+            this.spnHeight = new Common.UI.MetricSpinner({
+                el: $("#image-advanced-spin-height"),
+                step: 0.1,
+                width: 80,
+                defaultUnit: "cm",
+                value: "3 cm",
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.spnHeight.on("change", _.bind(function (field, newValue, oldValue, eOpts) {
+                var h = field.getNumberValue(),
+                w = null;
+                if (this.btnRatio.pressed) {
+                    w = h * this._nRatio;
+                    if (w > this.sizeMax.width) {
+                        w = this.sizeMax.width;
+                        h = w / this._nRatio;
+                        this.spnHeight.setValue(h, true);
+                    }
+                    this.spnWidth.setValue(w, true);
+                }
+            },
+            this));
+            this.spinners.push(this.spnHeight);
+            this.btnOriginalSize = new Common.UI.Button({
+                el: $("#image-advanced-button-original-size")
+            });
+            this.btnOriginalSize.on("click", _.bind(function (btn, e) {
+                this.spnWidth.setValue(this.sizeOriginal.width, true);
+                this.spnHeight.setValue(this.sizeOriginal.height, true);
+                this._nRatio = this.sizeOriginal.width / this.sizeOriginal.height;
+            },
+            this));
+            this.btnRatio = new Common.UI.Button({
+                cls: "btn-toolbar btn-toolbar-default",
+                iconCls: "advanced-btn-ratio",
+                style: "margin-bottom: 1px;",
+                enableToggle: true,
+                hint: this.textKeepRatio
+            });
+            this.btnRatio.render($("#image-advanced-button-ratio"));
+            this.btnRatio.on("click", _.bind(function (btn, e) {
+                if (btn.pressed && this.spnHeight.getNumberValue() > 0) {
+                    this._nRatio = this.spnWidth.getNumberValue() / this.spnHeight.getNumberValue();
+                }
+            },
+            this));
+            this.spnX = new Common.UI.MetricSpinner({
+                el: $("#image-advanced-spin-x"),
+                step: 0.1,
+                width: 85,
+                defaultUnit: "cm",
+                defaultValue: 0,
+                value: "0 cm",
+                maxValue: 55.87,
+                minValue: -55.87
+            });
+            this.spinners.push(this.spnX);
+            this.spnY = new Common.UI.MetricSpinner({
+                el: $("#image-advanced-spin-y"),
+                step: 0.1,
+                width: 85,
+                defaultUnit: "cm",
+                defaultValue: 0,
+                value: "0 cm",
+                maxValue: 55.87,
+                minValue: -55.87
+            });
+            this.spinners.push(this.spnY);
+            this.afterRender();
+        },
+        afterRender: function () {
+            this.updateMetricUnit();
+            this._setDefaults(this._originalProps);
+        },
+        _setDefaults: function (props) {
+            if (props) {
+                this.spnWidth.setMaxValue(this.sizeMax.width);
+                this.spnHeight.setMaxValue(this.sizeMax.height);
+                this.spnWidth.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_Width()).toFixed(2), true);
+                this.spnHeight.setValue(Common.Utils.Metric.fnRecalcFromMM(props.get_Height()).toFixed(2), true);
+                this.btnOriginalSize.setDisabled(props.get_ImageUrl() === null || props.get_ImageUrl() === undefined);
+                var value = window.localStorage.getItem("pe-settings-imageratio");
+                if (value === null || parseInt(value) == 1) {
+                    this.btnRatio.toggle(true);
+                }
+                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.Utils.Metric.fnRecalcFromMM(Position.X), true);
+                    }
+                    if (Position.Y !== null && Position.Y !== undefined) {
+                        this.spnY.setValue(Common.Utils.Metric.fnRecalcFromMM(Position.Y), true);
+                    }
+                } else {
+                    this.spnX.setValue("", true);
+                    this.spnY.setValue("", true);
+                }
+            }
+        },
+        getSettings: function () {
+            window.localStorage.setItem("pe-settings-imageratio", (this.btnRatio.pressed) ? 1 : 0);
+            var properties = new CImgProperty();
+            if (this.spnHeight.getValue() !== "") {
+                properties.put_Height(Common.Utils.Metric.fnRecalcToMM(this.spnHeight.getNumberValue()));
+            }
+            if (this.spnWidth.getValue() !== "") {
+                properties.put_Width(Common.Utils.Metric.fnRecalcToMM(this.spnWidth.getNumberValue()));
+            }
+            var Position = new CPosition();
+            if (this.spnX.getValue() !== "") {
+                Position.put_X(Common.Utils.Metric.fnRecalcToMM(this.spnX.getNumberValue()));
+            }
+            if (this.spnY.getValue() !== "") {
+                Position.put_Y(Common.Utils.Metric.fnRecalcToMM(this.spnY.getNumberValue()));
+            }
+            properties.put_Position(Position);
+            return {
+                imageProps: properties
+            };
+        },
+        updateMetricUnit: function () {
+            if (this.spinners) {
+                for (var i = 0; i < this.spinners.length; i++) {
+                    var spinner = this.spinners[i];
+                    spinner.setDefaultUnit(Common.Utils.Metric.metricName[Common.Utils.Metric.getCurrentMetric()]);
+                    spinner.setStep(Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.cm ? 0.1 : 1);
+                }
+            }
+            this.sizeMax = {
+                width: Common.Utils.Metric.fnRecalcFromMM(this.options.sizeMax.width * 10),
+                height: Common.Utils.Metric.fnRecalcFromMM(this.options.sizeMax.height * 10)
+            };
+            if (this.options.sizeOriginal) {
+                this.sizeOriginal = {
+                    width: Common.Utils.Metric.fnRecalcFromMM(this.options.sizeOriginal.width),
+                    height: Common.Utils.Metric.fnRecalcFromMM(this.options.sizeOriginal.height)
+                };
+            }
+        },
+        textOriginalSize: "Default Size",
+        textPosition: "Position",
+        textSize: "Size",
+        textWidth: "Width",
+        textHeight: "Height",
+        textTitle: "Image - Advanced Settings",
+        textKeepRatio: "Constant Proportions",
+        cancelButtonText: "Cancel",
+        okButtonText: "Ok"
+    },
+    PE.Views.ImageSettingsAdvanced || {}));
 });

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

@@ -1,194 +0,0 @@
-/*
- * (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/LeftMenu.js

@@ -0,0 +1,286 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * 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
+ *
+ */
+ define(["text!presentationeditor/main/app/template/LeftMenu.template", "jquery", "underscore", "backbone", "common/main/lib/component/Button", "common/main/lib/view/About", "common/main/lib/view/About", "common/main/lib/view/Comments", "common/main/lib/view/Chat", "common/main/lib/view/SearchDialog", "presentationeditor/main/app/view/FileMenu"], function (menuTemplate, $, _, Backbone) {
+    var SCALE_MIN = 40;
+    var MENU_SCALE_PART = 300;
+    PE.Views.LeftMenu = Backbone.View.extend(_.extend({
+        el: "#left-menu",
+        template: _.template(menuTemplate),
+        events: function () {
+            return {
+                "click #left-btn-support": function () {
+                    window.open("http://feedback.onlyoffice.com/");
+                },
+                "click #left-btn-comments": _.bind(this.onCoauthOptions, this),
+                "click #left-btn-chat": _.bind(this.onCoauthOptions, this)
+            };
+        },
+        initialize: function () {
+            this.minimizedMode = true;
+        },
+        render: function () {
+            var el = $(this.el);
+            el.html(this.template({}));
+            this.btnFile = new Common.UI.Button({
+                action: "file",
+                el: $("#left-btn-file"),
+                hint: this.tipFile + Common.Utils.String.platformKey("Alt+F"),
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: "leftMenuGroup"
+            });
+            this.btnSearch = new Common.UI.Button({
+                action: "search",
+                el: $("#left-btn-search"),
+                hint: this.tipSearch + Common.Utils.String.platformKey("Ctrl+F"),
+                disabled: true,
+                enableToggle: true
+            });
+            this.btnThumbs = new Common.UI.Button({
+                action: "thumbs",
+                el: $("#left-btn-thumbs"),
+                hint: this.tipSlides,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: "leftMenuGroup"
+            });
+            this.btnAbout = new Common.UI.Button({
+                action: "about",
+                el: $("#left-btn-about"),
+                hint: this.tipAbout,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: "leftMenuGroup"
+            });
+            this.btnSupport = new Common.UI.Button({
+                action: "support",
+                el: $("#left-btn-support"),
+                hint: this.tipSupport,
+                disabled: true
+            });
+            this.btnComments = new Common.UI.Button({
+                el: $("#left-btn-comments"),
+                hint: this.tipComments + Common.Utils.String.platformKey("Ctrl+Shift+H"),
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: "leftMenuGroup"
+            });
+            this.btnChat = new Common.UI.Button({
+                el: $("#left-btn-chat"),
+                hint: this.tipChat + Common.Utils.String.platformKey("Ctrl+Alt+Q", null, function (string) {
+                    if (Common.Utils.isMac) {
+                        string = string.replace(/Ctrl|ctrl/g, "⌃");
+                    }
+                    return string;
+                }),
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: "leftMenuGroup"
+            });
+            this.btnComments.hide();
+            this.btnChat.hide();
+            this.btnComments.on("click", _.bind(this.onBtnMenuClick, this));
+            this.btnChat.on("click", _.bind(this.onBtnMenuClick, this));
+            this.btnSearch.on("click", _.bind(this.onBtnMenuClick, this));
+            this.btnThumbs.on("click", _.bind(this.onBtnMenuClick, this));
+            this.btnAbout.on("toggle", _.bind(this.onBtnMenuToggle, this));
+            this.btnFile.on("toggle", _.bind(this.onBtnMenuToggle, this));
+            this.btnAbout.on("click", _.bind(this.onFullMenuClick, this));
+            this.btnFile.on("click", _.bind(this.onFullMenuClick, this));
+            var menuFile = new PE.Views.FileMenu({});
+            menuFile.options = {
+                alias: "FileMenu"
+            };
+            this.btnFile.panel = menuFile.render();
+            this.btnAbout.panel = (new Common.Views.About({
+                el: $("#about-menu-panel"),
+                appName: "Presentation Editor"
+            })).render();
+            return this;
+        },
+        onBtnMenuToggle: function (btn, state) {
+            if (state) {
+                btn.panel["show"]();
+                this.$el.width(SCALE_MIN);
+                if (this.btnSearch.isActive()) {
+                    this.btnSearch.toggle(false);
+                }
+            } else {
+                btn.panel["hide"]();
+            }
+            if (this.mode.isEdit) {
+                PE.getController("Toolbar").DisableToolbar(state == true);
+            }
+            Common.NotificationCenter.trigger("layout:changed", "leftmenu");
+        },
+        onBtnMenuClick: function (btn, e) {
+            var full_menu_pressed = (this.btnFile.pressed || this.btnAbout.pressed);
+            if (this.btnFile.pressed) {
+                this.btnFile.toggle(false);
+            }
+            if (this.btnAbout.pressed) {
+                this.btnAbout.toggle(false);
+            }
+            if (btn.options.action == "search") {
+                full_menu_pressed && this.fireEvent("panel:show", [this.btnFile, "files", false]);
+                return;
+            } else {
+                if (btn.options.action == "thumbs") {
+                    if (this.$el.width() > SCALE_MIN) {
+                        localStorage.setItem("pe-mainmenu-width", this.$el.width());
+                        this.$el.width(SCALE_MIN);
+                    }
+                } else {
+                    if (btn.pressed) {
+                        if (! (this.$el.width() > SCALE_MIN)) {
+                            this.$el.width(localStorage.getItem("pe-mainmenu-width") || MENU_SCALE_PART);
+                        }
+                    } else {
+                        localStorage.setItem("pe-mainmenu-width", this.$el.width());
+                        this.$el.width(SCALE_MIN);
+                    }
+                }
+            }
+            this.fireEvent("panel:show", [this, btn.options.action, btn.pressed]);
+            Common.NotificationCenter.trigger("layout:changed", "leftmenu");
+        },
+        onFullMenuClick: function (btn, e) {
+            (!btn.pressed) && this.fireEvent("panel:show", [this, btn.options.action, btn.pressed]);
+        },
+        onCoauthOptions: function (e) {
+            if (this.mode.canCoAuthoring) {
+                this.panelComments[this.btnComments.pressed ? "show" : "hide"]();
+                this.fireEvent((this.btnComments.pressed) ? "comments:show": "comments:hide", this);
+                if (this.btnChat.pressed) {
+                    if (this.btnChat.$el.hasClass("notify")) {
+                        this.btnChat.$el.removeClass("notify");
+                    }
+                    this.panelChat.show();
+                    this.panelChat.focus();
+                } else {
+                    this.panelChat["hide"]();
+                }
+            }
+        },
+        setOptionsPanel: function (name, panel) {
+            if (name == "chat") {
+                this.panelChat = panel.render("#left-panel-chat");
+            } else {
+                if (name == "comment") {
+                    this.panelComments = panel;
+                }
+            }
+        },
+        markCoauthOptions: function (opt) {
+            if (this.btnChat.isVisible() && !this.btnChat.isDisabled() && !this.btnChat.pressed) {
+                this.btnChat.$el.addClass("notify");
+            }
+        },
+        close: function (menu) {
+            this.btnFile.toggle(false);
+            this.btnAbout.toggle(false);
+            this.btnThumbs.toggle(false);
+            this.$el.width(SCALE_MIN);
+            if (this.mode.canCoAuthoring) {
+                this.panelComments["hide"]();
+                this.panelChat["hide"]();
+                if (this.btnComments.pressed) {
+                    this.fireEvent("comments:hide", this);
+                }
+                this.btnComments.toggle(false, true);
+                this.btnChat.toggle(false, true);
+            }
+            this.fireEvent("panel:show", [this, "", false]);
+        },
+        isOpened: function () {
+            var isopened = this.btnFile.pressed || this.btnSearch.pressed; ! isopened && (isopened = this.btnComments.pressed || this.btnChat.pressed);
+            return isopened;
+        },
+        disableMenu: function (menu, disable) {
+            this.btnFile.setDisabled(disable);
+            this.btnSearch.setDisabled(disable);
+            this.btnThumbs.setDisabled(disable);
+            this.btnAbout.setDisabled(disable);
+            this.btnSupport.setDisabled(disable);
+            this.btnComments.setDisabled(disable);
+            this.btnChat.setDisabled(disable);
+        },
+        showMenu: function (menu) {
+            var re = /^(\w+):?(\w*)$/.exec(menu);
+            if (re[1] == "file") {
+                if (!this.btnFile.pressed) {
+                    this.btnFile.toggle(true);
+                }
+                this.btnFile.panel.show(re[2].length ? re[2] : undefined);
+            } else {
+                if (menu == "chat") {
+                    if (this.btnChat.isVisible() && !this.btnChat.isDisabled() && !this.btnChat.pressed) {
+                        this.btnChat.toggle(true);
+                        this.onBtnMenuClick(this.btnChat);
+                        this.onCoauthOptions();
+                        this.panelChat.focus();
+                    }
+                } else {
+                    if (menu == "comments") {
+                        if (this.btnComments.isVisible() && !this.btnComments.isDisabled() && !this.btnComments.pressed) {
+                            this.btnComments.toggle(true);
+                            this.onBtnMenuClick(this.btnComments);
+                            this.onCoauthOptions();
+                        }
+                    }
+                }
+            }
+        },
+        getMenu: function (type) {
+            switch (type) {
+            default:
+                return null;
+            case "file":
+                return this.btnFile.panel;
+            case "about":
+                return this.btnAbout.panel;
+            }
+        },
+        setMode: function (mode) {
+            this.mode = mode;
+            return this;
+        },
+        tipComments: "Comments",
+        tipChat: "Chat",
+        tipAbout: "About",
+        tipSupport: "Feedback & Support",
+        tipFile: "File",
+        tipSearch: "Search",
+        tipSlides: "Slides"
+    },
+    PE.Views.LeftMenu || {}));
+});

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

@@ -1,379 +0,0 @@
-/*
- * (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

@@ -1,438 +1,331 @@
-/*
- * (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"
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * 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
+ *
+ */
+ define(["text!presentationeditor/main/app/template/ParagraphSettings.template", "jquery", "underscore", "backbone", "common/main/lib/component/ComboBox", "common/main/lib/component/MetricSpinner", "presentationeditor/main/app/view/ParagraphSettingsAdvanced"], function (menuTemplate, $, _, Backbone) {
+    PE.Views.ParagraphSettings = Backbone.View.extend(_.extend({
+        el: "#id-paragraph-settings",
+        template: _.template(menuTemplate),
+        events: {},
+        options: {
+            alias: "ParagraphSettings"
+        },
+        initialize: function () {
+            var me = this;
+            this._initSettings = true;
+            this._state = {
+                LineRuleIdx: 1,
+                LineHeight: 1.5,
+                LineSpacingBefore: 0,
+                LineSpacingAfter: 0.35,
+                DisabledControls: false
+            };
+            this.spinners = [];
+            this.lockedControls = [];
+            this._locked = false;
+            this.render();
+            this._arrLineRule = [{
+                displayValue: this.textAtLeast,
+                defaultValue: 5,
+                value: c_paragraphLinerule.LINERULE_LEAST,
+                minValue: 0.03,
+                step: 0.01,
+                defaultUnit: "cm"
+            },
+            {
+                displayValue: this.textAuto,
+                defaultValue: 1,
+                value: c_paragraphLinerule.LINERULE_AUTO,
+                minValue: 0.5,
+                step: 0.01,
+                defaultUnit: ""
+            },
+            {
+                displayValue: this.textExact,
+                defaultValue: 5,
+                value: c_paragraphLinerule.LINERULE_EXACT,
+                minValue: 0.03,
+                step: 0.01,
+                defaultUnit: "cm"
+            }];
+            this.cmbLineRule = new Common.UI.ComboBox({
+                el: $("#paragraph-combo-line-rule"),
+                cls: "input-group-nr",
+                menuStyle: "min-width: 85px;",
+                editable: false,
+                data: this._arrLineRule
+            });
+            this.cmbLineRule.setValue(this._arrLineRule[this._state.LineRuleIdx].value);
+            this.lockedControls.push(this.cmbLineRule);
+            this.numLineHeight = new Common.UI.MetricSpinner({
+                el: $("#paragraph-spin-line-height"),
+                step: 0.01,
+                width: 85,
+                value: "1.5",
+                defaultUnit: "",
+                maxValue: 132,
+                minValue: 0.5
+            });
+            this.lockedControls.push(this.numLineHeight);
+            this.numSpacingBefore = new Common.UI.MetricSpinner({
+                el: $("#paragraph-spin-spacing-before"),
+                step: 0.1,
+                width: 85,
+                value: "0 cm",
+                defaultUnit: "cm",
+                maxValue: 55.88,
+                minValue: 0,
+                allowAuto: true,
+                autoText: this.txtAutoText
+            });
+            this.spinners.push(this.numSpacingBefore);
+            this.lockedControls.push(this.numSpacingBefore);
+            this.numSpacingAfter = new Common.UI.MetricSpinner({
+                el: $("#paragraph-spin-spacing-after"),
+                step: 0.1,
+                width: 85,
+                value: "0.35 cm",
+                defaultUnit: "cm",
+                maxValue: 55.88,
+                minValue: 0,
+                allowAuto: true,
+                autoText: this.txtAutoText
+            });
+            this.spinners.push(this.numSpacingAfter);
+            this.lockedControls.push(this.numSpacingAfter);
+            this.numLineHeight.on("change", _.bind(this.onNumLineHeightChange, this));
+            this.numSpacingBefore.on("change", _.bind(this.onNumSpacingBeforeChange, this));
+            this.numSpacingAfter.on("change", _.bind(this.onNumSpacingAfterChange, this));
+            this.cmbLineRule.on("selected", _.bind(this.onLineRuleSelect, this));
+            this.cmbLineRule.on("hide:after", _.bind(this.onHideMenus, this));
+            $(this.el).on("click", "#paragraph-advanced-link", _.bind(this.openAdvancedSettings, this));
+        },
+        render: function () {
+            var el = $(this.el);
+            el.html(this.template({
+                scope: this
+            }));
+            this.linkAdvanced = $("#paragraph-advanced-link");
+        },
+        setApi: function (api) {
+            this.api = api;
+            if (this.api) {
+                this.api.asc_registerCallback("asc_onParaSpacingLine", _.bind(this._onLineSpacing, this));
+            }
+            return this;
+        },
+        onNumLineHeightChange: function (field, newValue, oldValue, eOpts) {
+            if (this.cmbLineRule.getRawValue() === "") {
+                return;
+            }
+            var type = c_paragraphLinerule.LINERULE_AUTO;
+            if (this.api) {
+                this.api.put_PrLineSpacing(this.cmbLineRule.getValue(), (this.cmbLineRule.getValue() == c_paragraphLinerule.LINERULE_AUTO) ? field.getNumberValue() : Common.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
+            }
+            this.fireEvent("editcomplete", this);
+        },
+        onNumSpacingBeforeChange: 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.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
+                }
+            }
+            this.fireEvent("editcomplete", this);
+        },
+        onNumSpacingAfterChange: 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.Utils.Metric.fnRecalcToMM(field.getNumberValue()));
+                }
+            }
+            this.fireEvent("editcomplete", this);
+        },
+        onLineRuleSelect: function (combo, record) {
+            if (this.api) {
+                this.api.put_PrLineSpacing(record.value, record.defaultValue);
+            }
+            this.numLineHeight.setDefaultUnit(this._arrLineRule[record.value].defaultUnit);
+            this.numLineHeight.setMinValue(this._arrLineRule[record.value].minValue);
+            this.numLineHeight.setStep(this._arrLineRule[record.value].step);
+            this.fireEvent("editcomplete", this);
+        },
+        _onLineSpacing: function (value) {
+            var linerule = value.get_LineRule();
+            var line = value.get_Line();
+            if (this._state.LineRuleIdx !== linerule) {
+                this.cmbLineRule.setValue((linerule !== null) ? this._arrLineRule[linerule].value : "");
+                this.numLineHeight.setMinValue(this._arrLineRule[(linerule !== null) ? linerule : 1].minValue);
+                this.numLineHeight.setDefaultUnit(this._arrLineRule[(linerule !== null) ? linerule : 1].defaultUnit);
+                this.numLineHeight.setStep(this._arrLineRule[(linerule !== null) ? linerule : 1].step);
+                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.Utils.Metric.fnRecalcFromMM(line);
+                    }
+                }
+                this.numLineHeight.setValue((val !== null) ? val : "", true);
+                this._state.LineHeight = line;
+            }
+        },
+        ChangeSettings: function (prop) {
+            if (this._initSettings) {
+                this.createDelayedElements();
+                this._initSettings = false;
+            }
+            this.disableControls(this._locked);
+            if (prop) {
+                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()
+                };
+                var other = {
+                    ContextualSpacing: prop.get_ContextualSpacing()
+                };
+                if (this._state.LineRuleIdx !== Spacing.LineRule) {
+                    this.cmbLineRule.setValue((Spacing.LineRule !== null) ? this._arrLineRule[Spacing.LineRule].value : "");
+                    this.numLineHeight.setMinValue(this._arrLineRule[(Spacing.LineRule !== null) ? Spacing.LineRule : 1].minValue);
+                    this.numLineHeight.setDefaultUnit(this._arrLineRule[(Spacing.LineRule !== null) ? Spacing.LineRule : 1].defaultUnit);
+                    this.numLineHeight.setStep(this._arrLineRule[(Spacing.LineRule !== null) ? Spacing.LineRule : 1].step);
+                    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.Utils.Metric.fnRecalcFromMM(Spacing.Line);
+                        }
+                    }
+                    this.numLineHeight.setValue((val !== null) ? val : "", true);
+                    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.Utils.Metric.fnRecalcFromMM(Spacing.Before)) : "", true);
+                    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.Utils.Metric.fnRecalcFromMM(Spacing.After)) : "", true);
+                    this._state.LineSpacingAfter = Spacing.After;
+                }
+            }
+        },
+        updateMetricUnit: function () {
+            if (this.spinners) {
+                for (var i = 0; i < this.spinners.length; i++) {
+                    var spinner = this.spinners[i];
+                    spinner.setDefaultUnit(Common.Utils.Metric.metricName[Common.Utils.Metric.getCurrentMetric()]);
+                    spinner.setStep(Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.cm ? 0.01 : 1);
+                }
+            }
+            this._arrLineRule[2].defaultUnit = this._arrLineRule[0].defaultUnit = Common.Utils.Metric.metricName[Common.Utils.Metric.getCurrentMetric()];
+            this._arrLineRule[2].minValue = this._arrLineRule[0].minValue = parseFloat(Common.Utils.Metric.fnRecalcFromMM(0.3).toFixed(2));
+            this._arrLineRule[2].step = this._arrLineRule[0].step = (Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.c_MetricUnits.cm) ? 0.01 : 1;
+            if (this._state.LineRuleIdx !== null) {
+                this.numLineHeight.setDefaultUnit(this._arrLineRule[this._state.LineRuleIdx].defaultUnit);
+                this.numLineHeight.setStep(this._arrLineRule[this._state.LineRuleIdx].step);
+            }
+        },
+        createDelayedElements: function () {
+            this.updateMetricUnit();
+        },
+        openAdvancedSettings: function (e) {
+            if (this.linkAdvanced.hasClass("disabled")) {
+                return;
+            }
+            var me = this;
+            var win;
+            if (me.api && !this._locked) {
+                var selectedElements = me.api.getSelectedElements();
+                if (selectedElements && selectedElements.length > 0) {
+                    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) {
+                            (new PE.Views.ParagraphSettingsAdvanced({
+                                paragraphProps: elValue,
+                                api: me.api,
+                                handler: function (result, value) {
+                                    if (result == "ok") {
+                                        if (me.api) {
+                                            me.api.paraApply(value.paragraphProps);
+                                        }
+                                    }
+                                    me.fireEvent("editcomplete", me);
+                                }
+                            })).show();
+                            break;
+                        }
+                    }
+                }
+            }
+        },
+        onHideMenus: function (e) {
+            this.fireEvent("editcomplete", this);
+        },
+        setLocked: function (locked) {
+            this._locked = locked;
+        },
+        disableControls: function (disable) {
+            if (this._state.DisabledControls !== disable) {
+                this._state.DisabledControls = disable;
+                _.each(this.lockedControls, function (item) {
+                    item.setDisabled(disable);
+                });
+                this.linkAdvanced.toggleClass("disabled", disable);
+            }
+        },
+        strParagraphSpacing: "Spacing",
+        strLineHeight: "Line Spacing",
+        strSpacingBefore: "Before",
+        strSpacingAfter: "After",
+        textAuto: "Multiple",
+        textAtLeast: "At least",
+        textExact: "Exactly",
+        textAdvanced: "Show advanced settings",
+        textAt: "At",
+        txtAutoText: "Auto"
+    },
+    PE.Views.ParagraphSettings || {}));
 });

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

@@ -1,75 +0,0 @@
-/*
- * (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

@@ -1,224 +1,251 @@
-/*
- * (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"
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * 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;
+define(["text!presentationeditor/main/app/template/RightMenu.template", "jquery", "underscore", "backbone", "common/main/lib/component/Button", "common/main/lib/component/MetricSpinner", "common/main/lib/component/CheckBox", "presentationeditor/main/app/view/ParagraphSettings", "presentationeditor/main/app/view/ImageSettings", "presentationeditor/main/app/view/ChartSettings", "presentationeditor/main/app/view/TableSettings", "presentationeditor/main/app/view/ShapeSettings", "presentationeditor/main/app/view/SlideSettings", "common/main/lib/component/Scroller"], function (menuTemplate, $, _, Backbone) {
+    PE.Views.RightMenu = Backbone.View.extend(_.extend({
+        el: "#right-menu",
+        template: _.template(menuTemplate),
+        events: {},
+        initialize: function () {
+            this.minimizedMode = true;
+            this.btnText = new Common.UI.Button({
+                hint: this.txtParagraphSettings,
+                asctype: c_oAscTypeSelectElement.Paragraph,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: "tabpanelbtnsGroup"
+            });
+            this.btnTable = new Common.UI.Button({
+                hint: this.txtTableSettings,
+                asctype: c_oAscTypeSelectElement.Table,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: "tabpanelbtnsGroup"
+            });
+            this.btnImage = new Common.UI.Button({
+                hint: this.txtImageSettings,
+                asctype: c_oAscTypeSelectElement.Image,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: "tabpanelbtnsGroup"
+            });
+            this.btnSlide = new Common.UI.Button({
+                hint: this.txtSlideSettings,
+                asctype: c_oAscTypeSelectElement.Slide,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: "tabpanelbtnsGroup"
+            });
+            this.btnChart = new Common.UI.Button({
+                hint: this.txtChartSettings,
+                asctype: c_oAscTypeSelectElement.Chart,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: "tabpanelbtnsGroup"
+            });
+            this.btnShape = new Common.UI.Button({
+                hint: this.txtShapeSettings,
+                asctype: c_oAscTypeSelectElement.Shape,
+                enableToggle: true,
+                disabled: true,
+                toggleGroup: "tabpanelbtnsGroup"
+            });
+            this._settings = [];
+            this._settings[c_oAscTypeSelectElement.Paragraph] = {
+                panel: "id-paragraph-settings",
+                btn: this.btnText
+            };
+            this._settings[c_oAscTypeSelectElement.Table] = {
+                panel: "id-table-settings",
+                btn: this.btnTable
+            };
+            this._settings[c_oAscTypeSelectElement.Image] = {
+                panel: "id-image-settings",
+                btn: this.btnImage
+            };
+            this._settings[c_oAscTypeSelectElement.Slide] = {
+                panel: "id-slide-settings",
+                btn: this.btnSlide
+            };
+            this._settings[c_oAscTypeSelectElement.Shape] = {
+                panel: "id-shape-settings",
+                btn: this.btnShape
+            };
+            this._settings[c_oAscTypeSelectElement.Chart] = {
+                panel: "id-chart-settings",
+                btn: this.btnChart
+            };
+            return this;
+        },
+        render: function () {
+            var el = $(this.el);
+            this.trigger("render:before", this);
+            el.css("width", "40px");
+            el.show();
+            el.html(this.template({}));
+            this.btnText.el = $("#id-right-menu-text");
+            this.btnText.render();
+            this.btnTable.el = $("#id-right-menu-table");
+            this.btnTable.render();
+            this.btnImage.el = $("#id-right-menu-image");
+            this.btnImage.render();
+            this.btnSlide.el = $("#id-right-menu-slide");
+            this.btnSlide.render();
+            this.btnChart.el = $("#id-right-menu-chart");
+            this.btnChart.render();
+            this.btnShape.el = $("#id-right-menu-shape");
+            this.btnShape.render();
+            this.btnText.on("click", _.bind(this.onBtnMenuClick, this));
+            this.btnTable.on("click", _.bind(this.onBtnMenuClick, this));
+            this.btnImage.on("click", _.bind(this.onBtnMenuClick, this));
+            this.btnSlide.on("click", _.bind(this.onBtnMenuClick, this));
+            this.btnChart.on("click", _.bind(this.onBtnMenuClick, this));
+            this.btnShape.on("click", _.bind(this.onBtnMenuClick, this));
+            this.paragraphSettings = new PE.Views.ParagraphSettings();
+            this.slideSettings = new PE.Views.SlideSettings();
+            this.imageSettings = new PE.Views.ImageSettings();
+            this.chartSettings = new PE.Views.ChartSettings();
+            this.tableSettings = new PE.Views.TableSettings();
+            this.shapeSettings = new PE.Views.ShapeSettings();
+            if (_.isUndefined(this.scroller)) {
+                this.scroller = new Common.UI.Scroller({
+                    el: $(this.el).find(".right-panel"),
+                    suppressScrollX: true,
+                    useKeyboard: false
+                });
+            }
+            this.trigger("render:after", this);
+            return this;
+        },
+        setApi: function (api) {
+            this.api = api;
+            var fire = function () {
+                this.fireEvent("editcomplete", this);
+            };
+            this.paragraphSettings.setApi(api).on("editcomplete", _.bind(fire, this));
+            this.slideSettings.setApi(api).on("editcomplete", _.bind(fire, this));
+            this.imageSettings.setApi(api).on("editcomplete", _.bind(fire, this));
+            this.chartSettings.setApi(api).on("editcomplete", _.bind(fire, this));
+            this.tableSettings.setApi(api).on("editcomplete", _.bind(fire, this));
+            this.shapeSettings.setApi(api).on("editcomplete", _.bind(fire, this));
+        },
+        setMode: function (mode) {},
+        onBtnMenuClick: function (btn, e) {
+            var target_pane = $("#" + this._settings[btn.options.asctype].panel);
+            var target_pane_parent = target_pane.parent();
+            if (btn.pressed) {
+                if (this.minimizedMode) {
+                    $(this.el).width(MENU_SCALE_PART);
+                    target_pane_parent.css("display", "inline-block");
+                    this.minimizedMode = false;
+                    window.localStorage.setItem("pe-hidden-right-settings", 0);
+                }
+                target_pane_parent.find("> .active").removeClass("active");
+                target_pane.addClass("active");
+                if (this.scroller) {
+                    this.scroller.scrollTop(0);
+                }
+                this._settings[c_oAscTypeSelectElement.Slide].isCurrent = (btn.options.asctype == c_oAscTypeSelectElement.Slide);
+            } else {
+                target_pane_parent.css("display", "none");
+                $(this.el).width(SCALE_MIN);
+                this.minimizedMode = true;
+                window.localStorage.setItem("pe-hidden-right-settings", 1);
+            }
+            this.fireEvent("rightmenuclick", [this, btn.options.asctype, this.minimizedMode]);
+        },
+        SetActivePane: function (type, open) {
+            if (this.minimizedMode && open !== true || this._settings[type] === undefined) {
+                return;
+            }
+            if (this.minimizedMode) {
+                this._settings[type].btn.toggle(true, false);
+                this._settings[type].btn.trigger("click", this._settings[type].btn);
+            } else {
+                var target_pane = $("#" + this._settings[type].panel);
+                if (!target_pane.hasClass("active")) {
+                    target_pane.parent().find("> .active").removeClass("active");
+                    target_pane.addClass("active");
+                    if (this.scroller) {
+                        this.scroller.update();
+                    }
+                }
+                if (!this._settings[type].btn.isActive()) {
+                    this._settings[type].btn.toggle(true, false);
+                }
+            }
+        },
+        GetActivePane: function () {
+            return (this.minimizedMode) ? null : $(".settings-panel.active")[0].id;
+        },
+        SetDisabled: function (id, disabled, all) {
+            if (all) {
+                this.slideSettings.SetSlideDisabled(disabled, disabled, disabled);
+                this.paragraphSettings.disableControls(disabled);
+                this.shapeSettings.disableControls(disabled);
+                this.tableSettings.disableControls(disabled);
+                this.imageSettings.disableControls(disabled);
+                this.chartSettings.disableControls(disabled);
+            } else {
+                var cmp = $("#" + id);
+                if (disabled !== cmp.hasClass("disabled")) {
+                    cmp.toggleClass("disabled", disabled);
+                    (disabled) ? cmp.attr({
+                        disabled: disabled
+                    }) : cmp.removeAttr("disabled");
+                }
+            }
+        },
+        clearSelection: function () {
+            var target_pane = $(".right-panel");
+            target_pane.find("> .active").removeClass("active");
+            _.each(this._settings, function (item) {
+                if (item.btn.isActive()) {
+                    item.btn.toggle(false, true);
+                }
+            });
+            target_pane.css("display", "none");
+            $(this.el).width(SCALE_MIN);
+            this.minimizedMode = true;
+            window.localStorage.setItem("pe-hidden-right-settings", 1);
+            Common.NotificationCenter.trigger("layout:changed", "rightmenu");
+        },
+        txtParagraphSettings: "Text Settings",
+        txtImageSettings: "Image Settings",
+        txtTableSettings: "Table Settings",
+        txtShapeSettings: "Shape Settings",
+        txtSlideSettings: "Slide Settings",
+        txtChartSettings: "Chart Settings"
+    },
+    PE.Views.RightMenu || {}));
 });

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

@@ -1,344 +0,0 @@
-/*
- * (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

@@ -1,349 +1,226 @@
-/*
- * (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"
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * 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
+ *
+ */
+ define(["common/main/lib/component/Window", "common/main/lib/component/ComboBox"], function () {
+    PE.Views.SlideSizeSettings = Common.UI.Window.extend(_.extend({
+        options: {
+            width: 250,
+            header: true,
+            style: "min-width: 250px;",
+            cls: "modal-dlg",
+            id: "window-slide-size-settings"
+        },
+        initialize: function (options) {
+            _.extend(this.options, {
+                title: this.textTitle
+            },
+            options || {});
+            this.template = ['<div class="box" style="height: 95px;">', '<div class="input-row">', '<label class="text columns-text" style="font-weight: bold;">' + this.textSlideSize + "</label>", "</div>", '<div id="slide-size-combo" class="" style="margin-bottom: 10px;"></div>', '<table cols="2" style="width: 100%;margin-bottom: 10px;">', "<tr>", '<td class="padding-small" style="padding-right: 10px;">', '<label class="input-label" style="font-weight: bold;">' + this.textWidth + "</label>", '<div id="slide-size-spin-width"></div>', "</td>", '<td class="padding-small" style="padding-left: 10px;">', '<label class="input-label" style="font-weight: bold;">' + this.textHeight + "</label>", '<div id="slide-size-spin-height"></div>', "</td>", "</tr>", "</table>", "</div>", '<div class="separator horizontal"/>', '<div class="footer center">', '<button class="btn normal dlg-btn primary" result="ok" style="margin-right: 10px;">' + this.okButtonText + "</button>", '<button class="btn normal dlg-btn" result="cancel">' + this.cancelButtonText + "</button>", "</div>"].join("");
+            this.options.tpl = _.template(this.template, this.options);
+            this.spinners = [];
+            this._noApply = false;
+            Common.UI.Window.prototype.initialize.call(this, this.options);
+        },
+        render: function () {
+            Common.UI.Window.prototype.render.call(this);
+            this.cmbSlideSize = new Common.UI.ComboBox({
+                el: $("#slide-size-combo"),
+                cls: "input-group-nr",
+                style: "width: 100%;",
+                menuStyle: "min-width: 218px;",
+                editable: false,
+                data: [{
+                    value: 0,
+                    displayValue: this.txtStandard,
+                    size: [254, 190.5]
+                },
+                {
+                    value: 1,
+                    displayValue: this.txtWidescreen1,
+                    size: [254, 143]
+                },
+                {
+                    value: 2,
+                    displayValue: this.txtWidescreen2,
+                    size: [254, 158.7]
+                },
+                {
+                    value: 3,
+                    displayValue: this.txtLetter,
+                    size: [254, 190.5]
+                },
+                {
+                    value: 4,
+                    displayValue: this.txtLedger,
+                    size: [338.3, 253.7]
+                },
+                {
+                    value: 5,
+                    displayValue: this.txtA3,
+                    size: [355.6, 266.7]
+                },
+                {
+                    value: 6,
+                    displayValue: this.txtA4,
+                    size: [275, 190.5]
+                },
+                {
+                    value: 7,
+                    displayValue: this.txtB4,
+                    size: [300.7, 225.5]
+                },
+                {
+                    value: 8,
+                    displayValue: this.txtB5,
+                    size: [199.1, 149.3]
+                },
+                {
+                    value: 9,
+                    displayValue: this.txt35,
+                    size: [285.7, 190.5]
+                },
+                {
+                    value: 10,
+                    displayValue: this.txtOverhead,
+                    size: [254, 190.5]
+                },
+                {
+                    value: 11,
+                    displayValue: this.txtBanner,
+                    size: [203.2, 25.4]
+                },
+                {
+                    value: -1,
+                    displayValue: this.txtCustom,
+                    size: []
+                }]
+            });
+            this.cmbSlideSize.setValue(0);
+            this.cmbSlideSize.on("selected", _.bind(function (combo, record) {
+                this._noApply = true;
+                if (record.value < 0) {} else {
+                    this.spnWidth.setValue(Common.Utils.Metric.fnRecalcFromMM(record.size[0]), true);
+                    this.spnHeight.setValue(Common.Utils.Metric.fnRecalcFromMM(record.size[1]), true);
+                }
+                this._noApply = false;
+            },
+            this));
+            this.spnWidth = new Common.UI.MetricSpinner({
+                el: $("#slide-size-spin-width"),
+                step: 0.1,
+                width: 98,
+                defaultUnit: "cm",
+                value: "25.4 cm",
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.spinners.push(this.spnWidth);
+            this.spnWidth.on("change", _.bind(function (field, newValue, oldValue, eOpts) {
+                if (!this._noApply && this.cmbSlideSize.getValue() > -1) {
+                    this.cmbSlideSize.setValue(-1);
+                }
+            },
+            this));
+            this.spnHeight = new Common.UI.MetricSpinner({
+                el: $("#slide-size-spin-height"),
+                step: 0.1,
+                width: 98,
+                defaultUnit: "cm",
+                value: "19.05 cm",
+                maxValue: 55.88,
+                minValue: 0
+            });
+            this.spinners.push(this.spnHeight);
+            this.spnHeight.on("change", _.bind(function (field, newValue, oldValue, eOpts) {
+                if (!this._noApply && this.cmbSlideSize.getValue() > -1) {
+                    this.cmbSlideSize.setValue(-1);
+                }
+            },
+            this));
+            var $window = this.getChild();
+            $window.find(".dlg-btn").on("click", _.bind(this.onBtnClick, this));
+            $window.find("input").on("keypress", _.bind(this.onKeyPress, this));
+            this.updateMetricUnit();
+        },
+        _handleInput: function (state) {
+            if (this.options.handler) {
+                this.options.handler.call(this, this, state);
+            }
+            this.close();
+        },
+        onBtnClick: function (event) {
+            this._handleInput(event.currentTarget.attributes["result"].value);
+        },
+        onKeyPress: function (event) {
+            if (event.keyCode == Common.UI.Keys.RETURN) {
+                this._handleInput("ok");
+            }
+        },
+        setSettings: function (type, pagewitdh, pageheight) {
+            this.spnWidth.setValue(Common.Utils.Metric.fnRecalcFromMM(pagewitdh), true);
+            this.spnHeight.setValue(Common.Utils.Metric.fnRecalcFromMM(pageheight), true);
+            this.cmbSlideSize.setValue(type);
+        },
+        getSettings: function () {
+            var props = [this.cmbSlideSize.getValue(), Common.Utils.Metric.fnRecalcToMM(this.spnWidth.getNumberValue()), Common.Utils.Metric.fnRecalcToMM(this.spnHeight.getNumberValue())];
+            return props;
+        },
+        updateMetricUnit: function () {
+            if (this.spinners) {
+                for (var i = 0; i < this.spinners.length; i++) {
+                    var spinner = this.spinners[i];
+                    spinner.setDefaultUnit(Common.Utils.Metric.metricName[Common.Utils.Metric.getCurrentMetric()]);
+                    spinner.setStep(Common.Utils.Metric.getCurrentMetric() == Common.Utils.Metric.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"
+    },
+    PE.Views.SlideSizeSettings || {}));
 });

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

@@ -0,0 +1,274 @@
+/**
+ *  StatusBar View
+ *
+ *  Created by Maxim Kadushkin on 8 April 2014
+ *  Copyright (c) 2014 Ascensio System SIA. All rights reserved.
+ *
+ */
+
+define([
+    'text!presentationeditor/main/app/template/StatusBar.template',
+    'backbone',
+    'tip',
+    'common/main/lib/component/Menu',
+    'common/main/lib/component/Window',
+    'presentationeditor/main/app/model/Pages'
+ ], function(template, Backbone){
+        'use strict';
+
+        function _onCountPages(count){
+            this.pages.set('count', count);
+        }
+
+        function _onCurrentPage(number){
+            this.pages.set('current', number+1);
+        }
+
+        var _tplPages = _.template('Slide <%= current %> of <%= count %>');
+
+        function _updatePagesCaption(model,value,opts) {
+            $('#status-label-pages').text(
+                Common.Utils.String.format(this.pageIndexText, model.get('current'), model.get('count')) );
+        }
+
+        PE.Views.Statusbar = Backbone.View.extend(_.extend({
+            el: '#statusbar',
+            template: _.template(template),
+
+            events: {
+            },
+
+            api: undefined,
+            pages: undefined,
+
+            initialize: function () {
+                this.pages = new PE.Models.Pages({current:1, count:1});
+                this.pages.on('change', _.bind(_updatePagesCaption,this));
+            },
+
+            render: function () {
+                var me = this;
+                $(this.el).html(this.template({
+                    scope: this
+                }));
+
+                this.btnZoomToPage = new Common.UI.Button({
+                    el: $('#btn-zoom-topage',this.el),
+                    hint: this.tipFitPage,
+                    hintAnchor: 'top',
+                    toggleGroup: 'status-zoom',
+                    enableToggle: true
+                });
+
+                this.btnZoomToWidth = new Common.UI.Button({
+                    el: $('#btn-zoom-towidth',this.el),
+                    hint: this.tipFitWidth,
+                    hintAnchor: 'top',
+                    toggleGroup: 'status-zoom',
+                    enableToggle: true
+                });
+
+                this.btnZoomDown = new Common.UI.Button({
+                    el: $('#btn-zoom-down',this.el),
+                    hint: this.tipZoomOut+Common.Utils.String.platformKey('Ctrl+-'),
+                    hintAnchor: 'top'
+                });
+
+                this.btnZoomUp = new Common.UI.Button({
+                    el: $('#btn-zoom-up',this.el),
+                    hint: this.tipZoomIn+Common.Utils.String.platformKey('Ctrl++'),
+                    hintAnchor: 'top-right'
+                });
+
+                this.cntZoom = new Common.UI.Button({
+                    el: $('.cnt-zoom',this.el),
+                    hint: this.tipZoomFactor,
+                    hintAnchor: 'top'
+                });
+                this.cntZoom.cmpEl.on('show.bs.dropdown', function () {
+                        _.defer(function(){
+                            me.api.asc_enableKeyEvents(false);
+                            me.cntZoom.cmpEl.find('ul').focus();
+                        }, 100);
+                    }
+                );
+                this.cntZoom.cmpEl.on('hide.bs.dropdown', function () {
+                        _.defer(function(){
+                            me.api.asc_enableKeyEvents(true);
+                        }, 100);
+                    }
+                );
+
+                this.zoomMenu = new Common.UI.Menu({
+                    style: 'margin-top:-5px;',
+                    menuAlign: 'bl-tl',
+                    items: [
+                        { caption: "50%", value: 50 },
+                        { caption: "75%", value: 75 },
+                        { caption: "100%", value: 100 },
+                        { caption: "125%", value: 125 },
+                        { caption: "150%", value: 150 },
+                        { caption: "175%", value: 175 },
+                        { caption: "200%", value: 200 }
+                    ]
+                });
+                this.zoomMenu.render($('.cnt-zoom',this.el));
+                this.zoomMenu.cmpEl.attr({tabindex: -1});
+
+                /** coauthoring begin **/
+                this.panelUsers = $('#status-users-ct', this.el);
+                this.panelUsers.find('#status-users-block').on('click', _.bind(this.onUsersClick, this));
+                /** coauthoring end **/
+
+                this.txtGoToPage = new Common.UI.InputField({
+                    el          : $('#status-goto-page'),
+                    allowBlank  : true,
+                    validateOnChange: true,
+                    style       : 'width: 60px;',
+                    maskExp: /[0-9]/,
+                    validation  : function(value) {
+                        if (/(^[0-9]+$)/.test(value)) {
+                            value = parseInt(value);
+                            if (undefined !== value && value > 0 && value <= me.pages.get('count'))
+                                return true;
+                        }
+
+                        return me.txtPageNumInvalid;
+                    }
+                }).on('keypress:after', function(input, e) {
+                        var box = me.$el.find('#status-goto-box');
+                        if (e.keyCode === Common.UI.Keys.RETURN) {
+                            var edit = box.find('input[type=text]'), page = parseInt(edit.val());
+                            if (!page || page-- > me.pages.get('count') || page < 0) {
+                                edit.select();
+                                return false;
+                            }
+
+                            box.focus();                        // for IE
+                            box.parent().removeClass('open');
+
+                            me.api.goToPage(page);
+                            me.api.asc_enableKeyEvents(true);
+
+                            return false;
+                        }
+                    }
+                );
+
+                var goto = this.$el.find('#status-goto-box');
+                goto.on('click', function() {
+                    return false;
+                });
+                goto.parent().on('show.bs.dropdown',
+                    function () {
+                        me.txtGoToPage.setValue(me.api.getCurrentPage() + 1);
+                        me.txtGoToPage.checkValidate();
+                        var edit = me.txtGoToPage.$el.find('input');
+                        _.defer(function(){edit.focus(); edit.select();}, 100);
+
+                    }
+                );
+                goto.parent().on('hide.bs.dropdown',
+                    function () { var box = me.$el.find('#status-goto-box');
+                        if (me.api && box) {
+                            box.focus();                        // for IE
+                            box.parent().removeClass('open');
+
+                            me.api.asc_enableKeyEvents(true);
+                        }
+                    }
+                );
+
+                return this;
+            },
+
+            setApi: function(api) {
+                this.api = api;
+
+                if (this.api) {
+                    this.api.asc_registerCallback('asc_onCountPages',   _.bind(_onCountPages, this));
+                    this.api.asc_registerCallback('asc_onCurrentPage',  _.bind(_onCurrentPage, this));
+
+                    /** coauthoring begin **/
+                    this.api.asc_registerCallback('asc_onAuthParticipantsChanged', _.bind(this.onApiUsersChanged, this));
+                    this.api.asc_registerCallback('asc_onParticipantsChanged',     _.bind(this.onApiUsersChanged, this));
+                    /** coauthoring end **/
+                }
+
+                return this;
+
+            },
+
+            setMode: function(mode) {
+                this.$el.find('.el-edit')[mode.isEdit?'show':'hide']();
+            },
+
+            setVisible: function(visible) {
+                visible
+                    ? this.show()
+                    : this.hide();
+            },
+
+            /** coauthoring begin **/
+            onUsersClick: function() {
+                this.fireEvent('click:users', this);
+            },
+
+            onApiUsersChanged: function(users) {
+                var editusers = [];
+                _.each(users, function(item){
+                    if (!item.asc_getView())
+                        editusers.push(item);
+                });
+
+                var length = _.size(editusers);
+                this.panelUsers[length > 1 ? 'show' : 'hide']();
+
+                var ttblock = this.panelUsers.find('#status-users-block');
+                if (ttblock.data('bs.tooltip')) ttblock.removeData('bs.tooltip');
+
+                if (length > 1) {
+                    this.panelUsers.find('#status-users-count').text(length);
+
+                    var tip = this.tipUsers + '<br/><br/>', i = 0;
+                    for (var n in editusers) {
+                        tip += '\n' + Common.Utils.String.htmlEncode(editusers[n].asc_getUserName());
+                        if (++i > 3) break;
+                    }
+
+                    if (length > 4) {
+                        tip += '<br/>' + this.tipMoreUsers.replace('%1', length-4);
+                        tip += '<br/><br/>' + this.tipShowUsers;
+                    }
+
+                    ttblock.tooltip({
+                        title: tip,
+                        html: true,
+                        placement: 'top-left'
+                    });
+                }
+            },
+            /** coauthoring end **/
+
+            showStatusMessage: function(message) {
+                $('#status-label-action').text(message);
+            },
+
+            clearStatusMessage: function() {
+                $('#status-label-action').text('');
+            },
+
+            pageIndexText   : 'Slide {0} of {1}',
+            goToPageText    : 'Go to Slide',
+            tipUsers        : 'Document is in the collaborative editing mode.',
+            tipMoreUsers    : 'and %1 users.',
+            tipShowUsers    : 'To see all users click the icon below.',
+            tipFitPage      : 'Fit Slide',
+            tipFitWidth     : 'Fit Width',
+            tipZoomIn       : 'Zoom In',
+            tipZoomOut      : 'Zoom Out',
+            tipZoomFactor   : 'Magnification',
+            txtPageNumInvalid: 'Slide number invalid'
+        }, PE.Views.Statusbar || {}));
+    }
+);

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

@@ -1,54 +0,0 @@
-/*
- * (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

@@ -1,379 +1,121 @@
-/*
- * (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"
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * 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
+ *
+ */
+ define(["text!presentationeditor/main/app/template/Viewport.template", "jquery", "underscore", "backbone", "common/main/lib/component/BaseView", "common/main/lib/component/Layout"], function (viewportTemplate, $, _, Backbone) {
+    PE.Views.Viewport = Backbone.View.extend({
+        el: "#viewport",
+        template: _.template(viewportTemplate),
+        events: {},
+        initialize: function () {},
+        render: function () {
+            var el = $(this.el);
+            el.html(this.template({}));
+            if (Common.Utils.isSafari) {
+                $("body").addClass("safari");
+                $("body").mousewheel(function (e) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                });
+            } else {
+                if (Common.Utils.isChrome) {
+                    $("body").addClass("chrome");
+                }
+            }
+            var $container = $("#viewport-vbox-layout", el);
+            var items = $container.find(" > .layout-item");
+            this.vlayout = new Common.UI.VBoxLayout({
+                box: $container,
+                items: [{
+                    el: items[0],
+                    rely: true
+                },
+                {
+                    el: items[1],
+                    rely: true
+                },
+                {
+                    el: items[2],
+                    stretch: true
+                },
+                {
+                    el: items[3],
+                    height: 25
+                }]
+            });
+            $container = $("#viewport-hbox-layout", el);
+            items = $container.find(" > .layout-item");
+            this.hlayout = new Common.UI.HBoxLayout({
+                box: $container,
+                items: [{
+                    el: items[0],
+                    rely: true,
+                    resize: {
+                        hidden: true,
+                        autohide: false,
+                        min: 300,
+                        max: 600
+                    }
+                },
+                {
+                    el: items[1],
+                    stretch: true
+                },
+                {
+                    el: $(items[2]).hide(),
+                    rely: true
+                }]
+            });
+            return this;
+        },
+        applyEditorMode: function () {
+            var me = this,
+            toolbarView = PE.getController("Toolbar").getView("Toolbar"),
+            rightMenuView = PE.getController("RightMenu").getView("RightMenu"),
+            statusBarView = PE.getController("Statusbar").getView("Statusbar");
+            me._toolbar = toolbarView.render();
+            me._rightMenu = rightMenuView.render();
+            var value = window.localStorage.getItem("pe-hidden-status");
+            if (value !== null && parseInt(value) == 1) {
+                statusBarView.setVisible(false);
+            }
+        },
+        setMode: function (mode, delay) {
+            if (mode.isDisconnected) {
+                if (_.isUndefined(this.mode)) {
+                    this.mode = {};
+                }
+                this.mode.canCoAuthoring = false;
+            } else {
+                this.mode = mode;
+            }
+        }
+    });
 });