Issue 1239

packages/composer-playground/src/app/app.module.ts

@@ -55,6 +55,7 @@ import { ViewCertificateComponent } from './view-certificate';
 import { FileDragDropDirective } from './directives/file-drag-drop';
 import { CheckOverFlowDirective } from './directives/check-overflow';
 import { FocusHereDirective } from './directives/focus-here';
+import { DebounceDirective } from './directives/debounce';
 import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { AdminService } from './services/admin.service';
@@ -153,7 +154,8 @@ type StoreType = {
         TransactionComponent,
         VersionCheckComponent,
         ViewCertificateComponent,
-        WelcomeComponent
+        WelcomeComponent,
+        DebounceDirective
     ],
     imports: [ // import Angular's modules
         BrowserAnimationsModule,

packages/composer-playground/src/app/directives/debounce/debounce.directive.spec.ts

@@ -0,0 +1,59 @@
+/* tslint:disable:no-unused-variable */
+/* tslint:disable:no-unused-expression */
+/* tslint:disable:no-var-requires */
+/* tslint:disable:max-classes-per-file */
+import { ComponentFixture, TestBed, async, fakeAsync, tick, inject } from '@angular/core/testing';
+import { FormsModule } from '@angular/forms';
+import { Component, Renderer, } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+import * as sinon from 'sinon';
+import * as chai from 'chai';
+import { DebounceDirective } from './debounce.directive';
+
+let should = chai.should();
+
+@Component({
+    selector: 'test',
+    template: `
+        <input debounce [delay]="500" (debounceFunc)="onChange()" [(ngModel)]="value">
+    `
+})
+
+class TestComponent {
+    value: string = '';
+    clicked: boolean = false;
+    onChange = sinon.stub();
+}
+
+describe('DebounceDirective', () => {
+    let component: TestComponent;
+    let fixture: ComponentFixture<TestComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [TestComponent, DebounceDirective],
+            imports: [FormsModule]
+        })
+        .compileComponents();
+
+        fixture = TestBed.createComponent(TestComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    }));
+
+    it('should create the directive', async(() => {
+        component.should.be.ok;
+    }));
+
+    it('should call onChange after 500ms', async(fakeAsync(() => {
+        component = fixture.componentInstance;
+        let divEl = fixture.debugElement.query(By.css('input'));
+        let event = {};
+
+        divEl.nativeElement.dispatchEvent(new Event('keyup'));
+        fixture.detectChanges();
+        tick(500);
+        component.onChange.should.have.been.called;
+    })));
+});

packages/composer-playground/src/app/directives/debounce/debounce.directive.ts

@@ -0,0 +1,31 @@
+import {
+    EventEmitter,
+    ElementRef,
+    OnInit,
+    Directive,
+    Input,
+    Output
+} from '@angular/core';
+import { Observable } from 'rxjs';
+import { NgModel } from '@angular/forms';
+
+@Directive({
+    selector: '[debounce]'
+})
+export class DebounceDirective implements OnInit {
+    @Input() delay: number = 500;
+    @Output() debounceFunc: EventEmitter<any> = new EventEmitter();
+
+    constructor(private elementRef: ElementRef, private model: NgModel) {
+    }
+
+    ngOnInit(): void {
+        const eventStream = Observable.fromEvent(this.elementRef.nativeElement, 'keyup')
+            .map(() => {
+                return this.model.value;
+            })
+            .debounceTime(this.delay);
+        eventStream.subscribe((input) => this.debounceFunc.emit(input));
+    }
+
+}

packages/composer-playground/src/app/directives/debounce/index.ts

@@ -0,0 +1 @@
+export * from './debounce.directive';

packages/composer-playground/src/app/editor-file/editor-file.component.html

@@ -1,8 +1,8 @@
 <perfect-scrollbar class="readme" *ngIf="editorType === 'readme'" [innerHTML]="editorContent">
 </perfect-scrollbar>
 
-<codemirror name="editorCodeMirror" *ngIf="editorType === 'code'" [(ngModel)]="editorContent" [config]="codeConfig"
-            (ngModelChange)="onCodeChanged()" width="100%" height="100%" ngDefaultControl>
+<codemirror debounce name="editorCodeMirror" *ngIf="editorType === 'code'" [(ngModel)]="editorContent" [config]="codeConfig"
+            (debounceFunc)="onCodeChanged()" [delay]="700" width="100%" height="100%" ngDefaultControl>
 </codemirror>
 
 <div class="alert-area" role="alert" *ngIf="editorType !== 'readme' && currentError">

packages/composer-playground/src/app/editor-file/editor-file.component.spec.ts

@@ -33,6 +33,13 @@ class MockCodeMirrorDirective {
 class MockPerfectScrollBarDirective {
 }
 
+@Directive({
+    selector: '[debounce]'
+})
+class MockDebounceDirective {
+    @Input() delay;
+}
+
 describe('EditorFileComponent', () => {
     let component: EditorFileComponent;
     let fixture: ComponentFixture<EditorFileComponent>;
@@ -42,7 +49,7 @@ describe('EditorFileComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [FormsModule],
-            declarations: [EditorFileComponent, MockCodeMirrorDirective, MockPerfectScrollBarDirective],
+            declarations: [EditorFileComponent, MockCodeMirrorDirective, MockPerfectScrollBarDirective, MockDebounceDirective],
             providers: [
                 {provide: ClientService, useValue: mockClientService}]
         });