feature(wysiwyg): refactor

Author: k-belov

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.html

@@ -1,25 +1,23 @@
-<div class="slides-wrapper">
+<div class="slides-wrapper" tabindex="0">
   <button (click)="addSlide()">Add</button>
 
   <div
     (cdkDropListDropped)="droppedIntoList($event)"
     [class.dragging]="dragging"
     cdkDropList
-    multiselectList
-    [msModel]="selectionModel"
+    [multiselectList]="selectionModel"
   >
     <div
       (cdkDragDropped)="dropped()"
       (cdkDragEnded)="dragEnded()"
       (cdkDragStarted)="dragStarted($event)"
-      (click)="select($event, index)"
+      (click)="makeCurrent($event, index)"
       *ngFor="let slide of slides; let index = index; trackBy: trackBySlideId"
       [class.selected]="selectionModel.isSelected(slide.id)"
       [class.current]="index == currentSlideIndex"
       cdkDragLockAxis="y"
       cdkDrag
-      multiselectItem
-      [msItem]="slide.id"
+      [multiselectItem]="slide.id"
       class="slide-wrapper"
       role="button"
     >

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.scss

@@ -15,6 +15,10 @@
   background: #f8f8f8;
 }
 
+.slides-wrapper:focus {
+  outline: 0;
+}
+
 .slide-wrapper.current {
   border: 1px #ddd solid;
   box-shadow: 0 0 2px 1px #155ad0;

apps/codelab/src/app/admin/content/presentation-editor/side-panel/side-panel.component.ts

@@ -16,19 +16,10 @@ import { NavigationService } from '../services/navigation.service';
 import { ContentSlide } from '../types';
 
 import { MultiselectModel } from '../../../../multiselect/multiselect-model';
-
-function normalizeSelectionIndexes(indexes: number[]): number[] {
-  return indexes.filter(index => index >= 0);
-}
-
-function selectionModelToIndexes<T>(
-  items: T[],
-  model: MultiselectModel<T>
-): number[] {
-  return normalizeSelectionIndexes(
-    model.selected.map(item => items.indexOf(item))
-  );
-}
+import {
+  isFromContext,
+  KeyboardEventWithTarget
+} from '../../../../shared/helpers/helpers';
 
 function slideIdsMapper(slides: ContentSlide[]): string[] {
   return slides.map(slide => slide.id);
@@ -45,7 +36,6 @@ export class SidePanelComponent implements OnInit, OnChanges {
   @Input() presentationId!: string;
 
   public dragging: DragRef = null;
-  public elementHasFocus = false;
   public selectionModel: MultiselectModel<string> = new MultiselectModel();
   public slideIds: string[] = [];
 
@@ -79,48 +69,69 @@ export class SidePanelComponent implements OnInit, OnChanges {
   }
 
   @HostListener('document:keydown.arrowdown', ['$event'])
-  nextSlide(event: KeyboardEvent) {
-    if (this.elementHasFocus) {
+  nextSlide(event: KeyboardEventWithTarget<HTMLElement>) {
+    if (this.isFromSidePanelContext(event.target)) {
       this.navigationService.nextSlide(this.presentationId);
+
       event.preventDefault();
     }
   }
 
   @HostListener('document:keydown.arrowup', ['$event'])
-  prevSlide(event: KeyboardEvent) {
-    if (this.elementHasFocus) {
+  prevSlide(event: KeyboardEventWithTarget<HTMLElement>) {
+    if (this.isFromSidePanelContext(event.target)) {
       this.navigationService.previousSlide(this.presentationId);
+
       event.preventDefault();
     }
   }
 
-  @HostListener('document:keydown', ['$event'])
-  private handleKeyboardEvent(event: KeyboardEvent) {
-    if (!this.elementHasFocus) {
-      return;
-    }
-
-    if (event.key === 'Escape' && this.dragging) {
+  @HostListener('document:keydown.Escape', ['$event'])
+  private handleEscapeEvent(event: KeyboardEventWithTarget<HTMLElement>) {
+    if (this.isFromSidePanelContext(event.target) && this.dragging) {
       this.dragging.reset();
+
+      // This is a workaround to completely reset dragging
+      // https://stackoverflow.com/a/62537983
       document.dispatchEvent(new Event('mouseup'));
 
       event.preventDefault();
-    } else if (event.key === 'Delete') {
+    }
+  }
+
+  @HostListener('document:keydown.Delete', ['$event'])
+  private handleDeleteEvent(event: KeyboardEventWithTarget<HTMLElement>) {
+    if (this.isFromSidePanelContext(event.target)) {
+      const selectedSlideIndexes = this.getSelectedSlideIndexes();
+
       this.contentService.deleteSlides(
         this.presentationId,
-        selectionModelToIndexes(this.slideIds, this.selectionModel)
+        selectedSlideIndexes
       );
 
       event.preventDefault();
     }
   }
 
-  @HostListener('document:click', ['$event'])
-  private handleClickEvent(event: MouseEvent) {
-    this.elementHasFocus = this.el.nativeElement.contains(event.target);
+  @HostListener('document:keydown.control.a', ['$event'])
+  @HostListener('document:keydown.meta.a', ['$event'])
+  private handleCtrlMetaEvent(event: KeyboardEventWithTarget<HTMLElement>) {
+    if (this.isFromSidePanelContext(event.target)) {
+      this.selectionModel.toggleAll();
+
+      event.preventDefault();
+    }
+  }
+
+  private isFromSidePanelContext(target: HTMLElement): boolean {
+    return isFromContext(target, target =>
+      target.classList.contains('slides-wrapper')
+    );
   }
 
   dragStarted(event: CdkDragStart) {
+    // Undocumented reference to the underlying drag instance.
+    // Its needed to reset dragging
     this.dragging = event.source._dragRef;
   }
 
@@ -132,11 +143,8 @@ export class SidePanelComponent implements OnInit, OnChanges {
     this.dragging = null;
   }
 
-  droppedIntoList(event: CdkDragDrop<any, any>) {
-    const selectedSlideIndexes = selectionModelToIndexes(
-      this.slideIds,
-      this.selectionModel
-    );
+  droppedIntoList(event: CdkDragDrop<ElementRef<HTMLElement>>) {
+    const selectedSlideIndexes = this.getSelectedSlideIndexes();
 
     this.contentService.reorderSlides(
       this.presentationId,
@@ -149,11 +157,15 @@ export class SidePanelComponent implements OnInit, OnChanges {
     this.selectSingle(this.slides[this.currentSlideIndex].id);
   }
 
+  getSelectedSlideIndexes(): number[] {
+    return this.selectionModel.getSelectedIndexes();
+  }
+
   selectSingle(id: string) {
     this.selectionModel.selectSingle(id);
   }
 
-  select(event: MouseEvent, index: number) {
+  makeCurrent(event: MouseEvent, index: number) {
     if (!this.dragging) {
       this.navigationService.goToSlide(this.presentationId, index);
     }

apps/codelab/src/app/multiselect/multiselect-item.directive.ts

@@ -14,7 +14,7 @@ import {
   selector: '[multiselectItem]'
 })
 export class MultiselectItemDirective<T> {
-  @Input() msItem: T;
+  @Input() multiselectItem: T;
 
   constructor(
     public element: ElementRef<HTMLElement>,
@@ -24,11 +24,17 @@ export class MultiselectItemDirective<T> {
   @HostListener('click', ['$event'])
   private handleClickEvent(event: MouseEvent) {
     if (event.ctrlKey || event.metaKey) {
-      this.parentList.msModel.toggleSingle(this.msItem);
-    } else if (event.shiftKey) {
-      this.parentList.msModel.toggleContinuous(this.msItem);
-    } else {
-      this.parentList.msModel.selectSingle(this.msItem);
+      this.parentList.multiselectList.toggleSingle(this.multiselectItem);
+
+      return;
     }
+
+    if (event.shiftKey) {
+      this.parentList.multiselectList.toggleContinuous(this.multiselectItem);
+
+      return;
+    }
+
+    this.parentList.multiselectList.selectSingle(this.multiselectItem);
   }
 }

apps/codelab/src/app/multiselect/multiselect-list.directive.ts

@@ -1,10 +1,4 @@
-import {
-  Directive,
-  ElementRef,
-  HostListener,
-  InjectionToken,
-  Input
-} from '@angular/core';
+import { Directive, InjectionToken, Input } from '@angular/core';
 
 import { MultiselectModel } from './multiselect-model';
 
@@ -22,27 +16,5 @@ export const MULTISELECT_LIST = new InjectionToken<
   ]
 })
 export class MultiselectListDirective<T> {
-  elementHasFocus = false;
-
-  @Input() msModel: MultiselectModel<T>;
-
-  constructor(private readonly el: ElementRef) {}
-
-  @HostListener('document:click', ['$event'])
-  private handleClickEvent(event: MouseEvent) {
-    this.elementHasFocus = this.el.nativeElement.contains(event.target);
-  }
-
-  @HostListener('document:keydown', ['$event'])
-  private handleKeyboardEvent(event: KeyboardEvent) {
-    if (!this.elementHasFocus) {
-      return;
-    }
-
-    if (event.key === 'a' && (event.ctrlKey || event.metaKey)) {
-      this.msModel.toggleAll();
-
-      event.preventDefault();
-    }
-  }
+  @Input() multiselectList: MultiselectModel<T>;
 }

apps/codelab/src/app/multiselect/multiselect-model.spec.ts

@@ -140,6 +140,23 @@ describe('MultiselectModel', () => {
     });
   });
 
+  describe('getSelectedIndexes', () => {
+    it('returns selected indexes', () => {
+      model.toggleSingle(item1);
+
+      expect(model.getSelectedIndexes()).toEqual([0]);
+
+      model.clear();
+
+      expect(model.getSelectedIndexes()).toEqual([]);
+
+      model.toggleSingle('e');
+      model.toggleContinuous('c');
+
+      expect(model.getSelectedIndexes()).toEqual([4, 2, 3]);
+    });
+  });
+
   describe('emitChangeEvent', () => {
     it('should emit change event after selection', done => {
       const subscription = model.changed.subscribe(changes => {

apps/codelab/src/app/multiselect/multiselect-model.ts

@@ -77,6 +77,10 @@ export class MultiselectModel<T> {
     return this.selection.has(item);
   }
 
+  getSelectedIndexes(): number[] {
+    return this.selected.map(item => this.items.indexOf(item));
+  }
+
   clear(): void {
     this.selection.clear();
     this.emitChangeEvent();

apps/codelab/src/app/multiselect/multiselect.spec.ts

@@ -14,8 +14,8 @@ import { MultiselectItemDirective } from './multiselect-item.directive';
 
 @Component({
   template: `
-    <div [msModel]="selectionModel" multiselectList>
-      <div *ngFor="let item of items" [msItem]="item" multiselectItem>
+    <div [multiselectList]="selectionModel">
+      <div *ngFor="let item of items" [multiselectItem]="item">
         {{ item }}
       </div>
     </div>

apps/codelab/src/app/shared/helpers/helpers.ts

@@ -394,3 +394,24 @@ export function arrayMoveByIndex<T>(
   remainingValues.splice(normalizedToIndex, 0, ...moveValues);
   return remainingValues;
 }
+
+export type KeyboardEventWithTarget<T> = KeyboardEvent & {
+  target: T;
+};
+
+export function isFromContext(
+  target: HTMLElement,
+  compareFn: (target: HTMLElement) => boolean
+): boolean {
+  let parent = target;
+
+  while (parent) {
+    if (compareFn(parent)) {
+      return true;
+    }
+
+    parent = parent.parentElement;
+  }
+
+  return false;
+}