feature(wysiwyg): refactor

Author: k-belov

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

@@ -6,6 +6,7 @@
     [class.dragging]="dragging"
     cdkDropList
     [multiselectList]="selectionModel"
+    class="slides-list"
   >
     <div
       (cdkDragDropped)="dropped()"

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

@@ -5,10 +5,9 @@
 }
 
 .slides-wrapper {
-  overflow-y: scroll;
   display: flex;
   flex-direction: column;
-  width: 200px;
+  width: 158px;
   height: 100%;
   padding: 0 4px;
   box-shadow: 1px 0 2px 0 #ddd;
@@ -33,7 +32,7 @@
   display: flex;
   justify-content: space-around;
   width: 100%;
-  min-height: 150px;
+  min-height: 100px;
   padding: 4px 20px;
   box-sizing: border-box;
   border: 1px solid #ddd;
@@ -46,6 +45,13 @@
   margin-top: 4px;
 }
 
+.slides-list {
+  max-height: calc(100vh - 21px - 40px);
+  width: 150px;
+  overflow: auto;
+  padding: 0 4px;
+}
+
 .slide {
   padding: 0;
   background: #fff;

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

@@ -37,7 +37,6 @@ export class SidePanelComponent implements OnInit, OnChanges {
 
   public dragging: DragRef = null;
   public selectionModel: MultiselectModel<string> = new MultiselectModel();
-  public slideIds: string[] = [];
 
   constructor(
     readonly el: ElementRef,
@@ -54,9 +53,9 @@ export class SidePanelComponent implements OnInit, OnChanges {
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.slides) {
-      this.slideIds = slideIdsMapper(changes.slides.currentValue);
+      const slideIds = slideIdsMapper(changes.slides.currentValue);
 
-      this.selectionModel.setItems(this.slideIds);
+      this.selectionModel.setItems(slideIds);
     }
   }
 

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

@@ -1,25 +1,13 @@
-import {
-  Directive,
-  ElementRef,
-  HostListener,
-  Inject,
-  Input
-} from '@angular/core';
-import {
-  MULTISELECT_LIST,
-  MultiselectListDirective
-} from './multiselect-list.directive';
+import { Directive, HostListener, Input } from '@angular/core';
+import { MultiselectListDirective } from './multiselect-list.directive';
 
 @Directive({
   selector: '[multiselectItem]'
 })
 export class MultiselectItemDirective<T> {
   @Input() multiselectItem: T;
 
-  constructor(
-    public element: ElementRef<HTMLElement>,
-    @Inject(MULTISELECT_LIST) public parentList: MultiselectListDirective<T>
-  ) {}
+  constructor(private readonly parentList: MultiselectListDirective<T>) {}
 
   @HostListener('click', ['$event'])
   private handleClickEvent(event: MouseEvent) {

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

@@ -1,19 +1,9 @@
-import { Directive, InjectionToken, Input } from '@angular/core';
+import { Directive, Input } from '@angular/core';
 
 import { MultiselectModel } from './multiselect-model';
 
-export const MULTISELECT_LIST = new InjectionToken<
-  MultiselectListDirective<any>
->('MultiselectList');
-
 @Directive({
-  selector: '[multiselectList]',
-  providers: [
-    {
-      provide: MULTISELECT_LIST,
-      useExisting: MultiselectListDirective
-    }
-  ]
+  selector: '[multiselectList]'
 })
 export class MultiselectListDirective<T> {
   @Input() multiselectList: MultiselectModel<T>;

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

@@ -11,11 +11,12 @@ import { MultiselectModule } from './multiselect.module';
 import { MultiselectModel } from './multiselect-model';
 import { MultiselectListDirective } from './multiselect-list.directive';
 import { MultiselectItemDirective } from './multiselect-item.directive';
+import { By } from '@angular/platform-browser';
 
 @Component({
   template: `
     <div [multiselectList]="selectionModel">
-      <div *ngFor="let item of items" [multiselectItem]="item">
+      <div class="item" *ngFor="let item of items" [multiselectItem]="item">
         {{ item }}
       </div>
     </div>
@@ -55,11 +56,9 @@ describe('Multiselect', () => {
 
     fixture.detectChanges();
 
-    const itemEls = fixture.componentInstance.multiselectItems.map(
-      item => item.element.nativeElement
-    );
+    const itemEls = fixture.debugElement.queryAll(By.css('.item'));
 
-    const itemEl = itemEls[0];
+    const itemEl = itemEls[0].nativeElement;
 
     itemEl.dispatchEvent(new MouseEvent('click'));
 
@@ -73,11 +72,9 @@ describe('Multiselect', () => {
 
     fixture.detectChanges();
 
-    const itemEls = fixture.componentInstance.multiselectItems.map(
-      item => item.element.nativeElement
-    );
+    const itemEls = fixture.debugElement.queryAll(By.css('.item'));
 
-    const itemEl = itemEls[0];
+    const itemEl = itemEls[0].nativeElement;
 
     itemEl.dispatchEvent(new MouseEvent('click'));
 
@@ -95,12 +92,10 @@ describe('Multiselect', () => {
 
     fixture.detectChanges();
 
-    const itemEls = fixture.componentInstance.multiselectItems.map(
-      item => item.element.nativeElement
-    );
+    const itemEls = fixture.debugElement.queryAll(By.css('.item'));
 
-    const itemFirstEl = itemEls[0];
-    const itemSecondEl = itemEls[1];
+    const itemFirstEl = itemEls[0].nativeElement;
+    const itemSecondEl = itemEls[1].nativeElement;
 
     itemFirstEl.dispatchEvent(new MouseEvent('click'));
 
@@ -125,12 +120,10 @@ describe('Multiselect', () => {
 
     fixture.detectChanges();
 
-    const itemEls = fixture.componentInstance.multiselectItems.map(
-      item => item.element.nativeElement
-    );
+    const itemEls = fixture.debugElement.queryAll(By.css('.item'));
 
-    const itemFirstEl = itemEls[0];
-    const itemSecondEl = itemEls[3];
+    const itemFirstEl = itemEls[0].nativeElement;
+    const itemSecondEl = itemEls[3].nativeElement;
 
     itemFirstEl.dispatchEvent(new MouseEvent('click'));