Skip to content
This repository was archived by the owner on Jan 6, 2025. It is now read-only.

Commit f5558de

Browse files
ThomasBurlesontinayuangao
ThomasBurleson
authored and
tinayuangao
committed
fix(api): support query children on API directives (#290)
* support DI of flexbox/api Directive classes * implement Directive method `activatedValue` getter/setter * to imperatively read current activated input value * to write API values with immediate style updates * implement demo using splitters (ngxSplit) with fxLayout and fxFlex layouts
1 parent 052a4a9 commit f5558de

21 files changed

+579
-78
lines changed

‎src/demo-app/app/demo-app/demo-app.css

+28
Original file line numberDiff line numberDiff line change
@@ -226,3 +226,31 @@ md-card-content pre {
226226
}
227227

228228
.fixed { height:275px; }
229+
230+
.ngx-split.row-split > .ngx-split-handle .ngx-split-button {
231+
top: 50%;
232+
left: 50%;
233+
cursor: col-resize;
234+
transform: translate(-50%, -50%);
235+
}
236+
.ngx-split.column-split > .ngx-split-handle .ngx-split-button {
237+
left: 50%;
238+
cursor: row-resize;
239+
top: -3px;
240+
transform: translateX(-50%) rotate(270deg);
241+
}
242+
.ngx-split .ngx-split-area {
243+
overflow: auto;
244+
}
245+
.ngx-split .ngx-split-handle {
246+
position: relative;
247+
}
248+
.ngx-split .ngx-split-handle .ngx-split-button {
249+
line-height: 0;
250+
font-size: 32px;
251+
position: absolute;
252+
display: block;
253+
padding: 0;
254+
}
255+
256+

‎src/demo-app/app/docs-layout-responsive/_module.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,16 @@ import { Component } from '@angular/core';
1313
})
1414
export class DemosResponsiveLayout { }
1515

16-
import {NgModule} from '@angular/core';
17-
import {FormsModule} from "@angular/forms";
16+
import {NgModule} from '@angular/core';
17+
import {FormsModule} from "@angular/forms";
18+
import {SharedModule} from '../shared/_module';
1819

1920
import {DemoResponsiveRows} from "./responsiveRowColumns.demo";
2021
import {DemoResponsiveLayoutDirection } from "./responsiveLayoutDirections.demo";
2122
import {DemoResponsiveShowHide} from "./responsiveShowHide.demo";
2223
import {DemoResponsiveFlexDirectives} from "./responsiveFlexDirective.demo";
2324
import {DemoResponsiveFlexOrder} from "./responsiveFlexOrder.demo";
2425
import {DemoResponsiveStyle} from "./responsiveStyle.demo";
25-
import {SharedModule} from '../shared/_module';
2626

2727
@NgModule({
2828
declarations : [

‎src/demo-app/app/docs-layout/_module.ts

+3-7
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,8 @@ export class DemosLayoutAPI {
1616
}
1717

1818
import {NgModule} from '@angular/core';
19-
import {CommonModule} from "@angular/common";
2019
import {FormsModule} from "@angular/forms";
21-
import {MaterialModule} from "@angular/material";
22-
import {FlexLayoutModule} from "../../../lib"; // `gulp build:components` to deploy to node_modules manually
20+
import {SharedModule} from '../shared/_module';
2321

2422
import {DemoLayoutAlignment} from "./layoutAlignment.demo";
2523
import {DemoFlexRowFill} from "./flexRowFill.demo";
@@ -42,10 +40,8 @@ import {DemoFlexAlignSelf} from "./FlexAlignSelf.demo";
4240
DemoFlexAlignSelf
4341
],
4442
imports: [
45-
CommonModule,
46-
FormsModule,
47-
MaterialModule,
48-
FlexLayoutModule
43+
SharedModule,
44+
FormsModule
4945
]
5046
})
5147
export class DemosLayoutAPIModule {

‎src/demo-app/app/github-issues/_module.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -8,31 +8,36 @@ import {Component} from '@angular/core';
88
<demo-issue-135> </demo-issue-135>
99
<demo-issue-181></demo-issue-181>
1010
<demo-issue-197></demo-issue-197>
11+
<demo-issue-266></demo-issue-266>
1112
`
1213
})
1314
export class DemosGithubIssues {
1415
}
1516

1617
import {NgModule} from '@angular/core';
18+
import {SplitModule} from './splitter/split.module';
1719

1820
import {DemoIssue5345} from "./issue.5345.demo";
1921
import {DemoIssue9897} from "./issue.9897.demo";
2022
import {DemoIssue135} from "./issue.135.demo";
2123
import {DemoIssue181} from './issue.181.demo';
2224
import {DemoIssue197} from './issue.197.demo';
25+
import {DemoIssue266} from './issue.266.demo';
2326
import {SharedModule} from '../shared/_module';
2427

28+
2529
@NgModule({
2630
declarations: [
2731
DemosGithubIssues, // used by the Router with the root app component
2832
DemoIssue5345,
2933
DemoIssue9897,
3034
DemoIssue135,
3135
DemoIssue181,
32-
DemoIssue197
36+
DemoIssue197,
37+
DemoIssue266
3338
],
3439
imports: [
35-
SharedModule
40+
SharedModule, SplitModule
3641
]
3742
})
3843
export class DemosGithubIssuesModule {

‎src/demo-app/app/github-issues/issue.181.demo.ts

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
import {Component, OnDestroy} from '@angular/core';
2-
import {Subscription} from "rxjs/Subscription";
1+
import {Component} from '@angular/core';
32
import 'rxjs/add/operator/filter';
43

5-
import {MediaChange} from "../../../lib/media-query/media-change";
6-
import {ObservableMedia} from "../../../lib/media-query/observable-media";
74

85
@Component({
96
selector: 'demo-issue-181',

‎src/demo-app/app/github-issues/issue.266.demo.css

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
.night-theme {
2+
background: #1c2029;
3+
color: #cfcfcf;
4+
}
5+
6+
.handle {
7+
outline: none;
8+
-webkit-user-select: none;
9+
user-select: none;
10+
z-index: 9999;
11+
height: 5px;
12+
display: block;
13+
padding: 0;
14+
margin: 0;
15+
position: relative;
16+
line-height: 0;
17+
}
18+
19+
.handle-row {
20+
width: 15px;
21+
top: 50%;
22+
left: -2px;
23+
transform: translateX(-50%) rotate(270deg);
24+
cursor: col-resize;;
25+
}
26+
27+
.handle-column {
28+
height: 15px;
29+
left: 50%;
30+
top: -4px;
31+
cursor: row-resize;
32+
}
33+
34+
.c2r1_header, .c2r2_header, .c1r1_header {
35+
background: #13141b;
36+
padding: 10px;
37+
height: 50px;
38+
margin: -8px -8px -9px -9px;
39+
font-size: 1.2em;
40+
font-weight: bold;
41+
color: #ffdb86;
42+
}
43+
44+
.c1r1 {
45+
background: #3949ab;
46+
padding: 10px;
47+
}
48+
49+
.c1r1_header {
50+
background: #2c3c7a;
51+
}
52+
53+
54+
.c2r2_header {
55+
margin-top: -9px;
56+
}
57+
58+
.c1r1_header {
59+
margin: -7px -9px -8px -9px;
60+
}
61+
62+
.c2r1_body {
63+
background: #009688;
64+
padding: 10px;
65+
}
66+
67+
.c2r1_header {
68+
background: #00695d;
69+
}
70+
71+
72+
.c2r2 {
73+
background: #9c27b0;
74+
padding: 10px;
75+
}
76+
77+
.c2r2_header {
78+
background: #5f1b6d;
79+
}
80+
81+
.c1r1 > *, .c2r1_header, .c2r1_body > *, .c2r2 > * {
82+
-khtml-user-select: none;
83+
-moz-user-select: none;
84+
-ms-user-select: none;
85+
user-select: none;
86+
}

‎src/demo-app/app/github-issues/issue.266.demo.ts

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import {Component} from '@angular/core';
2+
import 'rxjs/add/operator/filter';
3+
4+
@Component({
5+
selector: 'demo-issue-266',
6+
styleUrls: [ './issue.266.demo.css' ],
7+
template: `
8+
<md-card class="card-demo">
9+
<md-card-title>
10+
<a href="https://github.com/angular/flex-layout/issues/181" target="_blank">Issue #266</a>
11+
</md-card-title>
12+
<md-card-subtitle>Using ngxSplit with Flex-Layout:</md-card-subtitle>
13+
<md-card-content>
14+
<div class="night-theme">
15+
<div fxLayout="row" style="height:500px" ngxSplit="row">
16+
<div fxFlex="30%" ngxSplitArea class="c1r1" >
17+
<div class="c1r1_header" >Column #1 - Row #1</div>
18+
<ul>
19+
<li>2 Columns: 30% + 70%</li>
20+
<li>2nd Column: 2 rows</li>
21+
<li>2nd Column: 50% + 50%</li>
22+
</ul>
23+
</div>
24+
<div class="handle handle-row" ngxSplitHandle>
25+
<i class="material-icons">&#xE25D;</i>
26+
</div>
27+
<div fxFlex="70%" ngxSplitArea>
28+
<div fxLayout="column" fxFlexFill ngxSplit="column">
29+
<div fxFlex="50%" ngxSplitArea class="c2r1_body" >
30+
<div class="c2r1_header" >Column #2 - Row #1</div>
31+
<h1>Layout Dashboard</h1>
32+
<p>
33+
Demonstrate use of ngxSplit with the Flex-Layout API
34+
and flexbox css layouts.
35+
<br/><br/>
36+
Haxx0r ipsum cd ctl-c Starcraft concurrently salt unix baz class bar linux
37+
January 1, 1970 syn for mutex daemon todo mountain dew recursively. Mainframe
38+
wannabee machine code hack the mainframe do void python bin big-endian break
39+
tcp ddos emacs public frack.Over clock headers data private *.* pwned
40+
fork script kiddies.
41+
</p>
42+
</div>
43+
<div class="handle handle-column" ngxSplitHandle>
44+
<i class="material-icons">&#xE25D;</i>
45+
</div>
46+
<div fxFlex="50%" ngxSplitArea class="c2r2" >
47+
<div class="c2r2_header" >Column #2 - Row #2</div>
48+
<ul>
49+
<li>List Item #1</li>
50+
<li>List Item #2</li>
51+
<li>List Item #3</li>
52+
</ul>
53+
</div>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</md-card-content>
59+
</md-card>
60+
`
61+
})
62+
export class DemoIssue266 {
63+
}

‎src/demo-app/app/github-issues/splitter/split-area.directive.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Directive, Optional, Self } from '@angular/core';
2+
import { FlexDirective } from "../../../../lib";
3+
4+
@Directive({
5+
selector: '[ngxSplitArea]',
6+
host: {
7+
style: 'overflow: auto;'
8+
}
9+
})
10+
export class SplitAreaDirective {
11+
constructor(@Optional() @Self() public flex: FlexDirective) { }
12+
}

‎src/demo-app/app/github-issues/splitter/split-handle.directive.ts

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import { Directive, ElementRef, Output } from '@angular/core';
2+
import { Observable } from 'rxjs/Observable';
3+
import 'rxjs/add/operator/takeUntil';
4+
import 'rxjs/add/observable/fromEvent';
5+
import 'rxjs/add/operator/takeUntil';
6+
import 'rxjs/add/operator/switchMap';
7+
8+
@Directive({
9+
selector: '[ngxSplitHandle]',
10+
host: {
11+
class: 'ngx-split-handle',
12+
title : 'Drag to resize'
13+
}
14+
})
15+
export class SplitHandleDirective {
16+
17+
@Output() drag: Observable<{ x: number, y: number }>;
18+
19+
constructor(ref: ElementRef) {
20+
const getMouseEventPosition = (event: MouseEvent) => ({ x: event.movementX, y: event.movementY });
21+
22+
const mousedown$ = Observable.fromEvent(ref.nativeElement, 'mousedown').map(getMouseEventPosition);
23+
const mousemove$ = Observable.fromEvent(document, 'mousemove').map(getMouseEventPosition);
24+
const mouseup$ = Observable.fromEvent(document, 'mouseup');
25+
26+
this.drag = mousedown$
27+
.switchMap(mousedown =>
28+
mousemove$.map(mousemove => ({
29+
x: mousemove.x,
30+
y: mousemove.y
31+
}))
32+
.takeUntil(mouseup$)
33+
);
34+
}
35+
36+
}

‎src/demo-app/app/github-issues/splitter/split.component.scss

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
.ngx-split {
2+
&.row-split {
3+
> .ngx-split-handle .ngx-split-button {
4+
top: 50%;
5+
left: 50%;
6+
cursor: col-resize;
7+
transform: translate(-50%, -50%);
8+
}
9+
}
10+
11+
&.column-split {
12+
> .ngx-split-handle .ngx-split-button {
13+
left: 50%;
14+
cursor: row-resize;
15+
top: -3px;
16+
transform: translateX(-50%) rotate(270deg);
17+
}
18+
}
19+
20+
.ngx-split-area {
21+
overflow: auto;
22+
}
23+
24+
.ngx-split-handle {
25+
position: relative;
26+
27+
.ngx-split-button {
28+
line-height: 0;
29+
font-size: 32px;
30+
position: absolute;
31+
display: block;
32+
padding: 0;
33+
}
34+
}
35+
}
36+
37+
.icon-split-handle:before {
38+
content: "\f1aa";
39+
}

0 commit comments

Comments
 (0)