input event, not change

This commit is contained in:
Kyle Spearrin 2018-02-24 15:19:16 -05:00
parent 39e1d0865b
commit e32b01edc9
2 changed files with 21 additions and 7 deletions

View File

@ -27,7 +27,7 @@
<div class="box-content-row box-content-row-slider" appBoxRow>
<label for="length">{{'length' | i18n}}</label>
<input id="length" type="number" min="5" max="128" [(ngModel)]="options.length"
(change)="saveOptions()">
(input)="saveOptions()">
<input id="lengthRange" type="range" min="5" max="128" step="1"
[(ngModel)]="options.length">
</div>
@ -57,12 +57,12 @@
<div class="box-content condensed">
<div class="box-content-row box-content-row-input" appBoxRow>
<label for="min-number">{{'minNumbers' | i18n}}</label>
<input id="min-number" type="number" min="0" max="9" (change)="saveOptions()"
<input id="min-number" type="number" min="0" max="9" (input)="saveOptions()"
[(ngModel)]="options.minNumber">
</div>
<div class="box-content-row box-content-row-input" appBoxRow>
<label for="min-special">{{'minSpecial' | i18n}}</label>
<input id="min-special" type="number" min="0" max="9" (change)="saveOptions()"
<input id="min-special" type="number" min="0" max="9" (input)="saveOptions()"
[(ngModel)]="options.minSpecial">
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>

View File

@ -4,8 +4,10 @@ import { ToasterService } from 'angular2-toaster';
import { Angulartics2 } from 'angulartics2';
import {
ChangeDetectorRef,
Component,
EventEmitter,
NgZone,
Input,
OnInit,
Output,
@ -30,7 +32,8 @@ export class PasswordGeneratorComponent implements OnInit {
constructor(private passwordGenerationService: PasswordGenerationService, private analytics: Angulartics2,
private platformUtilsService: PlatformUtilsService, private i18nService: I18nService,
private toasterService: ToasterService) { }
private toasterService: ToasterService, private ngZone: NgZone,
private changeDetectorRef: ChangeDetectorRef) { }
async ngOnInit() {
this.options = await this.passwordGenerationService.getOptions();
@ -44,15 +47,19 @@ export class PasswordGeneratorComponent implements OnInit {
// Save password once the slider stop moving.
slider.addEventListener('change', async (e) => {
e.preventDefault();
this.saveOptions(false);
this.functionWithChangeDetection(() => {
this.saveOptions(false);
});
await this.passwordGenerationService.addHistory(this.password);
this.analytics.eventTrack.next({ action: 'Regenerated Password' });
});
// Regenerate while slider moving
slider.addEventListener('input', (e) => {
e.preventDefault();
this.normalizeOptions();
this.password = this.passwordGenerationService.generatePassword(this.options);
this.functionWithChangeDetection(() => {
this.normalizeOptions();
this.password = this.passwordGenerationService.generatePassword(this.options);
});
});
}
}
@ -126,4 +133,11 @@ export class PasswordGeneratorComponent implements OnInit {
this.options.minSpecial = this.options.length - this.options.minNumber;
}
}
private functionWithChangeDetection(func: Function) {
this.ngZone.run(async () => {
func();
this.changeDetectorRef.detectChanges();
});
}
}