From 24f28bba06e104da2079a68f2fb944e66246079f Mon Sep 17 00:00:00 2001 From: Eugene Pankov Date: Wed, 18 Jan 2017 22:13:38 +0100 Subject: [PATCH] . --- app/src/components/hotkeyDisplay.pug | 2 +- app/src/components/hotkeyDisplay.ts | 54 +++++++++++++------------ app/src/components/hotkeyInput.less | 2 +- app/src/components/hotkeyInputModal.pug | 2 +- app/src/components/hotkeyInputModal.ts | 2 + app/src/services/hotkeys.ts | 26 +++++++++--- package.json | 2 +- 7 files changed, 56 insertions(+), 34 deletions(-) diff --git a/app/src/components/hotkeyDisplay.pug b/app/src/components/hotkeyDisplay.pug index ac511e99..2e35f05e 100644 --- a/app/src/components/hotkeyDisplay.pug +++ b/app/src/components/hotkeyDisplay.pug @@ -1,7 +1,7 @@ .stroke(*ngFor='let stroke of model') .key-container( *ngFor='let key of splitKeys(stroke); let isLast = last; trackBy: key', - @animateKey + [@animateKey]='animate ? "in" : ""' ) .key {{key}} .plus(*ngIf='!isLast') + diff --git a/app/src/components/hotkeyDisplay.ts b/app/src/components/hotkeyDisplay.ts index aadc6c4e..91b09fc6 100644 --- a/app/src/components/hotkeyDisplay.ts +++ b/app/src/components/hotkeyDisplay.ts @@ -2,31 +2,34 @@ import { Component, Input, ChangeDetectionStrategy, trigger, style, animate, tra @Component({ - selector: 'hotkey-display', - template: require('./hotkeyDisplay.pug'), - styles: [require('./hotkeyDisplay.less')], - //changeDetection: ChangeDetectionStrategy.OnPush, - animations: [ - trigger('animateKey', [ - state('in', style({ - 'transform': 'translateX(0)', - 'opacity': '1', - })), - transition(':enter', [ - style({ - 'transform': 'translateX(25px)', - 'opacity': '0', - }), - animate('250ms ease-out') - ]), - transition(':leave', [ - animate('250ms ease-in', style({ - 'transform': 'translateX(25px)', - 'opacity': '0', - })) - ]) - ]) - ] + selector: 'hotkey-display', + template: require('./hotkeyDisplay.pug'), + styles: [require('./hotkeyDisplay.less')], + //changeDetection: ChangeDetectionStrategy.OnPush, + animations: [ + trigger('animateKey', [ + transition('void => in', [ + style({ + transform: 'translateX(25px)', + opacity: '0', + }), + animate('250ms ease-out', style({ + transform: 'translateX(0)', + opacity: '1', + })) + ]), + transition('in => void', [ + style({ + transform: 'translateX(0)', + opacity: '1', + }), + animate('250ms ease-in', style({ + transform: 'translateX(25px)', + opacity: '0', + })) + ]) + ]) + ] }) export class HotkeyDisplayComponent { splitKeys(keys: string): string[] { @@ -34,4 +37,5 @@ export class HotkeyDisplayComponent { } @Input() model: string[] + @Input() animate = false } diff --git a/app/src/components/hotkeyInput.less b/app/src/components/hotkeyInput.less index 5009adde..108b7809 100644 --- a/app/src/components/hotkeyInput.less +++ b/app/src/components/hotkeyInput.less @@ -1,6 +1,6 @@ :host { display: inline-block; - padding: 5px 10px; + padding: 5px; transition: 0.125s all; diff --git a/app/src/components/hotkeyInputModal.pug b/app/src/components/hotkeyInputModal.pug index 88c0ef1a..9fcd933b 100644 --- a/app/src/components/hotkeyInputModal.pug +++ b/app/src/components/hotkeyInputModal.pug @@ -1,7 +1,7 @@ div.modal-body label Press the key now .input - hotkey-display([model]='value') + hotkey-display([model]='value', [animate]='true') .timeout div([style.width]='timeoutProgress + "%"') diff --git a/app/src/components/hotkeyInputModal.ts b/app/src/components/hotkeyInputModal.ts index 21e75081..0b8c6c19 100644 --- a/app/src/components/hotkeyInputModal.ts +++ b/app/src/components/hotkeyInputModal.ts @@ -44,9 +44,11 @@ export class HotkeyInputModalComponent { this.modalInstance.close(this.value) } }, 25) + this.hotkeys.disable() } ngOnDestroy () { + this.hotkeys.enable() clearInterval(this.keyTimeoutInterval) } diff --git a/app/src/services/hotkeys.ts b/app/src/services/hotkeys.ts index 1bd56d9c..94da9ec3 100644 --- a/app/src/services/hotkeys.ts +++ b/app/src/services/hotkeys.ts @@ -57,6 +57,7 @@ export class HotkeysService { matchedHotkey = new EventEmitter() globalHotkey = new EventEmitter() private currentKeystrokes: EventBufferEntry[] = [] + private disabledLevel = 0 constructor( private zone: NgZone, @@ -98,11 +99,13 @@ export class HotkeysService { this.currentKeystrokes.push({ event: nativeEvent, time: performance.now() }) this.zone.run(() => { - let matched = this.getCurrentFullyMatchedHotkey() - if (matched) { - console.log('Matched hotkey', matched) - this.matchedHotkey.emit(matched) - this.clearCurrentKeystrokes() + if (this.isEnabled()) { + let matched = this.getCurrentFullyMatchedHotkey() + if (matched) { + console.log('Matched hotkey', matched) + this.matchedHotkey.emit(matched) + this.clearCurrentKeystrokes() + } } this.key.emit(nativeEvent) }) @@ -179,4 +182,17 @@ export class HotkeysService { getHotkeyDescription (id: string) : HotkeyDescription { return HOTKEYS.filter((x) => x.id == id)[0] } + + enable () { + this.disabledLevel-- + } + + disable () { + this.disabledLevel++ + } + + isEnabled () { + return this.disabledLevel == 0 + } + } diff --git a/package.json b/package.json index ca7e34fc..6e83b31c 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "typings": "2.0.0", "url-loader": "^0.5.7", "val-loader": "^0.5.0", - "webpack": "2.2.0-rc.0" + "webpack": "2.2.0-rc.4" }, "build": { "appId": "com.elements.benchmark",