cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore(example): adds zippy example

Browse Source
This commit is contained in:
Pascal Precht
2015-06-22 10:52:00 +02:00
committed by Victor Berchet
parent dee0e008f5
commit 783654e6a3
7 changed files with 107 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
modules/examples/e2e_test/zippy_component/zippy_spec.dart Normal file
View File

@ -0,0 +1,5 @@
library examples.e2e_test.zippy_component.zippy_spec;
main() {
}

31
modules/examples/e2e_test/zippy_component/zippy_spec.ts Normal file
View File

@ -0,0 +1,31 @@
import {verifyNoBrowserErrors} from 'angular2/src/test_lib/e2e_util';
describe('Zippy Component', function() {
afterEach(verifyNoBrowserErrors);
describe('dynamic reflection', function() {
var URL = 'examples/src/zippy_component/index.html';
beforeEach(function() { browser.get(URL); });
it('should change the zippy title depending on it\'s state', function() {
var zippyTitle = element(by.css('.zippy__title'));
expect(zippyTitle.getText()).toEqual('▾ Details');
zippyTitle.click();
expect(zippyTitle.getText()).toEqual('▸ Details');
});
it('should have zippy content', function() {
expect(element(by.css('.zippy__content')).getText()).toEqual('This is some content.');
});
it('should toggle when the zippy title is clicked', function() {
element(by.css('.zippy__title')).click();
expect(element(by.css('.zippy__content')).isDisplayed()).toEqual(false);
element(by.css('.zippy__title')).click();
expect(element(by.css('.zippy__content')).isDisplayed()).toEqual(true);
});
});
});

11
modules/examples/src/zippy_component/index.html Normal file
View File

@ -0,0 +1,11 @@
<!doctype html>
<html>
<title>Zippy Angular 2.0</title>
<body>
<zippy-app>
Loading...
</zippy-app>
$SCRIPTS$
</body>
</html>

27
modules/examples/src/zippy_component/index.ts Normal file
View File

@ -0,0 +1,27 @@
import {bootstrap, Component, View, NgFor} from 'angular2/angular2';
import {reflector} from 'angular2/src/reflection/reflection';
import {ReflectionCapabilities} from 'angular2/src/reflection/reflection_capabilities';
import {Zippy} from './zippy';
@Component({selector: 'zippy-app'})
@View({
template: `
<zippy (open)="pushLog('open')" (close)="pushLog('close')" title="Details">
This is some content.
</zippy>
<ul>
<li *ng-for="var log of logs">{{log}}</li>
</ul>
`,
directives: [Zippy, NgFor]
})
class ZippyApp {
logs: Array<string> = [];
pushLog(log: string) { this.logs.push(log); }
}
export function main() {
reflector.reflectionCapabilities = new ReflectionCapabilities();
bootstrap(ZippyApp);
}

8
modules/examples/src/zippy_component/zippy.html Normal file
View File

@ -0,0 +1,8 @@
<div class="zippy">
<div (click)="toggle()" class="zippy__title">
{{ visible ? '&blacktriangledown;' : '&blacktriangleright;' }} {{title}}
</div>
<div [hidden]="!visible" class="zippy__content">
<content></content>
</div>
</div>

24
modules/examples/src/zippy_component/zippy.ts Normal file
View File

@ -0,0 +1,24 @@
import {Component, View, EventEmitter} from 'angular2/angular2';
import {ObservableWrapper} from 'angular2/src/facade/async';
@Component({
selector: 'zippy',
properties: ['title'],
events: ['openHandler: open', 'closeHandler: close']
})
@View({templateUrl: 'zippy.html'})
export class Zippy {
visible: boolean = true;
title: string = '';
openHandler: EventEmitter = new EventEmitter();
closeHandler: EventEmitter = new EventEmitter();
toggle() {
this.visible = !this.visible;
if (this.visible) {
ObservableWrapper.callNext(this.openHandler, null);
} else {
ObservableWrapper.callNext(this.closeHandler, null);
}
}
}

1
tools/broccoli/trees/browser_tree.ts
View File

@ -46,6 +46,7 @@ const kServedPaths = [
'examples/src/key_events', 'examples/src/key_events',
'examples/src/sourcemap', 'examples/src/sourcemap',
'examples/src/todo', 'examples/src/todo',
'examples/src/zippy_component',
'examples/src/material/button', 'examples/src/material/button',
'examples/src/material/checkbox', 'examples/src/material/checkbox',
'examples/src/material/dialog', 'examples/src/material/dialog',