ngx-edu-sharing-ui 0.7.0 → 9.0.1

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

@@ -1,32 +0,0 @@
-@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

@@ -1,136 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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/keyboard-shortcuts.service.ts

@@ -1,10 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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/accessibility.service.ts

@@ -1,101 +0,0 @@
-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),
-            ),
-        );
-}