ngx-edu-sharing-ui 0.7.0 → 9.0.1

package/src/lib/node-entries/mixins.scss

@@ -1,23 +0,0 @@
-@import '../../../assets/scss/mixins';
-
-@mixin card-top-bar-badge {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    user-select: none;
-    border-radius: 50%;
-    background-color: #fff;
-    padding: 5px;
-    position: relative;
-    z-index: 1;
-    @include materialShadow();
-    i {
-        // TODO: do we want to style based on collection type?
-        font-size: 18px;
-        color: #333;
-    }
-    img {
-        width: 18px;
-        height: 18px;
-    }
-}

package/src/lib/node-entries/node-cache.spec.ts

@@ -1,199 +0,0 @@
-import { NodeCache } from './node-cache';
-
-const ARRAY_0_5 = [0, 1, 2, 3, 4];
-const ARRAY_5_10 = [5, 6, 7, 8, 9];
-const ARRAY_0_10 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
-
-describe('NodeCache', () => {
-    let nodeCache: NodeCache<number>;
-
-    beforeEach(() => {
-        nodeCache = new NodeCache();
-    });
-
-    it('should find an exact match from 0', () => {
-        nodeCache.add({
-            startIndex: 0,
-            endIndex: 10,
-            data: ARRAY_0_10,
-        });
-        expect(nodeCache.get({ startIndex: 0, endIndex: 10 })).toEqual(ARRAY_0_10);
-    });
-
-    it('should find an exact match from 10', () => {
-        nodeCache.add({
-            startIndex: 10,
-            endIndex: 20,
-            data: ARRAY_0_10,
-        });
-        expect(nodeCache.get({ startIndex: 10, endIndex: 20 })).toEqual(ARRAY_0_10);
-    });
-
-    it('should find an exact match among multiple slices', () => {
-        nodeCache.add({
-            startIndex: 0,
-            endIndex: 10,
-            data: ARRAY_0_10,
-        });
-        nodeCache.add({
-            startIndex: 20,
-            endIndex: 30,
-            data: ARRAY_0_10,
-        });
-        expect(nodeCache.get({ startIndex: 20, endIndex: 30 })).toEqual(ARRAY_0_10);
-    });
-
-    it('should find a partial match', () => {
-        nodeCache.add({
-            startIndex: 0,
-            endIndex: 10,
-            data: ARRAY_0_10,
-        });
-        expect(nodeCache.get({ startIndex: 3, endIndex: 7 })).toEqual([3, 4, 5, 6]);
-    });
-
-    it('should merge two connected slices', () => {
-        nodeCache.add({
-            startIndex: 0,
-            endIndex: 5,
-            data: ARRAY_0_5,
-        });
-        nodeCache.add({
-            startIndex: 5,
-            endIndex: 10,
-            data: ARRAY_5_10,
-        });
-        expect(nodeCache.get({ startIndex: 0, endIndex: 10 })).toEqual(ARRAY_0_10);
-    });
-
-    it('should remove residual slices', () => {
-        nodeCache.add({
-            startIndex: 0,
-            endIndex: 5,
-            data: ARRAY_0_5,
-        });
-        nodeCache.add({
-            startIndex: 5,
-            endIndex: 10,
-            data: ARRAY_5_10,
-        });
-        expect(nodeCache['_slices'].length).toEqual(1);
-    });
-
-    it('should merge two reverse-connected slices', () => {
-        nodeCache.add({
-            startIndex: 5,
-            endIndex: 10,
-            data: ARRAY_5_10,
-        });
-        nodeCache.add({
-            startIndex: 0,
-            endIndex: 5,
-            data: ARRAY_0_5,
-        });
-        expect(nodeCache.get({ startIndex: 0, endIndex: 10 })).toEqual(ARRAY_0_10);
-    });
-
-    it('should merge two overlapping slices', () => {
-        nodeCache.add({
-            startIndex: 0,
-            endIndex: 7,
-            data: [0, 1, 2, 3, 4, 5, 6],
-        });
-        nodeCache.add({
-            startIndex: 3,
-            endIndex: 8,
-            data: [3, 4, 5, 6, 7],
-        });
-        expect(nodeCache.get({ startIndex: 0, endIndex: 8 })).toEqual([0, 1, 2, 3, 4, 5, 6, 7]);
-    });
-
-    it('should fill a gap', () => {
-        nodeCache.add({
-            startIndex: 0,
-            endIndex: 3,
-            data: [0, 1, 2],
-        });
-        nodeCache.add({
-            startIndex: 6,
-            endIndex: 9,
-            data: [6, 7, 8],
-        });
-        nodeCache.add({
-            startIndex: 3,
-            endIndex: 6,
-            data: [3, 4, 5],
-        });
-        expect(nodeCache.get({ startIndex: 0, endIndex: 9 })).toEqual([0, 1, 2, 3, 4, 5, 6, 7, 8]);
-    });
-
-    it('should find an exact missing range at the beginning', () => {
-        nodeCache.add({
-            startIndex: 6,
-            endIndex: 9,
-            data: [6, 7, 8],
-        });
-        expect(nodeCache.getMissingRange({ startIndex: 0, endIndex: 9 })).toEqual({
-            startIndex: 0,
-            endIndex: 6,
-        });
-    });
-
-    it('should find an exact missing range at the end', () => {
-        nodeCache.add({
-            startIndex: 0,
-            endIndex: 3,
-            data: [0, 1, 2],
-        });
-        expect(nodeCache.getMissingRange({ startIndex: 0, endIndex: 9 })).toEqual({
-            startIndex: 3,
-            endIndex: 9,
-        });
-    });
-
-    it('should find an exact missing range in the middle', () => {
-        nodeCache.add({
-            startIndex: 0,
-            endIndex: 3,
-            data: [0, 1, 2],
-        });
-        nodeCache.add({
-            startIndex: 6,
-            endIndex: 9,
-            data: [6, 7, 8],
-        });
-        expect(nodeCache.getMissingRange({ startIndex: 0, endIndex: 9 })).toEqual({
-            startIndex: 3,
-            endIndex: 6,
-        });
-    });
-
-    it('should find an overlapped missing range at the beginning', () => {
-        nodeCache.add({
-            startIndex: 6,
-            endIndex: 9,
-            data: [6, 7, 8],
-        });
-        expect(nodeCache.getMissingRange({ startIndex: 0, endIndex: 7 })).toEqual({
-            startIndex: 0,
-            endIndex: 6,
-        });
-    });
-
-    it('should find an overlapped missing range in the middle', () => {
-        nodeCache.add({
-            startIndex: 0,
-            endIndex: 3,
-            data: [0, 1, 2],
-        });
-        nodeCache.add({
-            startIndex: 6,
-            endIndex: 9,
-            data: [6, 7, 8],
-        });
-        expect(nodeCache.getMissingRange({ startIndex: 2, endIndex: 7 })).toEqual({
-            startIndex: 3,
-            endIndex: 6,
-        });
-    });
-});

package/src/lib/node-entries/node-cache.ts

@@ -1,81 +0,0 @@
-import { notNull } from '../util/functions';
-
-export interface NodeCacheRange {
-    startIndex: number;
-    endIndex: number;
-}
-
-export interface NodeCacheSlice<T> extends NodeCacheRange {
-    data: readonly T[];
-}
-
-export class NodeCache<T> {
-    private _slices: readonly NodeCacheSlice<T>[] = [];
-
-    add(slice: NodeCacheSlice<T>): void {
-        if (slice.endIndex - slice.startIndex !== slice.data.length) {
-            throw new Error('Tried to add invalid slice to cache: ' + JSON.stringify(slice));
-        }
-        this._slices = this._normalizeSlices([...this._slices, slice]);
-    }
-
-    clear() {
-        this._slices = [];
-    }
-
-    get(range: NodeCacheRange): T[] | null {
-        for (const slice of this._slices) {
-            if (slice.startIndex <= range.startIndex && slice.endIndex >= range.endIndex) {
-                return slice.data.slice(
-                    range.startIndex - slice.startIndex,
-                    range.endIndex - slice.startIndex,
-                );
-            }
-        }
-        return null;
-    }
-
-    getMissingRange(requestedRange: NodeCacheRange): NodeCacheRange | null {
-        let fromIndex = requestedRange.startIndex;
-        let toIndex = requestedRange.endIndex;
-        for (const slice of this._slices) {
-            if (slice.startIndex <= fromIndex && slice.endIndex > fromIndex) {
-                fromIndex = slice.endIndex;
-            } else if (slice.startIndex < toIndex && slice.endIndex >= toIndex) {
-                toIndex = slice.startIndex;
-            }
-            if (fromIndex >= toIndex) {
-                return null;
-            }
-        }
-        return { startIndex: fromIndex, endIndex: toIndex };
-    }
-
-    private _normalizeSlices(slices: NodeCacheSlice<T>[]): NodeCacheSlice<T>[] {
-        slices.sort((lhs, rhs) => lhs.startIndex - rhs.startIndex);
-        for (let i = 0; i < slices.length - 1; i++) {
-            for (let j = i + 1; j < slices.length; j++) {
-                if (this._canMerge(slices[i], slices[j])) {
-                    slices[i] = this._merge(slices[i], slices[j]);
-                    slices[j] = null; // Mark for deletion
-                }
-            }
-        }
-        return slices.filter(notNull);
-    }
-
-    private _canMerge(lhs: NodeCacheSlice<T>, rhs: NodeCacheSlice<T>): boolean {
-        if (!lhs || !rhs) {
-            return false;
-        }
-        return lhs.endIndex >= rhs.startIndex;
-    }
-
-    private _merge(lhs: NodeCacheSlice<T>, rhs: NodeCacheSlice<T>): NodeCacheSlice<T> {
-        return {
-            startIndex: lhs.startIndex,
-            endIndex: rhs.endIndex,
-            data: [...lhs.data, ...rhs.data.slice(lhs.endIndex - rhs.startIndex)],
-        };
-    }
-}

package/src/lib/node-entries/node-data-source.ts

@@ -1,148 +0,0 @@
-import { DataSource } from '@angular/cdk/collections';
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
-import { ItemsCap } from './items-cap';
-import { Node, GenericAuthority, Pagination } from 'ngx-edu-sharing-api';
-import { Helper } from '../util/helper';
-
-export type LoadingState =
-    // The data source is loading data for the first time.
-    | 'initial'
-    // Loading data after change of parameters, i.e., it will replace the current data when done.
-    | 'reset'
-    // Loading another page with unchanged parameters.
-    | 'page'
-    // Loading done.
-    | false;
-
-export class NodeDataSource<T extends Node | GenericAuthority> extends DataSource<T> {
-    protected dataStream = new BehaviorSubject<T[]>([]);
-    private pagination$ = new BehaviorSubject<Pagination>(null);
-    // Include `LoadingState` to be type-compatible to `NodeDataSourceRemote` although not used
-    // here.
-    public isLoadingSubject = new BehaviorSubject<LoadingState | boolean>(false);
-    get isLoading() {
-        return this.isLoadingSubject.value;
-    }
-    set isLoading(isLoading: LoadingState | boolean) {
-        this.isLoadingSubject.next(isLoading);
-    }
-    initialPageLoaded = false;
-    protected _itemsCap: ItemsCap<T> | null;
-    get itemsCap(): ItemsCap<T> | null {
-        return this._itemsCap;
-    }
-    set itemsCap(value: ItemsCap<T> | null) {
-        this._itemsCap = value;
-        this.connectRenderData();
-    }
-    protected renderData = new BehaviorSubject<T[]>([]);
-    protected renderDataSubscription: Subscription | null;
-
-    constructor(initialData: T[] = []) {
-        super();
-        this.setData(initialData);
-    }
-
-    connect(): Observable<T[]> {
-        if (!this.renderDataSubscription) {
-            this.connectRenderData();
-        }
-        return this.renderData;
-    }
-
-    private connectRenderData(): void {
-        this.renderDataSubscription?.unsubscribe();
-        if (this.itemsCap) {
-            this.renderDataSubscription = this.itemsCap
-                .connect(this.dataStream)
-                .subscribe((data) => this.renderData.next(data));
-        } else {
-            this.renderDataSubscription = this.dataStream.subscribe((data) =>
-                this.renderData.next(data),
-            );
-        }
-    }
-
-    connectPagination(): Observable<Pagination> {
-        return this.pagination$;
-    }
-
-    disconnect() {}
-
-    setData(data: T[], pagination: Pagination = null) {
-        this.dataStream.next(data);
-        this.setPagination(pagination);
-    }
-
-    appendData(appendData: T[], location: 'before' | 'after' = 'after') {
-        let data = this.getData();
-        if (location === 'after') {
-            data = data.concat(appendData);
-        } else {
-            data = appendData.concat(data);
-        }
-        this.dataStream.next(data);
-    }
-
-    /**
-     * Removes elements from the visible data.
-     */
-    removeData(toRemove: T[]): void {
-        const newData = this.getData().filter(
-            (value) =>
-                !toRemove.some((d) => Helper.objectEquals((d as Node).ref, (value as Node).ref)),
-        );
-        const removedData = this.getData().filter((value) => !newData.includes(value));
-        this.dataStream.next(newData);
-        if (this.pagination$.value) {
-            const pagination = this.pagination$.value;
-            this.setPagination({
-                count: pagination.count - removedData.length,
-                from: pagination.from,
-                total: pagination.total - removedData.length,
-            });
-        }
-    }
-
-    setPagination(pagination: Pagination) {
-        this.pagination$.next(pagination);
-    }
-
-    reset() {
-        this.setData([]);
-    }
-
-    hasMore() {
-        if (!this.pagination$.value) {
-            return undefined;
-        }
-        return this.pagination$.value.total > this.dataStream.value?.length;
-    }
-
-    // FIXME: This is somewhat dangerous because we rely on `connect` being called from outside, but
-    // this method provides a way to access data without ever calling `connect`.
-    getData() {
-        return this.renderData.value;
-    }
-
-    isEmpty(): boolean {
-        return this.dataStream.value?.length === 0;
-    }
-
-    getTotal() {
-        return this.pagination$.value?.total ?? this.dataStream.value?.length ?? 0;
-    }
-
-    isFullyLoaded() {
-        return this.getTotal() <= this.dataStream.value?.length;
-    }
-
-    /**
-     * force a refresh of all elements in the current data stream
-     * trigger this to enforce a rebuild of the nodes in all sub-components
-     * i.e. if data from some nodes has changed
-     */
-    refresh() {
-        this.dataStream.next(Helper.deepCopy(this.dataStream.value));
-    }
-}

package/src/lib/node-entries/node-entries-card/node-entries-card.component.html

@@ -1,167 +0,0 @@
-<div
-  class="grid-card"
-  [class.grid-card-collection]="isCollection"
-  [class.grid-card-virtual]="$any(node).virtual"
-  [style.background-color]="isCollection ? node.collection.color : null"
-  [class.dynamic-single-click]="entriesService.singleClickHint === 'dynamic'"
-  [class.selected]="entriesService.selection.isSelected(node)"
-  (contextmenu)="openContextmenu($event)"
-  (keydown.ContextMenu)="openContextmenu($event)"
->
-  <div
-    *ngIf="templatesService.overlay"
-    class="card-overlay"
-    (click)="
-      entriesService.clickItem.emit({
-        element: node,
-        source: ClickSource.Overlay
-      })
-    "
-  >
-    <ng-container
-      *ngTemplateOutlet="templatesService.overlay; context: { element: node }"
-    ></ng-container>
-  </div>
-  <button
-    *ngIf="dropdown"
-    #menuTrigger="matMenuTrigger"
-    mat-button
-    class="dropdown-dummy cdk-visually-hidden"
-    [style.left.px]="dropdownLeft"
-    [style.top.px]="dropdownTop"
-    [matMenuTriggerFor]="dropdown.menu"
-    tabindex="-1"
-    aria-hidden="true"
-  ></button>
-  <div class="card-top-bar" [style.background-color]="isCollection ? node.collection.color : null">
-    <div class="card-top-bar-collection-color" *ngIf="nodeHelper.isNodeCollection(node)"></div>
-    <es-node-type-badge [node]="node"></es-node-type-badge>
-    <div *ngIf="isCollection && node.collection.pinned" class="card-top-bar-flag">
-      <i esIcon="edu-pin"></i>
-    </div>
-    <div class="card-top-bar-empty"></div>
-    <es-node-stats-badges [node]="node"></es-node-stats-badges>
-    <div class="card-top-bar-checkbox" *ngIf="entriesService.checkbox">
-      <mat-checkbox
-        [checked]="entriesService.selection.isSelected(node)"
-        (change)="entriesService.onCheckboxChanged(node, $event.checked)"
-        aria-label="{{ 'SELECT' | translate : { element: (node | nodeTitle) } }}"
-      ></mat-checkbox>
-    </div>
-  </div>
-  <es-node-url
-    *ngIf="entriesService.elementInteractionType === InteractionType.DefaultActionLink"
-    mode="wrapper"
-    [node]="node"
-    esFocusState
-    #cardFocusState="esFocusState"
-  >
-    <ng-container
-      *ngTemplateOutlet="
-        image;
-        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }
-      "
-    ></ng-container>
-    <ng-container *ngTemplateOutlet="meta"></ng-container>
-  </es-node-url>
-  <div
-    *ngIf="entriesService.elementInteractionType !== InteractionType.DefaultActionLink"
-    matRipple
-    (click)="
-      entriesService.onClicked({
-        event: $event,
-        element: node,
-        source: ClickSource.Metadata
-      })
-    "
-    (dblclick)="
-      entriesService.dblClickItem.emit({
-        element: node,
-        source: ClickSource.Metadata
-      })
-    "
-    esFocusState
-    #cardFocusState="esFocusState"
-  >
-    <ng-container
-      *ngTemplateOutlet="
-        image;
-        context: { playAnimation: cardFocusState.hovering || cardFocusState.hasFocus }
-      "
-    ></ng-container>
-    <ng-container *ngTemplateOutlet="meta"></ng-container>
-  </div>
-  <div class="card-options" *ngIf="entriesService.options || showRatings">
-    <div class="card-rating-area">
-      <es-node-rating [node]="node"></es-node-rating>
-    </div>
-    <div class="card-options-area">
-      <es-option-button
-        *ngFor="let option of optionsOnCard()"
-        class="card-options-always"
-        [option]="option"
-        [node]="node"
-      ></es-option-button>
-      <div class="card-options-spacer"></div>
-      <button
-        *ngIf="dropdown"
-        mat-icon-button
-        color="primary"
-        (click)="openMenu(node)"
-        [matMenuTriggerFor]="dropdown.menu"
-        [attr.aria-label]="'OPTIONS_FOR' | translate : { element: (node | nodeTitle) }"
-        data-test="card-options-button"
-      >
-        <i esIcon="more_vert"></i>
-      </button>
-    </div>
-  </div>
-  <ng-template #image let-playAnimation="playAnimation">
-    <div
-      class="card-image-area"
-      [style.background-color]="isCollection ? node.collection.color : null"
-    >
-      <ng-container *ngIf="getTemplate(CustomFieldSpecialType.preview) as ref">
-        <ng-container *ngTemplateOutlet="ref; context: { node: this.node }"></ng-container>
-      </ng-container>
-      <ng-container *ngIf="!getTemplate(CustomFieldSpecialType.preview)">
-        <es-preview-image
-          *ngIf="!(isCollection && node.preview.isIcon)"
-          [node]="node"
-          [playAnimation]="playAnimation"
-        ></es-preview-image>
-        <div *ngIf="isCollection && node.preview.isIcon" class="card-collection-image">
-          <i esIcon="layers"></i>
-        </div>
-      </ng-container>
-    </div>
-  </ng-template>
-  <ng-template #meta let-link="link">
-    <div class="card-meta">
-      <div
-        *ngFor="let displayPart of getVisibleColumns(); let first = first"
-        class="card-meta-row card-meta-row-{{ displayPart.name | lowercase }}"
-        [class.card-meta-row-primary]="first"
-      >
-        <ng-container *ngIf="first">
-          <es-node-url
-            *ngIf="entriesService.elementInteractionType === InteractionType.DefaultActionLink"
-            [node]="node"
-            #link
-          >
-            <es-list-base [item]="displayPart" [node]="node" [provideLabel]="false"> </es-list-base>
-          </es-node-url>
-          <div *ngIf="entriesService.elementInteractionType !== InteractionType.DefaultActionLink">
-            <es-list-base [item]="displayPart" [node]="node" [provideLabel]="false"> </es-list-base>
-          </div>
-        </ng-container>
-        <ng-container *ngIf="!first">
-          <label>
-            {{ displayPart | esListItemLabel | async }}
-          </label>
-          <es-list-base [item]="displayPart" [node]="node" [provideLabel]="false"> </es-list-base>
-        </ng-container>
-      </div>
-    </div>
-  </ng-template>
-</div>

package/src/lib/node-entries/node-entries-card/node-entries-card.component.scss

@@ -1,28 +0,0 @@
-$imageHeight: 150px;
-$entriesCardPaddingHorizontal: 20px;
-$entriesCardPaddingVertical: 10px;
-$topBarHeight: 40px;
-$collectionIconPadding: 40px;
-$collectionIconSize: 40px;
-
-@import 'node-entries-card.main';
-
-.grid-card {
-    grid-template-rows: $topBarHeight auto $optionBarHeight;
-    .card-meta {
-        .card-meta-row {
-            > es-list-base {
-                @include limitLineCount(2, 1.25);
-            }
-        }
-    }
-}
-:host ::ng-deep {
-    .grid-card {
-        es-node-url {
-            .node-url-wrapper {
-                height: 100%;
-            }
-        }
-    }
-}