diff --git a/CHANGELOG.md b/CHANGELOG.md index bc5df3f..f9e6e1e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Added - toggle playback with space bar +- persist settings in browser storage ## [0.1.1] - 2023-03-31 diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index 382c190..46a759f 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -1,4 +1,4 @@ -import { ChangeDetectorRef, Component, HostListener, OnInit, ViewChild } from '@angular/core'; +import { ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { IonContent } from '@ionic/angular'; import { OpenSheetMusicDisplay } from 'opensheetmusicdisplay'; @@ -31,7 +31,12 @@ export class HomePageComponent implements OnInit { if (event.key == ' ') { if (this.running) this.osmdCursorStop(); else this.osmdPractice(); - } else alert(JSON.stringify(event)); + } + } + + @HostListener('window:beforeunload', ['$event']) + onUnload(): void { + this.settings.persist(); } constructor( diff --git a/src/app/services/settings.service.ts b/src/app/services/settings.service.ts index aa8651b..c4b25fe 100644 --- a/src/app/services/settings.service.ts +++ b/src/app/services/settings.service.ts @@ -21,13 +21,28 @@ export class SettingsService { speed: number = 100; backgroundColor: string = '#ffffff'; - constructor(public translate: TranslateService) { - this.translate.use(this.language); + constructor(public _translate: TranslateService) { + this._translate.use(this.language); + + // initialize values if they were previously persisted + for (let p in this) { + if (p.startsWith('_')) continue; + let store = localStorage.getItem(p); + if (store !== null) this[p] = JSON.parse(store); + } + } + + // save properties to local storage + persist() { + for (let p in this) { + if (p.startsWith('_')) continue; + localStorage.setItem(p, JSON.stringify(this[p])); + } } useLanguage(event: any): void { this.language = event.detail.value; - this.translate.use(event.detail.value); + this._translate.use(event.detail.value); } updateZoom(value: number, osmd: OpenSheetMusicDisplay): void {