From 31051d29f0fd7f343442672f0e7bf72736b94ca4 Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Sun, 13 Dec 2015 15:15:46 -0800 Subject: [PATCH] docs(user input): sample shuffle, revisions. alpha.53 closes #492 --- .../user-input/ts/app/app.component.html | 27 +++ .../user-input/ts/app/app.component.ts | 26 +++ .../docs/_examples/user-input/ts/app/boot.ts | 4 + .../user-input/ts/app/click-me.component.ts | 24 +++ .../user-input/ts/app/click-me2.component.ts | 18 ++ .../user-input/ts/app/keyup.components.ts | 88 ++++++++++ .../ts/app/little-tour.component.ts | 25 +++ .../user-input/ts/app/loop-back.component.ts | 12 ++ .../user-input/ts/{src => }/index.html | 8 +- .../docs/_examples/user-input/ts/plnkr.json | 8 + .../_examples/user-input/ts/src/app/app.html | 14 -- .../_examples/user-input/ts/src/app/app.ts | 147 ---------------- .../_examples/user-input/ts/src/plnkr.json | 3 - .../user-input/ts/{src => }/styles.css | 0 public/docs/ts/latest/guide/user-input.jade | 164 +++++++++++------- .../user-input/keyup-loop-back-anim.gif | Bin 0 -> 15276 bytes 16 files changed, 338 insertions(+), 230 deletions(-) create mode 100644 public/docs/_examples/user-input/ts/app/app.component.html create mode 100644 public/docs/_examples/user-input/ts/app/app.component.ts create mode 100644 public/docs/_examples/user-input/ts/app/boot.ts create mode 100644 public/docs/_examples/user-input/ts/app/click-me.component.ts create mode 100644 public/docs/_examples/user-input/ts/app/click-me2.component.ts create mode 100644 public/docs/_examples/user-input/ts/app/keyup.components.ts create mode 100644 public/docs/_examples/user-input/ts/app/little-tour.component.ts create mode 100644 public/docs/_examples/user-input/ts/app/loop-back.component.ts rename public/docs/_examples/user-input/ts/{src => }/index.html (52%) create mode 100644 public/docs/_examples/user-input/ts/plnkr.json delete mode 100644 public/docs/_examples/user-input/ts/src/app/app.html delete mode 100644 public/docs/_examples/user-input/ts/src/app/app.ts delete mode 100644 public/docs/_examples/user-input/ts/src/plnkr.json rename public/docs/_examples/user-input/ts/{src => }/styles.css (100%) create mode 100644 public/resources/images/devguide/user-input/keyup-loop-back-anim.gif diff --git a/public/docs/_examples/user-input/ts/app/app.component.html b/public/docs/_examples/user-input/ts/app/app.component.html new file mode 100644 index 0000000000..036b04c510 --- /dev/null +++ b/public/docs/_examples/user-input/ts/app/app.component.html @@ -0,0 +1,27 @@ +

+ +

+ +

+ +

+ +

Give me some keys!

+
+ +

keyup loop-back component

+
+

+ +

Give me some more keys!

+
+ +

Type away! Press [enter] when done.

+
+ +

Type away! Press [enter] or click elsewhere when done.

+
+ +

Little Tour of Heroes

+

Add a new hero

+
\ No newline at end of file diff --git a/public/docs/_examples/user-input/ts/app/app.component.ts b/public/docs/_examples/user-input/ts/app/app.component.ts new file mode 100644 index 0000000000..8cd10cc290 --- /dev/null +++ b/public/docs/_examples/user-input/ts/app/app.component.ts @@ -0,0 +1,26 @@ +// #docregion +import {Component} from 'angular2/core'; + +import {ClickMeComponent} from './click-me.component'; +import {ClickMeComponent2} from './click-me2.component'; + +import {LoopbackComponent} from './loop-back.component'; + +import {KeyUpComponent_v1, + KeyUpComponent_v2, + KeyUpComponent_v3, + KeyUpComponent_v4} from './keyup.components'; + +import {LittleTourComponent} from './little-tour.component'; + +@Component({ + selector: 'my-app', + templateUrl: 'app/app.component.html', + directives: [ + ClickMeComponent, ClickMeComponent2, + LoopbackComponent, + KeyUpComponent_v1, KeyUpComponent_v2, KeyUpComponent_v3, KeyUpComponent_v4, + LittleTourComponent + ] +}) +export class AppComponent { } diff --git a/public/docs/_examples/user-input/ts/app/boot.ts b/public/docs/_examples/user-input/ts/app/boot.ts new file mode 100644 index 0000000000..acb4b6229e --- /dev/null +++ b/public/docs/_examples/user-input/ts/app/boot.ts @@ -0,0 +1,4 @@ +import {bootstrap} from 'angular2/platform/browser'; +import {AppComponent} from './app.component'; + +bootstrap(AppComponent); \ No newline at end of file diff --git a/public/docs/_examples/user-input/ts/app/click-me.component.ts b/public/docs/_examples/user-input/ts/app/click-me.component.ts new file mode 100644 index 0000000000..50fc8feb84 --- /dev/null +++ b/public/docs/_examples/user-input/ts/app/click-me.component.ts @@ -0,0 +1,24 @@ +/* FOR DOCS ... MUST MATCH ClickMeComponent template +// #docregion click-me-button + +// #enddocregion click-me-button +*/ + +// #docregion +import {Component} from 'angular2/core'; + +// #docregion click-me-component +@Component({ + selector: 'click-me', + template: ` + + {{clickMessage}}` +}) +export class ClickMeComponent { + clickMessage = ''; + + onClickMe(){ + this.clickMessage ='You are my hero!'; + } +} +// #enddocregion click-me-component diff --git a/public/docs/_examples/user-input/ts/app/click-me2.component.ts b/public/docs/_examples/user-input/ts/app/click-me2.component.ts new file mode 100644 index 0000000000..32f78d272e --- /dev/null +++ b/public/docs/_examples/user-input/ts/app/click-me2.component.ts @@ -0,0 +1,18 @@ +// #docregion +import {Component} from 'angular2/core'; + +@Component({ + selector: 'click-me2', + template: ` + + {{clickMessage}}` +}) +export class ClickMeComponent2 { + clickMessage = ''; + clicks = 1; + + onClickMe2(event:any){ + let evtMsg = event ? ' Event target is '+ event.target.tagName : ''; + this.clickMessage = (`Click #${this.clicks++}. ${evtMsg}`) + } +} diff --git a/public/docs/_examples/user-input/ts/app/keyup.components.ts b/public/docs/_examples/user-input/ts/app/keyup.components.ts new file mode 100644 index 0000000000..728ea30b3a --- /dev/null +++ b/public/docs/_examples/user-input/ts/app/keyup.components.ts @@ -0,0 +1,88 @@ +// #docplaster +// #docregion +import {Component} from 'angular2/core'; + +// #docregion key-up-component-1 +@Component({ + selector: 'key-up1', +// #docregion key-up-component-1-template + template: ` + +

{{values}}

+ ` +// #enddocregion key-up-component-1-template +}) +// #docregion key-up-component-1-class, key-up-component-1-class-no-type +export class KeyUpComponent_v1 { + values=''; + +// #enddocregion key-up-component-1-class, key-up-component-1-class-no-type + /* + // #docregion key-up-component-1-class-no-type + // without strong typing + onKey(event:any) { + this.values += event.target.value + ' | '; + } + // #enddocregion key-up-component-1-class-no-type + */ + // #docregion key-up-component-1-class + // with strong typing + onKey(event:KeyboardEvent) { + this.values += (event.target).value + ' | '; + } +// #docregion key-up-component-1-class-no-type +} +// #enddocregion key-up-component-1,key-up-component-1-class, key-up-component-1-class-no-type + +////////////////////////////////////////// + +// #docregion key-up-component-2 +@Component({ + selector: 'key-up2', + template: ` + +

{{values}}

+ ` +}) +export class KeyUpComponent_v2 { + values=''; + onKey(value:string) { + this.values += value + ' | '; + } +} +// #enddocregion key-up-component-2 + + +////////////////////////////////////////// + +// #docregion key-up-component-3 +@Component({ + selector: 'key-up3', + template: ` + +

{{values}}

+ ` +}) +export class KeyUpComponent_v3 { + values=''; +} +// #enddocregion key-up-component-3 + + +////////////////////////////////////////// + +// #docregion key-up-component-4 +@Component({ + selector: 'key-up4', + template: ` + + +

{{values}}

+ ` +}) +export class KeyUpComponent_v4 { + values=''; +} +// #enddocregion key-up-component-4 diff --git a/public/docs/_examples/user-input/ts/app/little-tour.component.ts b/public/docs/_examples/user-input/ts/app/little-tour.component.ts new file mode 100644 index 0000000000..800837f6c1 --- /dev/null +++ b/public/docs/_examples/user-input/ts/app/little-tour.component.ts @@ -0,0 +1,25 @@ +// #docregion +import {Component} from 'angular2/core'; + +// #docregion little-tour +@Component({ + selector: 'little-tour', + template: ` + + + + + + ` +}) +export class LittleTourComponent { + heroes=['Windstorm', 'Bombasto', 'Magneta', 'Tornado']; + addHero(newHero:string) { + if (newHero) { + this.heroes.push(newHero); + } + } +} +// #enddocregion little-tour diff --git a/public/docs/_examples/user-input/ts/app/loop-back.component.ts b/public/docs/_examples/user-input/ts/app/loop-back.component.ts new file mode 100644 index 0000000000..34bb94d20a --- /dev/null +++ b/public/docs/_examples/user-input/ts/app/loop-back.component.ts @@ -0,0 +1,12 @@ +// #docregion +import {Component} from 'angular2/core'; +// #docregion loop-back-component +@Component({ + selector: 'loop-back', + template:` + +

{{box.value}}

+ ` +}) +export class LoopbackComponent { } +// #enddocregion loop-back-component diff --git a/public/docs/_examples/user-input/ts/src/index.html b/public/docs/_examples/user-input/ts/index.html similarity index 52% rename from public/docs/_examples/user-input/ts/src/index.html rename to public/docs/_examples/user-input/ts/index.html index fbe5722c9a..7c22ae280f 100644 --- a/public/docs/_examples/user-input/ts/src/index.html +++ b/public/docs/_examples/user-input/ts/index.html @@ -2,9 +2,9 @@ User Input - - - + + +