3.0 source code

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

@@ -0,0 +1,96 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["backbone"], function (Backbone) {
+    Common.UI = _.extend(Common.UI || {},
+    {
+        Keys: {
+            BACKSPACE: 8,
+            TAB: 9,
+            RETURN: 13,
+            SHIFT: 16,
+            CTRL: 17,
+            ALT: 18,
+            ESC: 27,
+            LEFT: 37,
+            UP: 38,
+            RIGHT: 39,
+            DOWN: 40,
+            DELETE: 46,
+            HOME: 36,
+            END: 35,
+            SPACE: 32,
+            PAGEUP: 33,
+            PAGEDOWN: 34,
+            INSERT: 45,
+            NUM_PLUS: 107,
+            NUM_MINUS: 109,
+            F1: 112,
+            F2: 113,
+            F3: 114,
+            F4: 115,
+            F5: 116,
+            F6: 117,
+            F7: 118,
+            F8: 119,
+            F9: 120,
+            F10: 121,
+            F11: 122,
+            F12: 123,
+            EQUALITY: 187,
+            MINUS: 189
+        },
+        BaseView: Backbone.View.extend({
+            isSuspendEvents: false,
+            initialize: function (options) {
+                this.options = this.options ? _({}).extend(this.options, options) : options;
+            },
+            setVisible: function (visible) {
+                return this[visible ? "show" : "hide"]();
+            },
+            isVisible: function () {
+                return $(this.el).is(":visible");
+            },
+            suspendEvents: function () {
+                this.isSuspendEvents = true;
+            },
+            resumeEvents: function () {
+                this.isSuspendEvents = false;
+            }
+        }),
+        getId: function (prefix) {
+            return _.uniqueId(prefix || "asc-gen");
+        }
+    });
+});

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

@@ -0,0 +1,315 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView", "common/main/lib/component/ToggleManager"], function () {
+    Common.UI.Button = Common.UI.BaseView.extend({
+        options: {
+            id: null,
+            hint: false,
+            enableToggle: false,
+            allowDepress: true,
+            toggleGroup: null,
+            cls: "",
+            iconCls: "",
+            caption: "",
+            menu: null,
+            disabled: false,
+            pressed: false,
+            split: false
+        },
+        template: _.template(["<% if (menu == null) { %>", '<button type="button" class="btn <%= cls %>" id="<%= id %>" style="<%= style %>">', '<span class="caption"><%= caption %></span>', '<% if (iconCls != "") { %>', '<span class="btn-icon <%= iconCls %>">&nbsp;</span>', "<% } %>", "</button>", "<% } else if (split == false) {%>", '<div class="btn-group" id="<%= id %>" style="<%= style %>">', '<button type="button" class="btn dropdown-toggle <%= cls %>" data-toggle="dropdown">', '<span class="caption"><%= caption %></span>', '<% if (iconCls != "") { %>', '<span class="btn-icon <%= iconCls %>">&nbsp;</span>', "<% } %>", '<span class="caret"></span>', "</button>", "</div>", "<% } else { %>", '<div class="btn-group split" id="<%= id %>" style="<%= style %>">', '<button type="button" class="btn <%= cls %>">', '<span class="caption"><%= caption %></span>', '<% if (iconCls != "") { %>', '<span class="btn-icon <%= iconCls %>">&nbsp;</span>', "<% } %>", "</button>", '<button type="button" class="btn <%= cls %> dropdown-toggle" data-toggle="dropdown">', '<span class="caret"></span>', '<span class="sr-only"></span>', "</button>", "</div>", "<% } %>"].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this;
+            me.id = me.options.id || Common.UI.getId();
+            me.hint = me.options.hint;
+            me.enableToggle = me.options.enableToggle;
+            me.allowDepress = me.options.allowDepress;
+            me.cls = me.options.cls;
+            me.iconCls = me.options.iconCls;
+            me.menu = me.options.menu;
+            me.split = me.options.split;
+            me.toggleGroup = me.options.toggleGroup;
+            me.disabled = me.options.disabled;
+            me.pressed = me.options.pressed;
+            me.caption = me.options.caption;
+            me.template = me.options.template || me.template;
+            me.style = me.options.style;
+            me.rendered = false;
+            if (me.options.el) {
+                me.render();
+            }
+        },
+        render: function (parentEl) {
+            var me = this;
+            me.trigger("render:before", me);
+            me.cmpEl = $(me.el);
+            if (parentEl) {
+                me.setElement(parentEl, false);
+                if (!me.rendered) {
+                    me.cmpEl = $(this.template({
+                        id: me.id,
+                        cls: me.cls,
+                        iconCls: me.iconCls,
+                        menu: me.menu,
+                        split: me.split,
+                        disabled: me.disabled,
+                        pressed: me.pressed,
+                        caption: me.caption,
+                        style: me.style
+                    }));
+                    if (me.menu && _.isFunction(me.menu.render)) {
+                        me.menu.render(me.cmpEl);
+                    }
+                    parentEl.html(me.cmpEl);
+                }
+            }
+            if (!me.rendered) {
+                var el = me.cmpEl,
+                isGroup = el.hasClass("btn-group"),
+                isSplit = el.hasClass("split");
+                if (me.options.hint) {
+                    var modalParents = me.cmpEl.closest(".asc-window");
+                    me.cmpEl.attr("data-toggle", "tooltip");
+                    me.cmpEl.tooltip({
+                        title: me.options.hint,
+                        placement: me.options.hintAnchor || "cursor"
+                    });
+                    if (modalParents.length > 0) {
+                        me.cmpEl.data("bs.tooltip").tip().css("z-index", parseInt(modalParents.css("z-index")) + 10);
+                    }
+                }
+                if (_.isString(me.toggleGroup)) {
+                    me.enableToggle = true;
+                }
+                var buttonHandler = function (e) {
+                    if (!me.disabled && e.which == 1) {
+                        me.doToggle();
+                        if (me.options.hint) {
+                            var tip = me.cmpEl.data("bs.tooltip");
+                            if (tip) {
+                                if (tip.dontShow === undefined) {
+                                    tip.dontShow = true;
+                                }
+                                tip.hide();
+                            }
+                        }
+                        me.trigger("click", me, e);
+                    }
+                };
+                var doSplitSelect = function (select, e) {
+                    if (!select) {
+                        var isUnderMouse = false;
+                        _.each($("button", el), function (el) {
+                            if ($(el).is(":hover")) {
+                                isUnderMouse = true;
+                                return false;
+                            }
+                        });
+                        if (!isUnderMouse) {
+                            el.removeClass("over");
+                            $("button", el).removeClass("over");
+                        }
+                    }
+                    if (!select && (me.enableToggle && me.allowDepress && me.pressed)) {
+                        return;
+                    }
+                    if (select && !isSplit && (me.enableToggle && me.allowDepress && !me.pressed)) {
+                        e.preventDefault();
+                        return;
+                    }
+                    $("button:first", el).toggleClass("active", select);
+                    $("[data-toggle^=dropdown]", el).toggleClass("active", select);
+                    el.toggleClass("active", select);
+                };
+                var menuHandler = function (e) {
+                    if (!me.disabled && e.which == 1) {
+                        if (isSplit) {
+                            if (me.options.hint) {
+                                var tip = me.cmpEl.data("bs.tooltip");
+                                if (tip) {
+                                    if (tip.dontShow === undefined) {
+                                        tip.dontShow = true;
+                                    }
+                                    tip.hide();
+                                }
+                            }
+                            var isOpen = el.hasClass("open");
+                            doSplitSelect(!isOpen, e);
+                        }
+                    }
+                };
+                var doSetActiveState = function (e, state) {
+                    if (isSplit) {
+                        doSplitSelect(state, e);
+                    } else {
+                        el.toggleClass("active", state);
+                        $("button", el).toggleClass("active", state);
+                    }
+                };
+                var onMouseDown = function (e) {
+                    doSplitSelect(true, e);
+                    $(document).on("mouseup", onMouseUp);
+                };
+                var onMouseUp = function (e) {
+                    doSplitSelect(false, e);
+                    $(document).off("mouseup", onMouseUp);
+                };
+                var onAfterHideMenu = function (e) {
+                    me.cmpEl.find(".dropdown-toggle").blur();
+                };
+                if (isGroup) {
+                    if (isSplit) {
+                        $("[data-toggle^=dropdown]", el).on("mousedown", _.bind(menuHandler, this));
+                        $("button", el).on("mousedown", _.bind(onMouseDown, this));
+                    }
+                    el.on("hide.bs.dropdown", _.bind(doSplitSelect, me, false));
+                    el.on("show.bs.dropdown", _.bind(doSplitSelect, me, true));
+                    el.on("hidden.bs.dropdown", _.bind(onAfterHideMenu, me));
+                    $("button:first", el).on("click", buttonHandler);
+                } else {
+                    el.on("click", buttonHandler);
+                }
+                el.on("button.internal.active", _.bind(doSetActiveState, me));
+                el.on("mouseover", function (e) {
+                    if (!me.disabled) {
+                        me.cmpEl.addClass("over");
+                        me.trigger("mouseover", me, e);
+                    }
+                });
+                el.on("mouseout", function (e) {
+                    if (!me.disabled) {
+                        me.cmpEl.removeClass("over");
+                        me.trigger("mouseout", me, e);
+                    }
+                });
+                Common.UI.ToggleManager.register(me);
+            }
+            me.rendered = true;
+            if (me.pressed) {
+                me.toggle(me.pressed, true);
+            }
+            if (me.disabled) {
+                me.setDisabled(me.disabled);
+            }
+            me.trigger("render:after", me);
+            return this;
+        },
+        doToggle: function () {
+            var me = this;
+            if (me.enableToggle && (me.allowDepress !== false || !me.pressed)) {
+                me.toggle();
+            }
+        },
+        toggle: function (toggle, suppressEvent) {
+            var state = toggle === undefined ? !this.pressed : !!toggle;
+            this.pressed = state;
+            if (this.cmpEl) {
+                this.cmpEl.trigger("button.internal.active", [state]);
+            }
+            if (!suppressEvent) {
+                this.trigger("toggle", this, state);
+            }
+        },
+        isActive: function () {
+            if (this.enableToggle) {
+                return this.pressed;
+            }
+            return this.cmpEl.hasClass("active");
+        },
+        setDisabled: function (disabled) {
+            if (this.rendered) {
+                var el = this.cmpEl,
+                isGroup = el.hasClass("btn-group");
+                disabled = (disabled === true);
+                if (disabled !== el.hasClass("disabled")) {
+                    var decorateBtn = function (button) {
+                        button.toggleClass("disabled", disabled);
+                        (disabled) ? button.attr({
+                            disabled: disabled
+                        }) : button.removeAttr("disabled");
+                    };
+                    decorateBtn(el);
+                    isGroup && decorateBtn(el.children("button"));
+                }
+                if (disabled) {
+                    var tip = this.cmpEl.data("bs.tooltip");
+                    if (tip) {
+                        tip.hide();
+                    }
+                }
+            }
+            this.disabled = disabled;
+        },
+        isDisabled: function () {
+            return this.disabled;
+        },
+        setIconCls: function (cls) {
+            var btnIconEl = $(this.el).find("span.btn-icon"),
+            oldCls = this.iconCls;
+            this.iconCls = cls;
+            btnIconEl.removeClass(oldCls);
+            btnIconEl.addClass(cls || "");
+        },
+        setVisible: function (visible) {
+            this.cmpEl.toggleClass("hidden", !visible);
+        },
+        updateHint: function (hint) {
+            this.options.hint = hint;
+            var cmpEl = this.cmpEl,
+            modalParents = cmpEl.closest(".asc-window");
+            cmpEl.attr("data-toggle", "tooltip");
+            cmpEl.tooltip("destroy").tooltip({
+                title: hint,
+                placement: this.options.hintAnchor || "cursor"
+            });
+            if (modalParents.length > 0) {
+                cmpEl.data("bs.tooltip").tip().css("z-index", parseInt(modalParents.css("z-index")) + 10);
+            }
+        },
+        setCaption: function (caption) {
+            if (this.caption != caption) {
+                this.caption = caption;
+                if (this.rendered) {
+                    var captionNode = this.cmpEl.find("button:first > .caption").andSelf().filter("button > .caption");
+                    if (captionNode.length > 0) {
+                        captionNode.text(caption);
+                    } else {
+                        this.cmpEl.find("button:first").andSelf().filter("button").text(caption);
+                    }
+                }
+            }
+        }
+    });
+});

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

@@ -0,0 +1,116 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView", "underscore"], function (base, _) {
+    Common.UI.CheckBox = Common.UI.BaseView.extend({
+        options: {
+            labelText: ""
+        },
+        disabled: false,
+        rendered: false,
+        indeterminate: false,
+        checked: false,
+        value: "unchecked",
+        template: _.template('<label class="checkbox-indeterminate"><input type="button"><%= labelText %></label>'),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this,
+            el = $(this.el);
+            this.render();
+            if (this.options.disabled) {
+                this.setDisabled(this.options.disabled);
+            }
+            if (this.options.value !== undefined) {
+                this.setValue(this.options.value, true);
+            }
+            this.$chk.on("click", _.bind(this.onItemCheck, this));
+        },
+        render: function () {
+            var el = $(this.el);
+            el.html(this.template({
+                labelText: this.options.labelText
+            }));
+            this.$chk = el.find("input[type=button]");
+            this.$label = el.find("label");
+            this.rendered = true;
+            return this;
+        },
+        setDisabled: function (disabled) {
+            if (disabled !== this.disabled) {
+                this.$label.toggleClass("disabled", disabled);
+                (disabled) ? this.$chk.attr({
+                    disabled: disabled
+                }) : this.$chk.removeAttr("disabled");
+            }
+            this.disabled = disabled;
+        },
+        isDisabled: function () {
+            return this.disabled;
+        },
+        onItemCheck: function (e) {
+            if (!this.disabled) {
+                if (this.indeterminate) {
+                    this.indeterminate = false;
+                    this.setValue(false);
+                } else {
+                    this.setValue(!this.checked);
+                }
+            }
+        },
+        setRawValue: function (value) {
+            this.checked = (value === true || value === "true" || value === "1" || value === 1 || value === "checked");
+            this.indeterminate = (value === "indeterminate");
+            this.$chk.toggleClass("checked", this.checked);
+            this.$chk.toggleClass("indeterminate", this.indeterminate);
+            this.value = this.indeterminate ? "indeterminate" : (this.checked ? "checked" : "unchecked");
+        },
+        setValue: function (value, suspendchange) {
+            if (this.rendered) {
+                this.lastValue = this.value;
+                this.setRawValue(value);
+                if (suspendchange !== true && this.lastValue !== value) {
+                    this.trigger("change", this, this.value, this.lastValue);
+                }
+            } else {
+                this.options.value = value;
+            }
+        },
+        getValue: function () {
+            return this.value;
+        },
+        isChecked: function () {
+            return this.checked;
+        }
+    });
+});

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

@@ -1,73 +1,60 @@
-/*
- * (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;
-        }
-    };
-})();
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/Button"], function () {
+    Common.UI.ColorButton = Common.UI.Button.extend({
+        options: {
+            hint: false,
+            enableToggle: false
+        },
+        template: _.template(['<div class="btn-group" id="<%= id %>">', '<button type="button" class="btn btn-color dropdown-toggle <%= cls %>" data-toggle="dropdown" style="<%= style %>">', "<span>&nbsp;</span>", "</button>", "</div>"].join("")),
+        setColor: function (color) {
+            var border_color, clr, span = $(this.cmpEl).find("button span");
+            this.color = color;
+            if (color == "transparent") {
+                border_color = "#BEBEBE";
+                clr = color;
+                span.addClass("transparent");
+            } else {
+                border_color = "transparent";
+                clr = (typeof(color) == "object") ? "#" + color.color : "#" + color;
+                span.removeClass("transparent");
+            }
+            span.css({
+                "background-color": clr,
+                "border-color": border_color
+            });
+        }
+    });
+});

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

@@ -0,0 +1,99 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView"], function () {
+    Common.UI.ColorPalette = Common.UI.BaseView.extend({
+        options: {
+            allowReselect: true,
+            cls: "",
+            style: ""
+        },
+        template: _.template(['<div class="palette-color">', "<% _.each(colors, function(color, index) { %>", '<span class="color-item" data-color="<%= color %>" style="background-color: #<%= color %>;"></span>', "<% }) %>", "</div>"].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this;
+            this.id = me.options.id;
+            this.cls = me.options.cls;
+            this.style = me.options.style;
+            this.colors = me.options.colors || [];
+            this.value = me.options.value;
+            if (me.options.el) {
+                me.render();
+            }
+        },
+        render: function (parentEl) {
+            var me = this;
+            if (!me.rendered) {
+                this.cmpEl = $(this.template({
+                    id: this.id,
+                    cls: this.cls,
+                    style: this.style,
+                    colors: this.colors
+                }));
+                if (parentEl) {
+                    this.setElement(parentEl, false);
+                    parentEl.html(this.cmpEl);
+                } else {
+                    $(this.el).html(this.cmpEl);
+                }
+            } else {
+                this.cmpEl = $(this.el);
+            }
+            if (!me.rendered) {
+                var el = this.cmpEl;
+                el.on("click", "span.color-item", _.bind(this.itemClick, this));
+            }
+            me.rendered = true;
+            return this;
+        },
+        itemClick: function (e) {
+            var item = $(e.target);
+            this.select(item.attr("data-color"));
+        },
+        select: function (color, suppressEvent) {
+            if (this.value != color) {
+                var me = this;
+                $("span.color-item", this.cmpEl).removeClass("selected");
+                this.value = color;
+                if (color && /#?[a-fA-F0-9]{6}/.test(color)) {
+                    color = /#?([a-fA-F0-9]{6})/.exec(color)[1].toUpperCase();
+                    $("span[data-color=" + color + "]", this.cmpEl).addClass("selected");
+                    if (!suppressEvent) {
+                        me.trigger("select", me, this.value);
+                    }
+                }
+            }
+        }
+    });
+});

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

@@ -0,0 +1,220 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/ComboBox"], function () {
+    Common.UI.BordersModel = Backbone.Model.extend({
+        defaults: function () {
+            return {
+                value: null,
+                displayValue: null,
+                pxValue: null,
+                id: Common.UI.getId(),
+                offsety: undefined
+            };
+        }
+    });
+    Common.UI.BordersStore = Backbone.Collection.extend({
+        model: Common.UI.BordersModel
+    });
+    Common.UI.ComboBorderSize = Common.UI.ComboBox.extend(_.extend({
+        template: _.template(['<div class="input-group combobox combo-border-size input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">', '<div class="form-control" style="<%= style %>"></div>', '<div style="display: table-cell;"></div>', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', "<% _.each(items, function(item) { %>", '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">', "<span><%= item.displayValue %></span>", "<% if (item.offsety!==undefined) { %>", '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="right" style="background-position: 0 -<%= item.offsety %>px;">', "<% } %>", "</a></li>", "<% }); %>", "</ul>", "</div>"].join("")),
+        initialize: function (options) {
+            Common.UI.ComboBox.prototype.initialize.call(this, _.extend({
+                editable: false,
+                store: new Common.UI.BordersStore(),
+                data: [{
+                    displayValue: this.txtNoBorders,
+                    value: 0,
+                    pxValue: 0
+                },
+                {
+                    displayValue: "0.5 pt",
+                    value: 0.5,
+                    pxValue: 0.5,
+                    offsety: 0
+                },
+                {
+                    displayValue: "1 pt",
+                    value: 1,
+                    pxValue: 1,
+                    offsety: 20
+                },
+                {
+                    displayValue: "1.5 pt",
+                    value: 1.5,
+                    pxValue: 2,
+                    offsety: 40
+                },
+                {
+                    displayValue: "2.25 pt",
+                    value: 2.25,
+                    pxValue: 3,
+                    offsety: 60
+                },
+                {
+                    displayValue: "3 pt",
+                    value: 3,
+                    pxValue: 4,
+                    offsety: 80
+                },
+                {
+                    displayValue: "4.5 pt",
+                    value: 4.5,
+                    pxValue: 5,
+                    offsety: 100
+                },
+                {
+                    displayValue: "6 pt",
+                    value: 6,
+                    pxValue: 6,
+                    offsety: 120
+                }],
+                menuStyle: "min-width: 150px;"
+            },
+            options));
+        },
+        render: function (parentEl) {
+            Common.UI.ComboBox.prototype.render.call(this, parentEl);
+            return this;
+        },
+        itemClicked: function (e) {
+            var el = $(e.currentTarget).parent();
+            this._selectedItem = this.store.findWhere({
+                id: el.attr("id")
+            });
+            if (this._selectedItem) {
+                $(".selected", $(this.el)).removeClass("selected");
+                el.addClass("selected");
+                this.updateFormControl(this._selectedItem);
+                this.trigger("selected", this, _.extend({},
+                this._selectedItem.toJSON()), e);
+                e.preventDefault();
+            }
+        },
+        updateFormControl: function (record) {
+            var formcontrol = $(this.el).find(".form-control");
+            if (record.get("value") > 0) {
+                formcontrol[0].innerHTML = "";
+                formcontrol.removeClass("text").addClass("image");
+                formcontrol.css("background-position", "0 -" + record.get("offsety") + "px");
+            } else {
+                formcontrol[0].innerHTML = this.txtNoBorders;
+                formcontrol.removeClass("image").addClass("text");
+            }
+        },
+        setValue: function (value) {
+            this._selectedItem = (value === null || value === undefined) ? undefined : _.find(this.store.models, function (item) {
+                if (value < item.attributes.value + 0.01 && value > item.attributes.value - 0.01) {
+                    return true;
+                }
+            });
+            $(".selected", $(this.el)).removeClass("selected");
+            if (this._selectedItem) {
+                this.updateFormControl(this._selectedItem);
+                $("#" + this._selectedItem.get("id"), $(this.el)).addClass("selected");
+            } else {
+                var formcontrol = $(this.el).find(".form-control");
+                formcontrol[0].innerHTML = "";
+                formcontrol.removeClass("image").addClass("text");
+            }
+        },
+        txtNoBorders: "No Borders"
+    },
+    Common.UI.ComboBorderSize || {}));
+    Common.UI.ComboBorderSizeEditable = Common.UI.ComboBox.extend(_.extend({
+        template: _.template(['<span class="input-group combobox combo-border-size-editable input-group-nr <%= cls %>" id="<%= id %>" style="<%= style %>">', '<input type="text" class="form-control">', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', "<% _.each(items, function(item) { %>", '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem">', "<span><%= item.displayValue %></span>", "<% if (item.offsety!==undefined) { %>", '<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" align="right" style="background-position: 0 -<%= item.offsety %>px;">', "<% } %>", "</a></li>", "<% }); %>", "</ul>", "</span>"].join("")),
+        initialize: function (options) {
+            this.txtNoBorders = options.txtNoBorders || this.txtNoBorders;
+            Common.UI.ComboBox.prototype.initialize.call(this, _.extend({
+                editable: true,
+                store: new Common.UI.BordersStore(),
+                data: [{
+                    displayValue: this.txtNoBorders,
+                    value: 0,
+                    pxValue: 0
+                },
+                {
+                    displayValue: "0.5 pt",
+                    value: 0.5,
+                    pxValue: 0.5,
+                    offsety: 0
+                },
+                {
+                    displayValue: "1 pt",
+                    value: 1,
+                    pxValue: 1,
+                    offsety: 20
+                },
+                {
+                    displayValue: "1.5 pt",
+                    value: 1.5,
+                    pxValue: 2,
+                    offsety: 40
+                },
+                {
+                    displayValue: "2.25 pt",
+                    value: 2.25,
+                    pxValue: 3,
+                    offsety: 60
+                },
+                {
+                    displayValue: "3 pt",
+                    value: 3,
+                    pxValue: 4,
+                    offsety: 80
+                },
+                {
+                    displayValue: "4.5 pt",
+                    value: 4.5,
+                    pxValue: 5,
+                    offsety: 100
+                },
+                {
+                    displayValue: "6 pt",
+                    value: 6,
+                    pxValue: 6,
+                    offsety: 120
+                }],
+                menuStyle: "min-width: 150px;"
+            },
+            options));
+        },
+        render: function (parentEl) {
+            Common.UI.ComboBox.prototype.render.call(this, parentEl);
+            return this;
+        },
+        txtNoBorders: "No Borders"
+    },
+    Common.UI.ComboBorderSizeEditable || {}));
+});

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

@@ -0,0 +1,429 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView", "common/main/lib/component/Scroller"], function () {
+    Common.UI.ComboBoxModel = Backbone.Model.extend({
+        defaults: function () {
+            return {
+                id: Common.UI.getId(),
+                value: null,
+                displayValue: null
+            };
+        }
+    });
+    Common.UI.ComboBoxStore = Backbone.Collection.extend({
+        model: Common.UI.ComboBoxModel
+    });
+    Common.UI.ComboBox = Common.UI.BaseView.extend((function () {
+        return {
+            options: {
+                id: null,
+                cls: "",
+                style: "",
+                hint: false,
+                editable: true,
+                disabled: false,
+                menuCls: "",
+                menuStyle: "",
+                displayField: "displayValue",
+                valueField: "value"
+            },
+            template: _.template(['<span class="input-group combobox <%= cls %>" id="<%= id %>" style="<%= style %>">', '<input type="text" class="form-control">', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', "<% _.each(items, function(item) { %>", '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>', "<% }); %>", "</ul>", "</span>"].join("")),
+            initialize: function (options) {
+                Common.UI.BaseView.prototype.initialize.call(this, options);
+                var me = this,
+                el = $(this.el);
+                this.id = me.options.id || Common.UI.getId();
+                this.cls = me.options.cls;
+                this.style = me.options.style;
+                this.menuCls = me.options.menuCls;
+                this.menuStyle = me.options.menuStyle;
+                this.template = me.options.template || me.template;
+                this.hint = me.options.hint;
+                this.editable = me.options.editable;
+                this.disabled = me.options.disabled;
+                this.store = me.options.store || new Common.UI.ComboBoxStore();
+                this.displayField = me.options.displayField;
+                this.valueField = me.options.valueField;
+                me.rendered = me.options.rendered || false;
+                this.lastValue = null;
+                me.store.add(me.options.data);
+                if (me.options.el) {
+                    me.render();
+                }
+            },
+            render: function (parentEl) {
+                var me = this;
+                if (!me.rendered) {
+                    this.cmpEl = $(this.template({
+                        id: this.id,
+                        cls: this.cls,
+                        style: this.style,
+                        menuCls: this.menuCls,
+                        menuStyle: this.menuStyle,
+                        items: this.store.toJSON(),
+                        scope: me
+                    }));
+                    if (parentEl) {
+                        this.setElement(parentEl, false);
+                        parentEl.html(this.cmpEl);
+                    } else {
+                        $(this.el).html(this.cmpEl);
+                    }
+                } else {
+                    this.cmpEl = $(this.el);
+                }
+                if (!me.rendered) {
+                    var el = this.cmpEl;
+                    this._input = el.find("input");
+                    this._button = el.find(".btn");
+                    el.on("click", "a", _.bind(this.itemClicked, this));
+                    el.on("mousedown", "a", _.bind(this.itemMouseDown, this));
+                    if (this.editable) {
+                        el.on("change", "input", _.bind(this.onInputChanged, this));
+                        el.on("keydown", "input", _.bind(this.onInputKeyDown, this));
+                        el.on("click", ".form-control", _.bind(this.onEditableInputClick, this));
+                    } else {
+                        el.on("click", ".form-control", _.bind(this.onInputClick, this));
+                        this._input.attr("readonly", "readonly");
+                        this._input.attr("data-can-copy", false);
+                    }
+                    if (me.options.hint) {
+                        el.attr("data-toggle", "tooltip");
+                        el.tooltip({
+                            title: me.options.hint,
+                            placement: me.options.hintAnchor || "cursor"
+                        });
+                    }
+                    el.on("show.bs.dropdown", _.bind(me.onBeforeShowMenu, me));
+                    el.on("shown.bs.dropdown", _.bind(me.onAfterShowMenu, me));
+                    el.on("hide.bs.dropdown", _.bind(me.onBeforeHideMenu, me));
+                    el.on("hidden.bs.dropdown", _.bind(me.onAfterHideMenu, me));
+                    el.on("keydown.after.bs.dropdown", _.bind(me.onAfterKeydownMenu, me));
+                    Common.NotificationCenter.on("menumanager:hideall", _.bind(me.closeMenu, me));
+                    this.scroller = new Common.UI.Scroller({
+                        el: $(".dropdown-menu", me.cmpEl),
+                        minScrollbarLength: 40,
+                        scrollYMarginOffset: 30,
+                        includePadding: true
+                    });
+                    this.setDefaultSelection();
+                    this.listenTo(this.store, "reset", this.onResetItems);
+                }
+                me.rendered = true;
+                if (me.disabled) {
+                    me.setDisabled(me.disabled);
+                }
+                return this;
+            },
+            setData: function (data) {
+                this.store.reset([]);
+                this.store.add(data);
+                this.setRawValue("");
+                this.onResetItems();
+            },
+            openMenu: function (delay) {
+                var me = this;
+                _.delay(function () {
+                    me.cmpEl.addClass("open");
+                },
+                delay || 0);
+            },
+            closeMenu: function () {
+                this.cmpEl.removeClass("open");
+            },
+            isMenuOpen: function () {
+                return this.cmpEl.hasClass("open");
+            },
+            onBeforeShowMenu: function (e) {
+                this.trigger("show:before", this, e);
+                if (this.options.hint) {
+                    var tip = this.cmpEl.data("bs.tooltip");
+                    if (tip) {
+                        if (tip.dontShow === undefined) {
+                            tip.dontShow = true;
+                        }
+                        tip.hide();
+                    }
+                }
+            },
+            onAfterShowMenu: function (e) {
+                var $list = $(this.el).find("ul"),
+                $selected = $list.find("> li.selected");
+                if ($selected.length) {
+                    var itemTop = $selected.position().top,
+                    itemHeight = $selected.height(),
+                    listHeight = $list.height();
+                    if (itemTop < 0 || itemTop + itemHeight > listHeight) {
+                        $list.scrollTop($list.scrollTop() + itemTop + itemHeight - (listHeight / 2));
+                    }
+                }
+                if (this.scroller) {
+                    this.scroller.update();
+                }
+                this.trigger("show:after", this, e);
+            },
+            onBeforeHideMenu: function (e) {
+                this.trigger("hide:before", this, e);
+                if (Common.UI.Scroller.isMouseCapture()) {
+                    e.preventDefault();
+                }
+            },
+            onAfterHideMenu: function (e) {
+                this.cmpEl.find(".dropdown-toggle").blur();
+                this.trigger("hide:after", this, e);
+            },
+            onAfterKeydownMenu: function (e) {
+                if (e.keyCode == Common.UI.Keys.RETURN) {
+                    $(e.target).click();
+                    var me = this;
+                    if (this.rendered) {
+                        if (Common.Utils.isIE) {
+                            this._input.trigger("change", {
+                                onkeydown: true
+                            });
+                        } else {
+                            this._input.blur();
+                        }
+                    }
+                    return false;
+                } else {
+                    if (e.keyCode == Common.UI.Keys.ESC && this.isMenuOpen()) {
+                        this.closeMenu();
+                        this.onAfterHideMenu(e);
+                        return false;
+                    }
+                }
+            },
+            onInputKeyDown: function (e) {
+                var me = this;
+                if (e.keyCode == Common.UI.Keys.ESC) {
+                    this.closeMenu();
+                    this.onAfterHideMenu(e);
+                } else {
+                    if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) {
+                        if (!this.isMenuOpen()) {
+                            this.openMenu();
+                        }
+                        _.delay(function () {
+                            me._skipInputChange = true;
+                            me.cmpEl.find("ul li:first a").focus();
+                        },
+                        10);
+                    } else {
+                        me._skipInputChange = false;
+                    }
+                }
+            },
+            onInputChanged: function (e, extra) {
+                if (extra && extra.synthetic) {
+                    return;
+                }
+                if (this._skipInputChange) {
+                    this._skipInputChange = false;
+                    return;
+                }
+                var val = $(e.target).val(),
+                record = {};
+                if (this.lastValue === val) {
+                    if (extra && extra.onkeydown) {
+                        this.trigger("combo:blur", this, e);
+                    }
+                    return;
+                }
+                record[this.valueField] = val;
+                this.trigger("changed:before", this, record, e);
+                if (e.isDefaultPrevented()) {
+                    return;
+                }
+                var obj;
+                this._selectedItem = this.store.findWhere((obj = {},
+                obj[this.displayField] = val, obj));
+                if (this._selectedItem) {
+                    record = this._selectedItem.toJSON();
+                    $(".selected", $(this.el)).removeClass("selected");
+                    $("#" + this._selectedItem.get("id"), $(this.el)).addClass("selected");
+                }
+                this.trigger("changed:after", this, record, e);
+            },
+            onInputClick: function (e) {
+                if (this._button) {
+                    this._button.dropdown("toggle");
+                }
+                e.preventDefault();
+                e.stopPropagation();
+            },
+            onEditableInputClick: function (e) {
+                if (this.options.hint) {
+                    var tip = this.cmpEl.data("bs.tooltip");
+                    if (tip) {
+                        if (tip.dontShow === undefined) {
+                            tip.dontShow = true;
+                        }
+                        tip.hide();
+                    }
+                }
+                if (this.isMenuOpen() && e.which == 1) {
+                    e.stopPropagation();
+                }
+            },
+            setDefaultSelection: function () {
+                if (!this.rendered) {
+                    return;
+                }
+                var val = this._input.val(),
+                obj;
+                if (val) {
+                    this._selectedItem = this.store.findWhere((obj = {},
+                    obj[this.displayField] = val, obj));
+                    if (this._selectedItem) {
+                        $(".selected", $(this.el)).removeClass("selected");
+                        $("#" + this._selectedItem.get("id"), $(this.el)).addClass("selected");
+                    }
+                }
+            },
+            setDisabled: function (disabled) {
+                this.disabled = disabled;
+                if (!this.rendered) {
+                    return;
+                }
+                disabled ? this._input.attr("disabled", true) : this._input.removeAttr("disabled");
+                this.cmpEl.toggleClass("disabled", disabled);
+                this._button.toggleClass("disabled", disabled);
+            },
+            isDisabled: function () {
+                return this.disabled;
+            },
+            setRawValue: function (value) {
+                if (this.rendered) {
+                    this._input.val(value).trigger("change", {
+                        synthetic: true
+                    });
+                    this.lastValue = (value !== null && value !== undefined) ? value.toString() : value;
+                }
+            },
+            getRawValue: function () {
+                return this.rendered ? this._input.val() : null;
+            },
+            setValue: function (value) {
+                if (!this.rendered) {
+                    return;
+                }
+                var obj;
+                this._selectedItem = this.store.findWhere((obj = {},
+                obj[this.valueField] = value, obj));
+                $(".selected", $(this.el)).removeClass("selected");
+                if (this._selectedItem) {
+                    this.setRawValue(this._selectedItem.get(this.displayField));
+                    $("#" + this._selectedItem.get("id"), $(this.el)).addClass("selected");
+                } else {
+                    this.setRawValue(value);
+                }
+            },
+            getValue: function () {
+                if (!this.rendered) {
+                    return null;
+                }
+                if (this._selectedItem && !_.isUndefined(this._selectedItem.get(this.valueField))) {
+                    return this._selectedItem.get(this.valueField);
+                }
+                return this._input.val();
+            },
+            getDisplayValue: function (record) {
+                return Common.Utils.String.htmlEncode(record[this.displayField]);
+            },
+            getSelectedRecord: function () {
+                if (!this.rendered) {
+                    return null;
+                }
+                if (this._selectedItem && !_.isUndefined(this._selectedItem.get(this.valueField))) {
+                    return _.extend({},
+                    this._selectedItem.toJSON());
+                }
+                return null;
+            },
+            selectRecord: function (record) {
+                if (!this.rendered || !record) {
+                    return;
+                }
+                this._selectedItem = record;
+                $(".selected", $(this.el)).removeClass("selected");
+                this.setRawValue(this._selectedItem.get(this.displayField));
+                $("#" + this._selectedItem.get("id"), $(this.el)).addClass("selected");
+            },
+            itemClicked: function (e) {
+                var el = $(e.target).closest("li");
+                this._selectedItem = this.store.findWhere({
+                    id: el.attr("id")
+                });
+                if (this._selectedItem) {
+                    this.lastValue = this._selectedItem.get(this.displayField);
+                    this._input.val(this.lastValue).trigger("change", {
+                        synthetic: true
+                    });
+                    $(".selected", $(this.el)).removeClass("selected");
+                    el.addClass("selected");
+                    this.trigger("selected", this, _.extend({},
+                    this._selectedItem.toJSON()), e);
+                    e.preventDefault();
+                }
+                this._isMouseDownMenu = false;
+            },
+            itemMouseDown: function (e) {
+                if (e.which != 1) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    return false;
+                }
+                this._isMouseDownMenu = true;
+            },
+            onResetItems: function () {
+                $(this.el).find("ul").html(_.template(["<% _.each(items, function(item) { %>", '<li id="<%= item.id %>" data-value="<%= item.value %>"><a tabindex="-1" type="menuitem"><%= scope.getDisplayValue(item) %></a></li>', "<% }); %>"].join(""), {
+                    items: this.store.toJSON(),
+                    scope: this
+                }));
+                if (!_.isUndefined(this.scroller)) {
+                    this.scroller.destroy();
+                    delete this.scroller;
+                }
+                this.scroller = new Common.UI.Scroller({
+                    el: $(".dropdown-menu", this.cmpEl),
+                    minScrollbarLength: 40,
+                    scrollYMarginOffset: 30,
+                    includePadding: true
+                });
+            }
+        };
+    })());
+});

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

@@ -0,0 +1,274 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+var FONT_TYPE_RECENT = 4;
+define(["common/main/lib/component/ComboBox"], function () {
+    Common.UI.ComboBoxFonts = Common.UI.ComboBox.extend((function () {
+        var iconWidth = 302,
+        iconHeight = FONT_THUMBNAIL_HEIGHT || 26,
+        isRetina = window.devicePixelRatio > 1,
+        thumbCanvas = document.createElement("canvas"),
+        thumbContext = thumbCanvas.getContext("2d"),
+        thumbPath = "../../../sdk/Common/Images/fonts_thumbnail.png",
+        thumbPath2x = "../../../sdk/Common/Images/fonts_thumbnail@2x.png";
+        thumbCanvas.height = isRetina ? iconHeight * 2 : iconHeight;
+        thumbCanvas.width = isRetina ? iconWidth * 2 : iconWidth;
+        return {
+            template: _.template(['<div class="input-group combobox fonts <%= cls %>" id="<%= id %>" style="<%= style %>">', '<input type="text" class="form-control">', '<div style="display: table-cell;"></div>', '<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>', '<ul class="dropdown-menu <%= menuCls %>" style="<%= menuStyle %>" role="menu">', '<li class="divider">', "<% _.each(items, function(item) { %>", '<li id="<%= item.id %>">', '<a class="font-item" tabindex="-1" type="menuitem" style="display: block;">', '<img src="<%= scope.getImageUri(item) %>" width="<%= scope.getImageWidth() %>" height="<%= scope.getImageHeight() %>" style="vertical-align: middle;margin: 0 0 0 -10px;">', "</a>", "</li>", "<% }); %>", "</ul>", "</div>"].join("")),
+            initialize: function (options) {
+                Common.UI.ComboBox.prototype.initialize.call(this, _.extend(options, {
+                    displayField: "name"
+                }));
+                this.recent = _.isNumber(options.recent) ? options.recent : 3;
+                Common.NotificationCenter.on("fonts:change", _.bind(this.onApiChangeFont, this));
+                Common.NotificationCenter.on("fonts:load", _.bind(this.fillFonts, this));
+            },
+            render: function (parentEl) {
+                var oldRawValue = null;
+                if (!_.isUndefined(this._input)) {
+                    oldRawValue = this._input.val();
+                }
+                Common.UI.ComboBox.prototype.render.call(this, parentEl);
+                this.setRawValue(oldRawValue);
+                this._input.on("keyup", _.bind(this.onInputKeyUp, this));
+                this._input.on("keydown", _.bind(this.onInputKeyDown, this));
+                this.scroller.update({
+                    alwaysVisibleY: true
+                });
+                return this;
+            },
+            onInputKeyUp: function (e) {
+                if (e.keyCode != Common.UI.Keys.RETURN) {
+                    this.selectCandidate();
+                }
+            },
+            onInputKeyDown: function (e) {
+                var me = this;
+                if (e.keyCode == Common.UI.Keys.ESC) {
+                    this.closeMenu();
+                    this.onAfterHideMenu(e);
+                } else {
+                    if (e.keyCode != Common.UI.Keys.RETURN && e.keyCode != Common.UI.Keys.CTRL && e.keyCode != Common.UI.Keys.SHIFT && e.keyCode != Common.UI.Keys.ALT) {
+                        if (!this.isMenuOpen()) {
+                            this.openMenu();
+                        }
+                        if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) {
+                            _.delay(function () {
+                                var selected = me.cmpEl.find("ul li.selected a");
+                                if (selected.length <= 0) {
+                                    selected = me.cmpEl.find("ul li:first a");
+                                }
+                                me._skipInputChange = true;
+                                selected.focus();
+                            },
+                            10);
+                        } else {
+                            me._skipInputChange = false;
+                        }
+                    }
+                }
+            },
+            onInputChanged: function (e, extra) {
+                if (extra && extra.synthetic) {
+                    return;
+                }
+                if (this._skipInputChange) {
+                    this._skipInputChange = false;
+                    return;
+                }
+                if (this._isMouseDownMenu) {
+                    this._isMouseDownMenu = false;
+                    return;
+                }
+                var val = $(e.target).val(),
+                record = {};
+                if (this.lastValue === val) {
+                    if (extra && extra.onkeydown) {
+                        this.trigger("combo:blur", this, e);
+                    }
+                    return;
+                }
+                record[this.valueField] = val;
+                this.trigger("changed:before", this, record, e);
+                if (e.isDefaultPrevented()) {
+                    return;
+                }
+                if (this._selectedItem) {
+                    record[this.valueField] = this._selectedItem.get(this.displayField);
+                    this.setRawValue(record[this.valueField]);
+                    this.trigger("selected", this, _.extend({},
+                    this._selectedItem.toJSON()), e);
+                    this.closeMenu();
+                }
+                this.trigger("changed:after", this, record, e);
+            },
+            getImageUri: function (opts) {
+                if (opts.cloneid) {
+                    var img = $(this.el).find("ul > li#" + opts.cloneid + " img");
+                    return img != null ? img[0].src : undefined;
+                }
+                if (isRetina) {
+                    thumbContext.clearRect(0, 0, iconWidth * 2, iconHeight * 2);
+                    thumbContext.drawImage(this.spriteThumbs, 0, -FONT_THUMBNAIL_HEIGHT * 2 * opts.imgidx);
+                } else {
+                    thumbContext.clearRect(0, 0, iconWidth, iconHeight);
+                    thumbContext.drawImage(this.spriteThumbs, 0, -FONT_THUMBNAIL_HEIGHT * opts.imgidx);
+                }
+                return thumbCanvas.toDataURL();
+            },
+            getImageWidth: function () {
+                return iconWidth;
+            },
+            getImageHeight: function () {
+                return iconHeight;
+            },
+            loadSprite: function (callback) {
+                if (callback) {
+                    this.spriteThumbs = new Image();
+                    this.spriteThumbs.onload = callback;
+                    this.spriteThumbs.src = (window.devicePixelRatio > 1) ? thumbPath2x : thumbPath;
+                }
+            },
+            fillFonts: function (store, select) {
+                var me = this;
+                this.loadSprite(function () {
+                    me.store.set(store.toJSON());
+                    me.rendered = false;
+                    me.render($(me.el));
+                    me._fontsArray = me.store.toJSON();
+                    if (me.recent > 0) {
+                        me.store.on("add", me.onInsertItem, me);
+                        me.store.on("remove", me.onRemoveItem, me);
+                    }
+                });
+            },
+            onApiChangeFont: function (font) {
+                var name = (_.isFunction(font.get_Name) ? font.get_Name() : font.asc_getName());
+                if (this.getRawValue() !== name) {
+                    var record = this.store.findWhere({
+                        name: name
+                    });
+                    $(".selected", $(this.el)).removeClass("selected");
+                    if (record) {
+                        this.setRawValue(record.get(this.displayField));
+                        var itemNode = $("#" + record.get("id"), $(this.el)),
+                        menuNode = $("ul.dropdown-menu", this.cmpEl);
+                        if (itemNode && menuNode) {
+                            itemNode.addClass("selected");
+                            if (this.recent <= 0) {
+                                menuNode.scrollTop(itemNode.offset().top - menuNode.offset().top);
+                            }
+                        }
+                    } else {
+                        this.setRawValue(name);
+                    }
+                }
+            },
+            itemClicked: function (e) {
+                var el = $(e.target).closest("li");
+                var record = this.store.findWhere({
+                    id: el.attr("id")
+                });
+                if (record.get("type") != FONT_TYPE_RECENT && !this.store.findWhere({
+                    name: record.get("name"),
+                    type: FONT_TYPE_RECENT
+                })) {
+                    var fonts = this.store.where({
+                        type: FONT_TYPE_RECENT
+                    });
+                    if (! (fonts.length < this.recent)) {
+                        this.store.remove(fonts[0]);
+                    }
+                    var new_record = record.clone();
+                    new_record.set({
+                        "type": FONT_TYPE_RECENT,
+                        "id": Common.UI.getId(),
+                        cloneid: record.id
+                    });
+                    this.store.add(new_record);
+                }
+                Common.UI.ComboBox.prototype.itemClicked.apply(this, arguments);
+            },
+            onInsertItem: function (item) {
+                $(this.el).find("ul").prepend(_.template(['<li id="<%= item.id %>">', '<a class="font-item" tabindex="-1" type="menuitem" style="display: block;">', '<img src="<%= scope.getImageUri(item) %>" width="<%= scope.getImageWidth() %>" height="<%= scope.getImageHeight() %>" style="vertical-align: middle;margin: 0 0 0 -10px;">', "</a>", "</li>"].join(""), {
+                    item: item.attributes,
+                    scope: this
+                }));
+            },
+            onRemoveItem: function (item, store, opts) {
+                $(this.el).find("ul > li#" + item.id).remove();
+            },
+            onAfterShowMenu: function (e) {
+                if (this.recent > 0) {
+                    if (this.scroller && !this._scrollerIsInited) {
+                        this.scroller.update();
+                        this._scrollerIsInited = true;
+                    }
+                    $(this.el).find("ul").scrollTop(0);
+                    this.trigger("show:after", this, e);
+                } else {
+                    Common.UI.ComboBox.prototype.onAfterShowMenu.apply(this, arguments);
+                }
+            },
+            selectCandidate: function () {
+                var me = this,
+                inputVal = this._input.val().toLowerCase();
+                if (!this._fontsArray) {
+                    this._fontsArray = this.store.toJSON();
+                }
+                var font = _.find(this._fontsArray, function (font) {
+                    return (font[me.displayField].toLowerCase().indexOf(inputVal) == 0);
+                });
+                if (font) {
+                    this._selectedItem = this.store.findWhere({
+                        id: font.id
+                    });
+                }
+                $(".selected", $(this.el)).removeClass("selected");
+                if (this._selectedItem) {
+                    var itemNode = $("#" + this._selectedItem.get("id"), $(this.el)),
+                    menuEl = $("ul[role=menu]", $(this.el));
+                    if (itemNode.length > 0 && menuEl.length > 0) {
+                        itemNode.addClass("selected");
+                        var itemTop = itemNode.position().top,
+                        menuTop = menuEl.scrollTop();
+                        if (itemTop != 0) {
+                            menuEl.scrollTop(menuTop + itemTop);
+                        }
+                    }
+                }
+            }
+        };
+    })());
+});

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

@@ -1,322 +1,332 @@
-/*
- * (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);
-    }
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView", "common/main/lib/component/DataView"], function () {
+    Common.UI.ComboDataView = Common.UI.BaseView.extend({
+        options: {
+            id: null,
+            cls: "",
+            style: "",
+            hint: false,
+            itemWidth: 80,
+            itemHeight: 40,
+            menuMaxHeight: 300,
+            enableKeyEvents: false,
+            beforeOpenHandler: null
+        },
+        template: _.template(['<div id="<%= id %>" class="combo-dataview <%= cls %>" style="<%= style %>">', '<div class="view"></div> ', '<div class="button"></div> ', "</div>"].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            this.id = this.options.id || Common.UI.getId();
+            this.cls = this.options.cls;
+            this.style = this.options.style;
+            this.hint = this.options.hint;
+            this.store = this.options.store || new Common.UI.DataViewStore();
+            this.itemWidth = this.options.itemWidth;
+            this.itemHeight = this.options.itemHeight;
+            this.menuMaxHeight = this.options.menuMaxHeight;
+            this.beforeOpenHandler = this.options.beforeOpenHandler;
+            this.rootWidth = 0;
+            this.rootHeight = 0;
+            this.rendered = false;
+            this.fieldPicker = new Common.UI.DataView({
+                cls: "field-picker",
+                allowScrollbar: false,
+                itemTemplate: _.template(['<div class="style" id="<%= id %>">', '<img src="<%= imageUrl %>" width="' + this.itemWidth + '" height="' + this.itemHeight + '"/>', '<% if (typeof title !== "undefined") {%>', '<span class="title"><%= title %></span>', "<% } %>", "</div>"].join(""))
+            });
+            this.openButton = new Common.UI.Button({
+                cls: "open-menu",
+                menu: new Common.UI.Menu({
+                    menuAlign: "tl-bl",
+                    offset: [0, 3],
+                    items: [{
+                        template: _.template('<div class="menu-picker-container"></div>')
+                    }]
+                })
+            });
+            this.menuPicker = new Common.UI.DataView({
+                cls: "menu-picker",
+                parentMenu: this.openButton.menu,
+                restoreHeight: this.menuMaxHeight,
+                style: "max-height: " + this.menuMaxHeight + "px;",
+                enableKeyEvents: this.options.enableKeyEvents,
+                itemTemplate: _.template(['<div class="style" id="<%= id %>">', '<img src="<%= imageUrl %>" width="' + this.itemWidth + '" height="' + this.itemHeight + '"/>', '<% if (typeof title !== "undefined") {%>', '<span class="title"><%= title %></span>', "<% } %>", "</div>"].join(""))
+            });
+            setInterval(_.bind(this.checkSize, this), 500);
+            if (this.options.el) {
+                this.render();
+            }
+        },
+        render: function (parentEl) {
+            if (!this.rendered) {
+                var me = this;
+                me.trigger("render:before", me);
+                me.cmpEl = $(me.el);
+                var templateEl = me.template({
+                    id: me.id,
+                    cls: me.cls,
+                    style: me.style
+                });
+                if (parentEl) {
+                    me.setElement(parentEl, false);
+                    me.cmpEl = $(templateEl);
+                    parentEl.html(me.cmpEl);
+                } else {
+                    me.cmpEl.html(templateEl);
+                }
+                me.rootWidth = me.cmpEl.width();
+                me.rootHeight = me.cmpEl.height();
+                me.fieldPicker.render($(".view", me.cmpEl));
+                me.openButton.render($(".button", me.cmpEl));
+                me.menuPicker.render($(".menu-picker-container", me.cmpEl));
+                if (me.openButton.menu.cmpEl) {
+                    if (me.openButton.menu.cmpEl) {
+                        me.openButton.menu.menuAlignEl = me.cmpEl;
+                        me.openButton.menu.cmpEl.css("min-width", me.itemWidth);
+                        me.openButton.menu.on("show:before", _.bind(me.onBeforeShowMenu, me));
+                        me.openButton.menu.on("show:after", _.bind(me.onAfterShowMenu, me));
+                        me.openButton.cmpEl.on("hide.bs.dropdown", _.bind(me.onBeforeHideMenu, me));
+                        me.openButton.cmpEl.on("hidden.bs.dropdown", _.bind(me.onAfterHideMenu, me));
+                    }
+                }
+                if (me.options.hint) {
+                    me.cmpEl.attr("data-toggle", "tooltip");
+                    me.cmpEl.tooltip({
+                        title: me.options.hint,
+                        placement: me.options.hintAnchor || "cursor"
+                    });
+                }
+                me.fieldPicker.on("item:select", _.bind(me.onFieldPickerSelect, me));
+                me.menuPicker.on("item:select", _.bind(me.onMenuPickerSelect, me));
+                me.fieldPicker.on("item:click", _.bind(me.onFieldPickerClick, me));
+                me.menuPicker.on("item:click", _.bind(me.onMenuPickerClick, me));
+                me.onResize();
+                me.rendered = true;
+                me.trigger("render:after", me);
+            }
+            return this;
+        },
+        checkSize: function () {
+            if (this.cmpEl) {
+                var width = this.cmpEl.width(),
+                height = this.cmpEl.height();
+                if (this.rootWidth != width || this.rootHeight != height) {
+                    this.rootWidth = width;
+                    this.rootHeight = height;
+                    this.onResize();
+                }
+            }
+        },
+        onResize: function () {
+            if (this.openButton) {
+                var button = $("button", this.openButton.cmpEl);
+                button && button.css({
+                    width: $(".button", this.cmpEl).width(),
+                    height: $(".button", this.cmpEl).height()
+                });
+                this.openButton.menu.hide();
+                var picker = this.menuPicker;
+                if (picker) {
+                    var record = picker.getSelectedRec();
+                    if (record) {
+                        record = record[0];
+                        this.fillComboView(record || picker.store.at(0), !!record, true);
+                    }
+                }
+            }
+            if (!this.isSuspendEvents) {
+                this.trigger("resize", this);
+            }
+        },
+        onBeforeShowMenu: function (e) {
+            var me = this;
+            if (_.isFunction(me.beforeOpenHandler)) {
+                me.beforeOpenHandler(me, e);
+            } else {
+                if (me.openButton.menu.cmpEl) {
+                    var itemMargin = 0;
+                    try {
+                        var itemEl = $($(".dropdown-menu .dataview.inner .style", me.cmpEl)[0]);
+                        itemMargin = itemEl ? (parseInt(itemEl.css("margin-left")) + parseInt(itemEl.css("margin-right"))) : 0;
+                    } catch(e) {}
+                    me.openButton.menu.cmpEl.css({
+                        "width": Math.round((me.cmpEl.width() + (itemMargin * me.fieldPicker.store.length)) / me.itemWidth - 0.2) * (me.itemWidth + itemMargin),
+                        "min-height": this.cmpEl.height()
+                    });
+                }
+            }
+            if (me.options.hint) {
+                var tip = me.cmpEl.data("bs.tooltip");
+                if (tip) {
+                    if (tip.dontShow === undefined) {
+                        tip.dontShow = true;
+                    }
+                    tip.hide();
+                }
+            }
+        },
+        onBeforeHideMenu: function (e) {
+            this.trigger("hide:before", this, e);
+            if (Common.UI.Scroller.isMouseCapture()) {
+                e.preventDefault();
+            }
+        },
+        onAfterShowMenu: function (e) {
+            var me = this;
+            if (me.menuPicker.scroller) {
+                me.menuPicker.scroller.update({
+                    includePadding: true,
+                    suppressScrollX: true,
+                    alwaysVisibleY: true
+                });
+            }
+        },
+        onAfterHideMenu: function (e) {
+            this.trigger("hide:after", this, e);
+        },
+        onFieldPickerSelect: function (picker, item, record) {},
+        onMenuPickerSelect: function (picker, item, record) {
+            if (this.disabled) {
+                return;
+            }
+            this.fillComboView(record, false);
+            if (record && !this.isSuspendEvents) {
+                this.trigger("select", this, record);
+            }
+        },
+        onFieldPickerClick: function (dataView, itemView, record) {
+            if (this.disabled) {
+                return;
+            }
+            if (!this.isSuspendEvents) {
+                this.trigger("click", this, record);
+            }
+            if (this.options.hint) {
+                var tip = this.cmpEl.data("bs.tooltip");
+                if (tip) {
+                    if (tip.dontShow === undefined) {
+                        tip.dontShow = true;
+                    }
+                    tip.hide();
+                }
+            }
+        },
+        onMenuPickerClick: function (dataView, itemView, record) {
+            if (this.disabled) {
+                return;
+            }
+            if (!this.isSuspendEvents) {
+                this.trigger("click", this, record);
+            }
+        },
+        setDisabled: function (disabled) {
+            this.disabled = disabled;
+            if (!this.rendered) {
+                return;
+            }
+            this.cmpEl.toggleClass("disabled", disabled);
+            $("button", this.openButton.cmpEl).toggleClass("disabled", disabled);
+            this.fieldPicker.setDisabled(disabled);
+        },
+        isDisabled: function () {
+            return this.disabled;
+        },
+        fillComboView: function (record, forceSelect, forceFill) {
+            if (!_.isUndefined(record) && record instanceof Backbone.Model) {
+                var me = this,
+                store = me.menuPicker.store,
+                fieldPickerEl = $(me.fieldPicker.el);
+                if (store) {
+                    if (forceFill || !me.fieldPicker.store.findWhere({
+                        "id": record.get("id")
+                    })) {
+                        if (me.itemMarginLeft === undefined) {
+                            var div = $($(this.menuPicker.el).find(".inner > div:not(.grouped-data):not(.ps-scrollbar-x-rail):not(.ps-scrollbar-y-rail)")[0]);
+                            if (div.length > 0) {
+                                me.itemMarginLeft = parseInt(div.css("margin-left"));
+                                me.itemMarginRight = parseInt(div.css("margin-right"));
+                                me.itemPaddingLeft = parseInt(div.css("padding-left"));
+                                me.itemPaddingRight = parseInt(div.css("padding-right"));
+                                me.itemBorderLeft = parseInt(div.css("border-left-width"));
+                                me.itemBorderRight = parseInt(div.css("border-right-width"));
+                            }
+                        }
+                        me.fieldPicker.store.reset([]);
+                        var indexRec = store.indexOf(record),
+                        countRec = store.length,
+                        maxViewCount = Math.floor((fieldPickerEl.width()) / (me.itemWidth + (me.itemMarginLeft || 0) + (me.itemMarginRight || 0) + (me.itemPaddingLeft || 0) + (me.itemPaddingRight || 0) + (me.itemBorderLeft || 0) + (me.itemBorderRight || 0))),
+                        newStyles = [];
+                        if (fieldPickerEl.height() / me.itemHeight > 2) {
+                            maxViewCount *= Math.floor(fieldPickerEl.height() / me.itemHeight);
+                        }
+                        if (indexRec < 0) {
+                            return;
+                        }
+                        indexRec = Math.floor(indexRec / maxViewCount) * maxViewCount;
+                        for (var index = indexRec, viewCount = 0; index < countRec && viewCount < maxViewCount; index++, viewCount++) {
+                            newStyles.push(store.at(index));
+                        }
+                        me.fieldPicker.store.add(newStyles);
+                    }
+                    if (forceSelect) {
+                        var selectRecord = me.fieldPicker.store.findWhere({
+                            "id": record.get("id")
+                        });
+                        if (selectRecord) {
+                            me.suspendEvents();
+                            me.fieldPicker.selectRecord(selectRecord, true);
+                            me.resumeEvents();
+                        }
+                    }
+                }
+            }
+        },
+        selectByIndex: function (index) {
+            if (index < 0) {
+                this.fieldPicker.deselectAll();
+            }
+            this.menuPicker.selectByIndex(index);
+        },
+        setItemWidth: function (width) {
+            if (this.itemWidth != width) {
+                this.itemWidth = window.devicePixelRatio > 1 ? width / 2 : width;
+            }
+        },
+        setItemHeight: function (height) {
+            if (this.itemHeight != height) {
+                this.itemHeight = window.devicePixelRatio > 1 ? height / 2 : height;
+            }
+        }
+    });
 });

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

@@ -0,0 +1,506 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView", "common/main/lib/component/Scroller"], function () {
+    Common.UI.DataViewGroupModel = Backbone.Model.extend({
+        defaults: function () {
+            return {
+                id: Common.UI.getId(),
+                caption: ""
+            };
+        }
+    });
+    Common.UI.DataViewGroupStore = Backbone.Collection.extend({
+        model: Common.UI.DataViewGroupModel
+    });
+    Common.UI.DataViewModel = Backbone.Model.extend({
+        defaults: function () {
+            return {
+                id: Common.UI.getId(),
+                selected: false,
+                allowSelected: true,
+                value: null
+            };
+        }
+    });
+    Common.UI.DataViewStore = Backbone.Collection.extend({
+        model: Common.UI.DataViewModel
+    });
+    Common.UI.DataViewItem = Common.UI.BaseView.extend({
+        options: {},
+        template: _.template(['<div id="<%= id %>"><%= value %></div>'].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this;
+            me.template = me.options.template || me.template;
+            me.listenTo(me.model, "change", me.render);
+            me.listenTo(me.model, "change:selected", me.onSelectChange);
+            me.listenTo(me.model, "remove", me.remove);
+        },
+        render: function () {
+            if (_.isUndefined(this.model.id)) {
+                return this;
+            }
+            var el = $(this.el);
+            el.html(this.template(this.model.toJSON()));
+            el.toggleClass("selected", this.model.get("selected") && this.model.get("allowSelected"));
+            el.off("click").on("click", _.bind(this.onClick, this));
+            el.off("dblclick").on("dblclick", _.bind(this.onDblClick, this));
+            if (!_.isUndefined(this.model.get("cls"))) {
+                el.addClass(this.model.get("cls"));
+            }
+            this.trigger("change", this, this.model);
+            return this;
+        },
+        remove: function () {
+            this.stopListening(this.model);
+            this.trigger("remove", this, this.model);
+            Common.UI.BaseView.prototype.remove.call(this);
+        },
+        onClick: function (e) {
+            this.trigger("click", this, this.model, e);
+        },
+        onDblClick: function (e) {
+            this.trigger("dblclick", this, this.model, e);
+        },
+        onSelectChange: function (model, selected) {
+            this.trigger("select", this, model, selected);
+        }
+    });
+    Common.UI.DataView = Common.UI.BaseView.extend({
+        options: {
+            multiSelect: false,
+            handleSelect: true,
+            enableKeyEvents: true,
+            keyMoveDirection: "both",
+            restoreHeight: 0,
+            emptyText: "",
+            listenStoreEvents: true,
+            allowScrollbar: true
+        },
+        template: _.template(['<div class="dataview inner" style="<%= style %>">', "<% _.each(groups, function(group) { %>", '<div class="grouped-data" id="<%= group.id %>">', '<div class="group-description">', "<span><b><%= group.caption %></b></span>", "</div>", '<div class="group-items-container">', "</div>", "</div>", "<% }); %>", "</div>"].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this;
+            me.template = me.options.template || me.template;
+            me.store = me.options.store || new Common.UI.DataViewStore();
+            me.groups = me.options.groups || null;
+            me.itemTemplate = me.options.itemTemplate || null;
+            me.multiSelect = me.options.multiSelect;
+            me.handleSelect = me.options.handleSelect;
+            me.parentMenu = me.options.parentMenu;
+            me.enableKeyEvents = me.options.enableKeyEvents;
+            me.style = me.options.style || "";
+            me.emptyText = me.options.emptyText || "";
+            me.listenStoreEvents = (me.options.listenStoreEvents !== undefined) ? me.options.listenStoreEvents : true;
+            me.allowScrollbar = (me.options.allowScrollbar !== undefined) ? me.options.allowScrollbar : true;
+            me.rendered = false;
+            me.dataViewItems = [];
+            if (me.options.keyMoveDirection == "vertical") {
+                me.moveKeys = [Common.UI.Keys.UP, Common.UI.Keys.DOWN];
+            } else {
+                if (me.options.keyMoveDirection == "horizontal") {
+                    me.moveKeys = [Common.UI.Keys.LEFT, Common.UI.Keys.RIGHT];
+                } else {
+                    me.moveKeys = [Common.UI.Keys.UP, Common.UI.Keys.DOWN, Common.UI.Keys.LEFT, Common.UI.Keys.RIGHT];
+                }
+            }
+            if (me.options.el) {
+                me.render();
+            }
+        },
+        render: function (parentEl) {
+            var me = this;
+            this.trigger("render:before", this);
+            this.cmpEl = $(this.el);
+            if (parentEl) {
+                this.setElement(parentEl, false);
+                this.cmpEl = $(this.template({
+                    groups: me.groups ? me.groups.toJSON() : null,
+                    style: me.style
+                }));
+                parentEl.html(this.cmpEl);
+            } else {
+                this.cmpEl.html(this.template({
+                    groups: me.groups ? me.groups.toJSON() : null,
+                    style: me.style
+                }));
+            }
+            if (!this.rendered) {
+                if (this.listenStoreEvents) {
+                    this.listenTo(this.store, "add", this.onAddItem);
+                    this.listenTo(this.store, "reset", this.onResetItems);
+                }
+                this.onResetItems();
+                if (this.parentMenu) {
+                    this.cmpEl.closest("li").css("height", "100%");
+                    this.cmpEl.css("height", "100%");
+                    this.parentMenu.on("show:after", _.bind(this.alignPosition, this));
+                }
+                if (this.enableKeyEvents && this.parentMenu && this.handleSelect) {
+                    this.parentMenu.on("show:after", function () {
+                        me.showLastSelected();
+                        Common.NotificationCenter.trigger("dataview:focus");
+                    });
+                    this.parentMenu.on("hide:after", function () {
+                        Common.NotificationCenter.trigger("dataview:blur");
+                    });
+                }
+            }
+            if (_.isUndefined(this.scroller) && this.allowScrollbar) {
+                this.scroller = new Common.UI.Scroller({
+                    el: $(this.el).find(".inner").andSelf().filter(".inner"),
+                    useKeyboard: this.enableKeyEvents && !this.handleSelect,
+                    minScrollbarLength: 40
+                });
+            }
+            var modalParents = this.cmpEl.closest(".asc-window");
+            if (modalParents.length > 0) {
+                this.tipZIndex = parseInt(modalParents.css("z-index")) + 10;
+            }
+            this.rendered = true;
+            this.cmpEl.on("click", function (e) {
+                if (/dataview/.test(e.target.className)) {
+                    return false;
+                }
+            });
+            this.trigger("render:after", this);
+            return this;
+        },
+        setStore: function (store) {
+            if (store) {
+                this.stopListening(this.store);
+                this.store = store;
+                if (this.listenStoreEvents) {
+                    this.listenTo(this.store, "add", this.onAddItem);
+                    this.listenTo(this.store, "reset", this.onResetItems);
+                }
+            }
+        },
+        selectRecord: function (record, suspendEvents) {
+            if (!this.handleSelect) {
+                return;
+            }
+            if (suspendEvents) {
+                this.suspendEvents();
+            }
+            if (!this.multiSelect) {
+                _.each(this.store.where({
+                    selected: true
+                }), function (rec) {
+                    rec.set({
+                        selected: false
+                    });
+                });
+                if (record) {
+                    record.set({
+                        selected: true
+                    });
+                }
+            } else {
+                if (record) {
+                    record.set({
+                        selected: !record.get("selected")
+                    });
+                }
+            }
+            if (suspendEvents) {
+                this.resumeEvents();
+            }
+        },
+        selectByIndex: function (index, suspendEvents) {
+            if (this.store.length > 0 && index > -1 && index < this.store.length) {
+                this.selectRecord(this.store.at(index), suspendEvents);
+            }
+        },
+        deselectAll: function (suspendEvents) {
+            if (suspendEvents) {
+                this.suspendEvents();
+            }
+            _.each(this.store.where({
+                selected: true
+            }), function (record) {
+                record.set({
+                    selected: false
+                });
+            });
+            if (suspendEvents) {
+                this.resumeEvents();
+            }
+        },
+        getSelectedRec: function () {
+            if (this.multiSelect) {
+                var items = [];
+                _.each(this.store.where({
+                    selected: true
+                }), function (rec) {
+                    items.push(rec);
+                });
+                return items;
+            }
+            return this.store.where({
+                selected: true
+            });
+        },
+        onAddItem: function (record, index, opts) {
+            var view = new Common.UI.DataViewItem({
+                template: this.itemTemplate,
+                model: record
+            });
+            if (view) {
+                var innerEl = $(this.el).find(".inner").andSelf().filter(".inner");
+                if (this.groups && this.groups.length > 0) {
+                    var group = this.groups.findWhere({
+                        id: record.get("group")
+                    });
+                    if (group) {
+                        innerEl = innerEl.find("#" + group.id + " " + ".group-items-container");
+                    }
+                }
+                if (innerEl) {
+                    if (opts && opts.at == 0) {
+                        innerEl.prepend(view.render().el);
+                    } else {
+                        innerEl.append(view.render().el);
+                    }
+                    innerEl.find(".empty-text").remove();
+                    this.dataViewItems.push(view);
+                    if (record.get("tip")) {
+                        var view_el = $(view.el);
+                        view_el.attr("data-toggle", "tooltip");
+                        view_el.tooltip({
+                            title: record.get("tip"),
+                            placement: "cursor",
+                            zIndex: this.tipZIndex
+                        });
+                    }
+                    this.listenTo(view, "change", this.onChangeItem);
+                    this.listenTo(view, "remove", this.onRemoveItem);
+                    this.listenTo(view, "click", this.onClickItem);
+                    this.listenTo(view, "dblclick", this.onDblClickItem);
+                    this.listenTo(view, "select", this.onSelectItem);
+                    if (!this.isSuspendEvents) {
+                        this.trigger("item:add", this, view, record);
+                    }
+                }
+            }
+        },
+        onResetItems: function () {
+            $(this.el).html(this.template({
+                groups: this.groups ? this.groups.toJSON() : null,
+                style: this.style
+            }));
+            if (!_.isUndefined(this.scroller)) {
+                this.scroller.destroy();
+                delete this.scroller;
+            }
+            if (this.store.length < 1 && this.emptyText.length > 0) {
+                $(this.el).find(".inner").andSelf().filter(".inner").append('<table class="empty-text"><tr><td>' + this.emptyText + "</td></tr></table>");
+            }
+            _.each(this.dataViewItems, function (item) {
+                this.stopListening(item);
+                item.stopListening(item.model);
+            },
+            this);
+            this.dataViewItems = [];
+            this.store.each(this.onAddItem, this);
+            if (this.allowScrollbar) {
+                this.scroller = new Common.UI.Scroller({
+                    el: $(this.el).find(".inner").andSelf().filter(".inner"),
+                    useKeyboard: this.enableKeyEvents && !this.handleSelect,
+                    minScrollbarLength: 40
+                });
+            }
+            this.attachKeyEvents();
+        },
+        onChangeItem: function (view, record) {
+            if (!this.isSuspendEvents) {
+                this.trigger("item:change", this, view, record);
+            }
+        },
+        onRemoveItem: function (view, record) {
+            this.stopListening(view);
+            view.stopListening();
+            if (this.store.length < 1 && this.emptyText.length > 0) {
+                var el = $(this.el).find(".inner").andSelf().filter(".inner");
+                if (el.find(".empty-text").length <= 0) {
+                    el.append('<table class="empty-text"><tr><td>' + this.emptyText + "</td></tr></table>");
+                }
+            }
+            for (var i = 0; i < this.dataViewItems.length; i++) {
+                if (_.isEqual(view, this.dataViewItems[i])) {
+                    this.dataViewItems.splice(i, 1);
+                    break;
+                }
+            }
+            if (!this.isSuspendEvents) {
+                this.trigger("item:remove", this, view, record);
+            }
+        },
+        onClickItem: function (view, record, e) {
+            if (this.disabled) {
+                return;
+            }
+            window._event = e;
+            this.selectRecord(record);
+            this.lastSelectedRec = undefined;
+            var tip = view.$el.data("bs.tooltip");
+            if (tip) {
+                tip.hide();
+            }
+            if (!this.isSuspendEvents) {
+                this.trigger("item:click", this, view, record, e);
+            }
+        },
+        onDblClickItem: function (view, record, e) {
+            if (this.disabled) {
+                return;
+            }
+            window._event = e;
+            this.selectRecord(record);
+            this.lastSelectedRec = undefined;
+            if (!this.isSuspendEvents) {
+                this.trigger("item:dblclick", this, view, record, e);
+            }
+        },
+        onSelectItem: function (view, record, selected) {
+            if (!this.isSuspendEvents) {
+                this.trigger(selected ? "item:select": "item:deselect", this, view, record);
+            }
+        },
+        scrollToRecord: function (record) {
+            var innerEl = $(this.el).find(".inner");
+            var inner_top = innerEl.offset().top;
+            var div = innerEl.find("#" + record.get("id"));
+            var div_top = div.offset().top;
+            if (div_top < inner_top || div_top + div.height() > inner_top + innerEl.height()) {
+                if (this.scroller && this.allowScrollbar) {
+                    this.scroller.scrollTop(innerEl.scrollTop() + div_top - inner_top, 0);
+                } else {
+                    innerEl.scrollTop(innerEl.scrollTop() + div_top - inner_top);
+                }
+            }
+        },
+        onKeyDown: function (e, data) {
+            if (this.disabled) {
+                return;
+            }
+            if (data === undefined) {
+                data = e;
+            }
+            if (_.indexOf(this.moveKeys, data.keyCode) > -1 || data.keyCode == Common.UI.Keys.RETURN) {
+                data.preventDefault();
+                data.stopPropagation();
+                var rec = this.getSelectedRec()[0];
+                if (this.lastSelectedRec === undefined) {
+                    this.lastSelectedRec = rec;
+                }
+                if (data.keyCode == Common.UI.Keys.RETURN) {
+                    this.lastSelectedRec = undefined;
+                    this.trigger("item:click", this, this, rec, e);
+                    this.trigger("item:select", this, this, rec, e);
+                    this.trigger("entervalue", this, rec, e);
+                } else {
+                    var idx = _.indexOf(this.store.models, rec);
+                    idx = (data.keyCode == Common.UI.Keys.UP || data.keyCode == Common.UI.Keys.LEFT) ? Math.max(0, idx - 1) : Math.min(this.store.length - 1, idx + 1);
+                    rec = this.store.at(idx);
+                    if (rec) {
+                        this.selectRecord(rec);
+                        this.scrollToRecord(rec);
+                    }
+                }
+            }
+        },
+        attachKeyEvents: function () {
+            if (this.enableKeyEvents && this.handleSelect) {
+                var el = $(this.el).find(".inner").andSelf().filter(".inner");
+                el.addClass("canfocused");
+                el.attr("tabindex", "0");
+                el.on((this.parentMenu) ? "dataview:keydown": "keydown", _.bind(this.onKeyDown, this));
+            }
+        },
+        showLastSelected: function () {
+            if (this.lastSelectedRec) {
+                this.selectRecord(this.lastSelectedRec, true);
+                this.scrollToRecord(this.lastSelectedRec);
+                this.lastSelectedRec = undefined;
+            }
+        },
+        setDisabled: function (disabled) {
+            this.disabled = disabled;
+            $(this.el).find(".inner").andSelf().filter(".inner").toggleClass("disabled", disabled);
+        },
+        isDisabled: function () {
+            return this.disabled;
+        },
+        alignPosition: function () {
+            var menuRoot = (this.parentMenu.cmpEl.attr("role") === "menu") ? this.parentMenu.cmpEl : this.parentMenu.cmpEl.find("[role=menu]"),
+            innerEl = $(this.el).find(".inner").andSelf().filter(".inner"),
+            docH = $(document).height(),
+            menuH = menuRoot.outerHeight(),
+            top = parseInt(menuRoot.css("top"));
+            if (menuH > docH) {
+                innerEl.css("max-height", (docH - parseInt(menuRoot.css("padding-top")) - parseInt(menuRoot.css("padding-bottom")) - 5) + "px");
+                if (this.allowScrollbar) {
+                    this.scroller.update({
+                        minScrollbarLength: 40
+                    });
+                }
+            } else {
+                if (innerEl.height() < this.options.restoreHeight) {
+                    innerEl.css("max-height", (Math.min(docH - parseInt(menuRoot.css("padding-top")) - parseInt(menuRoot.css("padding-bottom")) - 5, this.options.restoreHeight)) + "px");
+                    menuH = menuRoot.outerHeight();
+                    if (top + menuH > docH) {
+                        menuRoot.css("top", 0);
+                    }
+                    if (this.allowScrollbar) {
+                        this.scroller.update({
+                            minScrollbarLength: 40
+                        });
+                    }
+                }
+            }
+        }
+    });
+    $(document).on("keydown.bs.dropdown.data-api", "[data-toggle=dropdown], [role=menu]", function (e) {
+        if (e.keyCode !== Common.UI.Keys.UP && e.keyCode !== Common.UI.Keys.DOWN && e.keyCode !== Common.UI.Keys.LEFT && e.keyCode !== Common.UI.Keys.RIGHT && e.keyCode !== Common.UI.Keys.RETURN) {
+            return;
+        }
+        _.defer(function () {
+            var target = $(e.target).closest(".dropdown-toggle");
+            target.parent().find(".inner.canfocused").trigger("dataview:keydown", e);
+        },
+        100);
+    });
+});

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

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

@@ -0,0 +1,121 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView"], function () {
+    Common.UI.DimensionPicker = Common.UI.BaseView.extend((function () {
+        var me, rootEl, areaMouseCatcher, areaUnHighLighted, areaHighLighted, areaStatus, curColumns = 0,
+        curRows = 0;
+        var onMouseMove = function (event) {
+            me.setTableSize(Math.ceil((event.offsetX === undefined ? event.originalEvent.layerX : event.offsetX) / me.itemSize), Math.ceil((event.offsetY === undefined ? event.originalEvent.layerY : event.offsetY) / me.itemSize), event);
+        };
+        var onMouseLeave = function (event) {
+            me.setTableSize(0, 0, event);
+        };
+        var onHighLightedMouseClick = function (e) {
+            me.trigger("select", me, curColumns, curRows, e);
+        };
+        return {
+            options: {
+                itemSize: 18,
+                minRows: 5,
+                minColumns: 5,
+                maxRows: 20,
+                maxColumns: 20
+            },
+            template: _.template(['<div style="width: 100%; height: 100%;">', '<div class="dimension-picker-status">0x0</div>', '<div class="dimension-picker-observecontainer">', '<div class="dimension-picker-mousecatcher"></div>', '<div class="dimension-picker-unhighlighted"></div>', '<div class="dimension-picker-highlighted"></div>', "</div>", "</div>"].join("")),
+            initialize: function (options) {
+                Common.UI.BaseView.prototype.initialize.call(this, options);
+                me = this;
+                rootEl = $(this.el);
+                me.itemSize = me.options.itemSize;
+                me.minRows = me.options.minRows;
+                me.minColumns = me.options.minColumns;
+                me.maxRows = me.options.maxRows;
+                me.maxColumns = me.options.maxColumns;
+                this.render();
+                if (rootEl) {
+                    areaMouseCatcher = rootEl.find(".dimension-picker-mousecatcher");
+                    areaUnHighLighted = rootEl.find(".dimension-picker-unhighlighted");
+                    areaHighLighted = rootEl.find(".dimension-picker-highlighted");
+                    areaStatus = rootEl.find(".dimension-picker-status");
+                    rootEl.css({
+                        width: me.minColumns + "em"
+                    });
+                    areaMouseCatcher.css("z-index", 1);
+                    areaMouseCatcher.width(me.maxColumns + "em").height(me.maxRows + "em");
+                    areaUnHighLighted.width(me.minColumns + "em").height(me.minRows + "em");
+                    areaStatus.html(curColumns + " x " + curRows);
+                    areaStatus.width(areaUnHighLighted.width());
+                }
+                areaMouseCatcher.on("mousemove", onMouseMove);
+                areaHighLighted.on("mousemove", onMouseMove);
+                areaUnHighLighted.on("mousemove", onMouseMove);
+                areaMouseCatcher.on("mouseleave", onMouseLeave);
+                areaHighLighted.on("mouseleave", onMouseLeave);
+                areaUnHighLighted.on("mouseleave", onMouseLeave);
+                areaMouseCatcher.on("click", onHighLightedMouseClick);
+                areaHighLighted.on("click", onHighLightedMouseClick);
+                areaUnHighLighted.on("click", onHighLightedMouseClick);
+            },
+            render: function () {
+                $(this.el).html(this.template());
+                return this;
+            },
+            setTableSize: function (columns, rows, event) {
+                if (columns > this.maxColumns) {
+                    columns = this.maxColumns;
+                }
+                if (rows > this.maxRows) {
+                    rows = this.maxRows;
+                }
+                if (curColumns != columns || curRows != rows) {
+                    curColumns = columns;
+                    curRows = rows;
+                    areaHighLighted.width(curColumns + "em").height(curRows + "em");
+                    areaUnHighLighted.width(((curColumns < me.minColumns) ? me.minColumns : ((curColumns + 1 > me.maxColumns) ? me.maxColumns : curColumns + 1)) + "em").height(((curRows < me.minRows) ? me.minRows : ((curRows + 1 > me.maxRows) ? me.maxRows : curRows + 1)) + "em");
+                    rootEl.width(areaUnHighLighted.width());
+                    areaStatus.html(curColumns + " x " + curRows);
+                    areaStatus.width(areaUnHighLighted.width());
+                    me.trigger("change", me, curColumns, curRows, event);
+                }
+            },
+            getColumnsCount: function () {
+                return curColumns;
+            },
+            getRowsCount: function () {
+                return curRows;
+            }
+        };
+    })());
+});

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

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

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

@@ -1,216 +1,218 @@
-/*
- * (c) Copyright Ascensio System SIA 2010-2014
- *
- * This program is a free software product. You can redistribute it and/or 
- * modify it under the terms of the GNU Affero General Public License (AGPL) 
- * version 3 as published by the Free Software Foundation. In accordance with 
- * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
- * that Ascensio System SIA expressly excludes the warranty of non-infringement
- * of any third-party rights.
- *
- * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
- * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
- * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
- *
- * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
- * EU, LV-1021.
- *
- * The  interactive user interfaces in modified source and object code versions
- * of the Program must display Appropriate Legal Notices, as required under 
- * Section 5 of the GNU AGPL version 3.
- *
- * Pursuant to Section 7(b) of the License you must retain the original Product
- * logo when distributing the program. Pursuant to Section 7(e) we decline to
- * grant you any rights under trademark law for use of our trademarks.
- *
- * All the Product's GUI elements, including illustrations and icon sets, as
- * well as technical writing content are licensed under the terms of the
- * Creative Commons Attribution-ShareAlike 4.0 International. See the License
- * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
- *
- */
- Ext.define("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"
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView", "common/main/lib/util/utils"], function () {
+    Common.UI.HSBColorPicker = Common.UI.BaseView.extend({
+        template: _.template('<div class="hsb-colorpicker">' + "<% if (this.showCurrentColor) { %>" + '<div class="top-panel">' + '<span class="color-value">' + '<span class="transparent-color"></span>' + "</span>" + '<div class="color-text"></div>' + "</div>" + "<% } %>" + "<div>" + '<div class="cnt-hb">' + '<div class="cnt-hb-arrow"></div>' + "</div>" + "<% if (this.changeSaturation) { %>" + '<div class="cnt-root">' + '<div class="cnt-sat">' + '<div class="cnt-sat-arrow"></div>' + "</div>" + "</div>" + "<% } %>" + "</div>" + "<% if (this.allowEmptyColor) { %>" + '<div class="empty-color"><%= this.textNoColor %></div>' + "<% } %>" + "</div>"),
+        color: "#ff0000",
+        options: {
+            allowEmptyColor: false,
+            changeSaturation: true,
+            showCurrentColor: true
+        },
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this,
+            el = $(this.el),
+            arrowSatBrightness,
+            arrowHue,
+            areaSatBrightness,
+            areaHue,
+            previewColor,
+            previewTransparentColor,
+            previewColorText,
+            btnNoColor,
+            hueVal = 0,
+            saturationVal = 100,
+            brightnessVal = 100;
+            me.allowEmptyColor = me.options.allowEmptyColor;
+            me.changeSaturation = me.options.changeSaturation;
+            me.showCurrentColor = me.options.showCurrentColor;
+            var onUpdateColor = function (hsb, transparent) {
+                var rgbColor = new Common.Utils.RGBColor("hsb(" + hsb.h + "," + hsb.s + "," + hsb.b + ")"),
+                hexColor = rgbColor.toHex();
+                me.color = transparent ? "transparent" : hexColor;
+                refreshUI();
+                me.trigger("changecolor", me, me.color);
+            };
+            var refreshUI = function () {
+                if (previewColor.length > 0 && previewTransparentColor.length > 0) {
+                    if (me.color == "transparent") {
+                        previewTransparentColor.show();
+                    } else {
+                        previewColor.css("background-color", me.color);
+                        previewTransparentColor.hide();
+                    }
+                }
+                if (areaSatBrightness.length > 0) {
+                    areaSatBrightness.css("background-color", new Common.Utils.RGBColor("hsb(" + hueVal + ", 100, 100)").toHex());
+                }
+                if (previewColorText.length > 0) {
+                    previewColorText[0].innerHTML = (me.color == "transparent") ? me.textNoColor : me.color.toUpperCase();
+                }
+                if (arrowSatBrightness.length > 0 && arrowHue.length > 0) {
+                    arrowSatBrightness.css("left", saturationVal + "%");
+                    arrowSatBrightness.css("top", 100 - brightnessVal + "%");
+                    arrowHue.css("top", parseInt(hueVal * 100 / 360) + "%");
+                }
+            };
+            var onSBAreaMouseMove = function (event, element, eOpts) {
+                if (arrowSatBrightness.length > 0 && areaSatBrightness.length > 0) {
+                    var pos = [Math.max(0, Math.min(100, (parseInt((event.pageX - areaSatBrightness.offset().left) / areaSatBrightness.width() * 100)))), Math.max(0, Math.min(100, (parseInt((event.pageY - areaSatBrightness.offset().top) / areaSatBrightness.height() * 100))))];
+                    arrowSatBrightness.css("left", pos[0] + "%");
+                    arrowSatBrightness.css("top", 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.pageY - areaHue.offset().top) / areaHue.height() * 100))));
+                    arrowHue.css("top", pos + "%");
+                    hueVal = parseInt(360 * pos / 100);
+                    onUpdateColor({
+                        h: hueVal,
+                        s: saturationVal,
+                        b: brightnessVal
+                    });
+                }
+            };
+            var onSBAreaMouseDown = function (event, element, eOpts) {
+                $(document).on("mouseup", onSBAreaMouseUp);
+                $(document).on("mousemove", onSBAreaMouseMove);
+            };
+            var onSBAreaMouseUp = function (event, element, eOpts) {
+                $(document).off("mouseup", onSBAreaMouseUp);
+                $(document).off("mousemove", onSBAreaMouseMove);
+                onSBAreaMouseMove(event, element, eOpts);
+            };
+            var onHueAreaMouseDown = function (event, element, eOpts) {
+                $(document).on("mouseup", onHueAreaMouseUp);
+                $(document).on("mousemove", onHueAreaMouseMove);
+                onHueAreaMouseMove(event, element, eOpts);
+            };
+            var onHueAreaMouseUp = function (event, element, eOpts) {
+                $(document).off("mouseup", onHueAreaMouseUp);
+                $(document).off("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.el),
+                hsbColor;
+                if (rootEl) {
+                    arrowSatBrightness = rootEl.find(".cnt-hb-arrow");
+                    arrowHue = rootEl.find(".cnt-sat-arrow");
+                    areaSatBrightness = rootEl.find(".cnt-hb");
+                    areaHue = rootEl.find(".cnt-sat");
+                    previewColor = rootEl.find(".color-value");
+                    previewColorText = rootEl.find(".color-text");
+                    btnNoColor = rootEl.find(".empty-color");
+                    if (previewColor.length > 0) {
+                        previewTransparentColor = previewColor.find(".transparent-color");
+                    }
+                    if (areaSatBrightness.length > 0) {
+                        areaSatBrightness.off("mousedown");
+                        areaSatBrightness.on("mousedown", onSBAreaMouseDown);
+                    }
+                    if (areaHue.length > 0) {
+                        areaHue.off("mousedown");
+                        areaHue.on("mousedown", onHueAreaMouseDown);
+                    }
+                    if (btnNoColor.length > 0) {
+                        btnNoColor.off("click");
+                        btnNoColor.on("click", onNoColorClick);
+                    }
+                    if (me.color == "transparent") {
+                        hsbColor = {
+                            h: 0,
+                            s: 100,
+                            b: 100
+                        };
+                    } else {
+                        hsbColor = new Common.Utils.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.Utils.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.getColor = function () {
+                return me.color;
+            };
+            me.on("render:after", onAfterRender);
+            me.render();
+        },
+        render: function () {
+            $(this.el).html(this.template());
+            this.trigger("render:after", this);
+            return this;
+        },
+        textNoColor: "No Color"
+    });
 });

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

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

@@ -0,0 +1,265 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView", "common/main/lib/component/Tooltip"], function () {
+    Common.UI.InputField = Common.UI.BaseView.extend((function () {
+        return {
+            options: {
+                id: null,
+                cls: "",
+                style: "",
+                value: "",
+                type: "text",
+                name: "",
+                validation: null,
+                allowBlank: true,
+                placeHolder: "",
+                blankError: null,
+                spellcheck: false,
+                maskExp: "",
+                validateOnChange: false,
+                validateOnBlur: true,
+                disabled: false
+            },
+            template: _.template(['<div class="input-field" style="<%= style %>">', "<input ", 'type="<%= type %>" ', 'name="<%= name %>" ', 'spellcheck="<%= spellcheck %>" ', 'class="form-control <%= cls %>" ', 'placeholder="<%= placeHolder %>" ', 'value="<%= value %>"', ">", '<span class="input-error"/>', "</div>"].join("")),
+            initialize: function (options) {
+                Common.UI.BaseView.prototype.initialize.call(this, options);
+                var me = this,
+                el = $(this.el);
+                this.id = me.options.id || Common.UI.getId();
+                this.cls = me.options.cls;
+                this.style = me.options.style;
+                this.value = me.options.value;
+                this.type = me.options.type;
+                this.name = me.options.name;
+                this.validation = me.options.validation;
+                this.allowBlank = me.options.allowBlank;
+                this.placeHolder = me.options.placeHolder;
+                this.template = me.options.template || me.template;
+                this.editable = me.options.editable || true;
+                this.disabled = me.options.disabled;
+                this.spellcheck = me.options.spellcheck;
+                this.blankError = me.options.blankError || "This field is required";
+                this.validateOnChange = me.options.validateOnChange;
+                this.validateOnBlur = me.options.validateOnBlur;
+                me.rendered = me.options.rendered || false;
+                if (me.options.el) {
+                    me.render();
+                }
+            },
+            render: function (parentEl) {
+                var me = this;
+                if (!me.rendered) {
+                    this.cmpEl = $(this.template({
+                        id: this.id,
+                        cls: this.cls,
+                        style: this.style,
+                        value: this.value,
+                        type: this.type,
+                        name: this.name,
+                        placeHolder: this.placeHolder,
+                        spellcheck: this.spellcheck,
+                        scope: me
+                    }));
+                    if (parentEl) {
+                        this.setElement(parentEl, false);
+                        parentEl.html(this.cmpEl);
+                    } else {
+                        $(this.el).html(this.cmpEl);
+                    }
+                } else {
+                    this.cmpEl = $(this.el);
+                }
+                if (!me.rendered) {
+                    var el = this.cmpEl;
+                    this._input = this.cmpEl.find("input").andSelf().filter("input");
+                    if (this.editable) {
+                        this._input.on("blur", _.bind(this.onInputChanged, this));
+                        this._input.on("keypress", _.bind(this.onKeyPress, this));
+                        this._input.on("keyup", _.bind(this.onKeyUp, this));
+                        if (this.validateOnChange) {
+                            this._input.on("input", _.bind(this.onInputChanging, this));
+                        }
+                    }
+                    this.setEditable(this.editable);
+                    if (this.disabled) {
+                        this.setDisabled(this.disabled);
+                    }
+                }
+                me.rendered = true;
+                return this;
+            },
+            _doChange: function (e, extra) {
+                if (extra && extra.synthetic) {
+                    return;
+                }
+                var newValue = $(e.target).val(),
+                oldValue = this.value;
+                this.trigger("changed:before", this, newValue, oldValue, e);
+                if (e.isDefaultPrevented()) {
+                    return;
+                }
+                this.value = newValue;
+                if (this.validateOnBlur) {
+                    this.checkValidate();
+                }
+                this.trigger("changed:after", this, newValue, oldValue, e);
+            },
+            onInputChanged: function (e, extra) {
+                this._doChange(e, extra);
+            },
+            onInputChanging: function (e, extra) {
+                var newValue = $(e.target).val(),
+                oldValue = this.value;
+                if (e.isDefaultPrevented()) {
+                    return;
+                }
+                this.value = newValue;
+                if (this.validateOnBlur) {
+                    this.checkValidate();
+                }
+                this.trigger("changing", this, newValue, oldValue, e);
+            },
+            onKeyPress: function (e) {
+                this.trigger("keypress:before", this, e);
+                if (e.isDefaultPrevented()) {
+                    return;
+                }
+                if (e.keyCode === Common.UI.Keys.RETURN) {
+                    this._doChange(e);
+                } else {
+                    if (this.options.maskExp && !_.isEmpty(this.options.maskExp.source)) {
+                        var charCode = String.fromCharCode(e.which);
+                        if (!this.options.maskExp.test(charCode) && !e.ctrlKey && e.keyCode !== Common.UI.Keys.DELETE && e.keyCode !== Common.UI.Keys.BACKSPACE && e.keyCode !== Common.UI.Keys.LEFT && e.keyCode !== Common.UI.Keys.RIGHT && e.keyCode !== Common.UI.Keys.HOME && e.keyCode !== Common.UI.Keys.END && e.keyCode !== Common.UI.Keys.ESC && e.keyCode !== Common.UI.Keys.INSERT) {
+                            e.preventDefault();
+                            e.stopPropagation();
+                        }
+                    }
+                }
+                this.trigger("keypress:after", this, e);
+            },
+            onKeyUp: function (e) {
+                this.trigger("keyup:before", this, e);
+                if (e.isDefaultPrevented()) {
+                    return;
+                }
+                this.trigger("keyup:after", this, e);
+            },
+            setEditable: function (editable) {
+                var input = this._input;
+                this.editable = editable;
+                if (editable && input) {
+                    input.removeAttr("readonly");
+                    input.removeAttr("data-can-copy");
+                } else {
+                    input.attr("readonly", "readonly");
+                    input.attr("data-can-copy", false);
+                }
+            },
+            isEditable: function () {
+                return this.editable;
+            },
+            setDisabled: function (disabled) {
+                this.disabled = disabled;
+                $(this.el).toggleClass("disabled", disabled);
+                disabled ? this._input.attr("disabled", true) : this._input.removeAttr("disabled");
+            },
+            isDisabled: function () {
+                return this.disabled;
+            },
+            setValue: function (value) {
+                this.value = value;
+                if (this.rendered) {
+                    this._input.val(value);
+                }
+            },
+            getValue: function () {
+                return this.value;
+            },
+            focus: function () {
+                this._input.focus();
+            },
+            checkValidate: function () {
+                var me = this,
+                errors = [];
+                if (!me.allowBlank && _.isEmpty(me.value)) {
+                    errors.push(me.blankError);
+                }
+                if (_.isFunction(me.validation)) {
+                    var res = me.validation.call(me, me.value);
+                    if (res !== true) {
+                        errors = _.flatten(errors.concat(res));
+                    }
+                }
+                if (!_.isEmpty(errors)) {
+                    me.cmpEl.addClass("error");
+                    var errorBadge = me.cmpEl.find(".input-error"),
+                    modalParents = errorBadge.closest(".asc-window");
+                    errorBadge.attr("data-toggle", "tooltip");
+                    errorBadge.removeData("bs.tooltip");
+                    errorBadge.tooltip({
+                        title: errors.join("\n"),
+                        placement: "cursor"
+                    });
+                    if (modalParents.length > 0) {
+                        errorBadge.data("bs.tooltip").tip().css("z-index", parseInt(modalParents.css("z-index")) + 10);
+                    }
+                    return errors;
+                } else {
+                    me.cmpEl.removeClass("error");
+                }
+                return true;
+            },
+            showError: function (errors) {
+                var me = this;
+                if (!_.isEmpty(errors)) {
+                    me.cmpEl.addClass("error");
+                    var errorBadge = me.cmpEl.find(".input-error"),
+                    modalParents = errorBadge.closest(".asc-window");
+                    errorBadge.attr("data-toggle", "tooltip");
+                    errorBadge.removeData("bs.tooltip");
+                    errorBadge.tooltip({
+                        title: errors.join("\n"),
+                        placement: "cursor"
+                    });
+                    if (modalParents.length > 0) {
+                        errorBadge.data("bs.tooltip").tip().css("z-index", parseInt(modalParents.css("z-index")) + 10);
+                    }
+                } else {
+                    me.cmpEl.removeClass("error");
+                }
+            }
+        };
+    })());
+});

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

@@ -0,0 +1,322 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["backbone"], function () {
+    var BaseLayout = function (options) {
+        this.box = null;
+        this.panels = [];
+        _.extend(this, options || {});
+    };
+    var LayoutPanel = function () {
+        return {
+            width: null,
+            height: null,
+            resize: false,
+            stretch: false,
+            rely: false
+        };
+    };
+    _.extend(BaseLayout.prototype, Backbone.Events, {
+        initialize: function (options) {
+            this.$parent = this.box.parent();
+            this.resize = {
+                eventMove: _.bind(this.resizeMove, this),
+                eventStop: _.bind(this.resizeStop, this)
+            };
+            var panel, resizer, stretch = false;
+            options.items.forEach(function (item) {
+                item.el instanceof HTMLElement && (item.el = $(item.el));
+                panel = _.extend(new LayoutPanel(), item);
+                if (panel.stretch) {
+                    stretch = true;
+                    panel.rely = false;
+                    panel.resize = false;
+                }
+                this.panels.push(panel);
+                if (panel.resize) {
+                    resizer = {
+                        isresizer: true,
+                        minpos: panel.resize.min || 0,
+                        maxpos: panel.resize.max || 0
+                    };
+                    if (!stretch) {
+                        panel.resize.el = resizer.el = panel.el.after('<div class="layout-resizer after"></div>').next();
+                        this.panels.push(resizer);
+                    } else {
+                        panel.resize.el = resizer.el = panel.el.before('<div class="layout-resizer before"></div>').prev();
+                        this.panels.splice(this.panels.length - 1, 0, resizer);
+                    }
+                    panel.resize.hidden && resizer.el.hide();
+                }
+            },
+            this);
+        },
+        doLayout: function () {},
+        getElementHeight: function (el) {
+            return parseInt(el.css("height"));
+        },
+        getElementWidth: function (el) {
+            return parseInt(el.css("width"));
+        },
+        onSelectStart: function (e) {
+            if (e.preventDefault) {
+                e.preventDefault();
+            }
+            return false;
+        },
+        addHandler: function (elem, type, handler) {
+            if (elem.addEventListener) {
+                elem.addEventListener(type, handler);
+            } else {
+                if (elem.attachEvent) {
+                    elem.attachEvent("on" + type, handler);
+                } else {
+                    elem["on" + type] = handler;
+                }
+            }
+        },
+        removeHandler: function (elem, type, handler) {
+            if (elem.removeEventListener) {
+                elem.removeEventListener(type, handler);
+            } else {
+                if (elem.detachEvent) {
+                    elem.detachEvent("on" + type, handler);
+                } else {
+                    elem["on" + type] = null;
+                }
+            }
+        },
+        clearSelection: function () {
+            if (window.getSelection) {
+                var selection = window.getSelection();
+                if (selection.empty) {
+                    selection.empty();
+                } else {
+                    if (selection.removeAllRanges) {
+                        selection.removeAllRanges();
+                    }
+                }
+            } else {
+                if (document.selection) {
+                    document.selection.empty();
+                }
+            }
+        },
+        resizeStart: function (e) {
+            this.clearSelection();
+            this.addHandler(window.document, "selectstart", this.onSelectStart);
+            $(document).on({
+                mousemove: this.resize.eventMove,
+                mouseup: this.resize.eventStop
+            });
+            var panel = e.data.panel;
+            this.resize.type = e.data.type;
+            this.resize.$el = panel.el;
+            this.resize.min = panel.minpos;
+            this.resize.$el.addClass("move");
+            if (e.data.type == "vertical") {
+                this.resize.height = parseInt(this.resize.$el.css("height"));
+                this.resize.max = (panel.maxpos > 0 ? panel.maxpos : this.resize.$el.parent().height() + panel.maxpos) - this.resize.height;
+                this.resize.inity = e.pageY - parseInt(e.currentTarget.style.top);
+            } else {
+                if (e.data.type == "horizontal") {
+                    this.resize.width = parseInt(this.resize.$el.css("width"));
+                    this.resize.max = (panel.maxpos > 0 ? panel.maxpos : this.resize.$el.parent().height() + panel.maxpos) - this.resize.width;
+                    this.resize.initx = e.pageX - parseInt(e.currentTarget.style.left);
+                }
+            }
+        },
+        resizeMove: function (e) {
+            if (this.resize.type == "vertical") {
+                var prop = "top",
+                value = e.pageY - this.resize.inity;
+            } else {
+                if (this.resize.type == "horizontal") {
+                    prop = "left";
+                    value = e.pageX - this.resize.initx;
+                }
+            }
+            if (! (value < this.resize.min) && !(value > this.resize.max)) {
+                this.resize.$el[0].style[prop] = value + "px";
+            }
+        },
+        resizeStop: function (e) {
+            this.removeHandler(window.document, "selectstart", this.onSelectStart);
+            $(document).off({
+                mousemove: this.resize.eventMove,
+                mouseup: this.resize.eventStop
+            });
+            if (this.resize.type == "vertical") {
+                var prop = "height";
+                var value = e.pageY - this.resize.inity;
+            } else {
+                if (this.resize.type == "horizontal") {
+                    prop = "width";
+                    value = e.pageX - this.resize.initx;
+                }
+            }
+            value < this.resize.min && (value = this.resize.min);
+            value > this.resize.max && (value = this.resize.max);
+            if (this.resize.$el.hasClass("after")) {
+                var panel = this.resize.$el.prev();
+            } else {
+                panel = this.resize.$el.next();
+                value = panel.parent()[prop]() - (value + this.resize[prop]);
+            }
+            panel.css(prop, value + "px");
+            this.resize.$el.removeClass("move");
+            delete this.resize.$el;
+            if (this.resize.value != value) {
+                this.doLayout();
+                this.trigger("layout:resizedrag", this);
+            }
+        }
+    }); ! Common.UI && (Common.UI = {});
+    Common.UI.VBoxLayout = function (options) {
+        BaseLayout.apply(this, arguments);
+        this.initialize.apply(this, arguments);
+    };
+    Common.UI.VBoxLayout.prototype = _.extend(new BaseLayout(), {
+        initialize: function (options) {
+            BaseLayout.prototype.initialize.call(this, options);
+            this.panels.forEach(function (panel) { ! panel.stretch && !panel.height && (panel.height = this.getElementHeight(panel.el));
+                if (panel.isresizer) {
+                    panel.el.on("mousedown", {
+                        type: "vertical",
+                        panel: panel
+                    },
+                    _.bind(this.resizeStart, this));
+                }
+            },
+            this);
+            this.doLayout.call(this);
+        },
+        doLayout: function () {
+            var height = 0,
+            stretchable, style;
+            this.panels.forEach(function (panel) {
+                if (!panel.stretch) {
+                    style = panel.el.is(":visible");
+                    if (style) {
+                        height += (panel.rely !== true ? panel.height : this.getElementHeight(panel.el));
+                    }
+                    if (panel.resize && panel.resize.autohide !== false && panel.resize.el) {
+                        if (style) {
+                            panel.resize.el.show();
+                            stretchable && (height += panel.resize.height);
+                        } else {
+                            panel.resize.el.hide();
+                            stretchable && (height -= panel.resize.height);
+                        }
+                    }
+                } else {
+                    stretchable = panel;
+                }
+            },
+            this);
+            stretchable && (stretchable.height = this.$parent.height() - height);
+            height = 0;
+            this.panels.forEach(function (panel) {
+                if (panel.el.is(":visible")) {
+                    style = {
+                        top: height
+                    };
+                    panel.rely !== true && (style.height = panel.height);
+                    panel.el.css(style);
+                    height += this.getElementHeight(panel.el);
+                }
+            },
+            this);
+        }
+    });
+    Common.UI.HBoxLayout = function (options) {
+        BaseLayout.apply(this, arguments);
+        this.initialize.apply(this, arguments);
+    };
+    Common.UI.HBoxLayout.prototype = _.extend(new BaseLayout(), {
+        initialize: function (options) {
+            BaseLayout.prototype.initialize.call(this, options);
+            this.panels.forEach(function (panel) { ! panel.stretch && !panel.width && (panel.width = this.getElementWidth(panel.el));
+                if (panel.isresizer) {
+                    panel.el.on("mousedown", {
+                        type: "horizontal",
+                        panel: panel
+                    },
+                    _.bind(this.resizeStart, this));
+                }
+            },
+            this);
+            this.doLayout.call(this);
+        },
+        doLayout: function (event) {
+            var width = 0,
+            stretchable, style;
+            this.panels.forEach(function (panel) {
+                if (!panel.stretch) {
+                    style = panel.el.is(":visible");
+                    if (style) {
+                        width += (panel.rely !== true ? panel.width : this.getElementWidth(panel.el));
+                    }
+                    if (panel.resize && panel.resize.autohide !== false && panel.resize.el) {
+                        if (style) {
+                            panel.resize.el.show();
+                            stretchable && (width -= panel.resize.width);
+                        } else {
+                            panel.resize.el.hide();
+                            stretchable && (width -= panel.resize.width);
+                        }
+                    }
+                } else {
+                    stretchable = panel;
+                }
+            },
+            this);
+            stretchable && (stretchable.width = this.$parent.width() - width);
+            width = 0;
+            this.panels.forEach(function (panel) {
+                if (panel.el.is(":visible")) {
+                    style = {
+                        left: width
+                    };
+                    panel.rely !== true && (style.width = panel.width);
+                    panel.el.css(style);
+                    width += this.getElementWidth(panel.el);
+                }
+            },
+            this);
+        }
+    });
+    Common.UI.VBoxLayout.prototype.constructor = Common.UI.VBoxLayout;
+    Common.UI.HBoxLayout.prototype.constructor = Common.UI.HBoxLayout;
+});

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

@@ -0,0 +1,76 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/DataView"], function () {
+    Common.UI.ListView = Common.UI.DataView.extend((function () {
+        return {
+            options: {
+                handleSelect: true,
+                enableKeyEvents: true,
+                showLast: true,
+                keyMoveDirection: "vertical",
+                itemTemplate: _.template('<div id="<%= id %>" class="list-item" style=""><%= value %></div>')
+            },
+            template: _.template(['<div class="listview inner"></div>'].join("")),
+            onAddItem: function (record, index) {
+                var view = new Common.UI.DataViewItem({
+                    template: this.itemTemplate,
+                    model: record
+                });
+                var idx = _.indexOf(this.store.models, record);
+                if (view) {
+                    var innerEl = $(this.el).find(".inner");
+                    if (innerEl) {
+                        var innerDivs = innerEl.find("> div");
+                        innerEl.find(".empty-text").remove();
+                        if (idx > 0) {
+                            $(innerDivs.get(idx - 1)).after(view.render().el);
+                        } else {
+                            (innerDivs.length > 0) ? $(innerDivs[idx]).before(view.render().el) : innerEl.append(view.render().el);
+                        }
+                        this.dataViewItems.push(view);
+                        this.listenTo(view, "change", this.onChangeItem);
+                        this.listenTo(view, "remove", this.onRemoveItem);
+                        this.listenTo(view, "click", this.onClickItem);
+                        this.listenTo(view, "dblclick", this.onDblClickItem);
+                        this.listenTo(view, "select", this.onSelectItem);
+                        if (!this.isSuspendEvents) {
+                            this.trigger("item:add", this, view, record);
+                        }
+                    }
+                }
+            }
+        };
+    })());
+});

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

@@ -1,143 +1,99 @@
-/*
- * (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);
-    }
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView"], function () {
+    Common.UI.LoadMask = Common.UI.BaseView.extend((function () {
+        var ownerEl, maskeEl, loaderEl;
+        return {
+            options: {
+                cls: "",
+                style: "",
+                title: "Loading...",
+                owner: document.body
+            },
+            template: _.template(['<div id="<%= id %>" class="asc-loadmask-body <%= cls %>" role="presentation" tabindex="-1">', '<div class="asc-loadmask-image"></div>', '<div class="asc-loadmask-title"><%= title %></div>', "</div>"].join("")),
+            initialize: function (options) {
+                Common.UI.BaseView.prototype.initialize.call(this, options);
+                this.template = this.options.template || this.template;
+                this.cls = this.options.cls;
+                this.style = this.options.style;
+                this.title = this.options.title;
+                this.owner = this.options.owner;
+            },
+            render: function () {
+                return this;
+            },
+            show: function () {
+                if (maskeEl || loaderEl) {
+                    return;
+                }
+                ownerEl = (this.owner instanceof Common.UI.BaseView) ? $(this.owner.el) : $(this.owner);
+                if (ownerEl.hasClass("masked")) {
+                    return this;
+                }
+                var me = this;
+                maskeEl = $('<div class="asc-loadmask"></div>');
+                loaderEl = $(this.template({
+                    id: me.id,
+                    cls: me.cls,
+                    style: me.style,
+                    title: me.title
+                }));
+                ownerEl.addClass("masked");
+                ownerEl.append(maskeEl);
+                ownerEl.append(loaderEl);
+                loaderEl.css({
+                    top: Math.round(ownerEl.height() / 2 - (loaderEl.height() + parseInt(loaderEl.css("padding-top")) + parseInt(loaderEl.css("padding-bottom"))) / 2) + "px",
+                    left: Math.round(ownerEl.width() / 2 - (loaderEl.width() + parseInt(loaderEl.css("padding-left")) + parseInt(loaderEl.css("padding-right"))) / 2) + "px"
+                });
+                Common.util.Shortcuts.suspendEvents();
+                return this;
+            },
+            hide: function () {
+                ownerEl && ownerEl.removeClass("masked");
+                maskeEl && maskeEl.remove();
+                loaderEl && loaderEl.remove();
+                maskeEl = null;
+                loaderEl = null;
+                Common.util.Shortcuts.resumeEvents();
+            },
+            setTitle: function (title) {
+                this.title = title;
+                if (ownerEl && ownerEl.hasClass("masked") && loaderEl) {
+                    $(".asc-loadmask-title", loaderEl).html(title);
+                }
+            }
+        };
+    })());
 });

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

@@ -0,0 +1,76 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView"], function () {
+    Common.UI.MaskedField = Common.UI.BaseView.extend({
+        options: {
+            maskExp: "",
+            maxLength: 999
+        },
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this,
+            el = $(this.el);
+            el.addClass("masked-field");
+            el.attr("maxlength", me.options.maxLength);
+            el.on("keypress", function (e) {
+                var charCode = String.fromCharCode(e.which);
+                if (!me.options.maskExp.test(charCode) && !e.ctrlKey && e.keyCode !== Common.UI.Keys.DELETE && e.keyCode !== Common.UI.Keys.BACKSPACE && e.keyCode !== Common.UI.Keys.LEFT && e.keyCode !== Common.UI.Keys.RIGHT && e.keyCode !== Common.UI.Keys.HOME && e.keyCode !== Common.UI.Keys.END && e.keyCode !== Common.UI.Keys.ESC && e.keyCode !== Common.UI.Keys.INSERT && e.keyCode !== Common.UI.Keys.TAB) {
+                    if (e.keyCode == Common.UI.Keys.RETURN) {
+                        me.trigger("changed", me, el.val());
+                    }
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            });
+            el.on("input", function (e) {
+                me.trigger("change", me, el.val());
+            });
+            el.on("blur", function (e) {
+                me.trigger("changed", me, el.val());
+            });
+        },
+        render: function () {
+            return this;
+        },
+        setValue: function (value) {
+            if (this.options.maskExp.test(value) && value.length <= this.options.maxLength) {
+                $(this.el).val(value);
+            }
+        },
+        getValue: function () {
+            $(this.el).val();
+        }
+    });
+});

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

@@ -0,0 +1,417 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/extend/Bootstrap", "common/main/lib/component/BaseView", "common/main/lib/component/MenuItem", "common/main/lib/component/Scroller"], function () {
+    Common.UI.Menu = (function () {
+        var manager = (function () {
+            var active = [],
+            menus = {};
+            return {
+                register: function (menu) {
+                    menus[menu.id] = menu;
+                    menu.on("show:after", function (m) {
+                        active.push(m);
+                    }).on("hide:after", function (m) {
+                        var index = active.indexOf(m);
+                        if (index > -1) {
+                            active.splice(index, 1);
+                        }
+                    });
+                },
+                unregister: function (menu) {
+                    var index = active.indexOf(menu);
+                    delete menus[menu.id];
+                    if (index > -1) {
+                        active.splice(index, 1);
+                    }
+                    menu.off("show:after").off("hide:after");
+                },
+                hideAll: function () {
+                    Common.NotificationCenter.trigger("menumanager:hideall");
+                    if (active && active.length > 0) {
+                        _.each(active, function (menu) {
+                            menu.hide();
+                        });
+                        return true;
+                    }
+                    return false;
+                }
+            };
+        })();
+        return _.extend(Common.UI.BaseView.extend({
+            options: {
+                cls: "",
+                style: "",
+                itemTemplate: null,
+                items: [],
+                menuAlign: "tl-bl",
+                menuAlignEl: null,
+                offset: [0, 0]
+            },
+            template: _.template(['<ul class="dropdown-menu <%= options.cls %>" style="<%= options.style %>" role="menu"></ul>'].join("")),
+            initialize: function (options) {
+                Common.UI.BaseView.prototype.initialize.call(this, options);
+                var me = this;
+                this.id = this.options.id || Common.UI.getId();
+                this.itemTemplate = this.options.itemTemplate || Common.UI.MenuItem.prototype.template;
+                this.rendered = false;
+                this.items = [];
+                this.offset = [0, 0];
+                this.menuAlign = this.options.menuAlign;
+                this.menuAlignEl = this.options.menuAlignEl;
+                _.each(this.options.items, function (item) {
+                    if (item instanceof Common.UI.MenuItem) {
+                        me.items.push(item);
+                    } else {
+                        me.items.push(new Common.UI.MenuItem(_.extend({
+                            tagName: "li",
+                            template: me.itemTemplate
+                        },
+                        item)));
+                    }
+                });
+                if (this.options.el) {
+                    this.render();
+                }
+                manager.register(this);
+            },
+            remove: function () {
+                manager.unregister(this);
+                Common.UI.BaseView.prototype.remove.call(this);
+            },
+            render: function (parentEl) {
+                var me = this;
+                this.trigger("render:before", this);
+                this.cmpEl = $(this.el);
+                if (parentEl) {
+                    this.setElement(parentEl, false);
+                    if (!me.rendered) {
+                        this.cmpEl = $(this.template({
+                            options: me.options
+                        }));
+                        parentEl.append(this.cmpEl);
+                    }
+                } else {
+                    if (!me.rendered) {
+                        this.cmpEl = this.template({
+                            options: me.options
+                        });
+                        $(this.el).append(this.cmpEl);
+                    }
+                }
+                var rootEl = this.cmpEl.parent(),
+                menuRoot = (rootEl.attr("role") === "menu") ? rootEl : rootEl.find("[role=menu]");
+                if (menuRoot) {
+                    if (!me.rendered) {
+                        _.each(me.items || [], function (item) {
+                            menuRoot.append(item.render().el);
+                            item.on("click", _.bind(me.onItemClick, me));
+                            item.on("toggle", _.bind(me.onItemToggle, me));
+                        });
+                    }
+                    menuRoot.css({
+                        "max-height": me.options.maxHeight || "none",
+                        position: "fixed",
+                        right: "auto",
+                        left: -1000,
+                        top: -1000
+                    });
+                    this.parentEl = menuRoot.parent();
+                    this.parentEl.on("show.bs.dropdown", _.bind(me.onBeforeShowMenu, me));
+                    this.parentEl.on("shown.bs.dropdown", _.bind(me.onAfterShowMenu, me));
+                    this.parentEl.on("hide.bs.dropdown", _.bind(me.onBeforeHideMenu, me));
+                    this.parentEl.on("hidden.bs.dropdown", _.bind(me.onAfterHideMenu, me));
+                    this.parentEl.on("keydown.after.bs.dropdown", _.bind(me.onAfterKeydownMenu, me));
+                    menuRoot.on("scroll", _.bind(me.onScroll, me));
+                    menuRoot.hover(function (e) {
+                        me.isOver = true;
+                    },
+                    function (e) {
+                        me.isOver = false;
+                    });
+                }
+                this.rendered = true;
+                this.trigger("render:after", this);
+                return this;
+            },
+            isVisible: function () {
+                return this.rendered && (this.cmpEl.is(":visible"));
+            },
+            show: function () {
+                if (this.rendered && this.parentEl && !this.parentEl.hasClass("open")) {
+                    this.cmpEl.dropdown("toggle");
+                }
+            },
+            hide: function () {
+                if (this.rendered && this.parentEl && this.parentEl.hasClass("open")) {
+                    this.cmpEl.dropdown("toggle");
+                }
+            },
+            insertItem: function (index, item) {
+                var me = this,
+                el = this.cmpEl;
+                if (! (item instanceof Common.UI.MenuItem)) {
+                    item = new Common.UI.MenuItem(_.extend({
+                        tagName: "li",
+                        template: me.itemTemplate
+                    },
+                    item));
+                }
+                if (index < 0 || index >= me.items.length) {
+                    me.items.push(item);
+                } else {
+                    me.items.splice(index, 0, item);
+                }
+                if (this.rendered) {
+                    var menuRoot = (el.attr("role") === "menu") ? el : el.find("[role=menu]");
+                    if (menuRoot) {
+                        if (index < 0) {
+                            menuRoot.append(item.render().el);
+                        } else {
+                            if (index === 0) {
+                                menuRoot.prepend(item.render().el);
+                            } else {
+                                $("li:nth-child(" + index + ")", menuRoot).before(item.render().el);
+                            }
+                        }
+                        item.on("click", _.bind(me.onItemClick, me));
+                        item.on("toggle", _.bind(me.onItemToggle, me));
+                    }
+                }
+            },
+            doLayout: function () {
+                if (this.options.maxHeight > 0) {
+                    if (!this.rendered) {
+                        this.mustLayout = true;
+                        return;
+                    }
+                    var me = this,
+                    el = this.cmpEl;
+                    var menuRoot = (el.attr("role") === "menu") ? el : el.find("[role=menu]");
+                    if (!menuRoot.is(":visible")) {
+                        var pos = [menuRoot.css("left"), menuRoot.css("top")];
+                        menuRoot.css({
+                            left: "-1000px",
+                            top: "-1000px",
+                            display: "block"
+                        });
+                    }
+                    var $items = menuRoot.find("li");
+                    if ($items.height() * $items.length > this.options.maxHeight) {
+                        var scroll = '<div class="menu-scroll top"></div>';
+                        menuRoot.prepend(scroll);
+                        scroll = '<div class="menu-scroll bottom"></div>';
+                        menuRoot.append(scroll);
+                        menuRoot.css({
+                            "box-shadow": "none",
+                            "overflow-y": "hidden",
+                            "padding-top": "18px"
+                        });
+                        menuRoot.find("> li:last-of-type").css("margin-bottom", 18);
+                        var addEvent = function (elem, type, fn) {
+                            elem.addEventListener ? elem.addEventListener(type, fn, false) : elem.attachEvent("on" + type, fn);
+                        };
+                        var eventname = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
+                        addEvent(menuRoot[0], eventname, _.bind(this.onMouseWheel, this));
+                        menuRoot.find(".menu-scroll").on("click", _.bind(this.onScrollClick, this));
+                    }
+                    if (pos) {
+                        menuRoot.css({
+                            display: "",
+                            left: pos[0],
+                            top: pos[1]
+                        });
+                    }
+                }
+            },
+            addItem: function (item) {
+                this.insertItem(-1, item);
+            },
+            removeItem: function (item) {
+                var me = this,
+                index = me.items.indexOf(item);
+                if (index > -1) {
+                    me.items.splice(index, 1);
+                    item.off("click").off("toggle");
+                    item.remove();
+                }
+            },
+            removeAll: function () {
+                var me = this;
+                _.each(me.items, function (item) {
+                    item.off("click").off("toggle");
+                    item.remove();
+                });
+                me.items = [];
+            },
+            onBeforeShowMenu: function (e) {
+                if (this.mustLayout) {
+                    delete this.mustLayout;
+                    this.doLayout.call(this);
+                }
+                this.trigger("show:before", this, e);
+                this.alignPosition();
+            },
+            onAfterShowMenu: function (e) {
+                this.trigger("show:after", this, e);
+                if (this.$el.find("> ul > .menu-scroll").length) {
+                    var el = this.$el.find("li .checked")[0];
+                    if (el) {
+                        var offset = el.offsetTop - this.options.maxHeight / 2;
+                        this.scrollMenu(offset < 0 ? 0 : offset);
+                    }
+                }
+            },
+            onBeforeHideMenu: function (e) {
+                this.trigger("hide:before", this, e);
+                if (Common.UI.Scroller.isMouseCapture()) {
+                    e.preventDefault();
+                }
+            },
+            onAfterHideMenu: function (e) {
+                this.trigger("hide:after", this, e);
+            },
+            onAfterKeydownMenu: function (e) {
+                if (e.keyCode == Common.UI.Keys.RETURN) {
+                    var li = $(e.target).closest("li");
+                    if (li.length <= 0) {
+                        li = $(e.target).parent().find("li .dataview");
+                    }
+                    if (li.length > 0) {
+                        li.click();
+                    }
+                } else {
+                    if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) {
+                        this.fromKeyDown = true;
+                    }
+                }
+            },
+            onScroll: function (item, e) {
+                if (this.fromKeyDown) {
+                    var menuRoot = (this.cmpEl.attr("role") === "menu") ? this.cmpEl : this.cmpEl.find("[role=menu]");
+                    menuRoot.find(".menu-scroll.top").css("top", menuRoot.scrollTop() + "px");
+                    menuRoot.find(".menu-scroll.bottom").css("bottom", (-menuRoot.scrollTop()) + "px");
+                }
+            },
+            onItemClick: function (item, e) {
+                if (!item.menu) {
+                    this.isOver = false;
+                }
+                if (item.options.stopPropagation) {
+                    e.stopPropagation();
+                    var me = this;
+                    _.delay(function () {
+                        me.$el.parent().parent().find("[data-toggle=dropdown]").focus();
+                    },
+                    10);
+                    return;
+                }
+                this.trigger("item:click", this, item, e);
+            },
+            onItemToggle: function (item, state, e) {
+                this.trigger("item:toggle", this, item, state, e);
+            },
+            onScrollClick: function (e) {
+                this.scrollMenu(/top/.test(e.currentTarget.className));
+                return false;
+            },
+            onMouseWheel: function (e) {
+                this.scrollMenu(((e.detail && -e.detail) || e.wheelDelta) > 0);
+            },
+            scrollMenu: function (up) {
+                this.fromKeyDown = false;
+                var menuRoot = (this.cmpEl.attr("role") === "menu") ? this.cmpEl : this.cmpEl.find("[role=menu]"),
+                value = typeof(up) === "boolean" ? menuRoot.scrollTop() + (up ? -20 : 20) : up;
+                menuRoot.scrollTop(value);
+                menuRoot.find(".menu-scroll.top").css("top", menuRoot.scrollTop() + "px");
+                menuRoot.find(".menu-scroll.bottom").css("bottom", (-menuRoot.scrollTop()) + "px");
+            },
+            setOffset: function (offsetX, offsetY) {
+                this.offset[0] = _.isUndefined(offsetX) ? this.offset[0] : offsetX;
+                this.offset[1] = _.isUndefined(offsetY) ? this.offset[1] : offsetY;
+                this.alignPosition();
+            },
+            getOffset: function () {
+                return this.offset;
+            },
+            alignPosition: function () {
+                var menuRoot = (this.cmpEl.attr("role") === "menu") ? this.cmpEl : this.cmpEl.find("[role=menu]"),
+                menuParent = this.menuAlignEl || menuRoot.parent(),
+                m = this.menuAlign.match(/^([a-z]+)-([a-z]+)/),
+                offset = menuParent.offset(),
+                docW = Math.min($(document).width(), $("body").width()),
+                docH = $(document).height() - 10,
+                menuW = menuRoot.outerWidth(),
+                menuH = menuRoot.outerHeight(),
+                parentW = menuParent.outerWidth(),
+                parentH = menuParent.outerHeight();
+                var posMenu = {
+                    "tl": [0, 0],
+                    "bl": [0, menuH],
+                    "tr": [menuW, 0],
+                    "br": [menuW, menuH]
+                };
+                var posParent = {
+                    "tl": [0, 0],
+                    "tr": [parentW, 0],
+                    "bl": [0, parentH],
+                    "br": [parentW, parentH]
+                };
+                var left = offset.left - posMenu[m[1]][0] + posParent[m[2]][0] + this.offset[0];
+                var top = offset.top - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1];
+                if (left + menuW > docW) {
+                    if (menuParent.is("li.dropdown-submenu")) {
+                        left = offset.left - menuW + 2;
+                    } else {
+                        left = docW - menuW;
+                    }
+                }
+                if (top + menuH > docH) {
+                    top = docH - menuH;
+                }
+                if (top < 0) {
+                    top = 0;
+                }
+                menuRoot.css({
+                    left: left,
+                    top: top
+                });
+            }
+        }), {
+            Manager: (function () {
+                return manager;
+            })()
+        });
+    })();
+});

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

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

@@ -0,0 +1,227 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView", "common/main/lib/component/ToggleManager"], function () {
+    Common.UI.MenuItem = Common.UI.BaseView.extend({
+        options: {
+            id: null,
+            cls: "",
+            style: "",
+            hint: false,
+            checkable: false,
+            checked: false,
+            allowDepress: false,
+            disabled: false,
+            value: null,
+            toggleGroup: null,
+            iconCls: "",
+            menu: null,
+            canFocused: true
+        },
+        tagName: "li",
+        template: _.template(['<a id="<%= id %>" style="<%= style %>" <% if(options.canFocused) { %> tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; %> >', "<% if (!_.isEmpty(iconCls)) { %>", '<span class="menu-item-icon <%= iconCls %>"></span>', "<% } %>", "<%= caption %>", "</a>"].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this,
+            el = $(this.el);
+            this.id = me.options.id || Common.UI.getId();
+            this.cls = me.options.cls;
+            this.style = me.options.style;
+            this.caption = me.options.caption;
+            this.menu = me.options.menu || null;
+            this.checkable = me.options.checkable;
+            this.checked = me.options.checked;
+            me.allowDepress = me.options.allowDepress;
+            this.disabled = me.options.disabled;
+            this.value = me.options.value;
+            this.toggleGroup = me.options.toggleGroup;
+            this.template = me.options.template || this.template;
+            this.iconCls = me.options.iconCls;
+            this.rendered = false;
+            if (this.menu !== null && !(this.menu instanceof Common.UI.Menu)) {
+                this.menu = new Common.UI.Menu(_.extend({},
+                me.options.menu));
+            }
+            if (me.options.el) {
+                this.render();
+            }
+        },
+        render: function () {
+            var me = this,
+            el = $(this.el);
+            me.trigger("render:before", me);
+            if (me.caption === "--") {
+                el.addClass("divider");
+            } else {
+                if (!this.rendered) {
+                    el.off("click");
+                    Common.UI.ToggleManager.unregister(me);
+                    $(this.el).html(this.template({
+                        id: me.id,
+                        caption: me.caption,
+                        iconCls: me.iconCls,
+                        style: me.style,
+                        options: me.options
+                    }));
+                    if (me.menu) {
+                        el.addClass("dropdown-submenu");
+                        me.menu.render($(this.el));
+                        el.mouseenter(_.bind(me.menu.alignPosition, me.menu));
+                        el.focusout(_.bind(me.onBlurItem, me));
+                        el.hover(_.bind(me.onHoverItem, me), _.bind(me.onUnHoverItem, me));
+                    }
+                    var firstChild = el.children(":first");
+                    if (this.checkable && firstChild) {
+                        firstChild.toggleClass("checkable", this.checkable);
+                        firstChild.toggleClass("checked", this.checked);
+                        if (!_.isEmpty(this.iconCls)) {
+                            firstChild.css("background-image", "none");
+                        }
+                    }
+                    if (this.disabled) {
+                        $(this.el).toggleClass("disabled", this.disabled);
+                    }
+                    el.on("click", _.bind(this.onItemClick, this));
+                    el.on("mousedown", _.bind(this.onItemMouseDown, this));
+                    Common.UI.ToggleManager.register(me);
+                }
+            }
+            me.cmpEl = $(this.el);
+            me.rendered = true;
+            me.trigger("render:after", me);
+            return this;
+        },
+        setCaption: function (caption) {
+            this.caption = caption;
+            if (this.rendered) {
+                this.cmpEl.find("a").contents().last()[0].textContent = Common.Utils.String.htmlEncode(caption);
+            }
+        },
+        setChecked: function (check, suppressEvent) {
+            this.toggle(check, suppressEvent);
+        },
+        isChecked: function () {
+            return this.checked;
+        },
+        setDisabled: function (disabled) {
+            this.disabled = !!disabled;
+            if (this.rendered) {
+                this.cmpEl.toggleClass("disabled", this.disabled);
+            }
+        },
+        isDisabled: function () {
+            return this.disabled;
+        },
+        toggle: function (toggle, suppressEvent) {
+            var state = toggle === undefined ? !this.checked : !!toggle;
+            if (this.checkable) {
+                this.checked = state;
+                if (this.rendered) {
+                    var firstChild = this.cmpEl.children(":first");
+                    if (firstChild) {
+                        firstChild.toggleClass("checked", this.checked);
+                        if (!_.isEmpty(this.iconCls)) {
+                            firstChild.css("background-image", "none");
+                        }
+                    }
+                }
+                if (!suppressEvent) {
+                    this.trigger("toggle", this, state);
+                }
+            }
+        },
+        onItemMouseDown: function (e) {
+            if (e.which != 1) {
+                e.preventDefault();
+                e.stopPropagation();
+                return false;
+            }
+        },
+        onItemClick: function (e) {
+            if (e.which != 1 && (e.which !== undefined || this.menu)) {
+                return false;
+            }
+            if (!this.disabled && (this.allowDepress || !(this.checked && this.toggleGroup))) {
+                this.setChecked(!this.checked);
+            }
+            if (this.menu) {
+                if (e.target.id == this.id) {
+                    return false;
+                }
+                if (!this.menu.isOver) {
+                    this.cmpEl.removeClass("over");
+                }
+                return;
+            }
+            if (!this.disabled) {
+                this.trigger("click", this, e);
+            } else {
+                return false;
+            }
+        },
+        onHoverItem: function (e) {
+            this._doHover(e);
+        },
+        onUnHoverItem: function (e) {
+            this._doUnHover(e);
+        },
+        onBlurItem: function (e) {
+            this._doUnHover(e);
+        },
+        _doHover: function (e) {
+            var me = this;
+            if (me.menu && !me.disabled) {
+                clearTimeout(me.hideMenuTimer);
+                me.cmpEl.trigger("show.bs.dropdown");
+                me.expandMenuTimer = _.delay(function () {
+                    me.cmpEl.addClass("over");
+                    me.cmpEl.trigger("shown.bs.dropdown");
+                },
+                200);
+            }
+        },
+        _doUnHover: function (e) {
+            var me = this;
+            if (me.menu && !me.disabled) {
+                clearTimeout(me.expandMenuTimer);
+                me.hideMenuTimer = _.delay(function () {
+                    if (!me.menu.isOver) {
+                        me.cmpEl.removeClass("over");
+                    }
+                },
+                200);
+            }
+        }
+    });
+});

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

@@ -1,254 +1,463 @@
-/*
- * (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;
-    }
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView"], function () {
+    Common.UI.MetricSpinner = Common.UI.BaseView.extend({
+        options: {
+            minValue: 0,
+            maxValue: 100,
+            step: 1,
+            defaultUnit: "px",
+            allowAuto: false,
+            autoText: "Auto",
+            hold: true,
+            speed: "medium",
+            width: 90,
+            allowDecimal: true
+        },
+        disabled: false,
+        value: "0 px",
+        rendered: false,
+        template: '<input type="text" class="form-control">' + '<div class="spinner-buttons">' + '<button type="button" class="spinner-up"><i></i></button>' + '<button type="button" class="spinner-down"><i></i></button>' + "</div>",
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this,
+            el = $(this.el);
+            el.addClass("spinner");
+            el.on("mousedown", ".spinner-up", _.bind(this.onMouseDown, this, true));
+            el.on("mousedown", ".spinner-down", _.bind(this.onMouseDown, this, false));
+            el.on("mouseup", ".spinner-up", _.bind(this.onMouseUp, this, true));
+            el.on("mouseup", ".spinner-down", _.bind(this.onMouseUp, this, false));
+            el.on("mouseover", ".spinner-up, .spinner-down", _.bind(this.onMouseOver, this));
+            el.on("mouseout", ".spinner-up, .spinner-down", _.bind(this.onMouseOut, this));
+            el.on("keydown", ".form-control", _.bind(this.onKeyDown, this));
+            el.on("keyup", ".form-control", _.bind(this.onKeyUp, this));
+            el.on("blur", ".form-control", _.bind(this.onBlur, this));
+            el.on("input", ".form-control", _.bind(this.onInput, this));
+            if (!this.options.allowDecimal) {
+                el.on("keypress", ".form-control", _.bind(this.onKeyPress, this));
+            }
+            this.switches = {
+                count: 1,
+                enabled: true,
+                fromKeyDown: false
+            };
+            if (this.options.speed === "medium") {
+                this.switches.speed = 300;
+            } else {
+                if (this.options.speed === "fast") {
+                    this.switches.speed = 100;
+                } else {
+                    this.switches.speed = 500;
+                }
+            }
+            this.render();
+            if (this.options.disabled) {
+                this.setDisabled(this.options.disabled);
+            }
+            if (this.options.value !== undefined) {
+                this.value = this.options.value;
+            }
+            this.setRawValue(this.value);
+            if (this.options.width) {
+                $(this.el).width(this.options.width);
+            }
+            if (this.options.defaultValue === undefined) {
+                this.options.defaultValue = this.options.minValue;
+            }
+            this.oldValue = this.options.minValue;
+            this.lastValue = null;
+        },
+        render: function () {
+            var el = $(this.el);
+            el.html(this.template);
+            this.$input = el.find(".form-control");
+            this.rendered = true;
+            if (this.options.tabindex != undefined) {
+                this.$input.attr("tabindex", this.options.tabindex);
+            }
+            return this;
+        },
+        setDisabled: function (disabled) {
+            var el = $(this.el);
+            if (disabled !== this.disabled) {
+                el.find("button").toggleClass("disabled", disabled);
+                el.toggleClass("disabled", disabled);
+                (disabled) ? this.$input.attr({
+                    disabled: disabled
+                }) : this.$input.removeAttr("disabled");
+            }
+            this.disabled = disabled;
+        },
+        isDisabled: function () {
+            return this.disabled;
+        },
+        setDefaultUnit: function (unit) {
+            if (this.options.defaultUnit != unit) {
+                var oldUnit = this.options.defaultUnit;
+                this.options.defaultUnit = unit;
+                this.setMinValue(this._recalcUnits(this.options.minValue, oldUnit));
+                this.setMaxValue(this._recalcUnits(this.options.maxValue, oldUnit));
+                this.setValue(this._recalcUnits(this.getNumberValue(), oldUnit), true);
+            }
+        },
+        setMinValue: function (unit) {
+            this.options.minValue = unit;
+        },
+        setMaxValue: function (unit) {
+            this.options.maxValue = unit;
+        },
+        setStep: function (step) {
+            this.options.step = step;
+        },
+        getNumberValue: function () {
+            if (this.options.allowAuto && this.value == this.options.autoText) {
+                return -1;
+            } else {
+                return parseFloat(this.value);
+            }
+        },
+        getUnitValue: function () {
+            return this.options.defaultUnit;
+        },
+        getValue: function () {
+            return this.value;
+        },
+        setRawValue: function (value) {
+            if (this.$input) {
+                this.$input.val(value);
+            }
+        },
+        setValue: function (value, suspendchange) {
+            var showError = false;
+            this._fromKeyDown = false;
+            this.lastValue = this.value;
+            if (typeof value === "undefined" || value === "") {
+                this.value = "";
+            } else {
+                if (this.options.allowAuto && (Math.abs(parseFloat(value) + 1) < 0.0001 || value == this.options.autoText)) {
+                    this.value = this.options.autoText;
+                } else {
+                    var number = this._add(parseFloat(value), 0, (this.options.allowDecimal) ? 3 : 0);
+                    if (typeof value === "undefined" || isNaN(number)) {
+                        number = this.oldValue;
+                        showError = true;
+                    }
+                    var units = this.options.defaultUnit;
+                    if (typeof value.match !== "undefined") {
+                        var searchUnits = value.match(/(px|em|%|en|ex|pt|in|cm|mm|pc|s|ms)$/i);
+                        if (null !== searchUnits && searchUnits[0] !== "undefined") {
+                            units = searchUnits[0].toLowerCase();
+                        }
+                    }
+                    if (this.options.defaultUnit !== units) {
+                        number = this._recalcUnits(number, units);
+                    }
+                    if (number > this.options.maxValue) {
+                        number = this.options.maxValue;
+                        showError = true;
+                    }
+                    if (number < this.options.minValue) {
+                        number = this.options.minValue;
+                        showError = true;
+                    }
+                    this.value = (number + " " + this.options.defaultUnit).trim();
+                    this.oldValue = number;
+                }
+            }
+            if (suspendchange !== true && this.lastValue !== this.value) {
+                this.trigger("change", this, this.value, this.lastValue);
+            }
+            if (suspendchange !== true && showError) {
+                this.trigger("inputerror", this, this.value);
+            }
+            if (this.rendered) {
+                this.setRawValue(this.value);
+            } else {
+                this.options.value = this.value;
+            }
+        },
+        onMouseDown: function (type, e) {
+            if (this.disabled) {
+                return;
+            }
+            if (e) {
+                $(e.currentTarget).addClass("active");
+            }
+            if (this.options.hold) {
+                this.switches.fromKeyDown = false;
+                this._startSpin(type, e);
+            }
+        },
+        onMouseUp: function (type, e) {
+            if (this.disabled) {
+                return;
+            }
+            $(e.currentTarget).removeClass("active");
+            if (this.options.hold) {
+                this._stopSpin();
+            } else {
+                this._step(type);
+            }
+        },
+        onMouseOver: function (e) {
+            if (this.disabled) {
+                return;
+            }
+            $(e.currentTarget).addClass("over");
+        },
+        onMouseOut: function (e) {
+            if (this.disabled) {
+                return;
+            }
+            $(e.currentTarget).removeClass("active over");
+            if (this.options.hold) {
+                this._stopSpin();
+            }
+        },
+        onKeyDown: function (e) {
+            if (this.disabled) {
+                return;
+            }
+            if (this.options.hold && (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN)) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (this.switches.timeout === undefined) {
+                    this.switches.fromKeyDown = true;
+                    this._startSpin(e.keyCode == Common.UI.Keys.UP, e);
+                }
+            } else {
+                if (e.keyCode == Common.UI.Keys.RETURN) {
+                    if (this.options.defaultUnit && this.options.defaultUnit.length) {
+                        var value = this.$input.val();
+                        if (this.value != value) {
+                            this.onEnterValue();
+                            return false;
+                        }
+                    } else {
+                        this.onEnterValue();
+                    }
+                } else {
+                    this._fromKeyDown = true;
+                }
+            }
+        },
+        onKeyUp: function (e) {
+            if (this.disabled) {
+                return;
+            }
+            if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) {
+                e.stopPropagation();
+                e.preventDefault();
+                (this.options.hold) ? this._stopSpin() : this._step(e.keyCode == Common.UI.Keys.UP);
+            }
+        },
+        onKeyPress: function (e) {
+            if (this.disabled) {
+                return;
+            }
+            var charCode = String.fromCharCode(e.charCode);
+            if (charCode == "." || charCode == ",") {
+                e.preventDefault();
+                e.stopPropagation();
+            } else {
+                if (this.options.maskExp && !this.options.maskExp.test(charCode) && !e.ctrlKey && e.keyCode !== Common.UI.Keys.DELETE && e.keyCode !== Common.UI.Keys.BACKSPACE && e.keyCode !== Common.UI.Keys.LEFT && e.keyCode !== Common.UI.Keys.RIGHT && e.keyCode !== Common.UI.Keys.HOME && e.keyCode !== Common.UI.Keys.END && e.keyCode !== Common.UI.Keys.ESC && e.keyCode !== Common.UI.Keys.RETURN && e.keyCode !== Common.UI.Keys.INSERT && e.keyCode !== Common.UI.Keys.TAB) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }
+            }
+        },
+        onInput: function (e, extra) {
+            if (this.disabled || e.isDefaultPrevented()) {
+                return;
+            }
+            this.trigger("changing", this, $(e.target).val(), e);
+        },
+        onEnterValue: function () {
+            if (this.$input) {
+                var val = this.$input.val();
+                this.setValue((val === "") ? this.value : val);
+                this.trigger("entervalue", this);
+            }
+        },
+        onBlur: function (e) {
+            if (this.$input) {
+                var val = this.$input.val();
+                this.setValue((val === "") ? this.value : val);
+                if (this.options.hold && this.switches.fromKeyDown) {
+                    this._stopSpin();
+                }
+            }
+        },
+        _startSpin: function (type, e) {
+            if (!this.disabled) {
+                var divisor = this.switches.count;
+                if (divisor === 1) {
+                    this._step(type, true);
+                    divisor = 1;
+                } else {
+                    if (divisor < 3) {
+                        divisor = 1.5;
+                    } else {
+                        if (divisor < 8) {
+                            divisor = 2.5;
+                        } else {
+                            divisor = 6;
+                        }
+                    }
+                }
+                this.switches.timeout = setTimeout($.proxy(function () {
+                    this._step(type, true);
+                    this._startSpin(type);
+                },
+                this), this.switches.speed / divisor);
+                this.switches.count++;
+            }
+        },
+        _stopSpin: function (e) {
+            if (this.switches.timeout !== undefined) {
+                clearTimeout(this.switches.timeout);
+                this.switches.timeout = undefined;
+                this.switches.count = 1;
+                this.trigger("change", this, this.value, this.lastValue);
+            }
+        },
+        _increase: function (suspend) {
+            var me = this;
+            if (!me.readOnly) {
+                var val = me.options.step;
+                if (me._fromKeyDown) {
+                    val = this.$input.val();
+                    val = _.isEmpty(val) ? me.oldValue : parseFloat(val);
+                } else {
+                    if (me.getValue() !== "") {
+                        if (me.options.allowAuto && me.getValue() == me.options.autoText) {
+                            val = me.options.minValue - me.options.step;
+                        } else {
+                            val = parseFloat(me.getValue());
+                        }
+                        if (isNaN(val)) {
+                            val = this.oldValue;
+                        }
+                    } else {
+                        val = me.options.defaultValue;
+                    }
+                }
+                me.setValue((this._add(val, me.options.step, (me.options.allowDecimal) ? 3 : 0) + " " + this.options.defaultUnit).trim(), suspend);
+            }
+        },
+        _decrease: function (suspend) {
+            var me = this;
+            if (!me.readOnly) {
+                var val = me.options.step;
+                if (me._fromKeyDown) {
+                    val = this.$input.val();
+                    val = _.isEmpty(val) ? me.oldValue : parseFloat(val);
+                } else {
+                    if (me.getValue() !== "") {
+                        if (me.options.allowAuto && me.getValue() == me.options.autoText) {
+                            val = me.options.minValue;
+                        } else {
+                            val = parseFloat(me.getValue());
+                        }
+                        if (isNaN(val)) {
+                            val = this.oldValue;
+                        }
+                        if (me.options.allowAuto && this._add(val, -me.options.step, (me.options.allowDecimal) ? 3 : 0) < me.options.minValue) {
+                            me.setValue(me.options.autoText, true);
+                            return;
+                        }
+                    } else {
+                        val = me.options.defaultValue;
+                    }
+                }
+                me.setValue((this._add(val, -me.options.step, (me.options.allowDecimal) ? 3 : 0) + " " + this.options.defaultUnit).trim(), suspend);
+            }
+        },
+        _step: function (type, suspend) {
+            (type) ? this._increase(suspend) : this._decrease(suspend);
+        },
+        _add: function (a, b, precision) {
+            var x = Math.pow(10, precision || (this.options.allowDecimal) ? 2 : 0);
+            return (Math.round(a * x) + Math.round(b * x)) / x;
+        },
+        _recalcUnits: function (value, fromUnit) {
+            if (fromUnit.match(/(s|ms)$/i) && this.options.defaultUnit.match(/(s|ms)$/i)) {
+                var v_out = value;
+                if (fromUnit == "ms") {
+                    v_out = v_out / 1000;
+                }
+                if (this.options.defaultUnit == "ms") {
+                    v_out = v_out * 1000;
+                }
+                return v_out;
+            }
+            if (fromUnit.match(/(pt|in|cm|mm|pc)$/i) === null || this.options.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.options.defaultUnit == "cm") {
+                v_out = v_out / 10;
+            } else {
+                if (this.options.defaultUnit == "pt") {
+                    v_out = parseFloat((v_out * 72 / 25.4).toFixed(3));
+                } else {
+                    if (this.options.defaultUnit == "in") {
+                        v_out = v_out / 25.4;
+                    } else {
+                        if (this.options.defaultUnit == "pc") {
+                            v_out = v_out * 6 / 25.4;
+                        }
+                    }
+                }
+            }
+            return v_out;
+        }
+    });
 });

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

@@ -1,182 +1,123 @@
-/*
- * (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;
-    }
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/Slider", "underscore"], function (base, _) {
+    Common.UI.MultiSliderGradient = Common.UI.MultiSlider.extend({
+        options: {
+            width: 100,
+            minValue: 0,
+            maxValue: 100,
+            values: [0, 100],
+            colorValues: ["#000000", "#ffffff"],
+            currentThumb: 0
+        },
+        disabled: false,
+        template: _.template(['<div class="slider multi-slider-gradient">', '<div class="track"></div>', "<% _.each(items, function(item) { %>", '<div class="thumb" style=""></div>', "<% }); %>", "</div>"].join("")),
+        initialize: function (options) {
+            this.styleStr = "";
+            if (Common.Utils.isChrome && Common.Utils.chromeVersion < 10 || Common.Utils.isSafari && Common.Utils.safariVersion < 5.1) {
+                this.styleStr = "-webkit-gradient(linear, left top, right top, color-stop({1}%,{0}), color-stop({3}%,{2})); /* Chrome,Safari4+ */";
+            } else {
+                if (Common.Utils.isChrome || Common.Utils.isSafari) {
+                    this.styleStr = "-webkit-linear-gradient(left, {0} {1}%, {2} {3}%)";
+                } else {
+                    if (Common.Utils.isGecko) {
+                        this.styleStr = "-moz-linear-gradient(left, {0} {1}%, {2} {3}%)";
+                    } else {
+                        if (Common.Utils.isOpera && Common.Utils.operaVersion > 11) {
+                            this.styleStr = "-o-linear-gradient(left, {0} {1}%, {2} {3}%)";
+                        } else {
+                            if (Common.Utils.isIE) {
+                                this.styleStr = "-ms-linear-gradient(left, {0} {1}%, {2} {3}%)";
+                            }
+                        }
+                    }
+                }
+            }
+            this.colorValues = this.options.colorValues;
+            Common.UI.MultiSlider.prototype.initialize.call(this, options);
+        },
+        render: function (parentEl) {
+            Common.UI.MultiSlider.prototype.render.call(this, parentEl);
+            var me = this,
+            style = "";
+            me.trackEl = me.cmpEl.find(".track");
+            for (var i = 0; i < me.thumbs.length; i++) {
+                me.thumbs[i].thumb.on("dblclick", null, function () {
+                    me.trigger("thumbdblclick", me);
+                });
+            }
+            if (me.styleStr !== "") {
+                style = Common.Utils.String.format(me.styleStr, me.colorValues[0], 0, me.colorValues[1], 100);
+                me.trackEl.css("background", style);
+            }
+            if (Common.Utils.isIE) {
+                style = Common.Utils.String.format("progid:DXImageTransform.Microsoft.gradient( startColorstr={0}, endColorstr={1},GradientType=1 )", me.colorValues[0], me.colorValues[1]);
+                me.trackEl.css("filter", style);
+            }
+            style = Common.Utils.String.format("linear-gradient(to right, {0} {1}%, {2} {3}%)", me.colorValues[0], 0, me.colorValues[1], 100);
+            me.trackEl.css("background", style);
+            me.on("change", _.bind(me.changeGradientStyle, me));
+        },
+        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];
+        },
+        setValue: function (index, value) {
+            Common.UI.MultiSlider.prototype.setValue.call(this, index, value);
+            this.changeGradientStyle();
+        },
+        changeGradientStyle: function () {
+            if (!this.rendered) {
+                return;
+            }
+            var style;
+            if (this.styleStr !== "") {
+                style = Common.Utils.String.format(this.styleStr, this.colorValues[0], this.getValue(0), this.colorValues[1], this.getValue(1));
+                this.trackEl.css("background", style);
+            }
+            if (Common.Utils.isIE) {
+                style = Common.Utils.String.format("progid:DXImageTransform.Microsoft.gradient( startColorstr={0}, endColorstr={1},GradientType=1 )", this.colorValues[0], this.colorValues[1]);
+                this.trackEl.css("filter", style);
+            }
+            style = Common.Utils.String.format("linear-gradient(to right, {0} {1}%, {2} {3}%)", this.colorValues[0], this.getValue(0), this.colorValues[1], this.getValue(1));
+            this.trackEl.css("background", style);
+        }
+    });
 });

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

@@ -0,0 +1,104 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView", "underscore"], function (base, _) {
+    Common.UI.RadioBox = Common.UI.BaseView.extend({
+        options: {
+            labelText: ""
+        },
+        disabled: false,
+        rendered: false,
+        template: _.template('<label class="radiobox"><input type="button" name="<%= name %>"><%= labelText %></label>'),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this,
+            el = $(this.el);
+            this.name = this.options.name || Common.UI.getId();
+            this.render();
+            if (this.options.disabled) {
+                this.setDisabled(this.options.disabled);
+            }
+            if (this.options.checked !== undefined) {
+                this.setValue(this.options.checked, true);
+            }
+            this.$radio.on("click", _.bind(this.onItemCheck, this));
+        },
+        render: function () {
+            var el = $(this.el);
+            el.html(this.template({
+                labelText: this.options.labelText,
+                name: this.name
+            }));
+            this.$radio = el.find("input[type=button]");
+            this.rendered = true;
+            return this;
+        },
+        setDisabled: function (disabled) {
+            if (disabled !== this.disabled) {
+                this.$radio.toggleClass("disabled", disabled);
+                (disabled) ? this.$radio.attr({
+                    disabled: disabled
+                }) : this.$radio.removeAttr("disabled");
+            }
+            this.disabled = disabled;
+        },
+        isDisabled: function () {
+            return this.disabled;
+        },
+        onItemCheck: function (e) {
+            if (!this.disabled) {
+                this.setValue(true);
+            }
+        },
+        setRawValue: function (value) {
+            var value = (value === true || value === "true" || value === "1" || value === 1);
+            $("input[type=button][name=" + this.name + "]").removeClass("checked");
+            this.$radio.toggleClass("checked", value);
+        },
+        setValue: function (value, suspendchange) {
+            if (this.rendered) {
+                var lastValue = this.$radio.hasClass("checked");
+                this.setRawValue(value);
+                if (suspendchange !== true && lastValue !== value) {
+                    this.trigger("change", this, this.$radio.hasClass("checked"));
+                }
+            } else {
+                this.options.checked = value;
+            }
+        },
+        getValue: function () {
+            return this.$radio.hasClass("checked");
+        }
+    });
+});

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

@@ -0,0 +1,141 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["jmousewheel", "perfectscrollbar", "common/main/lib/component/BaseView"], function () {
+    Common.UI.Scroller = (function () {
+        var mouseCapture;
+        return _.extend(Common.UI.BaseView.extend({
+            options: {
+                wheelSpeed: 20,
+                wheelPropagation: false,
+                minScrollbarLength: null,
+                useBothWheelAxes: false,
+                useKeyboard: true,
+                suppressScrollX: false,
+                suppressScrollY: false,
+                scrollXMarginOffset: 5,
+                scrollYMarginOffset: 5,
+                includePadding: true,
+                includeMargin: true,
+                alwaysVisibleX: false,
+                alwaysVisibleY: false
+            },
+            initialize: function (options) {
+                Common.UI.BaseView.prototype.initialize.call(this, options);
+                if (this.options.el) {
+                    this.render();
+                }
+            },
+            render: function () {
+                var me = this;
+                me.cmpEl = $(this.el);
+                if (!me.rendered) {
+                    me.cmpEl.perfectScrollbar(_.extend({},
+                    me.options));
+                    me.rendered = true;
+                    this.setAlwaysVisibleX(me.options.alwaysVisibleX);
+                    this.setAlwaysVisibleY(me.options.alwaysVisibleY);
+                }
+                return this;
+            },
+            remove: function () {
+                this.destroy();
+                Backbone.View.prototype.remove.call(this);
+            },
+            update: function (config) {
+                var options = this.options;
+                if (config) {
+                    this.destroy();
+                    options = _.extend(this.options, config);
+                    this.cmpEl.perfectScrollbar(options);
+                } else {
+                    this.cmpEl.perfectScrollbar("update");
+                }
+                this.setAlwaysVisibleX(options.alwaysVisibleX);
+                this.setAlwaysVisibleY(options.alwaysVisibleY);
+                var mouseDownHandler = function (e) {
+                    mouseCapture = true;
+                    var upHandler = function (e) {
+                        $(document).unbind("mouseup", upHandler);
+                        _.delay(function () {
+                            mouseCapture = false;
+                        },
+                        10);
+                    };
+                    $(document).mouseup(upHandler);
+                };
+                $(".ps-scrollbar-x-rail, .ps-scrollbar-y-rail, .ps-scrollbar-x, .ps-scrollbar-y", this.cmpEl).off("mousedown", mouseDownHandler).on("mousedown", mouseDownHandler);
+            },
+            destroy: function () {
+                this.cmpEl.perfectScrollbar("destroy");
+            },
+            scrollLeft: function (pos) {
+                this.cmpEl.scrollLeft(pos);
+                this.update();
+            },
+            scrollTop: function (pos) {
+                this.cmpEl.scrollTop(pos);
+                this.update();
+            },
+            getScrollTop: function () {
+                return this.cmpEl.scrollTop();
+            },
+            getScrollLeft: function () {
+                return this.cmpEl.scrollLeft();
+            },
+            setAlwaysVisibleX: function (flag) {
+                if (flag) {
+                    $(this.el).find(".ps-scrollbar-x-rail").addClass("always-visible-x");
+                    $(this.el).find(".ps-scrollbar-x").addClass("always-visible-x");
+                } else {
+                    $(this.el).find(".ps-scrollbar-x-rail").removeClass("always-visible-x");
+                    $(this.el).find(".ps-scrollbar-x").addClass("always-visible-x");
+                }
+            },
+            setAlwaysVisibleY: function (flag) {
+                if (flag) {
+                    $(this.el).find(".ps-scrollbar-y-rail").addClass("always-visible-y");
+                    $(this.el).find(".ps-scrollbar-y").addClass("always-visible-y");
+                } else {
+                    $(this.el).find(".ps-scrollbar-y-rail").removeClass("always-visible-y");
+                    $(this.el).find(".ps-scrollbar-y").addClass("always-visible-y");
+                }
+            }
+        }), {
+            isMouseCapture: function () {
+                return mouseCapture;
+            }
+        });
+    })();
+});

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

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

@@ -0,0 +1,380 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView", "underscore"], function (base, _) {
+    Common.UI.SingleSlider = Common.UI.BaseView.extend({
+        options: {
+            width: 100,
+            minValue: 0,
+            maxValue: 100,
+            step: 1,
+            value: 100,
+            enableKeyEvents: false
+        },
+        disabled: false,
+        template: _.template(['<div class="slider single-slider" style="">', '<div class="track">', '<div class="track-left"></div>', '<div class="track-center""></div>', '<div class="track-right" style=""></div>', "</div>", '<div class="thumb" style=""></div>', "<% if (this.options.enableKeyEvents) { %>", '<input type="text" style="position: absolute; top:-10px; width: 1px; height: 1px;">', "<% } %>", "</div>"].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this,
+            el = $(this.el);
+            me.width = me.options.width;
+            me.minValue = me.options.minValue;
+            me.maxValue = me.options.maxValue;
+            me.delta = 100 / (me.maxValue - me.minValue);
+            me.step = me.options.step;
+            if (me.options.el) {
+                me.render();
+            }
+            this.setValue(me.options.value);
+        },
+        render: function (parentEl) {
+            var me = this;
+            if (!me.rendered) {
+                this.cmpEl = $(this.template({}));
+                if (parentEl) {
+                    this.setElement(parentEl, false);
+                    parentEl.html(this.cmpEl);
+                } else {
+                    $(this.el).html(this.cmpEl);
+                }
+            } else {
+                this.cmpEl = $(this.el);
+            }
+            this.cmpEl.find(".track-center").width(me.options.width - 14);
+            this.cmpEl.width(me.options.width);
+            this.thumb = this.cmpEl.find(".thumb");
+            var onMouseUp = function (e) {
+                if (me.disabled) {
+                    return;
+                }
+                e.preventDefault();
+                e.stopPropagation();
+                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX - me.cmpEl.offset().left - me._dragstart) / me.width * 100))));
+                me.setThumbPosition(pos);
+                me.lastValue = me.value;
+                me.value = pos / me.delta + me.minValue;
+                me.thumb.removeClass("active");
+                $(document).off("mouseup", onMouseUp);
+                $(document).off("mousemove", onMouseMove);
+                me._dragstart = undefined;
+                me.trigger("changecomplete", me, me.value, me.lastValue);
+            };
+            var onMouseMove = function (e) {
+                if (me.disabled) {
+                    return;
+                }
+                if (me._dragstart === undefined) {
+                    return;
+                }
+                e.preventDefault();
+                e.stopPropagation();
+                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX - me.cmpEl.offset().left - me._dragstart) / me.width * 100))));
+                me.setThumbPosition(pos);
+                me.lastValue = me.value;
+                me.value = pos / me.delta + me.minValue;
+                if (Math.abs(me.value - me.lastValue) > 0.001) {
+                    me.trigger("change", me, me.value, me.lastValue);
+                }
+            };
+            var onMouseDown = function (e) {
+                if (me.disabled) {
+                    return;
+                }
+                me._dragstart = e.pageX - me.thumb.offset().left - 7;
+                me.thumb.addClass("active");
+                $(document).on("mouseup", onMouseUp);
+                $(document).on("mousemove", onMouseMove);
+                if (me.options.enableKeyEvents) {
+                    setTimeout(function () {
+                        me.input.focus();
+                    },
+                    10);
+                }
+            };
+            var onTrackMouseDown = function (e) {
+                if (me.disabled) {
+                    return;
+                }
+                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX - me.cmpEl.offset().left) / me.width * 100))));
+                me.setThumbPosition(pos);
+                me.lastValue = me.value;
+                me.value = pos / me.delta + me.minValue;
+                me.trigger("change", me, me.value, me.lastValue);
+                me.trigger("changecomplete", me, me.value, me.lastValue);
+            };
+            var updateslider;
+            var moveThumb = function (increase) {
+                me.lastValue = me.value;
+                me.value = Math.max(me.minValue, Math.min(me.maxValue, me.value + ((increase) ? me.step : -me.step)));
+                me.setThumbPosition(Math.round((me.value - me.minValue) * me.delta));
+                me.trigger("change", me, me.value, me.lastValue);
+            };
+            var onKeyDown = function (e) {
+                if (me.disabled) {
+                    return;
+                }
+                if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.LEFT || e.keyCode == Common.UI.Keys.RIGHT) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    el.off("keydown", "input", onKeyDown);
+                    updateslider = setInterval(_.bind(moveThumb, me, e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.RIGHT), 100);
+                }
+            };
+            var onKeyUp = function (e) {
+                if (me.disabled) {
+                    return;
+                }
+                if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN || Common.UI.Keys.LEFT || Common.UI.Keys.RIGHT) {
+                    e.stopPropagation();
+                    e.preventDefault();
+                    clearInterval(updateslider);
+                    moveThumb(e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.RIGHT);
+                    el.on("keydown", "input", onKeyDown);
+                    me.trigger("changecomplete", me, me.value, me.lastValue);
+                }
+            };
+            if (!me.rendered) {
+                var el = me.cmpEl;
+                el.on("mousedown", ".thumb", onMouseDown);
+                el.on("mousedown", ".track", onTrackMouseDown);
+                if (this.options.enableKeyEvents) {
+                    el.on("keydown", "input", onKeyDown);
+                    el.on("keyup", "input", onKeyUp);
+                }
+            }
+            me.rendered = true;
+            return this;
+        },
+        setThumbPosition: function (x) {
+            this.thumb.css({
+                left: x + "%"
+            });
+        },
+        setValue: function (value) {
+            this.lastValue = this.value;
+            this.value = Math.max(this.minValue, Math.min(this.maxValue, value));
+            this.setThumbPosition(Math.round((value - this.minValue) * this.delta));
+        },
+        getValue: function () {
+            return this.value;
+        },
+        setDisabled: function (disabled) {
+            if (disabled !== this.disabled) {
+                this.cmpEl.toggleClass("disabled", disabled);
+            }
+            this.disabled = disabled;
+        }
+    });
+    Common.UI.MultiSlider = Common.UI.BaseView.extend({
+        options: {
+            width: 100,
+            minValue: 0,
+            maxValue: 100,
+            values: [0, 100]
+        },
+        disabled: false,
+        template: _.template(['<div class="slider multi-slider">', '<div class="track">', '<div class="track-left"></div>', '<div class="track-center""></div>', '<div class="track-right" style=""></div>', "</div>", "<% _.each(items, function(item) { %>", '<div class="thumb" style=""></div>', "<% }); %>", "</div>"].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this,
+            el = $(this.el);
+            me.width = me.options.width;
+            me.minValue = me.options.minValue;
+            me.maxValue = me.options.maxValue;
+            me.delta = 100 / (me.maxValue - me.minValue);
+            me.thumbs = [];
+            if (me.options.el) {
+                me.render();
+            }
+        },
+        render: function (parentEl) {
+            var me = this;
+            if (!me.rendered) {
+                this.cmpEl = $(this.template({
+                    items: this.options.values
+                }));
+                if (parentEl) {
+                    this.setElement(parentEl, false);
+                    parentEl.html(this.cmpEl);
+                } else {
+                    $(this.el).html(this.cmpEl);
+                }
+            } else {
+                this.cmpEl = $(this.el);
+            }
+            var el = this.cmpEl;
+            el.find(".track-center").width(me.options.width - 14);
+            el.width(me.options.width);
+            var onMouseUp = function (e) {
+                if (me.disabled) {
+                    return;
+                }
+                e.preventDefault();
+                e.stopPropagation();
+                var index = e.data,
+                lastValue = me.thumbs[index].value,
+                minValue = (index - 1 < 0) ? 0 : me.thumbs[index - 1].position,
+                maxValue = (index + 1 < me.thumbs.length) ? me.thumbs[index + 1].position : 100,
+                pos = Math.max(minValue, Math.min(maxValue, (Math.round((e.pageX - me.cmpEl.offset().left - me._dragstart) / me.width * 100)))),
+                value = pos / me.delta + me.minValue;
+                me.setThumbPosition(index, pos);
+                me.thumbs[index].value = value;
+                $(document).off("mouseup", onMouseUp);
+                $(document).off("mousemove", onMouseMove);
+                me._dragstart = undefined;
+                me.trigger("changecomplete", me, value, lastValue);
+            };
+            var onMouseMove = function (e) {
+                if (me.disabled) {
+                    return;
+                }
+                if (me._dragstart === undefined) {
+                    return;
+                }
+                e.preventDefault();
+                e.stopPropagation();
+                var index = e.data,
+                lastValue = me.thumbs[index].value,
+                minValue = (index - 1 < 0) ? 0 : me.thumbs[index - 1].position,
+                maxValue = (index + 1 < me.thumbs.length) ? me.thumbs[index + 1].position : 100,
+                pos = Math.max(minValue, Math.min(maxValue, (Math.round((e.pageX - me.cmpEl.offset().left - me._dragstart) / me.width * 100)))),
+                value = pos / me.delta + me.minValue;
+                me.setThumbPosition(index, pos);
+                me.thumbs[index].value = value;
+                if (Math.abs(value - lastValue) > 0.001) {
+                    me.trigger("change", me, value, lastValue);
+                }
+            };
+            var onMouseDown = function (e) {
+                if (me.disabled) {
+                    return;
+                }
+                var index = e.data,
+                thumb = me.thumbs[index].thumb;
+                me._dragstart = e.pageX - thumb.offset().left - thumb.width() / 2;
+                me.setActiveThumb(index);
+                _.each(me.thumbs, function (item, idx) {
+                    (index == idx) ? item.thumb.css("z-index", 500) : item.thumb.css("z-index", "");
+                });
+                $(document).on("mouseup", null, index, onMouseUp);
+                $(document).on("mousemove", null, index, onMouseMove);
+            };
+            var onTrackMouseDown = function (e) {
+                if (me.disabled) {
+                    return;
+                }
+                var pos = Math.max(0, Math.min(100, (Math.round((e.pageX - me.cmpEl.offset().left) / me.width * 100)))),
+                index = findThumb(pos),
+                lastValue = me.thumbs[index].value,
+                value = pos / me.delta + me.minValue;
+                me.setThumbPosition(index, pos);
+                me.thumbs[index].value = value;
+                me.trigger("change", me, value, lastValue);
+                me.trigger("changecomplete", me, value, lastValue);
+            };
+            var findThumb = function (pos) {
+                var nearest = 100,
+                index = 0,
+                len = me.thumbs.length,
+                dist;
+                for (var i = 0; i < len; i++) {
+                    dist = Math.abs(me.thumbs[i].position - pos);
+                    if (Math.abs(dist <= nearest)) {
+                        var above = me.thumbs[i + 1];
+                        var below = me.thumbs[i - 1];
+                        if (below !== undefined && pos < below.position) {
+                            continue;
+                        }
+                        if (above !== undefined && pos > above.position) {
+                            continue;
+                        }
+                        index = i;
+                        nearest = dist;
+                    }
+                }
+                return index;
+            };
+            this.$thumbs = el.find(".thumb");
+            _.each(this.$thumbs, function (item, index) {
+                var thumb = $(item);
+                me.thumbs.push({
+                    thumb: thumb,
+                    index: index
+                });
+                me.setValue(index, me.options.values[index]);
+                thumb.on("mousedown", null, index, onMouseDown);
+            });
+            me.setActiveThumb(0, true);
+            if (!me.rendered) {
+                el.on("mousedown", ".track", onTrackMouseDown);
+            }
+            me.rendered = true;
+            return this;
+        },
+        setActiveThumb: function (index, suspend) {
+            this.currentThumb = index;
+            this.$thumbs.removeClass("active");
+            this.thumbs[index].thumb.addClass("active");
+            if (suspend !== true) {
+                this.trigger("thumbclick", this, index);
+            }
+        },
+        setThumbPosition: function (index, x) {
+            this.thumbs[index].position = x;
+            this.thumbs[index].thumb.css({
+                left: x + "%"
+            });
+        },
+        setValue: function (index, value) {
+            this.thumbs[index].value = Math.max(this.minValue, Math.min(this.maxValue, value));
+            this.setThumbPosition(index, Math.round((value - this.minValue) * this.delta));
+        },
+        getValue: function (index) {
+            return this.thumbs[index].value;
+        },
+        getValues: function () {
+            var values = [];
+            _.each(this.thumbs, function (thumb) {
+                values.push(thumb.value);
+            });
+            return values;
+        },
+        setDisabled: function (disabled) {
+            if (disabled !== this.disabled) {
+                this.cmpEl.toggleClass("disabled", disabled);
+            }
+            this.disabled = disabled;
+        }
+    });
+});

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

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

@@ -1,102 +1,88 @@
-/*
- * (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."
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView"], function () {
+    Common.UI.SynchronizeTip = Common.UI.BaseView.extend(_.extend((function () {
+        var tipEl;
+        return {
+            options: {
+                target: $(document.body)
+            },
+            template: _.template(['<div class="synch-tip-root">', '<div class="asc-synchronizetip">', '<div class="tip-arrow"></div>', "<div>", '<div style="width: 260px;"><%= scope.textSynchronize %></div>', '<div class="close"></div>', "</div>", '<div class="show-link"><label><%= scope.textDontShow %></label></div>', "</div>", "</div>"].join("")),
+            initialize: function (options) {
+                this.textSynchronize += Common.Utils.String.platformKey("Ctrl+S");
+                Common.UI.BaseView.prototype.initialize.call(this, options);
+                this.target = this.options.target;
+            },
+            render: function () {
+                tipEl = $(this.template({
+                    scope: this
+                }));
+                tipEl.find(".close").on("click", _.bind(function () {
+                    this.trigger("closeclick");
+                },
+                this));
+                tipEl.find(".show-link label").on("click", _.bind(function () {
+                    this.trigger("dontshowclick");
+                },
+                this));
+                $(document.body).append(tipEl);
+                this.applyPlacement();
+                return this;
+            },
+            show: function () {
+                if (tipEl) {
+                    this.applyPlacement();
+                    tipEl.show();
+                } else {
+                    this.render();
+                }
+            },
+            hide: function () {
+                if (tipEl) {
+                    tipEl.hide();
+                }
+            },
+            applyPlacement: function () {
+                var showxy = this.target.offset();
+                tipEl.css({
+                    top: showxy.top + this.target.height() / 2 + "px",
+                    left: showxy.left + this.target.width() + "px"
+                });
+            },
+            textDontShow: "Don't show this message again",
+            textSynchronize: "The document has been changed by another user.<br/>Please click to save your changes and reload the updates."
+        };
+    })(), Common.UI.SynchronizeTip || {}));
 });

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

@@ -0,0 +1,97 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView"], function (base) {
+    var Tab = function (opts) {
+        this.active = false;
+        this.label = "Tab";
+        this.cls = "";
+        this.template = _.template(['<li class="<% if(active){ %>active<% } %> <% if(cls.length){%><%= cls %><%}%>" data-label="<%= label %>">', "<a><%- label %></a>", "</li>"].join(""));
+        this.initialize.call(this, opts);
+        return this;
+    };
+    _.extend(Tab.prototype, {
+        initialize: function (options) {
+            _.extend(this, options);
+        },
+        render: function () {
+            var el = this.template(this);
+            this.$el = $(el);
+            this.rendered = true;
+            this.disable(this.disabled);
+            return this;
+        },
+        isActive: function () {
+            return this.$el.hasClass("active");
+        },
+        activate: function () {
+            if (!this.$el.hasClass("active")) {
+                this.$el.addClass("active");
+            }
+        },
+        deactivate: function () {
+            this.$el.removeClass("active");
+        },
+        on: function () {
+            this.$el.on.apply(this, arguments);
+        },
+        disable: function (val) {
+            this.disabled = val;
+            if (this.rendered) {
+                if (val && !this.$el.hasClass("disabled")) {
+                    this.$el.addClass("disabled");
+                } else {
+                    this.$el.removeClass("disabled");
+                }
+            }
+        },
+        addClass: function (cls) {
+            if (cls.length && !this.$el.hasClass(cls)) {
+                this.$el.addClass(cls);
+            }
+        },
+        removeClass: function (cls) {
+            if (cls.length && this.$el.hasClass(cls)) {
+                this.$el.removeClass(cls);
+            }
+        },
+        hasClass: function (cls) {
+            return this.$el.hasClass(cls);
+        },
+        setCaption: function (text) {
+            this.$el.find("> a").text(text);
+        }
+    });
+    Common.UI.Tab = Tab;
+});

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

@@ -0,0 +1,494 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ define(["common/main/lib/component/BaseView", "common/main/lib/component/Tab"], function () {
+    var Events = {
+        bind: function () {
+            if (!this.o) {
+                this.o = $({});
+            }
+            this.o.on.apply(this.o, arguments);
+        },
+        unbind: function () {
+            if (this.o) {
+                this.o.off.apply(this.o, arguments);
+            }
+        },
+        trigger: function () {
+            if (!this.o) {
+                this.o = $({});
+            }
+            this.o.trigger.apply(this.o, arguments);
+        }
+    };
+    var StateManager = function (options) {
+        this.initialize.call(this, options);
+    };
+    _.extend(StateManager.prototype, Events);
+    StateManager.prototype.initialize = function (options) {
+        this.bar = options.bar;
+    };
+    StateManager.prototype.attach = function (tab) {
+        tab.changeState = $.proxy(function () {
+            this.trigger("tab:change", tab);
+            this.bar.$el.find("ul > li.active").removeClass("active");
+            tab.activate();
+            this.bar.trigger("tab:changed", this.bar, this.bar.tabs.indexOf(tab), tab);
+        },
+        this);
+        var dragHelper = new(function () {
+            return {
+                bounds: [],
+                drag: undefined,
+                calculateBounds: function () {
+                    var me = this,
+                    length = me.bar.tabs.length,
+                    barBounds = me.bar.$bar.get(0).getBoundingClientRect();
+                    if (barBounds) {
+                        me.bounds = [];
+                        me.scrollLeft = me.bar.$bar.scrollLeft();
+                        me.bar.scrollX = this.scrollLeft;
+                        for (var i = 0; i < length; ++i) {
+                            this.bounds.push(me.bar.tabs[i].$el.get(0).getBoundingClientRect());
+                        }
+                        me.tabBarLeft = me.bounds[0].left;
+                        me.tabBarRight = me.bounds[length - 1].right;
+                        me.tabBarRight = Math.min(me.tabBarRight, barBounds.right - 1);
+                    }
+                },
+                setAbsTabs: function () {
+                    var me = this,
+                    tab = null,
+                    length = this.bounds.length;
+                    for (var i = 0; i < length; ++i) {
+                        tab = me.bar.tabs[i].$el;
+                        tab.css("position", "absolute");
+                        tab.css("left", (me.bounds[i].left - me.tabBarLeft - this.scrollLeft) + "px");
+                        if (tab.hasClass("active")) {
+                            tab.css("top", "1px");
+                        } else {
+                            tab.css("top", "0px");
+                        }
+                    }
+                },
+                updatePositions: function () {
+                    this.drag.place = undefined;
+                    var i, tabBound, center, place = -1,
+                    next = -this.scrollLeft,
+                    tabsCount = this.bounds.length,
+                    dragBound = this.drag.tab.$el.get(0).getBoundingClientRect();
+                    if (this.drag.moveX - this.drag.mouseX > 0) {
+                        for (i = tabsCount - 1; i >= 0; --i) {
+                            tabBound = this.bounds[i];
+                            center = (tabBound.right + tabBound.left) * 0.5;
+                            if (dragBound.left < center && center < dragBound.right) {
+                                place = i;
+                                break;
+                            }
+                        }
+                        if (-1 === place) {
+                            for (i = tabsCount - 1; i >= 0; --i) {
+                                tabBound = dragBound;
+                                center = (tabBound.right + tabBound.left) * 0.5;
+                                if (this.bounds[i].left < center && center < this.bounds[i].right) {
+                                    place = i;
+                                    break;
+                                }
+                            }
+                        }
+                    } else {
+                        for (i = 0; i < tabsCount; ++i) {
+                            tabBound = this.bounds[i];
+                            center = (tabBound.right + tabBound.left) * 0.5;
+                            if (dragBound.left < center && center < dragBound.right) {
+                                place = i;
+                                break;
+                            }
+                        }
+                        if (-1 === place) {
+                            for (i = 0; i < tabsCount; ++i) {
+                                tabBound = dragBound;
+                                center = (tabBound.right + tabBound.left) * 0.5;
+                                if (this.bounds[i].left < center && center < this.bounds[i].right) {
+                                    place = i;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                    if (-1 !== place) {
+                        this.drag.place = place;
+                        for (i = 0; i < tabsCount; ++i) {
+                            if (i === place) {
+                                if (place < this.drag.index) {
+                                    next += this.drag.tabWidth;
+                                }
+                            }
+                            if (place > this.drag.index) {
+                                if (i === place + 1) {
+                                    next += this.drag.tabWidth;
+                                }
+                            }
+                            if (i !== this.drag.index) {
+                                this.bar.tabs[i].$el.css("left", next + "px");
+                            } else {
+                                if (this.drag.index === place) {
+                                    next += this.drag.tabWidth;
+                                }
+                                continue;
+                            }
+                            next += this.bounds[i].width;
+                        }
+                    }
+                },
+                setHook: function (e, bar, tab) {
+                    var me = this;
+                    function dragComplete() {
+                        if (!_.isUndefined(me.drag)) {
+                            me.drag.tab.$el.css("z-index", "");
+                            var tab = null;
+                            for (var i = me.bar.tabs.length - 1; i >= 0; --i) {
+                                tab = me.bar.tabs[i].$el;
+                                if (tab) {
+                                    tab.css("top", "");
+                                    tab.css("position", "");
+                                    tab.css("left", "");
+                                }
+                            }
+                            if (!_.isUndefined(me.drag.place)) {
+                                me.bar.trigger("tab:move", me.drag.index, me.drag.place);
+                                me.bar.$bar.scrollLeft(me.scrollLeft);
+                                me.bar.scrollX = undefined;
+                            } else {
+                                me.bar.trigger("tab:move", me.drag.index);
+                                me.bar.$bar.scrollLeft(me.scrollLeft);
+                                me.bar.scrollX = undefined;
+                            }
+                            me.drag = undefined;
+                        }
+                    }
+                    function dragMove(e) {
+                        if (!_.isUndefined(me.drag)) {
+                            me.drag.moveX = e.clientX;
+                            var leftPos = Math.max(e.clientX - me.drag.anchorX - me.tabBarLeft - me.scrollLeft, 0);
+                            leftPos = Math.min(leftPos, me.tabBarRight - me.tabBarLeft - me.drag.tabWidth - me.scrollLeft);
+                            me.drag.tab.$el.css("left", leftPos + "px");
+                            me.drag.tab.$el.css("z-index", "100");
+                            me.updatePositions();
+                        }
+                    }
+                    function dragDropText(e) {
+                        e.preventDefault();
+                    }
+                    if (!_.isUndefined(bar) && !_.isUndefined(tab) && bar.tabs.length > 1) {
+                        var index = bar.tabs.indexOf(tab);
+                        me.bar = bar;
+                        me.drag = {
+                            tab: tab,
+                            index: index
+                        };
+                        this.calculateBounds();
+                        this.setAbsTabs();
+                        me.drag.moveX = e.clientX;
+                        me.drag.mouseX = e.clientX;
+                        me.drag.anchorX = e.clientX - this.bounds[index].left;
+                        me.drag.tabWidth = this.bounds[index].width;
+                        document.addEventListener("dragstart", dragDropText);
+                        $(document).on("mousemove", dragMove);
+                        $(document).on("mouseup", function (e) {
+                            dragComplete(e);
+                            $(document).off("mouseup", dragComplete);
+                            $(document).off("mousemove", dragMove);
+                            document.removeEventListener("dragstart", dragDropText);
+                        });
+                    }
+                }
+            };
+        });
+        tab.$el.on({
+            click: $.proxy(function () {
+                if (!tab.disabled && !tab.$el.hasClass("active")) {
+                    if (tab.control == "manual") {
+                        this.bar.trigger("tab:manual", this.bar, this.bar.tabs.indexOf(tab), tab);
+                    } else {
+                        tab.changeState();
+                    }
+                }
+            },
+            this),
+            dblclick: $.proxy(function () {
+                this.trigger("tab:dblclick", this, this.tabs.indexOf(tab), tab);
+            },
+            this.bar),
+            contextmenu: $.proxy(function () {
+                this.trigger("tab:contextmenu", this, this.tabs.indexOf(tab), tab);
+            },
+            this.bar),
+            mousedown: $.proxy(function (e) {
+                if (this.bar.options.draggable && !_.isUndefined(dragHelper) && (3 !== e.which)) {
+                    if (!tab.isLockTheDrag) {
+                        dragHelper.setHook(e, this.bar, tab);
+                    }
+                }
+            },
+            this)
+        });
+    };
+    StateManager.prototype.detach = function (tab) {
+        tab.$el.off();
+    };
+    Common.UI.TabBar = Common.UI.BaseView.extend({
+        config: {
+            placement: "top",
+            items: [],
+            draggable: false
+        },
+        tabs: [],
+        template: _.template('<ul class="nav nav-tabs <%= placement %>" />'),
+        initialize: function (options) {
+            _.extend(this.config, options);
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            this.saved = [];
+        },
+        render: function () {
+            this.$el.html(this.template(this.config));
+            this.$bar = this.$el.find("ul");
+            var addEvent = function (elem, type, fn) {
+                elem.addEventListener ? elem.addEventListener(type, fn, false) : elem.attachEvent("on" + type, fn);
+            };
+            var eventname = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel";
+            addEvent(this.$bar[0], eventname, _.bind(this._onMouseWheel, this));
+            this.manager = new StateManager({
+                bar: this
+            });
+            this.insert(-1, this.config.items);
+            this.insert(-1, this.saved);
+            delete this.saved;
+            this.rendered = true;
+            return this;
+        },
+        _onMouseWheel: function (e) {
+            var hidden = this.checkInvisible(true),
+            forward = ((e.detail && -e.detail) || e.wheelDelta) > 0;
+            if (forward) {
+                if (hidden.last) {
+                    this.setTabVisible("forward");
+                }
+            } else {
+                if (hidden.first) {
+                    this.setTabVisible("backward");
+                }
+            }
+        },
+        add: function (tabs) {
+            return this.insert(-1, tabs) > 0;
+        },
+        insert: function (index, tabs) {
+            var count = 0;
+            if (tabs) {
+                if (! (tabs instanceof Array)) {
+                    tabs = [tabs];
+                }
+                if (tabs.length) {
+                    count = tabs.length;
+                    if (this.rendered) {
+                        var me = this,
+                        tab;
+                        if (index < 0 || index > me.tabs.length) {
+                            for (var i = 0; i < tabs.length; i++) {
+                                tab = new Common.UI.Tab(tabs[i]);
+                                me.$bar.append(tab.render().$el);
+                                me.tabs.push(tab);
+                                me.manager.attach(tab);
+                            }
+                        } else {
+                            for (i = tabs.length; i-->0;) {
+                                tab = new Common.UI.Tab(tabs[i]);
+                                if (index === 0) {
+                                    me.$bar.prepend(tab.render().$el);
+                                    me.tabs.unshift(tab);
+                                } else {
+                                    me.$bar.find("li:nth-child(" + index + ")").before(tab.render().$el);
+                                    me.tabs.splice(index, 0, tab);
+                                }
+                                me.manager.attach(tab);
+                            }
+                        }
+                    } else {
+                        this.saved.push(tabs);
+                    }
+                    this.checkInvisible();
+                }
+            }
+            return count;
+        },
+        remove: function (index) {
+            if (index >= 0 && index < this.tabs.length) {
+                var tab = this.tabs.splice(index, 1)[0];
+                this.manager.detach(tab);
+                tab.$el.remove();
+                this.checkInvisible();
+            }
+        },
+        empty: function (suppress) {
+            var me = this;
+            this.tabs.forEach(function (tab) {
+                me.manager.detach(tab);
+            });
+            this.$bar.empty();
+            me.tabs = [];
+            this.checkInvisible(suppress);
+        },
+        setActive: function (t) {
+            if (t instanceof Common.UI.Tab) {
+                tab = t;
+            } else {
+                if (typeof t == "number") {
+                    if (t >= 0 && t < this.tabs.length) {
+                        var tab = this.tabs[t];
+                    }
+                }
+            }
+            if (tab && tab.control != "manual" && !tab.disabled && !tab.$el.hasClass("active")) {
+                tab.changeState();
+            }
+            this.checkInvisible();
+        },
+        getActive: function (iselem) {
+            return iselem ? this.$bar.find("> li.active") : this.$bar.find("> li.active").index();
+        },
+        getAt: function (index) {
+            return (index >= 0 && index < this.tabs.length) ? this.tabs[index] : undefined;
+        },
+        getCount: function () {
+            return this.tabs.length;
+        },
+        addClass: function (cls) {
+            if (cls.length && !this.$bar.hasClass(cls)) {
+                this.$bar.addClass(cls);
+            }
+        },
+        removeClass: function (cls) {
+            if (cls.length && this.$bar.hasClass(cls)) {
+                this.$bar.removeClass(cls);
+            }
+        },
+        hasClass: function (cls) {
+            return this.$bar.hasClass(cls);
+        },
+        setTabVisible: function (index, suppress) {
+            if (index <= 0 || index == "first") {
+                this.$bar.scrollLeft(0);
+                this.checkInvisible(suppress);
+            } else {
+                if (index >= (this.tabs.length - 1) || index == "last") {
+                    var left = this.tabs[this.tabs.length - 1].$el.position().left;
+                    this.$bar.scrollLeft(left);
+                    this.checkInvisible(suppress);
+                } else {
+                    var rightbound = this.$bar.width();
+                    if (index == "forward") {
+                        var tab, right;
+                        for (var i = 0; i < this.tabs.length; i++) {
+                            tab = this.tabs[i].$el;
+                            right = tab.position().left + parseInt(tab.css("width"));
+                            if (right > rightbound) {
+                                this.$bar.scrollLeft(this.$bar.scrollLeft() + (right - rightbound) + 20);
+                                this.checkInvisible(suppress);
+                                break;
+                            }
+                        }
+                    } else {
+                        if (index == "backward") {
+                            for (i = this.tabs.length; i-->0;) {
+                                tab = this.tabs[i].$el;
+                                left = tab.position().left;
+                                if (left < 0) {
+                                    this.$bar.scrollLeft(this.$bar.scrollLeft() + left - 26);
+                                    this.checkInvisible(suppress);
+                                    break;
+                                }
+                            }
+                        } else {
+                            if (typeof index == "number") {
+                                tab = this.tabs[index].$el;
+                                left = tab.position().left;
+                                right = left + parseInt(tab.css("width"));
+                                if (left < 0) {
+                                    this.$bar.scrollLeft(this.$bar.scrollLeft() + left - 26);
+                                    this.checkInvisible(suppress);
+                                } else {
+                                    if (right > rightbound) {
+                                        this.$bar.scrollLeft(this.$bar.scrollLeft() + (right - rightbound) + 20);
+                                        this.checkInvisible(suppress);
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        checkInvisible: function (suppress) {
+            var result = {
+                first: !this.isTabVisible(0),
+                last: !this.isTabVisible(this.tabs.length - 1)
+            }; ! suppress && this.fireEvent("tab:invisible", this, result);
+            return result;
+        },
+        hasInvisible: function () {
+            var _left_bound_ = this.$bar.offset().left,
+            _right_bound_ = _left_bound_ + this.$bar.width();
+            for (var i = this.tabs.length; i-->0;) {
+                if (!this.isTabVisible(i, _left_bound_, _right_bound_)) {
+                    return true;
+                }
+            }
+            return false;
+        },
+        isTabVisible: function (index) {
+            var leftbound = arguments[1] || this.$bar.offset().left,
+            rightbound = arguments[2] || (leftbound + this.$bar.width()),
+            left,
+            right,
+            tab,
+            rect;
+            if (index < this.tabs.length && index >= 0) {
+                tab = this.tabs[index].$el;
+                rect = tab.get(0).getBoundingClientRect();
+                left = rect.left;
+                right = rect.right;
+                return ! (left < leftbound) && !(right > rightbound);
+            }
+            return false;
+        }
+    });
+});

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

@@ -0,0 +1,645 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView"], function () {
+    Common.UI.CellStyler = Common.UI.BaseView.extend({
+        options: {
+            clickOffset: 10,
+            overwriteStyle: true,
+            maxBorderSize: 6,
+            halfBorderSize: false,
+            defaultBorderSize: 1,
+            defaultBorderColor: "#ccc"
+        },
+        template: _.template(['<div id="<%=id%>" class="tablestyler-cell" style="">', '<div class="cell-content" style="">', '<div class="content-text"></div>', "</div>", "</div>"].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this,
+            divContent = undefined,
+            virtualBorderSize, virtualBorderColor, borderSize = {},
+            borderColor = {},
+            borderAlfa = {};
+            me.id = me.options.id || Common.UI.getId();
+            me.clickOffset = me.options.clickOffset;
+            me.overwriteStyle = me.options.overwriteStyle;
+            me.maxBorderSize = me.options.maxBorderSize;
+            me.halfBorderSize = me.options.halfBorderSize;
+            me.defaultBorderSize = me.options.defaultBorderSize;
+            me.defaultBorderColor = me.options.defaultBorderColor;
+            me.col = me.options.col;
+            me.row = me.options.row;
+            virtualBorderSize = me.defaultBorderSize;
+            virtualBorderColor = new Common.Utils.RGBColor(me.defaultBorderColor);
+            borderSize = {
+                top: virtualBorderSize,
+                right: virtualBorderSize,
+                bottom: virtualBorderSize,
+                left: virtualBorderSize
+            };
+            borderColor = {
+                top: virtualBorderColor,
+                right: virtualBorderColor,
+                bottom: virtualBorderColor,
+                left: virtualBorderColor
+            };
+            borderAlfa = {
+                top: 1,
+                right: 1,
+                bottom: 1,
+                left: 1
+            };
+            me.rendered = false;
+            var applyStyle = function () {
+                if (!_.isUndefined(divContent)) {
+                    var brd = (borderSize.left > 0.1 && borderSize.left < 1) ? 1 : borderSize.left;
+                    var drawLeftSize = Math.abs((me.halfBorderSize) ? ((brd % 2) ? brd - 1 : brd) * 0.5 : brd);
+                    brd = (borderSize.right > 0.1 && borderSize.right < 1) ? 1 : borderSize.right;
+                    var drawRightSize = Math.abs((me.halfBorderSize) ? ((brd % 2) ? brd + 1 : brd) * 0.5 : brd);
+                    brd = (borderSize.top > 0.1 && borderSize.top < 1) ? 1 : borderSize.top;
+                    var drawTopSize = Math.abs((me.halfBorderSize) ? ((brd % 2) ? brd - 1 : brd) * 0.5 : brd);
+                    brd = (borderSize.bottom > 0.1 && borderSize.bottom < 1) ? 1 : borderSize.bottom;
+                    var drawBottomSize = Math.abs((me.halfBorderSize) ? ((brd % 2) ? brd + 1 : brd) * 0.5 : brd);
+                    var value = "inset " + ((drawLeftSize > 0.1 && drawLeftSize < 1) ? 1 : drawLeftSize) + "px" + " 0" + " 0 " + borderColor.left.toRGBA(borderAlfa.left) + ", " + "inset " + -1 * ((drawRightSize > 0.1 && drawRightSize < 1) ? 1 : drawRightSize) + "px" + " 0" + " 0 " + borderColor.right.toRGBA(borderAlfa.right) + ", " + "inset " + "0 " + ((drawTopSize > 0.1 && drawTopSize < 1) ? 1 : drawTopSize) + "px" + " 0 " + borderColor.top.toRGBA(borderAlfa.top) + ", " + "inset " + "0 " + -1 * ((drawBottomSize > 0.1 && drawBottomSize < 1) ? 1 : drawBottomSize) + "px" + " 0 " + borderColor.bottom.toRGBA(borderAlfa.bottom);
+                    divContent.css("box-shadow", value);
+                }
+            };
+            me.on("render:after", function (cmp) {
+                if (this.cmpEl) {
+                    divContent = this.cmpEl.find(".cell-content");
+                    applyStyle();
+                }
+                this.cmpEl.on("click", function (event) {
+                    var pos = {
+                        x: event.pageX - me.cmpEl.offset().left,
+                        y: event.pageY - me.cmpEl.offset().top
+                    };
+                    var ptInPoly = function (npol, xp, yp, x, y) {
+                        var i, j, c = 0;
+                        for (i = 0, j = npol - 1; i < npol; j = i++) {
+                            if ((((yp[i] <= y) && (y < yp[j])) || ((yp[j] <= y) && (y < yp[i]))) && (x < (xp[j] - xp[i]) * (y - yp[i]) / (yp[j] - yp[i]) + xp[i])) {
+                                c = !c;
+                            }
+                        }
+                        return c;
+                    };
+                    var meWidth = me.cmpEl.outerWidth();
+                    var meHeight = me.cmpEl.outerHeight();
+                    if (ptInPoly(4, [0, meWidth, meWidth - me.clickOffset, me.clickOffset], [0, 0, me.clickOffset, me.clickOffset], pos.x, pos.y)) {
+                        if (me.overwriteStyle) {
+                            if (borderSize.top != virtualBorderSize || !borderColor.top.isEqual(virtualBorderColor)) {
+                                borderSize.top = virtualBorderSize;
+                                borderColor.top = virtualBorderColor;
+                                borderAlfa.top = (virtualBorderSize < 1) ? 0.3 : 1;
+                            } else {
+                                borderSize.top = 0;
+                            }
+                        } else {
+                            borderSize.top = (borderSize.top > 0) ? 0 : virtualBorderSize;
+                            borderColor.top = virtualBorderColor;
+                        }
+                        me.fireEvent("borderclick", me, "t", borderSize.top, borderColor.top.toHex());
+                    } else {
+                        if (ptInPoly(4, [meWidth, meWidth, meWidth - me.clickOffset, meWidth - me.clickOffset], [0, meHeight, meHeight - me.clickOffset, me.clickOffset], pos.x, pos.y)) {
+                            if (me.overwriteStyle) {
+                                if (borderSize.right != virtualBorderSize || !borderColor.right.isEqual(virtualBorderColor)) {
+                                    borderSize.right = virtualBorderSize;
+                                    borderColor.right = virtualBorderColor;
+                                    borderAlfa.right = (virtualBorderSize < 1) ? 0.3 : 1;
+                                } else {
+                                    borderSize.right = 0;
+                                }
+                            } else {
+                                borderSize.right = (borderSize.right > 0) ? 0 : virtualBorderSize;
+                                borderColor.right = virtualBorderColor;
+                            }
+                            me.fireEvent("borderclick", me, "r", borderSize.right, borderColor.right.toHex());
+                        } else {
+                            if (ptInPoly(4, [0, me.clickOffset, meWidth - me.clickOffset, meWidth], [meHeight, meHeight - me.clickOffset, meHeight - me.clickOffset, meHeight], pos.x, pos.y)) {
+                                if (me.overwriteStyle) {
+                                    if (borderSize.bottom != virtualBorderSize || !borderColor.bottom.isEqual(virtualBorderColor)) {
+                                        borderSize.bottom = virtualBorderSize;
+                                        borderColor.bottom = virtualBorderColor;
+                                        borderAlfa.bottom = (virtualBorderSize < 1) ? 0.3 : 1;
+                                    } else {
+                                        borderSize.bottom = 0;
+                                    }
+                                } else {
+                                    borderSize.bottom = (borderSize.bottom > 0) ? 0 : virtualBorderSize;
+                                    borderColor.bottom = virtualBorderColor;
+                                }
+                                me.fireEvent("borderclick", me, "b", borderSize.bottom, borderColor.bottom.toHex());
+                            } else {
+                                if (ptInPoly(4, [0, me.clickOffset, me.clickOffset, 0], [0, me.clickOffset, meHeight - me.clickOffset, meHeight], pos.x, pos.y)) {
+                                    if (me.overwriteStyle) {
+                                        if (borderSize.left != virtualBorderSize || !borderColor.left.isEqual(virtualBorderColor)) {
+                                            borderSize.left = virtualBorderSize;
+                                            borderColor.left = virtualBorderColor;
+                                            borderAlfa.left = (virtualBorderSize < 1) ? 0.3 : 1;
+                                        } else {
+                                            borderSize.left = 0;
+                                        }
+                                    } else {
+                                        borderSize.left = (borderSize.left > 0) ? 0 : virtualBorderSize;
+                                        borderColor.left = virtualBorderColor;
+                                    }
+                                    me.fireEvent("borderclick", me, "l", borderSize.left, borderColor.left.toHex());
+                                }
+                            }
+                        }
+                    }
+                    applyStyle();
+                });
+            });
+            me.setBordersSize = function (borders, size) {
+                size = (size > this.maxBorderSize) ? this.maxBorderSize : size;
+                if (borders.indexOf("t") > -1) {
+                    borderSize.top = size;
+                    borderAlfa.top = (size < 1) ? 0.3 : 1;
+                }
+                if (borders.indexOf("r") > -1) {
+                    borderSize.right = size;
+                    borderAlfa.right = (size < 1) ? 0.3 : 1;
+                }
+                if (borders.indexOf("b") > -1) {
+                    borderSize.bottom = size;
+                    borderAlfa.bottom = (size < 1) ? 0.3 : 1;
+                }
+                if (borders.indexOf("l") > -1) {
+                    borderSize.left = size;
+                    borderAlfa.left = (size < 1) ? 0.3 : 1;
+                }
+                applyStyle();
+            };
+            me.setBordersColor = function (borders, color) {
+                var newColor = new Common.Utils.RGBColor(color);
+                if (borders.indexOf("t") > -1) {
+                    borderColor.top = newColor;
+                }
+                if (borders.indexOf("r") > -1) {
+                    borderColor.right = newColor;
+                }
+                if (borders.indexOf("b") > -1) {
+                    borderColor.bottom = newColor;
+                }
+                if (borders.indexOf("l") > -1) {
+                    borderColor.left = newColor;
+                }
+                applyStyle();
+            };
+            me.getBorderSize = function (border) {
+                switch (border) {
+                case "t":
+                    return borderSize.top;
+                case "r":
+                    return borderSize.right;
+                case "b":
+                    return borderSize.bottom;
+                case "l":
+                    return borderSize.left;
+                }
+                return null;
+            };
+            me.getBorderColor = function (border) {
+                switch (border) {
+                case "t":
+                    return borderColor.top.toHex();
+                case "r":
+                    return borderColor.right.toHex();
+                case "b":
+                    return borderColor.bottom.toHex();
+                case "l":
+                    return borderColor.left.toHex();
+                }
+                return null;
+            };
+            me.setVirtualBorderSize = function (size) {
+                virtualBorderSize = (size > this.maxBorderSize) ? this.maxBorderSize : size;
+            };
+            me.setVirtualBorderColor = function (color) {
+                var newColor = new Common.Utils.RGBColor(color);
+                if (virtualBorderColor.isEqual(newColor)) {
+                    return;
+                }
+                virtualBorderColor = newColor;
+            };
+            me.getVirtualBorderSize = function () {
+                return virtualBorderSize;
+            };
+            me.getVirtualBorderColor = function () {
+                return virtualBorderColor.toHex();
+            };
+            if (me.options.el) {
+                me.render();
+            }
+        },
+        render: function (parentEl) {
+            var me = this;
+            this.trigger("render:before", this);
+            if (!me.rendered) {
+                this.cmpEl = $(this.template({
+                    id: this.id
+                }));
+                if (parentEl) {
+                    this.setElement(parentEl, false);
+                    parentEl.html(this.cmpEl);
+                } else {
+                    $(this.el).html(this.cmpEl);
+                }
+            } else {
+                this.cmpEl = $(this.el);
+            }
+            me.rendered = true;
+            this.trigger("render:after", this);
+            return this;
+        }
+    });
+    Common.UI.TableStyler = Common.UI.BaseView.extend({
+        options: {
+            width: 200,
+            height: 200,
+            rows: 2,
+            columns: 2,
+            cellPadding: 10,
+            tablePadding: 10,
+            overwriteStyle: true,
+            maxBorderSize: 6,
+            spacingMode: false,
+            defaultBorderSize: 1,
+            defaultBorderColor: "#ccc"
+        },
+        template: _.template(['<div id="<%=scope.id%>" class="table-styler" style="position: relative; width: <%=scope.width%>px; height:<%=scope.height%>px;">', '<div style="position: absolute; left: 0; top: 0; width: <%=scope.tablePadding%>px; height: <%=scope.tablePadding%>px; border-bottom: 1px dotted gray; border-right: 1px dotted gray;"></div>', '<div style="position: absolute; left: <%=scope.tablePadding%>px; top: 0; right: <%=scope.tablePadding%>px; height: <%=scope.tablePadding%>px;">', '<div id="<%=scope.id%>-table-top-border-selector" style="position: absolute; z-index: 1; height: <%=scope.tablePadding%>px; left: 0; right: 0; top:  <%=scope.tablePadding * .5%>px;">', '<table width="100%" height="100%">', "<tr>", '<td id="<%=scope.id%>-table-top-border" style="height:50%; border-bottom: <%=borderSize.top%>px solid <%borderColor.top.toHex()%>;"></td>', "</tr>", "<tr>", "<td></td>", "</tr>", "</table>", "</div>", "</div>", '<div style="position: absolute; top: 0; right: 0; width: <%=scope.tablePadding%>px; height: <%=scope.tablePadding%>px; border-bottom: 1px dotted gray; border-left: 1px dotted gray;"></div>', '<div style="position: absolute; left: 0; top: <%=scope.tablePadding%>px; width: <%=scope.tablePadding%>px; height: <%=scope.height - 2 * scope.tablePadding%>px;">', '<div id="<%=scope.id%>-table-left-border-selector" style="position: absolute; z-index: 1; left: <%=scope.tablePadding * .5%>px; top: 0; bottom: 0; width: <%=scope.tablePadding%>px;">', '<table width="100%" height="100%">', "<tr>", '<td id="<%=scope.id%>-table-left-border" style="border-right: <%=borderSize.left%>px solid <%=borderColor.left.toHex()%>;"></td>', '<td width="50%"></td>', "</tr>", "</table>", "</div>", "</div>", '<div style="position: absolute; left: <%=scope.tablePadding%>px; top: <%=scope.tablePadding%>px; right: <%=scope.tablePadding%>px; bottom: <%=scope.tablePadding%>px;">', '<table cols="<%=scope.columns%>" width="100%" height="100%" style="border-collapse: inherit; border-spacing: <%= scope.spacingMode ? scope.cellPadding : 0 %>px;">', "<% for (var row = 0; row < scope.rows; row++) { %>", "<tr>", "<% for (var col = 0; col < scope.columns; col++) { %>", '<td id="<%=scope.id%>-cell-container-<%=col%>-<%=row%>" class="content-box"></td>', "<% } %>", "</tr>", "<% } %>", "</table>", "</div>", '<div style="position: absolute; right: 0; top: <%=scope.tablePadding%>px; width: <%=scope.tablePadding%>px; height: <%=scope.height - 2 * scope.tablePadding%>px;">', '<div id="<%=scope.id%>-table-right-border-selector" style="position: absolute; z-index: 1; right: <%=scope.tablePadding * .5%>px; top: 0; bottom: 0; width: <%=scope.tablePadding%>px;">', '<table width="100%" height="100%">', "<tr>", '<td id="<%=scope.id%>-table-right-border" style="border-right: <%=borderSize.right%>px solid <%=borderColor.right.toHex()%>;"></td>', '<td width="50%"></td>', "</tr>", "</table>", "</div>", "</div>", '<div style="position: absolute; left: 0; bottom: 0; width: <%=scope.tablePadding%>px; height: <%=scope.tablePadding%>px; border-top: 1pt dotted gray; border-right: 1pt dotted gray;"></div>', '<div style="position: absolute; left: <%=scope.tablePadding%>px; bottom: 0; right: <%=scope.tablePadding%>px; height: <%=scope.tablePadding%>px;">', '<div id="<%=scope.id%>-table-bottom-border-selector" style="position: absolute; z-index: 1; height: <%=scope.tablePadding%>px; left: 0; right: 0; bottom:  <%=scope.tablePadding * .5%>px;">', '<table width="100%" height="100%">', "<tr>", '<td id="<%=scope.id%>-table-bottom-border" style="height:50%; border-bottom: <%=borderSize.bottom%>px solid <%=borderColor.bottom.toHex()%>;"></td>', "</tr>", "<tr>", "<td></td>", "</tr>", "</table>", "</div>", "</div>", '<div style="position: absolute; bottom: 0; right: 0; width: <%=scope.tablePadding%>px; height: <%=scope.tablePadding%>px; border-top: 1pt dotted gray; border-left: 1pt dotted gray;"></div>', "</div>"].join("")),
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this,
+            topBorder, rightBorder, bottomBorder, leftBorder, topBorderSelector, rightBorderSelector, bottomBorderSelector, leftBorderSelector, virtualBorderSize, virtualBorderColor;
+            me.id = me.options.id || Common.UI.getId();
+            me.width = me.options.width;
+            me.height = me.options.height;
+            me.rows = me.options.rows;
+            me.columns = me.options.columns;
+            me.cellPadding = me.options.cellPadding;
+            me.tablePadding = me.options.tablePadding;
+            me.overwriteStyle = me.options.overwriteStyle;
+            me.maxBorderSize = me.options.maxBorderSize;
+            me.spacingMode = me.options.spacingMode;
+            me.defaultBorderSize = me.options.defaultBorderSize;
+            me.defaultBorderColor = me.options.defaultBorderColor;
+            virtualBorderSize = (me.defaultBorderSize > me.maxBorderSize) ? me.maxBorderSize : me.defaultBorderSize;
+            virtualBorderColor = new Common.Utils.RGBColor(me.defaultBorderColor);
+            var borderSize = {
+                top: virtualBorderSize,
+                right: virtualBorderSize,
+                bottom: virtualBorderSize,
+                left: virtualBorderSize
+            };
+            var borderColor = {
+                top: virtualBorderColor,
+                right: virtualBorderColor,
+                bottom: virtualBorderColor,
+                left: virtualBorderColor
+            };
+            me.rendered = false;
+            var applyStyles = function () {
+                topBorder && topBorder.css("border-bottom", ((borderSize.top > 0.1 && borderSize.top < 1) ? 1 : borderSize.top) + "px solid " + borderColor.top.toRGBA((borderSize.top < 1) ? 0.2 : 1));
+                rightBorder && rightBorder.css("border-right", ((borderSize.right > 0.1 && borderSize.right < 1) ? 1 : borderSize.right) + "px solid " + borderColor.right.toRGBA((borderSize.right < 1) ? 0.2 : 1));
+                bottomBorder && bottomBorder.css("border-bottom", ((borderSize.bottom > 0.1 && borderSize.bottom < 1) ? 1 : borderSize.bottom) + "px solid " + borderColor.bottom.toRGBA((borderSize.bottom < 1) ? 0.2 : 1));
+                leftBorder && leftBorder.css("border-right", ((borderSize.left > 0.1 && borderSize.left < 1) ? 1 : borderSize.left) + "px solid " + borderColor.left.toRGBA((borderSize.left < 1) ? 0.2 : 1));
+                redraw(topBorderSelector);
+                redraw(rightBorderSelector);
+                redraw(bottomBorderSelector);
+                redraw(leftBorderSelector);
+            };
+            var redraw = function (el) {
+                return el.hide(0, function () {
+                    $(this).show();
+                });
+            };
+            me.on("render:after", function (cmp) {
+                var meId = me.id;
+                topBorder = $("#" + meId + "-table-top-border");
+                rightBorder = $("#" + meId + "-table-right-border");
+                bottomBorder = $("#" + meId + "-table-bottom-border");
+                leftBorder = $("#" + meId + "-table-left-border");
+                topBorderSelector = $("#" + meId + "-table-top-border-selector");
+                rightBorderSelector = $("#" + meId + "-table-right-border-selector");
+                bottomBorderSelector = $("#" + meId + "-table-bottom-border-selector");
+                leftBorderSelector = $("#" + meId + "-table-left-border-selector");
+                topBorderSelector.on("click", function (e) {
+                    if (me.overwriteStyle) {
+                        if (borderSize.top != virtualBorderSize || !borderColor.top.isEqual(virtualBorderColor)) {
+                            borderSize.top = virtualBorderSize;
+                            borderColor.top = virtualBorderColor;
+                        } else {
+                            borderSize.top = 0;
+                        }
+                    } else {
+                        borderSize.top = (borderSize.top > 0) ? 0 : virtualBorderSize;
+                        borderColor.top = virtualBorderColor;
+                    }
+                    topBorder.css("border-bottom", ((borderSize.top > 0.1 && borderSize.top < 1) ? 1 : borderSize.top) + "px solid " + borderColor.top.toRGBA((borderSize.top < 1) ? 0.2 : 1));
+                    redraw(topBorderSelector);
+                    me.fireEvent("borderclick", me, "t", borderSize.top, borderColor.top.toHex());
+                });
+                rightBorderSelector.on("click", function (e) {
+                    if (me.overwriteStyle) {
+                        if (borderSize.right != virtualBorderSize || !borderColor.right.isEqual(virtualBorderColor)) {
+                            borderSize.right = virtualBorderSize;
+                            borderColor.right = virtualBorderColor;
+                        } else {
+                            borderSize.right = 0;
+                        }
+                    } else {
+                        borderSize.right = (borderSize.right > 0) ? 0 : virtualBorderSize;
+                        borderColor.right = virtualBorderColor;
+                    }
+                    rightBorder.css("border-right", ((borderSize.right > 0.1 && borderSize.right < 1) ? 1 : borderSize.right) + "px solid " + borderColor.right.toRGBA((borderSize.right < 1) ? 0.2 : 1));
+                    redraw(rightBorderSelector);
+                    me.fireEvent("borderclick", me, "r", borderSize.right, borderColor.right.toHex());
+                });
+                bottomBorderSelector.on("click", function (e) {
+                    if (me.overwriteStyle) {
+                        if (borderSize.bottom != virtualBorderSize || !borderColor.bottom.isEqual(virtualBorderColor)) {
+                            borderSize.bottom = virtualBorderSize;
+                            borderColor.bottom = virtualBorderColor;
+                        } else {
+                            borderSize.bottom = 0;
+                        }
+                    } else {
+                        borderSize.bottom = (borderSize.bottom > 0) ? 0 : virtualBorderSize;
+                        borderColor.bottom = virtualBorderColor;
+                    }
+                    bottomBorder.css("border-bottom", ((borderSize.bottom > 0.1 && borderSize.bottom < 1) ? 1 : borderSize.bottom) + "px solid " + borderColor.bottom.toRGBA((borderSize.bottom < 1) ? 0.2 : 1));
+                    redraw(bottomBorderSelector);
+                    me.fireEvent("borderclick", me, "b", borderSize.bottom, borderColor.bottom.toHex());
+                });
+                leftBorderSelector.on("click", function (e) {
+                    if (me.overwriteStyle) {
+                        if (borderSize.left != virtualBorderSize || !borderColor.left.isEqual(virtualBorderColor)) {
+                            borderSize.left = virtualBorderSize;
+                            borderColor.left = virtualBorderColor;
+                        } else {
+                            borderSize.left = 0;
+                        }
+                    } else {
+                        borderSize.left = (borderSize.left > 0) ? 0 : virtualBorderSize;
+                        borderColor.left = virtualBorderColor;
+                    }
+                    leftBorder.css("border-right", ((borderSize.left > 0.1 && borderSize.left < 1) ? 1 : borderSize.left) + "px solid " + borderColor.left.toRGBA((borderSize.left < 1) ? 0.2 : 1));
+                    redraw(leftBorderSelector);
+                    me.fireEvent("borderclick", me, "l", borderSize.left, borderColor.left.toHex());
+                });
+            });
+            me.getVirtualBorderSize = function () {
+                return virtualBorderSize;
+            };
+            me.getVirtualBorderColor = function () {
+                return virtualBorderColor.toHex();
+            };
+            me.setVirtualBorderSize = function (size) {
+                size = (size > me.maxBorderSize) ? me.maxBorderSize : size;
+                virtualBorderSize = size;
+                for (var row = 0; row < me.rows; row++) {
+                    for (var col = 0; col < me.columns; col++) {
+                        var cell = me.getCell(col, row);
+                        cell.setVirtualBorderSize(size);
+                    }
+                }
+            };
+            me.setVirtualBorderColor = function (color) {
+                var newColor = new Common.Utils.RGBColor(color);
+                if (virtualBorderColor.isEqual(newColor)) {
+                    return;
+                }
+                virtualBorderColor = newColor;
+                for (var row = 0; row < me.rows; row++) {
+                    for (var col = 0; col < me.columns; col++) {
+                        var cell = me.getCell(col, row);
+                        cell.setVirtualBorderColor(virtualBorderColor.toHex());
+                    }
+                }
+            };
+            me.setBordersSize = function (borders, size) {
+                size = (size > me.maxBorderSize) ? me.maxBorderSize : size;
+                if (borders.indexOf("t") > -1) {
+                    borderSize.top = size;
+                }
+                if (borders.indexOf("r") > -1) {
+                    borderSize.right = size;
+                }
+                if (borders.indexOf("b") > -1) {
+                    borderSize.bottom = size;
+                }
+                if (borders.indexOf("l") > -1) {
+                    borderSize.left = size;
+                }
+                applyStyles();
+            };
+            me.setBordersColor = function (borders, color) {
+                var newColor = new Common.Utils.RGBColor(color);
+                if (borders.indexOf("t") > -1) {
+                    borderColor.top = newColor;
+                }
+                if (borders.indexOf("r") > -1) {
+                    borderColor.right = newColor;
+                }
+                if (borders.indexOf("b") > -1) {
+                    borderColor.bottom = newColor;
+                }
+                if (borders.indexOf("l") > -1) {
+                    borderColor.left = newColor;
+                }
+                applyStyles();
+            };
+            me.getBorderSize = function (border) {
+                switch (border) {
+                case "t":
+                    return borderSize.top;
+                case "r":
+                    return borderSize.right;
+                case "b":
+                    return borderSize.bottom;
+                case "l":
+                    return borderSize.left;
+                }
+                return null;
+            };
+            me.getBorderColor = function (border) {
+                switch (border) {
+                case "t":
+                    return borderColor.top.toHex();
+                case "r":
+                    return borderColor.right.toHex();
+                case "b":
+                    return borderColor.bottom.toHex();
+                case "l":
+                    return borderColor.left.toHex();
+                }
+                return null;
+            };
+            if (me.options.el) {
+                me.render(null, {
+                    borderSize: borderSize,
+                    borderColor: borderColor,
+                    virtualBorderSize: virtualBorderSize,
+                    virtualBorderColor: virtualBorderColor
+                });
+            }
+        },
+        render: function (parentEl) {
+            var me = this,
+            cfg = arguments[1];
+            this.trigger("render:before", this);
+            if (!me.rendered) {
+                this.cmpEl = $(this.template(_.extend({
+                    scope: me
+                },
+                cfg)));
+                if (parentEl) {
+                    this.setElement(parentEl, false);
+                    this.setElement(parentEl, false);
+                    parentEl.html(this.cmpEl);
+                } else {
+                    $(this.el).html(this.cmpEl);
+                }
+            } else {
+                this.cmpEl = $(this.el);
+            }
+            if (!me.rendered) {
+                var el = this.cmpEl;
+                this._cells = [];
+                for (var row = 0; row < me.rows; row++) {
+                    for (var col = 0; col < me.columns; col++) {
+                        var cellStyler = new Common.UI.CellStyler({
+                            el: $("#" + me.id + "-cell-container-" + col + "-" + row),
+                            overwriteStyle: me.overwriteStyle,
+                            halfBorderSize: !me.spacingMode,
+                            defaultBorderSize: me.spacingMode ? cfg.virtualBorderSize : 0,
+                            defaultBorderColor: cfg.virtualBorderColor.toHex(),
+                            id: me.id + "-cell-" + col + "-" + row,
+                            col: col,
+                            row: row
+                        });
+                        this._cells.push(cellStyler);
+                        cellStyler.on("borderclick", function (cell, type, size, color) {
+                            var cellCol, cellRow, curCell;
+                            if (type == "t") {
+                                if (cell.row > 0) {
+                                    for (cellCol = 0; cellCol < me.columns; cellCol++) {
+                                        curCell = me.getCell(cellCol, cell.row - 1);
+                                        curCell.setBordersSize("b", size);
+                                        curCell.setBordersColor("b", color);
+                                    }
+                                }
+                                for (cellCol = 0; cellCol < me.columns; cellCol++) {
+                                    curCell = me.getCell(cellCol, cell.row);
+                                    if (cell.halfBorderSize && cell.row < 1) {
+                                        curCell.setBordersSize("t", 0);
+                                    } else {
+                                        curCell.setBordersSize("t", size);
+                                    }
+                                    curCell.setBordersColor("t", color);
+                                }
+                            } else {
+                                if (type == "b") {
+                                    if (cell.row < me.rows - 1) {
+                                        for (cellCol = 0; cellCol < me.columns; cellCol++) {
+                                            curCell = me.getCell(cellCol, cell.row + 1);
+                                            curCell.setBordersSize("t", size);
+                                            curCell.setBordersColor("t", color);
+                                        }
+                                    }
+                                    for (cellCol = 0; cellCol < me.columns; cellCol++) {
+                                        curCell = me.getCell(cellCol, cell.row);
+                                        if (cell.halfBorderSize && cell.row >= me.rows - 1) {
+                                            curCell.setBordersSize("b", 0);
+                                        } else {
+                                            curCell.setBordersSize("b", size);
+                                        }
+                                        curCell.setBordersColor("b", color);
+                                    }
+                                } else {
+                                    if (type == "l") {
+                                        if (cell.col > 0) {
+                                            for (cellRow = 0; cellRow < me.rows; cellRow++) {
+                                                curCell = me.getCell(cell.col - 1, cellRow);
+                                                curCell.setBordersSize("r", size);
+                                                curCell.setBordersColor("r", color);
+                                            }
+                                        }
+                                        for (cellRow = 0; cellRow < me.rows; cellRow++) {
+                                            curCell = me.getCell(cell.col, cellRow);
+                                            if (cell.halfBorderSize && cell.col < 1) {
+                                                curCell.setBordersSize("l", 0);
+                                            } else {
+                                                curCell.setBordersSize("l", size);
+                                            }
+                                            curCell.setBordersColor("l", color);
+                                        }
+                                    } else {
+                                        if (type == "r") {
+                                            if (cell.col < me.columns - 1) {
+                                                for (cellRow = 0; cellRow < me.rows; cellRow++) {
+                                                    curCell = me.getCell(cell.col + 1, cellRow);
+                                                    curCell.setBordersSize("l", size);
+                                                    curCell.setBordersColor("l", color);
+                                                }
+                                            }
+                                            for (cellRow = 0; cellRow < me.rows; cellRow++) {
+                                                curCell = me.getCell(cell.col, cellRow);
+                                                if (cell.halfBorderSize && cell.col >= me.columns - 1) {
+                                                    curCell.setBordersSize("r", 0);
+                                                } else {
+                                                    curCell.setBordersSize("r", size);
+                                                }
+                                                curCell.setBordersColor("r", color);
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        });
+                    }
+                }
+            }
+            me.rendered = true;
+            this.trigger("render:after", this);
+            return this;
+        },
+        getCell: function (col, row) {
+            return _.findWhere(this._cells, {
+                id: this.id + "-cell-" + col + "-" + row
+            });
+        }
+    });
+});

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

@@ -1,366 +1,361 @@
-/*
- * (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();
-    }
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView", "common/main/lib/view/ExtendedColorDialog"], function () {
+    Common.UI.ThemeColorPalette = Common.UI.BaseView.extend({
+        options: {
+            dynamiccolors: 10,
+            allowReselect: true,
+            value: "000000"
+        },
+        template: _.template('<div style="padding: 12px;">' + "<% var me = this; %>" + "<% $(colors).each(function(num, item) { %>" + '<% if (me.isBlankSeparator(item)) { %> <div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div>' + '<% } else if (me.isSeparator(item)) { %> </div><div class="palette-color-separator" style="width:100%;height:1px;float:left;border-bottom: 1px solid #E0E0E0"></div><div style="padding: 12px;">' + "<% } else if (me.isColor(item)) { %> " + '<a class="palette-color color-<%=item%>" style="background:#<%=item%>" hidefocus="on">' + '<em><span style="background:#<%=item%>;" unselectable="on">&#160;</span></em>' + "</a>" + "<% } else if (me.isTransparent(item)) { %>" + '<a class="color-<%=item%>" hidefocus="on">' + '<em><span unselectable="on">&#160;</span></em>' + "</a>" + "<% } else if (me.isEffect(item)) { %>" + '<a effectid="<%=item.effectId%>" effectvalue="<%=item.effectValue%>" class="palette-color-effect color-<%=item.color%>" style="background:#<%=item.color%>" hidefocus="on">' + '<em><span style="background:#<%=item.color%>;" unselectable="on">&#160;</span></em>' + "</a>" + "<% } else if (me.isCaption(item)) { %>" + '<div class="palette-color-caption" style="width:100%;float:left;font-size: 11px;"><%=item%></div>' + "<% } %>" + "<% }); %>" + "</div>" + "<% if (me.options.dynamiccolors!==undefined) { %>" + '<div class="palette-color-spacer" style="width:100%;height:8px;float:left;"></div><div style="padding: 12px;">' + "<% for (var i=0; i<me.options.dynamiccolors; i++) { %>" + '<a class="color-dynamic-<%=i%> dynamic-empty-color" style="background:#ffffff" color="" hidefocus="on">' + '<em><span unselectable="on">&#160;</span></em></a>' + "<% } %>" + "<% } %>" + "</div>"),
+        colorRe: /(?:^|\s)color-(.{6})(?:\s|$)/,
+        selectedCls: "selected",
+        initialize: function (options) {
+            Common.UI.BaseView.prototype.initialize.call(this, options);
+            var me = this,
+            el = $(this.el);
+            this.colors = me.options.colors || [{
+                color: "000000",
+                effectId: 1
+            },
+            {
+                color: "FFFFFF",
+                effectId: 2
+            },
+            {
+                color: "000000",
+                effectId: 3
+            },
+            {
+                color: "FFFFFF",
+                effectId: 4
+            },
+            {
+                color: "000000",
+                effectId: 5
+            },
+            {
+                color: "FF0000",
+                effectId: 1
+            },
+            {
+                color: "FF6600",
+                effectId: 1
+            },
+            {
+                color: "FFFF00",
+                effectId: 2
+            },
+            {
+                color: "CCFFCC",
+                effectId: 3
+            },
+            {
+                color: "008000",
+                effectId: 4
+            },
+            "-", "--", "-", "000000", "5301B3", "980ABD", "B2275F", "F83D26", "F86A1D", "F7AC16", "F7CA12", "FAFF44", "D6EF39"];
+            el.addClass("theme-colorpalette");
+            this.render();
+            if (this.options.updateColorsArr) {
+                this.updateColors(this.options.updateColorsArr[0], this.options.updateColorsArr[1]);
+            }
+            if (this.options.value) {
+                this.select(this.options.value, true);
+            }
+            this.updateCustomColors();
+            el.closest(".btn-group").on("show.bs.dropdown", _.bind(this.updateCustomColors, this));
+            el.closest(".dropdown-submenu").on("show.bs.dropdown", _.bind(this.updateCustomColors, this));
+            el.on("click", _.bind(this.handleClick, this));
+        },
+        render: function () {
+            $(this.el).html(this.template({
+                colors: this.colors
+            }));
+            return this;
+        },
+        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);
+        },
+        getColor: function () {
+            return this.value;
+        },
+        updateCustomColors: function () {
+            var el = $(this.el);
+            if (el) {
+                var colors = localStorage["asc." + window.storagename + ".colors.custom"];
+                colors = colors ? colors.split(",") : [];
+                var i = -1,
+                colorEl, c = colors.length < this.options.dynamiccolors ? colors.length : this.options.dynamiccolors;
+                while (++i < c) {
+                    colorEl = el.find(".color-dynamic-" + i);
+                    colorEl.removeClass("dynamic-empty-color").attr("color", colors[i]);
+                    colorEl.find("span").css({
+                        "background-color": "#" + colors[i]
+                    });
+                }
+            }
+        },
+        handleClick: function (e) {
+            var me = this;
+            var target = $(e.target).closest("a");
+            var color, cmp;
+            if (target.length == 0) {
+                return;
+            }
+            if (target.hasClass("color-transparent")) {
+                $(me.el).find("a." + me.selectedCls).removeClass(me.selectedCls);
+                target.addClass(me.selectedCls);
+                me.value = "transparent";
+                me.trigger("select", me, "transparent");
+            } else {
+                if (! (target[0].className.search("color-dynamic") < 0)) {
+                    if (!/dynamic-empty-color/.test(target[0].className)) {
+                        $(me.el).find("a." + me.selectedCls).removeClass(me.selectedCls);
+                        target.addClass(me.selectedCls);
+                        color = target.attr("color");
+                        if (color) {
+                            me.trigger("select", me, color);
+                        }
+                        me.value = color.toUpperCase();
+                    } else {
+                        setTimeout(function () {
+                            me.addNewColor();
+                        },
+                        10);
+                    }
+                } else {
+                    if (!/^[a-fA-F0-9]{6}$/.test(me.value) || _.indexOf(me.colors, me.value) < 0) {
+                        me.value = false;
+                    }
+                    $(me.el).find("a." + me.selectedCls).removeClass(me.selectedCls);
+                    target.addClass(me.selectedCls);
+                    color = target[0].className.match(me.colorRe)[1];
+                    if (target.hasClass("palette-color-effect")) {
+                        var effectId = parseInt(target.attr("effectid"));
+                        if (color) {
+                            me.value = color.toUpperCase();
+                            me.trigger("select", me, {
+                                color: color,
+                                effectId: effectId
+                            });
+                        }
+                    } else {
+                        if (/#?[a-fA-F0-9]{6}/.test(color)) {
+                            color = /#?([a-fA-F0-9]{6})/.exec(color)[1].toUpperCase();
+                            me.value = color;
+                            me.trigger("select", me, color);
+                        }
+                    }
+                }
+            }
+        },
+        setCustomColor: function (color) {
+            var el = $(this.el);
+            color = /#?([a-fA-F0-9]{6})/.exec(color);
+            if (color) {
+                this.saveCustomColor(color[1]);
+                el.find("a." + this.selectedCls).removeClass(this.selectedCls);
+                var child = el.find(".dynamic-empty-color");
+                if (child.length == 0) {
+                    this.updateCustomColors();
+                    child = el.find(".color-dynamic-" + (this.options.dynamiccolors - 1));
+                }
+                child.first().removeClass("dynamic-empty-color").addClass(this.selectedCls).attr("color", color[1]);
+                child.first().find("span").css({
+                    "background-color": "#" + color[1]
+                });
+                this.select(color[1], true);
+            }
+        },
+        saveCustomColor: function (color) {
+            var colors = localStorage["asc." + window.storagename + ".colors.custom"];
+            colors = colors ? colors.split(",") : [];
+            if (colors.push(color) > this.options.dynamiccolors) {
+                colors.shift();
+            }
+            localStorage["asc." + window.storagename + ".colors.custom"] = colors.join().toUpperCase();
+        },
+        addNewColor: function (defcolor) {
+            var me = this;
+            var win = new Common.UI.ExtendedColorDialog({});
+            win.on("onmodalresult", function (mr) {
+                me._isdlgopen = false;
+                if (mr == 1) {
+                    me.setCustomColor(win.getColor());
+                    me.fireEvent("select", me, win.getColor());
+                }
+            });
+            me._isdlgopen = true;
+            win.setColor((me.value !== undefined && me.value !== false) ? me.value : ((defcolor !== undefined) ? defcolor : "000000"));
+            win.show();
+        },
+        isDialogOpen: function () {
+            return this._isdlgopen == true;
+        },
+        select: function (color, suppressEvent) {
+            var el = $(this.el);
+            el.find("a." + this.selectedCls).removeClass(this.selectedCls);
+            if (typeof(color) == "object") {
+                var effectEl;
+                if (color.effectId !== undefined) {
+                    effectEl = el.find('a[effectid="' + color.effectId + '"]').first();
+                    if (effectEl.length > 0) {
+                        effectEl.addClass(this.selectedCls);
+                        this.value = effectEl[0].className.match(this.colorRe)[1].toUpperCase();
+                    } else {
+                        this.value = false;
+                    }
+                } else {
+                    if (color.effectValue !== undefined) {
+                        effectEl = el.find('a[effectvalue="' + color.effectValue + '"].color-' + color.color.toUpperCase()).first();
+                        if (effectEl.length > 0) {
+                            effectEl.addClass(this.selectedCls);
+                            this.value = effectEl[0].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) && _.indexOf(this.colors, color) >= 0) {
+                    if (_.indexOf(this.colors, this.value) < 0) {
+                        this.value = false;
+                    }
+                    if (color != this.value || this.options.allowReselect) {
+                        (color == "transparent") ? el.find("a.color-transparent").addClass(this.selectedCls) : el.find("a.palette-color.color-" + color).first().addClass(this.selectedCls);
+                        this.value = color;
+                        if (suppressEvent !== true) {
+                            this.fireEvent("select", this, color);
+                        }
+                    }
+                } else {
+                    var co = el.find("#" + color).first();
+                    if (co.length == 0) {
+                        co = el.find('a[color="' + color + '"]').first();
+                    }
+                    if (co.length > 0) {
+                        co.addClass(this.selectedCls);
+                        this.value = color.toUpperCase();
+                    }
+                }
+            }
+        },
+        updateColors: function (effectcolors, standartcolors) {
+            if (effectcolors === undefined || standartcolors === undefined) {
+                return;
+            }
+            var me = this,
+            el = $(this.el);
+            if (me.aColorElements === undefined) {
+                me.aColorElements = el.find("a.palette-color");
+            }
+            if (me.aEffectElements === undefined) {
+                me.aEffectElements = el.find("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 = $(me.aColorElements[aColorIdx]);
+                    aEl.removeClass("color-" + me.colors[i]);
+                    me.colors[i] = standartcolors[aColorIdx].toUpperCase();
+                    aEl.addClass("color-" + me.colors[i]);
+                    aEl.css({
+                        background: "#" + me.colors[i]
+                    });
+                    aEl.find("span").first().css({
+                        background: "#" + me.colors[i]
+                    });
+                    aColorIdx++;
+                } else {
+                    if (typeof(me.colors[i]) == "object" && me.colors[i].effectId !== undefined) {
+                        if (aEffectIdx >= effectcolors.length) {
+                            continue;
+                        }
+                        aEl = $(me.aEffectElements[aEffectIdx]);
+                        effectcolors[aEffectIdx].color = effectcolors[aEffectIdx].color.toUpperCase();
+                        if (me.colors[i].color !== effectcolors[aEffectIdx].color) {
+                            aEl.removeClass("color-" + me.colors[i].color);
+                            aEl.addClass("color-" + effectcolors[aEffectIdx].color);
+                            aEl.css({
+                                background: "#" + effectcolors[aEffectIdx].color
+                            });
+                            aEl.find("span").first().css({
+                                background: "#" + effectcolors[aEffectIdx].color
+                            });
+                        }
+                        if (me.colors[i].effectId !== effectcolors[aEffectIdx].effectId) {
+                            aEl.attr("effectid", "" + effectcolors[aEffectIdx].effectId);
+                        }
+                        if (me.colors[i].effectValue !== effectcolors[aEffectIdx].effectValue) {
+                            aEl.attr("effectvalue", "" + effectcolors[aEffectIdx].effectValue);
+                        }
+                        me.colors[i] = effectcolors[aEffectIdx];
+                        aEffectIdx++;
+                    }
+                }
+            }
+            this.options.updateColorsArr = undefined;
+        },
+        clearSelection: function (suppressEvent) {
+            $(this.el).find("a." + this.selectedCls).removeClass(this.selectedCls);
+            this.value = undefined;
+        }
+    });
 });

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

@@ -0,0 +1,88 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView"], function () {
+    var groups = {};
+    function toggleGroup(cmp, state) {
+        var g, i, l;
+        if (state) {
+            g = groups[cmp.toggleGroup];
+            for (i = 0, l = g.length; i < l; i++) {
+                if (g[i] !== cmp) {
+                    if (g[i].isActive) {
+                        g[i].isActive() && g[i].toggle(false);
+                    } else {
+                        g[i].toggle(false);
+                    }
+                }
+            }
+        }
+    }
+    Common.UI.ToggleManager = {
+        register: function (cmp) {
+            if (!cmp.toggleGroup) {
+                return;
+            }
+            var group = groups[cmp.toggleGroup];
+            if (!group) {
+                group = groups[cmp.toggleGroup] = [];
+            }
+            group.push(cmp);
+            cmp.on("toggle", toggleGroup);
+        },
+        unregister: function (cmp) {
+            if (!cmp.toggleGroup) {
+                return;
+            }
+            var group = groups[cmp.toggleGroup];
+            if (group) {
+                _.without(group, cmp);
+                cmp.off("toggle", toggleGroup);
+            }
+        },
+        getToggled: function (group) {
+            var g = groups[group],
+            i = 0,
+            len;
+            if (g) {
+                for (len = g.length; i < len; i++) {
+                    if (g[i].pressed === true || g[i].checked === true) {
+                        return g[i];
+                    }
+                }
+            }
+            return null;
+        }
+    };
+});

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

@@ -0,0 +1,91 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ define(["tip", "backbone"], function () {
+    var Tooltip = function (options) {
+        this.$element = this.placement = undefined;
+        this.init.call(this, options);
+    };
+    _.extend(Tooltip.prototype, Backbone.Events, {
+        init: function (opts) {
+            this.$element = opts.owner instanceof Backbone.View ? opts.owner.$el : $(opts.owner);
+            this.placement = opts.placement;
+            if (this.$element.data("bs.tooltip")) {
+                this.$element.removeData("bs.tooltip");
+            }
+            this.$element.tooltip({
+                title: opts.title,
+                trigger: "manual",
+                placement: opts.placement,
+                offset: opts.offset,
+                cls: opts.cls,
+                html: opts.html,
+                hideonclick: opts.hideonclick
+            });
+            if (opts.hideonclick) {
+                var tip = this.$element.data("bs.tooltip");
+                tip.tip().on("click", function () {
+                    tip.hide();
+                });
+            }
+            this.$element.on("shown.bs.tooltip", _.bind(this.onTipShown, this));
+            this.$element.on("hidden.bs.tooltip", _.bind(this.onTipHidden, this));
+        },
+        show: function (at) {
+            this.getBSTip().show(at);
+        },
+        hide: function () {
+            this.getBSTip().hide();
+        },
+        setTitle: function (title) {
+            var tip = this.getBSTip();
+            tip.options.title = title;
+        },
+        updateTitle: function () {
+            var tip = this.getBSTip();
+            tip.$tip.find(".tooltip-inner")[tip.options.html ? "html" : "text"](tip.options.title);
+        },
+        getBSTip: function () {
+            return this.$element.data("bs.tooltip");
+        },
+        onTipShown: function () {
+            this.trigger("tooltip:show", this);
+        },
+        onTipHidden: function () {
+            this.trigger("tooltip:hide", this);
+        },
+        isVisible: function () {
+            return this.getBSTip().tip().is(":visible");
+        }
+    });
+    Common.UI = Common.UI || {};
+    Common.UI.Tooltip = Tooltip;
+});

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

@@ -0,0 +1,471 @@
+/*
+ * (c) Copyright Ascensio System SIA 2010-2015
+ *
+ * This program is a free software product. You can redistribute it and/or 
+ * modify it under the terms of the GNU Affero General Public License (AGPL) 
+ * version 3 as published by the Free Software Foundation. In accordance with 
+ * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect 
+ * that Ascensio System SIA expressly excludes the warranty of non-infringement
+ * of any third-party rights.
+ *
+ * This program is distributed WITHOUT ANY WARRANTY; without even the implied 
+ * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR  PURPOSE. For 
+ * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
+ *
+ * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
+ * EU, LV-1021.
+ *
+ * The  interactive user interfaces in modified source and object code versions
+ * of the Program must display Appropriate Legal Notices, as required under 
+ * Section 5 of the GNU AGPL version 3.
+ *
+ * Pursuant to Section 7(b) of the License you must retain the original Product
+ * logo when distributing the program. Pursuant to Section 7(e) we decline to
+ * grant you any rights under trademark law for use of our trademarks.
+ *
+ * All the Product's GUI elements, including illustrations and icon sets, as
+ * well as technical writing content are licensed under the terms of the
+ * Creative Commons Attribution-ShareAlike 4.0 International. See the License
+ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
+ *
+ */
+ if (Common === undefined) {
+    var Common = {};
+}
+define(["common/main/lib/component/BaseView"], function () {
+    Common.UI.Window = Common.UI.BaseView.extend(_.extend((function () {
+        var config = {
+            closable: true,
+            header: true,
+            modal: true,
+            width: 300,
+            height: "auto",
+            title: "Title",
+            alias: "Window",
+            cls: "",
+            toolclose: "close"
+        };
+        var template = '<div class="asc-window<%= modal?" modal":"" %><%= cls?" "+cls:"" %>" id="<%= id %>" style="width:<%= width %>px;">' + "<% if (header==true) { %>" + '<div class="header">' + "<% if (closable!==false) %>" + '<div class="tool close"></div>' + "<% %>" + '<span class="title"><%= title %></span> ' + "</div>" + "<% } %>" + '<div class="body"><%= tpl %></div>' + "</div>";
+        function _getMask() {
+            var mask = $(".modals-mask");
+            if (mask.length == 0) {
+                mask = $("<div class='modals-mask'>").appendTo(document.body).hide();
+            }
+            return mask;
+        }
+        function _keydown(event) {
+            if (!this.isLocked() && this.isVisible()) {
+                switch (event.keyCode) {
+                case Common.UI.Keys.ESC:
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (this.initConfig.closable !== false) {
+                        this.initConfig.toolclose == "hide" ? this.hide() : this.close();
+                    }
+                    return false;
+                    break;
+                case Common.UI.Keys.RETURN:
+                    if (this.$window.find(".btn.primary").length) {
+                        if ((this.initConfig.onprimary || this.onPrimary).call(this) === false) {
+                            event.preventDefault();
+                            return false;
+                        }
+                    }
+                    break;
+                }
+            }
+        }
+        function _centre() {
+            if (window.innerHeight == undefined) {
+                var main_width = document.documentElement.offsetWidth;
+                var main_height = document.documentElement.offsetHeight;
+            } else {
+                main_width = window.innerWidth;
+                main_height = window.innerHeight;
+            }
+            if (this.initConfig.height == "auto") {
+                var win_height = parseInt(this.$window.find(".body").css("height"));
+                this.initConfig.header && (win_height += parseInt(this.$window.find(".header").css("height")));
+            } else {
+                win_height = this.initConfig.height;
+            }
+            var top = Math.floor(((parseInt(main_height) - parseInt(win_height)) / 2) * 0.9);
+            var left = Math.floor((parseInt(main_width) - parseInt(this.initConfig.width)) / 2);
+            this.$window.css("left", left);
+            this.$window.css("top", top);
+        }
+        function _getTransformation(end) {
+            return {
+                "-webkit-transition": "0.3s opacity",
+                "-moz-transition": "0.3s opacity",
+                "-ms-transition": "0.3s opacity",
+                "-o-transition": "0.3s opacity",
+                "opacity": end
+            };
+        }
+        function _dragstart(event) {
+            if ($(event.target).hasClass("close")) {
+                return;
+            }
+            Common.UI.Menu.Manager.hideAll();
+            this.dragging.enabled = true;
+            this.dragging.initx = event.pageX - parseInt(this.$window.css("left"));
+            this.dragging.inity = event.pageY - parseInt(this.$window.css("top"));
+            if (window.innerHeight == undefined) {
+                var main_width = document.documentElement.offsetWidth;
+                var main_height = document.documentElement.offsetHeight;
+            } else {
+                main_width = window.innerWidth;
+                main_height = window.innerHeight;
+            }
+            this.dragging.maxx = main_width - parseInt(this.$window.css("width"));
+            this.dragging.maxy = main_height - parseInt(this.$window.css("height"));
+            $(document).on("mousemove", this.binding.drag);
+            $(document).on("mouseup", this.binding.dragStop);
+            this.fireEvent("drag", [this, "start"]);
+        }
+        function _mouseup() {
+            $(document).off("mousemove", this.binding.drag);
+            $(document).off("mouseup", this.binding.dragStop);
+            this.dragging.enabled = false;
+            this.fireEvent("drag", [this, "end"]);
+        }
+        function _mousemove(event) {
+            if (this.dragging.enabled) {
+                var left = event.pageX - this.dragging.initx,
+                top = event.pageY - this.dragging.inity;
+                left < 0 ? (left = 0) : left > this.dragging.maxx && (left = this.dragging.maxx);
+                top < 0 ? (top = 0) : top > this.dragging.maxy && (top = this.dragging.maxy);
+                this.$window.css({
+                    left: left,
+                    top: top
+                });
+            }
+        }
+        Common.UI.alert = function (options) {
+            var me = this.Window.prototype;
+            var arrBtns = {
+                ok: me.okButtonText,
+                cancel: me.cancelButtonText,
+                yes: me.yesButtonText,
+                no: me.noButtonText,
+                close: me.closeButtonText
+            };
+            if (!options.buttons) {
+                options.buttons = {};
+                options.buttons["ok"] = arrBtns["ok"];
+            } else {
+                if (_.isArray(options.buttons)) {
+                    var newBtns = {};
+                    _.each(options.buttons, function (b) {
+                        newBtns[b] = arrBtns[b];
+                    });
+                    options.buttons = newBtns;
+                }
+            }
+            var template = '<div class="info-box">' + '<div class="icon <%= iconCls %>" />' + '<div class="text"><span><%= msg %></span></div>' + "</div>" + '<div class="footer">' + '<button class="btn normal dlg-btn primary" result="ok">OK</button>' + "<% if (_.size(buttons) > 1) %>" + '<button class="btn normal dlg-btn" result="cancel">Cancel</button>' + "<% %>" + "</div>";
+            var win = new Common.UI.Window({
+                cls: "alert",
+                title: options.title,
+                onprimary: onKeyDown,
+                tpl: _.template(template, options)
+            });
+            function autoSize(window) {
+                var text_cnt = window.getChild(".info-box");
+                var text = window.getChild(".info-box span");
+                var footer = window.getChild(".footer");
+                var header = window.getChild(".header");
+                var body = window.getChild(".body");
+                var icon = window.getChild(".icon");
+                body.css("padding-bottom", "10px");
+                text_cnt.height(Math.max(text.height(), icon.height()));
+                body.height(parseInt(text_cnt.css("height")) + parseInt(footer.css("height")));
+                window.setSize(text.position().left + text.width() + parseInt(text_cnt.css("padding-right")), parseInt(body.css("height")) + parseInt(header.css("height")));
+            }
+            function onBtnClick(event) {
+                if (options.callback) {
+                    options.callback.call(win, event.currentTarget.attributes["result"].value);
+                }
+                win.close(true);
+            }
+            function onKeyDown(event) {
+                onBtnClick({
+                    currentTarget: win.getChild(".footer .dlg-btn")[0]
+                });
+                return false;
+            }
+            win.on({
+                "render:after": function (obj) {
+                    autoSize(obj);
+                },
+                show: function (obj) {
+                    obj.getChild(".footer .dlg-btn").focus();
+                    obj.getChild(".footer .dlg-btn").on("click", onBtnClick);
+                },
+                close: function () {
+                    options.callback && options.callback.call(win, "close");
+                }
+            });
+            win.show();
+        };
+        Common.UI.warning = function (options) {
+            options = options || {}; ! options.title && (options.title = this.Window.prototype.textWarning);
+            Common.UI.alert(_.extend(options, {
+                iconCls: "warn"
+            }));
+        };
+        Common.UI.error = function (options) {
+            options = options || {}; ! options.title && (options.title = this.Window.prototype.textError);
+            Common.UI.alert(_.extend(options, {
+                iconCls: "error"
+            }));
+        };
+        Common.UI.confirm = function (options) {
+            options = options || {}; ! options.title && (options.title = this.Window.prototype.textConfirmation);
+            Common.UI.alert(_.extend(options, {
+                iconCls: "confirm"
+            }));
+        };
+        Common.UI.info = function (options) {
+            options = options || {}; ! options.title && (options.title = this.Window.prototype.textInformation);
+            Common.UI.alert(_.extend(options, {
+                iconCls: "info"
+            }));
+        };
+        return {
+            $window: undefined,
+            $lastmodal: undefined,
+            dragging: {
+                enabled: false
+            },
+            initialize: function (options) {
+                this.initConfig = {};
+                this.binding = {};
+                _.extend(this.initConfig, config, options || {}); ! this.initConfig.id && (this.initConfig.id = "window-" + this.cid); ! this.initConfig.tpl && (this.initConfig.tpl = "");
+                Common.UI.BaseView.prototype.initialize.call(this, this.initConfig);
+            },
+            render: function () {
+                var renderto = this.initConfig.renderTo || document.body;
+                $(renderto).append(_.template(template, this.initConfig));
+                this.$window = $("#" + this.initConfig.id);
+                this.binding.keydown = _.bind(_keydown, this);
+                if (this.initConfig.header) {
+                    this.binding.drag = _.bind(_mousemove, this);
+                    this.binding.dragStop = _.bind(_mouseup, this);
+                    this.binding.dragStart = _.bind(_dragstart, this);
+                    var doclose = function () {
+                        if (this.$window.find(".tool.close").hasClass("disabled")) {
+                            return;
+                        }
+                        if (this.initConfig.toolcallback) {
+                            this.initConfig.toolcallback.call(this);
+                        } else {
+                            (this.initConfig.toolclose == "hide") ? this.hide() : this.close();
+                        }
+                    };
+                    this.$window.find(".header").on("mousedown", this.binding.dragStart);
+                    this.$window.find(".tool.close").on("click", _.bind(doclose, this));
+                } else {
+                    this.$window.find(".body").css({
+                        top: 0,
+                        "border-radius": "5px"
+                    });
+                }
+                if (this.initConfig.height == "auto") {
+                    var height = parseInt(this.$window.find("> .body").css("height"));
+                    this.initConfig.header && (height += parseInt(this.$window.find("> .header").css("height")));
+                    this.$window.height(height);
+                } else {
+                    this.$window.css("height", this.initConfig.height);
+                }
+                this.fireEvent("render:after", this);
+                return this;
+            },
+            show: function (x, y) {
+                if (this.initConfig.modal) {
+                    var mask = _getMask();
+                    if (this.options.animate !== false) {
+                        var opacity = mask.css("opacity");
+                        mask.css("opacity", 0);
+                        mask.show();
+                        setTimeout(function () {
+                            mask.css(_getTransformation(opacity));
+                        },
+                        1);
+                    } else {
+                        mask.show();
+                    }
+                    Common.NotificationCenter.trigger("modal:show", this);
+                    this.$lastmodal = $(".asc-window.modal:not(.dethrone):visible").first().addClass("dethrone");
+                }
+                if (!this.$window) {
+                    this.render();
+                    if (_.isNumber(x) && _.isNumber(y)) {
+                        this.$window.css("left", Math.floor(x));
+                        this.$window.css("top", Math.floor(y));
+                    } else {
+                        _centre.call(this);
+                    }
+                } else {
+                    if (!this.$window.is(":visible")) {
+                        this.$window.show();
+                    }
+                }
+                $(document).on("keydown." + this.cid, this.binding.keydown);
+                var me = this;
+                if (this.options.animate !== false) {
+                    this.$window.css({
+                        "-webkit-transform": "scale(0.8)",
+                        "-moz-transform": "scale(0.8)",
+                        "-ms-transform": "scale(0.8)",
+                        "-o-transform": "scale(0.8)",
+                        opacity: 0
+                    });
+                    setTimeout(function () {
+                        me.$window.css({
+                            "-webkit-transition": "0.3s opacity, 0.3s -webkit-transform",
+                            "-webkit-transform": "scale(1)",
+                            "-moz-transition": "0.3s opacity, 0.3s -moz-transform",
+                            "-moz-transform": "scale(1)",
+                            "-ms-transition": "0.3s opacity, 0.3s -ms-transform",
+                            "-ms-transform": "scale(1)",
+                            "-o-transition": "0.3s opacity, 0.3s -o-transform",
+                            "-o-transform": "scale(1)",
+                            "opacity": "1"
+                        });
+                    },
+                    1);
+                    setTimeout(function () {
+                        me.$window.css({
+                            "-webkit-transform": "",
+                            "-moz-transform": "",
+                            "-ms-transition": "",
+                            "-ms-transform": "",
+                            "-o-transform": ""
+                        });
+                        me.fireEvent("show", me);
+                    },
+                    350);
+                } else {
+                    this.fireEvent("show", this);
+                }
+                Common.NotificationCenter.trigger("window:show");
+            },
+            close: function (suppressevent) {
+                $(document).off("keydown." + this.cid);
+                if (this.initConfig.header) {
+                    this.$window.find(".header").off("mousedown", this.binding.dragStart);
+                }
+                if (this.initConfig.modal) {
+                    var hide_mask = true;
+                    if (this.$lastmodal.size() > 0) {
+                        this.$lastmodal.removeClass("dethrone");
+                        hide_mask = !this.$lastmodal.hasClass("modal");
+                    }
+                    if (hide_mask) {
+                        var mask = $(".modals-mask");
+                        if (this.options.animate !== false) {
+                            var opacity = mask.css("opacity");
+                            mask.css(_getTransformation(0));
+                            setTimeout(function () {
+                                mask.css("opacity", opacity);
+                                mask.hide();
+                            },
+                            300);
+                        } else {
+                            mask.hide();
+                        }
+                    }
+                    Common.NotificationCenter.trigger("modal:close", this);
+                }
+                this.$window.remove();
+                suppressevent !== true && this.fireEvent("close", this);
+            },
+            hide: function () {
+                $(document).off("keydown." + this.cid);
+                if (this.$window) {
+                    if (this.initConfig.modal) {
+                        var hide_mask = true;
+                        if (this.$lastmodal.size() > 0) {
+                            this.$lastmodal.removeClass("dethrone");
+                            hide_mask = !this.$lastmodal.hasClass("modal");
+                        }
+                        if (hide_mask) {
+                            var mask = $(".modals-mask");
+                            if (this.options.animate !== false) {
+                                var opacity = mask.css("opacity");
+                                mask.css(_getTransformation(0));
+                                setTimeout(function () {
+                                    mask.css("opacity", opacity);
+                                    mask.hide();
+                                },
+                                300);
+                            } else {
+                                mask.hide();
+                            }
+                        }
+                        Common.NotificationCenter.trigger("modal:hide", this);
+                    }
+                    this.$window.hide();
+                    this.fireEvent("hide", this);
+                }
+            },
+            isLocked: function () {
+                return this.$window.hasClass("dethrone") || (!this.options.modal && this.$window.parent().find(".asc-window.modal:visible").length);
+            },
+            getChild: function (selector) {
+                return selector ? this.$window.find(selector) : this.$window;
+            },
+            setWidth: function (width) {
+                if (width >= 0) {
+                    var min = parseInt(this.$window.css("min-width"));
+                    width < min && (width = min);
+                    this.$window.width(width);
+                }
+            },
+            getWidth: function () {
+                return parseInt(this.$window.css("width"));
+            },
+            setHeight: function (height) {
+                if (height >= 0) {
+                    var min = parseInt(this.$window.css("min-height"));
+                    height < min && (height = min);
+                    this.$window.height(height);
+                    if (this.initConfig.header) {
+                        height -= parseInt(this.$window.find("> .header").css("height"));
+                    }
+                    this.$window.find("> .body").css("height", height);
+                }
+            },
+            getHeight: function () {
+                return parseInt(this.$window.css("height"));
+            },
+            setSize: function (w, h) {
+                this.setWidth(w);
+                this.setHeight(h);
+            },
+            getSize: function () {
+                return [this.getWidth(), this.getHeight()];
+            },
+            setTitle: function (title) {
+                this.$window.find("> .header > .title").text(title);
+            },
+            getTitle: function () {
+                return this.$window.find("> .header > .title").text();
+            },
+            isVisible: function () {
+                return this.$window && this.$window.is(":visible");
+            },
+            onPrimary: function () {},
+            cancelButtonText: "Cancel",
+            okButtonText: "OK",
+            yesButtonText: "Yes",
+            noButtonText: "No",
+            closeButtonText: "Close",
+            textWarning: "Warning",
+            textError: "Error",
+            textConfirmation: "Confirmation",
+            textInformation: "Information"
+        };
+    })(), Common.UI.Window || {}));
+});

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

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

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