From 97f73233922e958e5cc495edee12933fce129b13 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Fri, 9 Jul 2021 17:30:14 +0300 Subject: [PATCH] Fix move in color button --- apps/common/main/lib/component/ColorButton.js | 58 ++++++++++++--- .../main/lib/component/ThemeColorPalette.js | 70 ++++++++++++------- 2 files changed, 92 insertions(+), 36 deletions(-) diff --git a/apps/common/main/lib/component/ColorButton.js b/apps/common/main/lib/component/ColorButton.js index aa06ff549..d33de43bf 100644 --- a/apps/common/main/lib/component/ColorButton.js +++ b/apps/common/main/lib/component/ColorButton.js @@ -115,7 +115,7 @@ define([ transparent: this.options.transparent, value: color, colors: colors, - parentMenu: (typeof this.menu == 'object') ? this.menu : undefined + parentButton: this }); this.colorPicker.on('select', _.bind(this.onColorSelect, this)); this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, this)); @@ -124,12 +124,6 @@ define([ this.colorAuto = this.cmpEl.find('#' + this.menu.id + '-color-auto > a'); (color == 'auto') && this.setAutoColor(true); } - var me = this; - (typeof this.menu == 'object') && this.menu.on('show:after', function(menu) { - _.delay(function() { - me.colorPicker.focus(); - }, 10); - }) } return this.colorPicker; }, @@ -156,15 +150,19 @@ define([ additionalAlign: options.additionalAlign, items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([ { template: _.template('
') }, - { template: _.template('' + this.textNewColor + '') } + { + id: id + '-color-new', + template: _.template('' + this.textNewColor + '') + } ]) }); - this.colorPicker && (this.colorPicker.parentMenu = menu); + this.colorPicker && (this.colorPicker.parentButton = menu); var me = this; + menu.on('keydown:before', _.bind(this.onBeforeKeyDown, this)); menu.on('show:after', function(menu) { me.colorPicker && _.delay(function() { me.colorPicker.showLastSelected(); - me.colorPicker.focus(); + !(options.additionalItems || options.auto) && me.colorPicker.focus(); }, 10); }).on('hide:after', function() { if (me.options.takeFocusOnClose) { @@ -216,10 +214,50 @@ define([ } }, + onBeforeKeyDown: function(menu, e) { + console.log(e.keyCode); + if (e.keyCode == Common.UI.Keys.RETURN) { + e.preventDefault(); + e.stopPropagation(); + var li = $(e.target).closest('li'); + (li.length>0) && li.click(); + Common.UI.Menu.Manager.hideAll(); + } else if (e.namespace!=="after.bs.dropdown" && (e.keyCode == Common.UI.Keys.DOWN || e.keyCode == Common.UI.Keys.UP)) { + var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', menu.$el).find('> a'); + if (!$items.length) return; + var index = $items.index($items.filter(':focus')), + me = this, + pickerIndex = $items.length-1 ; + if (e.keyCode == Common.UI.Keys.DOWN && (index==pickerIndex-1 || pickerIndex==0) || e.keyCode == Common.UI.Keys.UP && index==pickerIndex) { + e.preventDefault(); + e.stopPropagation(); + _.delay(function() { + me.focusInner(e); + // me.colorPicker.focus(e.keyCode == Common.UI.Keys.DOWN ? 'first' : 'last'); + }, 10); + } + } + }, + isMenuOpen: function() { return this.cmpEl.hasClass('open'); }, + focusInner: function(e) { + if (!this.colorPicker) return; + + this.colorPicker.focus(e.keyCode == Common.UI.Keys.DOWN ? 'first' : 'last'); + }, + + focusOuter: function(e) { + if (!this.menu) return; + + var $items = $('> [role=menu] > li:not(.divider):not(.disabled):visible', this.menu.$el).find('> a'); + if (!$items.length) return; + + $items.eq(e.keyCode == Common.UI.Keys.UP ? $items.length-2 : $items.length-1).focus(); + }, + textNewColor: 'Add New Custom Color', textAutoColor: 'Automatic' diff --git a/apps/common/main/lib/component/ThemeColorPalette.js b/apps/common/main/lib/component/ThemeColorPalette.js index db0f40e5f..4428a80d4 100644 --- a/apps/common/main/lib/component/ThemeColorPalette.js +++ b/apps/common/main/lib/component/ThemeColorPalette.js @@ -105,7 +105,7 @@ define([ this.colors = me.options.colors || this.generateColorData(me.options.themecolors, me.options.effects, me.options.standardcolors, me.options.transparent); this.enableKeyEvents= me.options.enableKeyEvents; this.tabindex = me.options.tabindex || 0; - this.parentMenu = me.options.parentMenu; + this.parentButton = me.options.parentButton; this.lastSelectedIdx = -1; me.colorItems = []; @@ -200,7 +200,7 @@ define([ if (target.length==0) return; if (target.hasClass('color-transparent') ) { - $(me.el).find('a.' + me.selectedCls).removeClass(me.selectedCls); + me.clearSelection(true); target.addClass(me.selectedCls); if (!e.suppressEvent) { me.lastSelectedIdx = parseInt(target.attr('idx')); @@ -209,7 +209,7 @@ define([ } } else if ( !(target[0].className.search('color-dynamic')<0) ) { if (!/dynamic-empty-color/.test(target[0].className)) { - $(me.el).find('a.' + me.selectedCls).removeClass(me.selectedCls); + me.clearSelection(true); target.addClass(me.selectedCls); if (color && !e.suppressEvent) { me.lastSelectedIdx = parseInt(target.attr('idx')); @@ -219,7 +219,7 @@ define([ } } else { if (e.suppressEvent) { - $(me.el).find('a.' + me.selectedCls).removeClass(me.selectedCls); + me.clearSelection(true); target.addClass(me.selectedCls); } else setTimeout(function(){ @@ -230,7 +230,7 @@ define([ if (!/^[a-fA-F0-9]{6}$/.test(me.value) || _.indexOf(me.colors, me.value)<0 ) me.value = false; - $(me.el).find('a.' + me.selectedCls).removeClass(me.selectedCls); + me.clearSelection(true); target.addClass(me.selectedCls); color = target[0].className.match(me.colorRe)[1]; @@ -259,8 +259,7 @@ define([ color = /#?([a-fA-F0-9]{6})/.exec(color); if (color) { this.saveCustomColor(color[1]); - - el.find('a.' + this.selectedCls).removeClass(this.selectedCls); + this.clearSelection(true); var child = el.find('.dynamic-empty-color'); if (child.length==0) { @@ -307,7 +306,7 @@ define([ select: function(color, suppressEvent) { var el = this.$el || $(this.el); - el.find('a.' + this.selectedCls).removeClass(this.selectedCls); + this.clearSelection(true); if (typeof(color) == 'object' ) { var effectEl; @@ -360,7 +359,7 @@ define([ selectByRGB: function(rgb, suppressEvent) { var el = this.$el || $(this.el); - el.find('a.' + this.selectedCls).removeClass(this.selectedCls); + this.clearSelection(true); var color = (typeof(rgb) == 'object') ? rgb.color : rgb; if (/#?[a-fA-F0-9]{6}/.test(color)) { @@ -456,8 +455,10 @@ define([ clearSelection: function(suppressEvent) { this.$el.find('a.' + this.selectedCls).removeClass(this.selectedCls); - this.value = undefined; - this.lastSelectedIdx = -1; + if (!suppressEvent) { + this.value = undefined; + this.lastSelectedIdx = -1; + } }, showLastSelected: function() { @@ -471,8 +472,7 @@ define([ }, selectByIndex: function(index, suppressEvent) { - var el = this.$el || $(this.el); - el.find('a.' + this.selectedCls).removeClass(this.selectedCls); + this.clearSelection(true); if (index>=0 && indexthis._layoutParams.rows-1) topIdx = 0; - idx = this._layoutParams.itemsIndexes[topIdx][leftIdx]; - } + if (topIdx==this._layoutParams.rows-1 && this.parentButton) { + this.clearSelection(true); + this.parentButton.focusOuter(data); + } else + while (idx===undefined) { + topIdx++; + if (topIdx>this._layoutParams.rows-1) topIdx = 0; + idx = this._layoutParams.itemsIndexes[topIdx][leftIdx]; + } } } else { idx = (data.keyCode==Common.UI.Keys.UP || data.keyCode==Common.UI.Keys.LEFT) @@ -612,9 +620,19 @@ define([ } }, - focus: function() { + focus: function(index) { var el = this.$el || $(this.el); el && el.focus(); + if (typeof index == 'string') { + if (index == 'first') { + this.selectByIndex(0, true); + } else if (index == 'last') { + if (this._layoutParams === undefined) + this.fillIndexesArray(); + this.selectByIndex(this._layoutParams.itemsIndexes[this._layoutParams.rows-1][0], true); + } + } else if (index !== undefined) + this.selectByIndex(index, true); }, textThemeColors : 'Theme Colors',