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

Commit fcac0c9

Browse files
author
Kamil Kisiela
committed
demo: add initials
1 parent 1955f90 commit fcac0c9

31 files changed

+582
-15
lines changed
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Getting started!
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const { Component, View, State } = angular2now;
2+
3+
@Component({
4+
selector: 'demo-index'
5+
})
6+
@View({
7+
templateUrl: 'client/components/demo-index/demo-index.html'
8+
})
9+
@State({
10+
name: 'demo.index',
11+
url: '/',
12+
defaultRoute: '/demo/'
13+
})
14+
class DemoIndexComponent {
15+
constructor() {
16+
}
17+
}
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<form flex name="vm.form" ng-submit="vm.submit()">
2+
<formly-form fields="vm.fields" model="vm.model" form="vm.form" options="vm.options">
3+
<md-button type="submit" class="md-primary">Submit</md-button>
4+
</formly-form>
5+
</form>
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const { Component, View } = angular2now;
2+
3+
@Component({
4+
selector: 'demo-view-form',
5+
bind: {
6+
fields: '=',
7+
model: '=?',
8+
options: '=?',
9+
form: '=?'
10+
}
11+
})
12+
@View({
13+
templateUrl: 'client/components/demo-view-form/demo-view-form.html'
14+
})
15+
class DemoViewFormComponent {
16+
constructor() {
17+
}
18+
}
Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<h3 class="md-headline purple-headline">Scope</h3>
2+
<md-tabs md-dynamic-height md-border-bottom>
3+
<md-tab label="{{::item.label}}" ng-repeat="item in vm.sources">
4+
<md-content class="md-padding">
5+
<div hljs hljs-language="json" hljs-source="item.source | json"></div>
6+
</md-content>
7+
</md-tab>
8+
<!-- fields definition -->
9+
<!--md-tab label="Fields definition">
10+
<md-content class="md-padding">
11+
<div hljs hljs-language="json" hljs-source="vm.fieldsCopy | json"></div>
12+
</md-content>
13+
</md-tab-->
14+
<!-- fields -->
15+
<!--md-tab label="Fields">
16+
<md-content class="md-padding">
17+
<div hljs hljs-language="json" hljs-source="vm.fields | json"></div>
18+
</md-content>
19+
</md-tab-->
20+
<!-- model -->
21+
<!--md-tab label="Model">
22+
<md-content class="md-padding">
23+
<div hljs hljs-language="json" hljs-source="vm.model | json"></div>
24+
</md-content>
25+
</md-tab-->
26+
<!-- form -->
27+
<!--md-tab label="Form">
28+
<md-content class="md-padding">
29+
<div hljs hljs-language="json" hljs-source="vm.form | json"></div>
30+
</md-content>
31+
</md-tab-->
32+
<!-- options -->
33+
<!--md-tab label="Options">
34+
<md-content class="md-padding">
35+
<div hljs hljs-language="json" hljs-source="vm.options | json"></div>
36+
</md-content>
37+
</md-tab-->
38+
</md-tabs>
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
const { Component, View } = angular2now;
2+
3+
@Component({
4+
selector: 'demo-view-source',
5+
bind: {
6+
fields: '=',
7+
model: '=?',
8+
options: '=?',
9+
form: '=?'
10+
}
11+
})
12+
@View({
13+
templateUrl: 'client/components/demo-view-source/demo-view-source.html'
14+
})
15+
class DemoViewSourceComponent {
16+
constructor() {
17+
this.sources = [];
18+
// make copy of fields
19+
this.fieldsInits = angular.copy(this.fields);
20+
21+
this.add(this.fieldsInits, 'Initial fields');
22+
this.add(this.fields, 'Fields');
23+
this.add(this.model, 'Model');
24+
this.add(this.form, 'Form');
25+
this.add(this.options, 'Options');
26+
}
27+
28+
add(source, label) {
29+
this.sources.push({
30+
label,
31+
source
32+
});
33+
}
34+
}
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div layout="column" layout-gt-md="row" layout-padding>
2+
3+
<h3 class="md-headline purple-headline" layout="row" layout-align="center center">
4+
<span flex>Example</span>
5+
<md-button ng-if="vm.api" href="{{vm.api}}" target="_blank">Go to API</md-button>
6+
</h3>
7+
8+
<demo-view-form flex fields="vm.fields" model="vm.model" options="vm.options" form="vm.form">
9+
</demo-view-form>
10+
11+
<demo-view-source flex fields="vm.fields" model="vm.model" options="vm.options" form="vm.form">
12+
</demo-view-source>
13+
</div>
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
const { Component, View, State, Inject } = angular2now;
2+
3+
@Component({
4+
selector: 'demo-view'
5+
})
6+
@View({
7+
templateUrl: 'client/components/demo-view/demo-view.html'
8+
})
9+
@State({
10+
name: 'demo.view',
11+
url: '/{id:[a-z\-]+}'
12+
})
13+
@Inject(['$stateParams', 'Examples'])
14+
class DemoViewComponent {
15+
constructor($stateParams, Examples) {
16+
this.id = $stateParams.id;
17+
this.Examples = Examples;
18+
19+
const example = Examples.get(this.id);
20+
21+
if (example) {
22+
this.fields = angular.copy(example.formly.fields);
23+
this.model = angular.copy(example.formly.model) || {};
24+
this.options = angular.copy(example.formly.options) || {};
25+
this.api = example.api;
26+
}
27+
}
28+
}

demo/client/components/demo/demo.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
#demo-sidenav {
2+
background: #35176A;
3+
}
4+
5+
#demo-sidenav-content {
6+
background: transparent;
7+
}
8+
9+
.purple-headline {
10+
color: #673AB7;
11+
}

demo/client/components/demo/demo.html

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,28 @@
1-
<div>
2-
<formly-form fields="vm.fields"></formly-form>
1+
<div layout="row" layout-fill>
2+
<md-sidenav class="md-sidenav-left md-whiteframe-z1" id="demo-sidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
3+
<md-toolbar md-scroll-shrink>
4+
<div class="md-toolbar-tools">
5+
<h3>
6+
<span>formlyMaterial</span>
7+
</h3>
8+
</div>
9+
</md-toolbar>
10+
<md-content role="navigation" id="demo-sidenav-content">
11+
<side-menu menu="vm.menu"></side-menu>
12+
</md-content>
13+
</md-sidenav>
14+
<md-content flex>
15+
<md-toolbar>
16+
<div class="md-toolbar-tools">
17+
<md-button class="md-icon-button hide-gt-sm" ng-click="vm.toggleMenu()" aria-label="Settings">
18+
<md-icon md-svg-icon="navigation:ic_menu_24px"></md-icon>
19+
</md-button>
20+
<h2>
21+
<span>Demo</span>
22+
</h2>
23+
</div>
24+
</md-toolbar>
25+
<ui-view></ui-view>
26+
</md-content>
27+
328
</div>

0 commit comments

Comments
 (0)