BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix hoisting issue and switch to keydown event

Browse Source
This commit is contained in:
KDSBrowne 2017-05-23 06:23:26 -07:00
parent de6e7093f3
commit 477ca85615
1 changed files with 20 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
bigbluebutton-html5/imports/ui/components/user-list/component.jsx
View File

@ -40,14 +40,14 @@ class UserList extends Component {
focusList(activeElement, list) { focusList(activeElement, list) {
activeElement.tabIndex = -1; activeElement.tabIndex = -1;
this.counter = 0; this.counter = -1;
list.tabIndex = 0; list.tabIndex = 0;
list.focus(); list.focus();
} }
focusListItem(active, direction, element, count) { focusListItem(active, direction, element, count) {
function select() { const select = (element) => {
element.tabIndex = 0; element.tabIndex = 0;
element.focus(); element.focus();
} }
@ -56,27 +56,10 @@ class UserList extends Component {
switch (direction) { switch (direction) {
case 'down': case 'down':
element.childNodes[this.counter].tabIndex = 0; select(element.childNodes[this.counter]);
element.childNodes[this.counter].focus();
this.counter++;
break; break;
case 'up': case 'up':
this.counter--; select(element.childNodes[this.counter]);
element.childNodes[this.counter].tabIndex = 0;
element.childNodes[this.counter].focus();
break;
case 'upLoopUp':
case 'upLoopDown':
this.counter = count - 1;
select();
break;
case 'downLoopDown':
this.counter = -1;
select();
break;
case 'downLoopUp':
this.counter = 1;
select();
break; break;
} }
} }
@ -115,40 +98,40 @@ class UserList extends Component {
} }
if (event.keyCode === KEY_CODES.ARROW_DOWN) { if (event.keyCode === KEY_CODES.ARROW_DOWN) {
if (this.counter < count) { this.counter = this.counter + 1;
this.focusListItem(active, 'down', items);
}else if (this.counter === count) { if(this.counter == count){
this.focusListItem(active, 'downLoopDown', list); this.counter = 0;
}else if (this.counter === 0) {
this.focusListItem(active, 'downLoopUp', list);
} }
this.focusListItem(active, 'down', items);
} }
if (event.keyCode === KEY_CODES.ARROW_UP) { if (event.keyCode === KEY_CODES.ARROW_UP) {
if (this.counter < count && this.counter !== 0) { this.counter = this.counter - 1;
this.focusListItem(active, 'up', items);
}else if (this.counter === 0) { if(this.counter <= -1){
this.focusListItem(active, 'upLoopUp', list, count); this.counter = count - 1;
}else if (this.counter === count) {
this.focusListItem(active, 'upLoopDown', list, count);
} }
this.focusListItem(active, 'up', items);
} }
} }
componentDidMount() { componentDidMount() {
if (!this.state.compact) { if (!this.state.compact) {
this._msgsList.addEventListener('keypress', this._msgsList.addEventListener('keydown',
event=>this.rovingIndex(event, "messages")); event=>this.rovingIndex(event, "messages"));
this._usersList.addEventListener('keypress', this._usersList.addEventListener('keydown',
event=>this.rovingIndex(event, "users")); event=>this.rovingIndex(event, "users"));
} }
} }
componentWillUnmount() { componentWillUnmount() {
this._msgsList.removeEventListener('keypress', function (event) {}, false); this._msgsList.removeEventListener('keydown', function (event) {}, false);
this._usersList.removeEventListener('keypress', function (event) {}, false); this._usersList.removeEventListener('keydown', function (event) {}, false);
} }
render() { render() {