demo: add initials

demo/client/components/demo-index/demo-index.html

@@ -0,0 +1 @@
+Getting started!

demo/client/components/demo-index/demo-index.js

@@ -0,0 +1,17 @@
+const { Component, View, State } = angular2now;
+
+@Component({
+  selector: 'demo-index'
+})
+@View({
+  templateUrl: 'client/components/demo-index/demo-index.html'
+})
+@State({
+  name: 'demo.index',
+  url: '/',
+  defaultRoute: '/demo/'
+})
+class DemoIndexComponent {
+  constructor() {
+  }
+}

demo/client/components/demo-view-form/demo-view-form.html

@@ -0,0 +1,5 @@
+<form flex name="vm.form" ng-submit="vm.submit()">
+  <formly-form fields="vm.fields" model="vm.model" form="vm.form" options="vm.options">
+    <md-button type="submit" class="md-primary">Submit</md-button>
+  </formly-form>
+</form>

demo/client/components/demo-view-form/demo-view-form.js

@@ -0,0 +1,18 @@
+const { Component, View } = angular2now;
+
+@Component({
+  selector: 'demo-view-form',
+  bind: {
+    fields: '=',
+    model: '=?',
+    options: '=?',
+    form: '=?'
+  }
+})
+@View({
+  templateUrl: 'client/components/demo-view-form/demo-view-form.html'
+})
+class DemoViewFormComponent {
+  constructor() {
+  }
+}

demo/client/components/demo-view-source/demo-view-source.html

@@ -0,0 +1,38 @@
+<h3 class="md-headline purple-headline">Scope</h3>
+<md-tabs md-dynamic-height md-border-bottom>
+  <md-tab label="{{::item.label}}" ng-repeat="item in vm.sources">
+    <md-content class="md-padding">
+      <div hljs hljs-language="json" hljs-source="item.source | json"></div>
+    </md-content>
+  </md-tab>
+  <!-- fields definition -->
+  <!--md-tab label="Fields definition">
+    <md-content class="md-padding">
+      <div hljs hljs-language="json" hljs-source="vm.fieldsCopy | json"></div>
+    </md-content>
+  </md-tab-->
+  <!-- fields -->
+  <!--md-tab label="Fields">
+    <md-content class="md-padding">
+      <div hljs hljs-language="json" hljs-source="vm.fields | json"></div>
+    </md-content>
+  </md-tab-->
+  <!-- model -->
+  <!--md-tab label="Model">
+    <md-content class="md-padding">
+      <div hljs hljs-language="json" hljs-source="vm.model | json"></div>
+    </md-content>
+  </md-tab-->
+  <!-- form -->
+  <!--md-tab label="Form">
+    <md-content class="md-padding">
+      <div hljs hljs-language="json" hljs-source="vm.form | json"></div>
+    </md-content>
+  </md-tab-->
+  <!-- options -->
+  <!--md-tab label="Options">
+    <md-content class="md-padding">
+      <div hljs hljs-language="json" hljs-source="vm.options | json"></div>
+    </md-content>
+  </md-tab-->
+</md-tabs>

demo/client/components/demo-view-source/demo-view-source.js

@@ -0,0 +1,34 @@
+const { Component, View } = angular2now;
+
+@Component({
+  selector: 'demo-view-source',
+  bind: {
+    fields: '=',
+    model: '=?',
+    options: '=?',
+    form: '=?'
+  }
+})
+@View({
+  templateUrl: 'client/components/demo-view-source/demo-view-source.html'
+})
+class DemoViewSourceComponent {
+  constructor() {
+    this.sources = [];
+    // make copy of fields
+    this.fieldsInits = angular.copy(this.fields);
+
+    this.add(this.fieldsInits, 'Initial fields');
+    this.add(this.fields, 'Fields');
+    this.add(this.model, 'Model');
+    this.add(this.form, 'Form');
+    this.add(this.options, 'Options');
+  }
+
+  add(source, label) {
+    this.sources.push({
+      label,
+      source
+    });
+  }
+}

demo/client/components/demo-view/demo-view.html

@@ -0,0 +1,13 @@
+<div layout="column" layout-gt-md="row" layout-padding>
+
+  <h3 class="md-headline purple-headline" layout="row" layout-align="center center">
+    <span flex>Example</span>
+    <md-button ng-if="vm.api" href="{{vm.api}}" target="_blank">Go to API</md-button>
+  </h3>
+
+  <demo-view-form flex fields="vm.fields" model="vm.model" options="vm.options" form="vm.form">
+  </demo-view-form>
+
+  <demo-view-source flex fields="vm.fields" model="vm.model" options="vm.options" form="vm.form">
+  </demo-view-source>
+</div>

demo/client/components/demo-view/demo-view.js

@@ -0,0 +1,28 @@
+const { Component, View, State, Inject } = angular2now;
+
+@Component({
+  selector: 'demo-view'
+})
+@View({
+  templateUrl: 'client/components/demo-view/demo-view.html'
+})
+@State({
+  name: 'demo.view',
+  url: '/{id:[a-z\-]+}'
+})
+@Inject(['$stateParams', 'Examples'])
+class DemoViewComponent {
+  constructor($stateParams, Examples) {
+    this.id = $stateParams.id;
+    this.Examples = Examples;
+
+    const example = Examples.get(this.id);
+
+    if (example) {
+      this.fields = angular.copy(example.formly.fields);
+      this.model = angular.copy(example.formly.model) || {};
+      this.options = angular.copy(example.formly.options) || {};
+      this.api = example.api;
+    }
+  }
+}

demo/client/components/demo/demo.css

@@ -0,0 +1,11 @@
+#demo-sidenav {
+  background: #35176A;
+}
+
+#demo-sidenav-content {
+  background: transparent;
+}
+
+.purple-headline {
+  color: #673AB7;
+}

demo/client/components/demo/demo.html

@@ -1,3 +1,28 @@
-<div>
-  <formly-form fields="vm.fields"></formly-form>
+<div layout="row" layout-fill>
+  <md-sidenav class="md-sidenav-left md-whiteframe-z1" id="demo-sidenav" md-component-id="left" md-is-locked-open="$mdMedia('gt-sm')">
+    <md-toolbar md-scroll-shrink>
+      <div class="md-toolbar-tools">
+        <h3>
+          <span>formlyMaterial</span>
+        </h3>
+      </div>
+    </md-toolbar>
+    <md-content role="navigation" id="demo-sidenav-content">
+      <side-menu menu="vm.menu"></side-menu>
+    </md-content>
+  </md-sidenav>
+  <md-content flex>
+    <md-toolbar>
+      <div class="md-toolbar-tools">
+        <md-button class="md-icon-button hide-gt-sm" ng-click="vm.toggleMenu()" aria-label="Settings">
+          <md-icon md-svg-icon="navigation:ic_menu_24px"></md-icon>
+        </md-button>
+        <h2>
+          <span>Demo</span>
+        </h2>
+      </div>
+    </md-toolbar>
+    <ui-view></ui-view>
+  </md-content>
+
 </div>

demo/client/components/demo/demo.js

@@ -1,5 +1,5 @@
 const {
-  SetModule, Component, View, State, bootstrap, options
+  SetModule, Component, View, State, Inject, bootstrap, options
 } = angular2now;
 
 options({
@@ -10,29 +10,41 @@ SetModule('demo', [
   'angular-meteor',
   'ui.router',
   'formlyMaterial',
-]);
+  'hljs'
+]).config(['$mdThemingProvider', '$mdIconProvider', ($mdThemingProvider, $mdIconProvider) => {
+  $mdThemingProvider.theme('default')
+    .primaryPalette('deep-purple')
+    .accentPalette('green')
+    .warnPalette('red')
+    .backgroundPalette('grey');
+
+  $mdIconProvider.iconSet('navigation',
+    `/packages/planettraining_material-design-icons/bower_components/material-design-icons/sprites/svg-sprite/svg-sprite-navigation.svg`);
+}]);
 
 @Component({
-  'selector': 'demo'
+  selector: 'demo'
 })
 @View({
   templateUrl: 'client/components/demo/demo.html'
 })
 @State({
   name: 'demo',
   url: '/demo',
-  defaultRoute: true,
+  abstract: true,
   html5Mode: true
 })
+@Inject(['Menu', '$mdSidenav'])
 class DemoComponent {
-  constructor() {
-    this.fields = [{
-      type: 'datepicker',
-      key: 'start',
-      templateOptions: {
-        placeholder: 'Start date'
-      }
-    }];
+  constructor(Menu, $mdSidenav) {
+    this.$mdSidenav = $mdSidenav;
+
+    this.menu = Menu.get();
+  }
+
+  toggleMenu() {
+    this.$mdSidenav('left')
+      .toggle();
   }
 }
 

demo/client/components/menu-heading/menu-heading.css

@@ -0,0 +1,9 @@
+menu-heading .menu-heading {
+  display: block;
+  line-height: 32px;
+  margin: 0;
+  padding: 8px 16px;
+  text-align: left;
+  color: rgba(255, 255, 255, 0.6);
+  text-transform: uppercase;
+}

demo/client/components/menu-heading/menu-heading.html

@@ -0,0 +1,3 @@
+<h2 class="md-subhead menu-heading">
+  {{::vm.name}}
+</h2>

demo/client/components/menu-heading/menu-heading.js

@@ -0,0 +1,15 @@
+const { Component, View } = angular2now;
+
+@Component({
+  selector: 'menu-heading',
+  bind: {
+    name: '='
+  }
+})
+@View({
+  templateUrl: 'client/components/menu-heading/menu-heading.html'
+})
+class MenuHeadingComponent {
+  constructor() {
+  }
+}

demo/client/components/menu-link/menu-link.css

@@ -0,0 +1,16 @@
+menu-link .menu-link {
+  border-radius: 0;
+  color: white;
+  cursor: pointer;
+  display: block;
+  align-items: inherit;
+  line-height: 40px;
+  margin: 0;
+  max-height: 40px;
+  overflow: hidden;
+  padding: 0px 16px;
+  text-align: left;
+  text-decoration: none;
+  white-space: normal;
+  width: 100%;
+}

demo/client/components/menu-link/menu-link.html

@@ -0,0 +1,3 @@
+<md-button class="menu-link" ui-sref="demo.view({id: vm.sectionId})">
+  {{::vm.sectionName}}
+</md-button>

demo/client/components/menu-link/menu-link.js

@@ -0,0 +1,15 @@
+const { Component, View } = angular2now;
+
+@Component({
+  selector: 'menu-link',
+  bind: {
+    sectionId: '=',
+    sectionName: '=',
+  }
+})
+@View({
+  templateUrl: 'client/components/menu-link/menu-link.html'
+})
+class MenuLinkComponent {
+
+}

demo/client/components/menu-toggle/menu-toggle.css

@@ -0,0 +1,20 @@
+menu-toggle .menu-toggle {
+  border-radius: 0;
+  color: white;
+  cursor: pointer;
+  display: block;
+  align-items: inherit;
+  line-height: 40px;
+  margin: 0;
+  max-height: 40px;
+  overflow: hidden;
+  padding: 0px 16px;
+  text-align: left;
+  text-decoration: none;
+  white-space: normal;
+  width: 100%;
+}
+
+menu-toggle menu-link .menu-link {
+  padding: 0px 16px 0 32px;
+}

demo/client/components/menu-toggle/menu-toggle.html

@@ -0,0 +1,8 @@
+<md-button class="menu-toggle" ng-click="vm.toggle()">
+  {{::vm.sectionName}}
+</md-button>
+<ul ng-show="vm.isOpen()">
+  <li ng-repeat="child in ::vm.sectionChildren">
+    <menu-link section-name="::child.name" section-id="::child.id"></menu-link>
+  </li>
+</ul>