From c1cd958c025d70f0160a1e974af35c062a232d0e Mon Sep 17 00:00:00 2001
From: Ben Rubin <benrubin@Bens-MacBook-Pro-3.local>
Date: Sat, 2 Jul 2016 00:08:26 -0500
Subject: [PATCH] updated test app adding multiple examples

---
 app/app.js                                    | 17 +++++-
 app/index.html                                | 30 ++++++++-
 app/nav.controller.js                         | 12 ++++
 app/pages/autoExpand/autoExpand.controller.js | 46 ++++++++++++++
 app/pages/autoExpand/autoExpand.html          | 53 ++++++++++++++++
 app/pages/group/group.controller.js           | 48 +++++++++++++++
 app/pages/group/group.html                    | 52 ++++++++++++++++
 app/pages/group/panels/one/one.html           | 27 ++++++++
 .../group/panels/one/onePanel.controller.js   |  9 +++
 .../panels/templated/templated.controller.js  | 13 ++++
 .../group/panels/templated/templated.html     | 30 +++++++++
 app/{ => pages/home}/home.controller.js       |  0
 app/{partials => pages/home}/home.html        | 61 ++++++++++++++-----
 app/pages/multiple/multiple.controller.js     | 48 +++++++++++++++
 app/pages/multiple/multiple.html              | 53 ++++++++++++++++
 app/style.css                                 | 17 ++++++
 16 files changed, 497 insertions(+), 19 deletions(-)
 create mode 100644 app/nav.controller.js
 create mode 100644 app/pages/autoExpand/autoExpand.controller.js
 create mode 100644 app/pages/autoExpand/autoExpand.html
 create mode 100644 app/pages/group/group.controller.js
 create mode 100644 app/pages/group/group.html
 create mode 100644 app/pages/group/panels/one/one.html
 create mode 100644 app/pages/group/panels/one/onePanel.controller.js
 create mode 100644 app/pages/group/panels/templated/templated.controller.js
 create mode 100644 app/pages/group/panels/templated/templated.html
 rename app/{ => pages/home}/home.controller.js (100%)
 rename app/{partials => pages/home}/home.html (61%)
 create mode 100644 app/pages/multiple/multiple.controller.js
 create mode 100644 app/pages/multiple/multiple.html
 create mode 100644 app/style.css
diff --git a/app/app.js b/app/app.js
index ec3e17f..c088dfe 100644
--- 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
index b879db2..effb8dc 100644
--- 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
new file mode 100644
index 0000000..63cb8fb
--- /dev/null
+++ 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
new file mode 100644
index 0000000..20cb4c8
--- /dev/null
+++ 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
new file mode 100644
index 0000000..797ddb9
--- /dev/null
+++ 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
new file mode 100644
index 0000000..f427701
--- /dev/null
+++ 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
new file mode 100644
index 0000000..96748a5
--- /dev/null
+++ 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
new file mode 100644
index 0000000..b3c47ab
--- /dev/null
+++ 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
new file mode 100644
index 0000000..e5e8cbd
--- /dev/null
+++ 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
new file mode 100644
index 0000000..40d17fe
--- /dev/null
+++ 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
new file mode 100644
index 0000000..d87c9ac
--- /dev/null
+++ 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 b/app/pages/home/home.controller.js
similarity index 100%
rename from app/home.controller.js
rename to app/pages/home/home.controller.js
diff --git a/app/partials/home.html b/app/pages/home/home.html
similarity index 61%
rename from app/partials/home.html
rename to app/pages/home/home.html
index 8cf6e2b..02c8561 100644
--- a/app/partials/home.html
+++ b/app/pages/home/home.html
@@ -1,7 +1,15 @@
-<!-- <div style="padding: 50px"></div> -->
-<!-- <md-content md-scroll-y style="height: 500px;"> -->
+<h2>Panels</h2>
+
+
+<p>
+  <b>Expansion Panels</b> have an collapsed section and a expanded section. Optionally you can add a header and footer to the expanded sections. By default bothe the header and footer will stick to the tops and bottoms of the md-content container they are in, but you can disable that.
+</p>
+
+<div style="padding-top: 12px; padding-bottom: 36px;">
+  <md-divider></md-divider>
+</div>
+
 
-<h2>Home</h2>
 
 <md-expansion-panel md-component-id="expansionPanelOne">
 
@@ -35,15 +43,15 @@ <h4>Content</h4>
 <md-expansion-panel>
 
   <md-expansion-panel-collapsed>
-    <div class="md-title">Title</div>
-    <div class="md-summary">Summary</div>
+    <div class="md-title">Sticky</div>
+    <div class="md-summary">header and footer will stick</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>
+      <div class="md-title">Sticky</div>
+      <div class="md-summary">header and footer will stick</div>
     </md-expansion-panel-header>
 
     <md-expansion-panel-content>
@@ -90,23 +98,47 @@ <h4>Content</h4>
 <md-expansion-panel>
 
   <md-expansion-panel-collapsed>
-    <div class="md-title">Title</div>
-    <div class="md-summary">Summary</div>
+    <div class="md-title">No Sticky</div>
+    <div class="md-summary">header and footer sticky disabled</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-no-sticky>
+      <div class="md-title">No Sticky</div>
+      <div class="md-summary">header and footer sticky disabled</div>
     </md-expansion-panel-header>
 
     <md-expansion-panel-content>
       <h4>Content</h4>
       <p>Put content in here</p>
+
+      <h4>Content</h4>
+      <p>Put content in here</p>
+
+      <h4>Content</h4>
+      <p>Put content in here</p>
+
+      <h4>Content</h4>
+      <p>Put content in here</p>
+
+      <h4>Content</h4>
+      <p>Put content in here</p>
+
+      <h4>Content</h4>
+      <p>Put content in here</p>
+
+      <h4>Content</h4>
+      <p>Put content in here</p>
+
+      <h4>Content</h4>
+      <p>Put content in here</p>
+
+      <h4>Content</h4>
+      <p>Put content in here</p>
     </md-expansion-panel-content>
 
-    <md-expansion-panel-footer>
+    <md-expansion-panel-footer md-no-sticky>
       <div flex></div>
       <md-button class="md-warn" ng-click="$panel.collapse()">Collapse</md-button>
     </md-expansion-panel-footer>
@@ -114,6 +146,3 @@ <h4>Content</h4>
   </md-expansion-panel-expanded>
 
 </md-expansion-panel>
-
-
-<!-- </md-content> -->
diff --git a/app/pages/multiple/multiple.controller.js b/app/pages/multiple/multiple.controller.js
new file mode 100644
index 0000000..bced172
--- /dev/null
+++ b/app/pages/multiple/multiple.controller.js
@@ -0,0 +1,48 @@
+angular
+  .module('angularMaterialExpansionPanel')
+  .controller('MultipleController', MultipleController);
+
+
+
+MultipleController.$inject = ['$mdExpansionPanelGroup'];
+function MultipleController($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/multiple/multiple.html b/app/pages/multiple/multiple.html
new file mode 100644
index 0000000..3546c2c
--- /dev/null
+++ b/app/pages/multiple/multiple.html
@@ -0,0 +1,53 @@
+<h2>Group with Multiple</h2>
+
+
+<p>
+  <b>Expansion Panel Groups</b> with the <b>mulitple</b> attribute allow for more than 1 panel to be expanded at the same time
+</p>
+
+<div style="padding-top: 12px; padding-bottom: 36px;">
+  <md-divider></md-divider>
+</div>
+
+
+
+<md-expansion-panel-group md-component-id="expansionPanelGroup" multiple>
+</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/style.css b/app/style.css
new file mode 100644
index 0000000..82b0b37
--- /dev/null
+++ b/app/style.css
@@ -0,0 +1,17 @@
+body {
+  overflow: hidden;
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.view-container {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+
+.nav-bar {
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
+  background: #FFF;
+  z-index: 9;
+}
