init repo

OfficeWeb/apps/common/main/lib/component/ComboDataView.js

@@ -0,0 +1,322 @@
+/*
+ * (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("Common.component.ComboDataView", {
+    extend: "Ext.container.Container",
+    requires: (["Ext.data.Model", "Ext.data.Store", "Ext.view.View", "Ext.XTemplate"]),
+    alias: "widget.commoncombodataview",
+    padding: 4,
+    itemWidth: 80,
+    itemHeight: 40,
+    menuHeight: 100,
+    menuMaxHeight: 500,
+    minWidth: 150,
+    emptyComboText: "No styles",
+    handleGlobalResize: false,
+    constructor: function (config) {
+        if (!config || !config.viewData || !config.itemWidth || !config.itemHeight) {
+            throw Error("ComboDataView creation failed: required parameters are missing.");
+        }
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this,
+        cfg = Ext.apply({},
+        me.initialConfig);
+        var borderSize = 0;
+        var paddingLeftDV = 0;
+        var paddingRightDV = 0;
+        var paddingLeftItem = 0;
+        var paddingRightItem = 0;
+        var marginRightItem = 0;
+        var initCSSRules = true;
+        var borderRule = Ext.util.CSS.getRule(".storage-combodataview");
+        if (borderRule) {
+            borderSize = parseInt(borderRule.style.borderWidth);
+            if (isNaN(borderSize)) {
+                borderSize = 0;
+            }
+        }
+        Ext.define("DataModel", {
+            extend: "Ext.data.Model",
+            fields: [{
+                name: "imageUrl"
+            },
+            {
+                name: "title"
+            },
+            {
+                name: "data"
+            },
+            {
+                name: "uid"
+            }]
+        });
+        var fieldStore = Ext.create("Ext.data.Store", {
+            storeId: Ext.id(),
+            model: (Ext.isDefined(cfg.store)) ? cfg.store.model : "DataModel",
+            data: cfg.viewData
+        });
+        var dataTpl = (Ext.isDefined(cfg.dataTpl)) ? cfg.dataTpl : Ext.create("Ext.XTemplate", '<tpl for=".">', '<div class="thumb-wrap">', '<img src="{imageUrl}" width="' + me.itemWidth + '" height="' + me.itemHeight + '"/>', '<tpl if="title">', '<span class="title">{title}</span>', "</tpl>", "</div>", "</tpl>");
+        this.dataMenu = Ext.widget("cmdmenudataviewpicker", {
+            width: me.width,
+            height: me.menuHeight,
+            cls: "x-dataview-combo-menu",
+            viewData: cfg.viewData,
+            dataTpl: cfg.dataTpl,
+            store: cfg.store,
+            itemWidth: me.itemWidth,
+            itemHeight: me.itemHeight,
+            constrain: false,
+            pickerpadding: (me.padding - 1),
+            listeners: {
+                hide: function (ct, eOpts) {
+                    me.fireEvent("menuhide", me, ct);
+                }
+            }
+        });
+        var fieldDataView = Ext.widget("dataview", {
+            store: fieldStore,
+            tpl: dataTpl,
+            singleSelect: true,
+            trackOver: true,
+            style: "overflow:auto",
+            overItemCls: "x-item-over",
+            itemSelector: "div.thumb-wrap",
+            emptyText: '<div class="emptyText">' + me.emptyComboText + "</div>",
+            deferEmptyText: false,
+            cls: "x-view-context",
+            listeners: {
+                itemclick: function (view, record, item, index, event, eOpts) {
+                    if (cfg.repeatedselect && view.getSelectionModel().getLastSelected() !== null && view.getSelectionModel().getLastSelected().id == record.id) {
+                        me.fireEvent("select", me, record);
+                    }
+                },
+                afterrender: Ext.bind(function (ct, eOpts) {
+                    if (fieldStore.getCount() > 0) {
+                        ct.select(fieldStore.getAt(0));
+                        this.dataMenu.picker.selectByIndex(0);
+                    }
+                },
+                this),
+                beforecontainerclick: function (view, event, eOpts) {
+                    return false;
+                },
+                itemdblclick: function (view, record, item, index, event, eOpts) {
+                    me.fireEvent("releasecapture", me);
+                }
+            }
+        });
+        var fieldContainer = Ext.widget("container", {
+            flex: 1,
+            height: me.height - 2 * (me.padding + borderSize),
+            items: [fieldDataView]
+        });
+        var btnMenu = Ext.widget("button", {
+            cls: "x-btn-combodataview",
+            height: me.height - 2 * (me.padding + borderSize),
+            handler: Ext.bind(function (btn, e) {
+                if (initCSSRules) {
+                    me.getDataViewCSSRules();
+                }
+                var maxViewCount = Math.floor((me.getEl().getWidth()) / (me.itemWidth + paddingLeftItem + paddingRightItem));
+                var countRec = me.dataMenu.picker.store.getCount();
+                var menuRowsCount = Math.ceil(countRec / maxViewCount);
+                if (menuRowsCount > 1) {
+                    var height = menuRowsCount * (me.itemHeight + 2 * marginRightItem + paddingLeftItem + paddingRightItem) + 6,
+                    maxHeight = Math.min(me.menuMaxHeight, Ext.Element.getViewportHeight() - this.getPosition()[1] - 6);
+                    if (height > maxHeight) {
+                        height = maxHeight;
+                    }
+                    me.dataMenu.show();
+                    me.dataMenu.setSize(me.getEl().getWidth(), height);
+                    me.dataMenu.showBy(fieldContainer, "tl-tl", [-me.padding + borderSize, -me.padding + borderSize]);
+                }
+            },
+            this)
+        });
+        this.fillComboView = function (record, forceSelect, forceFill) {
+            if (Ext.isDefined(record)) {
+                var store = me.dataMenu.picker.store;
+                if (store) {
+                    if (forceFill || fieldStore.find("uid", record.data.uid) < 0) {
+                        if (initCSSRules) {
+                            me.getDataViewCSSRules();
+                        }
+                        fieldStore.removeAll();
+                        var indexRec = store.indexOf(record),
+                        countRec = store.getCount(),
+                        maxViewCount = Math.floor((fieldContainer.getWidth()) / (me.itemWidth + paddingLeftItem + paddingRightItem)),
+                        newStyles = [];
+                        if (fieldContainer.getHeight() / me.itemHeight > 2) {
+                            maxViewCount *= Math.floor(fieldContainer.getHeight() / me.itemHeight);
+                        }
+                        if (indexRec < 0) {
+                            return;
+                        }
+                        indexRec = Math.floor(indexRec / maxViewCount) * maxViewCount;
+                        for (var index = indexRec, viewCount = 0; index < countRec && viewCount < maxViewCount; index++, viewCount++) {
+                            var rec = store.getAt(index);
+                            var obj = {};
+                            for (var i = 0; i < rec.fields.length; i++) {
+                                obj[rec.fields.items[i].name] = rec.data[rec.fields.items[i].name];
+                            }
+                            newStyles.push(obj);
+                        }
+                        fieldStore.add(newStyles);
+                    }
+                    if (forceSelect) {
+                        var selectIndex = fieldStore.find("uid", record.data.uid);
+                        if (selectIndex > -1) {
+                            fieldDataView.select(fieldStore.getAt(selectIndex), false, true);
+                        }
+                    }
+                }
+            }
+        };
+        this.selectByIndex = function (index) {
+            if (index < 0) {
+                fieldDataView.getSelectionModel().deselectAll(false);
+            }
+            me.dataMenu.picker.selectByIndex(index, false);
+        };
+        var onMenuSelect = function (picker, record) {
+            me.fillComboView(record, true);
+            if (record) {
+                me.fireEvent("select", me, record);
+            }
+        };
+        var onSelectionChange = function (view, selections, eOpts) {
+            var record = selections[0];
+            if (record) {
+                me.dataMenu.picker.selectByIndex(me.dataMenu.picker.store.findExact("uid", record.get("uid")), false);
+                me.fireEvent("select", me, record);
+            }
+        };
+        var onPickerSelectionChange = function (picker, view, selections) {
+            me.fillComboView(selections[0], true);
+        };
+        var doResizeCmp = function (width, height) {
+            if (me.dataMenu) {
+                me.dataMenu.setWidth(width);
+                me.dataMenu.hide();
+                var picker = me.dataMenu.picker;
+                if (picker) {
+                    var record = picker.getSelectedRec();
+                    me.fillComboView(record || picker.store.getAt(0), !!record, true);
+                }
+            }
+        };
+        if (me.handleGlobalResize) {
+            me.on("afterrender", function (cmp) {
+                var innerBoxEl = cmp.getEl().down(".x-box-inner");
+                if (innerBoxEl) {
+                    innerBoxEl.addCls("combodataview-auto-width");
+                }
+            },
+            this);
+            Ext.EventManager.onWindowResize(function () {
+                var cmpEl = me.getEl();
+                if (cmpEl) {
+                    me.doLayout();
+                    doResizeCmp(cmpEl.getWidth());
+                }
+            },
+            this);
+        } else {
+            me.on("resize", function (o, adjw, adjh) {
+                doResizeCmp(adjw, adjh);
+            },
+            this);
+        }
+        this.dataMenu.addListener("select", onMenuSelect, me);
+        this.dataMenu.picker.addListener("selectionchange", onPickerSelectionChange, me);
+        fieldDataView.addListener("selectionchange", onSelectionChange, me);
+        me.addEvents("select", "menuhide", "releasecapture");
+        me.addListener("afterrender", function () {
+            Ext.util.CSS.refreshCache();
+            var menuDataViewItemRule = Ext.util.CSS.getRule(".x-dataview-combo-menu .storage-data-view .thumb-wrap");
+            if (menuDataViewItemRule) {
+                paddingLeftItem = parseInt(menuDataViewItemRule.style.paddingLeft);
+                if (isNaN(paddingLeftItem)) {
+                    paddingLeftItem = 0;
+                }
+                paddingRightItem = parseInt(menuDataViewItemRule.style.paddingRight);
+                if (isNaN(paddingRightItem)) {
+                    paddingRightItem = 0;
+                }
+                marginRightItem = parseInt(menuDataViewItemRule.style.marginRight);
+                if (isNaN(marginRightItem)) {
+                    marginRightItem = 0;
+                }
+                initCSSRules = false;
+            }
+            Ext.defer(function () {
+                me.dataMenu.showAt([-10000, -10000]);
+                me.fireEvent("releasecapture", me);
+            },
+            100);
+        },
+        this);
+        me.getDataViewCSSRules = function () {
+            if (me.dataMenu.picker.getEl()) {
+                var thumb = me.dataMenu.picker.getEl().down(".thumb-wrap");
+                if (thumb) {
+                    paddingLeftItem = parseInt(thumb.getStyle("paddingLeft"));
+                    if (isNaN(paddingLeftItem)) {
+                        paddingLeftItem = 0;
+                    }
+                    paddingRightItem = parseInt(thumb.getStyle("paddingRight"));
+                    if (isNaN(paddingRightItem)) {
+                        paddingRightItem = 0;
+                    }
+                    marginRightItem = parseInt(thumb.getStyle("marginRight"));
+                    if (isNaN(marginRightItem)) {
+                        marginRightItem = 0;
+                    }
+                    initCSSRules = false;
+                }
+            }
+        };
+        Ext.apply(me, {
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            cls: "storage-combodataview",
+            items: [fieldContainer, btnMenu]
+        },
+        cfg);
+        this.callParent(arguments);
+    }
+});

OfficeWeb/apps/common/main/lib/component/DataViewPicker.js

@@ -0,0 +1,245 @@
+/*
+ * (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("Common.component.DataViewPicker", {
+    extend: "Ext.container.Container",
+    requires: (["Ext.data.Store", "Ext.data.Model", "Ext.view.View", "Ext.XTemplate", "Ext.container.Container", "Common.plugin.DataViewScrollPane"]),
+    uses: ["Common.component.GroupedDataView"],
+    alias: "widget.cmddataviewpicker",
+    layout: {
+        type: "fit"
+    },
+    constructor: function (config) {
+        if (!config || !config.viewData) {
+            throw Error("Common.component.DataViewPicker creation failed: required parameters are missing.");
+        }
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this,
+        cfg = Ext.apply({},
+        me.initialConfig);
+        me.selectedRec = null;
+        Ext.define("DataModel", {
+            extend: "Ext.data.Model",
+            fields: [{
+                name: "imageUrl"
+            },
+            {
+                name: "title"
+            },
+            {
+                name: "data"
+            },
+            {
+                name: "uid"
+            }]
+        });
+        me.store = (Ext.isDefined(cfg.store)) ? cfg.store : Ext.create("Ext.data.Store", {
+            storeId: Ext.id(),
+            model: "DataModel",
+            data: cfg.viewData
+        });
+        var dataTpl = (Ext.isDefined(cfg.dataTpl)) ? cfg.dataTpl : Ext.create("Ext.XTemplate", '<tpl for=".">', '<div class="thumb-wrap">', (me.itemWidth !== undefined && me.itemHeight !== undefined) ? '<img src="{imageUrl}" width="' + me.itemWidth + '" height="' + me.itemHeight + '"/>' : '<img src="{imageUrl}" />', '<tpl if="title">', '<span class="title">{title}</span>', "</tpl>", "</div>", "</tpl>");
+        if (me.isGroupedDataView) {
+            var dataListView = Ext.create("Common.component.GroupedDataView", {
+                store: me.store,
+                listeners: {
+                    itemclick: function (view, record, htmlItem, index, event, eOpts) {
+                        me.selectedRec = record;
+                        me.fireEvent("select", me, record, htmlItem, index);
+                    },
+                    beforecontainerclick: function (view, event, eOpts) {
+                        return false;
+                    },
+                    selectionchange: function (view, selections, eOpts) {
+                        var plugin = dataListView.getPlugin("scrollpane"),
+                        node = dataListView.getNode(selections[0]);
+                        if (plugin && node) {
+                            plugin.scrollToElement(node);
+                        }
+                        me.fireEvent("selectionchange", me, view, selections);
+                    },
+                    itemkeydown: function (picker, record, item, index, e, opts) {
+                        if (e.getKey() == e.ENTER) {
+                            picker.fireEvent("itemclick", picker, record, item, index, e, opts);
+                        }
+                    }
+                },
+                plugins: [{
+                    ptype: "dataviewscrollpane",
+                    areaSelector: ".grouped-data-view",
+                    pluginId: "scrollpane",
+                    settings: {
+                        enableKeyboardNavigation: true,
+                        keyboardSpeed: 0.001,
+                        contentWidth: me.contentWidth
+                    }
+                }]
+            });
+        } else {
+            var dataListView = Ext.create("Ext.view.View", {
+                store: me.store,
+                tpl: dataTpl,
+                singleSelect: true,
+                trackOver: true,
+                autoScroll: true,
+                overItemCls: "x-item-over",
+                itemSelector: "div.thumb-wrap",
+                emptyText: "",
+                cls: "storage-data-view",
+                listeners: {
+                    itemclick: function (view, record, htmlItem, index, event, eOpts) {
+                        me.selectedRec = record;
+                        me.fireEvent("select", me, record, htmlItem, index);
+                    },
+                    beforecontainerclick: function (view, event, eOpts) {
+                        return false;
+                    },
+                    selectionchange: function (view, selections, eOpts) {
+                        me.fireEvent("selectionchange", me, view, selections);
+                    },
+                    itemkeydown: function (picker, record, item, index, e, opts) {
+                        if (e.getKey() == e.ENTER) {
+                            picker.fireEvent("itemclick", picker, record, item, index, e, opts);
+                        }
+                    },
+                    itemmouseenter: function (obj, record, item, index, e, eOpts) {
+                        me.fireEvent("itemmouseenter", me, record, item, index, e, eOpts);
+                    },
+                    itemmouseleave: function (obj, record, item, index, e, eOpts) {
+                        me.fireEvent("itemmouseleave", me, record, item, index, e, eOpts);
+                    }
+                },
+                plugins: [{
+                    ptype: "dataviewscrollpane",
+                    areaSelector: ".storage-data-view",
+                    pluginId: "scrollpane",
+                    settings: {
+                        enableKeyboardNavigation: true,
+                        keyboardSpeed: 0.001,
+                        contentWidth: me.contentWidth
+                    }
+                }]
+            });
+        }
+        me.addEvents("select", "itemmouseenter", "itemmouseleave");
+        if (me.handler) {
+            me.on("select", me.handler, me.scope, me);
+        }
+        me.getSelectedRec = function () {
+            return (me.isGroupedDataView) ? dataListView.getSelected() : dataListView.getSelectionModel().getSelection()[0];
+        };
+        me.selectByIndex = function (index, fireevent) {
+            if (dataListView.rendered) {
+                if (index < 0) {
+                    dataListView.getSelectionModel().deselectAll(false);
+                    me.selectedRec = null;
+                } else {
+                    var fire = Ext.isDefined(fireevent) ? fireevent : true;
+                    me.selectedRec = me.store.getAt(index);
+                    dataListView.getSelectionModel().select(me.store.getAt(index), false, fire);
+                }
+            } else {
+                dataListView.on("afterrender", Ext.bind(function (idx) {
+                    me.selectByIndex(idx);
+                },
+                this, [index]), {
+                    single: true
+                });
+            }
+        };
+        me.selectGroupItem = function (group, item) {
+            if (!me.isGroupedDataView || !dataListView) {
+                return null;
+            }
+            me.selectedRec = dataListView.selectGroupItem(group, item);
+            return me.selectedRec;
+        };
+        me.updateScrollPane = function () {
+            var plugin = dataListView.getPlugin("scrollpane");
+            if (plugin && dataListView.getEl() && dataListView.getEl().getWidth() > 0) {
+                if (plugin.settings) {
+                    plugin.settings.contentWidth = me.contentWidth;
+                }
+                plugin.updateScrollPane(dataListView.getEl().dom);
+                me.checkScrolls();
+                if (me.arrangeItems) {
+                    me.arrangeItems.call(me);
+                }
+            }
+        };
+        me.checkScrolls = function () {
+            var plugin = dataListView.getPlugin("scrollpane");
+            if (plugin && dataListView.getEl()) {
+                var jspElem = me.getEl().down(".jspPane");
+                if (jspElem.getHeight() > 0 && me.getEl().getHeight() > 0) {
+                    var i = 0;
+                    var updatescroll = setInterval(function () {
+                        if (jspElem.getHeight() > me.getEl().getHeight()) {
+                            if (me.getEl().down(".jspVerticalBar")) {
+                                clearInterval(updatescroll);
+                            } else {
+                                plugin.updateScrollPane(dataListView.getEl().dom);
+                                clearInterval(updatescroll);
+                            }
+                        }
+                        if (i++>3) {
+                            clearInterval(updatescroll);
+                        }
+                    },
+                    100);
+                }
+            }
+        };
+        me.showUpdated = function () {
+            me.updateScrollPane();
+            if (dataListView && dataListView.getEl()) {
+                dataListView.getEl().focus(50);
+                if (me.selectedRec) {
+                    dataListView.getSelectionModel().select(me.selectedRec, false, false);
+                } else {
+                    dataListView.getSelectionModel().deselectAll(false);
+                }
+            }
+        };
+        dataListView.getStore().on("datachanged", me.updateScrollPane, me, {
+            buffer: 10
+        });
+        dataListView.on("viewready", me.updateScrollPane, me);
+        me.on("resize", me.updateScrollPane, me);
+        me.on("afterlayout", me.updateScrollPane, me);
+        me.items = [dataListView];
+        this.callParent(arguments);
+    }
+});

OfficeWeb/apps/common/main/lib/component/DoubleColorPalette.js

@@ -0,0 +1,235 @@
+/*
+ * (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("Common.component.DoubleColorPalette", {
+    extend: "Ext.ColorPalette",
+    alias: "widget.cmddoublecolorpalette",
+    allowReselect: true,
+    dyncolorscount: 12,
+    width: 180,
+    maxWidth: 180,
+    baseCls: "cmp-double-colorpalette",
+    requires: ["Common.view.ExtendedColorDialog"],
+    renderTpl: ['<tpl for="colors">', '<tpl if="this.isSeparator(values)"><div class="palette-color-spacer" style="width:100%;height:10px;float:left;"></div></tpl>', '<tpl if="this.isColor(values)">', '<a href="#" class="color-{.}" style="background:#{.} "hidefocus="on">', '<em><span style="background:#{.}" unselectable="on">&#160;</span></em>', "</a>", "</tpl>", '<tpl if="this.isCustom(values)">', '<a href="#" id="{id}" class="palette-color-custom {cls}" hidefocus="on">', '<em><span style="background:#FFFFFF;background-image:url({image});" unselectable="on">&#160;</span></em>', "</a>", "</tpl>", "</tpl>", {
+        isSeparator: function (v) {
+            return typeof(v) == "string" && v == "-";
+        },
+        isColor: function (v) {
+            return typeof(v) == "string" && (/[0-9A-F]{6}|transparent/).test(v);
+        },
+        isCustom: function (v) {
+            return typeof(v) == "object";
+        }
+    }],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this.callParent(arguments);
+    },
+    onRender: function (o) {
+        this.callParent(arguments);
+        if (this.dynamiccolors) {
+            var picker = o.down(".x-color-picker");
+            if (picker) {
+                var i = -1,
+                colors = '<div class="palette-color-spacer" style="width:100%;height:10px;float:left;"></div>';
+                while (++i < this.dyncolorscount) {
+                    colors += Ext.String.format('<a href="#" class="color-dynamic-{0} dynamic-empty-color" style="background:#ffffff" color="ffffff" hidefocus="on">' + '<em><span unselectable="on">&#160;</span></em></a>', i);
+                }
+                Ext.DomHelper.insertHtml("beforeEnd", picker.dom, colors);
+            }
+            var menu = this.el.up(".x-menu");
+            if (menu) {
+                Ext.menu.Manager.menus[menu.id].addListener("beforeshow", this.updateCustomColors, this);
+            }
+            this.updateCustomColors();
+        }
+    },
+    afterRender: function (o) {
+        this.callParent(arguments);
+        if (this.lastvalue) {
+            this.select(this.lastvalue);
+        }
+    },
+    setCustomColor: function (color) {
+        color = /#?([a-fA-F0-9]{6})/.exec(color);
+        if (color) {
+            var el = this.getEl();
+            if (el) {
+                this._saveCustomColor(color[1]);
+                $("#" + el.id + " a." + this.selectedCls).removeClass(this.selectedCls);
+                var child = el.down(".dynamic-empty-color");
+                if (!child) {
+                    this.updateCustomColors();
+                    child = el.down(".color-dynamic-" + (this.dyncolorscount - 1));
+                }
+                child.removeCls("dynamic-empty-color").addCls(this.selectedCls).dom.setAttribute("color", color[1]);
+                child.down("span").setStyle("background-color", "#" + color[1]).setStyle("border", "none");
+            }
+        }
+    },
+    select: function (color, suppressEvent) {
+        var el = this.getEl();
+        if (el) {
+            $("#" + el.id + " a." + this.selectedCls).removeClass(this.selectedCls);
+        }
+        if (/#?[a-fA-F0-9]{6}/.test(color)) {
+            color = /#?([a-fA-F0-9]{6})/.exec(color)[1].toUpperCase();
+        }
+        if (/^[a-fA-F0-9]{6}|transparent$/.test(color) && Ext.Array.contains(this.colors, color)) {
+            if (!Ext.Array.contains(this.colors, this.value)) {
+                this.value = false;
+            }
+            this.callParent(arguments);
+        } else {
+            if (el) {
+                var co = el.down("#" + color) || el.down('a[color="' + color + '"]');
+                if (co) {
+                    co.addCls(this.selectedCls);
+                    this.value = color.toUpperCase();
+                } else {
+                    if (el.down("a." + this.selectedCls)) {
+                        this.value = false;
+                    } else {
+                        if (this.dynamiccolors) {
+                            this.setCustomColor(color);
+                        }
+                    }
+                }
+            } else {
+                this.lastvalue = color;
+            }
+        }
+    },
+    handleClick: function (event, target) {
+        var me = this;
+        if (! (target.className.search("palette-color-custom") < 0)) {
+            event.stopEvent();
+            cmp = Ext.get(target.parentNode.id).down("a." + me.selectedCls);
+            if (!cmp || cmp.id != target.id) {
+                if (cmp) {
+                    cmp.removeCls(me.selectedCls);
+                }
+                Ext.get(target.id).addCls(me.selectedCls);
+                me.value = false;
+                me.fireEvent("select", me, target.id);
+            } else {
+                me.fireEvent("select", me, cmp.id);
+            }
+        } else {
+            if (! (target.className.search("color-transparent") < 0)) {
+                event.stopEvent();
+                cmp = Ext.get(target.parentNode.id).down("a." + me.selectedCls);
+                if (!cmp || cmp.id != target.id) {
+                    if (cmp) {
+                        cmp.removeCls(me.selectedCls);
+                    }
+                    Ext.get(target.id).addCls(me.selectedCls);
+                    me.value = "transparent";
+                }
+                me.fireEvent("select", me, "transparent");
+            } else {
+                if (! (target.className.search("color-dynamic") < 0)) {
+                    if (!/dynamic-empty-color/.test(target.className)) {
+                        var color = target.getAttribute("color");
+                        if (color) {
+                            me.fireEvent("select", me, color);
+                        }
+                        this.value = color.toUpperCase();
+                        $("#" + this.getEl().id + " a." + me.selectedCls).removeClass(me.selectedCls);
+                        Ext.get(target.id).addCls(me.selectedCls);
+                    } else {
+                        setTimeout(function () {
+                            me.addNewColor();
+                            Ext.menu.Manager.hideAll();
+                        },
+                        10);
+                    }
+                } else {
+                    var cmp = Ext.get(target.parentNode.id).down("a.palette-color-custom");
+                    if (cmp) {
+                        cmp.removeCls(me.selectedCls);
+                    }
+                    if (!/^[a-fA-F0-9]{6}$/.test(this.value) || !Ext.Array.contains(this.colors, this.value)) {
+                        this.value = false;
+                    }
+                    this.callParent(arguments);
+                }
+            }
+        }
+    },
+    addNewColor: function () {
+        var me = this;
+        var win = Ext.widget("commonextendedcolordialog", {});
+        win.addListener("onmodalresult", function (mr) {
+            me._isdlgopen = false;
+            if (mr == 1) {
+                me.setCustomColor(win.getColor());
+                me.fireEvent("select", me, win.getColor());
+            }
+        },
+        false);
+        me._isdlgopen = true;
+        win.setColor(me.value);
+        win.show();
+    },
+    isDialogOpen: function () {
+        return this._isdlgopen == true;
+    },
+    updateCustomColors: function () {
+        var picker = this.getEl();
+        if (picker) {
+            var colors = localStorage["asc." + window.storagename + ".colors.custom"];
+            colors = colors ? colors.split(",") : [];
+            var i = -1,
+            colorEl, c = colors.length < this.dyncolorscount ? colors.length : this.dyncolorscount;
+            while (++i < c) {
+                colorEl = picker.down(".color-dynamic-" + i);
+                colorEl.removeCls("dynamic-empty-color").dom.setAttribute("color", colors[i]);
+                colorEl.down("span").setStyle("background-color", "#" + colors[i]).setStyle("border", "none");
+            }
+        }
+    },
+    _saveCustomColor: function (color) {
+        var colors = localStorage["asc." + window.storagename + ".colors.custom"];
+        colors = colors ? colors.split(",") : [];
+        if (colors.push(color) > this.dyncolorscount) {
+            colors.shift();
+        }
+        localStorage["asc." + window.storagename + ".colors.custom"] = colors.join().toUpperCase();
+    },
+    _menuBeforeShow: function () {
+        this.updateCustomColors();
+    }
+});

OfficeWeb/apps/common/main/lib/component/GroupedDataView.js

@@ -0,0 +1,190 @@
+/*
+ * (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("Common.component.GroupedDataView", {
+    extend: "Ext.DataView",
+    alias: "widget.cmdgroupeddataview",
+    requires: (["Common.model.GroupItem", "Common.model.Group", "Ext.XTemplate"]),
+    selModel: {
+        enableKeyNav: false
+    },
+    tpl: new Ext.XTemplate('<tpl for=".">', '<div class="asc-grouped-data">', '<div class="group-description">', '<span class="description-text">{[values[this.fieldGroupName]]}</span>', "</div>", '<div class="group-items-container">', '<tpl for="getGroupItems">', '<div class="group-item">', '<span class="{iconcls}"></span>', "</div>", "</tpl>", "</div>", "</div>", '<div class="asc-grouped-data-selector"></div>', "</tpl>", {
+        compiled: true,
+        fieldGroupName: "groupname"
+    }),
+    itemSelector: "div.group-item",
+    trackOver: true,
+    overItemCls: "group-item-over",
+    cls: "grouped-data-view",
+    listeners: {
+        beforecontainerclick: function (o, e, eOpts) {
+            return false;
+        },
+        viewready: function () {
+            if (this.delayedSelection) {
+                this.getSelectionModel().doSingleSelect(this.delayedSelection);
+                this.delayedSelection = undefined;
+            }
+        }
+    },
+    constructor: function (config) {
+        if (config.selModel) {
+            config.selModel.enableKeyNav = false;
+        }
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this.callParent(arguments);
+    },
+    updateIndexes: function (startIndex, endIndex) {
+        var ns = this.all.elements,
+        records = [],
+        i;
+        this.store.each(function (item, index, count) {
+            Ext.Array.insert(records, records.length, item.getGroupItems().getRange());
+        });
+        startIndex = startIndex || 0;
+        endIndex = endIndex || ((endIndex === 0) ? 0 : (ns.length - 1));
+        for (i = startIndex; i <= endIndex; i++) {
+            ns[i].viewIndex = i;
+            ns[i].viewRecordId = records[i].internalId;
+            if (!ns[i].boundView) {
+                ns[i].boundView = this.id;
+            }
+        }
+    },
+    getRecord: function (node) {
+        var record_out, record, i = -1,
+        c = this.store.getCount();
+        while (!record_out && ++i < c) {
+            record = this.store.getAt(i);
+            if (record) {
+                record_out = record.getGroupItems().data.getByKey(Ext.getDom(node).viewRecordId);
+            }
+        }
+        return record_out;
+    },
+    onRender: function (cmp) {
+        this.callParent(arguments);
+        var me = this;
+        me.el.set({
+            tabIndex: -1
+        });
+        me.keyNav = Ext.create("Ext.util.KeyNav", me.el, {
+            down: Ext.pass(me.onNavKey, [1, 1], me),
+            right: Ext.pass(me.onNavKey, [1, null], me),
+            left: Ext.pass(me.onNavKey, [-1, null], me),
+            up: Ext.pass(me.onNavKey, [-1, -1], me),
+            scope: me
+        });
+    },
+    onNavKey: function (step, shift) {
+        step = step || 1;
+        var selected = this.getSelectionModel().getSelection()[0],
+        numRecords = this.all.elements.length,
+        idx;
+        if (selected) {
+            if (shift) {
+                var info = this.getIndexInStore(selected);
+                step = this.getShiftedStep(info, shift);
+            }
+            idx = this.indexOf(this.getNode(selected)) + step;
+        } else {
+            idx = 0;
+        }
+        if (idx < 0) {
+            idx = numRecords - 1;
+        } else {
+            if (idx >= numRecords) {
+                idx = 0;
+            }
+        }
+        var record = this.getRecord(this.all.elements[idx]);
+        this.getSelectionModel().doSingleSelect(record);
+    },
+    getIndexInStore: function (record) {
+        var out = [],
+        group,
+        localindex,
+        groupindex = -1,
+        c = this.store.getCount();
+        while (++groupindex < c) {
+            group = this.store.getAt(groupindex);
+            localindex = group.getGroupItems().indexOf(record);
+            if (! (localindex < 0)) {
+                out = [groupindex, localindex, group.getGroupItems().getCount()];
+                break;
+            }
+        }
+        return out;
+    },
+    getShiftedStep: function (info, direct) {
+        var groupindex = info[0] + direct;
+        if (groupindex < 0) {
+            groupindex = this.store.getCount() - 1;
+        } else {
+            if (! (groupindex < this.store.getCount())) {
+                groupindex = 0;
+            }
+        }
+        var group = this.store.getAt(groupindex);
+        if (direct > 0) {
+            var newindex = info[1] < group.getGroupItems().getCount() ? info[1] : group.getGroupItems().getCount() - 1;
+            newindex += info[2] - info[1];
+        } else {
+            newindex = info[1] < group.getGroupItems().getCount() ? info[1] - group.getGroupItems().getCount() : -1;
+            newindex -= info[1];
+        }
+        return newindex;
+    },
+    refresh: function () {
+        this.callParent(arguments);
+    },
+    selectGroupItem: function (group, item) {
+        var record = this.store.findRecord("group", group);
+        if (record) {
+            record = record.getGroupItems().findRecord("groupitem", item);
+            if (!this.rendered) {
+                this.delayedSelection = record;
+            } else {
+                if (record) {
+                    this.getSelectionModel().doSingleSelect(record);
+                }
+            }
+        }
+        return record;
+    },
+    getSelected: function () {
+        return this.delayedSelection || this.getSelectionModel().getSelection()[0];
+    }
+});

OfficeWeb/apps/common/main/lib/component/HSBColorPicker.js

@@ -0,0 +1,216 @@
+/*
+ * (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("Common.component.HSBColorPicker", {
+    extend: "Ext.Component",
+    alias: "widget.hsbcolorpicker",
+    requires: ["Common.component.util.RGBColor", "Ext.XTemplate"],
+    baseCls: "cmp-hsb-colorpicker",
+    allowEmptyColor: false,
+    changeSaturation: true,
+    showCurrentColor: true,
+    config: {
+        color: "#ff0000"
+    },
+    renderTpl: ['<div class="{baseCls}-root">', '<tpl if="showCurrentColor">', '<div class="{baseCls}-top-panel">', '<span class="{baseCls}-color-value">', '<span class="transparent-color"></span>', "</span>", '<div class="{baseCls}-color-text"></div>', "</div>", "</tpl>", "<div>", '<div class="{baseCls}-cnt-hb">', '<div class="{baseCls}-cnt-hb-arrow"></div>', "</div>", '<tpl if="changeSaturation">', '<div class="{baseCls}-cnt-root">', '<div class="{baseCls}-cnt-sat">', '<div class="{baseCls}-cnt-sat-arrow"></div>', "</div>", "</div>", "</tpl>", "</div>", '<tpl if="allowEmptyColor">', '<div class="{baseCls}-empty-color">{textNoColor}</div>', "</tpl>", "</div>"],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this,
+        arrowSatBrightness, arrowHue, areaSatBrightness, areaHue, previewColor, previewTransparentColor, previewColorText, btnNoColor, hueVal = 0,
+        saturationVal = 100,
+        brightnessVal = 100;
+        var onUpdateColor = function (hsb, transparent) {
+            var rgbColor = new Common.util.RGBColor(Ext.String.format("hsb({0}, {1}, {2})", hsb.h, hsb.s, hsb.b)),
+            hexColor = rgbColor.toHex();
+            me.color = transparent ? "transparent" : hexColor;
+            refreshUI();
+            me.fireEvent("changecolor", me, me.color);
+        };
+        var refreshUI = function () {
+            if (previewColor && previewTransparentColor) {
+                if (me.color == "transparent") {
+                    previewTransparentColor.show();
+                } else {
+                    previewColor.setStyle("background-color", me.color);
+                    previewTransparentColor.hide();
+                }
+            }
+            if (areaSatBrightness) {
+                areaSatBrightness.setStyle("background-color", new Common.util.RGBColor(Ext.String.format("hsb({0}, 100, 100)", hueVal)).toHex());
+            }
+            if (previewColorText) {
+                previewColorText.dom.innerHTML = (me.color == "transparent") ? me.textNoColor : me.color.toUpperCase();
+            }
+            if (arrowSatBrightness && arrowHue) {
+                arrowSatBrightness.setLeft(saturationVal + "%");
+                arrowSatBrightness.setTop(100 - brightnessVal + "%");
+                arrowHue.setTop(parseInt(hueVal * 100 / 360) + "%");
+            }
+        };
+        var onSBAreaMouseMove = function (event, element, eOpts) {
+            if (arrowSatBrightness && areaSatBrightness) {
+                var pos = [Math.max(0, Math.min(100, (parseInt((event.getX() - areaSatBrightness.getX()) / areaSatBrightness.getWidth() * 100)))), Math.max(0, Math.min(100, (parseInt((event.getY() - areaSatBrightness.getY()) / areaSatBrightness.getHeight() * 100))))];
+                arrowSatBrightness.setLeft(pos[0] + "%");
+                arrowSatBrightness.setTop(pos[1] + "%");
+                saturationVal = pos[0];
+                brightnessVal = 100 - pos[1];
+                onUpdateColor({
+                    h: hueVal,
+                    s: saturationVal,
+                    b: brightnessVal
+                });
+            }
+        };
+        var onHueAreaMouseMove = function (event, element, eOpts) {
+            if (arrowHue && areaHue) {
+                var pos = Math.max(0, Math.min(100, (parseInt((event.getY() - areaHue.getY()) / areaHue.getHeight() * 100))));
+                arrowHue.setTop(pos + "%");
+                hueVal = parseInt(360 * pos / 100);
+                onUpdateColor({
+                    h: hueVal,
+                    s: saturationVal,
+                    b: brightnessVal
+                });
+            }
+        };
+        var onSBAreaMouseDown = function (event, element, eOpts) {
+            Ext.getDoc().on("mouseup", onSBAreaMouseUp);
+            Ext.getDoc().on("mousemove", onSBAreaMouseMove);
+        };
+        var onSBAreaMouseUp = function (event, element, eOpts) {
+            Ext.getDoc().un("mouseup", onSBAreaMouseUp);
+            Ext.getDoc().un("mousemove", onSBAreaMouseMove);
+            onSBAreaMouseMove(event, element, eOpts);
+        };
+        var onHueAreaMouseDown = function (event, element, eOpts) {
+            Ext.getDoc().on("mouseup", onHueAreaMouseUp);
+            Ext.getDoc().on("mousemove", onHueAreaMouseMove);
+            onHueAreaMouseMove(event, element, eOpts);
+        };
+        var onHueAreaMouseUp = function (event, element, eOpts) {
+            Ext.getDoc().un("mouseup", onHueAreaMouseUp);
+            Ext.getDoc().un("mousemove", onHueAreaMouseMove);
+        };
+        var onNoColorClick = function (cnt) {
+            var hsbColor = new Common.util.RGBColor(me.color).toHSB();
+            onUpdateColor(hsbColor, true);
+        };
+        var onAfterRender = function (ct) {
+            var rootEl = me.getEl(),
+            hsbColor;
+            if (rootEl) {
+                arrowSatBrightness = rootEl.down("." + me.baseCls + "-cnt-hb-arrow");
+                arrowHue = rootEl.down("." + me.baseCls + "-cnt-sat-arrow");
+                areaSatBrightness = rootEl.down("." + me.baseCls + "-cnt-hb");
+                areaHue = rootEl.down("." + me.baseCls + "-cnt-sat");
+                previewColor = rootEl.down("." + me.baseCls + "-color-value");
+                previewColorText = rootEl.down("." + me.baseCls + "-color-text");
+                btnNoColor = rootEl.down("." + me.baseCls + "-empty-color");
+                if (previewColor) {
+                    previewTransparentColor = previewColor.child(".transparent-color");
+                }
+                if (areaSatBrightness) {
+                    areaSatBrightness.un("mousedown");
+                    areaSatBrightness.on("mousedown", onSBAreaMouseDown, me);
+                }
+                if (areaHue) {
+                    areaHue.un("mousedown");
+                    areaHue.on("mousedown", onHueAreaMouseDown, me);
+                }
+                if (btnNoColor) {
+                    btnNoColor.un("click");
+                    btnNoColor.on("click", onNoColorClick, me);
+                }
+                if (me.color == "transparent") {
+                    hsbColor = {
+                        h: 0,
+                        s: 100,
+                        b: 100
+                    };
+                } else {
+                    hsbColor = new Common.util.RGBColor(me.color).toHSB();
+                }
+                hueVal = hsbColor.h;
+                saturationVal = hsbColor.s;
+                brightnessVal = hsbColor.b;
+                if (hueVal == saturationVal && hueVal == brightnessVal && hueVal == 0) {
+                    saturationVal = 100;
+                }
+                refreshUI();
+            }
+        };
+        me.setColor = function (value) {
+            if (me.color == value) {
+                return;
+            }
+            var hsbColor;
+            if (value == "transparent") {
+                hsbColor = {
+                    h: 0,
+                    s: 100,
+                    b: 100
+                };
+            } else {
+                hsbColor = new Common.util.RGBColor(value).toHSB();
+            }
+            hueVal = hsbColor.h;
+            saturationVal = hsbColor.s;
+            brightnessVal = hsbColor.b;
+            if (hueVal == saturationVal && hueVal == brightnessVal && hueVal == 0) {
+                saturationVal = 100;
+            }
+            me.color = value;
+            refreshUI();
+        };
+        me.on("afterrender", onAfterRender, this);
+        me.callParent(arguments);
+        this.addEvents("changecolor");
+    },
+    onRender: function (ct, position) {
+        var me = this;
+        Ext.applyIf(me.renderData, me.getTemplateArgs());
+        me.callParent(arguments);
+    },
+    getTemplateArgs: function () {
+        var me = this;
+        return {
+            allowEmptyColor: me.allowEmptyColor,
+            changeSaturation: me.changeSaturation,
+            textNoColor: me.textNoColor,
+            showCurrentColor: me.showCurrentColor
+        };
+    },
+    textNoColor: "No Color"
+});

OfficeWeb/apps/common/main/lib/component/IndeterminateCheckBox.js

@@ -0,0 +1,95 @@
+/*
+ * (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("Common.component.IndeterminateCheckBox", {
+    extend: "Ext.form.field.Checkbox",
+    alias: "widget.cmdindeterminatecheckbox",
+    value: "unchecked",
+    indeterminate: false,
+    indeterminateCls: Ext.baseCSSPrefix + "form-cb-indeterminate",
+    onBoxClick: function (e) {
+        var me = this;
+        if (!me.disabled && !me.readOnly) {
+            if (this.indeterminate) {
+                this.indeterminate = false;
+                this.setValue(false);
+            } else {
+                this.setValue(!this.checked);
+            }
+        }
+    },
+    getRawValue: function () {
+        return this.value;
+    },
+    getValue: function () {
+        return this.value;
+    },
+    setRawValue: function (value) {
+        var me = this,
+        inputEl = me.inputEl,
+        inputValue = me.inputValue,
+        checked = (value === true || value === "true" || value === "1" || value === 1 || (((Ext.isString(value) || Ext.isNumber(value)) && inputValue) ? value == inputValue : me.onRe.test(value))),
+        indeterminate = (value === "indeterminate");
+        if (inputEl) {
+            inputEl.dom.setAttribute("aria-checked", checked);
+            inputEl.dom.setAttribute("aria-indeterminate", indeterminate);
+            me[indeterminate ? "addCls" : "removeCls"](me.indeterminateCls);
+            me[checked ? "addCls" : "removeCls"](me.checkedCls);
+        }
+        me.checked = me.rawValue = checked;
+        me.indeterminate = indeterminate;
+        me.value = indeterminate ? "indeterminate" : (checked ? "checked" : "unchecked");
+        return checked;
+    },
+    setValue: function (checked) {
+        var me = this;
+        var setFn = function (value, suspendEvent) {
+            if (Ext.isArray(value)) {
+                me.getManager().getByName(me.name).each(function (cb) {
+                    cb.setValue(Ext.Array.contains(value, cb.inputValue));
+                });
+            } else {
+                me.setRawValue(value);
+                if (! (Ext.isDefined(suspendEvent) && suspendEvent)) {
+                    me.checkChange();
+                }
+            }
+            return me;
+        };
+        if (this.rendered) {
+            setFn.call(this, checked);
+        } else {
+            this.on("afterrender", Ext.bind(setFn, this, [checked, true]), {
+                single: true
+            });
+        }
+    }
+});

OfficeWeb/apps/common/main/lib/component/LoadMask.js

@@ -0,0 +1,143 @@
+/*
+ * (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("Common.component.LoadMask", {
+    extend: "Ext.Component",
+    alias: "widget.cmdloadmask",
+    mixins: {
+        floating: "Ext.util.Floating"
+    },
+    useMsg: true,
+    disabled: false,
+    baseCls: "cmd-loadmask",
+    config: {
+        title: ""
+    },
+    renderTpl: ['<div style="position:relative" class="{baseCls}-body">', "<div>", '<div class="{baseCls}-image"></div>', '<div class="{baseCls}-title"></div>', "</div>", '<div class="{baseCls}-pwd-ct">', '<div class="{baseCls}-pwd-by">POWERED BY</div>', '<div class="{baseCls}-pwd-tm">ONLYOFFICE</div>', "</div>", "</div>"],
+    modal: true,
+    width: "auto",
+    floating: {
+        shadow: false
+    },
+    focusOnToFront: false,
+    constructor: function (el, config) {
+        var me = this;
+        if (el.isComponent) {
+            me.ownerCt = el;
+            me.bindComponent(el);
+        } else {
+            me.ownerCt = new Ext.Component({
+                el: Ext.get(el),
+                rendered: true,
+                componentLayoutCounter: 1
+            });
+            me.container = el;
+        }
+        me.callParent([config]);
+        me.renderSelectors = {
+            titleEl: "." + me.baseCls + "-title"
+        };
+    },
+    bindComponent: function (comp) {
+        this.mon(comp, {
+            resize: this.onComponentResize,
+            scope: this
+        });
+    },
+    applyTitle: function (title) {
+        var me = this;
+        me.title = title;
+        if (me.rendered) {
+            me.titleEl.update(me.title);
+            var parent = me.floatParent ? me.floatParent.getTargetEl() : me.container;
+            var xy = me.getEl().getAlignToXY(parent, "c-c");
+            var pos = parent.translatePoints(xy[0], xy[1]);
+            if (Ext.isDefined(pos.left) || Ext.isDefined(pos.top)) {
+                me.setPosition(pos.left, pos.top);
+            }
+        }
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+        this.container = this.floatParent.getContentTarget();
+    },
+    onComponentResize: function () {
+        var me = this;
+        if (me.rendered && me.isVisible()) {
+            me.toFront();
+            me.center();
+        }
+    },
+    onDisable: function () {
+        this.callParent(arguments);
+        if (this.loading) {
+            this.onLoad();
+        }
+    },
+    onBeforeLoad: function () {
+        var me = this,
+        owner = me.ownerCt || me.floatParent,
+        origin;
+        if (!this.disabled) {
+            if (owner.componentLayoutCounter) {
+                Ext.Component.prototype.show.call(me);
+            } else {
+                origin = owner.afterComponentLayout;
+                owner.afterComponentLayout = function () {
+                    owner.afterComponentLayout = origin;
+                    origin.apply(owner, arguments);
+                    if (me.loading) {
+                        Ext.Component.prototype.show.call(me);
+                    }
+                };
+            }
+        }
+    },
+    onHide: function () {
+        var me = this;
+        me.callParent(arguments);
+        me.showOnParentShow = true;
+    },
+    onShow: function () {
+        var me = this;
+        me.callParent(arguments);
+        me.loading = true;
+        me.setTitle(me.title);
+    },
+    afterShow: function () {
+        this.callParent(arguments);
+        this.center();
+    },
+    onLoad: function () {
+        this.loading = false;
+        Ext.Component.prototype.hide.call(this);
+    }
+});

OfficeWeb/apps/common/main/lib/component/MenuDataViewPicker.js

@@ -0,0 +1,82 @@
+/*
+ * (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("Common.component.MenuDataViewPicker", {
+    extend: "Ext.menu.Menu",
+    alias: "widget.cmdmenudataviewpicker",
+    requires: ["Common.component.DataViewPicker"],
+    hideOnClick: true,
+    hideMode: "display",
+    constructor: function (config) {
+        if (!config || !config.viewData) {
+            throw Error("Common.component.MenuDataViewPicker creation failed: required parameters are missing.");
+        }
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this,
+        cfg = Ext.apply({},
+        me.initialConfig);
+        delete cfg.listeners;
+        Ext.apply(me, {
+            plain: true,
+            showSeparator: false,
+            items: Ext.applyIf({
+                xtype: "cmddataviewpicker",
+                padding: (Ext.isDefined(cfg.pickerpadding)) ? cfg.pickerpadding : "2px 4px 1px 2px",
+                store: cfg.store
+            },
+            cfg)
+        });
+        me.callParent(arguments);
+        me.picker = me.down("cmddataviewpicker");
+        me.relayEvents(me.picker, ["select", "itemmouseenter", "itemmouseleave"]);
+        if (me.hideOnClick) {
+            me.on("select", me.hidePickerOnSelect, me);
+        }
+        me.on("resize", function (cnt, adjWidth, adjHeight, eOpts) {
+            if (me.applyContentWidth && adjWidth >= 20) {
+                me.picker.contentWidth = adjWidth - 20;
+            }
+            me.picker.setSize(adjWidth, adjHeight);
+        },
+        this);
+        me.on("show", function (cnt) {
+            me.picker.showUpdated();
+        },
+        this);
+    },
+    hidePickerOnSelect: function (picker, columns, rows) {
+        Ext.menu.Manager.hideAll();
+    }
+});

OfficeWeb/apps/common/main/lib/component/MetricSpinner.js

@@ -0,0 +1,254 @@
+/*
+ * (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("Common.component.MetricSpinner", {
+    extend: "Ext.form.field.Spinner",
+    alias: "widget.commonmetricspinner",
+    defaultUnit: "px",
+    minValue: 0,
+    maxValue: 100,
+    step: 1,
+    textAlign: "right",
+    allowAuto: false,
+    autoText: "Auto",
+    mouseWheelEnabled: false,
+    constructor: function (config) {
+        var add = function (a, b, precision) {
+            var x = Math.pow(10, precision || 2);
+            return (Math.round(a * x) + Math.round(b * x)) / x;
+        };
+        var oldValue = this.minValue;
+        this.setValue = function (value, suspendchange) {
+            if (!Ext.isDefined(value) || value === "") {
+                this.value = "";
+            } else {
+                if (this.allowAuto && (Math.abs(parseFloat(value) + 1) < 0.0001 || value == this.autoText)) {
+                    this.value = this.autoText;
+                } else {
+                    var number = add(parseFloat(value), 0, 3);
+                    if (!Ext.isDefined(number) || isNaN(number)) {
+                        number = oldValue;
+                    }
+                    var units = this.defaultUnit;
+                    if (Ext.isDefined(value.match)) {
+                        var searchUnits = value.match(/(px|em|%|en|ex|pt|in|cm|mm|pc|s|ms)$/i);
+                        if (null !== searchUnits && Ext.isDefined(searchUnits[0])) {
+                            units = searchUnits[0].toLowerCase();
+                        }
+                    }
+                    if (this.defaultUnit !== units) {
+                        number = this._recalcUnits(number, units);
+                    }
+                    if (number > this.maxValue) {
+                        number = this.maxValue;
+                    }
+                    if (number < this.minValue) {
+                        number = this.minValue;
+                    }
+                    this.value = (number + " " + this.defaultUnit).trim();
+                    oldValue = number;
+                }
+            }
+            if (suspendchange !== true) {
+                this.checkChange();
+            }
+            var setFn = function (value) {
+                this.setRawValue(value);
+            };
+            if (this.rendered) {
+                setFn.call(this, this.value);
+            } else {
+                this.on("afterrender", Ext.bind(setFn, this, [this.value]), {
+                    single: true
+                });
+            }
+        };
+        this.onSpinUp = function () {
+            var me = this;
+            if (!me.readOnly) {
+                var val = me.step;
+                if (me.getValue() !== "") {
+                    if (me.allowAuto && me.getValue() == me.autoText) {
+                        val = me.minValue - me.step;
+                    } else {
+                        val = parseFloat(me.getValue());
+                    }
+                    if (isNaN(val)) {
+                        val = oldValue;
+                    }
+                } else {
+                    val = me.minValue - me.step;
+                }
+                me.setValue((add(val, me.step, 3) + " " + this.defaultUnit).trim(), true);
+            }
+        };
+        this.onSpinDown = function () {
+            var me = this;
+            if (!me.readOnly) {
+                var val = me.step;
+                if (me.getValue() !== "") {
+                    if (me.allowAuto && me.getValue() == me.autoText) {
+                        val = me.minValue;
+                    } else {
+                        val = parseFloat(me.getValue());
+                    }
+                    if (isNaN(val)) {
+                        val = oldValue;
+                    }
+                    if (me.allowAuto && add(val, -me.step, 3) < me.minValue) {
+                        me.setValue(me.autoText, true);
+                        return;
+                    }
+                } else {
+                    val = me.minValue;
+                }
+                me.setValue((add(val, -me.step, 3) + " " + this.defaultUnit).trim(), true);
+            }
+        };
+        this.callParent(arguments);
+    },
+    initComponent: function () {
+        if (!Ext.isDefined(this.value)) {
+            this.value = (this.minValue + " " + this.defaultUnit).trim();
+        }
+        this.on("specialkey", function (f, e) {
+            if (e.getKey() == e.ENTER) {
+                this.onEnterValue();
+                e.stopEvent();
+            }
+        },
+        this);
+        this.callParent(arguments);
+    },
+    setDefaultUnit: function (unit) {
+        if (this.defaultUnit != unit) {
+            var oldUnit = this.defaultUnit;
+            this.defaultUnit = unit;
+            this.setMinValue(this._recalcUnits(this.minValue, oldUnit));
+            this.setMaxValue(this._recalcUnits(this.maxValue, oldUnit));
+            this.setValue(this._recalcUnits(this.getNumberValue(), oldUnit), true);
+        }
+    },
+    setMinValue: function (unit) {
+        this.minValue = unit;
+    },
+    setMaxValue: function (unit) {
+        this.maxValue = unit;
+    },
+    setStep: function (step) {
+        this.step = step;
+    },
+    getNumberValue: function () {
+        if (this.allowAuto && this.value == this.autoText) {
+            return -1;
+        } else {
+            return parseFloat(this.value);
+        }
+    },
+    getUnitValue: function () {
+        return this.defaultUnit;
+    },
+    getValue: function () {
+        return this.value;
+    },
+    onEnterValue: function () {
+        if (Ext.isDefined(this.inputEl)) {
+            var val = this.inputEl.getValue();
+            this.setValue((val === "") ? this.value : val);
+        }
+    },
+    afterRender: function () {
+        var me = this;
+        this.callParent(arguments);
+        if (this.inputEl) {
+            Ext.DomHelper.applyStyles(this.inputEl, Ext.String.format("text-align:{0}", this.textAlign));
+        }
+        if (this.triggerRepeater) {
+            this.triggerRepeater.on("mouseup", function () {
+                me.checkChange();
+            },
+            this);
+        }
+    },
+    onBlur: function (field, eOpt) {
+        if (Ext.isDefined(this.inputEl)) {
+            var val = this.inputEl.getValue();
+            this.setValue((val === "") ? this.value : val);
+        }
+    },
+    _recalcUnits: function (value, fromUnit) {
+        if (fromUnit.match(/(s|ms)$/i) && this.defaultUnit.match(/(s|ms)$/i)) {
+            var v_out = value;
+            if (fromUnit == "ms") {
+                v_out = v_out / 1000;
+            }
+            if (this.defaultUnit == "ms") {
+                v_out = v_out * 1000;
+            }
+            return v_out;
+        }
+        if (fromUnit.match(/(pt|in|cm|mm|pc)$/i) === null || this.defaultUnit.match(/(pt|in|cm|mm|pc)$/i) === null) {
+            return value;
+        }
+        var v_out = value;
+        if (fromUnit == "cm") {
+            v_out = v_out * 10;
+        } else {
+            if (fromUnit == "pt") {
+                v_out = v_out * 25.4 / 72;
+            } else {
+                if (fromUnit == "in") {
+                    v_out = v_out * 25.4;
+                } else {
+                    if (fromUnit == "pc") {
+                        v_out = v_out * 25.4 / 6;
+                    }
+                }
+            }
+        }
+        if (this.defaultUnit == "cm") {
+            v_out = v_out / 10;
+        } else {
+            if (this.defaultUnit == "pt") {
+                v_out = parseFloat(Ext.Number.toFixed(v_out * 72 / 25.4, 3));
+            } else {
+                if (this.defaultUnit == "in") {
+                    v_out = v_out / 25.4;
+                } else {
+                    if (this.defaultUnit == "pc") {
+                        v_out = v_out * 6 / 25.4;
+                    }
+                }
+            }
+        }
+        return v_out;
+    }
+});

OfficeWeb/apps/common/main/lib/component/MultiSliderGradient.js

@@ -0,0 +1,182 @@
+/*
+ * (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("Common.component.MultiSliderGradient", {
+    extend: "Ext.slider.Multi",
+    requires: ([]),
+    uses: [],
+    alias: "widget.cmdmultislidergradient",
+    cls: "asc-multi-slider-gradient",
+    values: [0, 100],
+    increment: 1,
+    minValue: 0,
+    maxValue: 100,
+    clickRange: [1, 20],
+    colorValues: ["#000000", "#ffffff"],
+    currentThumb: 0,
+    initComponent: function () {
+        var me = this,
+        cfg = Ext.apply({},
+        me.initialConfig);
+        if (me.initialConfig.listeners && me.initialConfig.listeners.change) {
+            var f = me.initialConfig.listeners.change;
+            me.initialConfig.listeners.change = function (slider, newvalue, thumb) {
+                me.changeGradientStyle();
+                f.call(me, slider, newvalue, thumb);
+            };
+        }
+        this.styleStr = "";
+        if (Ext.isChrome && Ext.chromeVersion < 10 || Ext.isSafari && Ext.safariVersion < 5.1) {
+            this.styleStr = "-webkit-gradient(linear, left top, right top, color-stop({1}%,{0}), color-stop({3}%,{2})); /* Chrome,Safari4+ */";
+        } else {
+            if (Ext.isChrome || Ext.isSafari) {
+                this.styleStr = "-webkit-linear-gradient(left, {0} {1}%, {2} {3}%)";
+            } else {
+                if (Ext.isGecko) {
+                    this.styleStr = "-moz-linear-gradient(left, {0} {1}%, {2} {3}%)";
+                } else {
+                    if (Ext.isOpera && Ext.operaVersion > 11) {
+                        this.styleStr = "-o-linear-gradient(left, {0} {1}%, {2} {3}%)";
+                    } else {
+                        if (Ext.isIE) {
+                            this.styleStr = "-ms-linear-gradient(left, {0} {1}%, {2} {3}%)";
+                        }
+                    }
+                }
+            }
+        }
+        this.callParent(arguments);
+        this.addEvents("thumbclick");
+        this.addEvents("thumbdblclick");
+    },
+    listeners: {
+        afterrender: function (cmp) {
+            var me = this,
+            style = "";
+            if (me.thumbs) {
+                for (var i = 0; i < me.thumbs.length; i++) {
+                    if (me.thumbs[i] && me.thumbs[i].tracker) {
+                        me.thumbs[i].tracker.addListener("mousedown", Ext.bind(me.setActiveThumb, me, [i, true]), me);
+                        me.thumbs[i].tracker.el.addListener("dblclick", function () {
+                            me.fireEvent("thumbdblclick", me);
+                        },
+                        me);
+                    }
+                }
+                me.setActiveThumb(0);
+                if (me.innerEl) {
+                    if (!Ext.isEmpty(me.styleStr)) {
+                        style = Ext.String.format(me.styleStr, me.colorValues[0], 0, me.colorValues[1], 100);
+                        me.innerEl.setStyle("background", style);
+                    }
+                    if (Ext.isIE) {
+                        style = Ext.String.format("progid:DXImageTransform.Microsoft.gradient( startColorstr={0}, endColorstr={1},GradientType=1 )", me.colorValues[0], me.colorValues[1]);
+                        me.innerEl.setStyle("filter", style);
+                    }
+                    style = Ext.String.format("linear-gradient(to right, {0} {1}%, {2} {3}%)", me.colorValues[0], 0, me.colorValues[1], 100);
+                    me.innerEl.setStyle("background", style);
+                }
+            }
+        }
+    },
+    setActiveThumb: function (index, fireevent) {
+        this.currentThumb = index;
+        this.thumbs[index].el.addCls("active-thumb");
+        for (var j = 0; j < this.thumbs.length; j++) {
+            if (index == j) {
+                continue;
+            }
+            this.thumbs[j].el.removeCls("active-thumb");
+        }
+        if (fireevent) {
+            this.fireEvent("thumbclick", this, index);
+        }
+    },
+    setColorValue: function (color, index) {
+        var ind = (index !== undefined) ? index : this.currentThumb;
+        this.colorValues[ind] = color;
+        this.changeGradientStyle();
+    },
+    getColorValue: function (index) {
+        var ind = (index !== undefined) ? index : this.currentThumb;
+        return this.colorValues[ind];
+    },
+    changeGradientStyle: function () {
+        if (this.innerEl) {
+            var style;
+            if (!Ext.isEmpty(this.styleStr)) {
+                style = Ext.String.format(this.styleStr, this.colorValues[0], this.getValue(0), this.colorValues[1], this.getValue(1));
+                this.innerEl.setStyle("background", style);
+            }
+            if (Ext.isIE) {
+                style = Ext.String.format("progid:DXImageTransform.Microsoft.gradient( startColorstr={0}, endColorstr={1},GradientType=1 )", this.colorValues[0], this.colorValues[1]);
+                this.innerEl.setStyle("filter", style);
+            }
+            style = Ext.String.format("linear-gradient(to right, {0} {1}%, {2} {3}%)", this.colorValues[0], this.getValue(0), this.colorValues[1], this.getValue(1));
+            this.innerEl.setStyle("background", style);
+        }
+    },
+    getNearest: function (local, prop) {
+        var me = this,
+        localValue = prop == "top" ? me.innerEl.getHeight() - local[prop] : local[prop],
+        clickValue = me.reverseValue(localValue),
+        nearestDistance = (me.maxValue - me.minValue) + 5,
+        index = 0,
+        nearest = null,
+        thumbs = me.thumbs,
+        i = 0,
+        len = thumbs.length,
+        thumb,
+        value,
+        dist;
+        for (; i < len; i++) {
+            thumb = me.thumbs[i];
+            value = thumb.value;
+            dist = Math.abs(value - clickValue);
+            if (Math.abs(dist <= nearestDistance)) {
+                if (me.constrainThumbs) {
+                    var above = me.thumbs[i + 1];
+                    var below = me.thumbs[i - 1];
+                    if (below !== undefined && clickValue < below.value) {
+                        continue;
+                    }
+                    if (above !== undefined && clickValue > above.value) {
+                        continue;
+                    }
+                }
+                nearest = thumb;
+                index = i;
+                nearestDistance = dist;
+            }
+        }
+        return nearest;
+    }
+});

OfficeWeb/apps/common/main/lib/component/SearchField.js

@@ -0,0 +1,137 @@
+/*
+ * (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("Common.component.SearchField", {
+    extend: "Ext.container.Container",
+    alias: "widget.commonsearchfield",
+    height: 22,
+    layout: {
+        type: "hbox",
+        align: "stretch"
+    },
+    cls: "common-searchfield",
+    require: ["Ext.data.Store", "Ext.button.Button", "Ext.container.Container"],
+    initComponent: function () {
+        var me = this;
+        me.searching = false;
+        me.txtSearchQuery = Ext.create("Ext.form.field.Text", {
+            flex: 1,
+            emptyText: this.emptyText,
+            tabIndex: this.tabIndex || -1,
+            listeners: {
+                specialkey: function (o, e) {
+                    if (e.getKey() == e.ENTER) {
+                        me.stopSearch();
+                        me.startSearch();
+                    } else {
+                        if (e.getKey() == e.TAB) {
+                            me.stopSearch();
+                            me.focus();
+                            me.blur();
+                        }
+                    }
+                },
+                change: function (o, e) {
+                    me.btnClear.setVisible(!me.isValueEmpty());
+                },
+                blur: function (o, e) {
+                    if (!me.isValueValid()) {
+                        me.clear();
+                    }
+                }
+            }
+        });
+        me.btnClear = Ext.create("Ext.button.Button", {
+            iconCls: "search-btn-clear-icon",
+            hidden: true,
+            listeners: {
+                click: function () {
+                    me.searching ? me.stopSearch() : me.clear();
+                }
+            }
+        });
+        me.items = [me.txtSearchQuery, me.btnClear];
+        me.relayEvents(me.txtSearchQuery, ["change"]);
+        me.addEvents("searchstart", "searchstop", "searchclear");
+        me.callParent(arguments);
+    },
+    startSearch: function (suppressEvent) {
+        var me = this;
+        if (!me.searching && me.isValueValid()) {
+            me.searching = true;
+            me.btnClear.setIconCls("search-btn-start-icon").toggle(true).disable();
+            if (!suppressEvent) {
+                me.fireEvent("searchstart", me, me.getText());
+            }
+        }
+    },
+    stopSearch: function (suppressEvent) {
+        var me = this;
+        if (me.searching) {
+            me.searching = false;
+            me.btnClear.setIconCls("search-btn-clear-icon").toggle(false).enable();
+            if (!suppressEvent) {
+                me.fireEvent("searchstop", me);
+            }
+        }
+    },
+    clear: function (suppressEvent) {
+        var me = this;
+        if (!me.searching) {
+            me.txtSearchQuery.reset();
+            if (!suppressEvent) {
+                me.fireEvent("searchclear", me);
+            }
+        }
+    },
+    isValueValid: function () {
+        var value = this.txtSearchQuery.getValue();
+        return !Ext.isEmpty(value);
+    },
+    isValueEmpty: function () {
+        return this.txtSearchQuery.getValue().length == 0;
+    },
+    setText: function (text) {
+        this.txtSearchQuery.setValue(text);
+    },
+    getText: function () {
+        return this.txtSearchQuery.getValue();
+    },
+    setValue: function (text) {
+        this.txtSearchQuery.setValue(text);
+    },
+    getValue: function () {
+        return this.txtSearchQuery.getValue();
+    },
+    focus: function (selectText, delay) {
+        this.txtSearchQuery.focus(selectText, delay);
+    }
+});

OfficeWeb/apps/common/main/lib/component/SplitColorButton.js

@@ -0,0 +1,106 @@
+/*
+ * (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("Common.component.SplitColorButton", {
+    extend: "Ext.button.Split",
+    alias: "widget.cmdsplitcolorbutton",
+    color: "FF0000",
+    colorHeight: 4,
+    verticalOffset: 0,
+    horizontalOffset: 0,
+    initComponent: function () {
+        this.addEvents("changecolor");
+        this.callParent(arguments);
+    },
+    afterRender: function () {
+        this.callParent(arguments);
+        this.on({
+            disable: function (cnt, eOpts) {
+                if (this.getEl()) {
+                    var colorRect = this.getEl().down(".x-btn-color");
+                    colorRect && colorRect.applyStyles({
+                        "background-color": "#9c9c9c"
+                    });
+                }
+            },
+            enable: function (cnt, eOpts) {
+                var colorRect = this.getEl().down(".x-btn-color");
+                if (colorRect) {
+                    colorRect.applyStyles({
+                        "background-color": this.color == "transparent" ? this.color : "#" + this.color
+                    });
+                }
+            }
+        },
+        this);
+        var btn = this.getEl().down("button");
+        if (btn) {
+            Ext.DomHelper.append(btn, {
+                tag: "span",
+                cls: "x-btn-color"
+            });
+            var colorRect = btn.child(".x-btn-color");
+            colorRect.applyStyles({
+                position: "absolute",
+                left: this.verticalOffset + "px",
+                top: btn.getHeight() - this.colorHeight - this.horizontalOffset + "px",
+                "background-color": "#" + this.color
+            });
+            if (this.isDisabled()) {
+                colorRect.applyStyles({
+                    "background-color": "#9c9c9c"
+                });
+            }
+            colorRect.setSize(btn.getWidth() - 2 * this.verticalOffset, this.colorHeight);
+        }
+    },
+    setColor: function (color, fire) {
+        this.color = color;
+        var colorRect = this.getEl().down(".x-btn-color");
+        if (colorRect) {
+            if (this.isDisabled()) {
+                colorRect.applyStyles({
+                    "background-color": "#9c9c9c"
+                });
+            } else {
+                colorRect.applyStyles({
+                    "background-color": this.color == "transparent" ? this.color : "#" + this.color
+                });
+            }
+        }
+        if (fire !== false) {
+            this.fireEvent("changecolor", this, color);
+        }
+    },
+    getColor: function () {
+        return this.color || null;
+    }
+});

OfficeWeb/apps/common/main/lib/component/SynchronizeTip.js

@@ -0,0 +1,102 @@
+/*
+ * (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("Common.component.SynchronizeTip", {
+    extend: "Ext.container.Container",
+    alias: "widget.commonsynchronizetip",
+    cls: "asc-synchronizetip",
+    requires: ["Ext.button.Button", "Ext.form.Label"],
+    layout: {
+        type: "vbox",
+        align: "stretch"
+    },
+    width: 240,
+    height: 95,
+    hideMode: "visibility",
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        var me = this;
+        me.addEvents("dontshowclick");
+        me.addEvents("closeclick");
+        var btnClose = Ext.widget("button", {
+            cls: "btn-close-tip",
+            iconCls: "icon-close-tip",
+            listeners: {
+                click: function () {
+                    me.fireEvent("closeclick", me);
+                }
+            }
+        });
+        me.items = [{
+            xtype: "container",
+            html: '<div class="tip-arrow"></div>'
+        },
+        {
+            xtype: "container",
+            flex: 1,
+            style: "padding-left: 15px;",
+            layout: {
+                type: "hbox",
+                align: "stretch"
+            },
+            items: [{
+                xtype: "container",
+                flex: 1,
+                style: "margin-top: 15px;line-height: 1.2;",
+                html: "<div>" + me.textSynchronize + "</div>"
+            },
+            btnClose]
+        },
+        {
+            xtype: "container",
+            cls: "show-link",
+            items: [{
+                xtype: "label",
+                text: me.textDontShow,
+                listeners: {
+                    afterrender: function (cmp) {
+                        cmp.getEl().on("click", function (event, node) {
+                            me.fireEvent("dontshowclick", me);
+                        });
+                    },
+                    scope: this
+                }
+            }]
+        }];
+        me.callParent(arguments);
+    },
+    textDontShow: "Don't show this message again",
+    textSynchronize: "The document has changed. <br/>Refresh the document to see the updates."
+});

OfficeWeb/apps/common/main/lib/component/ThemeColorPalette.js

@@ -0,0 +1,366 @@
+/*
+ * (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("Common.component.ThemeColorPalette", {
+    extend: "Ext.ColorPalette",
+    alias: "widget.cmpthemecolorpalette",
+    allowReselect: true,
+    dyncolorscount: 12,
+    width: 193,
+    maxWidth: 200,
+    baseCls: "cmp-theme-colorpalette",
+    requires: ["Common.view.ExtendedColorDialog"],
+    renderTpl: ['<div style="padding: 12px;">', '<tpl for="colors">', '<tpl if="this.isBlankSeparator(values)"><div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div></tpl>', '<tpl if="this.isSeparator(values)"></div><div class="palette-color-separator" style="width:100%;height:1px;float:left;border-bottom: 1px solid #E0E0E0"></div><div style="padding: 12px;"></tpl>', '<tpl if="this.isColor(values)">', '<a href="#" class="palette-color color-{.}" style="background:#{.} "hidefocus="on">', '<em><span style="background:#{.}; border: 1px solid rgba(0, 0, 0, 0.2);" unselectable="on">&#160;</span></em>', "</a>", "</tpl>", '<tpl if="this.isTransparent(values)">', '<a href="#" class="color-{.}" hidefocus="on">', '<em><span unselectable="on">&#160;</span></em>', "</a>", "</tpl>", '<tpl if="this.isCustom(values)">', '<a href="#" id="{id}" class="palette-color-custom {cls}" hidefocus="on">', '<em><span style="background:#FFFFFF;background-image:url({image});" unselectable="on">&#160;</span></em>', "</a>", "</tpl>", '<tpl if="this.isEffect(values)">', '<a href="#" effectid="{effectId}" effectvalue="{effectValue}" class="palette-color-effect color-{color}" style="background:#{color}" hidefocus="on">', '<em><span style="background:#{color}; border: 1px solid rgba(0, 0, 0, 0.2);" unselectable="on">&#160;</span></em>', "</a>", "</tpl>", '<tpl if="this.isCaption(values)"><div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;">{.}</div></tpl>', "</tpl>", "</div>", {
+        isBlankSeparator: function (v) {
+            return typeof(v) == "string" && v == "-";
+        },
+        isSeparator: function (v) {
+            return typeof(v) == "string" && v == "--";
+        },
+        isColor: function (v) {
+            return typeof(v) == "string" && (/[0-9A-F]{6}/).test(v);
+        },
+        isTransparent: function (v) {
+            return typeof(v) == "string" && (v == "transparent");
+        },
+        isCaption: function (v) {
+            return (typeof(v) == "string" && v != "-" && v != "--" && !(/[0-9A-F]{6}|transparent/).test(v));
+        },
+        isEffect: function (v) {
+            return (typeof(v) == "object" && v.effectId !== undefined);
+        },
+        isCustom: function (v) {
+            return (typeof(v) == "object" && v.effectId === undefined);
+        }
+    }],
+    constructor: function (config) {
+        this.initConfig(config);
+        this.callParent(arguments);
+        return this;
+    },
+    initComponent: function () {
+        this.callParent(arguments);
+    },
+    onRender: function (o) {
+        this.callParent(arguments);
+        if (this.dynamiccolors) {
+            var picker = o.down(".x-color-picker");
+            if (picker) {
+                var i = -1,
+                colors = '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div><div style="padding: 12px;">';
+                while (++i < this.dyncolorscount) {
+                    colors += Ext.String.format('<a href="#" class="color-dynamic-{0} dynamic-empty-color" style="background:#ffffff" color="" hidefocus="on">' + '<em><span unselectable="on">&#160;</span></em></a>', i);
+                }
+                colors += "</div>";
+                Ext.DomHelper.insertHtml("beforeEnd", picker.dom, colors);
+            }
+        }
+        var menu = this.el.up(".x-menu");
+        if (menu) {
+            Ext.menu.Manager.menus[menu.id].addListener("beforeshow", this.updateCustomColors, this);
+        }
+        this.updateCustomColors();
+    },
+    afterRender: function (o) {
+        this.callParent(arguments);
+        if (this.updateColorsArr) {
+            this.updateColors(this.updateColorsArr[0], this.updateColorsArr[1]);
+        }
+        if (this.lastvalue) {
+            this.select(this.lastvalue, true);
+        }
+    },
+    setCustomColor: function (color) {
+        color = /#?([a-fA-F0-9]{6})/.exec(color);
+        if (color) {
+            var el = this.getEl();
+            if (el) {
+                this._saveCustomColor(color[1]);
+                $("#" + el.id + " a." + this.selectedCls).removeClass(this.selectedCls);
+                var child = el.down(".dynamic-empty-color");
+                if (!child) {
+                    this.updateCustomColors();
+                    child = el.down(".color-dynamic-" + (this.dyncolorscount - 1));
+                }
+                child.removeCls("dynamic-empty-color").addCls(this.selectedCls).dom.setAttribute("color", color[1]);
+                child.down("span").setStyle("background-color", "#" + color[1]).setStyle("border", "none");
+            }
+        }
+    },
+    select: function (color, suppressEvent) {
+        if (!this.rendered) {
+            this.lastvalue = color;
+            return;
+        }
+        var el = this.getEl();
+        if (el) {
+            $("#" + el.id + " a." + this.selectedCls).removeClass(this.selectedCls);
+        }
+        if (typeof(color) == "object") {
+            var effectEl;
+            if (color.effectId !== undefined) {
+                effectEl = el.down('a[effectid="' + color.effectId + '"]');
+                if (effectEl) {
+                    effectEl.addCls(this.selectedCls);
+                    this.value = effectEl.dom.className.match(this.colorRe)[1].toUpperCase();
+                } else {
+                    this.value = false;
+                }
+            } else {
+                if (color.effectValue !== undefined) {
+                    effectEl = el.down('a[effectvalue="' + color.effectValue + '"].color-' + color.color.toUpperCase());
+                    if (effectEl) {
+                        effectEl.addCls(this.selectedCls);
+                        this.value = effectEl.dom.className.match(this.colorRe)[1].toUpperCase();
+                    } else {
+                        this.value = false;
+                    }
+                }
+            }
+        } else {
+            if (/#?[a-fA-F0-9]{6}/.test(color)) {
+                color = /#?([a-fA-F0-9]{6})/.exec(color)[1].toUpperCase();
+                this.value = color;
+            }
+            if (/^[a-fA-F0-9]{6}|transparent$/.test(color) && Ext.Array.contains(this.colors, color)) {
+                if (!Ext.Array.contains(this.colors, this.value)) {
+                    this.value = false;
+                }
+                if (color != this.value || this.allowReselect) {
+                    if (this.value) {
+                        (this.value == "transparent") ? el.down("a.color-transparent").removeCls(this.selectedCls) : el.down("a.palette-color.color-" + this.value).removeCls(this.selectedCls);
+                    } (color == "transparent") ? el.down("a.color-transparent").addCls(this.selectedCls) : el.down("a.palette-color.color-" + color).addCls(this.selectedCls);
+                    this.value = color;
+                    if (suppressEvent !== true) {
+                        this.fireEvent("select", this, color);
+                    }
+                }
+            } else {
+                if (el) {
+                    var co = el.down("#" + color) || el.down('a[color="' + color + '"]');
+                    if (co) {
+                        co.addCls(this.selectedCls);
+                        this.value = color.toUpperCase();
+                    } else {
+                        if (el.down("a." + this.selectedCls)) {
+                            this.value = false;
+                        } else {
+                            if (this.dynamiccolors) {}
+                        }
+                    }
+                } else {
+                    this.lastvalue = color;
+                }
+            }
+        }
+    },
+    handleClick: function (event, target) {
+        var me = this;
+        var color, cmp;
+        if (! (target.className.search("palette-color-custom") < 0)) {
+            event.stopEvent();
+            cmp = Ext.get(target.parentNode).down("a." + me.selectedCls);
+            if (!cmp || cmp.id != target.id) {
+                if (cmp) {
+                    cmp.removeCls(me.selectedCls);
+                }
+                Ext.get(target.id).addCls(me.selectedCls);
+                me.value = false;
+                me.fireEvent("select", me, target.id);
+            } else {
+                me.fireEvent("select", me, cmp.id);
+            }
+        } else {
+            if (! (target.className.search("color-transparent") < 0)) {
+                event.stopEvent();
+                cmp = Ext.get(target.parentNode).down("a." + me.selectedCls);
+                if (!cmp || cmp.id != target.id) {
+                    if (cmp) {
+                        cmp.removeCls(me.selectedCls);
+                    }
+                    Ext.get(target).addCls(me.selectedCls);
+                    me.value = "transparent";
+                }
+                me.fireEvent("select", me, "transparent");
+            } else {
+                if (! (target.className.search("color-dynamic") < 0)) {
+                    if (!/dynamic-empty-color/.test(target.className)) {
+                        color = target.getAttribute("color");
+                        if (color) {
+                            me.fireEvent("select", me, color);
+                        }
+                        this.value = color.toUpperCase();
+                        $("#" + this.getEl().id + " a." + me.selectedCls).removeClass(me.selectedCls);
+                        Ext.get(target).addCls(me.selectedCls);
+                    } else {
+                        setTimeout(function () {
+                            me.addNewColor();
+                            Ext.menu.Manager.hideAll();
+                        },
+                        10);
+                    }
+                } else {
+                    cmp = Ext.get(target.parentNode).down("a.palette-color-custom");
+                    if (cmp) {
+                        cmp.removeCls(me.selectedCls);
+                    }
+                    if (!/^[a-fA-F0-9]{6}$/.test(this.value) || !Ext.Array.contains(this.colors, this.value)) {
+                        this.value = false;
+                    }
+                    if (! (target.className.search("palette-color-effect") < 0)) {
+                        color = target.className.match(me.colorRe)[1];
+                        var effectId = target.getAttribute("effectid");
+                        if (color) {
+                            me.fireEvent("select", me, {
+                                color: color,
+                                effectId: effectId
+                            });
+                            this.value = color.toUpperCase();
+                        }
+                        $("#" + this.getEl().id + " a." + me.selectedCls).removeClass(me.selectedCls);
+                        Ext.get(target).addCls(me.selectedCls);
+                    } else {
+                        this.callParent(arguments);
+                    }
+                }
+            }
+        }
+    },
+    addNewColor: function () {
+        var me = this;
+        var win = Ext.create("Common.view.ExtendedColorDialog", {});
+        win.addListener("onmodalresult", function (mr) {
+            me._isdlgopen = false;
+            if (mr == 1) {
+                me.setCustomColor(win.getColor());
+                me.fireEvent("select", me, win.getColor());
+            }
+        },
+        false);
+        me._isdlgopen = true;
+        win.setColor(me.value);
+        win.show();
+    },
+    isDialogOpen: function () {
+        return this._isdlgopen == true;
+    },
+    updateColors: function (effectcolors, standartcolors) {
+        if (!this.rendered) {
+            this.updateColorsArr = [effectcolors, (standartcolors.length == 0 && this.updateColorsArr) ? this.updateColorsArr[1] : standartcolors];
+            return;
+        }
+        var me = this,
+        el = this.getEl();
+        if (me.aColorElements === undefined) {
+            me.aColorElements = el.query("a.palette-color");
+        }
+        if (me.aEffectElements === undefined) {
+            me.aEffectElements = el.query("a.palette-color-effect");
+        }
+        var aEl;
+        var aColorIdx = 0,
+        aEffectIdx = 0;
+        for (var i = 0; i < me.colors.length; i++) {
+            if (typeof(me.colors[i]) == "string" && (/[0-9A-F]{6}/).test(me.colors[i])) {
+                if (aColorIdx >= standartcolors.length) {
+                    continue;
+                }
+                aEl = Ext.get(me.aColorElements[aColorIdx]);
+                aEl.removeCls("color-" + me.colors[i]);
+                me.colors[i] = standartcolors[aColorIdx].toUpperCase();
+                aEl.addCls("color-" + me.colors[i]);
+                aEl.applyStyles({
+                    background: "#" + me.colors[i]
+                });
+                aEl.down("span").applyStyles({
+                    background: "#" + me.colors[i]
+                });
+                aColorIdx++;
+            } else {
+                if (typeof(me.colors[i]) == "object" && me.colors[i].effectId !== undefined) {
+                    if (aEffectIdx >= effectcolors.length) {
+                        continue;
+                    }
+                    aEl = Ext.get(me.aEffectElements[aEffectIdx]);
+                    effectcolors[aEffectIdx].color = effectcolors[aEffectIdx].color.toUpperCase();
+                    if (me.colors[i].color !== effectcolors[aEffectIdx].color) {
+                        aEl.removeCls("color-" + me.colors[i].color);
+                        aEl.addCls("color-" + effectcolors[aEffectIdx].color);
+                        aEl.applyStyles({
+                            background: "#" + effectcolors[aEffectIdx].color
+                        });
+                        aEl.down("span").applyStyles({
+                            background: "#" + effectcolors[aEffectIdx].color
+                        });
+                    }
+                    if (me.colors[i].effectId !== effectcolors[aEffectIdx].effectId) {
+                        aEl.set({
+                            effectid: effectcolors[aEffectIdx].effectId
+                        });
+                    }
+                    if (me.colors[i].effectValue !== effectcolors[aEffectIdx].effectValue) {
+                        aEl.set({
+                            effectvalue: effectcolors[aEffectIdx].effectValue
+                        });
+                    }
+                    me.colors[i] = effectcolors[aEffectIdx];
+                    aEffectIdx++;
+                }
+            }
+        }
+        this.updateColorsArr = undefined;
+    },
+    updateCustomColors: function () {
+        var picker = this.getEl();
+        if (picker) {
+            var colors = localStorage["asc." + window.storagename + ".colors.custom"];
+            colors = colors ? colors.split(",") : [];
+            var i = -1,
+            colorEl, c = colors.length < this.dyncolorscount ? colors.length : this.dyncolorscount;
+            while (++i < c) {
+                colorEl = picker.down(".color-dynamic-" + i);
+                colorEl.removeCls("dynamic-empty-color").dom.setAttribute("color", colors[i]);
+                colorEl.down("span").setStyle("background-color", "#" + colors[i]).setStyle("border", "none");
+            }
+        }
+    },
+    _saveCustomColor: function (color) {
+        var colors = localStorage["asc." + window.storagename + ".colors.custom"];
+        colors = colors ? colors.split(",") : [];
+        if (colors.push(color) > this.dyncolorscount) {
+            colors.shift();
+        }
+        localStorage["asc." + window.storagename + ".colors.custom"] = colors.join().toUpperCase();
+    },
+    _menuBeforeShow: function () {
+        this.updateCustomColors();
+    }
+});

OfficeWeb/apps/common/main/lib/component/util/LanguageName.js

@@ -0,0 +1,433 @@
+/*
+ * (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("Common.component.util.LanguageName", (function () {
+    var localLanguageName = {
+        54: ["af", "Afrikaans"],
+        1078: ["af-ZA", "Afrikaans (Suid Afrika)"],
+        28: ["sq", "Shqipe"],
+        1052: ["sq-AL", "Shqipe (Shqipëria)"],
+        132: ["gsw", "Elsässisch"],
+        1156: ["gsw-FR", "Elsässisch (Frànkrisch)"],
+        94: ["am", "አማርኛ"],
+        1118: ["am-ET", "አማርኛ (ኢትዮጵያ)"],
+        1: ["ar", "العربية"],
+        5121: ["ar-DZ", "العربية (الجزائر)"],
+        15361: ["ar-BH", "العربية (البحرين)"],
+        3073: ["ar-EG", "العربية (مصر)"],
+        2049: ["ar-IQ", "العربية (العراق)"],
+        11265: ["ar-JO", "العربية (الأردن)"],
+        13313: ["ar-KW", "العربية (الكويت)"],
+        12289: ["ar-LB", "العربية (لبنان)"],
+        4097: ["ar-LY", "العربية (ليبيا)"],
+        6145: ["ar-MA", "العربية (المملكة المغربية)"],
+        8193: ["ar-OM", "العربية (عمان)"],
+        16385: ["ar-QA", "العربية (قطر)"],
+        1025: ["ar-SA", "العربية (المملكة العربية السعودية)"],
+        10241: ["ar-SY", "العربية (سوريا)"],
+        7169: ["ar-TN", "العربية (تونس)"],
+        14337: ["ar-AE", "العربية (الإمارات العربية المتحدة)"],
+        9217: ["ar-YE", "العربية (اليمن)"],
+        43: ["hy", "Հայերեն"],
+        1067: ["hy-AM", "Հայերեն (Հայաստան)"],
+        77: ["as", "অসমীয়া"],
+        1101: ["as-IN", "অসমীয়া (ভাৰত)"],
+        44: ["az", "Azərbaycan­ılı"],
+        29740: ["az-Cyrl", "Азәрбајҹан дили"],
+        2092: ["az-Cyrl-AZ", "Азәрбајҹан (Азәрбајҹан)"],
+        30764: ["az-Latn", "Azərbaycan­ılı"],
+        1068: ["az-Latn-AZ", "Azərbaycan­ılı (Azərbaycan)"],
+        109: ["ba", "Башҡорт"],
+        1133: ["ba-RU", "Башҡорт (Россия)"],
+        45: ["eu", "Euskara"],
+        1069: ["eu-ES", "Euskara (Euskara)"],
+        35: ["be", "Беларускі"],
+        1059: ["be-BY", "Беларускі (Беларусь)"],
+        69: ["bn", "বাংলা"],
+        2117: ["bn-BD", "বাংলা (বাংলাদেশ)"],
+        1093: ["bn-IN", "বাংলা (ভারত)"],
+        30746: ["bs", "bosanski"],
+        25626: ["bs-Cyrl", "Босански (Ћирилица)"],
+        8218: ["bs-Cyrl-BA", "Босански (Босна и Херцеговина)"],
+        26650: ["bs-Latn", "Bosanski (Latinica)"],
+        5146: ["bs-Latn-BA", "Bosanski (Bosna i Hercegovina)"],
+        126: ["br", "Brezhoneg"],
+        1150: ["br-FR", "Brezhoneg (Frañs)"],
+        2: ["bg", "Български"],
+        1026: ["bg-BG", "Български (България)"],
+        3: ["ca", "Català"],
+        1027: ["ca-ES", "Català (Català)"],
+        30724: ["zh", "中文"],
+        4: ["zh-Hans", "中文(简体)"],
+        2052: ["zh-CN", "中文(中华人民共和国)"],
+        4100: ["zh-SG", "中文(新加坡)"],
+        31748: ["zh-Hant", "中文(繁體)"],
+        3076: ["zh-HK", "中文(香港特別行政區)"],
+        5124: ["zh-MO", "中文(澳門特別行政區)"],
+        1028: ["zh-TW", "中文(台灣)"],
+        131: ["co", "Corsu"],
+        1155: ["co-FR", "Corsu (France)"],
+        26: ["hr", "Hrvatski"],
+        1050: ["hr-HR", "Hrvatski (Hrvatska)"],
+        4122: ["hr-BA", "Hrvatski (Bosna i Hercegovina)"],
+        5: ["cs", "Čeština"],
+        1029: ["cs-CZ", "Čeština (Česká republika)"],
+        6: ["da", "Dansk"],
+        1030: ["da-DK", "Dansk (Danmark)"],
+        140: ["prs", "درى"],
+        1164: ["prs-AF", "درى (افغانستان)"],
+        101: ["dv", "ދިވެހިބަސް"],
+        1125: ["dv-MV", "ދިވެހިބަސް (ދިވެހި ރާއްޖެ)"],
+        19: ["nl", "Nederlands"],
+        2067: ["nl-BE", "Nederlands (België)"],
+        1043: ["nl-NL", "Nederlands (Nederland)"],
+        9: ["en", "English"],
+        3081: ["en-AU", "English (Australia)"],
+        10249: ["en-BZ", "English (Belize)"],
+        4105: ["en-CA", "English (Canada)"],
+        9225: ["en-029", "English (Caribbean)"],
+        16393: ["en-IN", "English (India)"],
+        6153: ["en-IE", "English (Ireland)"],
+        8201: ["en-JM", "English (Jamaica)"],
+        17417: ["en-MY", "English (Malaysia)"],
+        5129: ["en-NZ", "English (New Zealand)"],
+        13321: ["en-PH", "English (Philippines)"],
+        18441: ["en-SG", "English (Singapore)"],
+        7177: ["en-ZA", "English (South Africa)"],
+        11273: ["en-TT", "English (Trinidad y Tobago)"],
+        2057: ["en-GB", "English (United Kingdom)"],
+        1033: ["en-US", "English (United States)"],
+        12297: ["en-ZW", "English (Zimbabwe)"],
+        37: ["et", "Eesti"],
+        1061: ["et-EE", "Eesti (Eesti)"],
+        56: ["fo", "Føroyskt"],
+        1080: ["fo-FO", "Føroyskt (Føroyar)"],
+        100: ["fil", "Filipino"],
+        1124: ["fil-PH", "Filipino (Pilipinas)"],
+        11: ["fi", "Suomi"],
+        1035: ["fi-FI", "Suomi (Suomi)"],
+        12: ["fr", "Français"],
+        2060: ["fr-BE", "Français (Belgique)"],
+        3084: ["fr-CA", "Français (Canada)"],
+        1036: ["fr-FR", "Français (France)"],
+        5132: ["fr-LU", "Français (Luxembourg)"],
+        6156: ["fr-MC", "Français (Principauté de Monaco)"],
+        4108: ["fr-CH", "Français (Suisse)"],
+        98: ["fy", "Frysk"],
+        1122: ["fy-NL", "Frysk (Nederlân)"],
+        86: ["gl", "Galego"],
+        1110: ["gl-ES", "Galego (Galego)"],
+        55: ["ka", "ქართული"],
+        1079: ["ka-GE", "ქართული (საქართველო)"],
+        7: ["de", "Deutsch"],
+        3079: ["de-AT", "Deutsch (Österreich)"],
+        1031: ["de-DE", "Deutsch (Deutschland)"],
+        5127: ["de-LI", "Deutsch (Liechtenstein)"],
+        4103: ["de-LU", "Deutsch (Luxemburg)"],
+        2055: ["de-CH", "Deutsch (Schweiz)"],
+        8: ["el", "Ελληνικά"],
+        1032: ["el-GR", "Ελληνικά (Ελλάδα)"],
+        111: ["kl", "Kalaallisut"],
+        1135: ["kl-GL", "Kalaallisut (Kalaallit Nunaat)"],
+        71: ["gu", "ગુજરાતી"],
+        1095: ["gu-IN", "ગુજરાતી (ભારત)"],
+        104: ["ha", "Hausa"],
+        31848: ["ha-Latn", "Hausa (Latin)"],
+        1128: ["ha-Latn-NG", "Hausa (Nigeria)"],
+        13: ["he", "עברית"],
+        1037: ["he-IL", "עברית (ישראל)"],
+        57: ["hi", "हिंदी"],
+        1081: ["hi-IN", "हिंदी (भारत)"],
+        14: ["hu", "Magyar"],
+        1038: ["hu-HU", "Magyar (Magyarország)"],
+        15: ["is", "Íslenska"],
+        1039: ["is-IS", "Íslenska (Ísland)"],
+        112: ["ig", "Igbo"],
+        1136: ["ig-NG", "Igbo (Nigeria)"],
+        33: ["id", "Bahasa Indonesia"],
+        1057: ["id-ID", "Bahasa Indonesia (Indonesia)"],
+        93: ["iu", "Inuktitut"],
+        31837: ["iu-Latn", "Inuktitut (Qaliujaaqpait)"],
+        2141: ["iu-Latn-CA", "Inuktitut"],
+        30813: ["iu-Cans", "ᐃᓄᒃᑎᑐᑦ (ᖃᓂᐅᔮᖅᐸᐃᑦ)"],
+        1117: ["iu-Cans-CA", "ᐃᓄᒃᑎᑐᑦ (ᑲᓇᑕᒥ)"],
+        60: ["ga", "Gaeilge"],
+        2108: ["ga-IE", "Gaeilge (Éire)"],
+        52: ["xh", "isiXhosa"],
+        1076: ["xh-ZA", "isiXhosa (uMzantsi Afrika)"],
+        53: ["zu", "isiZulu"],
+        1077: ["zu-ZA", "isiZulu (iNingizimu Afrika)"],
+        16: ["it", "Italiano"],
+        1040: ["it-IT", "Italiano (Italia)"],
+        2064: ["it-CH", "Italiano (Svizzera)"],
+        17: ["ja", "日本語"],
+        1041: ["ja-JP", "日本語 (日本)"],
+        75: ["kn", "ಕನ್ನಡ"],
+        1099: ["kn-IN", "ಕನ್ನಡ (ಭಾರತ)"],
+        63: ["kk", "Қазақ"],
+        1087: ["kk-KZ", "Қазақ (Қазақстан)"],
+        83: ["km", "ខ្មែរ"],
+        1107: ["km-KH", "ខ្មែរ (កម្ពុជា)"],
+        134: ["qut", "K'iche"],
+        1158: ["qut-GT", "K'iche (Guatemala)"],
+        135: ["rw", "Kinyarwanda"],
+        1159: ["rw-RW", "Kinyarwanda (Rwanda)"],
+        65: ["sw", "Kiswahili"],
+        1089: ["sw-KE", "Kiswahili (Kenya)"],
+        87: ["kok", "कोंकणी"],
+        1111: ["kok-IN", "कोंकणी (भारत)"],
+        18: ["ko", "한국어"],
+        1042: ["ko-KR", "한국어 (대한민국)"],
+        64: ["ky", "Кыргыз"],
+        1088: ["ky-KG", "Кыргыз (Кыргызстан)"],
+        84: ["lo", "ລາວ"],
+        1108: ["lo-LA", "ລາວ (ສ.ປ.ປ. ລາວ)"],
+        38: ["lv", "Latviešu"],
+        1062: ["lv-LV", "Latviešu (Latvija)"],
+        39: ["lt", "Lietuvių"],
+        1063: ["lt-LT", "Lietuvių (Lietuva)"],
+        31790: ["dsb", "Dolnoserbšćina"],
+        2094: ["dsb-DE", "Dolnoserbšćina (Nimska)"],
+        110: ["lb", "Lëtzebuergesch"],
+        1134: ["lb-LU", "Lëtzebuergesch (Luxembourg)"],
+        1071: ["mk-MK", "Македонски јазик (Македонија)"],
+        47: ["mk", "Македонски јазик"],
+        62: ["ms", "Bahasa Melayu"],
+        2110: ["ms-BN", "Bahasa Melayu (Brunei Darussalam)"],
+        1086: ["ms-MY", "Bahasa Melayu (Malaysia)"],
+        76: ["ml", "മലയാളം"],
+        1100: ["ml-IN", "മലയാളം (ഭാരതം)"],
+        58: ["mt", "Malti"],
+        1082: ["mt-MT", "Malti (Malta)"],
+        129: ["mi", "Reo Māori"],
+        1153: ["mi-NZ", "Reo Māori (Aotearoa)"],
+        122: ["arn", "Mapudungun"],
+        1146: ["arn-CL", "Mapudungun (Chile)"],
+        78: ["mr", "मराठी"],
+        1102: ["mr-IN", "मराठी (भारत)"],
+        124: ["moh", "Kanien'kéha"],
+        1148: ["moh-CA", "Kanien'kéha"],
+        80: ["mn", "Монгол хэл"],
+        30800: ["mn-Cyrl", "Монгол хэл"],
+        1104: ["mn-MN", "Монгол хэл (Монгол улс)"],
+        31824: ["mn-Mong", "ᠮᠤᠨᠭᠭᠤᠯ ᠬᠡᠯᠡ"],
+        2128: ["mn-Mong-CN", "ᠮᠤᠨᠭᠭᠤᠯ ᠬᠡᠯᠡ (ᠪᠦᠭᠦᠳᠡ ᠨᠠᠢᠷᠠᠮᠳᠠᠬᠤ ᠳᠤᠮᠳᠠᠳᠤ ᠠᠷᠠᠳ ᠣᠯᠣᠰ)"],
+        97: ["ne", "नेपाली"],
+        1121: ["ne-NP", "नेपाली (नेपाल)"],
+        20: ["no", "Norsk"],
+        31764: ["nb", "Norsk (bokmål)"],
+        30740: ["nn", "Norsk (Nynorsk)"],
+        1044: ["nb-NO", "Norsk, bokmål (Norge)"],
+        2068: ["nn-NO", "Norsk, nynorsk (Noreg)"],
+        130: ["oc", "Occitan"],
+        1154: ["oc-FR", "Occitan (França)"],
+        72: ["or", "ଓଡ଼ିଆ"],
+        1096: ["or-IN", "ଓଡ଼ିଆ (ଭାରତ)"],
+        99: ["ps", "پښتو"],
+        1123: ["ps-AF", "پښتو (افغانستان)"],
+        41: ["fa", "فارسى"],
+        1065: ["fa-IR", "فارسى (ایران)"],
+        21: ["pl", "Polski"],
+        1045: ["pl-PL", "Polski (Polska)"],
+        22: ["pt", "Português"],
+        1046: ["pt-BR", "Português (Brasil)"],
+        2070: ["pt-PT", "Português (Portugal)"],
+        70: ["pa", "ਪੰਜਾਬੀ"],
+        1094: ["pa-IN", "ਪੰਜਾਬੀ (ਭਾਰਤ)"],
+        107: ["quz", "Runasimi"],
+        1131: ["quz-BO", "Runasimi (Qullasuyu)"],
+        2155: ["quz-EC", "Runasimi (Ecuador)"],
+        3179: ["quz-PE", "Runasimi (Piruw)"],
+        24: ["ro", "Română"],
+        1048: ["ro-RO", "Română (România)"],
+        23: ["rm", "Rumantsch"],
+        1047: ["rm-CH", "Rumantsch (Svizra)"],
+        25: ["ru", "Русский"],
+        1049: ["ru-RU", "Русский (Россия)"],
+        28731: ["smn", "Sämikielâ"],
+        31803: ["smj", "Julevusámegiella"],
+        59: ["se", "Davvisámegiella"],
+        29755: ["sms", "Sääm´ǩiõll"],
+        30779: ["sma", "åarjelsaemiengiele"],
+        9275: ["smn-FI", "Sämikielâ (Suomâ)"],
+        4155: ["smj-NO", "Julevusámegiella (Vuodna)"],
+        5179: ["smj-SE", "Julevusámegiella (Svierik)"],
+        3131: ["se-FI", "Davvisámegiella (Suopma)"],
+        1083: ["se-NO", "Davvisámegiella (Norga)"],
+        2107: ["se-SE", "Davvisámegiella (Ruoŧŧa)"],
+        8251: ["sms-FI", "Sääm´ǩiõll (Lää´ddjânnam)"],
+        6203: ["sma-NO", "åarjelsaemiengiele (Nöörje)"],
+        7227: ["sma-SE", "åarjelsaemiengiele (Sveerje)"],
+        79: ["sa", "संस्कृत"],
+        1103: ["sa-IN", "संस्कृत (भारतम्)"],
+        145: ["gd", "Gàidhlig"],
+        1169: ["gd-GB", "Gàidhlig (An Rìoghachd Aonaichte)"],
+        31770: ["sr", "Srpski"],
+        27674: ["sr-Cyrl", "Српски (Ћирилица)"],
+        7194: ["sr-Cyrl-BA", "Српски (Босна и Херцеговина)"],
+        12314: ["sr-Cyrl-ME", "Српски (Црна Гора)"],
+        3098: ["sr-Cyrl-CS", "Српски (Србија и Црна Гора (Претходно))"],
+        10266: ["sr-Cyrl-RS", "Српски (Србија)"],
+        28698: ["sr-Latn", "Srpski (Latinica)"],
+        6170: ["sr-Latn-BA", "Srpski (Bosna i Hercegovina)"],
+        11290: ["sr-Latn-ME", "Srpski (Crna Gora)"],
+        2074: ["sr-Latn-CS", "Srpski (Srbija i Crna Gora (Prethodno))"],
+        9242: ["sr-Latn-RS", "Srpski (Srbija)"],
+        108: ["nso", "Sesotho sa Leboa"],
+        1132: ["nso-ZA", "Sesotho sa Leboa (Afrika Borwa)"],
+        50: ["tn", "Setswana"],
+        1074: ["tn-ZA", "Setswana (Aforika Borwa)"],
+        91: ["si", "සිංහ"],
+        1115: ["si-LK", "සිංහ (ශ්රී ලංකා)"],
+        27: ["sk", "Slovenčina"],
+        1051: ["sk-SK", "Slovenčina (Slovenská republika)"],
+        36: ["sl", "Slovenski"],
+        1060: ["sl-SI", "Slovenski (Slovenija)"],
+        10: ["es", "Español"],
+        11274: ["es-AR", "Español (Argentina)"],
+        16394: ["es-BO", "Español (Bolivia)"],
+        13322: ["es-CL", "Español (Chile)"],
+        9226: ["es-CO", "Español (Colombia)"],
+        5130: ["es-CR", "Español (Costa Rica)"],
+        7178: ["es-DO", "Español (República Dominicana)"],
+        12298: ["es-EC", "Español (Ecuador)"],
+        17418: ["es-SV", "Español (El Salvador)"],
+        4106: ["es-GT", "Español (Guatemala)"],
+        18442: ["es-HN", "Español (Honduras)"],
+        2058: ["es-MX", "Español (México)"],
+        19466: ["es-NI", "Español (Nicaragua)"],
+        6154: ["es-PA", "Español (Panamá)"],
+        15370: ["es-PY", "Español (Paraguay)"],
+        10250: ["es-PE", "Español (Perú)"],
+        20490: ["es-PR", "Español (Puerto Rico)"],
+        3082: ["es-ES", "Español (España, alfabetización internacional)"],
+        21514: ["es-US", "Español (Estados Unidos)"],
+        14346: ["es-UY", "Español (Uruguay)"],
+        8202: ["es-VE", "Español (Republica Bolivariana de Venezuela)"],
+        29: ["sv", "Svenska"],
+        2077: ["sv-FI", "Svenska (Finland)"],
+        1053: ["sv-SE", "Svenska (Sverige)"],
+        90: ["syr", "ܣܘܪܝܝܐ"],
+        1114: ["syr-SY", "ܣܘܪܝܝܐ (سوريا)"],
+        40: ["tg", "Тоҷикӣ"],
+        31784: ["tg-Cyrl", "Тоҷикӣ"],
+        1064: ["tg-Cyrl-TJ", "Тоҷикӣ (Тоҷикистон)"],
+        95: ["tzm", "Tamazight"],
+        31839: ["tzm-Latn", "Tamazight (Latin)"],
+        2143: ["tzm-Latn-DZ", "Tamazight (Djazaïr)"],
+        73: ["ta", "தமிழ்"],
+        1097: ["ta-IN", "தமிழ் (இந்தியா)"],
+        68: ["tt", "Татар"],
+        1092: ["tt-RU", "Татар (Россия)"],
+        74: ["te", "తెలుగు"],
+        1098: ["te-IN", "తెలుగు (భారత దేశం)"],
+        30: ["th", "ไทย"],
+        1054: ["th-TH", "ไทย (ไทย)"],
+        81: ["bo", "བོད་ཡིག"],
+        1105: ["bo-CN", "བོད་ཡིག (ཀྲུང་ཧྭ་མི་དམངས་སྤྱི་མཐུན་རྒྱལ་ཁབ།)"],
+        31: ["tr", "Türkçe"],
+        1055: ["tr-TR", "Türkçe (Türkiye)"],
+        66: ["tk", "Türkmençe"],
+        1090: ["tk-TM", "Türkmençe (Türkmenistan)"],
+        34: ["uk", "Українська"],
+        1058: ["uk-UA", "Українська (Україна)"],
+        46: ["hsb", "Hornjoserbšćina"],
+        1070: ["hsb-DE", "Hornjoserbšćina (Němska)"],
+        32: ["ur", "اُردو"],
+        1056: ["ur-PK", "اُردو (پاکستان)"],
+        128: ["ug", "ئۇيغۇر يېزىقى"],
+        1152: ["ug-CN", "(ئۇيغۇر يېزىقى (جۇڭخۇا خەلق جۇمھۇرىيىتى"],
+        30787: ["uz-Cyrl", "Ўзбек"],
+        2115: ["uz-Cyrl-UZ", "Ўзбек (Ўзбекистон)"],
+        67: ["uz", "U'zbek"],
+        31811: ["uz-Latn", "U'zbek"],
+        1091: ["uz-Latn-UZ", "U'zbek (U'zbekiston Respublikasi)"],
+        42: ["vi", "Tiếng Việt"],
+        1066: ["vi-VN", "Tiếng Việt (Việt Nam)"],
+        82: ["cy", "Cymraeg"],
+        1106: ["cy-GB", "Cymraeg (y Deyrnas Unedig)"],
+        136: ["wo", "Wolof"],
+        1160: ["wo-SN", "Wolof (Sénégal)"],
+        133: ["sah", "Саха"],
+        1157: ["sah-RU", "Саха (Россия)"],
+        120: ["ii", "ꆈꌠꁱꂷ"],
+        1144: ["ii-CN", "ꆈꌠꁱꂷ (ꍏꉸꏓꂱꇭꉼꇩ)"],
+        106: ["yo", "Yoruba"],
+        1130: ["yo-NG", "Yoruba (Nigeria)"],
+        2129: ["bo-BT", "Tibetan, Bhutan"],
+        1126: ["bin-NG", "Bini, Nigeria"],
+        1116: ["chr-US", "Cherokee, United States"],
+        15369: ["en-HK", "English, Hong Kong"],
+        14345: ["en-ID", "English, Indonesia"],
+        1034: ["es-ES_tradnl", "Spanish"],
+        15372: ["fr-HT", "French, Haiti"],
+        9228: ["fr-CG", "French, Congo"],
+        12300: ["fr-CI", "French, Cote d'Ivoire"],
+        11276: ["fr-CM", "French, Cameroon"],
+        14348: ["fr-MA", "French, Morocco"],
+        13324: ["fr-ML", "French, Mali"],
+        8204: ["fr-RE", "French, Reunion"],
+        10252: ["fr-SN", "French, Senegal"],
+        7180: ["fr-West", "French"],
+        1127: ["fuv-NG", "Nigerian Fulfulde, Nigeria"],
+        1138: ["gaz-ET", "West Central Oromo, Ethiopia"],
+        1140: ["gn-PY", "Guarani, Paraguay"],
+        1141: ["haw-US", "Hawaiian, UnitedStates"],
+        1129: ["ibb-NG", "Ibibio, Nigeria"],
+        1137: ["kr-NG", "Kanuri, Nigeria"],
+        1112: ["mni", "Manipuri"],
+        1109: ["my-MM", "Burmese, Myanmar"],
+        2145: ["ne-IN", "Nepali, India"],
+        1145: ["pap-AN", "Papiamento, Netherlands Antilles"],
+        2118: ["pa-PK", "Panjabi, Pakistan"],
+        1165: ["plt-MG", "Plateau Malagasy, Madagascar"],
+        2072: ["ro-MO", "Romanian, Macao"],
+        2073: ["ru-MO", "Russian, Macao"],
+        1113: ["sd-IN", "Sindhi, India"],
+        2137: ["sd-PK", "Sindhi, Pakistan"],
+        1143: ["so-SO", "Somali, Somalia"],
+        1072: ["st-ZA", "Southern Sotho, South Africa"],
+        1139: ["ti-ER", "Tigrinya, Eritrea"],
+        2163: ["ti-ET", "Tigrinya, Ethiopia"],
+        1119: ["tmz", "Tamanaku"],
+        3167: ["tmz-MA", "Tamanaku, Morocco"],
+        1073: ["ts-ZA", "Tsonga, South Africa"],
+        2080: ["ur-IN", "Urdu, India"],
+        1075: ["ven-ZA", "South Africa"]
+    };
+    return {
+        alternateClassName: "Common.util.LanguageName",
+        singleton: true,
+        getLocalLanguageName: function (code) {
+            return localLanguageName[code] || ["", code];
+        }
+    };
+} ()));

OfficeWeb/apps/common/main/lib/component/util/MetricSettings.js

@@ -0,0 +1,73 @@
+/*
+ * (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
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+Common.MetricSettings = new(function () {
+    var me = this;
+    me.c_MetricUnits = {
+        cm: 0,
+        pt: 1
+    };
+    me.currentMetric = me.c_MetricUnits.pt;
+    me.metricName = ["cm", "pt"];
+    return {
+        c_MetricUnits: me.c_MetricUnits,
+        metricName: me.metricName,
+        setCurrentMetric: function (value) {
+            me.currentMetric = value;
+        },
+        getCurrentMetric: function () {
+            return me.currentMetric;
+        },
+        fnRecalcToMM: function (value) {
+            if (value !== null && value !== undefined) {
+                switch (me.currentMetric) {
+                case me.c_MetricUnits.cm:
+                    return value * 10;
+                case me.c_MetricUnits.pt:
+                    return value * 25.4 / 72;
+                }
+            }
+            return value;
+        },
+        fnRecalcFromMM: function (value) {
+            switch (me.currentMetric) {
+            case me.c_MetricUnits.cm:
+                return parseFloat(Ext.Number.toFixed(value / 10, 4));
+            case me.c_MetricUnits.pt:
+                return parseFloat(Ext.Number.toFixed(value * 72 / 25.4, 3));
+            }
+            return value;
+        }
+    };
+})();

OfficeWeb/apps/common/main/lib/component/util/RGBColor.js

@@ -0,0 +1,196 @@
+/*
+ * (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("Common.component.util.RGBColor", {
+    alternateClassName: "Common.util.RGBColor",
+    constructor: function (colorString) {
+        this.ok = false;
+        if (colorString.charAt(0) == "#") {
+            colorString = colorString.substr(1, 6);
+        }
+        colorString = colorString.replace(/ /g, "");
+        colorString = colorString.toLowerCase();
+        var colorDefinitions = [{
+            re: /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
+            process: function (bits) {
+                return [parseInt(bits[1]), parseInt(bits[2]), parseInt(bits[3])];
+            }
+        },
+        {
+            re: /^hsb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/,
+            process: function (bits) {
+                var rgb = {};
+                var h = Math.round(bits[1]);
+                var s = Math.round(bits[2] * 255 / 100);
+                var v = Math.round(bits[3] * 255 / 100);
+                if (s == 0) {
+                    rgb.r = rgb.g = rgb.b = v;
+                } else {
+                    var t1 = v;
+                    var t2 = (255 - s) * v / 255;
+                    var t3 = (t1 - t2) * (h % 60) / 60;
+                    if (h == 360) {
+                        h = 0;
+                    }
+                    if (h < 60) {
+                        rgb.r = t1;
+                        rgb.b = t2;
+                        rgb.g = t2 + t3;
+                    } else {
+                        if (h < 120) {
+                            rgb.g = t1;
+                            rgb.b = t2;
+                            rgb.r = t1 - t3;
+                        } else {
+                            if (h < 180) {
+                                rgb.g = t1;
+                                rgb.r = t2;
+                                rgb.b = t2 + t3;
+                            } else {
+                                if (h < 240) {
+                                    rgb.b = t1;
+                                    rgb.r = t2;
+                                    rgb.g = t1 - t3;
+                                } else {
+                                    if (h < 300) {
+                                        rgb.b = t1;
+                                        rgb.g = t2;
+                                        rgb.r = t2 + t3;
+                                    } else {
+                                        if (h < 360) {
+                                            rgb.r = t1;
+                                            rgb.g = t2;
+                                            rgb.b = t1 - t3;
+                                        } else {
+                                            rgb.r = 0;
+                                            rgb.g = 0;
+                                            rgb.b = 0;
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                return [Math.round(rgb.r), Math.round(rgb.g), Math.round(rgb.b)];
+            }
+        },
+        {
+            re: /^(\w{2})(\w{2})(\w{2})$/,
+            process: function (bits) {
+                return [parseInt(bits[1], 16), parseInt(bits[2], 16), parseInt(bits[3], 16)];
+            }
+        },
+        {
+            re: /^(\w{1})(\w{1})(\w{1})$/,
+            process: function (bits) {
+                return [parseInt(bits[1] + bits[1], 16), parseInt(bits[2] + bits[2], 16), parseInt(bits[3] + bits[3], 16)];
+            }
+        }];
+        for (var i = 0; i < colorDefinitions.length; i++) {
+            var re = colorDefinitions[i].re;
+            var processor = colorDefinitions[i].process;
+            var bits = re.exec(colorString);
+            if (bits) {
+                var channels = processor(bits);
+                this.r = channels[0];
+                this.g = channels[1];
+                this.b = channels[2];
+                this.ok = true;
+            }
+        }
+        this.r = (this.r < 0 || isNaN(this.r)) ? 0 : ((this.r > 255) ? 255 : this.r);
+        this.g = (this.g < 0 || isNaN(this.g)) ? 0 : ((this.g > 255) ? 255 : this.g);
+        this.b = (this.b < 0 || isNaN(this.b)) ? 0 : ((this.b > 255) ? 255 : this.b);
+        this.isEqual = function (color) {
+            return ((this.r == color.r) && (this.g == color.g) && (this.b == color.b));
+        };
+        this.toRGB = function () {
+            return "rgb(" + this.r + ", " + this.g + ", " + this.b + ")";
+        };
+        this.toRGBA = function (alfa) {
+            if (alfa === undefined) {
+                alfa = 1;
+            }
+            return "rgba(" + this.r + ", " + this.g + ", " + this.b + ", " + alfa + ")";
+        };
+        this.toHex = function () {
+            var r = this.r.toString(16);
+            var g = this.g.toString(16);
+            var b = this.b.toString(16);
+            if (r.length == 1) {
+                r = "0" + r;
+            }
+            if (g.length == 1) {
+                g = "0" + g;
+            }
+            if (b.length == 1) {
+                b = "0" + b;
+            }
+            return "#" + r + g + b;
+        };
+        this.toHSB = function () {
+            var hsb = {
+                h: 0,
+                s: 0,
+                b: 0
+            };
+            var min = Math.min(this.r, this.g, this.b);
+            var max = Math.max(this.r, this.g, this.b);
+            var delta = max - min;
+            hsb.b = max;
+            hsb.s = max != 0 ? 255 * delta / max : 0;
+            if (hsb.s != 0) {
+                if (this.r == max) {
+                    hsb.h = 0 + (this.g - this.b) / delta;
+                } else {
+                    if (this.g == max) {
+                        hsb.h = 2 + (this.b - this.r) / delta;
+                    } else {
+                        hsb.h = 4 + (this.r - this.g) / delta;
+                    }
+                }
+            } else {
+                hsb.h = 0;
+            }
+            hsb.h *= 60;
+            if (hsb.h < 0) {
+                hsb.h += 360;
+            }
+            hsb.s *= 100 / 255;
+            hsb.b *= 100 / 255;
+            hsb.h = parseInt(hsb.h);
+            hsb.s = parseInt(hsb.s);
+            hsb.b = parseInt(hsb.b);
+            return hsb;
+        };
+    }
+});