use input change events on slider

This commit is contained in:
Kyle Spearrin 2018-02-26 08:47:35 -05:00
parent 2423e96b34
commit 769d7c606f
2 changed files with 11 additions and 21 deletions

View File

@ -29,7 +29,7 @@
<input id="length" type="number" min="5" max="128" [(ngModel)]="options.length"
(input)="saveOptions()">
<input id="lengthRange" type="range" min="5" max="128" step="1"
[(ngModel)]="options.length">
[(ngModel)]="options.length" (change)="sliderChanged()" (input)="sliderInput()">
</div>
<div class="box-content-row box-content-row-checkbox" appBoxRow>
<label for="uppercase">A-Z</label>

View File

@ -41,27 +41,17 @@ export class PasswordGeneratorComponent implements OnInit {
this.password = this.passwordGenerationService.generatePassword(this.options);
this.analytics.eventTrack.next({ action: 'Generated Password' });
await this.passwordGenerationService.addHistory(this.password);
}
const slider = document.querySelector('#lengthRange');
if (slider) {
// Save password once the slider stop moving.
slider.addEventListener('change', async (e) => {
e.preventDefault();
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.functionWithChangeDetection(() => {
this.normalizeOptions();
this.password = this.passwordGenerationService.generatePassword(this.options);
});
});
}
async sliderChanged() {
this.saveOptions(false);
await this.passwordGenerationService.addHistory(this.password);
this.analytics.eventTrack.next({ action: 'Regenerated Password' });
}
async sliderInput() {
this.normalizeOptions();
this.password = this.passwordGenerationService.generatePassword(this.options);
}
async saveOptions(regenerate: boolean = true) {