More Polish (#2320)
Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
This commit is contained in:
Joe Milazzo
GitHub
parent
cd3a15fa3b
commit
5f11973696
34 changed files with 337 additions and 161 deletions
|
|
@ -2,11 +2,19 @@
|
|||
|
||||
<ng-container *ngIf="items.length > virtualizeAfter; else dragList">
|
||||
<div class="example-list list-group-flush">
|
||||
<!-- <li-virtual-scroll [items]="items" [itemHeight]="itemHeight" [viewCache]="BufferAmount">-->
|
||||
<!-- <div *liVirtualItem="let item; let i=index" class="d-flex list-container">-->
|
||||
<!-- <ng-container [ngTemplateOutlet]="handle" [ngTemplateOutletContext]="{ $implicit: item, idx: i, isVirtualized: true }"></ng-container>-->
|
||||
<!-- <ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>-->
|
||||
|
||||
<!-- <ng-container [ngTemplateOutlet]="removeBtn" [ngTemplateOutletContext]="{$implicit: item, idx: i}"></ng-container>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- </li-virtual-scroll>-->
|
||||
<virtual-scroller #scroll [items]="items" [bufferAmount]="BufferAmount" [parentScroll]="parentScroll">
|
||||
<div class="example-box" *ngFor="let item of scroll.viewPortItems; index as i; trackBy: trackByIdentity">
|
||||
|
||||
<div class="d-flex list-container">
|
||||
|
||||
<ng-container [ngTemplateOutlet]="handle" [ngTemplateOutletContext]="{ $implicit: item, idx: i, isVirtualized: true }"></ng-container>
|
||||
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
|
||||
|
||||
|
|
@ -16,13 +24,13 @@
|
|||
</virtual-scroller>
|
||||
</div>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #dragList>
|
||||
<div cdkDropList class="{{items.length > 0 ? 'example-list list-group-flush' : ''}}" (cdkDropListDropped)="drop($event)">
|
||||
<div class="example-box" *ngFor="let item of items; index as i" cdkDrag
|
||||
<div class="example-box" *ngFor="let item of items; index as i;" cdkDrag
|
||||
[cdkDragData]="item" cdkDragBoundary=".example-list"
|
||||
[cdkDragDisabled]="accessibilityMode || disabled || bulkMode" cdkDragPreviewContainer="parent">
|
||||
<div class="d-flex list-container">
|
||||
|
||||
<ng-container [ngTemplateOutlet]="handle" [ngTemplateOutletContext]="{ $implicit: item, idx: i, isVirtualized: false }"></ng-container>
|
||||
<ng-container [ngTemplateOutlet]="itemTemplate" [ngTemplateOutletContext]="{ $implicit: item, idx: i }"></ng-container>
|
||||
|
||||
|
|
@ -32,13 +40,6 @@
|
|||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #removeBtn let-item let-idx>
|
||||
<button class="btn btn-icon float-end" (click)="removeItem(item, idx)" *ngIf="showRemoveButton" [disabled]="disabled">
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
<span class="visually-hidden" attr.aria-labelledby="item.id--{{idx}}">{{t('remove-item-alt')}}</span>
|
||||
</button>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #handle let-item let-idx="idx" let-isVirtualized="isVirtualized">
|
||||
<div class="me-3 align-middle">
|
||||
<div class="align-middle" [ngClass]="{'accessibility-padding': accessibilityMode, 'bulk-padding': bulkMode}" *ngIf="accessibilityMode || bulkMode">
|
||||
|
|
@ -50,8 +51,8 @@
|
|||
</ng-container>
|
||||
<ng-container *ngIf="bulkMode">
|
||||
<label for="select-{{idx}}" class="form-label visually-hidden">{{t('bulk-select-label')}}</label>
|
||||
<input id="select-{{idx}}" class="form-check-input mt-0" type="checkbox" (change)="selectItem($event, item, idx)"
|
||||
[value]="bulkSelectionService.isCardSelected('sideNavStream', idx)">
|
||||
<input id="select-{{idx}}" class="form-check-input mt-0" type="checkbox" (change)="selectItem($event, idx)"
|
||||
[ngModel]="bulkSelectionService.isCardSelected('sideNavStream', idx)" [ngModelOptions]="{standalone: true}">
|
||||
</ng-container>
|
||||
|
||||
|
||||
|
|
@ -60,6 +61,13 @@
|
|||
</div>
|
||||
</ng-template>
|
||||
|
||||
<ng-template #removeBtn let-item let-idx>
|
||||
<button class="btn btn-icon float-end" (click)="removeItem(item, idx)" *ngIf="showRemoveButton" [disabled]="disabled">
|
||||
<i class="fa fa-times" aria-hidden="true"></i>
|
||||
<span class="visually-hidden" attr.aria-labelledby="item.id--{{idx}}">{{t('remove-item-alt')}}</span>
|
||||
</button>
|
||||
</ng-template>
|
||||
|
||||
<p class="visually-hidden" id="instructions">
|
||||
{{t('instructions-alt')}}
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import {
|
|||
ChangeDetectionStrategy,
|
||||
ChangeDetectorRef,
|
||||
Component,
|
||||
ContentChild,
|
||||
ContentChild, DestroyRef,
|
||||
EventEmitter,
|
||||
inject,
|
||||
Input,
|
||||
|
|
@ -16,7 +16,9 @@ import {NgIf, NgFor, NgTemplateOutlet, NgClass} from '@angular/common';
|
|||
import {TranslocoDirective} from "@ngneat/transloco";
|
||||
import {BulkSelectionService} from "../../../cards/bulk-selection.service";
|
||||
import {SeriesCardComponent} from "../../../cards/series-card/series-card.component";
|
||||
import {SideNavStream} from "../../../_models/sidenav/sidenav-stream";
|
||||
import {FormsModule} from "@angular/forms";
|
||||
import {takeUntilDestroyed} from "@angular/core/rxjs-interop";
|
||||
import {NgxVirtualScrollModule} from "@lithiumjs/ngx-virtual-scroll";
|
||||
|
||||
export interface IndexUpdateEvent {
|
||||
fromPosition: number;
|
||||
|
|
@ -36,7 +38,9 @@ export interface ItemRemoveEvent {
|
|||
styleUrls: ['./draggable-ordered-list.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
standalone: true,
|
||||
imports: [NgIf, VirtualScrollerModule, NgFor, NgTemplateOutlet, CdkDropList, CdkDrag, CdkDragHandle, TranslocoDirective, NgClass, SeriesCardComponent]
|
||||
imports: [NgIf, VirtualScrollerModule, NgFor, NgTemplateOutlet, CdkDropList, CdkDrag,
|
||||
CdkDragHandle, TranslocoDirective, NgClass, SeriesCardComponent, FormsModule,
|
||||
NgxVirtualScrollModule, NgxVirtualScrollModule]
|
||||
})
|
||||
export class DraggableOrderedListComponent {
|
||||
|
||||
|
|
@ -62,26 +66,37 @@ export class DraggableOrderedListComponent {
|
|||
* When enabled, draggability is disabled and a checkbox renders instead of order box or drag handle
|
||||
*/
|
||||
@Input() bulkMode: boolean = false;
|
||||
@Input({required: true}) itemHeight: number = 60;
|
||||
@Input() trackByIdentity: TrackByFunction<any> = (index: number, item: any) => `${item.id}_${item.order}_${item.title}`;
|
||||
@Output() orderUpdated: EventEmitter<IndexUpdateEvent> = new EventEmitter<IndexUpdateEvent>();
|
||||
@Output() itemRemove: EventEmitter<ItemRemoveEvent> = new EventEmitter<ItemRemoveEvent>();
|
||||
@ContentChild('draggableItem') itemTemplate!: TemplateRef<any>;
|
||||
|
||||
public readonly bulkSelectionService = inject(BulkSelectionService);
|
||||
public readonly destroyRef = inject(DestroyRef);
|
||||
|
||||
get BufferAmount() {
|
||||
return Math.min(this.items.length / 20, 20);
|
||||
}
|
||||
|
||||
constructor(private readonly cdRef: ChangeDetectorRef) { }
|
||||
log(a: any, b: any) {console.log('item: ', a, 'index', b)}
|
||||
|
||||
|
||||
constructor(private readonly cdRef: ChangeDetectorRef) {
|
||||
this.bulkSelectionService.selections$.pipe(
|
||||
takeUntilDestroyed(this.destroyRef)
|
||||
).subscribe((s) => {
|
||||
this.cdRef.markForCheck()
|
||||
});
|
||||
}
|
||||
|
||||
drop(event: CdkDragDrop<string[]>) {
|
||||
if (event.previousIndex === event.currentIndex) return;
|
||||
if (event.previousIndex === event.currentIndex) return;
|
||||
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
|
||||
this.orderUpdated.emit({
|
||||
fromPosition: event.previousIndex,
|
||||
toPosition: event.currentIndex,
|
||||
item: this.items[event.currentIndex],
|
||||
item: event.item.data,
|
||||
fromAccessibilityMode: false
|
||||
});
|
||||
this.cdRef.markForCheck();
|
||||
|
|
@ -110,7 +125,7 @@ export class DraggableOrderedListComponent {
|
|||
this.cdRef.markForCheck();
|
||||
}
|
||||
|
||||
selectItem(updatedVal: Event, item: SideNavStream, index: number) {
|
||||
selectItem(updatedVal: Event, index: number) {
|
||||
const boolVal = (updatedVal.target as HTMLInputElement).value == 'true';
|
||||
|
||||
this.bulkSelectionService.handleCardSelection('sideNavStream', index, this.items.length, boolVal);
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@
|
|||
</ng-template>
|
||||
|
||||
<app-draggable-ordered-list [items]="items" (orderUpdated)="orderUpdated($event)" [accessibilityMode]="accessibilityMode"
|
||||
[showRemoveButton]="false">
|
||||
[showRemoveButton]="false" [itemHeight]="148" [virtualizeAfter]="10">
|
||||
<ng-template #draggableItem let-item let-position="idx">
|
||||
<app-reading-list-item [ngClass]="{'content-container': items.length < 100, 'non-virtualized-container': items.length >= 100}" [item]="item" [position]="position" [libraryTypes]="libraryTypes"
|
||||
[promoted]="item.promoted" (read)="readChapter($event)" (remove)="itemRemoved($event, position)"></app-reading-list-item>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue