updated test app adding multiple examples

B-3PO · Jul 2, 2016 · c1cd958 · c1cd958
1 parent 241fe5d
commit c1cd958
Show file tree

Hide file tree

Showing 16 changed files with 497 additions and 19 deletions.
diff --git a/app/app.js b/app/app.js
@@ -11,9 +11,24 @@ configApp.$inject = ['$routeProvider'];
 function configApp($routeProvider) {
   $routeProvider
     .when('/', {
-      templateUrl: 'partials/home.html',
+      templateUrl: 'pages/home/home.html',
       controller: 'HomeController',
       controllerAs: 'vm'
     })
+    .when('/group', {
+      templateUrl: 'pages/group/group.html',
+      controller: 'GroupController',
+      controllerAs: 'vm'
+    })
+    .when('/autoexpand', {
+      templateUrl: 'pages/autoExpand/autoExpand.html',
+      controller: 'AutoExpandController',
+      controllerAs: 'vm'
+    })
+    .when('/multiple', {
+      templateUrl: 'pages/multiple/multiple.html',
+      controller: 'MultipleController',
+      controllerAs: 'vm'
+    })
     .otherwise('/');
 }
diff --git a/app/index.html b/app/index.html
@@ -19,7 +19,33 @@
   <!-- endinject  -->
 
 </head>
-<body ng-app="angularMaterialExpansionPanel">
-  <div ng-view></div>
+<body ng-app="angularMaterialExpansionPanel" layout="row">
+  <div flex role="main" tabindex="-1" layout="column">
+
+    <div ng-controller="NavController" class="nav-bar">
+      <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
+        <md-nav-item md-nav-href="#/" name="/">Panels</md-nav-item>
+        <md-nav-item md-nav-href="#/group" name="/group">Groups</md-nav-item>
+        <md-nav-item md-nav-href="#/autoexpand" name="/autoexpand">Auto Expand</md-nav-item>
+        <md-nav-item md-nav-href="#/multiple" name="/multiple">Multiple</md-nav-item>
+      </md-nav-bar>
+    </div>
+
+    <md-content md-scroll-y layout="column" flex>
+      <div ng-view flex="noshrink" class="view-container"></div>
+    </md-content>
+  </div>
+
+  <!-- <div ng-controller="NavController">
+    <md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
+      <md-nav-item md-nav-href="#/" name="/">Panels</md-nav-item>
+      <md-nav-item md-nav-href="#/group" name="/group">Groups</md-nav-item>
+    </md-nav-bar>
+  </div>
+
+  <md-content>
+    <div ng-view></div>
+  </md-content> -->
+
 </body>
 </html>
diff --git a/app/nav.controller.js b/app/nav.controller.js
@@ -0,0 +1,12 @@
+angular
+  .module('angularMaterialExpansionPanel')
+  .controller('NavController', NavController);
+
+
+
+NavController.$inject = ['$scope', '$rootScope'];
+function NavController($scope, $rootScope) {
+  $rootScope.$on('$routeChangeSuccess', function(event, current) {
+    $scope.currentNavItem = current.$$route.originalPath || '/';
+  });
+}
diff --git a/app/pages/autoExpand/autoExpand.controller.js b/app/pages/autoExpand/autoExpand.controller.js
@@ -0,0 +1,46 @@
+angular
+  .module('angularMaterialExpansionPanel')
+  .controller('AutoExpandController', AutoExpandController);
+
+
+
+AutoExpandController.$inject = ['$mdExpansionPanelGroup'];
+function AutoExpandController($mdExpansionPanelGroup) {
+  var vm = this;
+
+  var groupInstance;
+
+  vm.title = 'Panel Title';
+  vm.summary = 'Panel Summary text';
+  vm.content = 'Many were increasingly of the opinion that they’d all made a big mistake in coming down from the trees in the first place. And some said that even the trees had been a bad move, and that no one should ever have left the oceans.';
+
+  vm.addTemplated = addTemplated;
+
+  $mdExpansionPanelGroup('expansionPanelGroup').then(function (instance) {
+    groupInstance = instance;
+
+    instance.register('templated', {
+      templateUrl: 'pages/group/panels/templated/templated.html',
+      controller: 'TemplatedPanelController',
+      controllerAs: 'vm'
+    });
+
+    instance.add({
+      templateUrl: 'pages/group/panels/one/one.html',
+      controller: 'OnePanelController',
+      controllerAs: 'vm'
+    });
+  });
+
+  function addTemplated() {
+    groupInstance.add('templated', {
+      title: vm.title,
+      summary: vm.summary,
+      content: vm.content
+    }).then(function (panel) {
+      // panel.expand().then(function () {
+      //   console.log('opened post animation');
+      // });
+    });
+  }
+}
diff --git a/app/pages/autoExpand/autoExpand.html b/app/pages/autoExpand/autoExpand.html
@@ -0,0 +1,53 @@
+<h2>Group With Auto Expand</h2>
+
+
+<p>
+  <b>Expansion Panel Groups</b> with the <b>auto-expand</b> attribute will expand when added to the group
+</p>
+
+<div style="padding-top: 12px; padding-bottom: 36px;">
+  <md-divider></md-divider>
+</div>
+
+
+
+<md-expansion-panel-group md-component-id="expansionPanelGroup" auto-expand>
+</md-expansion-panel-group>
+
+<div style="padding-top: 64px; padding-bottom: 64px;">
+  <md-divider></md-divider>
+</div>
+
+<div>
+  <form name="theForm">
+    <div layout="row" layout-wrap>
+      <md-input-container>
+        <label>Title</label>
+        <input name="title" ng-model="vm.title" required />
+        <div ng-messages="theForm.title.$error">
+          <div ng-message="required">required</div>
+        </div>
+      </md-input-container>
+
+      <md-input-container>
+        <label>Summary</label>
+        <input name="summary" ng-model="vm.summary" required />
+        <div ng-messages="theForm.summary.$error">
+          <div ng-message="required">required</div>
+        </div>
+      </md-input-container>
+    </div>
+
+    <div layout="row">
+      <md-input-container flex>
+        <label>Content</label>
+        <textarea name="content" ng-model="vm.content" required></textarea>
+        <div ng-messages="theForm.content.$error">
+          <div ng-message="required">required</div>
+        </div>
+      </md-input-container>
+    </div>
+
+    <md-button class="md-primary" ng-disabled="theForm.$invalid" ng-click="vm.addTemplated()">Add Panel</md-button>
+  </form>
+</div>
diff --git a/app/pages/group/group.controller.js b/app/pages/group/group.controller.js
@@ -0,0 +1,48 @@
+angular
+  .module('angularMaterialExpansionPanel')
+  .controller('GroupController', GroupController);
+
+
+
+GroupController.$inject = ['$mdExpansionPanelGroup'];
+function GroupController($mdExpansionPanelGroup) {
+  var vm = this;
+
+  var groupInstance;
+
+  vm.title = 'Panel Title';
+  vm.summary = 'Panel Summary text';
+  vm.content = 'Many were increasingly of the opinion that they’d all made a big mistake in coming down from the trees in the first place. And some said that even the trees had been a bad move, and that no one should ever have left the oceans.';
+
+  vm.addTemplated = addTemplated;
+
+  $mdExpansionPanelGroup('expansionPanelGroup').then(function (instance) {
+    groupInstance = instance;
+
+    instance.register('templated', {
+      templateUrl: 'pages/group/panels/templated/templated.html',
+      controller: 'TemplatedPanelController',
+      controllerAs: 'vm'
+    });
+
+    instance.add({
+      templateUrl: 'pages/group/panels/one/one.html',
+      controller: 'OnePanelController',
+      controllerAs: 'vm'
+    }).then(function (panelInstance) {
+      panelInstance.expand();
+    });
+  });
+
+  function addTemplated() {
+    groupInstance.add('templated', {
+      title: vm.title,
+      summary: vm.summary,
+      content: vm.content
+    }).then(function (panel) {
+      // panel.expand().then(function () {
+      //   console.log('opened post animation');
+      // });
+    });
+  }
+}
diff --git a/app/pages/group/group.html b/app/pages/group/group.html
@@ -0,0 +1,52 @@
+<h2>Group</h2>
+
+<p>
+  <b>Expansion Panel Groups</b> allow you to controll a set of panels. You can add panels using templates and controllers. You can also register panels to add by a given name; and you can pass in locals.
+</p>
+
+<div style="padding-top: 12px; padding-bottom: 36px;">
+  <md-divider></md-divider>
+</div>
+
+
+
+<md-expansion-panel-group md-component-id="expansionPanelGroup">
+</md-expansion-panel-group>
+
+<div style="padding-top: 64px; padding-bottom: 64px;">
+  <md-divider></md-divider>
+</div>
+
+<div>
+  <form name="theForm">
+    <div layout="row" layout-wrap>
+      <md-input-container>
+        <label>Title</label>
+        <input name="title" ng-model="vm.title" required />
+        <div ng-messages="theForm.title.$error">
+          <div ng-message="required">required</div>
+        </div>
+      </md-input-container>
+
+      <md-input-container>
+        <label>Summary</label>
+        <input name="summary" ng-model="vm.summary" required />
+        <div ng-messages="theForm.summary.$error">
+          <div ng-message="required">required</div>
+        </div>
+      </md-input-container>
+    </div>
+
+    <div layout="row">
+      <md-input-container flex>
+        <label>Content</label>
+        <textarea name="content" ng-model="vm.content" required></textarea>
+        <div ng-messages="theForm.content.$error">
+          <div ng-message="required">required</div>
+        </div>
+      </md-input-container>
+    </div>
+
+    <md-button class="md-primary" ng-disabled="theForm.$invalid" ng-click="vm.addTemplated()">Add Panel</md-button>
+  </form>
+</div>
diff --git a/app/pages/group/panels/one/one.html b/app/pages/group/panels/one/one.html
@@ -0,0 +1,27 @@
+<md-expansion-panel md-component-id="expansionPanelOne">
+
+  <md-expansion-panel-collapsed>
+    <div class="md-title">Title</div>
+    <div class="md-summary">Summary</div>
+  </md-expansion-panel-collapsed>
+
+  <md-expansion-panel-expanded>
+
+    <md-expansion-panel-header>
+      <div class="md-title">Expanded Title</div>
+      <div class="md-summary">Expanded Summary</div>
+    </md-expansion-panel-header>
+
+    <md-expansion-panel-content>
+      <h4>Content</h4>
+      <p>Put content in here</p>
+    </md-expansion-panel-content>
+
+    <md-expansion-panel-footer>
+      <div flex></div>
+      <md-button class="md-warn" ng-click="$panel.collapse();">Collapse</md-button>
+    </md-expansion-panel-footer>
+
+  </md-expansion-panel-expanded>
+
+</md-expansion-panel>
diff --git a/app/pages/group/panels/one/onePanel.controller.js b/app/pages/group/panels/one/onePanel.controller.js
@@ -0,0 +1,9 @@
+angular
+  .module('angularMaterialExpansionPanel')
+  .controller('OnePanelController', OnePanelController);
+
+
+
+function OnePanelController() {
+
+}
diff --git a/app/pages/group/panels/templated/templated.controller.js b/app/pages/group/panels/templated/templated.controller.js
@@ -0,0 +1,13 @@
+angular
+  .module('angularMaterialExpansionPanel')
+  .controller('TemplatedPanelController', TemplatedPanelController);
+
+
+
+function TemplatedPanelController(title, summary, content) {
+  var vm = this;
+
+  vm.title = title;
+  vm.summary = summary;
+  vm.content = content;
+}
diff --git a/app/pages/group/panels/templated/templated.html b/app/pages/group/panels/templated/templated.html
@@ -0,0 +1,30 @@
+<md-expansion-panel>
+
+  <md-expansion-panel-collapsed>
+    <div class="md-title">{{vm.title}}</div>
+    <div class="md-summary">{{vm.summary}}</div>
+  </md-expansion-panel-collapsed>
+
+  <md-expansion-panel-expanded>
+
+    <md-expansion-panel-header>
+      <div class="md-title">{{vm.title}}</div>
+      <div class="md-summary">{{vm.summary}}</div>
+    </md-expansion-panel-header>
+
+    <md-expansion-panel-content>
+      <h4>Content</h4>
+      <p>
+        {{vm.content}}
+      </p>
+    </md-expansion-panel-content>
+
+    <md-expansion-panel-footer>
+      <div flex></div>
+      <md-button class="md-warn" ng-click="$panel.remove();">Remove</md-button>
+      <md-button class="md-primary" ng-click="$panel.collapse();">Collapse</md-button>
+    </md-expansion-panel-footer>
+
+  </md-expansion-panel-expanded>
+
+</md-expansion-panel>
diff --git a/app/home.controller.js → app/pages/home/home.controller.js b/app/home.controller.js → app/pages/home/home.controller.js