Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Fix move in color button

Browse source
This commit is contained in:
Julia Radzhabova 2021-07-09 17:30:14 +03:00
parent ca5b24d516
commit 97f7323392
2 changed files with 92 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
apps/common/main/lib/component/ColorButton.js
View file

@ -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('<div id="' + id + '-color-menu" style="width: 169px; height:' + height + 'px; margin: 10px;"></div>') },
{ template: _.template('<a id="' + id + '-color-new" style="">' + this.textNewColor + '</a>') }
{
id: id + '-color-new',
template: _.template('<a tabindex="-1" type="menuitem" style="">' + this.textNewColor + '</a>')
}
])
});
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'

70
apps/common/main/lib/component/ThemeColorPalette.js
View file

@ -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 && index<this.colorItems.length) {
this.handleClick({target: this.colorItems[index].el, suppressEvent: suppressEvent});
@ -516,8 +516,8 @@ define([
var rec = this.getSelectedColor();
if (data.keyCode==Common.UI.Keys.RETURN) {
rec && this.selectByIndex(rec.index);
if (this.parentMenu)
this.parentMenu.hide();
if (this.parentButton && this.parentButton.menu)
this.parentButton.menu.hide();
} else {
var idx = rec ? rec.index : -1;
if (idx<0) {
@ -544,17 +544,25 @@ define([
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} else if (data.keyCode==Common.UI.Keys.UP) {
while (idx===undefined) {
topIdx--;
if (topIdx<0) topIdx = this._layoutParams.rows-1;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
if (topIdx==0 && this.parentButton) {
this.clearSelection(true);
this.parentButton.focusOuter(data);
} else
while (idx===undefined) {
topIdx--;
if (topIdx<0) topIdx = this._layoutParams.rows-1;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} else {
while (idx===undefined) {
topIdx++;
if (topIdx>this._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',