ngx-edu-sharing-ui 0.7.0

package/src/lib/translations/translation-loader.ts

@@ -0,0 +1,189 @@
+import { HttpClient } from '@angular/common/http';
+import { TranslateLoader } from '@ngx-translate/core';
+import { ConfigService } from 'ngx-edu-sharing-api';
+import * as rxjs from 'rxjs';
+import { concat, Observable, of } from 'rxjs';
+import { catchError, first, map, reduce } from 'rxjs/operators';
+import { EduSharingUiConfiguration } from '../edu-sharing-ui-configuration';
+import { LANGUAGES } from './languages';
+import { TranslationSource } from './translation-source';
+
+export const TRANSLATION_LIST = [
+    'common',
+    'admin',
+    'recycle',
+    'workspace',
+    'search',
+    'collections',
+    'login',
+    'permissions',
+    'oer',
+    'messages',
+    'register',
+    'profiles',
+    'services',
+    'stream',
+    'override',
+];
+
+type Dictionary = { [key: string]: string | Dictionary };
+
+export class TranslationLoader implements TranslateLoader {
+    static create(
+        http: HttpClient,
+        configService: ConfigService,
+        configuration: EduSharingUiConfiguration,
+    ) {
+        return new TranslationLoader(http, configService, configuration);
+    }
+
+    private constructor(
+        private http: HttpClient,
+        private configService: ConfigService,
+        private configuration: EduSharingUiConfiguration,
+        private prefix: string = 'assets/i18n',
+        private suffix: string = '.json',
+    ) {}
+
+    // If you need to configure this, define an injectable configuration object. See
+    // https://angular.io/guide/dependency-injection-providers#injecting-a-configuration-object.
+    private readonly source: TranslationSource = TranslationSource.Auto;
+
+    /**
+     * Gets the translations from the server
+     */
+    getTranslation(lang: string): Observable<Dictionary> {
+        if (lang === 'none') {
+            return of({});
+        }
+        this.configService.setLocale(LANGUAGES[lang]);
+        return rxjs
+            .forkJoin({
+                originalTranslations: this.getOriginalTranslations(lang).pipe(
+                    // Default to empty dictionary if we got nothing
+                    map((translations) => translations || {}),
+                ),
+                translationOverrides: this.configService
+                    .observeTranslationOverrides()
+                    .pipe(first()),
+            })
+            .pipe(
+                map(({ originalTranslations, translationOverrides }) =>
+                    // FIXME: This will alter the object returned by `getOriginalTranslations`.
+                    this.applyOverrides(originalTranslations, translationOverrides),
+                ),
+                map((translations) => this.replaceGenderCharacter(translations)),
+                catchError((error, obs) => {
+                    console.error(error);
+                    return of(error);
+                }),
+            );
+    }
+
+    private getOriginalTranslations(lang: string): Observable<Dictionary> {
+        switch (this.getSource()) {
+            case 'repository':
+                return this.configService.observeDefaultTranslations().pipe(first());
+            case 'local':
+                return this.mergeTranslations(this.fetchTranslations(lang));
+        }
+    }
+
+    private getSource(): 'repository' | 'local' {
+        if (
+            (this.configuration.production && this.source === TranslationSource.Auto) ||
+            this.source === TranslationSource.Repository
+        ) {
+            return 'repository';
+        } else {
+            return 'local';
+        }
+    }
+
+    /**
+     * Returns an array of Observables that will each fetch a translations json
+     * file.
+     */
+    private fetchTranslations(lang: string): Observable<Dictionary>[] {
+        return TRANSLATION_LIST.map(
+            (translation) => `${this.prefix}/${translation}/${lang}${this.suffix}`,
+        ).map((url) => this.http.get(url) as Observable<Dictionary>);
+    }
+
+    /**
+     * Takes an array as returned by `fetchTranslations` and converts it to an
+     * Observable that yields a single Dictionary object.
+     */
+    private mergeTranslations(translations: Observable<Dictionary>[]): Observable<Dictionary> {
+        return concat(...translations).pipe(
+            reduce((acc: Dictionary, value: Dictionary) => {
+                for (const prop in value) {
+                    if (value.hasOwnProperty(prop)) {
+                        acc[prop] = value[prop];
+                    }
+                }
+                return acc;
+            }, {}),
+        );
+    }
+
+    /**
+     * Applies `overrides` to `translations` and returns `translations`.
+     *
+     * Example:
+     *  translations = { foo: { bar: 'bar' } }
+     *  overrides = { 'foo.bar': 'baz' }
+     * results in
+     *  translations = { foo: {bar: 'baz' } }
+     *
+     * @param translations Nested translations object.
+     * @param overrides Flat object with dots (.) in keys interpreted as
+     * separators.
+     */
+    private applyOverrides(
+        translations: Dictionary,
+        overrides: { [key: string]: string },
+    ): Dictionary {
+        if (overrides) {
+            for (const [key, value] of Object.entries<string>(overrides)) {
+                let ref = translations;
+                const path = key.split('.');
+                const pathLast = path.pop();
+                for (const item of path) {
+                    if (!ref[item]) {
+                        ref[item] = {};
+                    }
+                    const refItem = ref[item];
+                    if (typeof refItem === 'string') {
+                        throw new Error('Trying to override leave with sub tree: ' + path);
+                    }
+                    ref = refItem;
+                }
+                ref[pathLast] = value;
+            }
+        }
+        return translations;
+    }
+
+    private replaceGenderCharacter(translations: Dictionary, path: string[] = []) {
+        for (let key of Object.keys(translations)) {
+            if (typeof translations[key] === 'string') {
+                // DO NOT REMOVE (required for csv language dumping)
+                /*console.log(CsvHelper.fromArray(null, [[
+                        path.concat(key).join('.'), translations[key]
+                ]]));*/
+                translations[key] = (translations[key] as string).replace(
+                    /{{GENDER_SEPARATOR}}/g,
+                    '*',
+                );
+            } else {
+                translations[key] = this.replaceGenderCharacter(
+                    translations[key] as Dictionary,
+                    path.concat(key),
+                );
+            }
+        }
+
+        return translations;
+    }
+}

package/src/lib/translations/translation-source.ts

@@ -0,0 +1,9 @@
+/** The preferred source for language files. */
+export enum TranslationSource {
+    /** In dev mode, local files are used and in production, repository files are used (default). */
+    Auto,
+    /** Local files (assets/i18n) are used. */
+    Local,
+    /** Repository files are used. */
+    Repository,
+}

package/src/lib/translations/translations.module.ts

@@ -0,0 +1,49 @@
+import { HttpClient } from '@angular/common/http';
+import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
+import { MissingTranslationHandler, TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { ConfigService } from 'ngx-edu-sharing-api';
+import { FallbackTranslationHandler } from './fallback-translation-handler';
+import { TranslationLoader } from './translation-loader';
+import { EduSharingUiConfiguration } from '../edu-sharing-ui-configuration';
+
+/**
+ * Import this module once in the app module to provide the `TranslateService`.
+ *
+ * Export `TranslateModule` in the shared module to provide directives and pipes.
+ */
+@NgModule({
+    declarations: [],
+    imports: [
+        TranslateModule.forRoot({
+            loader: {
+                provide: TranslateLoader,
+                useFactory: TranslationLoader.create,
+                deps: [HttpClient, ConfigService, EduSharingUiConfiguration],
+            },
+            missingTranslationHandler: {
+                provide: MissingTranslationHandler,
+                useClass: FallbackTranslationHandler,
+            },
+        }),
+    ],
+})
+export class TranslationsModule {
+    static forRoot(): ModuleWithProviders<TranslationsModule> {
+        return {
+            ngModule: TranslationsModule,
+            providers: [],
+        };
+    }
+
+    constructor(@Optional() @SkipSelf() parentModule?: TranslationsModule) {
+        if (parentModule) {
+            console.warn(
+                'TranslationsModule is already loaded. Import it in the AppModule only',
+                parentModule,
+            );
+            /*throw new Error(
+                'TranslationsModule is already loaded. Import it in the AppModule only',
+            );*/
+        }
+    }
+}

package/src/lib/translations/translations.service.spec.ts

@@ -0,0 +1,152 @@
+import { fakeAsync } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { ConfigService, SessionStorageService } from 'ngx-edu-sharing-api';
+import * as rxjs from 'rxjs';
+import { TranslationsService } from './translations.service';
+
+class BridgeServiceStub {
+    isRunningCordova() {
+        return false;
+    }
+}
+
+class ConfigServiceStub {
+    get<T>(key: string, defaultValue?: T): Promise<T> {
+        return Promise.resolve(defaultValue);
+    }
+    instant<T>(key: string, defaultValue?: T): T {
+        return defaultValue;
+    }
+    getLocator() {
+        return {
+            getBridge: () => new BridgeServiceStub(),
+        };
+    }
+}
+
+class SessionStorageServiceStub {
+    get(key: string) {
+        return rxjs.of(null);
+    }
+    set(key: string, value: string) {}
+}
+
+class ActivatedRouteStub {
+    queryParams = rxjs.of({});
+}
+
+describe('TranslationsService', () => {
+    describe('initialize', () => {
+        let translationsService: TranslationsService;
+        let translateServiceSpy: any;
+        let bridgeServiceStub: BridgeServiceStub;
+        let configurationServiceStub: ConfigServiceStub;
+        let sessionStorageServiceStub: SessionStorageServiceStub;
+        let activatedRouteStub: ActivatedRouteStub;
+
+        beforeEach(() => {
+            translateServiceSpy = jasmine.createSpyObj('TranslateService', [
+                'use',
+                'addLangs',
+                'getBrowserLang',
+                'setDefaultLang',
+                'getTranslation',
+            ]);
+            translateServiceSpy.getTranslation.and.callFake(() => rxjs.of(null));
+            translateServiceSpy.use.and.callFake(() => rxjs.of(null));
+            bridgeServiceStub = new BridgeServiceStub();
+            configurationServiceStub = new ConfigServiceStub();
+            sessionStorageServiceStub = new SessionStorageServiceStub();
+            activatedRouteStub = new ActivatedRouteStub();
+            translationsService = new TranslationsService(
+                configurationServiceStub as unknown as ConfigService,
+                activatedRouteStub as any as ActivatedRoute,
+                sessionStorageServiceStub as any as SessionStorageService,
+                translateServiceSpy as TranslateService,
+                null,
+            );
+        });
+
+        function callInitialize(): Promise<string> {
+            return new Promise((resolve) => {
+                fakeAsync(() => {
+                    translationsService.initialize().subscribe(() => {
+                        resolve(translationsService.getLanguage());
+                    }, fail);
+                })();
+            });
+        }
+
+        it('should use default languages', async () => {
+            const configurationServiceSpy = spyOn(
+                configurationServiceStub,
+                'get',
+            ).and.callThrough();
+            await callInitialize();
+            expect(configurationServiceSpy.calls.count()).toBe(
+                1,
+                'configurationService.get was called once',
+            );
+            expect(configurationServiceSpy.calls.mostRecent().args).toEqual([
+                'supportedLanguages',
+                ['de', 'de-informal', 'en', 'none'], // Translation.DEFAULT_SUPPORTED_LANGUAGES
+            ]);
+        });
+
+        it('should default to "de"', async () => {
+            const lang = await callInitialize();
+            expect(lang).toBe('de');
+        });
+
+        it('should call translate.use()', async () => {
+            await callInitialize();
+            expect(translateServiceSpy.use.calls.count()).toBe(1);
+            expect(translateServiceSpy.use.calls.mostRecent().args).toEqual(['de']);
+        });
+
+        it('should call translate.setDefaultLang()', async () => {
+            await callInitialize();
+            expect(translateServiceSpy.setDefaultLang.calls.count()).toBe(1);
+            expect(translateServiceSpy.setDefaultLang.calls.mostRecent().args).toEqual(['de']);
+        });
+
+        it('should use browserLang', async () => {
+            translateServiceSpy.getBrowserLang.and.returnValue('en');
+            const lang = await callInitialize();
+            expect(lang).toBe('en');
+        });
+
+        it('should use sessionStorage', async () => {
+            // Should be overridden by sessionStorage
+            translateServiceSpy.getBrowserLang.and.returnValue('de');
+            const storageGetSpy = spyOn(sessionStorageServiceStub, 'get').and.returnValue(
+                rxjs.of('en'),
+            );
+            const lang = await callInitialize();
+            expect(storageGetSpy.calls.count()).toBe(1, 'storage.get was called once');
+            expect(storageGetSpy.calls.mostRecent().args).toEqual(['language']);
+            expect(lang).toBe('en');
+        });
+
+        it('should store used language in sessionStorage', async () => {
+            translateServiceSpy.getBrowserLang.and.returnValue('en');
+            const storageSetSpy = spyOn(sessionStorageServiceStub, 'set');
+            await callInitialize();
+            expect(storageSetSpy.calls.count()).toBe(1, 'storage.set was called once');
+            expect(storageSetSpy.calls.mostRecent().args).toEqual(['language', 'en']);
+        });
+
+        it('should use queryParams', async () => {
+            // Should be overridden by queryParams
+            translateServiceSpy.getBrowserLang.and.returnValue('de');
+            // Should also be overridden by queryParams
+            const storageGetSpy = spyOn(sessionStorageServiceStub, 'get').and.returnValue(
+                rxjs.of('de'),
+            );
+            activatedRouteStub.queryParams = rxjs.of({ locale: 'en' });
+            const lang = await callInitialize();
+            expect(lang).toBe('en');
+        });
+    });
+});

package/src/lib/translations/translations.service.ts

@@ -0,0 +1,188 @@
+import { Injectable, Optional } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+import { BehaviorSubject, from, Observable, of as observableOf, of } from 'rxjs';
+import { first, map, switchMap, tap } from 'rxjs/operators';
+import { LANGUAGES } from './languages';
+import { ConfigService, SessionStorageService } from 'ngx-edu-sharing-api';
+import { AppService } from '../services/abstract/app.service';
+
+// 'none' means that only labels should be shown (for dev)
+const DEFAULT_SUPPORTED_LANGUAGES = ['de', 'de-informal', 'en', 'none'];
+
+@Injectable({ providedIn: 'root' })
+export class TranslationsService {
+    private language: string;
+    private languageLoaded = new BehaviorSubject(false);
+
+    constructor(
+        private config: ConfigService,
+        private route: ActivatedRoute,
+        private storage: SessionStorageService,
+        private translate: TranslateService,
+        @Optional() private appService: AppService,
+    ) {}
+
+    /**
+     * Determines and configures the language to use and triggers loading of translations with
+     * ngx-translate.
+     *
+     * Call this once in the app component.
+     */
+    initialize(): Observable<void> {
+        const supportedLanguages$ = from(
+            this.config.get('supportedLanguages', DEFAULT_SUPPORTED_LANGUAGES),
+        );
+        if (this.appService?.isRunningApp()) {
+            return supportedLanguages$.pipe(
+                switchMap((supportedLanguages: string[]) =>
+                    this.initializeCordova(supportedLanguages),
+                ),
+                map(() => void 0),
+            );
+        }
+        supportedLanguages$
+            .pipe(
+                tap((supportedLanguages) => {
+                    if (!supportedLanguages.includes('none')) {
+                        supportedLanguages.push('none');
+                    }
+                }),
+                tap((supportedLanguages: string[]) => this.translate.addLangs(supportedLanguages)),
+                // Select queryParams.locale if set meaningfully
+                switchMap((supportedLanguages: string[]) =>
+                    this.route.queryParams.pipe(
+                        first(),
+                        map((params) => {
+                            let selectedLanguage: string = null;
+                            if (supportedLanguages.indexOf(params.locale) !== -1) {
+                                selectedLanguage = params.locale;
+                            } else if (params.locale) {
+                                console.warn(
+                                    `Url requested language ${params.locale}, ` +
+                                        'but it was not found or is not configured in the allowed languages: ' +
+                                        supportedLanguages,
+                                );
+                            }
+                            return {
+                                supportedLanguages,
+                                selectedLanguage,
+                            };
+                        }),
+                    ),
+                ),
+                // Select storage.get('language') if set meaningfully
+                switchMap(({ supportedLanguages, selectedLanguage }) => {
+                    if (selectedLanguage) {
+                        return observableOf({
+                            supportedLanguages,
+                            selectedLanguage,
+                            useStored: false,
+                        });
+                    } else {
+                        return this.storage.get('language').pipe(
+                            map((storageLanguage) => {
+                                let useStored = false;
+                                if (supportedLanguages.indexOf(storageLanguage) !== -1) {
+                                    selectedLanguage = storageLanguage;
+                                    useStored = true;
+                                }
+                                return {
+                                    supportedLanguages,
+                                    selectedLanguage,
+                                    useStored,
+                                };
+                            }),
+                        );
+                    }
+                }),
+                // Use browser language if available, otherwise fall back to the first supported
+                // language.
+                map(({ supportedLanguages, selectedLanguage, useStored }) => {
+                    if (selectedLanguage) {
+                        return {
+                            supportedLanguages,
+                            selectedLanguage,
+                            useStored,
+                        };
+                    } else if (
+                        // Select browser language if set meaningfully
+                        supportedLanguages.indexOf(this.translate.getBrowserLang()) !== -1
+                    ) {
+                        return {
+                            supportedLanguages,
+                            selectedLanguage: this.translate.getBrowserLang(),
+                            useStored,
+                        };
+                    } else {
+                        // Select first supported language
+                        return {
+                            supportedLanguages,
+                            selectedLanguage: supportedLanguages[0],
+                            useStored,
+                        };
+                    }
+                }),
+                // Set fallback language
+                tap(({ supportedLanguages, selectedLanguage, useStored }) => {
+                    if (!useStored) {
+                        this.storage.set('language', selectedLanguage);
+                    }
+                    if (selectedLanguage === 'none') {
+                        this.translate.setDefaultLang('none');
+                    } else if (selectedLanguage === 'de-informal') {
+                        this.translate.setDefaultLang('de');
+                    } else {
+                        this.translate.setDefaultLang(supportedLanguages[0]);
+                    }
+                }),
+                // Configure `ngx-translate` to use the determined language and trigger loading of
+                // translations.
+                switchMap(({ selectedLanguage }) => {
+                    // console.log('language used: ' + selectedLanguage);
+                    this.language = selectedLanguage;
+                    return this.translate.use(selectedLanguage).pipe(map(() => void 0));
+                }),
+            )
+            .subscribe(() => {
+                // Notify anyone waiting for translations to be loaded.
+                this.languageLoaded.next(true);
+            });
+        return this.waitForInit();
+    }
+
+    private async initializeCordova(supportedLanguages = DEFAULT_SUPPORTED_LANGUAGES) {
+        this.translate.addLangs(supportedLanguages);
+        let language = supportedLanguages[0];
+        this.translate.setDefaultLang(language);
+        this.translate.use(language);
+        this.language = language;
+        const data = await this.appService.getLanguage();
+        if (supportedLanguages.indexOf(data) != -1) {
+            language = data;
+        }
+        this.language = language;
+        this.translate.use(language).subscribe(() => {
+            this.languageLoaded.next(true);
+        });
+        // this.translate.getTranslation(language).subscribe(() => {
+        // });
+        return this.waitForInit();
+    }
+
+    waitForInit(): Observable<void> {
+        return this.languageLoaded.pipe(
+            first((languageLoaded) => languageLoaded),
+            map(() => void 0),
+        );
+    }
+
+    /** Same as `translate.currentLang`. */
+    getLanguage(): string {
+        return this.language;
+    }
+
+    getISOLanguage(): string {
+        return LANGUAGES[this.language];
+    }
+}

package/src/lib/types/accessibillity.ts

@@ -0,0 +1,15 @@
+export class AccessibilitySettings {
+    toastMode: 'important' | 'all' = 'all';
+    toastDuration: ToastDuration = ToastDuration.Seconds_5;
+    contrastMode = false;
+    indicatorIcons = true;
+}
+export enum ToastDuration {
+    Seconds_3 = 3,
+    Seconds_5 = 5,
+    Seconds_8 = 8,
+    Seconds_15 = 15,
+    Seconds_30 = 30,
+    Seconds_60 = 60,
+    Infinite = null,
+}

package/src/lib/types/api-models.ts

@@ -0,0 +1,4 @@
+import { Node } from 'ngx-edu-sharing-api';
+export interface VirtualNode extends Node {
+    virtual: boolean;
+}

package/src/lib/types/drag-drop.ts

@@ -0,0 +1,22 @@
+import { Node } from 'ngx-edu-sharing-api';
+
+export type DropAction = 'move' | 'copy' | 'link';
+
+export interface DragData<T = unknown> {
+    draggedNodes: Node[];
+    action: DropAction;
+    target: T;
+}
+export interface DropTargetState {
+    action: DropAction;
+    canDrop: CanDrop;
+}
+
+export interface CanDrop {
+    /** Whether the target is a valid drop target for the dragged nodes and the given action. */
+    accept: boolean;
+    /** When denied, whether to explicitly mark the target when hovered. */
+    denyExplicit?: boolean;
+    /** A message to show when tried to drop on a denied target. */
+    denyReason?: string;
+}

package/src/lib/types/keyboard-shortcuts.ts

@@ -0,0 +1,29 @@
+export type Modifier = 'Ctrl/Cmd' | 'Shift' | 'Alt';
+
+export interface KeyboardShortcutCondition {
+    modifiers?: Modifier[];
+    keyCode: string;
+    ignoreWhen?: (event: KeyboardEvent) => boolean;
+}
+export interface KeyboardShortcut extends KeyboardShortcutCondition {
+    callback: () => void;
+}
+
+export function matchesShortcutCondition(
+    event: KeyboardEvent,
+    condition: KeyboardShortcutCondition,
+): boolean {
+    return (
+        event.code === condition.keyCode &&
+        matchesModifiers(event, condition.modifiers) &&
+        !condition.ignoreWhen?.(event)
+    );
+}
+
+function matchesModifiers(event: KeyboardEvent, modifiers: Modifier[] = []): boolean {
+    return (
+        modifiers.includes('Alt') === event.altKey &&
+        modifiers.includes('Shift') === event.shiftKey &&
+        modifiers.includes('Ctrl/Cmd') === (event.ctrlKey || event.metaKey)
+    );
+}