Commit 7d854682 authored by dmacfarlane's avatar dmacfarlane
Browse files

Moving demos into separate components

parent 7a7a65c4

README.md

+0 −7
Original line number Diff line number Diff line
@@ -61,10 +61,3 @@ For Example: 
#### Output Events



- `(searchTerm)=""` event emitted whenever the search term changes. Can be used to trigger async search.
 




#### TODO:



- Improve npm package structure

- Improve menu positioning

- Additional tests for options
 
 No newline at end of file

e2e/app.e2e-spec.ts

+4 −4
Original line number Diff line number Diff line
@@ -14,28 +14,28 @@ describe('angular2-mentions App', function() { 


  it('test mentions text field', () => {

    page.navigateTo();

    expect(page.getHeadingText()).toEqual('Angular 2 Mentions');

    expect(page.getHeadingText()).toEqual('Angular Mentions');

    let el = element.all(by.css('input')).first();

    testMentions(el);

  });



  it('test mentions text area', () => {

    page.navigateTo();

    expect(page.getHeadingText()).toEqual('Angular 2 Mentions');

    expect(page.getHeadingText()).toEqual('Angular Mentions');

    let el = element.all(by.css('textarea')).first();

    testMentions(el);

  });



  it('test mentions div', () => {

    page.navigateTo();

    expect(page.getHeadingText()).toEqual('Angular 2 Mentions');

    expect(page.getHeadingText()).toEqual('Angular Mentions');

    let el = element.all(by.css('div')).first();

    testMentions(el);

  });



  it('test mentions iframe', () => {

    page.navigateTo();

    expect(page.getHeadingText()).toEqual('Angular 2 Mentions');

    expect(page.getHeadingText()).toEqual('Angular Mentions');

    let el = element.all(by.id('tmce_ifr'));

    // iframe testing workaround - sendKeys is not working unless menu is opened first

    // this wasn't needed in previous versions of angular/protractor

src/app/app.component.html

+3 −6
Original line number Diff line number Diff line
@@ -7,12 +7,9 @@ and content editable fields. Try entering some @names below.</p> 
<h3>Minimal</h3>

<input [mention]="items" class="form-control" type="text">



<!--<h3>Minimal Async</h3>

<input [mention]="httpItems | async" [labelKey]="'label'" (searchTerm)='search($event)' class="form-control" type="text">-->

<!-- <app-demo-async></app-demo-async> -->



<!-- <h3>Options</h3>

<input [mention]="objectItems" class="form-control" type="text"

       [mentionConfig]="{triggerChar:'#',maxItems:10,labelKey:'name',valueKey:'value',mentionSelect:format}"> -->

<!-- <app-demo-options></app-demo-options> -->



<h3>Textarea</h3>

<textarea [mention]="items" class="form-control" cols="60" rows="4"></textarea>
@@ -21,7 +18,7 @@ and content editable fields. Try entering some @names below.</p> 
<div [mention]="items" class="form-control" contenteditable="true" style="border:1px lightgrey solid;min-height:88px"></div>



<h3>Embedded Editor</h3>

<tinymce></tinymce>

<app-demo-tinymce></app-demo-tinymce>



<br><p style="color:grey">angular2-mentions on <a href="">Github</a></p>

<a href="https://github.com/dmacfarlane/angular2-mentions"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>

src/app/app.component.ts

+3 −35
Original line number Diff line number Diff line 
import { Component } from '@angular/core';

import { Http } from '@angular/http';



import { Observable } from 'rxjs/Observable';

import { Subject } from 'rxjs/Subject';



import 'rxjs/add/operator/debounceTime';

import 'rxjs/add/operator/distinctUntilChanged';

import 'rxjs/add/operator/switchMap';

import 'rxjs/add/operator/toPromise';



import { COMMON_NAMES } from './common-names';



/**

 * Demo app showing usage of the mentions directive.

 */

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',
@@ -18,30 +12,4 @@ import { COMMON_NAMES } from './common-names'; 
})

export class AppComponent {

  items: string[] = COMMON_NAMES;

  httpItems: Observable<any[]>;

  private searchTermStream = new Subject();

  ngOnInit() {

    this.httpItems = this.searchTermStream

      .debounceTime(300)

      .distinctUntilChanged()

      .switchMap((term: string) => this.getItems(term));

  }

  search(term: string) {

    this.searchTermStream.next(term);

  }



  // this should be in a separate app.service.ts file

  constructor(private http: Http) { }

  getItems(term): Promise<any[]> {

    console.log('getItems:', term);

    // return this.http.get('api/names') // get all names

    return this.http.get('api/objects?label='+term) // get filtered names

               .toPromise()

               .then(data => {console.log(data); return data})

               .then(response => response.json().data)

               .catch(this.handleError);

  }

  handleError(e) {

    console.log(e);

  }

}

src/app/app.module.ts

+10 −6
Original line number Diff line number Diff line
@@ -2,13 +2,15 @@ import { BrowserModule } from '@angular/platform-browser'; 
import { HttpModule } from '@angular/http';

import { NgModule } from '@angular/core';



import { AppComponent } from './app.component';

import { MentionModule } from '../mention/mention.module';

import { TinyMCE } from './tinymce.component';



// Imports for loading & configuring the in-memory web api

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';

import { InMemoryDataService }  from './in-memory-data.service';

import { InMemoryDataService }  from './demo-async/in-memory-data.service';



import { AppComponent } from './app.component';

import { MentionModule } from '../mention/mention.module';

import { DemoAsyncComponent } from './demo-async/demo-async.component';

import { DemoOptionsComponent } from './demo-options/demo-options.component';

import { DemoTinymceComponent } from './demo-tinymce/demo-tinymce.component';



@NgModule({

  imports: [
@@ -19,7 +21,9 @@ import { InMemoryDataService } from './in-memory-data.service'; 
  ],

  declarations: [

    AppComponent,

    TinyMCE

    DemoAsyncComponent,

    DemoOptionsComponent,

    DemoTinymceComponent

  ],

  providers: [],

  bootstrap: [AppComponent]