angular2-hotkeys
Version:
Angular 16 and Ivy Compatible. Older versions might work but isn't officially tested.
42 lines • 10.7 kB
JavaScript
import { Component, Input } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import * as i0 from "@angular/core";
import * as i1 from "../hotkeys.service";
import * as i2 from "@angular/common";
export class HotkeysCheatsheetComponent {
constructor(hotkeysService) {
this.hotkeysService = hotkeysService;
this.helpVisible$ = new BehaviorSubject(false);
this.title = 'Keyboard Shortcuts:';
}
ngOnInit() {
this.subscription = this.hotkeysService.cheatSheetToggle.subscribe((isOpen) => {
if (isOpen !== false) {
this.hotkeys = this.hotkeysService.hotkeys.filter(hotkey => hotkey.description);
}
if (isOpen === false) {
this.helpVisible$.next(false);
}
else {
this.toggleCheatSheet();
}
});
}
ngOnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
toggleCheatSheet() {
this.helpVisible$.next(!this.helpVisible$.value);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: HotkeysCheatsheetComponent, deps: [{ token: i1.HotkeysService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: HotkeysCheatsheetComponent, selector: "hotkeys-cheatsheet", inputs: { title: "title" }, ngImport: i0, template: "<div class=\"cfp-hotkeys-container fade\" [ngClass]=\"{'in': helpVisible$|async}\" style=\"display:none\">\n <div class=\"cfp-hotkeys\">\n <h4 class=\"cfp-hotkeys-title\">{{ title }}</h4>\n <table>\n <tbody>\n <tr *ngFor=\"let hotkey of hotkeys\">\n <td class=\"cfp-hotkeys-keys\">\n <span *ngFor=\"let key of hotkey.formatted\" class=\"cfp-hotkeys-key\">{{ key }}</span>\n </td>\n <td class=\"cfp-hotkeys-text\">{{ hotkey.description }}</td>\n </tr>\n </tbody>\n </table>\n <div class=\"cfp-hotkeys-close\" (click)=\"toggleCheatSheet()\">×</div>\n </div>\n</div>\n", styles: [".cfp-hotkeys-container{display:table!important;position:fixed;width:100%;height:100%;top:0;left:0;color:#333;font-size:1em;background-color:#ffffffe6}.cfp-hotkeys-container.fade{z-index:-1024;visibility:hidden;opacity:0;transition:opacity .15s linear}.cfp-hotkeys-container.fade.in{z-index:10002;visibility:visible;opacity:1}.cfp-hotkeys-title{font-weight:700;text-align:center;font-size:1.2em}.cfp-hotkeys{width:100%;height:100%;display:table-cell;vertical-align:middle}.cfp-hotkeys table{margin:auto;color:#333}.cfp-content{display:table-cell;vertical-align:middle}.cfp-hotkeys-keys{padding:5px;text-align:right}.cfp-hotkeys-key{display:inline-block;color:#fff;background-color:#333;border:1px solid #333;border-radius:5px;text-align:center;margin-right:5px;box-shadow:inset 0 1px #666,0 1px #bbb;padding:5px 9px;font-size:1em}.cfp-hotkeys-text{padding-left:10px;font-size:1em}.cfp-hotkeys-close{position:fixed;top:20px;right:20px;font-size:2em;font-weight:700;padding:5px 10px;border:1px solid #ddd;border-radius:5px;min-height:45px;min-width:45px;text-align:center}.cfp-hotkeys-close:hover{background-color:#fff;cursor:pointer}@media all and (max-width: 500px){.cfp-hotkeys{font-size:.8em}}@media all and (min-width: 750px){.cfp-hotkeys{font-size:1.2em}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: HotkeysCheatsheetComponent, decorators: [{
type: Component,
args: [{ selector: 'hotkeys-cheatsheet', template: "<div class=\"cfp-hotkeys-container fade\" [ngClass]=\"{'in': helpVisible$|async}\" style=\"display:none\">\n <div class=\"cfp-hotkeys\">\n <h4 class=\"cfp-hotkeys-title\">{{ title }}</h4>\n <table>\n <tbody>\n <tr *ngFor=\"let hotkey of hotkeys\">\n <td class=\"cfp-hotkeys-keys\">\n <span *ngFor=\"let key of hotkey.formatted\" class=\"cfp-hotkeys-key\">{{ key }}</span>\n </td>\n <td class=\"cfp-hotkeys-text\">{{ hotkey.description }}</td>\n </tr>\n </tbody>\n </table>\n <div class=\"cfp-hotkeys-close\" (click)=\"toggleCheatSheet()\">×</div>\n </div>\n</div>\n", styles: [".cfp-hotkeys-container{display:table!important;position:fixed;width:100%;height:100%;top:0;left:0;color:#333;font-size:1em;background-color:#ffffffe6}.cfp-hotkeys-container.fade{z-index:-1024;visibility:hidden;opacity:0;transition:opacity .15s linear}.cfp-hotkeys-container.fade.in{z-index:10002;visibility:visible;opacity:1}.cfp-hotkeys-title{font-weight:700;text-align:center;font-size:1.2em}.cfp-hotkeys{width:100%;height:100%;display:table-cell;vertical-align:middle}.cfp-hotkeys table{margin:auto;color:#333}.cfp-content{display:table-cell;vertical-align:middle}.cfp-hotkeys-keys{padding:5px;text-align:right}.cfp-hotkeys-key{display:inline-block;color:#fff;background-color:#333;border:1px solid #333;border-radius:5px;text-align:center;margin-right:5px;box-shadow:inset 0 1px #666,0 1px #bbb;padding:5px 9px;font-size:1em}.cfp-hotkeys-text{padding-left:10px;font-size:1em}.cfp-hotkeys-close{position:fixed;top:20px;right:20px;font-size:2em;font-weight:700;padding:5px 10px;border:1px solid #ddd;border-radius:5px;min-height:45px;min-width:45px;text-align:center}.cfp-hotkeys-close:hover{background-color:#fff;cursor:pointer}@media all and (max-width: 500px){.cfp-hotkeys{font-size:.8em}}@media all and (min-width: 750px){.cfp-hotkeys{font-size:1.2em}}\n"] }]
}], ctorParameters: function () { return [{ type: i1.HotkeysService }]; }, propDecorators: { title: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaG90a2V5cy1jaGVhdHNoZWV0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvaG90a2V5cy1jaGVhdHNoZWV0L2hvdGtleXMtY2hlYXRzaGVldC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi9zcmMvbGliL2hvdGtleXMtY2hlYXRzaGVldC9ob3RrZXlzLWNoZWF0c2hlZXQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQXFCLE1BQU0sZUFBZSxDQUFDO0FBR3BFLE9BQU8sRUFBQyxlQUFlLEVBQWUsTUFBTSxNQUFNLENBQUM7Ozs7QUFPbkQsTUFBTSxPQUFPLDBCQUEwQjtJQU9uQyxZQUFvQixjQUE4QjtRQUE5QixtQkFBYyxHQUFkLGNBQWMsQ0FBZ0I7UUFObEQsaUJBQVksR0FBRyxJQUFJLGVBQWUsQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNqQyxVQUFLLEdBQUcscUJBQXFCLENBQUM7SUFNdkMsQ0FBQztJQUVNLFFBQVE7UUFDWCxJQUFJLENBQUMsWUFBWSxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsZ0JBQWdCLENBQUMsU0FBUyxDQUFDLENBQUMsTUFBTSxFQUFFLEVBQUU7WUFDMUUsSUFBSSxNQUFNLEtBQUssS0FBSyxFQUFFO2dCQUNsQixJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsRUFBRSxDQUFDLE1BQU0sQ0FBQyxXQUFXLENBQUMsQ0FBQzthQUNuRjtZQUVELElBQUksTUFBTSxLQUFLLEtBQUssRUFBRTtnQkFDbEIsSUFBSSxDQUFDLFlBQVksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7YUFDakM7aUJBQU07Z0JBQ0gsSUFBSSxDQUFDLGdCQUFnQixFQUFFLENBQUM7YUFDM0I7UUFDTCxDQUFDLENBQUMsQ0FBQztJQUNQLENBQUM7SUFFTSxXQUFXO1FBQ2QsSUFBSSxJQUFJLENBQUMsWUFBWSxFQUFFO1lBQ25CLElBQUksQ0FBQyxZQUFZLENBQUMsV0FBVyxFQUFFLENBQUM7U0FDbkM7SUFDTCxDQUFDO0lBRU0sZ0JBQWdCO1FBQ25CLElBQUksQ0FBQyxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUMsSUFBSSxDQUFDLFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztJQUNyRCxDQUFDOzhHQWhDUSwwQkFBMEI7a0dBQTFCLDBCQUEwQixzRkNWdkMsMHNCQWdCQTs7MkZETmEsMEJBQTBCO2tCQUx0QyxTQUFTOytCQUNJLG9CQUFvQjtxR0FNckIsS0FBSztzQkFBYixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbnB1dCwgT25EZXN0cm95LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IEhvdGtleSB9IGZyb20gJy4uL2hvdGtleS5tb2RlbCc7XG5pbXBvcnQgeyBIb3RrZXlzU2VydmljZSB9IGZyb20gJy4uL2hvdGtleXMuc2VydmljZSc7XG5pbXBvcnQge0JlaGF2aW9yU3ViamVjdCwgU3Vic2NyaXB0aW9ufSBmcm9tICdyeGpzJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdob3RrZXlzLWNoZWF0c2hlZXQnLFxuICAgIHRlbXBsYXRlVXJsOiAnLi9ob3RrZXlzLWNoZWF0c2hlZXQuY29tcG9uZW50Lmh0bWwnLFxuICAgIHN0eWxlVXJsczogWycuL2hvdGtleXMtY2hlYXRzaGVldC5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgSG90a2V5c0NoZWF0c2hlZXRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQsIE9uRGVzdHJveSB7XG4gICAgaGVscFZpc2libGUkID0gbmV3IEJlaGF2aW9yU3ViamVjdChmYWxzZSk7XG4gICAgQElucHV0KCkgdGl0bGUgPSAnS2V5Ym9hcmQgU2hvcnRjdXRzOic7XG4gICAgc3Vic2NyaXB0aW9uOiBTdWJzY3JpcHRpb247XG5cbiAgICBob3RrZXlzOiBIb3RrZXlbXTtcblxuICAgIGNvbnN0cnVjdG9yKHByaXZhdGUgaG90a2V5c1NlcnZpY2U6IEhvdGtleXNTZXJ2aWNlKSB7XG4gICAgfVxuXG4gICAgcHVibGljIG5nT25Jbml0KCk6IHZvaWQge1xuICAgICAgICB0aGlzLnN1YnNjcmlwdGlvbiA9IHRoaXMuaG90a2V5c1NlcnZpY2UuY2hlYXRTaGVldFRvZ2dsZS5zdWJzY3JpYmUoKGlzT3BlbikgPT4ge1xuICAgICAgICAgICAgaWYgKGlzT3BlbiAhPT0gZmFsc2UpIHtcbiAgICAgICAgICAgICAgICB0aGlzLmhvdGtleXMgPSB0aGlzLmhvdGtleXNTZXJ2aWNlLmhvdGtleXMuZmlsdGVyKGhvdGtleSA9PiBob3RrZXkuZGVzY3JpcHRpb24pO1xuICAgICAgICAgICAgfVxuXG4gICAgICAgICAgICBpZiAoaXNPcGVuID09PSBmYWxzZSkge1xuICAgICAgICAgICAgICAgIHRoaXMuaGVscFZpc2libGUkLm5leHQoZmFsc2UpO1xuICAgICAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgICAgICB0aGlzLnRvZ2dsZUNoZWF0U2hlZXQoKTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgcHVibGljIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgICAgICBpZiAodGhpcy5zdWJzY3JpcHRpb24pIHtcbiAgICAgICAgICAgIHRoaXMuc3Vic2NyaXB0aW9uLnVuc3Vic2NyaWJlKCk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBwdWJsaWMgdG9nZ2xlQ2hlYXRTaGVldCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5oZWxwVmlzaWJsZSQubmV4dCghdGhpcy5oZWxwVmlzaWJsZSQudmFsdWUpO1xuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJjZnAtaG90a2V5cy1jb250YWluZXIgZmFkZVwiIFtuZ0NsYXNzXT1cInsnaW4nOiBoZWxwVmlzaWJsZSR8YXN5bmN9XCIgc3R5bGU9XCJkaXNwbGF5Om5vbmVcIj5cbiAgICA8ZGl2IGNsYXNzPVwiY2ZwLWhvdGtleXNcIj5cbiAgICAgICAgPGg0IGNsYXNzPVwiY2ZwLWhvdGtleXMtdGl0bGVcIj57eyB0aXRsZSB9fTwvaDQ+XG4gICAgICAgIDx0YWJsZT5cbiAgICAgICAgICAgIDx0Ym9keT5cbiAgICAgICAgICAgIDx0ciAqbmdGb3I9XCJsZXQgaG90a2V5IG9mIGhvdGtleXNcIj5cbiAgICAgICAgICAgICAgICA8dGQgY2xhc3M9XCJjZnAtaG90a2V5cy1rZXlzXCI+XG4gICAgICAgICAgICAgICAgICAgIDxzcGFuICpuZ0Zvcj1cImxldCBrZXkgb2YgaG90a2V5LmZvcm1hdHRlZFwiIGNsYXNzPVwiY2ZwLWhvdGtleXMta2V5XCI+e3sga2V5IH19PC9zcGFuPlxuICAgICAgICAgICAgICAgIDwvdGQ+XG4gICAgICAgICAgICAgICAgPHRkIGNsYXNzPVwiY2ZwLWhvdGtleXMtdGV4dFwiPnt7IGhvdGtleS5kZXNjcmlwdGlvbiB9fTwvdGQ+XG4gICAgICAgICAgICA8L3RyPlxuICAgICAgICAgICAgPC90Ym9keT5cbiAgICAgICAgPC90YWJsZT5cbiAgICAgICAgPGRpdiBjbGFzcz1cImNmcC1ob3RrZXlzLWNsb3NlXCIgKGNsaWNrKT1cInRvZ2dsZUNoZWF0U2hlZXQoKVwiPiYjMjE1OzwvZGl2PlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iXX0=