From acbc4f5fd0bd4c8bc52ed39060f4403889a0be5d Mon Sep 17 00:00:00 2001 From: OVSharova Date: Wed, 8 Sep 2021 10:23:10 +0300 Subject: [PATCH] CellEditor --- test/spreadsheeteditor/main/index.html | 30 +- .../main/js/ApplicationController.js | 5 + .../main/js/ApplicationView.js | 44 +- .../main/resources/less/celleditor.less | 5 +- .../main/template/CellEditor.template | 11 - .../common/main/lib/component/Menu.js | 1058 +++++++++++++++ .../common/main/lib/component/MenuItem.js | 394 ++++++ .../common/main/lib/component/Scroller.js | 180 +++ .../common/main/lib/controller/CellEditor.js | 236 ++++ .../main/lib/core/NotificationCenter.js | 9 +- .../common/main/lib/core/application.js | 2 +- .../perfect-scrollbar-patch-bug-23744.patch | 34 + .../perfect-scrollbar-patch-bug-25932.diff | 48 + .../perfect-scrollbar-patch-change-event.diff | 15 + .../mods/perfect-scrollbar-patch-margins.diff | 103 ++ .../perfect-scrollbar-patch-x-margins.diff | 89 ++ .../common/main/lib/mods/perfect-scrollbar.js | 658 ++++++++++ .../common/main/lib/view/CellEditor.js | 86 ++ .../main/resources/less/asc-mixins.less | 397 ++++++ .../common/main/resources/less/buttons.less | 1148 +++++++++++++++++ 20 files changed, 4482 insertions(+), 70 deletions(-) delete mode 100644 test/spreadsheeteditor/main/template/CellEditor.template create mode 100644 test/unit-tests/common/main/lib/component/Menu.js create mode 100644 test/unit-tests/common/main/lib/component/MenuItem.js create mode 100644 test/unit-tests/common/main/lib/component/Scroller.js create mode 100644 test/unit-tests/common/main/lib/controller/CellEditor.js create mode 100644 test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-bug-23744.patch create mode 100644 test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-bug-25932.diff create mode 100644 test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-change-event.diff create mode 100644 test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-margins.diff create mode 100644 test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-x-margins.diff create mode 100644 test/unit-tests/common/main/lib/mods/perfect-scrollbar.js create mode 100644 test/unit-tests/common/main/lib/view/CellEditor.js create mode 100644 test/unit-tests/common/main/resources/less/asc-mixins.less create mode 100644 test/unit-tests/common/main/resources/less/buttons.less diff --git a/test/spreadsheeteditor/main/index.html b/test/spreadsheeteditor/main/index.html index 661c560f0..8743a3b3e 100644 --- a/test/spreadsheeteditor/main/index.html +++ b/test/spreadsheeteditor/main/index.html @@ -8,6 +8,7 @@ + @@ -205,16 +206,18 @@
-
- -
- -
-
- -
-
- +
+
+ +
+
+
+ +
+
+ +
    @@ -263,12 +266,16 @@ + + + + --> + + + diff --git a/test/spreadsheeteditor/main/js/ApplicationController.js b/test/spreadsheeteditor/main/js/ApplicationController.js index e97d8dff3..c28f5fca1 100644 --- a/test/spreadsheeteditor/main/js/ApplicationController.js +++ b/test/spreadsheeteditor/main/js/ApplicationController.js @@ -243,6 +243,11 @@ SSE.ApplicationController = new(function(){ Common.Gateway.on('requestclose', onRequestClose); + if(common.controller.CellEditor ) { + common.controller.CellEditor.create(); + common.controller.CellEditor.setApi(api) + common.controller.CellEditor.setMode(config); + } SSE.ApplicationView.tools.get('#idt-fullscreen') .on('click', function(){ diff --git a/test/spreadsheeteditor/main/js/ApplicationView.js b/test/spreadsheeteditor/main/js/ApplicationView.js index 917609fa5..cd16ae144 100644 --- a/test/spreadsheeteditor/main/js/ApplicationView.js +++ b/test/spreadsheeteditor/main/js/ApplicationView.js @@ -30,45 +30,19 @@ * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode * */ + if (SSE === undefined) { var SSE = {}; } SSE.ApplicationView = new(function(){ - var $btnTools - ,$cellname - ,$btnexpand - ,$btnfunc - ,btnNamedRanges; - - - + var $btnTools; // Initialize view function createView(){ - - $cellname = $('#ce-cell-name'); - $btnexpand = $('#ce-btn-expand'); - $btnfunc = $('#ce-func-label'); - $btnfunc.addClass('disabled'); - /*btnNamedRanges = new Common.UI.Button({ - parentEl: $('#ce-cell-name-menu'), - menu : new Common.UI.Menu({ - style : 'min-width: 70px;max-width:400px;', - maxHeight: 250, - items: [ - { caption: this.textManager, value: 'manager' }, - { caption: '--' } - ] - }) - }); - this.btnNamedRanges.setVisible(false); - this.btnNamedRanges.menu.setOffset(-81);*/ - $btnTools = $('#box-tools button'); - $btnTools.addClass('dropdown-toggle').attr('data-toggle', 'dropdown').attr('aria-expanded', 'true'); $btnTools.parent().append( '
      ' + @@ -85,25 +59,13 @@ SSE.ApplicationView = new(function(){ function getTools(name) { return $btnTools.parent().find(name); } - function updateCellInfo(info) { - if (info) { - this.$cellname.val(typeof(info)=='string' ? info : info.asc_getName()); - } - } - function cellNameDisabled(disabled){ - (disabled) ? this.$cellname.attr('disabled', 'disabled') : this.$cellname.removeAttr('disabled'); - this.btnNamedRanges.setDisabled(disabled); - } + return { create: createView , tools: { get: getTools }, - cell: { - updateInfo: updateCellInfo, - nameDisabled: cellNameDisabled - }, txtDownload: 'Download', txtPrint: 'Print', diff --git a/test/spreadsheeteditor/main/resources/less/celleditor.less b/test/spreadsheeteditor/main/resources/less/celleditor.less index 75dbb5e84..ee2d65154 100644 --- a/test/spreadsheeteditor/main/resources/less/celleditor.less +++ b/test/spreadsheeteditor/main/resources/less/celleditor.less @@ -2,8 +2,9 @@ @import "../../../../unit-tests/common/main/resources/less/colors-table-ie-fix.less"; @import "../../../../unit-tests/common/main/resources/less/variables.less"; @import "../../../../unit-tests/common/main/resources/less/colors-table.less"; +@import "../../../../unit-tests/common/main/resources/less/asc-mixins.less"; +@import "../../../../unit-tests/common/main/resources/less/buttons.less"; #cell-editing-box { - --pixel-ratio-factor: 1; border-bottom: solid @scaled-one-px-value-ie @border-toolbar-ie; border-bottom: solid @scaled-one-px-value @border-toolbar; border-left: solid @scaled-one-px-value-ie @border-toolbar-ie; @@ -23,7 +24,7 @@ #ce-cell-name { width: 100px; height: 19px; - height: calc(19px + (1px - 1px/var(--pixel-ratio-factor,1))); + //height: calc(19px + (1px - 1px/var(--pixel-ratio-factor,1))); padding: 0px 19px 0 4px; vertical-align: top; display: inline-block; diff --git a/test/spreadsheeteditor/main/template/CellEditor.template b/test/spreadsheeteditor/main/template/CellEditor.template deleted file mode 100644 index 1c1abe44c..000000000 --- a/test/spreadsheeteditor/main/template/CellEditor.template +++ /dev/null @@ -1,11 +0,0 @@ -
      - -
      - -
      -
      - -
      -
      - -
      diff --git a/test/unit-tests/common/main/lib/component/Menu.js b/test/unit-tests/common/main/lib/component/Menu.js new file mode 100644 index 000000000..398f0490c --- /dev/null +++ b/test/unit-tests/common/main/lib/component/Menu.js @@ -0,0 +1,1058 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2019 + * + * 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 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * 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 + * +*/ +/** + * Menu.js + * + * A menu object. This is the container to which you may add {@link Common.UI.MenuItem menu items}. + * + * Created by Alexander Yuzhin on 1/28/14 + * Copyright (c) 2018 Ascensio System SIA. All rights reserved. + * + */ + +/** + * Default template + * + * + * + * A useful classes of menu position + * + * - `'pull-right'` using for layout menu by right side of a parent + * + * + * Example usage: + * + * new Common.UI.Menu({ + * items: [ + * { caption: 'item 1', value: 1 }, + * { caption: 'item 1', value: 2 }, + * { caption: '--' }, + * { caption: 'item 1', value: 3 }, + * ] + * }) + * + * @property {Object} itemTemplate + * + * Default template for items + * + * + * @property {Array} items + * + * Arrow of the {Common.UI.MenuItem} menu items + * + * + * @property {Boolean/Number} restoreHeight + * + * Adjust to the browser height and restore to restoreHeight when it's Number + * + * + */ + +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 () { + 'use strict'; + + 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) { + if (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], + cyclic : true, + search : false, + scrollAlwaysVisible: true + }, + + template: _.template([ + '' + ].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; + this.scrollAlwaysVisible = this.options.scrollAlwaysVisible; + this.search = this.options.search; + + if (this.options.restoreHeight) { + this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000); + !this.options.maxHeight && (this.options.maxHeight = this.options.restoreHeight); + } + + if (!this.options.cyclic) this.options.cls += ' no-cyclic'; + + _.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 = me.$el || $(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]'); + this.menuRoot = menuRoot; + + 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)); + }); + } + + if (this.options.maxHeight) { + menuRoot.css({'max-height': me.options.maxHeight}); + this.scroller = new Common.UI.Scroller({ + el: me.$el.find('.dropdown-menu '), + minScrollbarLength: 30, + suppressScrollX: true, + alwaysVisibleY: this.scrollAlwaysVisible + }); + } + + menuRoot.css({ + 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.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) { + if ( this.parentEl.hasClass('open') ) + this.cmpEl.dropdown('toggle'); + else if (this.parentEl.hasClass('over')) + this.parentEl.removeClass('over'); + } + }, + + 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 = this.menuRoot; + if (menuRoot) { + if (index < 0) { + menuRoot.append(item.render().el); + } else if (index === 0) { + menuRoot.prepend(item.render().el); + } else { + menuRoot.children('li:nth-child(' + (index+1) + ')').before(item.render().el); + } + + item.on('click', _.bind(me.onItemClick, me)); + item.on('toggle', _.bind(me.onItemToggle, me)); + } + } + }, + + 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(); + } + }, + + removeItems: function(from, len) { + if (from > this.items.length-1) return; + if (from+len>this.items.length) len = this.items.length - from; + + for (var i=from; i li:first'), + itemHeight = (item.length) ? item.outerHeight() : 1; + this.wheelSpeed = Math.min((Math.floor(menuRoot.height()/itemHeight) * itemHeight)/10, 20); + } + this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible, wheelSpeed: this.wheelSpeed}); + + var $selected = menuRoot.find('> li .checked'); + if ($selected.length) { + var itemTop = $selected.position().top, + itemHeight = $selected.outerHeight(), + listHeight = menuRoot.outerHeight(); + if (itemTop < 0 || itemTop + itemHeight > listHeight) { + var height = menuRoot.scrollTop() + itemTop + (itemHeight - listHeight)/2; + height = (Math.floor(height/itemHeight) * itemHeight); + menuRoot.scrollTop(height); + } + setTimeout(function(){$selected.focus();}, 1); + } + } + this._search = {}; + }, + + onBeforeHideMenu: function(e) { + this.trigger('hide:before', this, e); + + if (Common.UI.Scroller.isMouseCapture()) + e.preventDefault(); + }, + + onAfterHideMenu: function(e, isFromInputControl) { + this.trigger('hide:after', this, e, isFromInputControl); + Common.NotificationCenter.trigger('menu:hide', this, isFromInputControl); + }, + + onAfterKeydownMenu: function(e) { + this.trigger('keydown:before', this, e); + if (e.isDefaultPrevented()) + return; + + 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(); + if (!li.hasClass('dropdown-submenu')) + Common.UI.Menu.Manager.hideAll(); + if ( $(e.currentTarget).closest('li').hasClass('dropdown-submenu')) { + e.stopPropagation(); + return false; + } + } else if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) { + this.fromKeyDown = true; + } else if (e.keyCode == Common.UI.Keys.ESC) { +// Common.NotificationCenter.trigger('menu:afterkeydown', e); +// return false; + } else if (this.search && e.keyCode > 64 && e.keyCode < 91 && e.key){ + var me = this; + clearTimeout(this._search.timer); + this._search.timer = setTimeout(function () { me._search = {}; }, 1000); + + (!this._search.text) && (this._search.text = ''); + (!this._search.char) && (this._search.char = e.key); + (this._search.char !== e.key) && (this._search.full = true); + this._search.text += e.key; + if (this._search.index===undefined) { + var $items = this.menuRoot.find('> li').find('> a'); + this._search.index = $items.index($items.filter(':focus')); + } + this.selectCandidate(); + } + }, + + selectCandidate: function() { + var index = this._search.index || 0, + re = new RegExp('^' + ((this._search.full) ? this._search.text : this._search.char), 'i'), + itemCandidate, idxCandidate; + + for (var i=0; iindex) { + itemCandidate = item; + idxCandidate = i; + break; + } + } + } + + if (itemCandidate) { + this._search.index = idxCandidate; + var item = itemCandidate.cmpEl.find('a'); + if (this.scroller) { + this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible, wheelSpeed: this.wheelSpeed}); + var itemTop = item.position().top, + itemHeight = item.outerHeight(), + listHeight = this.menuRoot.outerHeight(); + if (itemTop < 0 || itemTop + itemHeight > listHeight) { + var height = this.menuRoot.scrollTop() + itemTop; + height = (Math.floor(height/itemHeight) * itemHeight); + this.menuRoot.scrollTop(height); + } + } + item.focus(); + } + }, + + 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); + }, + + 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(fixedAlign, fixedOffset) { + var menuRoot = this.menuRoot, + menuParent = this.menuAlignEl || menuRoot.parent(), + m = this.menuAlign.match(/^([a-z]+)-([a-z]+)/), + offset = menuParent.offset(), + docW = Common.Utils.innerWidth() - 10, + docH = Common.Utils.innerHeight() - 10, // Yep, it's magic number + 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 (left < 0) + left = 0; + + if (this.options.restoreHeight) { + if (typeof (this.options.restoreHeight) == "number") { + if (top + menuH > docH) { + menuRoot.css('max-height', (docH - top) + 'px'); + (!this.scroller) && (this.scroller = new Common.UI.Scroller({ + el: this.$el.find('.dropdown-menu '), + minScrollbarLength: 30, + suppressScrollX: true, + alwaysVisibleY: this.scrollAlwaysVisible + })); + this.wheelSpeed = undefined; + } else if ( top + menuH < docH && menuRoot.height() < this.options.restoreHeight) { + menuRoot.css('max-height', (Math.min(docH - top, this.options.restoreHeight)) + 'px'); + this.wheelSpeed = undefined; + } + } + } else { + var cg = Common.Utils.croppedGeometry(); + docH = cg.height - 10; + if (top + menuH > docH + cg.top) { + if (fixedAlign && typeof fixedAlign == 'string') { // how to align if menu height > window height + m = fixedAlign.match(/^([a-z]+)-([a-z]+)/); + top = offset.top - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1] + (fixedOffset || 0); + } else + top = docH - menuH; + } + + + if (top < cg.top) + top = cg.top; + } + if (this.options.additionalAlign) + this.options.additionalAlign.call(this, menuRoot, left, top); + else { + var _css = {left: left, top: top}; + if (!(menuH < docH)) _css['margin-top'] = 0; + + menuRoot.css(_css); + } + }, + + clearAll: function() { + _.each(this.items, function(item){ + if (item.setChecked) + item.setChecked(false, true); + }); + } + + }), { + Manager: (function() { + return manager; + })() + }) + })(); + + Common.UI.MenuSimple = Common.UI.BaseView.extend({ + options : { + cls : '', + style : '', + itemTemplate: null, + items : [], + menuAlign : 'tl-bl', + menuAlignEl : null, + offset : [0, 0], + cyclic : true, + search : false, + scrollAlwaysVisible: true + }, + + template: _.template([ + '' + ].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 || _.template([ + ' style="<%= style %>" <% } %>', + '<% if(typeof canFocused !== "undefined") { %> tabindex="-1" type="menuitem" <% } %>', + '<% if(typeof stopPropagation !== "undefined") { %> data-stopPropagation="true" <% } %>', + 'class="<% if (checked) { %> checked <% } %>" >', + '<% if (typeof iconCls !== "undefined") { %>', + '', + '<% } %>', + '<%= caption %>', + '' + ].join('')); + this.rendered = false; + this.items = this.options.items || []; + this.offset = [0, 0]; + this.menuAlign = this.options.menuAlign; + this.menuAlignEl = this.options.menuAlignEl; + this.scrollAlwaysVisible = this.options.scrollAlwaysVisible; + this.search = this.options.search; + + if (this.options.restoreHeight) { + this.options.restoreHeight = (typeof (this.options.restoreHeight) == "number") ? this.options.restoreHeight : (this.options.maxHeight ? this.options.maxHeight : 100000); + !this.options.maxHeight && (this.options.maxHeight = this.options.restoreHeight); + } + + if (!this.options.cyclic) this.options.cls += ' no-cyclic'; + + if (this.options.el) + this.render(); + + Common.UI.Menu.Manager.register(this); + }, + + remove: function() { + Common.UI.Menu.Manager.unregister(this); + Common.UI.BaseView.prototype.remove.call(this); + }, + + render: function(parentEl) { + var me = this; + + this.trigger('render:before', this); + + this.cmpEl = me.$el || $(this.el); + + parentEl && this.setElement(parentEl, false); + + if (!me.rendered) { + this.cmpEl = $(this.template({ + items: me.items, + itemTemplate: me.itemTemplate, + options : me.options + })); + + parentEl ? parentEl.append(this.cmpEl) : this.$el.append(this.cmpEl); + } + + var rootEl = this.cmpEl.parent(), + menuRoot = (rootEl.attr('role') === 'menu') ? rootEl : rootEl.find('[role=menu]'); + this.menuRoot = menuRoot; + + if (menuRoot) { + if (!me.rendered) { + menuRoot.on( "click", "li", _.bind(me.onItemClick, me)); + menuRoot.on( "mousedown", "li", _.bind(me.onItemMouseDown, me)); + } + + if (this.options.maxHeight) { + menuRoot.css({'max-height': me.options.maxHeight}); + this.scroller = new Common.UI.Scroller({ + el: me.$el.find('.dropdown-menu '), + minScrollbarLength: 30, + suppressScrollX: true, + alwaysVisibleY: this.scrollAlwaysVisible + }); + } + + menuRoot.css({ + 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.hover( + function(e) { me.isOver = true;}, + function(e) { me.isOver = false; } + ); + } + + this.rendered = true; + + this.trigger('render:after', this); + + return this; + }, + + resetItems: function(items) { + this.items = items || []; + this.$items = null; + var template = _.template([ + '<% _.each(items, function(item) { %>', + '<% if (!item.id) item.id = Common.UI.getId(); %>', + '<% item.checked = item.checked || false; %>', + '
    • <%= itemTemplate(item) %>
      • ', + '<% }) %>' + ].join('')); + this.cmpEl && this.cmpEl.html(template({ + items: this.items, + itemTemplate: this.itemTemplate, + options : this.options + })); + }, + + 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) { + if ( this.parentEl.hasClass('open') ) + this.cmpEl.dropdown('toggle'); + else if (this.parentEl.hasClass('over')) + this.parentEl.removeClass('over'); + } + }, + + onItemClick: function(e) { + if (e.which != 1 && e.which !== undefined) + return false; + + var index = $(e.currentTarget).closest('li').index(), + item = (index>=0) ? this.items[index] : null; + if (!item) return; + + if (item.disabled) + return false; + + if (item.checkable && !item.checked) + this.setChecked(index, !item.checked); + + this.isOver = false; + if (item.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); + }, + + onItemMouseDown: function(e) { + if (e.which != 1) { + e.preventDefault(); + e.stopPropagation(); + + return false; + } + e.stopPropagation(); + }, + + setChecked: function(index, check, suppressEvent) { + this.toggle(index, check, suppressEvent); + }, + + toggle: function(index, toggle, suppressEvent) { + var state = !!toggle; + var item = this.items[index]; + + this.clearAll(); + + if (item && item.checkable) { + item.checked = state; + + if (this.rendered) { + var itemEl = item.el || this.cmpEl.find('#'+item.id); + if (itemEl) { + itemEl.toggleClass('checked', item.checked); + if (!_.isEmpty(item.iconCls)) { + itemEl.css('background-image', 'none'); + } + } + } + + if (!suppressEvent) + this.trigger('item:toggle', this, item, state); + } + }, + + setDisabled: function(disabled) { + this.disabled = !!disabled; + + if (this.rendered) + this.cmpEl.toggleClass('disabled', this.disabled); + }, + + isDisabled: function() { + return this.disabled; + }, + + onBeforeShowMenu: function(e) { + Common.NotificationCenter.trigger('menu:show'); + this.trigger('show:before', this, e); + this.alignPosition(); + }, + + onAfterShowMenu: function(e) { + this.trigger('show:after', this, e); + if (this.scroller) { + this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible}); + var menuRoot = this.menuRoot, + $selected = menuRoot.find('> li .checked'); + if ($selected.length) { + var itemTop = $selected.position().top, + itemHeight = $selected.outerHeight(), + listHeight = menuRoot.outerHeight(); + if (itemTop < 0 || itemTop + itemHeight > listHeight) { + var height = menuRoot.scrollTop() + itemTop + (itemHeight - listHeight)/2; + height = (Math.floor(height/itemHeight) * itemHeight); + menuRoot.scrollTop(height); + } + setTimeout(function(){$selected.focus();}, 1); + } + } + this._search = {}; + if (this.search && !this.$items) { + var me = this; + this.$items = this.menuRoot.find('> li').find('> a'); + _.each(this.$items, function(item, index) { + me.items[index].el = $(item); + }); + } + }, + + onBeforeHideMenu: function(e) { + this.trigger('hide:before', this, e); + + if (Common.UI.Scroller.isMouseCapture()) + e.preventDefault(); + }, + + onAfterHideMenu: function(e, isFromInputControl) { + this.trigger('hide:after', this, e, isFromInputControl); + Common.NotificationCenter.trigger('menu:hide', this, isFromInputControl); + }, + + 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(); + if (!li.hasClass('dropdown-submenu')) + Common.UI.Menu.Manager.hideAll(); + if ( $(e.currentTarget).closest('li').hasClass('dropdown-submenu')) { + e.stopPropagation(); + return false; + } + } else if (e.keyCode == Common.UI.Keys.UP || e.keyCode == Common.UI.Keys.DOWN) { + this.fromKeyDown = true; + } else if (e.keyCode == Common.UI.Keys.ESC) { +// Common.NotificationCenter.trigger('menu:afterkeydown', e); +// return false; + } else if (this.search && e.keyCode > 64 && e.keyCode < 91 && e.key){ + var me = this; + clearTimeout(this._search.timer); + this._search.timer = setTimeout(function () { me._search = {}; }, 1000); + + (!this._search.text) && (this._search.text = ''); + (!this._search.char) && (this._search.char = e.key); + (this._search.char !== e.key) && (this._search.full = true); + this._search.text += e.key; + if (this._search.index===undefined) { + this._search.index = this.$items.index(this.$items.filter(':focus')); + } + this.selectCandidate(); + } + }, + + selectCandidate: function() { + var index = this._search.index || 0, + re = new RegExp('^' + ((this._search.full) ? this._search.text : this._search.char), 'i'), + itemCandidate, idxCandidate; + + for (var i=0; iindex) { + itemCandidate = item; + idxCandidate = i; + break; + } + } + } + + if (itemCandidate) { + this._search.index = idxCandidate; + var item = itemCandidate.el; + if (this.scroller) { + this.scroller.update({alwaysVisibleY: this.scrollAlwaysVisible}); + var itemTop = item.position().top, + itemHeight = item.outerHeight(), + listHeight = this.menuRoot.outerHeight(); + if (itemTop < 0 || itemTop + itemHeight > listHeight) { + var height = this.menuRoot.scrollTop() + itemTop; + height = (Math.floor(height/itemHeight) * itemHeight); + this.menuRoot.scrollTop(height); + } + } + item.focus(); + } + }, + + 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(fixedAlign, fixedOffset) { + var menuRoot = this.menuRoot, + menuParent = this.menuAlignEl || menuRoot.parent(), + m = this.menuAlign.match(/^([a-z]+)-([a-z]+)/), + offset = menuParent.offset(), + docW = Common.Utils.innerWidth(), + docH = Common.Utils.innerHeight() - 10, // Yep, it's magic number + 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 (this.options.restoreHeight) { + if (typeof (this.options.restoreHeight) == "number") { + if (top + menuH > docH) { + menuRoot.css('max-height', (docH - top) + 'px'); + (!this.scroller) && (this.scroller = new Common.UI.Scroller({ + el: this.$el.find('.dropdown-menu '), + minScrollbarLength: 30, + suppressScrollX: true, + alwaysVisibleY: this.scrollAlwaysVisible + })); + } else if ( top + menuH < docH && menuRoot.height() < this.options.restoreHeight) { + menuRoot.css('max-height', (Math.min(docH - top, this.options.restoreHeight)) + 'px'); + } + } + } else { + if (top + menuH > docH) { + if (fixedAlign && typeof fixedAlign == 'string') { // how to align if menu height > window height + m = fixedAlign.match(/^([a-z]+)-([a-z]+)/); + top = offset.top - posMenu[m[1]][1] + posParent[m[2]][1] + this.offset[1] + (fixedOffset || 0); + } else + top = docH - menuH; + } + + if (top < 0) + top = 0; + } + + if (this.options.additionalAlign) + this.options.additionalAlign.call(this, menuRoot, left, top); + else + menuRoot.css({left: Math.ceil(left), top: Math.ceil(top)}); + }, + + clearAll: function() { + this.cmpEl && this.cmpEl.find('li > a.checked').removeClass('checked'); + _.each(this.items, function(item){ + item.checked = false; + }); + } + }); + +}); \ No newline at end of file diff --git a/test/unit-tests/common/main/lib/component/MenuItem.js b/test/unit-tests/common/main/lib/component/MenuItem.js new file mode 100644 index 000000000..b3ff956e3 --- /dev/null +++ b/test/unit-tests/common/main/lib/component/MenuItem.js @@ -0,0 +1,394 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2019 + * + * 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 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * 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 + * +*/ +/** + * MenuItem.js + * + * A base class for all menu items that require menu-related functionality such as click handling, + * sub-menus, icons, etc. + * + * Created by Alexander Yuzhin on 1/27/14 + * Copyright (c) 2018 Ascensio System SIA. All rights reserved. + * + */ + +/** + * Default template + * + * Simple menu item: + *
    • Caption
      • + * + * Separator: + *
    • + * + * Menu item with sub-menu: + *
    • + * Sub-menu item + *
        + *
        • + * + * + * Example usage: + * + * new Common.UI.MenuItem({ + * caption: 'View Compact Toolbar', + * checkable: true, + * menu: { + * items: [ + * { caption: 'Menu item 1', value: 'value-1' }, + * { caption: 'Menu item 2', value: 'value-2' }, + * new Common.UI.MenuItem({ caption: 'Menu item 3', value: 'value-3' }) + * ] + * } + * }); + * + * @property {Object} value + * + * @property {Common.UI.Menu} menu + * + * + */ + + +if (Common === undefined) + var Common = {}; + +define([ + 'common/main/lib/component/BaseView', + 'common/main/lib/component/ToggleManager' +], function () { + 'use strict'; + + 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, + dataHint : '', + dataHintDirection: '', + dataHintOffset: '' + }, + + tagName : 'li', + + template: _.template([ + ' tabindex="-1" type="menuitem" <% }; if(!_.isUndefined(options.stopPropagation)) { %> data-stopPropagation="true" <% }; if(!_.isUndefined(options.dataHint)) { %> data-hint="<%= options.dataHint %>" <% }; if(!_.isUndefined(options.dataHintDirection)) { %> data-hint-direction="<%= options.dataHintDirection %>" <% }; if(!_.isUndefined(options.dataHintOffset)) { %> data-hint-offset="<%= options.dataHintOffset %>" <% }; %> >', + '<% if (!_.isEmpty(iconCls)) { %>', + '', + '<% } %>', + '<%= caption %>', + '' + ].join('')), + + initialize : function(options) { + Common.UI.BaseView.prototype.initialize.call(this, options); + + var me = this; + + 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.hint = me.options.hint; + this.rendered = false; + + if (this.menu !== null && !(this.menu instanceof Common.UI.Menu) && !(this.menu instanceof Common.UI.MenuSimple)) { + this.menu = new Common.UI.Menu(_.extend({}, me.options.menu)); + } + + if (me.options.el) + this.render(); + }, + + render: function() { + var me = this, + el = me.$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); + + 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(el); + el.mouseenter(_.bind(me.menu.alignPosition, me.menu)); +// el.focusin(_.bind(me.onFocusItem, me)); + 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('no-checkmark', this.options.checkmark===false); + firstChild.toggleClass('checked', this.checked); + if (!_.isEmpty(this.iconCls)) { + firstChild.css('background-image', 'none'); + } + } + + if (me.options.hint) { + el.attr('data-toggle', 'tooltip'); + el.tooltip({ + title : me.options.hint, + placement : me.options.hintAnchor||function(tip, element) { + var pos = this.getPosition(), + actualWidth = tip.offsetWidth, + actualHeight = tip.offsetHeight, + innerWidth = Common.Utils.innerWidth(), + innerHeight = Common.Utils.innerHeight(); + var top = pos.top, + left = pos.left + pos.width + 2; + if (top + actualHeight > innerHeight) { + top = innerHeight - actualHeight - 2; + } + if (left + actualWidth > innerWidth) { + left = pos.left - actualWidth - 2; + } + $(tip).offset({top: top,left: left}).addClass('in'); + } + }); + } + + if (this.disabled) + 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 = el; + me.rendered = true; + + me.trigger('render:after', me); + + return this; + }, + + setCaption: function(caption, noencoding) { + this.caption = caption; + + if (this.rendered) + this.cmpEl.find('a').contents().last()[0].textContent = (noencoding) ? caption : Common.Utils.String.htmlEncode(caption); + }, + + setIconCls: function(iconCls) { + if (this.rendered && !_.isEmpty(this.iconCls)) { + var firstChild = this.cmpEl.children(':first'); + if (firstChild) { + firstChild.find('.menu-item-icon').removeClass(this.iconCls).addClass(iconCls); + } + } + this.iconCls = iconCls; + }, + + 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; + } + e.stopPropagation(); + }, + + onItemClick: function(e) { + if (e.which != 1 && (e.which !== undefined || this.menu)) + return false; + + if (!this.disabled && (this.allowDepress || !(this.checked && this.toggleGroup)) && !this.menu) + 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); +// $('a', this.cmpEl).focus(); + }, + + onUnHoverItem: function(e) { + this._doUnHover(e); +// $('a', this.cmpEl).blur(); + }, + +// onFocusItem: function(e) { +// this._doHover(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.cmpEl.hasClass('dropdown-submenu') && me.cmpEl.hasClass('over') && + (e && e.relatedTarget && me.cmpEl.find(e.relatedTarget).length>0 || me.cmpEl.hasClass('focused-submenu'))) { + // When focus go from menuItem to it's submenu don't hide this submenu + me.cmpEl.removeClass('focused-submenu'); + return; + } + if (me.menu && !me.disabled) { + clearTimeout(me.expandMenuTimer); + + me.hideMenuTimer = _.delay(function(){ + if (!me.menu.isOver) + me.cmpEl.removeClass('over'); + }, 200); + + if (e && e.type !== 'focusout') { // when mouseleave from clicked menu item with submenu + var focused = me.cmpEl.children(':focus'); + if (focused.length>0) { + focused.blur(); + me.cmpEl.closest('ul').focus(); + } + } + } + } + }); + + Common.UI.MenuItemSeparator = function(options) { + options = options || {}; + options.caption = '--'; + return new Common.UI.MenuItem(options); + }; +}); \ No newline at end of file diff --git a/test/unit-tests/common/main/lib/component/Scroller.js b/test/unit-tests/common/main/lib/component/Scroller.js new file mode 100644 index 000000000..a9901a389 --- /dev/null +++ b/test/unit-tests/common/main/lib/component/Scroller.js @@ -0,0 +1,180 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2019 + * + * 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 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * 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 + * +*/ +/** + * Scroller.js + * + * Created by Alexander Yuzhin on 3/14/14 + * Copyright (c) 2018 Ascensio System SIA. All rights reserved. + * + */ + +if (Common === undefined) + var Common = {}; + +define([ + 'vendor/perfect-scrollbar/src/jquery.mousewheel', + 'test/unit-tests/common/main/lib/mods/perfectscrollbar', + 'test/unit-tests/common/main/lib/component/BaseView' +], function () { 'use strict'; + + 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 = me.$el || $(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); + + // Emulate capture scroller + 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'); + } + }, + + isVisible: function() { + return $(this.el).find('.ps-scrollbar-y-rail').is(':visible'); + } + + }), { + isMouseCapture: function() { + return mouseCapture + } + }) + })(); +}); \ No newline at end of file diff --git a/test/unit-tests/common/main/lib/controller/CellEditor.js b/test/unit-tests/common/main/lib/controller/CellEditor.js new file mode 100644 index 000000000..5aaf7b721 --- /dev/null +++ b/test/unit-tests/common/main/lib/controller/CellEditor.js @@ -0,0 +1,236 @@ +!window.common && (window.common = {}); +!common.controller && (common.controller = {}); +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, + EQUALITY_FF:61, + 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, + MINUS_FF: 173, + EQUALITY: 187, + MINUS: 189 + }}); +common.controller.CellEditor = new(function(){ + var me, + api, + editor, + mode, + created=false; + + function onCellName(e){ + if (e.keyCode == Common.UI.Keys.RETURN){ + var name = editor.$cellname.val(); + if (name && name.length) { + api.asc_findCell(name); + } + //Common.NotificationCenter.trigger('edit:complete', editor); + } + } + function onKeyupCellEditor(e) { + if(e.keyCode == Common.UI.Keys.RETURN && !e.altKey){ + api.isCEditorFocused = 'clear'; + } + } + function onBlurCellEditor() { + if (api.isCEditorFocused == 'clear') + api.isCEditorFocused = undefined; + else if (api.isCellEdited) + api.isCEditorFocused = true; + } + function expandEditorField() { + if ( Math.floor(editor.$el.height()) > 19) { + editor.keep_height = editor.$el.height(); + editor.$el.height(19); + editor.$el.removeClass('expanded'); + editor.$btnexpand['removeClass']('btn-collapse'); + common.localStorage.setBool('sse-celleditor-expand', false); + } else { + editor.$el.height(editor.keep_height); + editor.$el.addClass('expanded'); + editor.$btnexpand['addClass']('btn-collapse'); + common.localStorage.setBool('sse-celleditor-expand', true); + } + + //Common.NotificationCenter.trigger('layout:changed', 'celleditor'); + //Common.NotificationCenter.trigger('edit:complete', editor, {restorefocus:true}); + } + function events() { + editor.$el.find('#ce-cell-name').on( 'keyup', onCellName); + editor.$el.find('textarea#ce-cell-content').on( 'keyup', onKeyupCellEditor); + editor.$el.find('textarea#ce-cell-content').on('blur', onBlurCellEditor); + editor.$el.find('button#ce-btn-expand').on('click', expandEditorField);/*, + /*'click button#ce-func-label': onInsertFunction*/ + } + function createController() { + me = this; + if (created) + return me; + + + created = true; + onLaunch(); + return me; + } + function onLayoutResize(o, r) { + if (r == 'cell:edit') { + if (Math.floor(editor.$el.height()) > 19) { + if (!editor.$btnexpand.hasClass('btn-collapse')) { + editor.$el.addClass('expanded'); + editor.$btnexpand['addClass']('btn-collapse'); + } + + o && common.localStorage.setItem('sse-celleditor-height', editor.$el.height()); + o && common.localStorage.setBool('sse-celleditor-expand', true); + } else { + editor.$el.removeClass('expanded'); + editor.$btnexpand['removeClass']('btn-collapse'); + o && common.localStorage.setBool('sse-celleditor-expand', false); + } + } + } + function onLaunch(){ + common.view.CellEditor.create(); + editor = common.view.CellEditor; + //me.bindViewEvents(editor, events); + events(); + + editor.$el.parent().find('.after').css({zIndex: '4'}); // for spreadsheets - bug 23127 + + var val = common.localStorage.getItem('sse-celleditor-height'); + editor.keep_height = (val!==null && parseInt(val)>0) ? parseInt(val) : 74; + if (common.localStorage.getBool('sse-celleditor-expand')) { + editor.$el.height(editor.keep_height); + onLayoutResize(undefined, 'cell:edit'); + } + + /* editor.btnNamedRanges.menu.on('item:click', _.bind(this.onNamedRangesMenu, this)) + .on('show:before', _.bind(this.onNameBeforeShow, this));*/ + this.namedrange_locked = false; + } + + function onApiCellSelection(info){ + editor.cell.updateInfo(info); + } + function onApiEditCell(state) { + if (this.viewmode) return; // signed file + + if (state == Asc.c_oAscCellEditorState.editStart){ + api.isCellEdited = true; + editor.cell.nameDisabled(true); + } else if (state == Asc.c_oAscCellEditorState.editInCell) { + api.isCEditorFocused = 'clear'; + } else if (state == Asc.c_oAscCellEditorState.editEnd) { + api.isCellEdited = false; + api.isCEditorFocused = false; + editor.cell.nameDisabled(false); + } + editor.$btnfunc.toggleClass('disabled', state == Asc.c_oAscCellEditorState.editText); + } + function onLockDefNameManager(state) { + this.namedrange_locked = (state == Asc.c_oAscDefinedNameReason.LockDefNameManager); + } + function onInputKeyDown(e) { + if (Common.UI.Keys.UP === e.keyCode || Common.UI.Keys.DOWN === e.keyCode || + Common.UI.Keys.TAB === e.keyCode || Common.UI.Keys.RETURN === e.keyCode || Common.UI.Keys.ESC === e.keyCode || + Common.UI.Keys.LEFT === e.keyCode || Common.UI.Keys.RIGHT === e.keyCode) { + var menu = $('#menu-formula-selection'); // for formula menu + if (menu.hasClass('open')) + menu.find('.dropdown-menu').trigger('keydown', e); + } + } + function onApiDisconnect() { + mode.isEdit = false; + + var controller = this.getApplication().getController('FormulaDialog'); + if (controller) { + controller.hideDialog(); + } + + if (!mode.isEdit) { + $('#ce-func-label', editor.$el).addClass('disabled'); + editor.btnNamedRanges.setVisible(false); + } + } + function onCellsRange(status) { + editor.cell.nameDisabled(status != Asc.c_oAscSelectionDialogType.None); + editor.$btnfunc.toggleClass('disabled', status != Asc.c_oAscSelectionDialogType.None); + } + function setApi(apiF){ + api=apiF; + + api.isCEditorFocused = false; + api.asc_registerCallback('asc_onSelectionNameChanged', onApiCellSelection); + api.asc_registerCallback('asc_onEditCell', onApiEditCell); + api.asc_registerCallback('asc_onCoAuthoringDisconnect', onApiDisconnect); + //Common.NotificationCenter.on('api:disconnect', onApiDisconnect); + //Common.NotificationCenter.on('cells:range', onCellsRange); + api.asc_registerCallback('asc_onLockDefNameManager', onLockDefNameManager); + api.asc_registerCallback('asc_onInputKeyDown', onInputKeyDown); + } + function onApiSelectionChanged(info) { + if (this.viewmode) return; // signed file + + var seltype = info.asc_getSelectionType(), + coauth_disable = (!mode.isEditMailMerge && !mode.isEditDiagram) ? (info.asc_getLocked() === true || info.asc_getLockedTable() === true || info.asc_getLockedPivotTable()===true) : false; + + var is_chart_text = seltype == Asc.c_oAscSelectionType.RangeChartText, + is_chart = seltype == Asc.c_oAscSelectionType.RangeChart, + is_shape_text = seltype == Asc.c_oAscSelectionType.RangeShapeText, + is_shape = seltype == Asc.c_oAscSelectionType.RangeShape, + is_image = seltype == Asc.c_oAscSelectionType.RangeImage || seltype == Asc.c_oAscSelectionType.RangeSlicer, + is_mode_2 = is_shape_text || is_shape || is_chart_text || is_chart; + + editor.$btnfunc.toggleClass('disabled', is_image || is_mode_2 || coauth_disable); + } + function setMode(modeF) { + mode = modeF; + + editor.$btnfunc[mode.isEdit?'removeClass':'addClass']('disabled'); + //editor.btnNamedRanges.setVisible(mode.isEdit && !mode.isEditDiagram && !mode.isEditMailMerge); + + if ( mode.isEdit ) { + api.asc_registerCallback('asc_onSelectionChanged', onApiSelectionChanged); + } + } + function setPreviewMode(mode) { + if (this.viewmode === mode) return; + this.viewmode = mode; + editor.$btnfunc[!mode && mode.isEdit?'removeClass':'addClass']('disabled'); + editor.cell.nameDisabled(mode && !(mode.isEdit && !mode.isEditDiagram && !mode.isEditMailMerge)); + } + return { + create: createController, + setApi: setApi, + setMode: setMode + } + +})(); \ No newline at end of file diff --git a/test/unit-tests/common/main/lib/core/NotificationCenter.js b/test/unit-tests/common/main/lib/core/NotificationCenter.js index 4415acffd..8545dac73 100644 --- a/test/unit-tests/common/main/lib/core/NotificationCenter.js +++ b/test/unit-tests/common/main/lib/core/NotificationCenter.js @@ -55,10 +55,9 @@ if (Common === undefined) var Common = {}; - -define([ - 'backbone' -], function (Backbone) { +/*if (Backbone === undefined) + var Backbone = ;*/ +Common.NotificationCenter=new( function (Backbone) { 'use strict'; var NotificationCenter = function(){}; @@ -75,4 +74,4 @@ define([ else { throw ('Native Common.NotificationCenter instance already defined.') } -}); \ No newline at end of file +})(); \ No newline at end of file diff --git a/test/unit-tests/common/main/lib/core/application.js b/test/unit-tests/common/main/lib/core/application.js index 2903aaa1b..85328c4cd 100644 --- a/test/unit-tests/common/main/lib/core/application.js +++ b/test/unit-tests/common/main/lib/core/application.js @@ -1,4 +1,4 @@ -(function(){ +Backbone=new(function(){ var resolveNamespace = function(className, root) { var parts = className.split('.'), current = root || window; diff --git a/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-bug-23744.patch b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-bug-23744.patch new file mode 100644 index 000000000..cc14919b8 --- /dev/null +++ b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-bug-23744.patch @@ -0,0 +1,34 @@ +# HG changeset patch +# User Alexey Musinov +# Date 1415710176 -10800 +# Tue Nov 11 15:49:36 2014 +0300 +# Node ID 784fe548cf4cbfc0a6c96b295ae83c551ce22166 +# Parent 07b43d47bcf8afe8a2dabc8a0bce8c7dab3bd498 + [Common] â perfect-scrollbar - ñêðîëèíã íàä 'textarea' è 'input' ïåðåäàåòñÿ â ýòè ýëåìåíòû. + +diff -r 07b43d47bcf8 -r 784fe548cf4c apps/common/main/lib/mods/perfect-scrollbar.js +--- a/apps/common/main/lib/mods/perfect-scrollbar.js Mon Nov 10 19:37:33 2014 +0300 ++++ b/apps/common/main/lib/mods/perfect-scrollbar.js Tue Nov 11 15:49:36 2014 +0300 +@@ -313,6 +313,22 @@ + var deltaX = e.deltaX * e.deltaFactor || deprecatedDeltaX, + deltaY = e.deltaY * e.deltaFactor || deprecatedDeltaY; + ++ if (e && e.target && (e.target.type === 'textarea' || e.target.type === 'input')) { ++ e.stopImmediatePropagation(); ++ e.preventDefault(); ++ ++ var scroll = $(e.target).scrollTop(), wheelDeltaY = 0; ++ if (e.originalEvent) { ++ if (e.originalEvent.wheelDelta) wheelDeltaY = e.originalEvent.wheelDelta / -40; ++ if (e.originalEvent.deltaY) wheelDeltaY = e.originalEvent.deltaY; ++ if (e.originalEvent.detail) wheelDeltaY = e.originalEvent.detail; ++ } ++ ++ $(e.target).scrollTop(scroll - wheelDeltaY); ++ ++ return; ++ } ++ + shouldPrevent = false; + if (!settings.useBothWheelAxes) { + // deltaX will only be used for horizontal scrolling and deltaY will diff --git a/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-bug-25932.diff b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-bug-25932.diff new file mode 100644 index 000000000..104d7ff02 --- /dev/null +++ b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-bug-25932.diff @@ -0,0 +1,48 @@ +diff -r 5047272bb302 apps/common/main/lib/mods/perfect-scrollbar.js +--- a/apps/common/main/lib/mods/perfect-scrollbar.js Fri Sep 12 18:17:33 2014 +0400 ++++ b/apps/common/main/lib/mods/perfect-scrollbar.js Fri Sep 12 18:18:56 2014 +0400 +@@ -146,7 +146,12 @@ + + var updateScrollbarCss = function () { + $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth, display: scrollbarXActive ? "inherit": "none"}); +- $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: scrollbarYActive ? "inherit": "none"}); ++ ++ if ($scrollbarYRail.hasClass('in-scrolling')) ++ $scrollbarYRail.css({/*top: $this.scrollTop(),*/ right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: scrollbarYActive ? "inherit": "none"}); ++ else ++ $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: scrollbarYActive ? "inherit": "none"}); ++ + $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth}); + $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight}); + }; +@@ -229,6 +234,15 @@ + currentPageY = e.pageY; + currentTop = $scrollbarY.position().top; + $scrollbarYRail.addClass('in-scrolling'); ++ ++ var padding = parseInt($scrollbarYRail.offsetParent().css('padding-top')); ++ var rect = $scrollbarYRail[0].getBoundingClientRect(); ++ $scrollbarYRail.css({ ++ position: 'fixed', ++ left: rect.left, ++ top: rect.top - padding ++ }); ++ + e.stopPropagation(); + e.preventDefault(); + }); +@@ -244,6 +258,14 @@ + $(document).bind('mouseup' + eventClassName, function (e) { + if ($scrollbarYRail.hasClass('in-scrolling')) { + $scrollbarYRail.removeClass('in-scrolling'); ++ ++ $scrollbarYRail.css({ ++ position: '', ++ left: '', ++ top: '' ++ }); ++ ++ updateScrollbarCss(); + } + }); + diff --git a/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-change-event.diff b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-change-event.diff new file mode 100644 index 000000000..a87c91975 --- /dev/null +++ b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-change-event.diff @@ -0,0 +1,15 @@ +diff -r daaf445d707b apps/common/main/lib/mods/perfect-scrollbar.js +--- a/apps/common/main/lib/mods/perfect-scrollbar.js Mon Jun 15 15:25:53 2015 +0300 ++++ b/apps/common/main/lib/mods/perfect-scrollbar.js Thu Jun 18 13:29:36 2015 +0300 +// change thumb event +@@ -197,6 +197,10 @@ + } + + updateScrollbarCss(); ++ ++ if (settings.onChange) { ++ settings.onChange(this); ++ } + }; + + var bindMouseScrollXHandler = function () { diff --git a/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-margins.diff b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-margins.diff new file mode 100644 index 000000000..bdb9a8b55 --- /dev/null +++ b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-margins.diff @@ -0,0 +1,103 @@ +diff -r c7981f4f7e09 apps/common/main/lib/mods/perfect-scrollbar.js +--- a/apps/common/main/lib/mods/perfect-scrollbar.js Tue Oct 07 11:32:00 2014 +0400 ++++ b/apps/common/main/lib/mods/perfect-scrollbar.js Wed Oct 08 11:37:27 2014 +0400 +// Use margins of scrollbarYRail when calculate scrollbarYRail height (scrollbarYRailHeight) and top position +@@ -28,7 +28,8 @@ + suppressScrollY: false, + scrollXMarginOffset: 0, + scrollYMarginOffset: 0, +- includePadding: false ++ includePadding: false, ++ includeMargin: true + }; + + var getEventClassName = (function () { +@@ -97,11 +98,12 @@ + scrollbarYHeight, + scrollbarYTop, + scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10), ++ scrollbarYRailHeight, + eventClassName = getEventClassName(); + + var updateContentScrollTop = function (currentTop, deltaY) { + var newTop = currentTop + deltaY, +- maxTop = containerHeight - scrollbarYHeight; ++ maxTop = scrollbarYRailHeight - scrollbarYHeight; + + if (newTop < 0) { + scrollbarYTop = 0; +@@ -113,7 +115,7 @@ + scrollbarYTop = newTop; + } + +- var scrollTop = parseInt(scrollbarYTop * (contentHeight - containerHeight) / (containerHeight - scrollbarYHeight), 10); ++ var scrollTop = parseInt(scrollbarYTop * (contentHeight - containerHeight) / (scrollbarYRailHeight - scrollbarYHeight), 10); + $this.scrollTop(scrollTop); + $scrollbarXRail.css({bottom: scrollbarXBottom - scrollTop}); + }; +@@ -148,9 +150,9 @@ + $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth, display: scrollbarXActive ? "inherit": "none"}); + + if ($scrollbarYRail.hasClass('in-scrolling')) +- $scrollbarYRail.css({/*top: $this.scrollTop(),*/ right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: scrollbarYActive ? "inherit": "none"}); ++ $scrollbarYRail.css({/*top: $this.scrollTop(),*/ right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYRailHeight, display: scrollbarYActive ? "inherit": "none"}); + else +- $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: containerHeight, display: scrollbarYActive ? "inherit": "none"}); ++ $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYRailHeight, display: scrollbarYActive ? "inherit": "none"}); + + $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth}); + $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight}); +@@ -159,6 +161,7 @@ + var updateBarSizeAndPosition = function () { + containerWidth = settings.includePadding ? $this.innerWidth() : $this.width(); + containerHeight = settings.includePadding ? $this.innerHeight() : $this.height(); ++ scrollbarYRailHeight = containerHeight - (settings.includeMargin ? (parseInt($scrollbarYRail.css('margin-top')) + parseInt($scrollbarYRail.css('margin-bottom'))): 0); + contentWidth = $this.prop('scrollWidth'); + contentHeight = $this.prop('scrollHeight'); + +@@ -176,8 +179,8 @@ + + if (!settings.suppressScrollY && containerHeight + settings.scrollYMarginOffset < contentHeight) { + scrollbarYActive = true; +- scrollbarYHeight = getSettingsAdjustedThumbSize(parseInt(containerHeight * containerHeight / contentHeight, 10)); +- scrollbarYTop = parseInt($this.scrollTop() * (containerHeight - scrollbarYHeight) / (contentHeight - containerHeight), 10); ++ scrollbarYHeight = getSettingsAdjustedThumbSize(parseInt(scrollbarYRailHeight * containerHeight / contentHeight, 10)); ++ scrollbarYTop = parseInt($this.scrollTop() * (scrollbarYRailHeight - scrollbarYHeight) / (contentHeight - containerHeight), 10); + } + else { + scrollbarYActive = false; +@@ -186,8 +189,8 @@ + $this.scrollTop(0); + } + +- if (scrollbarYTop >= containerHeight - scrollbarYHeight) { +- scrollbarYTop = containerHeight - scrollbarYHeight; ++ if (scrollbarYTop >= scrollbarYRailHeight - scrollbarYHeight) { ++ scrollbarYTop = scrollbarYRailHeight - scrollbarYHeight; + } + if (scrollbarXLeft >= containerWidth - scrollbarXWidth) { + scrollbarXLeft = containerWidth - scrollbarXWidth; +@@ -235,12 +238,12 @@ + currentTop = $scrollbarY.position().top; + $scrollbarYRail.addClass('in-scrolling'); + +- var padding = parseInt($scrollbarYRail.offsetParent().css('padding-top')); ++ var margin = parseInt($scrollbarYRail.css('margin-top')); + var rect = $scrollbarYRail[0].getBoundingClientRect(); + $scrollbarYRail.css({ + position: 'fixed', + left: rect.left, +- top: rect.top - padding ++ top: rect.top - margin + }); + + e.stopPropagation(); +@@ -419,7 +422,7 @@ + $scrollbarYRail.bind('click' + eventClassName, function (e) { + var halfOfScrollbarLength = parseInt(scrollbarYHeight / 2, 10), + positionTop = e.pageY - $scrollbarYRail.offset().top - halfOfScrollbarLength, +- maxPositionTop = containerHeight - scrollbarYHeight, ++ maxPositionTop = scrollbarYRailHeight - scrollbarYHeight, + positionRatio = positionTop / maxPositionTop; + + if (positionRatio < 0) { diff --git a/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-x-margins.diff b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-x-margins.diff new file mode 100644 index 000000000..628d58055 --- /dev/null +++ b/test/unit-tests/common/main/lib/mods/perfect-scrollbar-patch-x-margins.diff @@ -0,0 +1,89 @@ +From d16a11fb136ef9ff06d20810e56e4a944173c977 Mon Sep 17 00:00:00 2001 +From: Julia Radzhabova +Date: Fri, 19 Apr 2019 17:54:45 +0300 +Subject: [PATCH] [Common] perfect-scrollbar: set width and position for + scrollbarXRail based on margins. + +--- + apps/common/main/lib/mods/perfect-scrollbar.js | 18 ++++++++++-------- + 1 file changed, 10 insertions(+), 8 deletions(-) + +diff --git a/apps/common/main/lib/mods/perfect-scrollbar.js b/apps/common/main/lib/mods/perfect-scrollbar.js +index 9b6f650..778009d 100644 +--- a/apps/common/main/lib/mods/perfect-scrollbar.js ++++ b/apps/common/main/lib/mods/perfect-scrollbar.js +@@ -95,6 +95,7 @@ + scrollbarXWidth, + scrollbarXLeft, + scrollbarXBottom = parseInt($scrollbarXRail.css('bottom'), 10), ++ scrollbarXRailWidth, + scrollbarYHeight, + scrollbarYTop, + scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10), +@@ -122,7 +123,7 @@ + + var updateContentScrollLeft = function (currentLeft, deltaX) { + var newLeft = currentLeft + deltaX, +- maxLeft = containerWidth - scrollbarXWidth; ++ maxLeft = scrollbarXRailWidth - scrollbarXWidth; + + if (newLeft < 0) { + scrollbarXLeft = 0; +@@ -134,7 +135,7 @@ + scrollbarXLeft = newLeft; + } + +- var scrollLeft = parseInt(scrollbarXLeft * (contentWidth - containerWidth) / (containerWidth - scrollbarXWidth), 10); ++ var scrollLeft = parseInt(scrollbarXLeft * (contentWidth - containerWidth) / (scrollbarXRailWidth - scrollbarXWidth), 10); + $this.scrollLeft(scrollLeft); + $scrollbarYRail.css({right: scrollbarYRight - scrollLeft}); + }; +@@ -147,7 +148,7 @@ + }; + + var updateScrollbarCss = function () { +- $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: containerWidth, display: scrollbarXActive ? "inherit": "none"}); ++ $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: scrollbarXRailWidth, display: scrollbarXActive ? "inherit": "none"}); + + if ($scrollbarYRail.hasClass('in-scrolling')) + $scrollbarYRail.css({/*top: $this.scrollTop(),*/ right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYRailHeight, display: scrollbarYActive ? "inherit": "none"}); +@@ -162,13 +163,14 @@ + containerWidth = settings.includePadding ? $this.innerWidth() : $this.width(); + containerHeight = settings.includePadding ? $this.innerHeight() : $this.height(); + scrollbarYRailHeight = containerHeight - (settings.includeMargin ? (parseInt($scrollbarYRail.css('margin-top')) + parseInt($scrollbarYRail.css('margin-bottom'))): 0); ++ scrollbarXRailWidth = containerWidth - (settings.includeMargin ? (parseInt($scrollbarXRail.css('margin-left')) + parseInt($scrollbarXRail.css('margin-right'))): 0); + contentWidth = $this.prop('scrollWidth'); + contentHeight = $this.prop('scrollHeight'); + + if (!settings.suppressScrollX && containerWidth + settings.scrollXMarginOffset < contentWidth) { + scrollbarXActive = true; +- scrollbarXWidth = getSettingsAdjustedThumbSize(parseInt(containerWidth * containerWidth / contentWidth, 10)); +- scrollbarXLeft = parseInt($this.scrollLeft() * (containerWidth - scrollbarXWidth) / (contentWidth - containerWidth), 10); ++ scrollbarXWidth = getSettingsAdjustedThumbSize(parseInt(scrollbarXRailWidth * containerWidth / contentWidth, 10)); ++ scrollbarXLeft = parseInt($this.scrollLeft() * (scrollbarXRailWidth - scrollbarXWidth) / (contentWidth - containerWidth), 10); + } + else { + scrollbarXActive = false; +@@ -192,8 +194,8 @@ + if (scrollbarYTop >= scrollbarYRailHeight - scrollbarYHeight) { + scrollbarYTop = scrollbarYRailHeight - scrollbarYHeight; + } +- if (scrollbarXLeft >= containerWidth - scrollbarXWidth) { +- scrollbarXLeft = containerWidth - scrollbarXWidth; ++ if (scrollbarXLeft >= scrollbarXRailWidth - scrollbarXWidth) { ++ scrollbarXLeft = scrollbarXRailWidth - scrollbarXWidth; + } + + updateScrollbarCss(); +@@ -461,7 +463,7 @@ + $scrollbarXRail.bind('click' + eventClassName, function (e) { + var halfOfScrollbarLength = parseInt(scrollbarXWidth / 2, 10), + positionLeft = e.pageX - $scrollbarXRail.offset().left - halfOfScrollbarLength, +- maxPositionLeft = containerWidth - scrollbarXWidth, ++ maxPositionLeft = scrollbarXRailWidth - scrollbarXWidth, + positionRatio = positionLeft / maxPositionLeft; + + if (positionRatio < 0) { +-- +2.6.1.windows.1 + diff --git a/test/unit-tests/common/main/lib/mods/perfect-scrollbar.js b/test/unit-tests/common/main/lib/mods/perfect-scrollbar.js new file mode 100644 index 000000000..fe1879cc3 --- /dev/null +++ b/test/unit-tests/common/main/lib/mods/perfect-scrollbar.js @@ -0,0 +1,658 @@ +/* Copyright (c) 2012, 2014 Hyeonje Alex Jun and other contributors + * Licensed under the MIT License + */ +(function (factory) { + 'use strict'; + + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['jquery'], factory); + } else if (typeof exports === 'object') { + // Node/CommonJS + factory(require('jquery')); + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { + 'use strict'; + + // The default settings for the plugin + var defaultSettings = { + wheelSpeed: 10, + wheelPropagation: false, + minScrollbarLength: null, + useBothWheelAxes: false, + useKeyboard: true, + suppressScrollX: false, + suppressScrollY: false, + scrollXMarginOffset: 0, + scrollYMarginOffset: 0, + includePadding: false, + includeMargin: true + }; + + var getEventClassName = (function () { + var incrementingId = 0; + return function () { + var id = incrementingId; + incrementingId += 1; + return '.perfect-scrollbar-' + id; + }; + }()); + + $.fn.perfectScrollbar = function (suppliedSettings, option) { + + return this.each(function () { + // Use the default settings + var settings = $.extend(true, {}, defaultSettings), + $this = $(this); + + if (typeof suppliedSettings === "object") { + // But over-ride any supplied + $.extend(true, settings, suppliedSettings); + } else { + // If no settings were supplied, then the first param must be the option + option = suppliedSettings; + } + + // Catch options + + if (option === 'update') { + if ($this.data('perfect-scrollbar-update')) { + $this.data('perfect-scrollbar-update')(); + } + return $this; + } + else if (option === 'destroy') { + if ($this.data('perfect-scrollbar-destroy')) { + $this.data('perfect-scrollbar-destroy')(); + } + return $this; + } + + if ($this.data('perfect-scrollbar')) { + // if there's already perfect-scrollbar + return $this.data('perfect-scrollbar'); + } + + + // Or generate new perfectScrollbar + + // Set class to the container + $this.addClass('ps-container oo'); + + var $scrollbarXRail = $("
        ").appendTo($this), + $scrollbarYRail = $("
        ").appendTo($this), + $scrollbarX = $("
        ").appendTo($scrollbarXRail), + $scrollbarY = $("
        ").appendTo($scrollbarYRail), + scrollbarXActive, + scrollbarYActive, + containerWidth, + containerHeight, + contentWidth, + contentHeight, + scrollbarXWidth, + scrollbarXLeft, + scrollbarXBottom = parseInt($scrollbarXRail.css('bottom'), 10), + scrollbarXRailWidth, + scrollbarYHeight, + scrollbarYTop, + scrollbarYRight = parseInt($scrollbarYRail.css('right'), 10), + scrollbarYRailHeight, + eventClassName = getEventClassName(); + + var updateContentScrollTop = function (currentTop, deltaY) { + var newTop = currentTop + deltaY, + maxTop = scrollbarYRailHeight - scrollbarYHeight; + + if (newTop < 0) { + scrollbarYTop = 0; + } + else if (newTop > maxTop) { + scrollbarYTop = maxTop; + } + else { + scrollbarYTop = newTop; + } + + var scrollTop = parseInt(scrollbarYTop * (contentHeight - containerHeight) / (scrollbarYRailHeight - scrollbarYHeight), 10); + $this.scrollTop(scrollTop); + $scrollbarXRail.css({bottom: scrollbarXBottom - scrollTop}); + }; + + var updateContentScrollLeft = function (currentLeft, deltaX) { + var newLeft = currentLeft + deltaX, + maxLeft = scrollbarXRailWidth - scrollbarXWidth; + + if (newLeft < 0) { + scrollbarXLeft = 0; + } + else if (newLeft > maxLeft) { + scrollbarXLeft = maxLeft; + } + else { + scrollbarXLeft = newLeft; + } + + var scrollLeft = parseInt(scrollbarXLeft * (contentWidth - containerWidth) / (scrollbarXRailWidth - scrollbarXWidth), 10); + $this.scrollLeft(scrollLeft); + $scrollbarYRail.css({right: scrollbarYRight - scrollLeft}); + }; + + var getSettingsAdjustedThumbSize = function (thumbSize) { + if (settings.minScrollbarLength) { + thumbSize = Math.max(thumbSize, settings.minScrollbarLength); + } + return thumbSize; + }; + + var updateScrollbarCss = function () { + $scrollbarXRail.css({left: $this.scrollLeft(), bottom: scrollbarXBottom - $this.scrollTop(), width: scrollbarXRailWidth, display: scrollbarXActive ? "inherit": "none"}); + + if ($scrollbarYRail.hasClass('in-scrolling')) + $scrollbarYRail.css({/*top: $this.scrollTop(),*/ right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYRailHeight, display: scrollbarYActive ? "inherit": "none"}); + else + $scrollbarYRail.css({top: $this.scrollTop(), right: scrollbarYRight - $this.scrollLeft(), height: scrollbarYRailHeight, display: scrollbarYActive ? "inherit": "none"}); + + $scrollbarX && $scrollbarX.css({left: scrollbarXLeft, width: scrollbarXWidth}); + $scrollbarY && $scrollbarY.css({top: scrollbarYTop, height: scrollbarYHeight}); + }; + + var updateBarSizeAndPosition = function () { + containerWidth = settings.includePadding ? $this.innerWidth() : $this.width(); + containerHeight = settings.includePadding ? $this.innerHeight() : $this.height(); + scrollbarYRailHeight = containerHeight - (settings.includeMargin ? (parseInt($scrollbarYRail.css('margin-top')) + parseInt($scrollbarYRail.css('margin-bottom'))): 0); + scrollbarXRailWidth = containerWidth - (settings.includeMargin ? (parseInt($scrollbarXRail.css('margin-left')) + parseInt($scrollbarXRail.css('margin-right'))): 0); + contentWidth = $this.prop('scrollWidth'); + contentHeight = $this.prop('scrollHeight'); + + if (!settings.suppressScrollX && containerWidth + settings.scrollXMarginOffset < contentWidth) { + scrollbarXActive = true; + scrollbarXWidth = getSettingsAdjustedThumbSize(parseInt(scrollbarXRailWidth * containerWidth / contentWidth, 10)); + scrollbarXLeft = parseInt($this.scrollLeft() * (scrollbarXRailWidth - scrollbarXWidth) / (contentWidth - containerWidth), 10); + } + else { + scrollbarXActive = false; + scrollbarXWidth = 0; + scrollbarXLeft = 0; + $this.scrollLeft(0); + } + + if (!settings.suppressScrollY && containerHeight + settings.scrollYMarginOffset < contentHeight) { + scrollbarYActive = true; + scrollbarYHeight = getSettingsAdjustedThumbSize(parseInt(scrollbarYRailHeight * containerHeight / contentHeight, 10)); + scrollbarYTop = parseInt($this.scrollTop() * (scrollbarYRailHeight - scrollbarYHeight) / (contentHeight - containerHeight), 10); + } + else { + scrollbarYActive = false; + scrollbarYHeight = 0; + scrollbarYTop = 0; + $this.scrollTop(0); + } + + if (scrollbarYTop >= scrollbarYRailHeight - scrollbarYHeight) { + scrollbarYTop = scrollbarYRailHeight - scrollbarYHeight; + } + if (scrollbarXLeft >= scrollbarXRailWidth - scrollbarXWidth) { + scrollbarXLeft = scrollbarXRailWidth - scrollbarXWidth; + } + + updateScrollbarCss(); + + if (settings.onChange) { + settings.onChange(this); + } + }; + + var bindMouseScrollXHandler = function () { + var currentLeft, + currentPageX; + + $scrollbarX.bind('mousedown' + eventClassName, function (e) { + currentPageX = e.pageX; + currentLeft = $scrollbarX.position().left; + $scrollbarXRail.addClass('in-scrolling'); + e.stopPropagation(); + e.preventDefault(); + }); + + $(document).bind('mousemove' + eventClassName, function (e) { + if ($scrollbarXRail.hasClass('in-scrolling')) { + updateContentScrollLeft(currentLeft, e.pageX - currentPageX); + e.stopPropagation(); + e.preventDefault(); + } + }); + + $(document).bind('mouseup' + eventClassName, function (e) { + if ($scrollbarXRail.hasClass('in-scrolling')) { + $scrollbarXRail.removeClass('in-scrolling'); + } + }); + + currentLeft = + currentPageX = null; + }; + + var bindMouseScrollYHandler = function () { + var currentTop, + currentPageY; + + $scrollbarY.bind('mousedown' + eventClassName, function (e) { + currentPageY = e.pageY; + currentTop = $scrollbarY.position().top; + $scrollbarYRail.addClass('in-scrolling'); + + var margin = parseInt($scrollbarYRail.css('margin-top')); + var rect = $scrollbarYRail[0].getBoundingClientRect(); + $scrollbarYRail.css({ + position: 'fixed', + left: rect.left, + top: rect.top - margin + }); + + e.stopPropagation(); + e.preventDefault(); + }); + + $(document).bind('mousemove' + eventClassName, function (e) { + if ($scrollbarYRail.hasClass('in-scrolling')) { + updateContentScrollTop(currentTop, e.pageY - currentPageY); + e.stopPropagation(); + e.preventDefault(); + } + }); + + $(document).bind('mouseup' + eventClassName, function (e) { + if ($scrollbarYRail.hasClass('in-scrolling')) { + $scrollbarYRail.removeClass('in-scrolling'); + + $scrollbarYRail.css({ + position: '', + left: '', + top: '' + }); + + updateScrollbarCss(); + } + }); + + currentTop = + currentPageY = null; + }; + + // check if the default scrolling should be prevented. + var shouldPreventDefault = function (deltaX, deltaY) { + var scrollTop = $this.scrollTop(); + if (deltaX === 0) { + if (!scrollbarYActive) { + return false; + } + if ((scrollTop === 0 && deltaY > 0) || (scrollTop >= contentHeight - containerHeight && deltaY < 0)) { + return !settings.wheelPropagation; + } + } + + var scrollLeft = $this.scrollLeft(); + if (deltaY === 0) { + if (!scrollbarXActive) { + return false; + } + if ((scrollLeft === 0 && deltaX < 0) || (scrollLeft >= contentWidth - containerWidth && deltaX > 0)) { + return !settings.wheelPropagation; + } + } + return true; + }; + + // bind handlers + var bindMouseWheelHandler = function () { + // FIXME: Backward compatibility. + // After e.deltaFactor applied, wheelSpeed should have smaller value. + // Currently, there's no way to change the settings after the scrollbar initialized. + // But if the way is implemented in the future, wheelSpeed should be reset. + settings.wheelSpeed /= 10; + + var shouldPrevent = false; + $this.bind('mousewheel' + eventClassName, function (e, deprecatedDelta, deprecatedDeltaX, deprecatedDeltaY) { + Common.NotificationCenter.trigger('hints:clear'); + var deltaX = e.deltaX * e.deltaFactor || deprecatedDeltaX, + deltaY = e.deltaY * e.deltaFactor || deprecatedDeltaY; + + if (e && e.target && (e.target.type === 'textarea' || e.target.type === 'input')) { + e.stopImmediatePropagation(); + e.preventDefault(); + + var scroll = $(e.target).scrollTop(), wheelDeltaY = 0; + if (e.originalEvent) { + if (e.originalEvent.wheelDelta) wheelDeltaY = e.originalEvent.wheelDelta; + else if (e.originalEvent.deltaY) wheelDeltaY = -e.originalEvent.deltaY*40; + else if (e.originalEvent.detail) wheelDeltaY = e.originalEvent.detail; + } else { + wheelDeltaY = (e.wheelDelta !== undefined) ? e.wheelDelta : e.deltaY; + } + + + $(e.target).scrollTop(scroll - wheelDeltaY); + + return; + } + + shouldPrevent = false; + if (!settings.useBothWheelAxes) { + // deltaX will only be used for horizontal scrolling and deltaY will + // only be used for vertical scrolling - this is the default + $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed)); + $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed)); + } else if (scrollbarYActive && !scrollbarXActive) { + // only vertical scrollbar is active and useBothWheelAxes option is + // active, so let's scroll vertical bar using both mouse wheel axes + if (deltaY) { + $this.scrollTop($this.scrollTop() - (deltaY * settings.wheelSpeed)); + } else { + $this.scrollTop($this.scrollTop() + (deltaX * settings.wheelSpeed)); + } + shouldPrevent = true; + } else if (scrollbarXActive && !scrollbarYActive) { + // useBothWheelAxes and only horizontal bar is active, so use both + // wheel axes for horizontal bar + if (deltaX) { + $this.scrollLeft($this.scrollLeft() + (deltaX * settings.wheelSpeed)); + } else { + $this.scrollLeft($this.scrollLeft() - (deltaY * settings.wheelSpeed)); + } + shouldPrevent = true; + } + + // update bar position + updateBarSizeAndPosition(); + + shouldPrevent = (shouldPrevent || shouldPreventDefault(deltaX, deltaY)); + if (shouldPrevent) { + e.stopPropagation(); + e.preventDefault(); + } + }); + + // fix Firefox scroll problem + $this.bind('MozMousePixelScroll' + eventClassName, function (e) { + if (shouldPrevent) { + e.preventDefault(); + } + }); + }; + + var bindKeyboardHandler = function () { + var hovered = false; + $this.bind('mouseenter' + eventClassName, function (e) { + hovered = true; + }); + $this.bind('mouseleave' + eventClassName, function (e) { + hovered = false; + }); + + var shouldPrevent = false; + $(document).bind('keydown' + eventClassName, function (e) { + if (!hovered || $(document.activeElement).is(":input,[contenteditable]")) { + return; + } + + var deltaX = 0, + deltaY = 0; + + switch (e.which) { + case 37: // left + deltaX = -30; + break; + case 38: // up + deltaY = 30; + break; + case 39: // right + deltaX = 30; + break; + case 40: // down + deltaY = -30; + break; + case 33: // page up + deltaY = 90; + break; + case 32: // space bar + case 34: // page down + deltaY = -90; + break; + case 35: // end + deltaY = -containerHeight; + break; + case 36: // home + deltaY = containerHeight; + break; + default: + return; + } + + $this.scrollTop($this.scrollTop() - deltaY); + $this.scrollLeft($this.scrollLeft() + deltaX); + + shouldPrevent = shouldPreventDefault(deltaX, deltaY); + if (shouldPrevent) { + e.preventDefault(); + } + }); + }; + + var bindRailClickHandler = function () { + var stopPropagation = function (e) { e.stopPropagation(); }; + + $scrollbarY.bind('click' + eventClassName, stopPropagation); + $scrollbarYRail.bind('click' + eventClassName, function (e) { + var halfOfScrollbarLength = parseInt(scrollbarYHeight / 2, 10), + positionTop = e.pageY - $scrollbarYRail.offset().top - halfOfScrollbarLength, + maxPositionTop = scrollbarYRailHeight - scrollbarYHeight, + positionRatio = positionTop / maxPositionTop; + + if (positionRatio < 0) { + positionRatio = 0; + } else if (positionRatio > 1) { + positionRatio = 1; + } + + $this.scrollTop((contentHeight - containerHeight) * positionRatio); + }); + + $scrollbarX.bind('click' + eventClassName, stopPropagation); + $scrollbarXRail.bind('click' + eventClassName, function (e) { + var halfOfScrollbarLength = parseInt(scrollbarXWidth / 2, 10), + positionLeft = e.pageX - $scrollbarXRail.offset().left - halfOfScrollbarLength, + maxPositionLeft = scrollbarXRailWidth - scrollbarXWidth, + positionRatio = positionLeft / maxPositionLeft; + + if (positionRatio < 0) { + positionRatio = 0; + } else if (positionRatio > 1) { + positionRatio = 1; + } + + $this.scrollLeft((contentWidth - containerWidth) * positionRatio); + }); + }; + + // bind mobile touch handler + var bindMobileTouchHandler = function () { + var applyTouchMove = function (differenceX, differenceY) { + $this.scrollTop($this.scrollTop() - differenceY); + $this.scrollLeft($this.scrollLeft() - differenceX); + + // update bar position + updateBarSizeAndPosition(); + }; + + var startCoords = {}, + startTime = 0, + speed = {}, + breakingProcess = null, + inGlobalTouch = false; + + $(window).bind("touchstart" + eventClassName, function (e) { + inGlobalTouch = true; + }); + $(window).bind("touchend" + eventClassName, function (e) { + inGlobalTouch = false; + }); + + $this.bind("touchstart" + eventClassName, function (e) { + var touch = e.originalEvent.targetTouches[0]; + + startCoords.pageX = touch.pageX; + startCoords.pageY = touch.pageY; + + startTime = (new Date()).getTime(); + + if (breakingProcess !== null) { + clearInterval(breakingProcess); + } + + e.stopPropagation(); + }); + $this.bind("touchmove" + eventClassName, function (e) { + if (!inGlobalTouch && e.originalEvent.targetTouches.length === 1) { + var touch = e.originalEvent.targetTouches[0]; + + var currentCoords = {}; + currentCoords.pageX = touch.pageX; + currentCoords.pageY = touch.pageY; + + var differenceX = currentCoords.pageX - startCoords.pageX, + differenceY = currentCoords.pageY - startCoords.pageY; + + applyTouchMove(differenceX, differenceY); + startCoords = currentCoords; + + var currentTime = (new Date()).getTime(); + + var timeGap = currentTime - startTime; + if (timeGap > 0) { + speed.x = differenceX / timeGap; + speed.y = differenceY / timeGap; + startTime = currentTime; + } + + e.preventDefault(); + } + }); + $this.bind("touchend" + eventClassName, function (e) { + clearInterval(breakingProcess); + breakingProcess = setInterval(function () { + if (Math.abs(speed.x) < 0.01 && Math.abs(speed.y) < 0.01) { + clearInterval(breakingProcess); + return; + } + + applyTouchMove(speed.x * 30, speed.y * 30); + + speed.x *= 0.8; + speed.y *= 0.8; + }, 10); + }); + }; + + var bindScrollHandler = function () { + $this.bind('scroll' + eventClassName, function (e) { + updateBarSizeAndPosition(); + }); + }; + + var destroy = function () { + $this.unbind(eventClassName); + $(window).unbind(eventClassName); + $(document).unbind(eventClassName); + $this.data('perfect-scrollbar', null); + $this.data('perfect-scrollbar-update', null); + $this.data('perfect-scrollbar-destroy', null); + $scrollbarX.remove(); + $scrollbarY.remove(); + $scrollbarXRail.remove(); + $scrollbarYRail.remove(); + + // clean all variables + $scrollbarX = + $scrollbarY = + containerWidth = + containerHeight = + contentWidth = + contentHeight = + scrollbarXWidth = + scrollbarXLeft = + scrollbarXBottom = + scrollbarYHeight = + scrollbarYTop = + scrollbarYRight = null; + }; + + var ieSupport = function (version) { + $this.addClass('ie').addClass('ie' + version); + + var bindHoverHandlers = function () { + var mouseenter = function () { + $(this).addClass('hover'); + }; + var mouseleave = function () { + $(this).removeClass('hover'); + }; + $this.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave); + $scrollbarXRail.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave); + $scrollbarYRail.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave); + $scrollbarX.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave); + $scrollbarY.bind('mouseenter' + eventClassName, mouseenter).bind('mouseleave' + eventClassName, mouseleave); + }; + + var fixIe6ScrollbarPosition = function () { + updateScrollbarCss = function () { + $scrollbarX.css({left: scrollbarXLeft + $this.scrollLeft(), bottom: scrollbarXBottom, width: scrollbarXWidth}); + $scrollbarY.css({top: scrollbarYTop + $this.scrollTop(), right: scrollbarYRight, height: scrollbarYHeight}); + $scrollbarX.hide().show(); + $scrollbarY.hide().show(); + }; + }; + + if (version === 6) { + bindHoverHandlers(); + fixIe6ScrollbarPosition(); + } + }; + + var supportsTouch = (('ontouchstart' in window) || window.DocumentTouch && document instanceof window.DocumentTouch); + + var initialize = function () { + var ieMatch = navigator.userAgent.toLowerCase().match(/(msie) ([\w.]+)/); + if (ieMatch && ieMatch[1] === 'msie') { + // must be executed at first, because 'ieSupport' may addClass to the container + ieSupport(parseInt(ieMatch[2], 10)); + } + + updateBarSizeAndPosition(); + bindScrollHandler(); + bindMouseScrollXHandler(); + bindMouseScrollYHandler(); + bindRailClickHandler(); + if (supportsTouch) { + bindMobileTouchHandler(); + } + if ($this.mousewheel) { + bindMouseWheelHandler(); + } + if (settings.useKeyboard) { + bindKeyboardHandler(); + } + $this.data('perfect-scrollbar', $this); + $this.data('perfect-scrollbar-update', updateBarSizeAndPosition); + $this.data('perfect-scrollbar-destroy', destroy); + }; + + // initialize + initialize(); + + return $this; + }); + }; +})); diff --git a/test/unit-tests/common/main/lib/view/CellEditor.js b/test/unit-tests/common/main/lib/view/CellEditor.js new file mode 100644 index 000000000..701c576d5 --- /dev/null +++ b/test/unit-tests/common/main/lib/view/CellEditor.js @@ -0,0 +1,86 @@ +/* + * + * (c) Copyright Ascensio System SIA 2010-2021 + * + * 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 20A-12 Ernesta Birznieka-Upisha + * street, Riga, Latvia, EU, LV-1050. + * + * 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 + * + */ +/** + * CellEditor.js + * + * Displays loading mask over selected element(s) or component. Accepts both single and multiple selectors. + * + * Created by Sharova Olga 07.09.2021 + * Copyright (c) 2021 Ascensio System SIA. All rights reserved. + * + */ + +!window.common && (window.common = {}); +!common.view && (common.view = {}); + +common.view.CellEditor = new(function (){ + var me + ,$cellname + ,$cellcontent + ,$btnexpand + ,$btnfunc; + + function createView() + { + me=this; + me.$el = $('#cell-editing-box'); + me.$cellcontent=$('#ce-cell-content'); + me.$cellname = $('#ce-cell-name'); + me.$btnexpand = $('#ce-btn-expand'); + me.$btnfunc = $('#ce-func-label'); + me.$btnfunc.addClass('disabled'); + + me.$cellname.on('focus', function(e){ + var txt = me.$cellname[0]; + txt.selectionStart = 0; + txt.selectionEnd = txt.value.length; + txt.scrollLeft = txt.scrollWidth; + }); + } + function updateCellInfo(info) { + if (info) { + me.$cellname.val(typeof(info)=='string' ? info : info.asc_getName()); + } + } + function cellNameDisabled(disabled){ + (disabled) ? me.$cellname.attr('disabled', 'disabled') : me.$cellname.removeAttr('disabled'); + //this.btnNamedRanges.setDisabled(disabled); + } + return { + create: createView, + cell: { + updateInfo: updateCellInfo, + nameDisabled: cellNameDisabled + } + } +})(); \ No newline at end of file diff --git a/test/unit-tests/common/main/resources/less/asc-mixins.less b/test/unit-tests/common/main/resources/less/asc-mixins.less new file mode 100644 index 000000000..ae626a8f9 --- /dev/null +++ b/test/unit-tests/common/main/resources/less/asc-mixins.less @@ -0,0 +1,397 @@ +*, *:before, *:after { + -moz-user-select: none; +} + +:focus { + outline: none; +} + +.gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) { + background: @color; + background: -webkit-gradient(linear, left bottom,left top, color-stop(0, @start), color-stop(1, @stop)); + background: -moz-linear-gradient(center bottom, @start 0%, @stop 100%); + background: -o-linear-gradient(@stop, @start); + background: linear-gradient(bottom, @start, @stop); +// filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop, @start)); +} + +.box-shadow(@arguments) { + -webkit-box-shadow: @arguments; + //-moz-box-shadow: @arguments; + box-shadow: @arguments; +} + +.box-inner-shadow(@arguments) { + -webkit-box-shadow: inset @arguments; + //-moz-box-shadow: inset @arguments; + box-shadow: inset @arguments; +} + +.border-radius(@radius: 2px) { + border-radius: @radius; +} + +.position(@type: absolute, @left: 0, @top: 0, @right: 0, @bottom: 0) { + position: @type; + left: @left; + top: @top; + right: @right; + bottom: @bottom; +} + +.fontsize(@value) { + font-size: @value; +} + +// User select +.user-select(@select: none) { + -webkit-user-select: @select; + -moz-user-select: @select; + -ms-user-select: @select; +// -o-user-select: @select; + user-select: @select; +} + +.toolbar-btn-icon(@icon-class, @index, @icon-size, @offset-x: 0, @offset-y: 0) { + .@{icon-class} {background-position: 0 -(@index * @icon-size - @offset-y);} + .btn.active > .@{icon-class}, + .btn:active > .@{icon-class} {background-position: (-1 * @icon-size - @offset-x) -(@index * @icon-size - @offset-y);} + .btn.disabled > .@{icon-class} {background-position: (-2 * @icon-size - @offset-x) -(@index * @icon-size - @offset-y);} +} + +.toolbar-group-btn-icon(@icon-class, @index, @icon-size, @offset-x: 0, @offset-y: 0) { + .@{icon-class} {background-position: 0 -(@index * @icon-size - @offset-y);} + .btn-group.open > .@{icon-class}, + .btn.active > .@{icon-class}, + .btn:active > .@{icon-class} {background-position: (-1 * @icon-size - @offset-x) -(@index * @icon-size - @offset-y);} + .btn.disabled > .@{icon-class} {background-position: (-2 * @icon-size - @offset-x) -(@index * @icon-size - @offset-y);} +} + +.menu-btn-icon(@icon-class, @index, @icon-size) { + .menu-item-icon.@{icon-class} {background-position: 0 -@index*@icon-size;} + li > a.checked > .menu-item-icon.@{icon-class} {background-position: -1*@icon-size -@index*@icon-size;} +} + +.options-btn-icon(@icon-class, @index, @icon-size) { + .@{icon-class} {background-position: 0 -@index*@icon-size;} + button.over > .@{icon-class} {background-position: -1*@icon-size -@index*@icon-size;} +// .btn-group.open > .@{icon-class}, + button.active > .@{icon-class}, + button:active > .@{icon-class} {background-position: -2*@icon-size -@index*@icon-size;} + button.disabled > .@{icon-class} {background-position: -3*@icon-size -@index*@icon-size;} +} + +/** +*/ +:root { + --bgX: 0px; + + --pixel-ratio-factor: 1; + + .pixel-ratio__1_5 { + @ratio: 1.5; + @one-px: 1px / @ratio; + @two-px: 2px / @ratio; + + --pixel-ratio-factor: @ratio; + --scaled-one-pixel: @one-px; + --scaled-two-pixel: @two-px; + } + + .pixel-ratio__2 { + } + + .pixel-ratio__1_25 { + @ratio: 1.25; + @one-px: 1px / @ratio; + @two-px: 2px / @ratio; + + --pixel-ratio-factor: @ratio; + --scaled-one-pixel: @one-px; + --scaled-two-pixel: @two-px; + } + + .pixel-ratio__1_75 { + @ratio: 1.75; + @one-px: 1px / @ratio; + @two-px: 2px / @ratio; + + --pixel-ratio-factor: @ratio; + --scaled-one-pixel: @one-px; + --scaled-two-pixel: @two-px; + } +} + +.button-normal-icon(@icon-class, @index, @icon-size, @normal-h-offset: 0px) { + .@{icon-class} { + background-position: -0*@icon-size -@index*@icon-size; + background-position: @normal-h-offset -@index*@icon-size; + } +// .@{icon-class} {background-position-y: -@index*@icon-size;} +} + +.button-otherstates-icon(@icon-class, @icon-size) { + .btn { + &:active, &.active { + &:not(:disabled):not(.disabled) { + > .@{icon-class} { + @iconsize: -1*@icon-size; + + background-position-x: @iconsize; + --bgX: @iconsize; + } + } + } + } +} + +.mx-button-otherstates-icon2(@offset) { + &.active, &:active{ + &:not(:disabled):not(.disabled) { + .icon { + background-position-x: @offset; + } + } + } + + //&.active svg.icon, + //&:active svg.icon {fill:#fff;} +} + +.button-otherstates-icon2(@icon-class, @icon-size) { + button.@{icon-class} { + .mx-button-otherstates-icon2(@icon-size); + } +} + +.menu-icon-normal(@icon-class, @index, @icon-size) { + .menu-item-icon.@{icon-class} { + background-position: 0 -@index*@icon-size; + background-position: var(--bgX) -@index*@icon-size; + } +// .menu-item-icon.@{icon-class} {background-position-y: -@index*@icon-size;} +} + +.menu-otherstates-icon(@menu-class, @icon-size) { + .@{menu-class} li > a.checked > .menu-item-icon {background-position-x: -1*@icon-size; --bgX: calc(-1*@icon-size);} + .@{menu-class} li.disabled .menu-item-icon {background-position-x: -2*@icon-size; --bgX: calc(-2*@icon-size);} +} + +/**/ + +.background-ximage(@image, @image2x, @w: auto, @h: auto, @repeat: no-repeat) { + background-image: data-uri(%("%s",@image)); + background-repeat: @repeat; + + @media + only screen and (-webkit-min-device-pixel-ratio: 2), + only screen and (min-resolution: 2dppx), + only screen and (min-resolution: 192dpi) { + background-image: data-uri(%("%s",@image2x)); + background-size: @w @h; + } +} + +.choose-image-path(@fromcommon) when (@fromcommon = false) { + @path: if(@icon-src-base64, @app-image-path, @app-image-const-path); +}; + +.choose-image-path(@fromcommon) when (@fromcommon = true) { + @path: if(@icon-src-base64, @common-image-path, @common-image-const-path); +} + +.background-ximage-v2(@image, @w: auto, @h: auto, @repeat: no-repeat, @commonimage: true) { + .choose-image-path(@commonimage); + @imagepath: '@{path}/@{image}'; + + background-image: if(@icon-src-base64, data-uri(%("%s", '@{imagepath}')), ~"url(@{imagepath})"); + background-repeat: @repeat; + + @1d5ximage: replace(@imagepath, '\.png$', '@1.5x.png'); + @1d75ximage: replace(@imagepath, '\.png$', '@1.75x.png'); + @1d25ximage: replace(@imagepath, '\.png$', '@1.25x.png'); + @2ximage: replace(@imagepath, '\.png$', '@2x.png'); + + @media only screen { + @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), + (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx), + (min-resolution: 144dpi) and (max-resolution: 191dpi) + { + background-image: ~"url(@{1d5ximage})"; + background-size: @w @h; + } + + @media (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 2dppx), + (min-resolution: 192dpi) + { + background-image: ~"url(@{2ximage})"; + background-size: @w @h; + } + } +} + +.background-ximage-all(@image, @w: auto, @h: auto, @repeat: no-repeat, @commonimage: true) { + .choose-image-path(@commonimage); + @imagepath: '@{path}/@{image}'; + + background-image: if(@icon-src-base64, data-uri(%("%s", '@{imagepath}')), ~"url(@{imagepath})"); + background-repeat: @repeat; + + @1d5ximage: replace(@imagepath, '\.png$', '@1.5x.png'); + @1d75ximage: replace(@imagepath, '\.png$', '@1.75x.png'); + @1d25ximage: replace(@imagepath, '\.png$', '@1.25x.png'); + @2ximage: replace(@imagepath, '\.png$', '@2x.png'); + + @media only screen { + @media (-webkit-min-device-pixel-ratio: 1.25) and (-webkit-max-device-pixel-ratio: 1.49), + (min-resolution: 1.25dppx) and (max-resolution: 1.49dppx), + (min-resolution: 120dpi) and (max-resolution: 143dpi) + { + background-image: ~"url(@{1d25ximage})"; + background-size: @w @h; + } + + @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.74), + (min-resolution: 1.5dppx) and (max-resolution: 1.74dppx), + (min-resolution: 144dpi) and (max-resolution: 167dpi) + { + background-image: ~"url(@{1d5ximage})"; + background-size: @w @h; + } + + @media (-webkit-min-device-pixel-ratio: 1.75) and (-webkit-max-device-pixel-ratio: 1.9), + (min-resolution: 1.75dppx) and (max-resolution: 1.9dppx), + (min-resolution: 168dpi) and (max-resolution: 191dpi) + { + background-image: ~"url(@{1d75ximage})"; + background-size: @w @h; + } + + @media (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 2dppx), + (min-resolution: 192dpi) + { + background-image: ~"url(@{2ximage})"; + background-size: @w @h; + } + } +} + +.img-commonctrl { + &.img-colored { + filter: none; + } +} + +@common-controls-width: 100px; +.img-commonctrl, + .dropdown-menu li .checked:before, .input-error:before, .input-warning:before, + .btn-toolbar .icon.img-commonctrl, .list-item div.checked:before +{ + background-image: if(@icon-src-base64, data-uri(%("%s",'@{common-image-path}/@{common-controls}')), ~"url(@{common-image-const-path}/@{common-controls})"); + background-repeat: no-repeat; + filter: @component-normal-icon-filter; + + @1d25ximage: replace(@common-controls, '\.png$', '@1.25x.png'); + @1d5ximage: replace(@common-controls, '\.png$', '@1.5x.png'); + @1d75ximage: replace(@common-controls, '\.png$', '@1.75x.png'); + @2ximage: replace(@common-controls, '\.png$', '@2x.png'); + + @media only screen { + @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), + (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx), + (min-resolution: 144dpi) and (max-resolution: 191dpi) + { + background-image: ~"url(@{common-image-const-path}/@{1d5ximage})"; + background-size: @common-controls-width auto; + } + + @media (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 2dppx), + (min-resolution: 192dpi) + { + background-image: ~"url(@{common-image-const-path}/@{2ximage})"; + background-size: @common-controls-width auto; + } + } + + .pixel-ratio__1_25 & { + background-image: ~"url(@{common-image-const-path}/@{1d25ximage})"; + background-size: @common-controls-width auto; + } + + .pixel-ratio__1_75 & { + background-image: ~"url(@{common-image-const-path}/@{1d75ximage})"; + background-size: @common-controls-width auto; + } +} + +@img-colorpicker-width: 205px; +.img-colorpicker, .hsb-colorpicker .empty-color:before +{ + background-image: if(@icon-src-base64, data-uri(%("%s",'@{common-image-path}/hsbcolorpicker/hsb-colorpicker.png')), ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker.png)"); + background-repeat: no-repeat; + + @media only screen { + @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), + (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx), + (min-resolution: 144dpi) and (max-resolution: 191dpi) + { + background-image: ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker@1.5x.png)"; + background-size: @img-colorpicker-width auto; + } + + @media (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 2dppx), + (min-resolution: 192dpi) + { + background-image: ~"url(@{common-image-const-path}/hsbcolorpicker/hsb-colorpicker@2x.png)"; + background-size: @img-colorpicker-width auto; + } + } +} + +.icon.lang-flag { + @img-flags-width: 48px; + + width: 16px; + height: 12px; + + background-image: if(@icon-src-base64, data-uri(%("%s",'@{common-image-path}/controls/flags.png')), ~"url(@{common-image-const-path}/controls/flags.png)"); + background-repeat: no-repeat; + + @media only screen { + @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), + (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx), + (min-resolution: 144dpi) and (max-resolution: 191dpi) + { + background-image: ~"url(@{common-image-const-path}/controls/flags@1.5x.png)"; + background-size: @img-flags-width auto; + } + + @media (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 2dppx), + (min-resolution: 192dpi) + { + background-image: ~"url(@{common-image-const-path}/controls/flags@2x.png)"; + background-size: @img-flags-width auto; + } + } +} + +//.adaptive-solid-border(@width, @color, @borderside: all) { +// @lb-border: if((@borderside = all), border, e('border-@{borderside}')); +// @lb-border-width: if((@borderside = all), border-width, e('border-@{borderside}-width')); +// +// @{lb-border}: @width solid @color; +// +// @media only screen { +// @media (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), +// (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx), +// (min-resolution: 144dpi) and (max-resolution: 191dpi) +// { +// @{lb-border-width}: (@width / 1.5); +// } +// } +//} diff --git a/test/unit-tests/common/main/resources/less/buttons.less b/test/unit-tests/common/main/resources/less/buttons.less new file mode 100644 index 000000000..5a2ea8148 --- /dev/null +++ b/test/unit-tests/common/main/resources/less/buttons.less @@ -0,0 +1,1148 @@ +@x-huge-btn-height: 46px; +@x-huge-btn-icon-size: 28px; + +.btn { + border-radius: 1px; + color: @text-normal-ie; + color: @text-normal; + border-width: @scaled-one-px-value-ie; + border-width: @scaled-one-px-value; + + .btnsize(@value) { + min-width: @value; + height: @value; + line-height: @value - 2px; + } + + &.small { + .btnsize(20px); + } + + &.normal { + height: 22px; + } + + &.large { + .btnsize(30px); + } + + &.huge { + .btnsize(37px); + } + + &.huge-1 { + .btnsize(40px); + } + + &.x-huge { + .btnsize(@x-huge-btn-height); + } + + &[disabled], &.disabled { + opacity: @component-disabled-opacity; + } + + &:focus { + outline: 0; + outline-offset: 0; + color: @text-normal-ie; + color: @text-normal; + } + + &:hover { + color: @text-normal-ie; + color: @text-normal; + } + + &:active, &.active { + -webkit-box-shadow: none; + box-shadow: none; + } + + .caret { + width: 4px; + height: 4px; + border: solid 1px @icon-normal-ie; + border: solid 1px @icon-normal; + border-bottom: none; + border-right: none; + background-image: none; + + transition: transform 0.2s ease; + transform: rotate(-135deg) translate(1px,1px); + } + + //&:active, + &:active:not(.disabled), + &.active:not(.disabled){ + .caret { + transform: rotate(45deg); + border-color: @icon-normal-pressed-ie; + border-color: @icon-normal-pressed; + } + } + + &:active, + &.active { + &:focus, + &.focus { + outline: none; + } + } + + &.icon-top { + display: inline-flex; + flex-direction: column; + align-items: center; + + .icon { + //flex-grow: 1; + } + + .caption { + line-height: 18px; + padding: 0 4px; + } + } + + &.notify { + .icon { + &::after { + content: ' '; + position: absolute; + border: 1px solid @icon-notification-badge-ie; + border: 1px solid @icon-notification-badge; + border-left: 0 none; + border-right: 0 none; + width: 6px; + height: 3px; + bottom: 4px; + right: 2px; + } + + &::before { + content: ' '; + position: absolute; + width: 10px; + height: 7px; + bottom: 2px; + background-color: @background-notification-badge-ie; + background-color: @background-notification-badge; + border-radius: 2px; + right: 0; + } + } + } + + .icon { + &.caret-up, &.caret-down { + &::after { + content: ''; + position: absolute; + left: 6px; + width: 8px; + height: 8px; + background-color: transparent; + border: solid 1px @text-normal-ie; + border: solid 1px @text-normal; + border-bottom: none; + border-right: none; + } + } + + &.caret-up { + &::after { + top: 8px; + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + -o-transform: rotate(45deg); + transform: rotate(45deg); + } + } + &.caret-down { + &::after { + top: 4px; + -moz-transform: rotate(225deg); + -ms-transform: rotate(225deg); + -webkit-transform: rotate(225deg); + -o-transform: rotate(225deg); + transform: rotate(225deg); + } + } + } + + &:not(:disabled) { + .icon { + opacity: @component-normal-icon-opacity; + } + } + + &:hover:not(.disabled) { + .icon { + opacity: @component-hover-icon-opacity; + } + } + + &:active:not(.disabled), + &.active:not(.disabled) { + .caret-up, .caret-down { + &::after { + border-color: @text-normal-pressed-ie; + border-color: @text-normal-pressed; + } + } + + .icon { + opacity: @component-active-icon-opacity; + } + + &:hover .icon { + opacity: @component-active-hover-icon-opacity; + } + } +} + +.btn.icon-top, .btn-group.icon-top { + display: inline-flex; + flex-direction: column; + + &.open, + &.over { + &.split { + > .inner-box-icon { + .box-shadow(none); + } + } + } + + &.x-huge { + @icon-size: 28px; + + min-width: 35px; + height: @x-huge-btn-height; + + img { + width: @x-huge-btn-icon-size; + height: @x-huge-btn-icon-size; + } + + .inner-box-caption { + line-height: 18px; + padding: 0 2px; + display: flex; + align-items: center; + + .caption { + max-width: 107px; + text-overflow: ellipsis; + overflow: hidden; + } + } + + .icon:not(svg) { + width: @x-huge-btn-icon-size; + height: @x-huge-btn-icon-size; + min-width: 0; + } + + svg.icon { + width: 28px; + height: 28px; + + @media + only screen and (-webkit-min-device-pixel-ratio: 1.5), + only screen and (min-resolution: 1.5dppx), + only screen and (min-resolution: 144dpi) { + //width:calc(~"40px/1.5"); + //height:calc(~"40px/1.5"); + } + } + + button.small .icon { + width: 20px; + height: 20px; + min-width: 0; + } + + &.dropdown-toggle { + .caption { + max-width: 100px; + } + } + } + + .inner-box-icon { + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; + line-height: 20px; + } + + .btn-fixflex-hcenter { + flex-grow: 1; + } + + .btn-fixflex-vcenter { + display: flex; + align-items: center; + + .caret { + vertical-align: inherit; + } + } + + .inner-box-caption { + margin: 0; + height: 18px; + } + + div.inner-box-icon { + height: 28px; // TODO: clear. Firefox bug 984869. fixed. isn't released. + } +} + +.icon-top.btn-group { + &.x-huge, .x-huge { + .inner-box-caption { + padding-right: 4px; + } + } +} + +.icon-top { + &.x-huge { + .btn&, .btn-group& .btn-toolbar { + .mx-button-otherstates-icon2(@button-xhuge-active-icon-offset-x); + } + + .btn.small { + .mx-button-otherstates-icon2(@button-small-active-icon-offset-x); + } + } +} + +.btn-toolbar { + display: inline-block; + position: relative; + margin: 0; + padding: 0; + border: 0; + .border-radius(1px); + background-color: transparent; + + .masked:not(.statusbar) & { + &:disabled { + opacity: 1; + } + } + + .btn.small; + + &.bg-white { + width: 22px; + height: 22px; + + background-color: @background-normal-ie; + background-color: @background-normal; + border: @scaled-one-px-value-ie solid @border-regular-control-ie; + border: @scaled-one-px-value solid @border-regular-control; + .border-radius(@border-radius-small); + + &:focus:not(.disabled) { + border-color: @border-control-focus-ie; + border-color: @border-control-focus; + } + } + + &:before, + &:after { + content: ""; + display: none; + } + + &:hover:not(.disabled), + .over:not(.disabled) { + background-color: @highlight-button-hover-ie; + background-color: @highlight-button-hover; + } + + + &:active:not(.disabled), + &.active:not(.disabled) { + color: @text-normal-pressed-ie; + color: @text-normal-pressed; + background-color: @highlight-button-pressed-ie; + background-color: @highlight-button-pressed; + } + + &:not(.icon-top) + .caption:not(:empty) { + padding: 0 4px; + } + + .icon { + padding: 0; + margin: 0; + display: inline-block; + background-repeat: no-repeat; + } + + &:not(.x-huge) { + .icon { + width: 20px; + height: 20px; + line-height: 20px; + + } + + svg.icon { + @media + only screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 1.9), + only screen and (min-resolution: 1.5dppx) and (max-resolution: 1.9dppx), + only screen and (min-resolution: 144dpi) and (max-resolution: 143dpi) { + width:calc(~"28px/1.5"); + height:calc(~"28px/1.5"); + } + } + } + + &.dropdown-toggle { + min-width: 7px; + } + + // Large size + // ------------------------ + &.large { + .icon { + width: 30px !important; + height: 30px; + line-height: 20px; + } + } + + // Button has color line + // ------------------------ + .btn-color-value-line { + pointer-events: none; + position: absolute; + left: 3px; + bottom: 1px; + width: 14px; + height: 3px; + background-color: red; + &.bordered { + border: @scaled-one-px-value-ie solid @border-regular-control-ie; + border: @scaled-one-px-value solid @border-regular-control; + } + + + .pixel-ratio__1_5 & { + height: 4px; + } + } +} + +.btn-category { + .btn.large; + width: 100%; + padding: 0; + display: block; + position: relative; + .border-radius(0); + background-color: transparent; + font-weight: bold; + + &:hover:not(.disabled), + .over:not(.disabled) { + background-color: @highlight-button-hover-ie; + background-color: @highlight-button-hover; + } + + &:active:not(.disabled), + &.active:not(.disabled) { + background-color: @highlight-button-pressed-ie; + background-color: @highlight-button-pressed; + color: @text-normal-pressed-ie; + color: @text-normal-pressed; + } + + .icon { + display: inline-block; + position: relative; + width: 20px; + height: 20px; + line-height: 20px; + } + + &[disabled], + &.disabled { + //color: #000; btn-category has no text + opacity: @component-disabled-opacity; + } +} + +// The clickable button for toggling the menu +// Remove the gradient and set the same inset shadow as the :active state +.btn-group { + > .btn-toolbar { + float: none; + } + + > .btn { + + .dropdown-toggle { + padding: 0 4px 0 3px; + } + } + + > .dropdown-toggle:first-child { + .inner-box-caret { + padding: 0 4px 0 3px; + } + } + + .caption { + &:empty { + display: none; + + + .caret { + margin-left: 2px; + } + } + } + + &.open { + > .btn-toolbar { + //color: @text-normal; + + // Show no shadow for `.btn-link` since it has no other button styles. + &.btn-link { + .box-shadow(none); + } + } + + .dropdown-toggle { + .box-shadow(none); + } + } + + &.over { + > button { + //background-color: @highlight-button-hover; + } + } + + &:not(.split) { + .btn-toolbar { + &.dropdown-toggle:not(.x-huge) { + width: 100%; + min-width: 28px; + } + + &.btn-text-value { + .caret { + margin: 6px 3px 6px 0; + } + .caption { + vertical-align: middle; + } + &[disabled], + &.disabled { + opacity: @component-disabled-opacity; + } + } + + &.large { + &.dropdown-toggle { + min-width: 40px; + + .caret { + float: right; + } + } + } + } + .dropdown-menu { + &.scale-menu { + li.disabled { + opacity: @component-disabled-opacity; + } + } + } + } + + &.split { + + &.over:not(.disabled), + &.open { + box-shadow: inset 0 0 0 @scaled-one-px-value-ie @highlight-button-hover-ie; + box-shadow: inset 0 0 0 @scaled-one-px-value @highlight-button-hover; + + button:not(.active):not(.btn-text-split-default) { + background-color: transparent; + } + } + + &.over:not(.disabled) { + button { + &:not(.active) { + &:hover { + background-color: @highlight-button-hover-ie; + background-color: @highlight-button-hover; + } + } + + &:active, + &:active:hover { + background-color: @highlight-button-pressed-ie; + background-color: @highlight-button-pressed; + } + } + } + + &.open { + > button:not(.active) { + &:last-of-type { + background-color: @highlight-button-pressed-ie; + background-color: @highlight-button-pressed; + } + } + + .caret { + background-position: @arrow-small-offset-x - 7px @arrow-small-offset-y; + } + } + + button.active:not(.disabled) { + background-color: @highlight-button-pressed-ie; + background-color: @highlight-button-pressed; + } + + .btn + .btn { + margin: 0; + } + } +} + +.btn-color { + width: 45px; + height: 22px; + padding: @scaled-one-px-value-ie 11px @scaled-one-px-value-ie @scaled-one-px-value-ie; + padding: @scaled-one-px-value 11px @scaled-one-px-value @scaled-one-px-value; + border:@scaled-one-px-value-ie solid @border-regular-control-ie; + border:@scaled-one-px-value solid @border-regular-control; + .border-radius(@border-radius-small); + + span:nth-child(1) { + float: left; + width: 100%; + height: 100%; + border: @scaled-one-px-value-ie solid @border-color-shading-ie; + border: @scaled-one-px-value solid @border-color-shading; + background-color: transparent; + } + + .inner-box-caret { + position: absolute; + right: 0; + top: 2px; + } + + &, + &:hover, + .over, + &:active, + &.active { + background: @background-normal-ie !important; + background: @background-normal !important; + .box-shadow(none) !important; + } + + &[disabled], + &.disabled { + opacity: @component-disabled-opacity; + } + + .color-transparent { + &:before { + border-right: @scaled-one-px-value-ie solid red; + border-right: @scaled-one-px-value solid red; + height: 34px; + transform: translate(16px, -9px) rotate(62deg); + left: 0; + } + } + + &:active:not(.disabled), + &.active:not(.disabled) { + .caret { + border-color: @icon-normal; + } + } + + &:not(.disabled) { + &:focus, .btn-group.open &, .btn-group:active & { + border-color: @border-control-focus-ie; + border-color: @border-control-focus; + } + } +} + +// for color button auto color +.dropdown-menu { + li > a.selected, + li > a:hover { + span.color-auto { + outline: @scaled-one-px-value-ie solid @icon-normal-ie; + outline: @scaled-one-px-value solid @icon-normal; + border: @scaled-one-px-value-ie solid @background-normal-ie; + border: @scaled-one-px-value solid @background-normal; + } + } +} + + +.btn-options { + padding: 0; + margin:0; + border: 0 none; + //.box-shadow(none); + background-color: transparent; + + &.bg-white { + background-color: @background-normal-ie; + background-color: @background-normal; + } + + .icon { + position: relative; + min-width: inherit; + height: inherit; + line-height: inherit; + padding: 0; + margin: 0; + display: inline-block; + background-repeat: no-repeat; + } + + box-shadow: inset 0 0 0 @scaled-one-px-value-ie @border-regular-control-ie; + box-shadow: inset 0 0 0 @scaled-one-px-value @border-regular-control; + .border-radius(@border-radius-small); + + &:hover, + &.over { + background-color: @highlight-button-hover-ie; + background-color: @highlight-button-hover; + } + + &:active, + &.active { + background-color: @highlight-button-pressed-ie; + background-color: @highlight-button-pressed; + } + + &.large { + min-width: 28px; + width: 28px; + height: 28px; + } + + &:focus:not(.disabled) { + box-shadow: inset 0 0 0 @scaled-one-px-value-ie @border-control-focus-ie; + box-shadow: inset 0 0 0 @scaled-one-px-value @border-control-focus; + } +} + +.btn-text-default { + width: 75px; + height: 22px; + background: @background-normal-ie; + background: @background-normal; + border: @scaled-one-px-value-ie solid @border-regular-control-ie; + border: @scaled-one-px-value solid @border-regular-control; + .border-radius(@border-radius-small); + + &.auto { + width: auto; + padding-left: 10px; + padding-right: 10px; + } + + &:focus:not(.disabled) { + border-color: @border-control-focus-ie; + border-color: @border-control-focus; + } + + &:hover:not(.disabled), + .over:not(.disabled) { + background-color: @highlight-button-hover-ie !important; + background-color: @highlight-button-hover !important; + } + + &:active:not(.disabled), + &.active:not(.disabled) { + background-color: @highlight-button-pressed-ie !important; + background-color: @highlight-button-pressed !important; + border-color: @highlight-button-pressed-ie; + border-color: @highlight-button-pressed; + color: @text-normal-pressed-ie; + color: @text-normal-pressed; + } + + &[disabled], + &.disabled { + opacity: @component-disabled-opacity; + } +} + +.btn-text-menu-default { + width: 100%; + height: 22px; + background: @background-normal-ie; + background: @background-normal; + border: @scaled-one-px-value-ie solid @border-regular-control-ie; + border: @scaled-one-px-value solid @border-regular-control; + .border-radius(@border-radius-small); + + button { + width: 100%; + } + + .caret { + position: absolute; + right: 5px; + margin-top: 5px; + } + + &:hover:not(.disabled), + .over:not(.disabled) { + background-color: @highlight-button-hover-ie !important; + background-color: @highlight-button-hover !important; + } + + &:active:not(.disabled), + &.active:not(.disabled) { + background-color: @highlight-button-pressed-ie !important; + background-color: @highlight-button-pressed !important; + color: @text-normal-pressed-ie; + color: @text-normal-pressed; + } + + &[disabled], + &.disabled { + opacity: @component-disabled-opacity; + } +} + +.btn-text-split-default { + width: 75px; + height: 22px; + background: @background-normal-ie; + background: @background-normal; + border: @scaled-one-px-value-ie solid @border-regular-control-ie; + border: @scaled-one-px-value solid @border-regular-control; + .border-radius(@border-radius-small); + + &.dropdown-toggle { + width: 13px; + } + + &:not(.dropdown-toggle) { + border-right: none; + } + + &:hover:not(.disabled), + .over:not(.disabled) { + background-color: @highlight-button-hover-ie !important; + background-color: @highlight-button-hover !important; + } + + &:active:not(.disabled), + &.active:not(.disabled) { + background-color: @highlight-button-pressed-ie !important; + background-color: @highlight-button-pressed !important; + border-color: @highlight-button-pressed-ie; + border-color: @highlight-button-pressed; + color: @text-normal-pressed-ie; + color: @text-normal-pressed; + } + + &[disabled], + &.disabled { + opacity: @component-disabled-opacity; + } +} + +.btn-icon-default { + width: 45px; + height: 22px; + background: @background-normal-ie; + background: @background-normal; + border: @scaled-one-px-value-ie solid @border-regular-control-ie; + border: @scaled-one-px-value solid @border-regular-control; + .border-radius(@border-radius-small); + + .icon { + width: 28px; + padding: 0; + margin: 0; + position: relative; + display: inline-block; + background-repeat: no-repeat; + } + + &.dropdown-toggle:first-child .inner-box-caret { + padding: 0 1px 0 2px; + } + + &:hover:not(.disabled), + .over:not(.disabled) { + background-color: @highlight-button-hover-ie !important; + background-color: @highlight-button-hover !important; + } + + &:active:not(.disabled), + &.active:not(.disabled) { + background-color: @highlight-button-pressed-ie !important; + background-color: @highlight-button-pressed !important; + } + + &[disabled], + &.disabled { + opacity: @component-disabled-opacity; + } +} + +.btn-large-dataview { + display: inline-block; + width: 72px; + height: 58px; + padding: 2px; + margin:0; + box-shadow: none; + background-color: @background-normal-ie; + background-color: @background-normal; + border: @scaled-one-px-value-ie solid @border-regular-control-ie; + border: @scaled-one-px-value solid @border-regular-control; + .border-radius(@border-radius-small); + + &.template-table { + width: 92px; + } + + .icon-template-slicer.icon { + min-width: 36px; + height: 55px; + line-height: 53px; + border: none; + } + + .icon { + display: inline-block; + .btn.btnsize(52px); + padding: 0; + margin-right: 3px; + background-color: transparent; + background-repeat: no-repeat; + border: @scaled-one-px-value-ie solid @border-regular-control-ie; + border: @scaled-one-px-value solid @border-regular-control; + position: relative; + } + + &.sheet-template-table { + width: 83px; + height: 54px; + + .icon { + border: none; + .box-shadow(0 0 0 @scaled-one-px-value-ie @border-regular-control-ie); + .box-shadow(0 0 0 @scaled-one-px-value @border-regular-control); + } + } + + svg.icon { + vertical-align: middle; + width: 52px; + padding: 5px; + + fill: @icon-normal; + + .btn& { + opacity: 1; + } + } + + &:hover, + .over, + &:active, + &.active { + background-color: @background-normal-ie !important; + background-color: @background-normal !important; + + &:not(:disabled) { + svg.icon { + opacity: inherit; + } + } + } + + &:active:not(.disabled), + &.active:not(.disabled) { + .caret { + background-position: @arrow-small-offset-x @arrow-small-offset-y; + border-color: @icon-normal; + } + } + + &[disabled], + &.disabled { + opacity: @component-disabled-opacity; + } + + &:not(:disabled) { + .icon { + opacity: 1; + } + + &:hover { + .icon { + .icon(); + } + } + } +} + +.cnt-lang { + color: @text-normal-ie; + color: @text-normal; + height: 20px; + line-height: 18px; + border: 0; + .border-radius(1px); + vertical-align: middle; + + .dropdown-toggle { + margin: 0 6px 0 4px; + } + + &:hover:not(.disabled) { + background-color: @highlight-button-hover-ie; + background-color: @highlight-button-hover; + } + + &[disabled], &.disabled { + opacity: @component-disabled-opacity; + } + + .caret { + width: 4px; + height: 4px; + border: solid 1px @icon-normal-ie; + border: solid 1px @icon-normal; + border-bottom: none; + border-right: none; + background-image: none; + + transition: transform 0.2s ease; + transform: rotate(-135deg) translate(1px,1px); + } + + &.open:not(.disabled){ + &, .status-label { + color: @text-normal-pressed-ie; + color: @text-normal-pressed; + } + + background-color: @highlight-button-pressed-ie; + background-color: @highlight-button-pressed; + + .caret { + transform: rotate(45deg); + border-color: @icon-normal-pressed-ie; + border-color: @icon-normal-pressed; + } + } +} +// Dialog buttons +// ------------------------ + +.dlg-btn { + font-weight: bold; + width: 86px; + color: @text-normal-ie; + color: @text-normal; + background-color: @background-normal-ie; + background-color: @background-normal; + border: @scaled-one-px-value-ie solid @border-regular-control-ie; + border: @scaled-one-px-value solid @border-regular-control; + + &:hover:not(.disabled), + &.hover:not(.disabled) { + background-color: @highlight-button-hover-ie; + background-color: @highlight-button-hover; + } + + &.primary { + color: @text-inverse-ie; + color: @text-inverse; + background-color: @background-primary-dialog-button-ie; + background-color: @background-primary-dialog-button; + border: 0 none; + + &:hover:not(.disabled), + &.hover:not(.disabled) { + background-color: @highlight-primary-dialog-button-hover-ie; + background-color: @highlight-primary-dialog-button-hover; + } + } + + &[disabled] { + opacity: @component-disabled-opacity; + } + + &.custom { + width: auto; + min-width: 86px; + } +} + +@class100: zoom-int; +@class150: zoom-grit; +svg.icon { + .@{class150} { + display: none; + } + + //@media + //only screen and (-webkit-min-device-pixel-ratio: 1.5), + //only screen and (-webkit-min-device-pixel-ratio: 2.5), + //only screen and (min-resolution: 1.5dppx), + //only screen and (min-resolution: 2.5dppx), + //only screen and (min-resolution: 144dpi), + //only screen and (min-resolution: 240dpi) { + // .@{class100} { + // display: none; + // } + // + // .@{class150} { + // display: block; + // } + //} + + @media + only screen and (-webkit-min-device-pixel-ratio: 2) and (-webkit-max-device-pixel-ratio: 2.4), + only screen and (-webkit-min-device-pixel-ratio: 4), + only screen and (min-resolution: 2dppx) and (max-resolution: 2.4dppx), + only screen and (min-resolution: 4dppx), + only screen and (min-resolution: 192dpi) and (max-resolution: 239dpi), + only screen and (min-resolution: 384dpi) { + .@{class100} { + display: block; + } + + .@{class150} { + display: none; + } + } +} \ No newline at end of file