ngx-edu-sharing-ui 0.7.0 → 9.0.1

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

@@ -1,181 +0,0 @@
-@use 'sass:math';
-@import '../../../../assets/scss/mixins';
-
-$horizontalScrollPadding: 1.5em;
-
-@keyframes OrderAnimationCards {
-    0% {
-        transform: rotate(-0.25deg);
-    }
-    50% {
-        transform: rotate(0.25deg);
-    }
-    100% {
-        transform: rotate(-0.25deg);
-    }
-}
-
-.order-panel {
-    margin-left: auto;
-}
-
-.load-more {
-    display: flex;
-    justify-content: center;
-}
-.card-grid-wrapper {
-    position: relative;
-    z-index: 0;
-    .scroll-helper-left,
-    .scroll-helper-right {
-        position: absolute;
-        width: 15%;
-        min-width: 60px;
-        max-width: calc(var(--cardWidth) * 0.4);
-        display: flex;
-        align-items: center;
-        // do not overlay scrollbar
-        height: calc(100% - 10px);
-        z-index: 5;
-        @include clickable();
-        > button {
-            background-color: #fff;
-            color: var(--primary);
-            @include materialShadowMediumLarge(false, 0.25);
-        }
-    }
-    .scroll-helper-left {
-        left: -$horizontalScrollPadding;
-        justify-content: flex-start;
-        background: linear-gradient(
-            to left,
-            rgba(255, 255, 255, 0.000001) 0,
-            rgb(255, 255, 255) calc(100% - $horizontalScrollPadding)
-        );
-        > button {
-            margin-left: calc($horizontalScrollPadding - 8px);
-        }
-    }
-    .scroll-helper-right {
-        right: -$horizontalScrollPadding;
-        justify-content: flex-end;
-        background: linear-gradient(
-            to right,
-            rgba(255, 255, 255, 0.000001) 0,
-            rgb(255, 255, 255) calc(100% - $horizontalScrollPadding)
-        );
-        > button {
-            margin-right: calc($horizontalScrollPadding - 8px);
-        }
-    }
-}
-.card-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(var(--cardWidth), 1fr));
-    grid-column-gap: 20px;
-    grid-row-gap: 20px;
-    grid-template-rows: auto;
-    padding-block-start: 1em;
-    padding-block-end: 1em;
-    &.card-grid-layout-scroll {
-        position: relative;
-        overflow-x: auto;
-        overflow-y: hidden;
-        scroll-snap-type: x mandatory;
-        grid-auto-flow: column;
-        grid-template-columns: repeat(auto-fit, var(--cardWidth));
-        grid-auto-columns: minmax(var(--cardWidth), 1fr);
-        // slightly more padding to prevent shadow clipping
-        padding: $horizontalScrollPadding;
-        // compensate for larger padding
-        margin: calc(1em - $horizontalScrollPadding) (-$horizontalScrollPadding) 0;
-        &::-webkit-scrollbar-track {
-            margin: 0 $horizontalScrollPadding;
-        }
-        @include materialScrollbar();
-        > .card-grid-drag-wrapper {
-            scroll-snap-align: center;
-            scroll-snap-stop: always;
-        }
-    }
-    > .card-grid-drag-wrapper {
-        position: relative;
-        // .cdk-drag-placeholder ~ .card-grid-drop-blocked-container {
-        //     display: none;
-        // }
-        .card-grid-drop-allowed-container,
-        .card-grid-drop-blocked-container {
-            position: absolute;
-            z-index: 1;
-            left: 0;
-            right: 0;
-            top: 0;
-            bottom: 0;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            > i {
-                background: radial-gradient(circle, #fff 30%, rgba(255, 255, 255, 0.0001) 70%);
-                width: 200px;
-                height: 200px;
-                font-size: 80px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-            }
-        }
-        .card-grid-drop-allowed-container {
-            > i {
-                color: var(--colorStatusPositive);
-            }
-        }
-        .card-grid-drop-blocked-container {
-            backdrop-filter: blur(5px);
-            > i {
-                color: var(--colorStatusNegative);
-            }
-        }
-        .selected-when-dragging {
-            opacity: 0.5; // Same as .cdk-drag-placeholder
-        }
-        &.cdk-drop-list-dragging {
-            > *:first-child {
-                display: none;
-            }
-        }
-    }
-    &.card-grid-reorder {
-        > .card-grid-order-wrapper {
-            $orderAnimationTime: 0.5s;
-            animation-iteration-count: infinite;
-            animation-duration: $orderAnimationTime;
-            animation-name: OrderAnimationCards;
-            &:nth-of-type(2n) {
-                animation-delay: 0s;
-            }
-            &:nth-of-type(2n + 1) {
-                animation-delay: math.div(-$orderAnimationTime, 2);
-            }
-            &:nth-of-type(3n) {
-                animation-delay: math.div(-$orderAnimationTime, 4);
-            }
-            &:nth-of-type(5n) {
-                animation-delay: math.div(-$orderAnimationTime, 8);
-            }
-            .cdk-drag-placeholder {
-                display: none;
-            }
-        }
-    }
-}
-
-.card-drag-preview {
-    width: 250px;
-}
-
-// Disable animations for rearranging. We misuse `entered` events for doing the rearranging, so the
-// preview animation would go to the wrong position (see
-// https://stackblitz.com/edit/drag-drop-dashboard).
-::ng-deep .es-card-grid-rearrange-drag-preview.cdk-drag-animating {
-    transition: none;
-}

package/src/lib/node-entries/node-entries-card-grid/node-entries-card-grid.component.ts

@@ -1,361 +0,0 @@
-import { CdkDragEnter, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    ElementRef,
-    Input,
-    NgZone,
-    OnDestroy,
-    OnInit,
-    QueryList,
-    TemplateRef,
-    ViewChild,
-    ViewChildren,
-} from '@angular/core';
-import { Sort } from '@angular/material/sort';
-import { Node, RestConstants } from 'ngx-edu-sharing-api';
-import * as rxjs from 'rxjs';
-import { BehaviorSubject, Subject } from 'rxjs';
-import { distinctUntilChanged, map, switchMap, take, takeUntil } from 'rxjs/operators';
-import { GridLayout, NodeEntriesDisplayType } from '../entries-model';
-import { ItemsCap } from '../items-cap';
-import { NodeEntriesGlobalService } from '../node-entries-global.service';
-import { NodeEntriesTemplatesService } from '../node-entries-templates.service';
-import { SortSelectPanelComponent } from '../sort-select-panel/sort-select-panel.component';
-import { CustomTemplatesDataSource } from '../custom-templates-data-source';
-import { Target } from '../../types/option-item';
-import { NodeEntriesService } from '../../services/node-entries.service';
-import { UIService } from '../../services/ui.service';
-import { ListItemSort } from '../../types/list-item';
-import { DragData } from '../../types/drag-drop';
-
-let displayedWarnings: string[] = [];
-
-@Component({
-    selector: 'es-node-entries-card-grid',
-    templateUrl: 'node-entries-card-grid.component.html',
-    styleUrls: ['node-entries-card-grid.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class NodeEntriesCardGridComponent<T extends Node> implements OnInit, OnDestroy {
-    readonly NodeEntriesDisplayType = NodeEntriesDisplayType;
-    readonly Target = Target;
-    /**
-     * relative scrolling when a scrolling arrow (left or right) is used
-     * a value of 1 would mean to scroll the full width of the entire content
-     */
-    readonly ScrollingOffsetPercentage = 0.4;
-
-    @ViewChild('gridTop', { static: true }) set gridTop(value: TemplateRef<unknown>) {
-        this.registerGridTop(value);
-    }
-    @ViewChild(SortSelectPanelComponent)
-    set sortPanel(value: SortSelectPanelComponent) {
-        // if (this.entriesService.dataSource instanceof NodeDataSourceRemote) {
-        setTimeout(() => {
-            (this.entriesService.dataSource as any).sortPanel = value;
-        });
-        // }
-    }
-    @ViewChildren(CdkDropList) dropListsQuery: QueryList<CdkDropList>;
-    @ViewChild('grid') gridRef: ElementRef;
-    @ViewChildren('item', { read: ElementRef }) itemRefs: QueryList<ElementRef<HTMLElement>>;
-    @Input() displayType: NodeEntriesDisplayType;
-
-    isDragging = false; // Drag-and-drop, not rearrange
-    dropLists: CdkDropList[];
-    /**
-     * Whether the number of shown items is limited by `gridConfig.maxRows`.
-     *
-     * A value of `true` does not mean, that there would be more items available.
-     */
-    visibleItemsLimited = false;
-    layout: GridLayout;
-    /**
-     * updates via boxObserver
-     * and holds the information if scrolling in the direction is currently feasible
-     */
-    scroll = {
-        left: false,
-        right: false,
-    };
-
-    readonly nodes$;
-    private readonly maxRows$;
-    private readonly layout$;
-    private readonly itemsPerRowSubject = new BehaviorSubject<number | null>(null);
-    readonly itemsCap = new ItemsCap<T>();
-    private globalCursorStyle: HTMLStyleElement;
-    private destroyed = new Subject<void>();
-
-    constructor(
-        public entriesService: NodeEntriesService<T>,
-        public entriesGlobalService: NodeEntriesGlobalService,
-        public templatesService: NodeEntriesTemplatesService,
-        public ui: UIService,
-        private ngZone: NgZone,
-    ) {
-        this.nodes$ = this.entriesService.dataSource$.pipe(
-            switchMap((dataSource) => dataSource?.connect()),
-        );
-        this.maxRows$ = this.entriesService.gridConfig$.pipe(
-            map((gridConfig) => gridConfig?.maxRows || null),
-            distinctUntilChanged(),
-        );
-        this.layout$ = this.entriesService.gridConfig$.pipe(
-            map((gridConfig) => gridConfig?.layout || 'grid'),
-            distinctUntilChanged(),
-        );
-        this.entriesService.dataSource$.pipe(takeUntil(this.destroyed)).subscribe(() => {
-            this.updateScrollState();
-        });
-    }
-
-    ngOnInit(): void {
-        this.registerItemsCap();
-        this.registerLayout();
-        this.registerVisibleItemsLimited();
-    }
-
-    ngOnDestroy(): void {
-        this.destroyed.next();
-        this.destroyed.complete();
-    }
-
-    private registerGridTop(gridTop: TemplateRef<unknown>): void {
-        setTimeout(() => {
-            this.templatesService.entriesTopMatter = gridTop;
-        });
-        this.destroyed.subscribe(() => {
-            if (this.templatesService.entriesTopMatter === gridTop) {
-                setTimeout(() => {
-                    this.templatesService.entriesTopMatter = null;
-                });
-            }
-        });
-    }
-
-    private registerItemsCap() {
-        this.entriesService.dataSource$
-            .pipe(takeUntil(this.destroyed))
-            .subscribe((dataSource) => (dataSource.itemsCap = this.itemsCap));
-        rxjs.combineLatest([this.itemsPerRowSubject.pipe(distinctUntilChanged()), this.maxRows$])
-            .pipe(
-                map(([itemsPerRow, maxRows]) =>
-                    maxRows > 0 && itemsPerRow !== null ? itemsPerRow * maxRows : null,
-                ),
-            )
-            .subscribe((cap) => (this.itemsCap.cap = cap));
-    }
-
-    private registerLayout() {
-        this.layout$.subscribe((layout) => (this.layout = layout));
-    }
-
-    onSortChange(sort: Sort) {
-        this.entriesService.sort.active = sort.active;
-        this.entriesService.sort.direction = sort.direction;
-        this.entriesService.sortChange.emit(this.entriesService.sort);
-    }
-
-    loadData(source: 'scroll' | 'button') {
-        // @TODO: Maybe this is better handled in a more centraled service
-        if (source === 'scroll') {
-            // check if there is a footer
-            const elements = document.getElementsByTagName('footer');
-            if (elements.length && elements.item(0).innerHTML.trim()) {
-                return;
-            }
-        }
-        const couldLoadMore = this.entriesService.loadMore(source);
-        if (couldLoadMore && source === 'button') {
-            this.focusFirstNewItemWhenLoaded();
-        }
-    }
-
-    onCustomSortingInProgressChange() {
-        this.entriesService.sortChange.emit(this.entriesService.sort);
-        setTimeout(() => {
-            this.refreshDropLists();
-        });
-    }
-
-    onRearrangeDragEntered($event: CdkDragEnter) {
-        moveItemInArray(
-            this.entriesService.dataSource.getData(),
-            $event.item.data,
-            $event.container.data,
-        );
-        // `CdkDrag` doesn't really want us to rearrange the items while dragging. Its cached
-        // element positions get out of sync unless we update them manually.
-        this.ngZone.runOutsideAngular(() =>
-            setTimeout(() =>
-                this.dropLists?.forEach((list) => (list._dropListRef as any)['_cacheItems']()),
-            ),
-        );
-    }
-
-    onRearrangeDragStarted() {
-        this.globalCursorStyle = document.createElement('style');
-        document.body.appendChild(this.globalCursorStyle);
-        this.globalCursorStyle.innerHTML = `* {cursor: grabbing !important; }`;
-    }
-
-    onRearrangeDragEnded() {
-        document.body.removeChild(this.globalCursorStyle);
-        this.globalCursorStyle = null;
-    }
-
-    getDragStartDelay(): number {
-        if (this.ui.isMobile()) {
-            return 500;
-        } else {
-            return null;
-        }
-    }
-
-    private registerVisibleItemsLimited() {
-        this.maxRows$.subscribe((maxRows) => {
-            this.visibleItemsLimited = maxRows > 0;
-        });
-    }
-
-    private refreshDropLists() {
-        this.dropLists = this.dropListsQuery.toArray();
-    }
-
-    private focusFirstNewItemWhenLoaded() {
-        const oldLength = this.itemRefs.length;
-        this.itemRefs.changes
-            .pipe(take(1))
-            .subscribe((items: NodeEntriesCardGridComponent<T>['itemRefs']) => {
-                if (items.length > oldLength) {
-                    this.focusOnce(items.get(oldLength).nativeElement);
-                }
-            });
-    }
-
-    private focusOnce(element: HTMLElement): void {
-        element.setAttribute('tabindex', '-1');
-        element.focus();
-        element.addEventListener('blur', () => element.removeAttribute('tabindex'), { once: true });
-    }
-
-    onGridSizeChanges(): void {
-        const itemsPerRow = this.getItemsPerRow();
-        this.itemsPerRowSubject.next(itemsPerRow);
-        this.updateScrollState();
-    }
-
-    private getItemsPerRow(): number | null {
-        if (!this.gridRef?.nativeElement) {
-            return null;
-        }
-        return getComputedStyle(this.gridRef.nativeElement)
-            .getPropertyValue('grid-template-columns')
-            .split(' ').length;
-    }
-
-    getSortColumns() {
-        return this.entriesService.sort?.columns?.filter((c) => {
-            const result = this.entriesService.columns
-                .concat(
-                    new ListItemSort('NODE', 'score'),
-                    new ListItemSort('NODE', RestConstants.CCM_PROP_COLLECTION_ORDERED_POSITION),
-                    new ListItemSort('NODE', RestConstants.CM_PROP_TITLE),
-                    new ListItemSort('NODE', RestConstants.CM_NAME),
-                    new ListItemSort('NODE', RestConstants.CM_MODIFIED_DATE),
-                    new ListItemSort('NODE', RestConstants.CCM_PROP_REPLICATIONMODIFIED),
-                    new ListItemSort('NODE', RestConstants.CCM_PROP_REPLICATIONSOURCETIMESTAMP),
-                )
-                .some((c2) => c2.name === c.name);
-            if (!result) {
-                const warning =
-                    'Sort field ' +
-                    c.name +
-                    ' was specified but is not present as a column. ' +
-                    'It will be ignored. Please also configure this field in the <lists> section';
-                if (!displayedWarnings.includes(warning)) {
-                    console.warn(warning);
-                    displayedWarnings.push(warning);
-                }
-            }
-            return result;
-        });
-    }
-
-    canDropNodes = (dragData: DragData<T>) => this.entriesService.dragDrop.dropAllowed?.(dragData);
-
-    onNodesDropped(dragData: DragData<Node>) {
-        this.entriesService.dragDrop.dropped(dragData.target, {
-            element: dragData.draggedNodes,
-            mode: dragData.action,
-        });
-    }
-
-    getDragEnabled(): boolean {
-        return this.entriesService.dragDrop?.dragAllowed && !this.ui.isMobile();
-    }
-
-    getDragData(node: T): T[] {
-        const selection = this.entriesService.selection;
-        if (selection.isSelected(node)) {
-            return selection.selected;
-        } else {
-            return [node];
-        }
-    }
-
-    onDragStarted(node: T) {
-        if (!this.entriesService.selection.isSelected(node)) {
-            this.entriesService.selection.clear();
-            this.entriesService.selection.select(node);
-        }
-        this.isDragging = true;
-    }
-
-    onDragEnded() {
-        this.isDragging = false;
-    }
-
-    private canScroll(direction: 'left' | 'right') {
-        const element = this.gridRef?.nativeElement;
-        if (element) {
-            if (direction === 'left') {
-                return element.scrollLeft > 0;
-            } else if (direction === 'right') {
-                /*
-                 use a small pixel buffer (10px) because scrolling aligns with the start of each card and
-                 it can cause slight alignment issues on the end of the container
-                 */
-                return element.scrollLeft < element.scrollWidth - element.clientWidth - 10;
-            }
-        }
-        return false;
-    }
-
-    updateScrollState() {
-        if (this.layout === 'scroll') {
-            this.scroll.left = this.canScroll('left');
-            this.scroll.right = this.canScroll('right');
-        }
-    }
-
-    doScroll(direction: 'left' | 'right') {
-        // 1 is enough because the browser will handle it via css snapping
-        const leftScroll = this.gridRef?.nativeElement.scrollLeft;
-        const rect = this.gridRef?.nativeElement.getBoundingClientRect();
-        // using scroll because it works more reliable than scrollBy
-        this.gridRef?.nativeElement.scroll({
-            left:
-                leftScroll +
-                Math.max(250, rect.width * this.ScrollingOffsetPercentage) *
-                    (direction === 'right' ? 1 : -1),
-            behavior: 'smooth',
-        });
-    }
-
-    isCustomTemplate() {
-        return this.entriesService.dataSource instanceof CustomTemplatesDataSource;
-    }
-}

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

@@ -1,100 +0,0 @@
-<div
-  class="grid-card"
-  [class.grid-card-collection]="nodeHelper.isNodeCollection(node)"
-  [class.dynamic-single-click]="entriesService.singleClickHint === 'dynamic'"
-  [style.background-color]="nodeHelper.isNodeCollection(node) ? node.collection.color : null"
-  (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>
-  <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>
-  <ng-container *ngIf="entriesService.elementInteractionType !== InteractionType.DefaultActionLink">
-    <ng-container *ngTemplateOutlet="image"></ng-container>
-    <ng-container *ngTemplateOutlet="meta"></ng-container>
-  </ng-container>
-</div>
-<ng-template #image let-playAnimation="playAnimation">
-  <div
-    class="card-image-area"
-    (click)="
-      entriesService.clickItem.emit({
-        element: node,
-        source: ClickSource.Preview
-      })
-    "
-  >
-    <es-preview-image
-      *ngIf="!(nodeHelper.isNodeCollection(node) && node.preview.isIcon)"
-      [node]="node"
-      [playAnimation]="playAnimation"
-    ></es-preview-image>
-    <div
-      *ngIf="nodeHelper.isNodeCollection(node) && node.preview.isIcon"
-      class="card-collection-image"
-    >
-      <i esIcon="layers"></i>
-    </div>
-  </div>
-</ng-template>
-<ng-template #meta>
-  <div
-    class="card-meta"
-    (click)="
-      entriesService.clickItem.emit({
-        element: node,
-        source: ClickSource.Metadata
-      })
-    "
-  >
-    <div
-      *ngFor="let displayPart of entriesService.columns; let first = first"
-      class="card-meta-row"
-    >
-      <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">
-        <es-list-base [item]="displayPart" [node]="node" [provideLabel]="false"> </es-list-base>
-      </ng-container>
-    </div>
-  </div>
-  <ng-container
-    *ngTemplateOutlet="templatesService.actionArea; context: { element: node }"
-  ></ng-container>
-</ng-template>

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

@@ -1,46 +0,0 @@
-$imageHeight: 100px;
-$entriesCardPaddingHorizontal: 15px;
-$entriesCardPaddingVertical: 8px;
-$topBarHeight: 40px;
-$collectionIconPadding: 25px;
-$collectionIconSize: 25px;
-
-@import '../node-entries-card/node-entries-card.main';
-
-.grid-card .card-meta-row ::ng-deep es-node-url {
-    a {
-        &.cdk-keyboard-focused {
-            // Normal focusColor might have insufficient contrast on color-matching background.
-            outline-color: var(--palette-primary-400);
-        }
-    }
-}
-
-.grid-card {
-    cursor: pointer;
-    &.grid-card-collection {
-        // default fallback color
-        background-color: rgb(var(--palette-primary-200));
-    }
-    .card-meta {
-        background-color: rgba(255, 255, 255, 0.8);
-        // grid-template-columns: 50%;
-        padding-bottom: $entriesCardPaddingVertical;
-
-        .card-meta-row {
-            &:nth-child(1) {
-                grid-column: 1/3;
-            }
-
-            &:nth-child(2) {
-                justify-self: flex-start;
-            }
-
-            &:nth-child(2),
-            &:nth-child(3) {
-                grid-row: 2;
-                font-size: var(--fontSizeXSmall);
-            }
-        }
-    }
-}