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
angular · May 24, 2017 · f5558de · f5558de
1 parent 052a4a9
commit f5558de
Show file tree

Hide file tree

Showing 21 changed files with 579 additions and 78 deletions.
diff --git a/src/demo-app/app/demo-app/demo-app.css b/src/demo-app/app/demo-app/demo-app.css
@@ -226,3 +226,31 @@ md-card-content pre {
 }
 
 .fixed { height:275px; }
+
+.ngx-split.row-split > .ngx-split-handle .ngx-split-button {
+  top: 50%;
+  left: 50%;
+  cursor: col-resize;
+  transform: translate(-50%, -50%);
+}
+.ngx-split.column-split > .ngx-split-handle .ngx-split-button {
+  left: 50%;
+  cursor: row-resize;
+  top: -3px;
+  transform: translateX(-50%) rotate(270deg);
+}
+.ngx-split .ngx-split-area {
+  overflow: auto;
+}
+.ngx-split .ngx-split-handle {
+  position: relative;
+}
+.ngx-split .ngx-split-handle .ngx-split-button {
+  line-height: 0;
+  font-size: 32px;
+  position: absolute;
+  display: block;
+  padding: 0;
+}
+
+
diff --git a/src/demo-app/app/docs-layout-responsive/_module.ts b/src/demo-app/app/docs-layout-responsive/_module.ts
@@ -13,16 +13,16 @@ import { Component } from '@angular/core';
 })
 export class DemosResponsiveLayout { }
 
-import {NgModule}            from '@angular/core';
-import {FormsModule}         from "@angular/forms";
+import {NgModule}     from '@angular/core';
+import {FormsModule}  from "@angular/forms";
+import {SharedModule} from '../shared/_module';
 
 import {DemoResponsiveRows}  from "./responsiveRowColumns.demo";
 import {DemoResponsiveLayoutDirection }  from "./responsiveLayoutDirections.demo";
 import {DemoResponsiveShowHide} from "./responsiveShowHide.demo";
 import {DemoResponsiveFlexDirectives} from "./responsiveFlexDirective.demo";
 import {DemoResponsiveFlexOrder} from "./responsiveFlexOrder.demo";
 import {DemoResponsiveStyle} from "./responsiveStyle.demo";
-import {SharedModule} from '../shared/_module';
 
 @NgModule({
   declarations : [

diff --git a/src/demo-app/app/docs-layout/_module.ts b/src/demo-app/app/docs-layout/_module.ts
@@ -16,10 +16,8 @@ export class DemosLayoutAPI {
 }
 
 import {NgModule}            from '@angular/core';
-import {CommonModule}        from "@angular/common";
 import {FormsModule}         from "@angular/forms";
-import {MaterialModule}      from "@angular/material";
-import {FlexLayoutModule}    from "../../../lib";     // `gulp build:components` to deploy to node_modules manually
+import {SharedModule}        from '../shared/_module';
 
 import {DemoLayoutAlignment} from "./layoutAlignment.demo";
 import {DemoFlexRowFill}     from "./flexRowFill.demo";
@@ -42,10 +40,8 @@ import {DemoFlexAlignSelf}   from "./FlexAlignSelf.demo";
     DemoFlexAlignSelf
   ],
   imports: [
-    CommonModule,
-    FormsModule,
-    MaterialModule,
-    FlexLayoutModule
+    SharedModule,
+    FormsModule
   ]
 })
 export class DemosLayoutAPIModule {

diff --git a/src/demo-app/app/github-issues/_module.ts b/src/demo-app/app/github-issues/_module.ts
@@ -8,31 +8,36 @@ import {Component} from '@angular/core';
       <demo-issue-135> </demo-issue-135>
       <demo-issue-181></demo-issue-181>
       <demo-issue-197></demo-issue-197>
+      <demo-issue-266></demo-issue-266>
   `
 })
 export class DemosGithubIssues {
 }
 
 import {NgModule}         from '@angular/core';
+import {SplitModule} from './splitter/split.module';
 
 import {DemoIssue5345}    from "./issue.5345.demo";
 import {DemoIssue9897}    from "./issue.9897.demo";
 import {DemoIssue135}     from "./issue.135.demo";
 import {DemoIssue181}     from './issue.181.demo';
 import {DemoIssue197}     from './issue.197.demo';
+import {DemoIssue266}     from './issue.266.demo';
 import {SharedModule}     from '../shared/_module';
 
+
 @NgModule({
   declarations: [
     DemosGithubIssues,      // used by the Router with the root app component
     DemoIssue5345,
     DemoIssue9897,
     DemoIssue135,
     DemoIssue181,
-    DemoIssue197
+    DemoIssue197,
+    DemoIssue266
   ],
   imports: [
-    SharedModule
+    SharedModule,  SplitModule
   ]
 })
 export class DemosGithubIssuesModule {

diff --git a/src/demo-app/app/github-issues/issue.181.demo.ts b/src/demo-app/app/github-issues/issue.181.demo.ts
@@ -1,9 +1,6 @@
-import {Component, OnDestroy} from '@angular/core';
-import {Subscription} from "rxjs/Subscription";
+import {Component} from '@angular/core';
 import 'rxjs/add/operator/filter';
 
-import {MediaChange} from "../../../lib/media-query/media-change";
-import {ObservableMedia} from "../../../lib/media-query/observable-media";
 
 @Component({
   selector: 'demo-issue-181',

diff --git a/src/demo-app/app/github-issues/issue.266.demo.css b/src/demo-app/app/github-issues/issue.266.demo.css
@@ -0,0 +1,86 @@
+.night-theme {
+  background: #1c2029;
+  color: #cfcfcf;
+}
+
+.handle {
+  outline: none;
+  -webkit-user-select: none;
+  user-select: none;
+  z-index: 9999;
+  height: 5px;
+  display: block;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  line-height: 0;
+}
+
+.handle-row {
+  width: 15px;
+  top: 50%;
+  left: -2px;
+  transform: translateX(-50%) rotate(270deg);
+  cursor: col-resize;;
+}
+
+.handle-column {
+  height: 15px;
+  left: 50%;
+  top: -4px;
+  cursor: row-resize;
+}
+
+.c2r1_header, .c2r2_header, .c1r1_header {
+  background: #13141b;
+  padding: 10px;
+  height: 50px;
+  margin: -8px -8px -9px -9px;
+  font-size: 1.2em;
+  font-weight: bold;
+  color: #ffdb86;
+}
+
+.c1r1 {
+  background: #3949ab;
+  padding: 10px;
+}
+
+.c1r1_header {
+  background: #2c3c7a;
+}
+
+
+.c2r2_header {
+  margin-top: -9px;
+}
+
+.c1r1_header  {
+  margin: -7px -9px -8px -9px;
+}
+
+.c2r1_body {
+  background: #009688;
+  padding: 10px;
+}
+
+.c2r1_header {
+  background: #00695d;
+}
+
+
+.c2r2 {
+  background: #9c27b0;
+  padding: 10px;
+}
+
+.c2r2_header {
+  background: #5f1b6d;
+}
+
+.c1r1 > *, .c2r1_header, .c2r1_body > *, .c2r2 > * {
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
diff --git a/src/demo-app/app/github-issues/issue.266.demo.ts b/src/demo-app/app/github-issues/issue.266.demo.ts
@@ -0,0 +1,63 @@
+import {Component} from '@angular/core';
+import 'rxjs/add/operator/filter';
+
+@Component({
+  selector: 'demo-issue-266',
+  styleUrls: [ './issue.266.demo.css' ],
+  template: `
+    <md-card class="card-demo">
+      <md-card-title>
+        <a href="https://github.com/angular/flex-layout/issues/181" target="_blank">Issue #266</a>
+      </md-card-title>
+      <md-card-subtitle>Using ngxSplit with Flex-Layout:</md-card-subtitle>
+      <md-card-content>
+        <div class="night-theme">
+          <div fxLayout="row" style="height:500px" ngxSplit="row">
+            <div fxFlex="30%" ngxSplitArea class="c1r1" >
+              <div class="c1r1_header" >Column #1 - Row #1</div>
+              <ul>
+                <li>2 Columns: 30% + 70%</li>
+                <li>2nd Column: 2 rows</li>
+                <li>2nd Column: 50% + 50%</li>
+              </ul>
+            </div>
+            <div class="handle handle-row" ngxSplitHandle>
+                <i class="material-icons">&#xE25D;</i>
+            </div>
+            <div fxFlex="70%" ngxSplitArea>
+              <div fxLayout="column" fxFlexFill ngxSplit="column">
+                <div fxFlex="50%" ngxSplitArea class="c2r1_body" >
+                  <div class="c2r1_header" >Column #2 - Row #1</div>
+                  <h1>Layout Dashboard</h1>
+                  <p>
+                    Demonstrate use of ngxSplit with the Flex-Layout API
+                    and flexbox css layouts.
+                    <br/><br/>
+                    Haxx0r ipsum cd ctl-c Starcraft concurrently salt unix baz class bar linux
+                    January 1, 1970 syn for mutex daemon todo mountain dew recursively. Mainframe
+                    wannabee machine code hack the mainframe do void python bin big-endian break
+                    tcp ddos emacs public frack.Over clock headers data private *.* pwned
+                    fork script kiddies.
+                  </p>
+                </div>
+                <div class="handle handle-column" ngxSplitHandle>
+                    <i class="material-icons">&#xE25D;</i>
+                </div>
+                <div fxFlex="50%" ngxSplitArea class="c2r2" >
+                  <div class="c2r2_header" >Column #2 - Row #2</div>
+                  <ul>
+                    <li>List Item #1</li>
+                    <li>List Item #2</li>
+                    <li>List Item #3</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </md-card-content>
+    </md-card>
+  `
+})
+export class DemoIssue266 {
+}
diff --git a/src/demo-app/app/github-issues/splitter/split-area.directive.ts b/src/demo-app/app/github-issues/splitter/split-area.directive.ts
@@ -0,0 +1,12 @@
+import { Directive, Optional, Self } from '@angular/core';
+import { FlexDirective } from "../../../../lib";
+
+@Directive({
+  selector: '[ngxSplitArea]',
+  host: {
+    style: 'overflow: auto;'
+  }
+})
+export class SplitAreaDirective {
+  constructor(@Optional() @Self() public flex: FlexDirective) { }
+}
diff --git a/src/demo-app/app/github-issues/splitter/split-handle.directive.ts b/src/demo-app/app/github-issues/splitter/split-handle.directive.ts
@@ -0,0 +1,36 @@
+import { Directive, ElementRef, Output } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/takeUntil';
+import 'rxjs/add/observable/fromEvent';
+import 'rxjs/add/operator/takeUntil';
+import 'rxjs/add/operator/switchMap';
+
+@Directive({
+  selector: '[ngxSplitHandle]',
+  host: {
+    class: 'ngx-split-handle',
+    title : 'Drag to resize'
+  }
+})
+export class SplitHandleDirective {
+
+  @Output() drag: Observable<{ x: number, y: number }>;
+
+  constructor(ref: ElementRef) {
+    const getMouseEventPosition = (event: MouseEvent) => ({ x: event.movementX, y: event.movementY });
+
+    const mousedown$ = Observable.fromEvent(ref.nativeElement, 'mousedown').map(getMouseEventPosition);
+    const mousemove$ = Observable.fromEvent(document, 'mousemove').map(getMouseEventPosition);
+    const mouseup$ = Observable.fromEvent(document, 'mouseup');
+
+    this.drag = mousedown$
+        .switchMap(mousedown =>
+          mousemove$.map(mousemove => ({
+            x: mousemove.x,
+            y: mousemove.y
+          }))
+          .takeUntil(mouseup$)
+        );
+  }
+
+}
diff --git a/src/demo-app/app/github-issues/splitter/split.component.scss b/src/demo-app/app/github-issues/splitter/split.component.scss
@@ -0,0 +1,39 @@
+.ngx-split {
+  &.row-split {
+    > .ngx-split-handle .ngx-split-button {
+      top: 50%;
+      left: 50%;
+      cursor: col-resize;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &.column-split {
+    > .ngx-split-handle .ngx-split-button {
+      left: 50%;
+      cursor: row-resize;
+      top: -3px;
+      transform: translateX(-50%) rotate(270deg);
+    }
+  }
+
+  .ngx-split-area {
+    overflow: auto;
+  }
+
+  .ngx-split-handle {
+    position: relative;
+
+    .ngx-split-button {
+      line-height: 0;
+      font-size: 32px;
+      position: absolute;
+      display: block;
+      padding: 0;
+    }
+  }
+}
+
+.icon-split-handle:before {
+  content: "\f1aa";
+}