feat(search results): manage focus/unfocus and select action on searc…

…h results (and get feature info) (#585)

* feat/fix(search results): manage focus/unfocus and select action on search results (and get feature info)

* feat/fix(search results): manage focus/unfocus and select action on search results (and get feature info)

* lasts modifs on focus/unfocus/select search results

* feat/fix(search results): manage focus/unfocus and select action on search results (and get feature info)

* lasts modifs on focus/unfocus/select search results

* search results display lasts modfis

* lasts modifs

* feat/fix(search-results): manage focus/unfocus/select event on search results type + automatic scroll on keypad event

* fix(search-results-tool): fix lint problem

* fix(search-results): fix focused style and scroll with panel and display more results

Co-authored-by: Marc-André Barbeau <[email protected]>

packages/common/src/lib/list/list-item.directive.ts

@@ -13,6 +13,7 @@ import {
 })
 export class ListItemDirective {
 
+  static focusedCls = 'igo-list-item-focused';
   static selectedCls = 'igo-list-item-selected';
   static disabledCls = 'igo-list-item-disabled';
 
@@ -40,7 +41,9 @@ export class ListItemDirective {
     value ? this.beforeFocus.emit(this) : this.beforeUnfocus.emit(this);
 
     this._focused = value;
-    this.toggleSelectedClass();
+    if (this.selected !== true) {
+      this.toggleFocusedClass();
+    }
 
     value ? this.focus.emit(this) : this.unfocus.emit(this);
   }
@@ -108,17 +111,26 @@ export class ListItemDirective {
     this.selected = true;
   }
 
-  constructor(public renderer: Renderer2, private el: ElementRef) {}
+  constructor(public renderer: Renderer2, public el: ElementRef) {}
 
   getOffsetTop(): number {
     const padding = 5;
 
     return this.el.nativeElement.offsetTop - padding;
   }
 
+  private toggleFocusedClass() {
+    if (this.focused) {
+      this.addCls(ListItemDirective.focusedCls);
+    } else {
+      this.removeCls(ListItemDirective.focusedCls);
+    }
+  }
+
   private toggleSelectedClass() {
-    if (this.focused || this.selected) {
+    if (this.selected) {
       this.addCls(ListItemDirective.selectedCls);
+      this.removeCls(ListItemDirective.focusedCls);
     } else {
       this.removeCls(ListItemDirective.selectedCls);
     }

packages/common/src/lib/list/list.component.ts

@@ -62,6 +62,7 @@ export class ListComponent implements AfterViewInit, OnInit, OnDestroy {
   listItems: QueryList<ListItemDirective>;
 
   @HostListener('document:keydown', ['$event'])
+  @HostListener('document:enter', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
     // It would be nice to be able to unsubscribe to the event
     // completely but until ES7 this won't be possible because
@@ -121,6 +122,7 @@ export class ListComponent implements AfterViewInit, OnInit, OnDestroy {
   focusNext() {
     const items = this.listItems.toArray();
     let item;
+    const igoList = this.el.nativeElement;
     let disabled = true;
     let index = this.getFocusedIndex();
     if (index === undefined) {
@@ -136,11 +138,21 @@ export class ListComponent implements AfterViewInit, OnInit, OnDestroy {
     if (item !== undefined) {
       this.focus(item);
     }
+
+    if (!items[index + 1]) {
+      igoList.scrollTop = igoList.scrollHeight - igoList.clientHeight;
+      return;
+    }
+
+    if (item !== undefined && !this.isScrolledIntoView(item.el.nativeElement)) {
+      igoList.scrollTop = item.el.nativeElement.offsetTop + item.el.nativeElement.children[0].offsetHeight - igoList.clientHeight;
+    }
   }
 
   focusPrevious() {
     const items = this.listItems.toArray();
-    let item;
+    let item: ListItemDirective;
+    const igoList = this.el.nativeElement;
     let disabled = true;
     let index = this.getFocusedIndex();
 
@@ -153,6 +165,16 @@ export class ListComponent implements AfterViewInit, OnInit, OnDestroy {
     if (item !== undefined) {
       this.focus(item);
     }
+
+    if (!items[index - 1]) {
+      igoList.scrollTop = 0;
+      return;
+    }
+
+    if (item !== undefined && !this.isScrolledIntoView(item.el.nativeElement)) {
+      const padding = 3;
+      igoList.scrollTop = item.el.nativeElement.offsetTop - padding;
+    }
   }
 
   select(item?: ListItemDirective) {
@@ -191,6 +213,15 @@ export class ListComponent implements AfterViewInit, OnInit, OnDestroy {
     this.el.nativeElement.scrollTop = item.getOffsetTop();
   }
 
+  isScrolledIntoView(elem) {
+    const docViewTop = this.el.nativeElement.scrollTop + this.el.nativeElement.offsetTop;
+    const docViewBottom = docViewTop + this.el.nativeElement.clientHeight;
+
+    const elemTop = elem.offsetTop;
+    const elemBottom = elemTop + elem.children[0].offsetHeight;
+    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
+  }
+
   private init() {
     this.subscribe();
 
@@ -237,7 +268,7 @@ export class ListComponent implements AfterViewInit, OnInit, OnDestroy {
 
   private handleItemBeforeFocus(item: ListItemDirective) {
     if (item !== this.focusedItem) {
-      this.unselect();
+      this.unfocus();
     }
   }
 

packages/common/src/lib/list/list.theming.scss

@@ -16,12 +16,14 @@
     color: rgba(0, 0, 0, 0.38);
   }
 
-  igo-list [igolistitem][color="primary"]:not(.igo-list-item-disabled):hover > mat-list-item {
+  igo-list [igolistitem][color="primary"]:not(.igo-list-item-disabled):hover > mat-list-item,
+  igo-list [igolistitem][color="primary"].igo-list-item-focused > mat-list-item {
     background-color: mat-color($primary, lighter);
     color: mat-color($primary, default-contrast);
   }
 
-  igo-list [igolistitem][color="accent"]:not(.igo-list-item-disabled):hover > mat-list-item {
+  igo-list [igolistitem][color="accent"]:not(.igo-list-item-disabled):hover > mat-list-item,
+  igo-list [igolistitem][color="accent"].igo-list-item-focused > mat-list-item {
     background-color: mat-color($accent, lighter);
     color: mat-color($accent, default-contrast);
   }