</button>
</div>
<div class="modal-body">
- <p i18n>Assignments toward the top have higher precedence</p>
<div class="row border-bottom">
<div class="col-3 p-1 border-right text-center" i18n>Command</div>
- <div class="col-9 p-1" i18n>Action</div>
+ <div class="col-6 p-1 border-right" i18n>Action</div>
+ <div class="col-3 p-1" i18n>Context</div>
</div>
<div class="row border-bottom" *ngFor="let a of assignments()">
<div class="col-3 p-1 border-right text-center">{{a.key}}</div>
- <div class="col-9 p-1">{{a.desc}}</div>
+ <div class="col-6 p-1 border-right">{{a.desc}}</div>
+ <div class="col-3 p-1">{{a.ctx}}</div>
</div>
</div>
<div class="modal-footer">
export class EgAccessKeyInfoComponent extends EgDialogComponent {
constructor(
- // NgbModal import required for subclassing with a constructor.
- private modal: NgbModal,
+ private modal: NgbModal, // required for passing to parent
private keyService: EgAccessKeyService) {
super(modal);
}
@Input() keySpec: string;
@Input() keyDesc: string;
+ @Input() keyCtx: string;
constructor(
private elm: ElementRef,
this.keyService.assign({
key: this.keySpec,
desc: this.keyDesc,
+ ctx: this.keyCtx,
action: () => {this.elm.nativeElement.click()}
});
+
}
}
import {Injectable, EventEmitter, HostListener} from '@angular/core';
export interface EgAccessKeyAssignment {
- key: string,
- desc: string,
- action: Function
+ key: string, // keyboard command
+ desc: string, // human-friendly description
+ ctx: string, // template context
+ action: Function // handler function
};
@Injectable()
*/
infoIze(): any[] {
return this.assignments.map(a => {
- return {key: a.key, desc: a.desc};
+ return {key: a.key, desc: a.desc, ctx: a.ctx};
});
}
<div class="nav-item">
<a i18n class="nav-link with-material-icon"
routerLink="/staff/splash"
- egAccessKey
+ egAccessKey keyCtx="navbar"
keySpec="alt+h" i18n-keySpec
keyDesc="Navigate Home" i18n-keyDesc>
<span class="material-icons">home</span>
<span i18n>Search for Copies by Barcode</span>
</a>
<a class="dropdown-item" routerLink="/staff/catalog/search"
- egAccessKey
+ egAccessKey keyCtx="navbar"
keySpec="alt+c" i18n-keySpec
keyDesc="Navigate To Catalog" i18n-keyDesc>
<span class="material-icons">search</span>
<!-- EgAccessKey Info Panel -->
<eg-accesskey-info #egAccessKeyInfo></eg-accesskey-info>
-<a egAccessKey
+<a egAccessKey keyCtx="base"
keySpec="ctrl+h" i18n-keySpec
- keyDesc="Display Access Key Info Dialog" i18n-keyDesc
+ keyDesc="Display AccessKey Info Dialog" i18n-keyDesc
(click)="egAccessKeyInfo.open()">
</a>