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

Refactoring focus manager

Browse source
This commit is contained in:
Julia Radzhabova 2020-10-09 11:59:57 +03:00
parent 8b41402a53
commit 1cb3bcdea9
4 changed files with 124 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

106
apps/common/main/lib/component/FocusManager.js
View file

@ -128,3 +128,109 @@ Common.UI.FocusManager = function (tabindex, parent) {
}
}
};
Common.UI.FocusManager2 = new(function() {
var _tabindex = 1,
_windows = [];
var register = function(fields) {
var arr = [];
if (!fields.forEach) {
fields = [fields];
}
fields.forEach(function(field) {
if (field) {
var item = (field.cmp && typeof field.selector == 'string') ? field : {cmp: field, selector: '.form-control'};
item.el = (item.cmp.$el || $(item.cmp.el)).find(item.selector).addBack().filter(item.selector);
item.el && item.el.attr && item.el.attr('tabindex', _tabindex.toString());
arr.push(item);
}
});
return arr;
};
var addTraps = function(current) {
if (!current || current.traps || !current.fields || current.fields.length<1) return;
var trapFirst = $('<span aria-hidden="true" tabindex="' + _tabindex + '"></span>');
trapFirst.on('focus', function() {
if (current.hidden) return;
var fields = current.fields;
for (var i=0; i<fields.length; i++) {
var field = fields[i];
if ((field.cmp.isVisible ? field.cmp.isVisible() : field.cmp.is(':visible')) && !(field.cmp.isDisabled && field.cmp.isDisabled())) {
var el = (field.selector) ? (field.cmp.$el || $(field.cmp.el)).find(field.selector).addBack().filter(field.selector) : field.el;
el.focus();
break;
}
}
});
current.parent.$window.prepend(trapFirst);
var trapLast = $('<span aria-hidden="true" tabindex="' + (_tabindex+1) + '"></span>');
trapLast.on('focus', function() {
if (current.hidden) return;
var fields = current.fields;
for (var i=fields.length-1; i>=0; i--) {
var field = fields[i];
if ((field.cmp.isVisible ? field.cmp.isVisible() : field.cmp.is(':visible')) && !(field.cmp.isDisabled && field.cmp.isDisabled())) {
var el = (field.selector) ? (field.cmp.$el || $(field.cmp.el)).find(field.selector).addBack().filter(field.selector) : field.el;
el.focus();
break;
}
}
});
current.parent.$window.append(trapLast);
current.traps = [trapFirst, trapLast];
};
var _add = function(e, fields) {
if (e && e.cid) {
if (_windows[e.cid]) {
_windows[e.cid].fields.concat(register(fields));
} else {
_windows[e.cid] = {
parent: e,
fields: register(fields),
hidden: false
};
}
addTraps(_windows[e.cid]);
}
};
Common.NotificationCenter.on({
'modal:show': function(e){
if (e && e.cid) {
if (_windows[e.cid]) {
_windows[e.cid].hidden = false;
} else {
_windows[e.cid] = {
parent: e,
hidden: false
};
}
}
},
'window:show': function(e){
if (e && e.cid && _windows[e.cid] && !_windows[e.cid].fields) {
_windows[e.cid].fields = register(e.getFocusedComponents());
addTraps(_windows[e.cid]);
}
},
'modal:close': function(e, last) {
if (e && e.cid && _windows[e.cid]) {
delete _windows[e.cid];
}
},
'modal:hide': function(e, last) {
if (e && e.cid && _windows[e.cid]) {
_windows[e.cid].hidden = true;
}
}
});
return {
add: _add
}
})();

6
apps/common/main/lib/component/Window.js
View file

@ -777,7 +777,7 @@ define([
this.fireEvent('show', this);
}
Common.NotificationCenter.trigger('window:show');
Common.NotificationCenter.trigger('window:show', this);
},
close: function(suppressevent) {
@ -983,6 +983,10 @@ define([
onPrimary: function() {},
getFocusedComponents: function() {
return [];
},
cancelButtonText: 'Cancel',
okButtonText: 'OK',
yesButtonText: 'Yes',

18
apps/common/main/lib/view/AutoCorrectDialog.js
View file

@ -51,8 +51,7 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
contentWidth: 375,
height: 430,
buttons: null,
toggleGroup: 'autocorrect-dialog-group',
focusManager: true
toggleGroup: 'autocorrect-dialog-group'
},
initialize : function(options) {
@ -355,14 +354,6 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
this.btnsCategory[1].on('click', _.bind(this.onRecCategoryClick, this, false));
this.btnsCategory[2] && this.btnsCategory[2].on('click', _.bind(this.updateFooterButtons, this, true));
// 0 tab
this.focusManager.add([this.inputReplace, this.inputBy], '.form-control');
this.focusManager.add(this.mathList, '.listview');
// 1 tab
this.focusManager.add([this.inputRecFind], '.form-control');
this.focusManager.add(this.mathRecList, '.listview');
this.afterRender();
},
@ -375,6 +366,13 @@ define([ 'text!common/main/lib/template/AutoCorrectDialog.template',
}
},
getFocusedComponents: function() {
return [
this.inputReplace, this.inputBy, {cmp: this.mathList, selector: '.listview'}, // 0 tab
this.inputRecFind, {cmp: this.mathRecList, selector: '.listview'} // 1 tab
];
},
getSettings: function() {
return;
},

8
apps/common/main/lib/view/InsertTableDialog.js
View file

@ -52,8 +52,7 @@ define([
style: 'min-width: 230px;',
cls: 'modal-dlg',
split: false,
buttons: ['ok', 'cancel'],
focusManager: true
buttons: ['ok', 'cancel']
},
initialize : function(options) {
@ -106,7 +105,6 @@ define([
});
// this.udColumns.on('entervalue', _.bind(this.onPrimary, this));
// this.udRows.on('entervalue', _.bind(this.onPrimary, this));
this.focusManager.add([this.udColumns, this.udRows], '.form-control');
var me = this;
setTimeout(function(){
me.udColumns.focus();
@ -114,6 +112,10 @@ define([
},
getFocusedComponents: function() {
return [this.udColumns, this.udRows];
},
onBtnClick: function(event) {
if (this.options.handler) {
this.options.handler.call(this, event.currentTarget.attributes['result'].value, {