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, transparent: this.options.transparent,
value: color, value: color,
colors: colors, colors: colors,
parentMenu: (typeof this.menu == 'object') ? this.menu : undefined parentButton: this
}); });
this.colorPicker.on('select', _.bind(this.onColorSelect, this)); this.colorPicker.on('select', _.bind(this.onColorSelect, this));
this.cmpEl.find('#' + this.menu.id + '-color-new').on('click', _.bind(this.addNewColor, 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'); this.colorAuto = this.cmpEl.find('#' + this.menu.id + '-color-auto > a');
(color == 'auto') && this.setAutoColor(true); (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; return this.colorPicker;
}, },
@ -156,15 +150,19 @@ define([
additionalAlign: options.additionalAlign, additionalAlign: options.additionalAlign,
items: (options.additionalItems ? options.additionalItems : []).concat(auto).concat([ 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('<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; var me = this;
menu.on('keydown:before', _.bind(this.onBeforeKeyDown, this));
menu.on('show:after', function(menu) { menu.on('show:after', function(menu) {
me.colorPicker && _.delay(function() { me.colorPicker && _.delay(function() {
me.colorPicker.showLastSelected(); me.colorPicker.showLastSelected();
me.colorPicker.focus(); !(options.additionalItems || options.auto) && me.colorPicker.focus();
}, 10); }, 10);
}).on('hide:after', function() { }).on('hide:after', function() {
if (me.options.takeFocusOnClose) { 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() { isMenuOpen: function() {
return this.cmpEl.hasClass('open'); 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', textNewColor: 'Add New Custom Color',
textAutoColor: 'Automatic' 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.colors = me.options.colors || this.generateColorData(me.options.themecolors, me.options.effects, me.options.standardcolors, me.options.transparent);
this.enableKeyEvents= me.options.enableKeyEvents; this.enableKeyEvents= me.options.enableKeyEvents;
this.tabindex = me.options.tabindex || 0; this.tabindex = me.options.tabindex || 0;
this.parentMenu = me.options.parentMenu; this.parentButton = me.options.parentButton;
this.lastSelectedIdx = -1; this.lastSelectedIdx = -1;
me.colorItems = []; me.colorItems = [];
@ -200,7 +200,7 @@ define([
if (target.length==0) return; if (target.length==0) return;
if (target.hasClass('color-transparent') ) { if (target.hasClass('color-transparent') ) {
$(me.el).find('a.' + me.selectedCls).removeClass(me.selectedCls); me.clearSelection(true);
target.addClass(me.selectedCls); target.addClass(me.selectedCls);
if (!e.suppressEvent) { if (!e.suppressEvent) {
me.lastSelectedIdx = parseInt(target.attr('idx')); me.lastSelectedIdx = parseInt(target.attr('idx'));
@ -209,7 +209,7 @@ define([
} }
} else if ( !(target[0].className.search('color-dynamic')<0) ) { } else if ( !(target[0].className.search('color-dynamic')<0) ) {
if (!/dynamic-empty-color/.test(target[0].className)) { if (!/dynamic-empty-color/.test(target[0].className)) {
$(me.el).find('a.' + me.selectedCls).removeClass(me.selectedCls); me.clearSelection(true);
target.addClass(me.selectedCls); target.addClass(me.selectedCls);
if (color && !e.suppressEvent) { if (color && !e.suppressEvent) {
me.lastSelectedIdx = parseInt(target.attr('idx')); me.lastSelectedIdx = parseInt(target.attr('idx'));
@ -219,7 +219,7 @@ define([
} }
} else { } else {
if (e.suppressEvent) { if (e.suppressEvent) {
$(me.el).find('a.' + me.selectedCls).removeClass(me.selectedCls); me.clearSelection(true);
target.addClass(me.selectedCls); target.addClass(me.selectedCls);
} else } else
setTimeout(function(){ setTimeout(function(){
@ -230,7 +230,7 @@ define([
if (!/^[a-fA-F0-9]{6}$/.test(me.value) || _.indexOf(me.colors, me.value)<0 ) if (!/^[a-fA-F0-9]{6}$/.test(me.value) || _.indexOf(me.colors, me.value)<0 )
me.value = false; me.value = false;
$(me.el).find('a.' + me.selectedCls).removeClass(me.selectedCls); me.clearSelection(true);
target.addClass(me.selectedCls); target.addClass(me.selectedCls);
color = target[0].className.match(me.colorRe)[1]; color = target[0].className.match(me.colorRe)[1];
@ -259,8 +259,7 @@ define([
color = /#?([a-fA-F0-9]{6})/.exec(color); color = /#?([a-fA-F0-9]{6})/.exec(color);
if (color) { if (color) {
this.saveCustomColor(color[1]); this.saveCustomColor(color[1]);
this.clearSelection(true);
el.find('a.' + this.selectedCls).removeClass(this.selectedCls);
var child = el.find('.dynamic-empty-color'); var child = el.find('.dynamic-empty-color');
if (child.length==0) { if (child.length==0) {
@ -307,7 +306,7 @@ define([
select: function(color, suppressEvent) { select: function(color, suppressEvent) {
var el = this.$el || $(this.el); var el = this.$el || $(this.el);
el.find('a.' + this.selectedCls).removeClass(this.selectedCls); this.clearSelection(true);
if (typeof(color) == 'object' ) { if (typeof(color) == 'object' ) {
var effectEl; var effectEl;
@ -360,7 +359,7 @@ define([
selectByRGB: function(rgb, suppressEvent) { selectByRGB: function(rgb, suppressEvent) {
var el = this.$el || $(this.el); 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; var color = (typeof(rgb) == 'object') ? rgb.color : rgb;
if (/#?[a-fA-F0-9]{6}/.test(color)) { if (/#?[a-fA-F0-9]{6}/.test(color)) {
@ -456,8 +455,10 @@ define([
clearSelection: function(suppressEvent) { clearSelection: function(suppressEvent) {
this.$el.find('a.' + this.selectedCls).removeClass(this.selectedCls); this.$el.find('a.' + this.selectedCls).removeClass(this.selectedCls);
this.value = undefined; if (!suppressEvent) {
this.lastSelectedIdx = -1; this.value = undefined;
this.lastSelectedIdx = -1;
}
}, },
showLastSelected: function() { showLastSelected: function() {
@ -471,8 +472,7 @@ define([
}, },
selectByIndex: function(index, suppressEvent) { selectByIndex: function(index, suppressEvent) {
var el = this.$el || $(this.el); this.clearSelection(true);
el.find('a.' + this.selectedCls).removeClass(this.selectedCls);
if (index>=0 && index<this.colorItems.length) { if (index>=0 && index<this.colorItems.length) {
this.handleClick({target: this.colorItems[index].el, suppressEvent: suppressEvent}); this.handleClick({target: this.colorItems[index].el, suppressEvent: suppressEvent});
@ -516,8 +516,8 @@ define([
var rec = this.getSelectedColor(); var rec = this.getSelectedColor();
if (data.keyCode==Common.UI.Keys.RETURN) { if (data.keyCode==Common.UI.Keys.RETURN) {
rec && this.selectByIndex(rec.index); rec && this.selectByIndex(rec.index);
if (this.parentMenu) if (this.parentButton && this.parentButton.menu)
this.parentMenu.hide(); this.parentButton.menu.hide();
} else { } else {
var idx = rec ? rec.index : -1; var idx = rec ? rec.index : -1;
if (idx<0) { if (idx<0) {
@ -544,17 +544,25 @@ define([
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx]; idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
} }
} else if (data.keyCode==Common.UI.Keys.UP) { } else if (data.keyCode==Common.UI.Keys.UP) {
while (idx===undefined) { if (topIdx==0 && this.parentButton) {
topIdx--; this.clearSelection(true);
if (topIdx<0) topIdx = this._layoutParams.rows-1; this.parentButton.focusOuter(data);
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx]; } else
} while (idx===undefined) {
topIdx--;
if (topIdx<0) topIdx = this._layoutParams.rows-1;
idx = this._layoutParams.itemsIndexes[topIdx][leftIdx];
}
} else { } else {
while (idx===undefined) { if (topIdx==this._layoutParams.rows-1 && this.parentButton) {
topIdx++; this.clearSelection(true);
if (topIdx>this._layoutParams.rows-1) topIdx = 0; this.parentButton.focusOuter(data);
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];
}
} }
} else { } else {
idx = (data.keyCode==Common.UI.Keys.UP || data.keyCode==Common.UI.Keys.LEFT) 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); var el = this.$el || $(this.el);
el && el.focus(); 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', textThemeColors : 'Theme Colors',