lint: change keyCode to code

fireship-io · Jan 11, 2019 · c5fe5e0 · c5fe5e0
2 parents f6e4fc6 + bfed5e5
commit c5fe5e0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 3 deletions.
diff --git a/components/src/app/algolia/algolia-search/algolia-search.component.html b/components/src/app/algolia/algolia-search/algolia-search.component.html
@@ -1,7 +1,7 @@
 <div class="algolia-search" [class.algolia-show]="visible">
 
   <div class="algolia-hits">
-      <input (keydown.esc)="hide()"
+      <input
         placeholder="explore..." class="algolia-input" type="text" #searchInput (keyup)="handleSearch(searchInput.value)">
 
         <span (click)="hide()" class="algolia-close btn btn-sm btn-red">close</span>

diff --git a/components/src/app/algolia/algolia-search/algolia-search.component.ts b/components/src/app/algolia/algolia-search/algolia-search.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectorRef, ElementRef, AfterViewInit, Input } from '@angular/core';
+import { Component, ChangeDetectorRef, ElementRef, AfterViewInit, Input, HostListener, ViewChild } from '@angular/core';
 import * as algolia from 'algoliasearch/lite';
 
 const APP_ID = '05VYZFXKNM';
@@ -10,6 +10,8 @@ const client = algolia(APP_ID, API_KEY);
 })
 export class AlgoliaSearchComponent implements AfterViewInit  {
 
+  constructor(private cd: ChangeDetectorRef, private el: ElementRef) { }
+
   index = client.initIndex('content');
 
   emojiMap = {
@@ -27,18 +29,32 @@ export class AlgoliaSearchComponent implements AfterViewInit  {
   hits: any[];
   results: any;
 
-  constructor(private cd: ChangeDetectorRef, private el: ElementRef) { }
+  @ViewChild('searchInput') searchInput: ElementRef;
 
   // Public toggles
   @Input() show = () => this.toggle(true);
   @Input() hide = () => this.toggle(false);
 
+  @HostListener('document:keydown', ['$event'])
+  keyDownHandler(e: KeyboardEvent) {
+    if (e.ctrlKey && e.shiftKey && e.code === 'KeyP') {
+      // Ctrl + Shift + P shortcut to open the search box
+      e.preventDefault();
+      this.toggle(true);
+    } else if (e.code === 'Escape') {
+      // ESC to close the search box
+      this.toggle(false);
+    }
+  }
+
   ngAfterViewInit() {
 
   }
 
   toggle(val) {
     this.visible = val;
+    // Focus the input element
+    this.searchInput.nativeElement.focus();
     this.cd.detectChanges();
   }