ngx-edu-sharing-ui 0.7.0

package/src/lib/node-url/node-url.component.scss

@@ -0,0 +1,32 @@
+@import '../../../assets/scss/mixins';
+
+:host {
+    // Draw focus highlight above content background
+    position: relative;
+    // Make `overflow: hidden` for ripples work for `a`
+    display: flex;
+    & > * {
+        flex-grow: 1;
+    }
+    > a {
+        text-decoration: none;
+    }
+}
+
+// Handle keyboard focus.
+//
+// If doing this here becomes a problem, consider introducing an input parameter to disable this.
+.cdk-keyboard-focused {
+    @include setGlobalKeyboardFocus();
+}
+
+button {
+    background-color: unset;
+    border: unset;
+    padding: unset;
+    text-align: unset;
+}
+
+div.node-url-wrapper {
+    cursor: pointer;
+}

package/src/lib/node-url/node-url.component.ts

@@ -0,0 +1,136 @@
+import {
+    AfterViewInit,
+    Component,
+    ElementRef,
+    EventEmitter,
+    Input,
+    Output,
+    ViewChild,
+} from '@angular/core';
+import { Node } from 'ngx-edu-sharing-api';
+import { NodeHelperService } from '../services/node-helper.service';
+
+// TODO: Decide if providing focus highlights and ripples with this component is a good idea. When
+// using `app-node-url` for cards, we might need highlights and ripples for the whole card while
+// `app-node-url` should only wrap the title since links with lots of content confuse screen
+// readers.
+
+const NODE_URL_TAG_NAME = 'es-node-url';
+
+@Component({
+    selector: NODE_URL_TAG_NAME,
+    templateUrl: 'node-url.component.html',
+    styleUrls: ['node-url.component.scss'],
+})
+export class NodeUrlComponent implements AfterViewInit {
+    @ViewChild('link') link: ElementRef<HTMLAnchorElement>;
+
+    @Input() node: Node;
+    @Input() nodes: Node[];
+    @Input() target: string;
+    @Input() scope: string;
+    /**
+     * custom query params to include
+     */
+    @Input() queryParams: { [key: string]: string | number | boolean } = {};
+    /**
+     * link: a element
+     * button: button element
+     * wrapper: div element with behavior "like" a link
+     */
+    @Input() mode: 'link' | 'button' | 'wrapper' = 'link';
+    @Input() disabled = false;
+    /**
+     * Show the ripple effect even when disabled.
+     *
+     * @deprecated Temporary workaround for list-table, which *sometimes* uses it's on click
+     * bindings.
+     */
+    @Input() alwaysRipple = false;
+    @Input('aria-describedby') ariaDescribedby: string;
+    @Input('aria-label') ariaLabel = true;
+
+    @Output() buttonClick = new EventEmitter<MouseEvent>();
+
+    /**
+     * Whether this instance of `NodeUrl` is nested inside another `NodeUrl`.
+     */
+    // We use nested `NodeUrl`s for a11y where we have a `NodeUrl` in wrapper mode to maximize
+    // clickable area and one in  link mode that only contains the title. We only want the outmost
+    // `NodeUrl` to apply the ripple effect.
+    //
+    // Note that nesting `NodeUrl`s is only necessary when we want to provide hover effects on parts
+    // of the outer `NodeUrl`. If we don't need that, it would be easier to attach a pseudo `:after`
+    // element to the inner `NodeUrl` that expands its click area.
+    isNested: boolean;
+
+    constructor(
+        private nodeHelper: NodeHelperService,
+        private elementRef: ElementRef<HTMLElement>,
+    ) {}
+
+    ngAfterViewInit(): void {
+        setTimeout(() => {
+            this.isNested = this.getIsNested();
+        });
+    }
+
+    getState() {
+        return {
+            scope: this.scope,
+        };
+    }
+
+    get(mode: 'routerLink' | 'queryParams'): any {
+        const result: any = this.nodeHelper.getNodeLink(mode, this.node);
+        if (mode === 'queryParams' && this.queryParams) {
+            Object.keys(this.queryParams).forEach((k) => (result[k] = this.queryParams[k]));
+        }
+        return result;
+    }
+
+    focus(): void {
+        this.link.nativeElement.focus();
+    }
+
+    clickWrapper(event: MouseEvent) {
+        const eventCopy = copyClickEvent(event);
+        this.link.nativeElement.dispatchEvent(eventCopy);
+        event.preventDefault();
+    }
+
+    private getIsNested(): boolean {
+        let ancestor = this.elementRef.nativeElement.parentElement;
+        while (ancestor) {
+            if (ancestor.tagName === NODE_URL_TAG_NAME.toUpperCase()) {
+                return true;
+            }
+            ancestor = ancestor.parentElement;
+        }
+        return false;
+    }
+}
+
+function copyClickEvent(event: MouseEvent): MouseEvent {
+    // On Firefox, a middle click via neither the 'click', nor the 'auxclick' event cause a new tab
+    // to be opened when triggered programmatically. As a workaround, we simulate a ctrl click
+    // instead of a middle click. This matches Firefox's defaults, but we cannot account for
+    // changed middle-click behavior.
+    if (event.type === 'auxclick' && event.button === 1 && isFirefox()) {
+        return copyClickEvent({ ...event, type: 'click', ctrlKey: true, button: 0 });
+    }
+    // It would seem better to use `event.type` instead of hard-coding 'click', but that doesn't
+    // have the desired effect for non-click events when dispatched.
+    return new MouseEvent('click', {
+        cancelable: true,
+        button: event.button,
+        ctrlKey: event.ctrlKey,
+        shiftKey: event.shiftKey,
+        altKey: event.altKey,
+        metaKey: event.metaKey,
+    });
+}
+
+function isFirefox(): boolean {
+    return navigator.userAgent.includes('Firefox');
+}

package/src/lib/pipes/file-size.pipe.ts

@@ -0,0 +1,24 @@
+import { PipeTransform, Pipe } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Pipe({ name: 'formatSize' })
+export class FormatSizePipe implements PipeTransform {
+    constructor(private translate: TranslateService) {}
+
+    transform(value: any, args: string[] = null): string {
+        let names = ['bytes', 'KB', 'MB', 'GB', 'TB'];
+        let i = 0;
+        if (isNaN(value)) return value;
+        if (value == null) value = 0;
+        while (value >= 1024 && i < names.length) {
+            value /= 1024;
+            i++;
+        }
+        //return value+" "+names[i];
+        return (
+            value.toLocaleString(this.translate.currentLang, { maximumFractionDigits: 1 }) +
+            ' ' +
+            names[i]
+        );
+    }
+}

package/src/lib/pipes/format-date.pipe.ts

@@ -0,0 +1,39 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import * as rxjs from 'rxjs';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { DateHelper, FormatOptions } from '../util/DateHelper';
+
+@Pipe({ name: 'formatDate' })
+export class FormatDatePipe implements PipeTransform {
+    constructor(private translate: TranslateService) {}
+
+    transform(
+        value: Date | number | string,
+        args?: { time?: boolean; date?: boolean; relative?: boolean },
+    ): string;
+    transform(
+        value: Date | number | string,
+        args: { time?: boolean; date?: boolean; relative?: boolean; async: true },
+    ): Observable<string>;
+    transform(
+        value: Date | number | string,
+        args: { time?: boolean; date?: boolean; relative?: boolean; async?: boolean } = null,
+    ): string | Observable<string> {
+        if (!value) {
+            return args?.async ? rxjs.of('') : '';
+        }
+        let options = new FormatOptions();
+        if (args && args.time != null) options.showAlwaysTime = args.time;
+        if (args && args.date != null) options.showDate = args.date;
+        if (args && args.relative !== null) options.useRelativeLabels = args.relative;
+        if (args?.async) {
+            return this.translate
+                .get('dummy') // Wait for the translation service to be ready
+                .pipe(map(() => DateHelper.formatDate(this.translate, value, options)));
+        } else {
+            return DateHelper.formatDate(this.translate, value, options);
+        }
+    }
+}

package/src/lib/pipes/node-icon.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Node } from 'ngx-edu-sharing-api';
+import { RepoUrlService } from '../services/repo-url.service';
+
+@Pipe({ name: 'esNodeIcon' })
+export class NodeIconPipe implements PipeTransform {
+    constructor(private repoUrlService: RepoUrlService) {}
+    transform(node: Node) {
+        return this.repoUrlService.getRepoUrl(node.iconURL, node);
+    }
+}

package/src/lib/pipes/node-image-size.pipe.ts

@@ -0,0 +1,18 @@
+import { PipeTransform, Pipe } from '@angular/core';
+import { Node, RestConstants } from 'ngx-edu-sharing-api';
+
+@Pipe({ name: 'NodeImageSize' })
+export class NodeImageSizePipe implements PipeTransform {
+    transform(node: Node, args: any = null): string {
+        const width = parseFloat(node.properties[RestConstants.CCM_PROP_WIDTH]?.[0]);
+        const height = parseFloat(node.properties[RestConstants.CCM_PROP_HEIGHT]?.[0]);
+        const megapixel = Math.round((width * height) / 1000000);
+        if (width && height) {
+            if (megapixel > 1) {
+                return megapixel + ' Megapixel';
+            }
+            return Math.round(width) + 'x' + Math.round(height);
+        }
+        return '';
+    }
+}

package/src/lib/pipes/node-image.pipe.ts

@@ -0,0 +1,71 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+import { NetworkService } from 'ngx-edu-sharing-api';
+import * as rxjs from 'rxjs';
+import { Observable } from 'rxjs';
+import { map, switchMap } from 'rxjs/operators';
+import { NodeHelperService } from '../services/node-helper.service';
+import { Node } from 'ngx-edu-sharing-api';
+import { RepoUrlService } from '../services/repo-url.service';
+import { RestConstants } from 'ngx-edu-sharing-api';
+
+interface NodeImagePreferences {
+    crop?: boolean;
+    maxWidth?: number;
+    maxHeight?: number;
+    width?: number;
+    height?: number;
+}
+
+@Pipe({ name: 'esNodeImage' })
+export class NodeImagePipe implements PipeTransform {
+    constructor(
+        private nodeHelper: NodeHelperService,
+        private sanitizer: DomSanitizer,
+        private repoUrlService: RepoUrlService,
+        private networkApi: NetworkService,
+    ) {}
+
+    transform(node: Node, preferences: NodeImagePreferences): Observable<SafeResourceUrl> {
+        if (this.nodeHelper.isNodeCollection(node) && node.preview.isIcon) {
+            return null;
+        } else if (node.preview.data) {
+            return rxjs.of(
+                this.sanitizer.bypassSecurityTrustResourceUrl(
+                    'data:' + node.preview.mimetype + ';base64,' + node.preview.data,
+                ),
+            );
+        } else {
+            return this.getPreviewUrl(node, preferences);
+        }
+    }
+
+    private getPreviewUrl(node: Node, preferences: NodeImagePreferences): Observable<string> {
+        return this.isEduSharingNode(node).pipe(
+            switchMap(async (isEduSharingNode) => {
+                let url = await this.repoUrlService.getRepoUrl(node.preview.url, node);
+                if (isEduSharingNode) {
+                    url += Object.entries(preferences)
+                        .map(([key, value]) => `&${key}=${value}`)
+                        .join('');
+                }
+                return url;
+            }),
+        );
+    }
+
+    private isEduSharingNode(node: Node): Observable<boolean> {
+        return rxjs
+            .forkJoin([
+                this.networkApi.isFromHomeRepository(node),
+                this.networkApi.getRepositoryOfNode(node),
+            ])
+            .pipe(
+                map(
+                    ([isFromHomeRepository, repository]) =>
+                        isFromHomeRepository ||
+                        repository?.repositoryType === RestConstants.REPOSITORY_TYPE_ALFRESCO,
+                ),
+            );
+    }
+}

package/src/lib/pipes/node-person-name.pipe.ts

@@ -0,0 +1,41 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ConfigService, Person } from 'ngx-edu-sharing-api';
+
+@Pipe({ name: 'nodePersonName' })
+export class NodePersonNamePipe implements PipeTransform {
+    constructor(private config: ConfigService) {}
+    transform(person: Person | any, args: any = null): string {
+        let field = this.config.instant('userDisplayName', 'fullName');
+        if (person == null) return null;
+        if (field == 'authorityName') {
+            if (person.authorityName == null) field = 'fullName';
+            else return person.authorityName;
+        }
+        if (field == 'fullName') {
+            if (person.profile) {
+                return (
+                    (person.profile.firstName ? person.profile.firstName : '') +
+                    ' ' +
+                    (person.profile.lastName ? person.profile.lastName : '')
+                ).trim();
+            }
+            return (
+                (person.firstName ? person.firstName : '') +
+                ' ' +
+                (person.lastName ? person.lastName : '')
+            ).trim();
+        }
+        if (field == 'firstName' || field == 'lastName') {
+            if (person.profile) {
+                return person.profile[field];
+            }
+            return person[field];
+        }
+        if (field == 'email') {
+            if (person.profile && person.profile.email) return person.profile.email;
+            if (person.email == null) return person.mailbox;
+            return person.email;
+        }
+        return person[field];
+    }
+}

package/src/lib/pipes/node-title.pipe.ts

@@ -0,0 +1,12 @@
+import { PipeTransform, Pipe } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { Node } from 'ngx-edu-sharing-api';
+import { RestHelper } from '../util/rest-helper';
+
+@Pipe({ name: 'nodeTitle' })
+export class NodeTitlePipe implements PipeTransform {
+    transform(node: Node, args: string[] = null): string {
+        return RestHelper.getTitle(node);
+    }
+    constructor(private translate: TranslateService) {}
+}

package/src/lib/pipes/option-tooltip.pipe.ts

@@ -0,0 +1,32 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { OptionItem } from '../types/option-item';
+
+@Pipe({ name: 'optionTooltip' })
+export class OptionTooltipPipe implements PipeTransform {
+    constructor(private translate: TranslateService) {}
+
+    transform(option: OptionItem, args: string[] = null): string {
+        return (
+            this.translate.instant(option.name) +
+            (option.keyboardShortcut ? ' (' + this.getKeyInfo(option) + ')' : '')
+        );
+    }
+
+    getKeyInfo(option: OptionItem) {
+        if (!option.keyboardShortcut) {
+            return '';
+        }
+        const modifiers = [];
+        if (option.keyboardShortcut.modifiers?.includes('Shift')) {
+            modifiers.push(this.translate.instant('KEY_MODIFIER.SHIFT'));
+        }
+        if (option.keyboardShortcut.modifiers?.includes('Ctrl/Cmd')) {
+            modifiers.push(this.translate.instant('KEY_MODIFIER.CTRL'));
+        }
+        return (
+            (modifiers.length ? modifiers.join(' + ') + ' + ' : '') +
+            option.keyboardShortcut.keyCode.replace('Key', '')
+        );
+    }
+}

package/src/lib/pipes/replace-chars.pipe.ts

@@ -0,0 +1,21 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Pipe({ name: 'replaceChars' })
+export class ReplaceCharsPipe implements PipeTransform {
+    transform(value: string, args: any): string {
+        let i = 0;
+        if (!Array.isArray(args.search)) {
+            args.search = [args.search];
+        }
+        if (args.replace && !Array.isArray(args.replace)) {
+            args.replace = [args.replace];
+        }
+        for (let arg of args.search) {
+            value = value.split(arg).join(args.replace ? args.replace[i] : '');
+            i++;
+        }
+        return value;
+    }
+    constructor(private translate: TranslateService) {}
+}

package/src/lib/pipes/vcard-name.pipe.ts

@@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { VCard } from '../util/VCard';
+
+@Pipe({ name: 'vcardName' })
+export class VCardNamePipe implements PipeTransform {
+    constructor(private translate: TranslateService) {}
+    transform(authority: string, args: string[] = null): string {
+        return authority ? new VCard(authority).getDisplayName() : '';
+    }
+}

package/src/lib/services/abstract/app.service.ts

@@ -0,0 +1,4 @@
+export abstract class AppService {
+    abstract isRunningApp(): boolean;
+    abstract getLanguage(): Promise<string>;
+}

package/src/lib/services/abstract/keyboard-shortcuts.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+import { KeyboardShortcut } from '../../types/keyboard-shortcuts';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export abstract class KeyboardShortcutsService {
+    abstract register(shortcuts: KeyboardShortcut[], { until }: { until: Observable<void> }): void;
+
+    abstract shouldIgnoreShortcut(event: KeyboardEvent): boolean;
+}

package/src/lib/services/abstract/options-helper.service.ts

@@ -0,0 +1,29 @@
+import { OptionData, OptionsHelperComponents } from '../options-helper-data.service';
+import { OptionItem, Target } from '../../types/option-item';
+import { Node } from 'ngx-edu-sharing-api';
+
+export abstract class OptionsHelperService {
+    abstract wrapOptionCallbacks(data: OptionData): OptionData;
+
+    abstract refreshComponents(
+        components: OptionsHelperComponents,
+        data: OptionData,
+        refreshListOptions: boolean,
+    ): void;
+
+    abstract getAvailableOptions(
+        target: Target,
+        objects: Node[],
+        components: OptionsHelperComponents,
+        data: OptionData,
+    ): OptionItem[];
+
+    abstract pasteNode(components: OptionsHelperComponents, data: OptionData, nodes: Node[]): void;
+
+    abstract filterOptions(
+        options: OptionItem[],
+        target: Target,
+        data: OptionData,
+        objects: Node[] | any,
+    ): OptionItem[];
+}

package/src/lib/services/abstract/toast.service.ts

@@ -0,0 +1,5 @@
+export abstract class Toast {
+    abstract toast(message: string, translationParameters?: any): void;
+
+    abstract error(errorObject: any, message?: string): void;
+}

package/src/lib/services/accessibility.service.ts

@@ -0,0 +1,101 @@
+import { Injectable } from '@angular/core';
+import * as rxjs from 'rxjs';
+import { Observable } from 'rxjs';
+import { first, map } from 'rxjs/operators';
+import { AccessibilitySettings } from '../types/accessibillity';
+import { SessionStorageService } from 'ngx-edu-sharing-api';
+
+@Injectable({
+    providedIn: 'root',
+})
+export class AccessibilityService {
+    private static readonly STORAGE_PREFIX = 'accessibility_';
+
+    constructor(private storage: SessionStorageService) {}
+
+    async set(accessibilitySettings: Partial<AccessibilitySettings>): Promise<void> {
+        const currentValues = await this.observeAll().pipe(first()).toPromise();
+        const values = Object.entries(accessibilitySettings)
+            .filter(
+                ([key, value]) =>
+                    // check if value has been modified
+                    (currentValues as any)[key] !== value,
+            )
+            .reduce((acc, [key, value]) => {
+                acc[AccessibilityService.STORAGE_PREFIX + key] = value;
+                return acc;
+            }, {} as { [key: string]: any });
+        if (Object.keys(values).length > 0) {
+            return this.storage.setValues(values);
+        }
+    }
+
+    observe<K extends keyof AccessibilitySettings>(key: K): Observable<AccessibilitySettings[K]>;
+    observe<K extends keyof AccessibilitySettings>(
+        keys: K[],
+    ): Observable<Pick<AccessibilitySettings, K>>;
+    observe(): Observable<AccessibilitySettings>;
+    observe<K extends keyof AccessibilitySettings>(
+        keyOrKeys?: K | K[],
+    ): Observable<AccessibilitySettings[K] | Pick<AccessibilitySettings, K>> {
+        if (typeof keyOrKeys === 'string') {
+            return this.observeSingle(keyOrKeys);
+        } else if (Array.isArray(keyOrKeys)) {
+            return this.observeMultiple(keyOrKeys);
+        } else {
+            return this.observeAll();
+        }
+    }
+
+    private observeSingle<K extends keyof AccessibilitySettings>(
+        key: K,
+    ): Observable<AccessibilitySettings[K]> {
+        const defaultValues = new AccessibilitySettings();
+        return this.storage.observe(AccessibilityService.STORAGE_PREFIX + key, defaultValues[key]);
+    }
+
+    private observeMultiple<K extends keyof AccessibilitySettings>(
+        keys: K[],
+    ): Observable<Pick<AccessibilitySettings, K>> {
+        const defaultValues = new AccessibilitySettings();
+        return combineLatest(
+            keys.reduce((acc, key) => {
+                acc[key] = this.storage.observe(
+                    AccessibilityService.STORAGE_PREFIX + key,
+                    defaultValues[key],
+                );
+                return acc;
+            }, {} as { [key in keyof AccessibilitySettings]: Observable<AccessibilitySettings[key]> }),
+        );
+    }
+
+    private observeAll(): Observable<AccessibilitySettings> {
+        return this.observeMultiple(
+            Object.keys(new AccessibilitySettings()) as Array<keyof AccessibilitySettings>,
+        );
+    }
+}
+
+/**
+ * Rxjs.combineLatest on objects instead of arrays.
+ *
+ * This is a standard function in Rxjs 7, but we wrap it here for Rxjs 6.
+ */
+function combineLatest<T, K extends keyof T>(sources: {
+    [key in K]: Observable<T[key]>;
+}): Observable<T> {
+    return rxjs
+        .combineLatest(
+            Object.entries(sources).map(([key, source]) =>
+                (source as Observable<T[K]>).pipe(map((result) => ({ key, result }))),
+            ),
+        )
+        .pipe(
+            map((results) =>
+                results.reduce((acc, { key, result }) => {
+                    acc[key as K] = result;
+                    return acc;
+                }, {} as T),
+            ),
+        );
+}

package/src/lib/services/local-events.service.ts

@@ -0,0 +1,29 @@
+import { EventEmitter, Injectable } from '@angular/core';
+import { Node } from 'ngx-edu-sharing-api';
+
+/**
+ * An application-wide event broker.
+ */
+@Injectable({
+    providedIn: 'root',
+})
+export class LocalEventsService {
+    /**
+     * The metadata of one or more nodes have been updated.
+     *
+     * The emitted value is the array of updated nodes.
+     *
+     * The emitter should not be triggered with an empty array or null.
+     */
+    readonly nodesChanged = new EventEmitter<Node[]>();
+    /**
+     * One or more nodes have been moved to the recycle bin.
+     *
+     * The emitted value is the array of former nodes.
+     *
+     * The emitter should not be triggered with an empty array or null.
+     */
+    // FIXME: Maybe a `nodesMoved` emitter would make for sense for updating lists that used to
+    // include a node and lists that the node was moved to.
+    readonly nodesDeleted = new EventEmitter<Node[]>();
+}