Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change tabbing logic #3262

Merged
merged 2 commits into from
Dec 4, 2018
Merged

Change tabbing logic #3262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e3ad94a
fix(igx-grid): Change tabbing logic, #3179
sstoyanovIG Nov 30, 2018
044c60b
Merge branch 'master' into sstoyanov/filtering-kbNav-improvement-master
kdinev Dec 3, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 48 additions & 21 deletions projects/igniteui-angular/src/lib/grids/filtering/grid-filtering-cell.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import {
ChangeDetectionStrategy,
DoCheck
} from '@angular/core';
import { IgxColumnComponent } from '../column.component';
import { IgxColumnComponent, IgxColumnGroupComponent } from '../column.component';
import { IFilteringExpression } from '../../data-operations/filtering-expression.interface';
import { IBaseChipEventArgs, IgxChipsAreaComponent, IgxChipComponent } from '../../chips';
import { IgxFilteringService, ExpressionUI } from './grid-filtering.service';
Expand Down Expand Up @@ -82,19 +82,17 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC

@HostListener('keydown.tab', ['$event'])
public onTabKeyDown(eventArgs) {
const pinnedColumns = this.filteringService.grid.pinnedColumns;
const nextIndex = this.column.visibleIndex + 1 - pinnedColumns.length;
const nextIndex = this.filteringService.unpinnedFilterableColumns.indexOf(this.column) + 1;

if (this.isLastElementFocused()) {
if (nextIndex < this.filteringService.grid.unpinnedColumns.length &&
pinnedColumns.indexOf(this.column) === pinnedColumns.length - 1 &&
!this.navService.isColumnLeftFullyVisible(this.column.visibleIndex + 1)) {
this.ScrollToChip(0, true);
if (this.column === this.getLastPinnedFilterableColumn() &&
(!this.isColumnLeftVisible(nextIndex) || !this.isColumnRightVisible(nextIndex))) {
this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[nextIndex], false);
eventArgs.stopPropagation();
return;
}

if (this.column.visibleIndex === this.filteringService.grid.columnList.length - 1) {
if (nextIndex >= this.filteringService.unpinnedFilterableColumns.length) {
if (!this.filteringService.grid.filteredData || this.filteringService.grid.filteredData.length > 0) {
if (this.filteringService.grid.rowList.filter(row => row instanceof IgxGridGroupByRowComponent).length > 0) {
eventArgs.stopPropagation();
Expand All @@ -103,9 +101,9 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
this.navService.goToFirstCell();
}
eventArgs.preventDefault();
} else if (!this.column.pinned && !this.navService.isColumnFullyVisible(this.column.visibleIndex + 1)) {
} else if (!this.column.pinned && !this.isColumnRightVisible(nextIndex)) {
eventArgs.preventDefault();
this.ScrollToChip(nextIndex, true);
this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[nextIndex], true);
}
}
eventArgs.stopPropagation();
Expand All @@ -114,11 +112,14 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
@HostListener('keydown.shift.tab', ['$event'])
public onShiftTabKeyDown(eventArgs) {
if (this.isFirstElementFocused()) {
if (this.column.visibleIndex > 0 && !this.navService.isColumnLeftFullyVisible(this.column.visibleIndex - 1)) {
const prevIndex = this.filteringService.unpinnedFilterableColumns.indexOf(this.column) - 1;

if (prevIndex >= 0 && this.column.visibleIndex > 0 && !this.isColumnLeftVisible(prevIndex) && !this.column.pinned) {
eventArgs.preventDefault();
const prevIndex = this.column.visibleIndex - 1 - this.filteringService.grid.pinnedColumns.length;
this.ScrollToChip(prevIndex, false);
} else if (this.column.visibleIndex === 0) {
this.filteringService.scrollToFilterCell(this.filteringService.unpinnedFilterableColumns[prevIndex], false);
} else if (this.column.visibleIndex === 0 ||
(prevIndex < 0 && !this.getFirstPinnedFilterableColumn()) ||
this.column === this.getFirstPinnedFilterableColumn()) {
eventArgs.preventDefault();
}
}
Expand Down Expand Up @@ -296,13 +297,6 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
}
}

private ScrollToChip(columnIndex: number, shouldFocusNext: boolean) {
this.filteringService.grid.nativeElement.focus({preventScroll: true});
this.filteringService.columnToFocus = this.filteringService.grid.unpinnedColumns[columnIndex];
this.filteringService.shouldFocusNext = shouldFocusNext;
this.filteringService.grid.headerContainer.scrollTo(columnIndex);
}

private isFirstElementFocused(): boolean {
return !(this.chipsArea && this.chipsArea.chipsList.length > 0 &&
this.chipsArea.chipsList.first.elementRef.nativeElement.querySelector(`.igx-chip__item`) !== document.activeElement);
Expand Down Expand Up @@ -343,4 +337,37 @@ export class IgxGridFilteringCellComponent implements AfterViewInit, OnInit, DoC
}
}
}

private getLastPinnedFilterableColumn(): IgxColumnComponent {
const pinnedFilterableColums =
this.filteringService.grid.pinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable);
return pinnedFilterableColums[pinnedFilterableColums.length - 1];
}

private getFirstPinnedFilterableColumn(): IgxColumnComponent {
return this.filteringService.grid.pinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable)[0];
}

private isColumnRightVisible(columnIndex: number): boolean {
let currentColumnRight = 0;
for (let index = 0; index < this.filteringService.unpinnedColumns.length; index++) {
currentColumnRight += parseInt(this.filteringService.unpinnedColumns[index].width, 10);
if (this.filteringService.unpinnedColumns[index] === this.filteringService.unpinnedFilterableColumns[columnIndex]) {
break;
}
}
const width = this.filteringService.displayContainerWidth + this.filteringService.displayContainerScrollLeft;
return currentColumnRight <= width && this.isColumnLeftVisible(columnIndex);
}

private isColumnLeftVisible(columnIndex: number): boolean {
let currentColumnLeft = 0;
for (let index = 0; index < this.filteringService.unpinnedColumns.length; index++) {
if (this.filteringService.unpinnedColumns[index] === this.filteringService.unpinnedFilterableColumns[columnIndex]) {
break;
}
currentColumnLeft += parseInt(this.filteringService.unpinnedColumns[index].width, 10);
}
return currentColumnLeft >= this.filteringService.displayContainerScrollLeft;
}
}
45 changes: 44 additions & 1 deletion projects/igniteui-angular/src/lib/grids/filtering/grid-filtering.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { takeUntil } from 'rxjs/operators';
import { IForOfState } from '../../directives/for-of/for_of.directive';
import { IgxGridFilterConditionPipe } from '../grid-common.pipes';
import { TitleCasePipe, DatePipe } from '@angular/common';
import { IgxColumnComponent } from '../grid';
import { IgxColumnComponent, IgxColumnGroupComponent } from '../grid';

const FILTERING_ICONS_FONT_SET = 'filtering-icons';

Expand Down Expand Up @@ -56,6 +56,22 @@ export class IgxFilteringService implements OnDestroy {
this.destroy$.complete();
}

public get displayContainerWidth() {
return parseInt(this.grid.parentVirtDir.dc.instance._viewContainer.element.nativeElement.offsetWidth, 10);
}

public get displayContainerScrollLeft() {
return parseInt(this.grid.parentVirtDir.getHorizontalScroll().scrollLeft, 10);
}

public get unpinnedFilterableColumns() {
return this.grid.unpinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent) && col.filterable);
}

public get unpinnedColumns() {
return this.grid.unpinnedColumns.filter(col => !(col instanceof IgxColumnGroupComponent));
}

public get grid(): IgxGridBaseComponent {
return this.gridAPI.get(this.gridId);
}
Expand Down Expand Up @@ -296,6 +312,33 @@ export class IgxFilteringService implements OnDestroy {
}
}

/**
* Scrolls to a filterCell.
*/
public scrollToFilterCell(column: IgxColumnComponent, shouldFocusNext: boolean) {
this.grid.nativeElement.focus({preventScroll: true});
this.columnToFocus = column;
this.shouldFocusNext = shouldFocusNext;

let currentColumnRight = 0;
let currentColumnLeft = 0;
for (let index = 0; index < this.unpinnedColumns.length; index++) {
currentColumnRight += parseInt(this.unpinnedColumns[index].width, 10);
if (this.unpinnedColumns[index] === column) {
currentColumnLeft = currentColumnRight - parseInt(this.unpinnedColumns[index].width, 10);
break;
}
}

const forOfDir = this.grid.headerContainer;
const width = this.displayContainerWidth + this.displayContainerScrollLeft;
if (shouldFocusNext) {
forOfDir.getHorizontalScroll().scrollLeft += currentColumnRight - width;
} else {
forOfDir.getHorizontalScroll().scrollLeft = currentColumnLeft;
}
}

private isFilteringTreeComplex(expressions: IFilteringExpressionsTree | IFilteringExpression): boolean {
if (!expressions) {
return false;
Expand Down
11 changes: 4 additions & 7 deletions projects/igniteui-angular/src/lib/grids/grid-navigation.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -417,14 +417,11 @@ export class IgxGridNavigationService {

public moveFocusToFilterCell() {
this.grid.rowList.find(row => row instanceof IgxGridRowComponent).cells.first._clearCellSelection();
const visColLength = this.grid.unpinnedColumns.length;
if (this.isColumnFullyVisible(visColLength - 1)) {
const lastFilterCellIndex = this.grid.filterCellList.length - 1;
this.grid.filteringService.focusFilterCellChip(this.grid.filterCellList[lastFilterCellIndex].column, false);
const columns = this.grid.filteringService.unpinnedFilterableColumns;
if (this.isColumnFullyVisible(columns.length - 1)) {
this.grid.filteringService.focusFilterCellChip(columns[columns.length - 1], false);
} else {
this.grid.filteringService.columnToFocus = this.grid.unpinnedColumns[visColLength - 1];
this.grid.filteringService.shouldFocusNext = false;
this.grid.headerContainer.scrollTo(visColLength - 1);
this.grid.filteringService.scrollToFilterCell(columns[columns.length - 1], false);
}
}

Expand Down