Common drawer component

packages/composer-playground/package.json

@@ -88,6 +88,7 @@
     "opener": "^1.4.2",
     "socket.io": "^1.7.3",
     "typescript": "2.4.0",
+    "web-animations-js": "^2.2.5",
     "webpack": "^2.2.1"
   },
   "devDependencies": {

packages/composer-playground/src/app/common/drawer/active-drawer.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+
+/**
+ * A reference to the active drawer. Instances of this class
+ * can be injected into components passed as drawer content.
+ */
+@Injectable()
+export class ActiveDrawer {
+  /**
+   * Can be used to close the drawer, passing an optional result.
+   */
+  close(result?: any): void {} // tslint:disable-line:no-empty
+
+  /**
+   * Can be used to dismiss the drawer, passing an optional reason.
+   */
+  dismiss(reason?: any): void {} // tslint:disable-line:no-empty
+}

packages/composer-playground/src/app/common/drawer/content-ref.ts

@@ -0,0 +1,8 @@
+import {
+  ViewRef,
+  ComponentRef
+} from '@angular/core';
+
+export class ContentRef {
+  constructor(public nodes: any[], public viewRef?: ViewRef, public componentRef?: ComponentRef<any>) {}
+}

packages/composer-playground/src/app/common/drawer/drawer-backdrop.component.scss

@@ -0,0 +1,23 @@
+@import '../../../assets/styles/base/_colors.scss';
+@import '../../../assets/styles/base/_variables.scss';
+
+drawer-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  background-color: $black;
+  opacity: 0;
+
+  &.open {
+    opacity: 0.7;
+    transition: opacity .3s ease-out;
+  }
+
+  &.closing {
+    opacity: 0;
+    transition: opacity .3s ease-out;
+  }
+}

packages/composer-playground/src/app/common/drawer/drawer-backdrop.component.spec.ts

@@ -0,0 +1,55 @@
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+
+import { DrawerBackdropComponent } from './drawer-backdrop.component';
+import { DrawerDismissReasons } from './drawer-dismiss-reasons';
+
+import * as sinon from 'sinon';
+import * as chai from 'chai';
+
+let should = chai.should();
+
+describe('DrawerBackdropComponent', () => {
+  let sandbox;
+  let fixture: ComponentFixture<DrawerBackdropComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({declarations: [DrawerBackdropComponent]});
+
+    fixture = TestBed.createComponent(DrawerBackdropComponent);
+  });
+
+  it('should render backdrop with required CSS classes', () => {
+    fixture.detectChanges();
+
+    fixture.nativeElement.classList.contains('drawer-backdrop').should.be.true;
+  });
+
+  it('should produce a dismiss event on backdrop click', (done) => {
+    fixture.detectChanges();
+
+    fixture.componentInstance.dismissEvent.subscribe(($event) => {
+      try {
+        $event.should.equal(DrawerDismissReasons.BACKDROP_CLICK);
+      } catch (e) {
+        done.fail(e);
+      }
+      done();
+    });
+
+    fixture.nativeElement.click();
+  });
+
+  it('should not produce a dismiss event when click is not on backdrop', (done) => {
+    fixture.detectChanges();
+
+    fixture.componentInstance.dismissEvent.subscribe(($event) => {
+      done.fail(new Error('Should not trigger dismiss event'));
+    });
+
+    let childEl = document.createElement('div');
+    fixture.nativeElement.appendChild(childEl);
+    childEl.click();
+
+    setTimeout(done, 200);
+  });
+});

packages/composer-playground/src/app/common/drawer/drawer-backdrop.component.ts

@@ -0,0 +1,41 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  HostListener,
+  Input,
+  Output
+} from '@angular/core';
+
+import { DrawerDismissReasons } from './drawer-dismiss-reasons';
+
+@Component({
+  selector: 'drawer-backdrop',
+  template: '',
+  styleUrls: ['./drawer-backdrop.component.scss'.toString()]
+})
+export class DrawerBackdropComponent {
+
+  @HostBinding('class.closing')
+  @Input()
+  closing: boolean | string = false;
+
+  @HostBinding('class.open')
+  get isOpen() {
+    return !this.closing;
+  }
+
+  @HostBinding('class.drawer-backdrop') true;
+
+  @Output('dismissEvent') dismissEvent = new EventEmitter();
+
+  constructor(private _elRef: ElementRef) {}
+
+  @HostListener('click', ['$event.target'])
+  backdropClick(target): void {
+    if (this._elRef.nativeElement === target) {
+      this.dismissEvent.emit(DrawerDismissReasons.BACKDROP_CLICK);
+    }
+  }
+}

packages/composer-playground/src/app/common/drawer/drawer-dismiss-reasons.ts

@@ -0,0 +1,4 @@
+export enum DrawerDismissReasons {
+  BACKDROP_CLICK,
+  ESC
+}

packages/composer-playground/src/app/common/drawer/drawer-options.ts

@@ -0,0 +1,25 @@
+/**
+ * Represent options available when opening new drawers.
+ */
+export interface DrawerOptions {
+  /**
+   * Whether a backdrop element should be created for a given drawer (true by default).
+   * Alternatively, specify 'static' for a backdrop which doesn't close the drawer on click.
+   */
+  backdrop?: boolean | 'static';
+
+  /**
+   * An element to which to attach newly opened drawer windows.
+   */
+  container?: string;
+
+  /**
+   * Whether to close the drawer when escape key is pressed (true by default).
+   */
+  keyboard?: boolean;
+
+  /**
+   * Custom class to append to the drawer window
+   */
+  drawerClass?: string;
+}

packages/composer-playground/src/app/common/drawer/drawer-ref.ts

@@ -0,0 +1,93 @@
+import { Injectable, ComponentRef } from '@angular/core';
+
+import { DrawerBackdropComponent } from './drawer-backdrop.component';
+import { DrawerComponent } from './drawer.component';
+import { ContentRef } from './content-ref';
+
+/**
+ * A reference to a newly opened drawer.
+ */
+@Injectable()
+export class DrawerRef {
+  /**
+   * A promise that is resolved when a drawer is closed and rejected when a drawer is dismissed.
+   */
+  result: Promise<any>;
+
+  private resolve: (result?: any) => void;
+  private reject: (reason?: any) => void;
+
+  /**
+   * The instance of component used as drawer's content.
+   * Undefined when a TemplateRef is used as drawer's content.
+   */
+  get componentInstance(): any {
+    if (this.contentRef.componentRef) {
+      return this.contentRef.componentRef.instance;
+    }
+  }
+
+  // only needed to keep TS1.8 compatibility
+  set componentInstance(instance: any) {} // tslint:disable-line:no-empty
+
+  constructor(private drawerCmptRef: ComponentRef<DrawerComponent>, private contentRef: ContentRef, private backdropCmptRef?: ComponentRef<DrawerBackdropComponent>) {
+    drawerCmptRef.instance.dismissEvent.subscribe((reason: any) => { this.dismiss(reason); });
+    drawerCmptRef.instance.closedEvent.subscribe(() => { this.removeDrawerElements(); });
+    if (backdropCmptRef) {
+      backdropCmptRef.instance.dismissEvent.subscribe((reason: any) => { this.dismiss(reason); });
+    }
+
+    this.result = new Promise((resolve, reject) => {
+      this.resolve = resolve;
+      this.reject = reject;
+    });
+    // tslint:disable-next-line:no-empty
+    this.result.then(null, () => {});
+  }
+
+  /**
+   * Can be used to close a drawer, passing an optional result.
+   */
+  close(result?: any): void {
+    if (this.drawerCmptRef) {
+      this.resolve(result);
+      this.closeDrawer();
+    }
+  }
+
+  /**
+   * Can be used to dismiss a drawer, passing an optional reason.
+   */
+  dismiss(reason?: any): void {
+    if (this.drawerCmptRef) {
+      this.reject(reason);
+      this.closeDrawer();
+    }
+  }
+
+  private closeDrawer() {
+    this.drawerCmptRef.instance.closing = true;
+    if (this.backdropCmptRef) {
+      this.backdropCmptRef.instance.closing = true;
+    }
+  }
+
+  private removeDrawerElements() {
+    const windowNativeEl = this.drawerCmptRef.location.nativeElement;
+    windowNativeEl.parentNode.removeChild(windowNativeEl);
+    this.drawerCmptRef.destroy();
+
+    if (this.backdropCmptRef) {
+      const backdropNativeEl = this.backdropCmptRef.location.nativeElement;
+      backdropNativeEl.parentNode.removeChild(backdropNativeEl);
+      this.backdropCmptRef.destroy();
+    }
+
+    if (this.contentRef && this.contentRef.viewRef) {
+      this.contentRef.viewRef.destroy();
+    }
+
+    this.drawerCmptRef = null;
+    this.contentRef = null;
+  }
+}

packages/composer-playground/src/app/common/drawer/drawer-stack.ts

@@ -0,0 +1,100 @@
+import {
+  ApplicationRef,
+  Injectable,
+  Injector,
+  ReflectiveInjector,
+  ComponentFactory,
+  ComponentFactoryResolver,
+  ComponentRef,
+  TemplateRef
+} from '@angular/core';
+
+import { ContentRef } from './content-ref';
+import { DrawerBackdropComponent } from './drawer-backdrop.component';
+import { DrawerComponent } from './drawer.component';
+import { ActiveDrawer } from './active-drawer';
+import { DrawerRef } from './drawer-ref';
+
+@Injectable()
+export class DrawerStack {
+  private _backdropFactory: ComponentFactory<DrawerBackdropComponent>;
+  private _drawerFactory: ComponentFactory<DrawerComponent>;
+
+  constructor(
+      private _applicationRef: ApplicationRef, private _injector: Injector,
+      private _componentFactoryResolver: ComponentFactoryResolver) {
+    this._backdropFactory = _componentFactoryResolver.resolveComponentFactory(DrawerBackdropComponent);
+    this._drawerFactory = _componentFactoryResolver.resolveComponentFactory(DrawerComponent);
+  }
+
+  open(moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any, options): DrawerRef {
+    const containerSelector = options.container || 'body';
+    const containerEl = document.querySelector(containerSelector);
+
+    if (!containerEl) {
+      throw new Error(`The specified drawer container "${containerSelector}" was not found in the DOM.`);
+    }
+
+    const activeDrawer = new ActiveDrawer();
+    const contentRef = this._getContentRef(moduleCFR, contentInjector, content, activeDrawer);
+
+    let drawerCmptRef: ComponentRef<DrawerComponent>;
+    let backdropCmptRef: ComponentRef<DrawerBackdropComponent>;
+    let drawerRef: DrawerRef;
+
+    if (options.backdrop !== false) {
+      backdropCmptRef = this._backdropFactory.create(this._injector);
+      this._applicationRef.attachView(backdropCmptRef.hostView);
+      containerEl.appendChild(backdropCmptRef.location.nativeElement);
+    }
+    drawerCmptRef = this._drawerFactory.create(this._injector, contentRef.nodes);
+    this._applicationRef.attachView(drawerCmptRef.hostView);
+    containerEl.appendChild(drawerCmptRef.location.nativeElement);
+
+    drawerRef = new DrawerRef(drawerCmptRef, contentRef, backdropCmptRef);
+
+    activeDrawer.close = (result: any) => { drawerRef.close(result); };
+    activeDrawer.dismiss = (reason: any) => { drawerRef.dismiss(reason); };
+
+    this.applyDrawerOptions(drawerCmptRef.instance, options);
+
+    return drawerRef;
+  }
+
+  private applyDrawerOptions(drawerInstance: DrawerComponent, options: Object): void {
+    ['keyboard', 'drawerClass'].forEach((optionName: string) => {
+      if (this._isDefined(options[optionName])) {
+        drawerInstance[optionName] = options[optionName];
+      }
+    });
+  }
+
+  private _getContentRef(
+      moduleCFR: ComponentFactoryResolver, contentInjector: Injector, content: any,
+      context: ActiveDrawer): ContentRef {
+    if (!content) {
+      return new ContentRef([]);
+    } else if (content instanceof TemplateRef) {
+      const viewRef = content.createEmbeddedView(context);
+      this._applicationRef.attachView(viewRef);
+      return new ContentRef([viewRef.rootNodes], viewRef);
+    } else if (this._isString(content)) {
+      return new ContentRef([[document.createTextNode(`${content}`)]]);
+    } else {
+      const contentCmptFactory = moduleCFR.resolveComponentFactory(content);
+      const drawerContentInjector =
+          ReflectiveInjector.resolveAndCreate([{provide: ActiveDrawer, useValue: context}], contentInjector);
+      const componentRef = contentCmptFactory.create(drawerContentInjector);
+      this._applicationRef.attachView(componentRef.hostView);
+      return new ContentRef([[componentRef.location.nativeElement]], componentRef.hostView, componentRef);
+    }
+  }
+
+  private _isString(value: any): value is string {
+    return typeof value === 'string';
+  }
+
+  private _isDefined(value: any): boolean {
+    return value !== undefined && value !== null;
+  }
+}

packages/composer-playground/src/app/common/drawer/drawer.component.html

@@ -0,0 +1,3 @@
+<aside class="drawer-container" role="dialog">
+    <div class="drawer-content"><ng-content></ng-content></div>
+</aside>