ngx-edu-sharing-ui 0.7.0

package/src/lib/common/edu-sharing-ui-common.module.ts

@@ -0,0 +1,80 @@
+import { NgModule } from '@angular/core';
+import { NodeIconPipe } from '../pipes/node-icon.pipe';
+import { VCardNamePipe } from '../pipes/vcard-name.pipe';
+import { NodeImagePipe } from '../pipes/node-image.pipe';
+import { IconDirective } from '../directives/icon.directive';
+import { FormatSizePipe } from '../pipes/file-size.pipe';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { NodeImageSizePipe } from '../pipes/node-image-size.pipe';
+import { NodePersonNamePipe } from '../pipes/node-person-name.pipe';
+import { FormatDatePipe } from '../pipes/format-date.pipe';
+import { SortDropdownComponent } from '../sort-dropdown/sort-dropdown.component';
+import { CheckTextOverflowDirective } from '../directives/check-text-overflow.directive';
+import { MatMenuModule } from '@angular/material/menu';
+import { NodeTitlePipe } from '../pipes/node-title.pipe';
+import { SpinnerComponent } from '../spinner/spinner.component';
+import { NodeUrlComponent } from '../node-url/node-url.component';
+import { DropdownComponent } from '../dropdown/dropdown.component';
+import { RouterModule } from '@angular/router';
+import { MatRippleModule } from '@angular/material/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { OptionTooltipPipe } from '../pipes/option-tooltip.pipe';
+import { ReplaceCharsPipe } from '../pipes/replace-chars.pipe';
+import { ActionbarComponent } from '../actionbar/actionbar.component';
+import { BorderBoxObserverDirective } from '../directives/border-box-observer.directive';
+import { MatButtonModule } from '@angular/material/button';
+import { FocusStateDirective } from '../directives/focus-state.directive';
+
+@NgModule({
+    declarations: [
+        IconDirective,
+        CheckTextOverflowDirective,
+        NodeIconPipe,
+        NodeImagePipe,
+        VCardNamePipe,
+        FocusStateDirective,
+        FormatSizePipe,
+        NodeImageSizePipe,
+        NodePersonNamePipe,
+        NodeTitlePipe,
+        FormatDatePipe,
+        ReplaceCharsPipe,
+        SortDropdownComponent,
+        SpinnerComponent,
+        NodeUrlComponent,
+        DropdownComponent,
+        OptionTooltipPipe,
+        ActionbarComponent,
+        BorderBoxObserverDirective,
+    ],
+    imports: [
+        CommonModule,
+        MatMenuModule,
+        MatButtonModule,
+        MatTooltipModule,
+        MatRippleModule,
+        TranslateModule,
+        RouterModule,
+    ],
+    exports: [
+        IconDirective,
+        CheckTextOverflowDirective,
+        NodeIconPipe,
+        NodeImagePipe,
+        VCardNamePipe,
+        SortDropdownComponent,
+        FocusStateDirective,
+        FormatSizePipe,
+        NodeImageSizePipe,
+        NodePersonNamePipe,
+        NodeTitlePipe,
+        FormatDatePipe,
+        SpinnerComponent,
+        NodeUrlComponent,
+        DropdownComponent,
+        ActionbarComponent,
+        BorderBoxObserverDirective,
+    ],
+})
+export class EduSharingUiCommonModule {}

package/src/lib/directives/border-box-observer.directive.ts

@@ -0,0 +1,75 @@
+import { Directive, ElementRef, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { ReplaySubject, Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+interface BorderBox {
+    width: number;
+    height: number;
+}
+
+/**
+ * Gets the border-box dimensions of an element in an asynchronous manner.
+ *
+ * This allows subscribing to changes and using values as input to other Angular components without
+ * causing changed-after-checked errors.
+ */
+@Directive({
+    selector: '[esBorderBoxObserver]',
+    exportAs: 'borderBoxObserver',
+})
+export class BorderBoxObserverDirective implements OnInit, OnDestroy {
+    static observeElement(elementRef: ElementRef<HTMLElement>): Observable<BorderBox> {
+        return new Observable((subscriber) => {
+            const borderBoxObserver = new BorderBoxObserverDirective(elementRef);
+            borderBoxObserver.ngOnInit();
+            borderBoxObserver.borderBoxSubject.subscribe(subscriber);
+            return () => borderBoxObserver.ngOnDestroy();
+        });
+    }
+
+    @Output('esBorderBoxObserver') borderBoxEmitter = new EventEmitter<BorderBox>();
+
+    private observer: ResizeObserver;
+    private readonly borderBoxSubject = new ReplaySubject<BorderBox>(1);
+
+    width$ = this.borderBoxSubject.pipe(map(({ width }) => width));
+    height$ = this.borderBoxSubject.pipe(map(({ height }) => height));
+
+    constructor(private elementRef: ElementRef<HTMLElement>) {}
+
+    ngOnInit(): void {
+        this.registerEventEmitter();
+        this.registerObserver();
+        // Can cause changed-after-checked errors if done synchronously.
+        Promise.resolve().then(() => this.setInitialValue());
+    }
+
+    ngOnDestroy(): void {
+        this.observer.disconnect();
+    }
+
+    private registerEventEmitter(): void {
+        this.borderBoxSubject.subscribe((borderBox) => this.borderBoxEmitter.emit(borderBox));
+    }
+
+    private registerObserver(): void {
+        this.observer = new ResizeObserver((entries) => {
+            entries.forEach((entry) => {
+                const borderBoxSize: ResizeObserverSize = entry.borderBoxSize[0];
+                this.borderBoxSubject.next({
+                    width: borderBoxSize.inlineSize,
+                    height: borderBoxSize.blockSize,
+                });
+            });
+        });
+        this.observer.observe(this.elementRef.nativeElement);
+    }
+
+    private setInitialValue(): void {
+        const boundingClientRect = this.elementRef.nativeElement.getBoundingClientRect();
+        this.borderBoxSubject.next({
+            width: boundingClientRect.width,
+            height: boundingClientRect.height,
+        });
+    }
+}

package/src/lib/directives/check-text-overflow.directive.ts

@@ -0,0 +1,61 @@
+import { Directive, ElementRef, Input, OnInit } from '@angular/core';
+
+/**
+ * Checks whether text of the annotated element or a descendent (give a selector) was cut of, e.g.,
+ * with an ellipsis.
+ *
+ * Call `hasTextOverflow()` for the result.
+ */
+@Directive({
+    selector: '[esCheckTextOverflow]',
+    exportAs: 'esCheckTextOverflow',
+})
+export class CheckTextOverflowDirective implements OnInit {
+    @Input('esCheckTextOverflow') selector?: string;
+
+    private textElement: HTMLElement;
+
+    hasTextOverflow = delay(this.hasTextOverflow_);
+
+    constructor(private readonly elementRef: ElementRef<HTMLElement>) {}
+
+    ngOnInit(): void {
+        this.textElement = this.getTextElement();
+    }
+
+    private hasTextOverflow_(): boolean {
+        const element = this.textElement;
+        if (element) {
+            return element.offsetWidth < element.scrollWidth;
+        } else {
+            return false;
+        }
+    }
+
+    private getTextElement(): HTMLElement {
+        if (this.selector) {
+            return this.elementRef.nativeElement.querySelector(this.selector);
+        } else {
+            return this.elementRef.nativeElement;
+        }
+    }
+}
+
+/** Delay the result of a function one tick to avoid changed-after-checked errors. */
+function delay<T>(f: () => T): () => T {
+    let previousValue: any = null;
+    let updating = false;
+    return function () {
+        if (!updating) {
+            const newValue = f.apply(this);
+            if (newValue !== previousValue) {
+                updating = true;
+                Promise.resolve().then(() => {
+                    previousValue = newValue;
+                    updating = false;
+                });
+            }
+        }
+        return previousValue;
+    };
+}

package/src/lib/directives/drag-nodes/drag-nodes.ts

@@ -0,0 +1,32 @@
+import { Node } from 'ngx-edu-sharing-api';
+import { DropAction } from '../../types/drag-drop';
+
+export interface DragDataLegacy {
+    event?: DragEvent;
+    nodes?: Node[];
+    dropAction?: DropAction;
+}
+
+export interface DropDataLegacy extends DragDataLegacy {
+    target: DragNodeTarget;
+}
+
+export type DragNodeTarget = Node | 'HOME';
+
+export const dragNodesTransferType = 'application/nodes';
+
+const storageKey = 'app-drag-nodes';
+
+export function readDraggedNodes(): Node[] {
+    const json = window.localStorage.getItem(storageKey);
+    return JSON.parse(json);
+}
+
+export function saveDraggedNodes(nodes: Node[]): void {
+    const json = JSON.stringify(nodes);
+    window.localStorage.setItem(storageKey, json);
+}
+
+export function clearDraggedNodes(): void {
+    window.localStorage.removeItem(storageKey);
+}

package/src/lib/directives/drag-nodes/nodes-drag-source.directive.ts

@@ -0,0 +1,79 @@
+import {
+    Directive,
+    EventEmitter,
+    HostListener,
+    Input,
+    Output,
+    ElementRef,
+    OnChanges,
+    SimpleChanges,
+} from '@angular/core';
+import { Node } from 'ngx-edu-sharing-api';
+import { clearDraggedNodes, dragNodesTransferType, saveDraggedNodes } from './drag-nodes';
+
+/**
+ * Handle dragging and dropping of node elements.
+ *
+ * Use in combination with `NodesDropTargetDirective`.
+ *
+ * When nodes that set this directive are dragged, we save information about
+ * these nodes that can be used by `NodesDropTargetDirective`.
+ */
+@Directive({
+    selector: '[esNodesDragSource]',
+})
+export class NodesDragSourceDirective implements OnChanges {
+    /**
+     * The nodes to be dragged.
+     *
+     * When not set, this directive is effectively disabled.
+     */
+    @Input('esNodesDragSource') nodes?: Node[];
+
+    /**
+     * Triggered when processing the dragstart event.
+     *
+     * Changes to `nodes` performed by event handlers of `nodesDragStart` will
+     * be taken into account for the drag operation.
+     */
+    @Output() nodesDragStart = new EventEmitter<DragEvent>(false);
+    /**
+     * Triggered when processing the dragend event.
+     */
+    @Output() nodesDragEnd = new EventEmitter<DragEvent>();
+
+    constructor(private elementRef: ElementRef<Element>) {}
+
+    ngOnChanges(changes: SimpleChanges) {
+        // Set the `draggable` attribute when this directive is active.
+        if (changes.nodes) {
+            if (!!changes.nodes.currentValue !== !!changes.nodes.previousValue) {
+                this.elementRef.nativeElement.setAttribute('draggable', (!!this.nodes).toString());
+            }
+        }
+    }
+
+    @HostListener('dragstart', ['$event']) onDragStart(event: DragEvent) {
+        if (!this.nodes) {
+            return;
+        }
+        this.nodesDragStart.emit(event);
+        // Use the transfer-data type to identify a node-drag operation.
+        event.dataTransfer.setData(dragNodesTransferType, '');
+        // Chrome doesn't provide drag transfer data to dragover event listeners
+        // for security reasons, so we provide the data via localStorage.
+        //
+        // Wait for updates by event handlers of `nodesDragStart` to propagate.
+        setTimeout(() => {
+            saveDraggedNodes(this.nodes);
+        });
+    }
+
+    @HostListener('dragend', ['$event']) onDragEnd(event: DragEvent) {
+        if (!this.nodes) {
+            return;
+        }
+        this.nodesDragEnd.emit(event);
+        clearDraggedNodes();
+    }
+}

package/src/lib/directives/drag-nodes/nodes-drag.directive.ts

@@ -0,0 +1,43 @@
+import { CdkDrag } from '@angular/cdk/drag-drop';
+import { Directive } from '@angular/core';
+import { Node } from 'ngx-edu-sharing-api';
+import { NodesDragDropService } from '../../services/nodes-drag-drop.service';
+
+/**
+ * A draggable node.
+ *
+ * Use in combination with `cdkDrag`, setting `cdkDragData` to the array of nodes to be dragged.
+ */
+@Directive({
+    selector: '[esNodesDrag]',
+})
+export class NodesDragDirective {
+    constructor(private cdkDrag: CdkDrag<Node[]>, private nodesDragDrop: NodesDragDropService) {
+        this.cdkDrag.started.subscribe((event) => {
+            this.nodesDragDrop.draggedNodes = event.source.data;
+            // Position the preview element (the one being dragged around) next to the cursor to
+            // avoid covering possible drop targets with the preview.
+            event.source._dragRef['_pickupPositionInElement'] = { x: 0, y: 0 };
+        });
+        this.cdkDrag.released.subscribe(() => {
+            if (this.nodesDragDrop.canDrop?.accept) {
+                this.inhibitPreviewAnimation();
+            }
+        });
+        this.cdkDrag.dropped.subscribe(() => {
+            this.nodesDragDrop.onDropped(this.cdkDrag.data);
+            this.nodesDragDrop.draggedNodes = null;
+        });
+    }
+
+    private inhibitPreviewAnimation() {
+        const style = document.createElement('style');
+        document.body.appendChild(style);
+        style.innerHTML = `.cdk-drag-preview { transition: none !important; }`;
+        // Don't need to go outside ng zone because `cdkDrag.released` already runs outside the
+        // zone.
+        setTimeout(() => {
+            document.body.removeChild(style);
+        });
+    }
+}

package/src/lib/directives/drag-nodes/nodes-drop-target.directive.ts

@@ -0,0 +1,116 @@
+import {
+    Directive,
+    ElementRef,
+    EventEmitter,
+    Input,
+    NgZone,
+    OnDestroy,
+    Output,
+} from '@angular/core';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { CanDrop, DragData, DropTargetState } from '../../types/drag-drop';
+import { NodesDragDropService } from '../../services/nodes-drag-drop.service';
+
+const ACTIVE_DROP_TARGET_ACCEPT_CLASS = 'es-nodes-active-drop-target-accept';
+const ACTIVE_DROP_TARGET_DENY_CLASS = 'es-nodes-active-drop-target-deny';
+
+@Directive({
+    selector: '[esNodesDropTarget]',
+    exportAs: 'esNodesDropTarget',
+})
+export class NodesDropTargetDirective<T = unknown> implements OnDestroy {
+    @Input('esNodesDropTarget') target: T;
+    @Input() canDropNodes: (dragData: DragData<T>) => CanDrop;
+    @Output() nodeDropped = new EventEmitter<DragData<T>>();
+
+    get active() {
+        return this.activeDropTargetSubject.value;
+    }
+
+    private activeDropTargetSubject = new BehaviorSubject<DropTargetState | null>(null);
+    private destroyed = new Subject<void>();
+
+    constructor(
+        private ngZone: NgZone,
+        private elementRef: ElementRef<HTMLElement>,
+        private nodesDragDrop: NodesDragDropService,
+    ) {
+        this.registerMouseEnterLeave();
+        this.registerActiveDropTarget();
+    }
+
+    ngOnDestroy(): void {
+        this.destroyed.next();
+        this.destroyed.complete();
+    }
+
+    _setActiveDropTarget(value: DropTargetState | null) {
+        this.activeDropTargetSubject.next(value);
+    }
+
+    private registerMouseEnterLeave() {
+        this.ngZone.runOutsideAngular(() => {
+            this.elementRef.nativeElement.addEventListener('mouseenter', () =>
+                this.nodesDragDrop.onMouseEnter(this),
+            );
+            this.elementRef.nativeElement.addEventListener('mouseleave', () =>
+                this.nodesDragDrop.onMouseLeave(this),
+            );
+            // Firefox does not fire a mouseleave event when the element is removed from the DOM
+            // while being hovered. When an element is dragged, it will be replaced with a
+            // placeholder. If the element was also a drop target, we would think that we are still
+            // hovering the element.
+            observeRemovedFromParent(this.elementRef.nativeElement)
+                .pipe(takeUntil(this.destroyed))
+                .subscribe(() => this.nodesDragDrop.onMouseLeave(this));
+        });
+    }
+
+    private registerActiveDropTarget() {
+        this.activeDropTargetSubject
+            .pipe(takeUntil(this.destroyed))
+            .subscribe((dropTargetState) => {
+                const canDrop = dropTargetState?.canDrop;
+                const classList = this.elementRef.nativeElement.classList;
+                classList.remove(ACTIVE_DROP_TARGET_ACCEPT_CLASS, ACTIVE_DROP_TARGET_DENY_CLASS);
+                if (canDrop?.accept) {
+                    classList.add(ACTIVE_DROP_TARGET_ACCEPT_CLASS);
+                } else if (canDrop?.denyExplicit) {
+                    classList.add(ACTIVE_DROP_TARGET_DENY_CLASS);
+                }
+            });
+    }
+}
+
+function observeRemovedFromParent(element: HTMLElement): Observable<void> {
+    return new Observable((subscriber) => {
+        const observer = new MutationObserver((event) => {
+            for (const mutation of event) {
+                // @ts-ignore
+                if ([...mutation.removedNodes].includes(element)) {
+                    subscriber.next();
+                }
+            }
+        });
+        // Wait for `element` to be attached to the DOM.
+        let timeout = setTimeout(() => {
+            timeout = null;
+            observer.observe(element.parentNode, { childList: true, subtree: false });
+        });
+        return () => {
+            // In case the element was destroyed before we attached the mutation observer, we cancel
+            // the observable returned by this function and don't attach the mutation observer.
+            if (timeout !== null) {
+                // TODO: Investigate elements that trigger the following warning.
+                //
+                // console.warn(
+                //     'Possible performance leak: the element got destroyed before it could be added to the DOM.',
+                //     element,
+                // );
+                clearTimeout(timeout);
+            }
+            observer.disconnect();
+        };
+    });
+}

package/src/lib/directives/focus-state.directive.ts

@@ -0,0 +1,34 @@
+import { Directive, HostListener } from '@angular/core';
+
+@Directive({
+    selector: '[esFocusState]',
+    exportAs: 'esFocusState',
+})
+export class FocusStateDirective {
+    /** Either the element or one of its descendants has focus. */
+    hasFocus = false;
+    /** The element is being hovered with the cursor. */
+    hovering = false;
+
+    constructor() {}
+
+    @HostListener('focusin')
+    onFocusIn() {
+        this.hasFocus = true;
+    }
+
+    @HostListener('focusout')
+    onFocusOut() {
+        this.hasFocus = false;
+    }
+
+    @HostListener('mouseenter')
+    onMouseOver() {
+        this.hovering = true;
+    }
+
+    @HostListener('mouseleave')
+    onMouseOut() {
+        this.hovering = false;
+    }
+}

package/src/lib/directives/icon.directive.ts

@@ -0,0 +1,142 @@
+/**
+ * Created by Torsten on 13.01.2017.
+ */
+
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { Directive, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { ConfigService } from 'ngx-edu-sharing-api';
+import { take } from 'rxjs/operators';
+
+/**
+ * Replaces the element's content with an icon.
+ *
+ * Example: `<i esIcon="save"></i>`
+ *
+ * Optionally, a translated `aria-label` can be attached by setting `aria` to a truthy value: `<i
+ * esIcon="save" aria="true"></i>`. Otherwise, `aria-hidden` will be set.
+ *
+ * For backwards compatibility, the directive is also activated on elements that set
+ * `class="material-icons"`. This is mainly to set the `aria-hidden` attribute. Occurrences should
+ * be updated to the syntax above.
+ */
+@Directive({
+    selector: 'i[esIcon], i.material-icons',
+})
+export class IconDirective implements OnInit, OnDestroy {
+    private _id: string;
+    private _aria: boolean;
+    private iconsConfig: Array<{ original: string; replace?: string; cssClass?: string }>;
+    private altTextSpan: HTMLElement;
+    private isReady = false;
+
+    /**
+     * An alt text to show to screen readers.
+     *
+     * If omitted, the icon will be invisible to screen readers.
+     *
+     * @see https://material.angular.io/components/icon/overview#indicator-icons
+     */
+    @Input() set altText(altText: string) {
+        this.setAltText(altText);
+    }
+
+    /** If true, an alt text (see above) will be set based on the icon. */
+    @Input() set aria(aria: boolean) {
+        aria = coerceBooleanProperty(aria);
+        if (aria !== this._aria) {
+            this._aria = aria;
+            if (this.isReady) {
+                this.updateAria();
+            }
+        }
+    }
+
+    @Input() set esIcon(id: string) {
+        this.setIcon(id);
+    }
+
+    constructor(
+        private element: ElementRef<HTMLElement>,
+        private translate: TranslateService,
+        private config: ConfigService,
+    ) {}
+
+    async ngOnInit() {
+        this.isReady = true;
+        this.element.nativeElement.setAttribute('aria-hidden', 'true');
+        this.updateAria();
+
+        // FIXME: This might resolve after `setIcon` was called and mappings might be ignored.
+        await this.config.observeConfig().pipe(take(1)).toPromise();
+        this.iconsConfig = this.config.instant('icons', null);
+    }
+
+    ngOnDestroy(): void {
+        if (this.altTextSpan) {
+            this.altTextSpan.remove();
+        }
+    }
+
+    private setIcon(id: string) {
+        if (this._id) {
+            this.element.nativeElement.classList.remove(
+                'edu-icons',
+                'custom-icons',
+                'material-icons',
+            );
+        }
+        let customClass: string = null;
+        const mapping = this.iconsConfig?.filter((i) => i.original === id);
+        if (mapping?.length === 1) {
+            id = mapping[0].replace || '';
+            customClass = mapping[0].cssClass;
+        }
+        this._id = id;
+        if (this._aria) {
+            this.updateAria();
+        }
+        let cssClass: string;
+        if (id?.startsWith('edu-') && !customClass) {
+            cssClass = 'edu-icons';
+            id = id.substr(4);
+        } else if (id?.startsWith('custom-') || customClass) {
+            cssClass = 'custom-icons';
+            id = id.substr(7);
+        } else {
+            cssClass = 'material-icons';
+        }
+        this.element.nativeElement.classList.add(cssClass);
+        if (customClass) {
+            this.element.nativeElement.classList.add(customClass);
+        }
+        this.element.nativeElement.innerText = id;
+    }
+
+    private updateAria() {
+        if (this._aria !== undefined) {
+            if (this._aria && this._id) {
+                this.translate.get('ICON_LABELS.' + this._id).subscribe((lang) => {
+                    this.setAltText(lang);
+                });
+            } else {
+                this.setAltText(null);
+            }
+        }
+    }
+
+    private setAltText(altText: string): void {
+        if (altText && !this.altTextSpan) {
+            this.insertAltTextSpan();
+        }
+        if (this.altTextSpan) {
+            this.altTextSpan.innerText = altText;
+        }
+    }
+
+    private insertAltTextSpan(): void {
+        this.altTextSpan = document.createElement('span');
+        this.altTextSpan.classList.add('cdk-visually-hidden');
+        this.element.nativeElement.insertAdjacentElement('afterend', this.altTextSpan);
+    }
+}