Skip to content

Commit 8bb9424

Browse files
opiepjopiepj
committed
Merge pull request #11 from opiepj/feature/10-tictactoe
(#10) tictactoe and search module
2 parents 31e8f86 + 76b3899 commit 8bb9424

File tree

18 files changed

+601
-46
lines changed

18 files changed

+601
-46
lines changed

‎src/app/components/app.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
.top-nav {
2+
height: 56px;
3+
min-height: 56px;
4+
padding: 0 16px;
5+
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
6+
}
7+
8+
.top-nav h1 {
9+
width: 200px;
10+
float: left;
11+
font-size: 16px;
12+
font-weight: 400;
13+
letter-spacing: 0.005em;
14+
}
15+
.top-nav .logo {
16+
line-height:56px;
17+
display:inline-block;
18+
color:#FFF;
19+
padding:0 5px;
20+
font-weight:400;
21+
font-size:16px;
22+
position:relative
23+
}
24+
25+
26+
.top-nav ul {
27+
list-style-type: none;
28+
margin: 0;
29+
padding: 0 20px;
30+
}
31+
32+
.top-nav ul li {
33+
margin: 0;
34+
}
35+
.l-left {
36+
float: left;
37+
}
38+
39+
.top-nav {
40+
font-family:'Roboto',"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
41+
}
42+
43+
.top-nav .top-nav-button{
44+
line-height:56px;
45+
display:inline-block;
46+
color:#FFF;
47+
text-decoration:none;
48+
padding:0 10px;
49+
text-transform:uppercase;
50+
font-weight:400;
51+
font-size:16px;
52+
border:none;
53+
background:none;
54+
border-radius:0;
55+
position:relative
56+
}
57+
58+
59+
.top-nav .top-nav-button:hover{
60+
background-color: rgba(158, 158, 158, 0.2);
61+
}
62+
63+
a:active, a:hover {
64+
outline: 0px none;
65+
}
66+
67+
.ac-default-theme {
68+
background-color: rgb(25,118,210);
69+
color: rgb(255,255,255);
70+
}
71+
72+
73+
[layout=row] {
74+
-webkit-flex-direction: row;
75+
-ms-flex-direction: row;
76+
flex-direction: row;
77+
}
78+
[layout] {
79+
box-sizing: border-box;
80+
display: -webkit-flex;
81+
display: -moz-flex;
82+
display: -ms-flexbox;
83+
display: flex;
84+
}

‎src/app/components/app.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<header>
2+
<div layout="row" class="top-nav ac-default-theme">
3+
<img src="angular-shield.png" alt="Angular2" height="54" width="54">
4+
<span class="logo">{{ name | capitalize }} + Webpack</span>
5+
<ul>
6+
<li class="l-left">
7+
<a [router-link]=" ['/home'] "class="top-nav-button ac-default-theme">Home</a>
8+
</li>
9+
<li class="l-left">
10+
<a [router-link]=" ['/dashboard'] "class="top-nav-button ac-default-theme">Dashboard</a>
11+
</li>
12+
<li class="l-left">
13+
<a [router-link]=" ['/todo'] "class="top-nav-button ac-default-theme">Todo</a>
14+
</li>
15+
<li class="l-left">
16+
<a [router-link]=" ['/rxjs-examples', 'search'] "class="top-nav-button ac-default-theme">RxJs Examples</a>
17+
</li>
18+
</ul>
19+
</div>
20+
</header>
21+
22+
<main>
23+
<router-outlet></router-outlet>
24+
</main>
25+
26+
<footer>
27+
</footer>

‎src/app/components/app.ts‎

Lines changed: 6 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,17 @@ import {appPipes} from '../pipes/pipes';
2323
/*
2424
* Components
2525
*/
26-
/* TODO: Create these Components
26+
2727
// We use a folder if we want separate files
2828
import {Home} from './home/home';
2929
// Otherwise we only use one file for a component
3030
import {Dashboard} from './dashboard';
31-
// A simple example of a Component using a Service
32-
import {Todo} from './todo';
3331

34-
// RxJs examples
35-
import {RxJsExamples} from './rxjs-examples/rxjs-examples';
36-
*/
32+
// Example modules
33+
import {ExampleModules} from './example-modules/example-modules';
3734
// Use webpack's `require` to get files as a raw string using raw-loader
3835
let styles = require('./app.css');
36+
let template = require('./app.html');
3937

4038
/*
4139
* App Component
@@ -63,44 +61,12 @@ let styles = require('./app.css');
6361
],
6462
// include our .css file
6563
styles: [ styles ],
66-
template: `
67-
<header>
68-
<div layout="row" class="top-nav ac-default-theme">
69-
<img src="angular-shield.png" alt="Angular2" height="54" width="54">
70-
<span class="logo">{{ name | capitalize }} + Webpack</span>
71-
<ul>
72-
<li class="l-left">
73-
<a [router-link]=" ['/home'] "class="top-nav-button ac-default-theme">Home</a>
74-
</li>
75-
<li class="l-left">
76-
<a [router-link]=" ['/dashboard'] "class="top-nav-button ac-default-theme">Dashboard</a>
77-
</li>
78-
<li class="l-left">
79-
<a [router-link]=" ['/todo'] "class="top-nav-button ac-default-theme">Todo</a>
80-
</li>
81-
<li class="l-left">
82-
<a [router-link]=" ['/rxjs-examples', 'search'] "class="top-nav-button ac-default-theme">RxJs Examples</a>
83-
</li>
84-
</ul>
85-
</div>
86-
</header>
87-
88-
<main>
89-
<router-outlet></router-outlet>
90-
</main>
91-
92-
<footer>
93-
WebPack Angular 2 Starter by <a href="https://twitter.com/AngularClass">@AngularClass</a>
94-
</footer>
95-
`
64+
template: template
9665
})
9766
@RouteConfig([
98-
/* TODO: create these components
9967
{ path: '/', as: 'home', component: Home },
10068
{ path: '/dashboard', as: 'dashboard', component: Dashboard },
101-
{ path: '/todo', as: 'todo', component: Todo },
102-
{ path: '/rxjs-examples/...', as: 'rxjs-examples', component: RxJsExamples }
103-
*/
69+
{ path: '/example-modules/...', as: 'example-modules', component: ExampleModules }
10470
])
10571
export class App {
10672
name: string;

‎src/app/components/example-modules/example-modules.css‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
.example-modules-menu,
2+
.example-modules-menu ul {
3+
list-style: none;
4+
padding: 0;
5+
}
6+
7+
.example-modules-menu li {
8+
margin: 0;
9+
}
10+
11+
.example-modules-menu > li:nth-child(1) {
12+
border-top: none;
13+
}
14+
15+
.example-modules-menu .ac-button {
16+
border-radius: 0;
17+
color: inherit;
18+
cursor: pointer;
19+
display: block;
20+
line-height: 40px;
21+
margin: 0;
22+
max-height: 40px;
23+
overflow: hidden;
24+
padding: 0px 16px;
25+
text-align: left;
26+
text-decoration: none;
27+
white-space: normal;
28+
width: 100%;
29+
}
30+
31+
.example-modules-menu ac-select {
32+
/* Override md-select margins. With margins the menu will look incorrect and causes mobile list
33+
to not be scrollable.
34+
*/
35+
margin: 0;
36+
width: 100%;
37+
}
38+
39+
.example-modules-menu .ac-button.active {
40+
color: #03a9f4;
41+
}
42+
43+
ul.example-modules-menu li:hover {
44+
background: rgba(0, 0, 0, 0.1);
45+
}
46+
47+
.side-nav {
48+
background: #FFF;
49+
box-shadow: 3px 0 6px rgba(0, 0, 0, 0.3);
50+
width: 260px;
51+
bottom: 0;
52+
overflow: auto;
53+
}
54+
55+
nav {
56+
align-items: stretch;
57+
}
58+
59+
[layout] {
60+
box-sizing: border-box;
61+
display: -webkit-flex;
62+
display: -moz-flex;
63+
display: -ms-flexbox;
64+
display: flex;
65+
}
66+
67+
[layout=column] {
68+
-webkit-flex-direction: column;
69+
-ms-flex-direction: column;
70+
flex-direction: column;
71+
}
72+
73+
.wide {
74+
width: 100%;
75+
}
76+
77+
.example-modules-content {
78+
align-items: stretch;
79+
display: block;
80+
position: relative;
81+
overflow: auto;
82+
-webkit-overflow-scrolling: touch;
83+
}

‎src/app/components/example-modules/example-modules.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<div layout="row">
2+
<nav class="side-nav l-pinned-left l-layer-4 l-offset-nav">
3+
<ul class="example-modules-menu">
4+
<li>
5+
<a class="ac-button ac-default-theme"
6+
[router-link]=" ['./search'] "
7+
(click)="active = 0"
8+
[class.active]="active === 0">
9+
Search Github
10+
</a>
11+
</li>
12+
<li>
13+
<a class="ac-button md-default-theme"
14+
[router-link]=" ['./timeflies'] "
15+
(click)="active = 1"
16+
[class.active]="active === 1">Timeflies</a>
17+
</li>
18+
<li>
19+
<a class="ac-button md-default-theme"
20+
[router-link]=" ['./tictactoe'] "
21+
(click)="active = 2"
22+
[class.active]="active === 2">Tic tac toe</a>
23+
</li>
24+
<li>
25+
<a class="ac-button md-default-theme"
26+
[router-link]=" ['./draggable_div'] "
27+
(click)="active = 3"
28+
[class.active]="active === 3">Drag Element</a>
29+
</li>
30+
</ul>
31+
</nav>
32+
33+
<div layout="column" class="wide">
34+
<div class="example-modules-content">
35+
<router-outlet></router-outlet>
36+
</div>
37+
</div>
38+
39+
</div>

‎src/app/components/example-modules/example-modules.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
/// <reference path="../../../typings/_custom.d.ts" />
2+
3+
// Angular 2
4+
import {Component, View, CSSClass} from 'angular2/angular2';
5+
import {RouteConfig, routerDirectives} from 'angular2/router';
6+
// Modules
7+
import {Tictactoe} from './tictactoe-module/tictactoe';
8+
// View
9+
let template = require('./example-modules.html');
10+
let styles = require('./example-modules.css')
11+
@Component({
12+
selector: 'example-modules'
13+
})
14+
@RouteConfig([
15+
{ path: '/', redirectTo: '/search' },
16+
{ path: '/search', as: 'search', component: Search },
17+
{ path: '/tictactoe', as: 'tictactoe', component: Tictactoe }
18+
])
19+
@View({
20+
directives: [ routerDirectives, CSSClass ],
21+
// include our .css file
22+
styles: [ styles ], // Use webpack's `require` to get files as a raw string using raw-loader
23+
template: template
24+
})
25+
export class ExampleModules {
26+
active: number = 0;
27+
}

‎src/app/components/example-modules/search-module/directives/autosuggest.ts‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
/// <reference path="../../../../typings/_custom.d.ts" />
2+
3+
// Angular 2
4+
import {Directive, View, EventEmitter, ElementRef, LifecycleEvent} from 'angular2/angular2';
5+
6+
import {Github} from './Github';
7+
// RxJs
8+
import * as Rx from 'rx';
9+
10+
11+
@Directive({
12+
selector: 'input[type=text][autosuggest]',
13+
lifecycle: [ LifecycleEvent.onInit ],
14+
events: [ 'term', 'loading' ]
15+
})
16+
export class Autosuggest {
17+
term: EventEmitter = new EventEmitter();
18+
loading: EventEmitter = new EventEmitter();
19+
20+
constructor(private el: ElementRef, public github: Github) {
21+
22+
}
23+
onInit() {
24+
25+
(<any>Rx).Observable.fromEvent(this.el.nativeElement, 'keyup').
26+
map(e => e.target.value). // Project the text from the input
27+
filter((text: string) => text.length > 2). // Only if the text is longer than 2 characters
28+
debounce(250). // Pause for 250ms
29+
distinctUntilChanged(). // Only if the value has changed
30+
do(() => this.loading.next(true)).
31+
flatMapLatest((query: string) => this.github.search(query)). // send query to search service
32+
// here is the real action
33+
subscribe(
34+
(repos: string[]) => {
35+
// fire "term" event
36+
// the Search component is the listener
37+
this.loading.next(false);
38+
this.term.next(repos);
39+
},
40+
err => {
41+
console.log(err);
42+
this.loading.next(false);
43+
this.term.next(['ERROR, see console']);
44+
},
45+
() => {
46+
console.log('complete')
47+
this.loading.next(false);
48+
}
49+
)//subscribe
50+
}
51+
52+
}

0 commit comments

Comments
 (0)