angular2-hotkeys icon indicating copy to clipboard operation
angular2-hotkeys copied to clipboard

a description function parameter in HotKey class doesn't work

Open do-yeon opened this issue 6 years ago • 1 comments

Because of i18n, I wanna change hotkey's description every time users change their language on our app. Lucky! there was a function parameter but eventually, it didn't work! OMG... Here is how it works for now.

2018-12-20 10 54 13

I think you might need to modify SheetComponent.

<div class="cfp-hotkeys-container fade" [ngClass]="{'in': helpVisible}" style="display:none"><div class="cfp-hotkeys">
  <h4 class="cfp-hotkeys-title">{{ title }}</h4>
  <table><tbody>
    <tr *ngFor="let hotkey of hotkeys">
      <td class="cfp-hotkeys-keys">
        <span *ngFor="let key of hotkey.formatted" class="cfp-hotkeys-key">{{ key }}</span>
      </td>
      <td class="cfp-hotkeys-text">**{{ getDescription(hotkey.description) }}**</td>
    </tr>
  </tbody></table>
  <div class="cfp-hotkeys-close" (click)="toggleCheatSheet()">&#215;</div>
</div></div>



export class CheatSheetComponent implements OnInit, OnDestroy {
    helpVisible = false;
    @Input() title: string = 'Keyboard Shortcuts:';
    subscription: Subscription;

    hotkeys: Hotkey[];

    constructor(private hotkeysService: HotkeysService) {
    }

    public ngOnInit(): void {
        this.subscription = this.hotkeysService.cheatSheetToggle.subscribe((isOpen) => {
            if(isOpen !== false) {
                this.hotkeys = this.hotkeysService.hotkeys.filter(hotkey => hotkey.description);
            }

            if(isOpen === false) {
                this.helpVisible = false;
            } else {
                this.toggleCheatSheet();
            }
        });
    }

    public ngOnDestroy(): void {
        if(this.subscription) {
            this.subscription.unsubscribe();
        }
    }

    public toggleCheatSheet(): void {
        this.helpVisible = !this.helpVisible;
    }
    
    getDescription(description): string {
        return (description||'').constructor === Function ? description() : description;
    }

and I'd like it to work (running that function) whenever sheet is opened.

except that everything is perfect to me!

Thank you!!

do-yeon avatar Dec 20 '18 02:12 do-yeon

Hi there, Thanks for the report. This looks like a pretty small change that should be possible to integrate. I'm not sure when I'll manage to get around to it though, so in the meantime I'd suggest you build your own cheatsheet component and use that instead. Basically just implement a copy of the one in this project but with a different selector and use that in your app. That will get you around the issue for now and hopefully support can be integrated into this one in the near future.

wittlock avatar Jan 08 '19 23:01 wittlock