├── .gitignore
├── LICENSE
├── README.md
├── app
├── app.js
├── index.html
├── nav.controller.js
├── pages
│ ├── autoExpand
│ │ ├── autoExpand.controller.js
│ │ └── autoExpand.html
│ ├── group
│ │ ├── group.controller.js
│ │ ├── group.html
│ │ └── panels
│ │ │ ├── one
│ │ │ ├── one.html
│ │ │ └── onePanel.controller.js
│ │ │ └── templated
│ │ │ ├── templated.controller.js
│ │ │ └── templated.html
│ ├── home
│ │ ├── home.controller.js
│ │ └── home.html
│ └── multiple
│ │ ├── multiple.controller.js
│ │ └── multiple.html
└── style.css
├── bower.json
├── dist
├── md-expansion-panel.css
├── md-expansion-panel.js
├── md-expansion-panel.min.css
└── md-expansion-panel.min.js
├── docs
├── angular-animate
│ └── angular-animate.js
├── angular-aria
│ └── angular-aria.js
├── angular-material
│ ├── angular-material.css
│ └── angular-material.js
├── angular-messages
│ └── angular-messages.js
├── angular-route
│ └── angular-route.js
├── angular
│ └── angular.js
├── app.js
├── expansionPanels-theme.css
├── expansionPanels.css
├── expansionPanels.js
├── icons
│ └── ic_keyboard_arrow_right_black_24px.svg
├── index.html
├── js
│ ├── expansionPanel.directive.js
│ ├── expansionPanel.service.js
│ ├── expansionPanelCollapsed.directive.js
│ ├── expansionPanelExpanded.directive.js
│ ├── expansionPanelFooter.directive.js
│ ├── expansionPanelGroup.directive.js
│ ├── expansionPanelGroup.service.js
│ ├── expansionPanelHeader.directive.js
│ └── expansionPanelIcon.directive.js
├── nav.controller.js
├── pages
│ ├── autoExpand
│ │ ├── autoExpand.controller.js
│ │ └── autoExpand.html
│ ├── group
│ │ ├── group.controller.js
│ │ ├── group.html
│ │ └── panels
│ │ │ ├── one
│ │ │ ├── one.html
│ │ │ └── onePanel.controller.js
│ │ │ └── templated
│ │ │ ├── templated.controller.js
│ │ │ └── templated.html
│ ├── home
│ │ ├── home.controller.js
│ │ └── home.html
│ └── multiple
│ │ ├── multiple.controller.js
│ │ └── multiple.html
└── style.css
├── gulp
├── config.js
├── cssBuild.js
├── indexBuild.js
└── jsBuild.js
├── gulpfile.js
├── index.js
├── karma.conf.js
├── package.json
└── src
├── expansionPanels-theme.scss
├── expansionPanels.js
├── expansionPanels.scss
├── expansionPanels.spec.js
├── icons
└── ic_keyboard_arrow_right_black_24px.svg
└── js
├── expansionPanel.directive.js
├── expansionPanel.service.js
├── expansionPanelCollapsed.directive.js
├── expansionPanelExpanded.directive.js
├── expansionPanelFooter.directive.js
├── expansionPanelGroup.directive.js
├── expansionPanelGroup.service.js
├── expansionPanelHeader.directive.js
└── expansionPanelIcon.directive.js
/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 |
6 | # Runtime data
7 | pids
8 | *.pid
9 | *.seed
10 |
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 |
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 |
17 | # nyc test coverage
18 | .nyc_output
19 |
20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
21 | .grunt
22 |
23 | # node-waf configuration
24 | .lock-wscript
25 |
26 | # Compiled binary addons (http://nodejs.org/api/addons.html)
27 | build/Release
28 |
29 | # Dependency directories
30 | node_modules
31 | jspm_packages
32 | bower_components
33 |
34 | # Optional npm cache directory
35 | .npm
36 |
37 | # Optional REPL history
38 | .node_repl_history
39 |
40 |
41 | # sass cache
42 | .gulp-scss-cache
43 | .sass-cache
44 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Ben Rubin
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/app/app.js:
--------------------------------------------------------------------------------
1 | angular.module('angularMaterialExpansionPanel', [
2 | 'ngRoute',
3 | 'ngAnimate',
4 | 'ngMaterial',
5 | 'material.components.expansionPanels'
6 | ])
7 | .config(configApp);
8 |
9 |
10 | configApp.$inject = ['$routeProvider'];
11 | function configApp($routeProvider) {
12 | $routeProvider
13 | .when('/', {
14 | templateUrl: 'pages/home/home.html',
15 | controller: 'HomeController',
16 | controllerAs: 'vm'
17 | })
18 | .when('/group', {
19 | templateUrl: 'pages/group/group.html',
20 | controller: 'GroupController',
21 | controllerAs: 'vm'
22 | })
23 | .when('/autoexpand', {
24 | templateUrl: 'pages/autoExpand/autoExpand.html',
25 | controller: 'AutoExpandController',
26 | controllerAs: 'vm'
27 | })
28 | .when('/multiple', {
29 | templateUrl: 'pages/multiple/multiple.html',
30 | controller: 'MultipleController',
31 | controllerAs: 'vm'
32 | })
33 | .otherwise('/');
34 | }
35 |
--------------------------------------------------------------------------------
/app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Angular Material Test
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | Panels
28 | Groups
29 | Auto Expand
30 | Multiple
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
49 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/app/nav.controller.js:
--------------------------------------------------------------------------------
1 | angular
2 | .module('angularMaterialExpansionPanel')
3 | .controller('NavController', NavController);
4 |
5 |
6 |
7 | NavController.$inject = ['$scope', '$rootScope'];
8 | function NavController($scope, $rootScope) {
9 | $rootScope.$on('$routeChangeSuccess', function(event, current) {
10 | $scope.currentNavItem = current.$$route.originalPath || '/';
11 | });
12 | }
13 |
--------------------------------------------------------------------------------
/app/pages/autoExpand/autoExpand.controller.js:
--------------------------------------------------------------------------------
1 | angular
2 | .module('angularMaterialExpansionPanel')
3 | .controller('AutoExpandController', AutoExpandController);
4 |
5 |
6 |
7 | AutoExpandController.$inject = ['$mdExpansionPanelGroup'];
8 | function AutoExpandController($mdExpansionPanelGroup) {
9 | var vm = this;
10 |
11 | var groupInstance;
12 |
13 | vm.title = 'Panel Title';
14 | vm.summary = 'Panel Summary text';
15 | 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.';
16 |
17 | vm.addTemplated = addTemplated;
18 |
19 | $mdExpansionPanelGroup().waitFor('expansionPanelGroup').then(function (instance) {
20 | groupInstance = instance;
21 |
22 | instance.register('templated', {
23 | templateUrl: 'pages/group/panels/templated/templated.html',
24 | controller: 'TemplatedPanelController',
25 | controllerAs: 'vm'
26 | });
27 |
28 | instance.add({
29 | templateUrl: 'pages/group/panels/one/one.html',
30 | controller: 'OnePanelController',
31 | controllerAs: 'vm'
32 | });
33 | });
34 |
35 | function addTemplated() {
36 | groupInstance.add('templated', {
37 | title: vm.title,
38 | summary: vm.summary,
39 | content: vm.content
40 | }).then(function (panel) {
41 | // panel.expand().then(function () {
42 | // console.log('opened post animation');
43 | // });
44 | });
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/app/pages/autoExpand/autoExpand.html:
--------------------------------------------------------------------------------
1 |
Group With Auto Expand
2 |
3 |
4 |
5 | Expansion Panel Groups with the auto-expand attribute will expand when added to the group
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
53 |
54 |
--------------------------------------------------------------------------------
/app/pages/group/group.controller.js:
--------------------------------------------------------------------------------
1 | angular
2 | .module('angularMaterialExpansionPanel')
3 | .controller('GroupController', GroupController);
4 |
5 |
6 |
7 | GroupController.$inject = ['$mdExpansionPanelGroup'];
8 | function GroupController($mdExpansionPanelGroup) {
9 | var vm = this;
10 |
11 | var groupInstance;
12 |
13 | vm.title = 'Panel Title';
14 | vm.summary = 'Panel Summary text';
15 | 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.';
16 |
17 | vm.addTemplated = addTemplated;
18 |
19 | $mdExpansionPanelGroup().waitFor('expansionPanelGroup').then(function (instance) {
20 | groupInstance = instance;
21 |
22 | instance.register('templated', {
23 | templateUrl: 'pages/group/panels/templated/templated.html',
24 | controller: 'TemplatedPanelController',
25 | controllerAs: 'vm'
26 | });
27 |
28 | instance.add({
29 | templateUrl: 'pages/group/panels/one/one.html',
30 | controller: 'OnePanelController',
31 | controllerAs: 'vm'
32 | }).then(function (panelInstance) {
33 | panelInstance.expand();
34 | });
35 |
36 | var change = instance.onChange(function (count) {
37 | console.log('panel count', count);
38 | });
39 |
40 |
41 | setTimeout(function () {
42 | change();
43 | }, 10000);
44 | });
45 |
46 | function addTemplated() {
47 | groupInstance.add('templated', {
48 | title: vm.title,
49 | summary: vm.summary,
50 | content: vm.content
51 | }).then(function (panel) {
52 | panel.onRemove(function () {
53 | console.log('panel removed');
54 | });
55 | });
56 | }
57 | }
58 |
--------------------------------------------------------------------------------
/app/pages/group/group.html:
--------------------------------------------------------------------------------
1 |
Group
2 |
3 |
4 | Expansion Panel Groups 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.
5 |
5 | Expansion Panels 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.
6 |
54 |
55 | Panels
56 | Groups
57 | Auto Expand
58 | Multiple
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
77 |
78 |
79 |
80 |
--------------------------------------------------------------------------------
/docs/js/expansionPanel.directive.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";angular
2 | .module('material.components.expansionPanels')
3 | .directive('mdExpansionPanel', expansionPanelDirective);
4 |
5 |
6 | var ANIMATION_TIME = 180; //ms
7 |
8 |
9 | /**
10 | * @ngdoc directive
11 | * @name mdExpansionPanel
12 | * @module material.components.expansionPanels
13 | *
14 | * @restrict E
15 | *
16 | * @description
17 | * `mdExpansionPanel` is the main container for panels
18 | *
19 | * @param {string=} md-component-id - add an id if you want to acces the panel via the `$mdExpansionPanel` service
20 | **/
21 | function expansionPanelDirective() {
22 | var directive = {
23 | restrict: 'E',
24 | require: ['mdExpansionPanel', '?^^mdExpansionPanelGroup'],
25 | scope: true,
26 | compile: compile,
27 | controller: ['$scope', '$element', '$attrs', '$window', '$$rAF', '$mdConstant', '$mdUtil', '$mdComponentRegistry', '$timeout', '$q', '$animate', '$parse', controller]
28 | };
29 | return directive;
30 |
31 |
32 |
33 |
34 | function compile(tElement, tAttrs) {
35 | var INVALID_PREFIX = 'Invalid HTML for md-expansion-panel: ';
36 |
37 | tElement.attr('tabindex', tAttrs.tabindex || '0');
38 |
39 | if (tElement[0].querySelector('md-expansion-panel-collapsed') === null) {
40 | throw Error(INVALID_PREFIX + 'Expected a child element of `md-epxansion-panel-collapsed`');
41 | }
42 | if (tElement[0].querySelector('md-expansion-panel-expanded') === null) {
43 | throw Error(INVALID_PREFIX + 'Expected a child element of `md-epxansion-panel-expanded`');
44 | }
45 |
46 | return function postLink(scope, element, attrs, ctrls) {
47 | var epxansionPanelCtrl = ctrls[0];
48 | var epxansionPanelGroupCtrl = ctrls[1];
49 |
50 | epxansionPanelCtrl.epxansionPanelGroupCtrl = epxansionPanelGroupCtrl || undefined;
51 | epxansionPanelCtrl.init();
52 | };
53 | }
54 |
55 |
56 |
57 |
58 | function controller($scope, $element, $attrs, $window, $$rAF, $mdConstant, $mdUtil, $mdComponentRegistry, $timeout, $q, $animate, $parse) {
59 | /* jshint validthis: true */
60 | var vm = this;
61 |
62 | var collapsedCtrl;
63 | var expandedCtrl;
64 | var headerCtrl;
65 | var footerCtrl;
66 | var deregister;
67 | var scrollContainer;
68 | var stickyContainer;
69 | var topKiller;
70 | var resizeKiller;
71 | var onRemoveCallback;
72 | var transformParent;
73 | var backdrop;
74 | var inited = false;
75 | var registerOnInit = false;
76 | var _isOpen = false;
77 | var isDisabled = false;
78 | var debouncedUpdateScroll = $$rAF.throttle(updateScroll);
79 | var debouncedUpdateResize = $$rAF.throttle(updateResize);
80 |
81 | vm.registerCollapsed = function (ctrl) { collapsedCtrl = ctrl; };
82 | vm.registerExpanded = function (ctrl) { expandedCtrl = ctrl; };
83 | vm.registerHeader = function (ctrl) { headerCtrl = ctrl; };
84 | vm.registerFooter = function (ctrl) { footerCtrl = ctrl; };
85 |
86 |
87 |
88 | if ($attrs.mdComponentId === undefined) {
89 | $attrs.$set('mdComponentId', '_expansion_panel_id_' + $mdUtil.nextUid());
90 | registerPanel();
91 | } else {
92 | $attrs.$observe('mdComponentId', function() {
93 | registerPanel();
94 | });
95 | }
96 |
97 | vm.$element = $element;
98 | vm.expand = expand;
99 | vm.collapse = collapse;
100 | vm.remove = remove;
101 | vm.destroy = destroy;
102 | vm.onRemove = onRemove;
103 | vm.init = init;
104 |
105 | $attrs.$observe('disabled', function(disabled) {
106 | isDisabled = (typeof disabled === 'string' && disabled !== 'false') ? true : false;
107 |
108 | if (isDisabled === true) {
109 | $element.attr('tabindex', '-1');
110 | } else {
111 | $element.attr('tabindex', '0');
112 | }
113 | });
114 |
115 | $element
116 | .on('focus', function (ev) {
117 | $element.on('keydown', handleKeypress);
118 | })
119 | .on('blur', function (ev) {
120 | $element.off('keydown', handleKeypress);
121 | });
122 |
123 | function handleKeypress(ev) {
124 | var keyCodes = $mdConstant.KEY_CODE;
125 | switch (ev.keyCode) {
126 | case keyCodes.ENTER:
127 | expand();
128 | break;
129 | case keyCodes.ESCAPE:
130 | collapse();
131 | break;
132 | }
133 | }
134 |
135 |
136 | $scope.$panel = {
137 | collapse: collapse,
138 | expand: expand,
139 | remove: remove,
140 | isOpen: isOpen
141 | };
142 |
143 | $scope.$on('$destroy', function () {
144 | removeClickCatcher();
145 |
146 | // remove component from registry
147 | if (typeof deregister === 'function') {
148 | deregister();
149 | deregister = undefined;
150 | }
151 | killEvents();
152 | });
153 |
154 |
155 |
156 |
157 |
158 | function init() {
159 | inited = true;
160 | if (registerOnInit === true) {
161 | registerPanel();
162 | }
163 | }
164 |
165 |
166 | function registerPanel() {
167 | if (inited === false) {
168 | registerOnInit = true;
169 | return;
170 | }
171 |
172 | // deregister if component was already registered
173 | if (typeof deregister === 'function') {
174 | deregister();
175 | deregister = undefined;
176 | }
177 | // remove component from group ctrl if component was already added
178 | if (vm.componentId && vm.epxansionPanelGroupCtrl) {
179 | vm.epxansionPanelGroupCtrl.removePanel(vm.componentId);
180 | }
181 |
182 | // if componentId was removed then set one
183 | if ($attrs.mdComponentId === undefined) {
184 | $attrs.$set('mdComponentId', '_expansion_panel_id_' + $mdUtil.nextUid());
185 | }
186 |
187 | vm.componentId = $attrs.mdComponentId;
188 | deregister = $mdComponentRegistry.register({
189 | expand: expand,
190 | collapse: collapse,
191 | remove: remove,
192 | onRemove: onRemove,
193 | isOpen: isOpen,
194 | addClickCatcher: addClickCatcher,
195 | removeClickCatcher: removeClickCatcher,
196 | componentId: $attrs.mdComponentId
197 | }, $attrs.mdComponentId);
198 |
199 | if (vm.epxansionPanelGroupCtrl) {
200 | vm.epxansionPanelGroupCtrl.addPanel(vm.componentId, {
201 | expand: expand,
202 | collapse: collapse,
203 | remove: remove,
204 | onRemove: onRemove,
205 | destroy: destroy,
206 | isOpen: isOpen
207 | });
208 | }
209 | }
210 |
211 |
212 | function isOpen() {
213 | return _isOpen;
214 | }
215 |
216 | function expand(options) {
217 | if (_isOpen === true || isDisabled === true) { return; }
218 | _isOpen = true;
219 | options = options || {};
220 |
221 | var deferred = $q.defer();
222 |
223 | if (vm.epxansionPanelGroupCtrl) {
224 | vm.epxansionPanelGroupCtrl.expandPanel(vm.componentId);
225 | }
226 |
227 | $element.removeClass('md-close');
228 | $element.addClass('md-open');
229 | if (options.animation === false) {
230 | $element.addClass('md-no-animation');
231 | } else {
232 | $element.removeClass('md-no-animation');
233 | }
234 |
235 | initEvents();
236 | collapsedCtrl.hide(options);
237 | expandedCtrl.show(options);
238 |
239 | if (headerCtrl) { headerCtrl.show(options); }
240 | if (footerCtrl) { footerCtrl.show(options); }
241 |
242 | $timeout(function () {
243 | deferred.resolve();
244 | }, options.animation === false ? 0 : ANIMATION_TIME);
245 | return deferred.promise;
246 | }
247 |
248 |
249 | function collapse(options) {
250 | if (_isOpen === false) { return; }
251 | _isOpen = false;
252 | options = options || {};
253 |
254 | var deferred = $q.defer();
255 |
256 | $element.addClass('md-close');
257 | $element.removeClass('md-open');
258 | if (options.animation === false) {
259 | $element.addClass('md-no-animation');
260 | } else {
261 | $element.removeClass('md-no-animation');
262 | }
263 |
264 | killEvents();
265 | collapsedCtrl.show(options);
266 | expandedCtrl.hide(options);
267 |
268 | if (headerCtrl) { headerCtrl.hide(options); }
269 | if (footerCtrl) { footerCtrl.hide(options); }
270 |
271 | $timeout(function () {
272 | deferred.resolve();
273 | }, options.animation === false ? 0 : ANIMATION_TIME);
274 | return deferred.promise;
275 | }
276 |
277 |
278 | function remove(options) {
279 | options = options || {};
280 | var deferred = $q.defer();
281 |
282 | if (vm.epxansionPanelGroupCtrl) {
283 | vm.epxansionPanelGroupCtrl.removePanel(vm.componentId);
284 | }
285 |
286 | if (typeof deregister === 'function') {
287 | deregister();
288 | deregister = undefined;
289 | }
290 |
291 | if (options.animation === false || _isOpen === false) {
292 | $scope.$destroy();
293 | $element.remove();
294 | deferred.resolve();
295 | callbackRemove();
296 | } else {
297 | collapse();
298 | $timeout(function () {
299 | $scope.$destroy();
300 | $element.remove();
301 | deferred.resolve();
302 | callbackRemove();
303 | }, ANIMATION_TIME);
304 | }
305 |
306 | return deferred.promise;
307 | }
308 |
309 | function onRemove(callback) {
310 | onRemoveCallback = callback;
311 | }
312 |
313 | function callbackRemove() {
314 | if (typeof onRemoveCallback === 'function') {
315 | onRemoveCallback();
316 | onRemoveCallback = undefined;
317 | }
318 | }
319 |
320 | function destroy() {
321 | $scope.$destroy();
322 | }
323 |
324 |
325 |
326 | function initEvents() {
327 | if ((!footerCtrl || footerCtrl.noSticky === true) && (!headerCtrl || headerCtrl.noSticky === true)) {
328 | return;
329 | }
330 |
331 | // watch for panel position changes
332 | topKiller = $scope.$watch(function () { return $element[0].offsetTop; }, debouncedUpdateScroll, true);
333 |
334 | // watch for panel position changes
335 | resizeKiller = $scope.$watch(function () { return $element[0].offsetWidth; }, debouncedUpdateResize, true);
336 |
337 | // listen to md-content scroll events id we are nested in one
338 | scrollContainer = $mdUtil.getNearestContentElement($element);
339 | if (scrollContainer.nodeName === 'MD-CONTENT') {
340 | transformParent = getTransformParent(scrollContainer);
341 | angular.element(scrollContainer).on('scroll', debouncedUpdateScroll);
342 | } else {
343 | transformParent = undefined;
344 | }
345 |
346 | // listen to expanded content scroll if height is set
347 | if (expandedCtrl.setHeight === true) {
348 | expandedCtrl.$element.on('scroll', debouncedUpdateScroll);
349 | }
350 |
351 | // listen to window scroll events
352 | angular.element($window)
353 | .on('scroll', debouncedUpdateScroll)
354 | .on('resize', debouncedUpdateScroll)
355 | .on('resize', debouncedUpdateResize);
356 | }
357 |
358 |
359 | function killEvents() {
360 | if (typeof topKiller === 'function') {
361 | topKiller();
362 | topKiller = undefined;
363 | }
364 |
365 | if (typeof resizeKiller === 'function') {
366 | resizeKiller();
367 | resizeKiller = undefined;
368 | }
369 |
370 | if (scrollContainer && scrollContainer.nodeName === 'MD-CONTENT') {
371 | angular.element(scrollContainer).off('scroll', debouncedUpdateScroll);
372 | }
373 |
374 | if (expandedCtrl.setHeight === true) {
375 | expandedCtrl.$element.off('scroll', debouncedUpdateScroll);
376 | }
377 |
378 | angular.element($window)
379 | .off('scroll', debouncedUpdateScroll)
380 | .off('resize', debouncedUpdateScroll)
381 | .off('resize', debouncedUpdateResize);
382 | }
383 |
384 |
385 |
386 | function getTransformParent(el) {
387 | var parent = el.parentNode;
388 |
389 | while (parent && parent !== document) {
390 | if (hasComputedStyle(parent, 'transform')) {
391 | return parent;
392 | }
393 | parent = parent.parentNode;
394 | }
395 |
396 | return undefined;
397 | }
398 |
399 | function hasComputedStyle(target, key) {
400 | var hasValue = false;
401 |
402 | if (target) {
403 | var computedStyles = $window.getComputedStyle(target);
404 | hasValue = computedStyles[key] !== undefined && computedStyles[key] !== 'none';
405 | }
406 |
407 | return hasValue;
408 | }
409 |
410 |
411 | function updateScroll(e) {
412 | var top;
413 | var bottom;
414 | var bounds;
415 | if (expandedCtrl.setHeight === true) {
416 | bounds = expandedCtrl.$element[0].getBoundingClientRect();
417 | } else {
418 | bounds = scrollContainer.getBoundingClientRect();
419 | }
420 | var transformTop = transformParent ? transformParent.getBoundingClientRect().top : 0;
421 |
422 | // we never want the header going post the top of the page. to prevent this don't allow top to go below 0
423 | top = Math.max(bounds.top, 0);
424 | bottom = top + bounds.height;
425 |
426 | if (footerCtrl && footerCtrl.noSticky === false) { footerCtrl.onScroll(top, bottom, transformTop); }
427 | if (headerCtrl && headerCtrl.noSticky === false) { headerCtrl.onScroll(top, bottom, transformTop); }
428 | }
429 |
430 |
431 | function updateResize() {
432 | var value = $element[0].offsetWidth;
433 | if (footerCtrl && footerCtrl.noSticky === false) { footerCtrl.onResize(value); }
434 | if (headerCtrl && headerCtrl.noSticky === false) { headerCtrl.onResize(value); }
435 | }
436 |
437 |
438 |
439 |
440 | function addClickCatcher(clickCallback) {
441 | backdrop = $mdUtil.createBackdrop($scope);
442 | backdrop[0].tabIndex = -1;
443 |
444 | if (typeof clickCallback === 'function') {
445 | backdrop.on('click', clickCallback);
446 | }
447 |
448 | $animate.enter(backdrop, $element.parent(), null, {duration: 0});
449 | $element.css('z-index', 60);
450 | }
451 |
452 | function removeClickCatcher() {
453 | if (backdrop) {
454 | backdrop.remove();
455 | backdrop.off('click');
456 | backdrop = undefined;
457 | $element.css('z-index', '');
458 | }
459 | }
460 | }
461 | }
462 | }());
--------------------------------------------------------------------------------
/docs/js/expansionPanel.service.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";angular
2 | .module('material.components.expansionPanels')
3 | .factory('$mdExpansionPanel', expansionPanelService);
4 |
5 |
6 | /**
7 | * @ngdoc service
8 | * @name $mdExpansionPanel
9 | * @module material.components.expansionPanels
10 | *
11 | * @description
12 | * Expand and collapse Expansion Panel using its `md-component-id`
13 | *
14 | * @example
15 | * $mdExpansionPanel('comonentId').then(function (instance) {
16 | * instance.exapand();
17 | * instance.collapse({animation: false});
18 | * instance.remove({animation: false});
19 | * instance.onRemove(function () {});
20 | * });
21 | */
22 | expansionPanelService.$inject = ['$mdComponentRegistry', '$mdUtil', '$log'];
23 | function expansionPanelService($mdComponentRegistry, $mdUtil, $log) {
24 | var errorMsg = "ExpansionPanel '{0}' is not available! Did you use md-component-id='{0}'?";
25 | var service = {
26 | find: findInstance,
27 | waitFor: waitForInstance
28 | };
29 |
30 | return function (handle) {
31 | if (handle === undefined) { return service; }
32 | return findInstance(handle);
33 | };
34 |
35 |
36 |
37 | function findInstance(handle) {
38 | var instance = $mdComponentRegistry.get(handle);
39 |
40 | if (!instance) {
41 | // Report missing instance
42 | $log.error( $mdUtil.supplant(errorMsg, [handle || ""]) );
43 | return undefined;
44 | }
45 |
46 | return instance;
47 | }
48 |
49 | function waitForInstance(handle) {
50 | return $mdComponentRegistry.when(handle).catch($log.error);
51 | }
52 | }
53 | }());
--------------------------------------------------------------------------------
/docs/js/expansionPanelCollapsed.directive.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";angular
2 | .module('material.components.expansionPanels')
3 | .directive('mdExpansionPanelCollapsed', expansionPanelCollapsedDirective);
4 |
5 |
6 |
7 | /**
8 | * @ngdoc directive
9 | * @name mdExpansionPanelCollapsed
10 | * @module material.components.expansionPanels
11 | *
12 | * @restrict E
13 | *
14 | * @description
15 | * `mdExpansionPanelCollapsed` is used to contain content when the panel is collapsed
16 | **/
17 | expansionPanelCollapsedDirective.$inject = ['$animateCss', '$timeout'];
18 | function expansionPanelCollapsedDirective($animateCss, $timeout) {
19 | var directive = {
20 | restrict: 'E',
21 | require: '^^mdExpansionPanel',
22 | link: link
23 | };
24 | return directive;
25 |
26 |
27 | function link(scope, element, attrs, expansionPanelCtrl) {
28 | expansionPanelCtrl.registerCollapsed({
29 | show: show,
30 | hide: hide
31 | });
32 |
33 |
34 | element.on('click', function () {
35 | expansionPanelCtrl.expand();
36 | });
37 |
38 |
39 | function hide(options) {
40 | // set width to maintian demensions when element is set to postion: absolute
41 | element.css('width', element[0].offsetWidth + 'px');
42 | // set min height so the expansion panel does not shrink when collapsed element is set to position: absolute
43 | expansionPanelCtrl.$element.css('min-height', element[0].offsetHeight + 'px');
44 |
45 | var animationParams = {
46 | addClass: 'md-absolute md-hide',
47 | from: {opacity: 1},
48 | to: {opacity: 0}
49 | };
50 | if (options.animation === false) { animationParams.duration = 0; }
51 | $animateCss(element, animationParams)
52 | .start()
53 | .then(function () {
54 | element.removeClass('md-hide');
55 | element.css('display', 'none');
56 | });
57 | }
58 |
59 |
60 | function show(options) {
61 | element.css('display', '');
62 | // set width to maintian demensions when element is set to postion: absolute
63 | element.css('width', element[0].parentNode.offsetWidth + 'px');
64 |
65 | var animationParams = {
66 | addClass: 'md-show',
67 | from: {opacity: 0},
68 | to: {opacity: 1}
69 | };
70 | if (options.animation === false) { animationParams.duration = 0; }
71 | $animateCss(element, animationParams)
72 | .start()
73 | .then(function () {
74 | // safari will animate the min-height if transition is not set to 0
75 | expansionPanelCtrl.$element.css('transition', 'none');
76 | element.removeClass('md-absolute md-show');
77 |
78 | // remove width when element is no longer position: absolute
79 | element.css('width', '');
80 |
81 |
82 | // remove min height when element is no longer position: absolute
83 | expansionPanelCtrl.$element.css('min-height', '');
84 | // remove transition block on next digest
85 | $timeout(function () {
86 | expansionPanelCtrl.$element.css('transition', '');
87 | }, 0);
88 | });
89 | }
90 | }
91 | }
92 | }());
--------------------------------------------------------------------------------
/docs/js/expansionPanelExpanded.directive.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";angular
2 | .module('material.components.expansionPanels')
3 | .directive('mdExpansionPanelExpanded', expansionPanelExpandedDirective);
4 |
5 |
6 |
7 | /**
8 | * @ngdoc directive
9 | * @name mdExpansionPanelExpanded
10 | * @module material.components.expansionPanels
11 | *
12 | * @restrict E
13 | *
14 | * @description
15 | * `mdExpansionPanelExpanded` is used to contain content when the panel is expanded
16 | *
17 | * @param {number=} height - add this aatribute set the max height of the expanded content. The container will be set to scroll
18 | **/
19 | expansionPanelExpandedDirective.$inject = ['$animateCss', '$timeout'];
20 | function expansionPanelExpandedDirective($animateCss, $timeout) {
21 | var directive = {
22 | restrict: 'E',
23 | require: '^^mdExpansionPanel',
24 | link: link
25 | };
26 | return directive;
27 |
28 |
29 | function link(scope, element, attrs, expansionPanelCtrl) {
30 | var setHeight = attrs.height || undefined;
31 | if (setHeight !== undefined) { setHeight = setHeight.replace('px', '') + 'px'; }
32 |
33 | expansionPanelCtrl.registerExpanded({
34 | show: show,
35 | hide: hide,
36 | setHeight: setHeight !== undefined,
37 | $element: element
38 | });
39 |
40 |
41 |
42 |
43 | function hide(options) {
44 | var height = setHeight ? setHeight : element[0].scrollHeight + 'px';
45 | element.addClass('md-hide md-overflow');
46 | element.removeClass('md-show md-scroll-y');
47 |
48 | var animationParams = {
49 | from: {'max-height': height, opacity: 1},
50 | to: {'max-height': '48px', opacity: 0}
51 | };
52 | if (options.animation === false) { animationParams.duration = 0; }
53 | $animateCss(element, animationParams)
54 | .start()
55 | .then(function () {
56 | element.css('display', 'none');
57 | element.removeClass('md-hide');
58 | });
59 | }
60 |
61 |
62 | function show(options) {
63 | element.css('display', '');
64 | element.addClass('md-show md-overflow');
65 | // use passed in height or the contents height
66 | var height = setHeight ? setHeight : element[0].scrollHeight + 'px';
67 |
68 | var animationParams = {
69 | from: {'max-height': '48px', opacity: 0},
70 | to: {'max-height': height, opacity: 1}
71 | };
72 | if (options.animation === false) { animationParams.duration = 0; }
73 | $animateCss(element, animationParams)
74 | .start()
75 | .then(function () {
76 |
77 | // if height was passed in then set div to scroll
78 | if (setHeight !== undefined) {
79 | element.addClass('md-scroll-y');
80 | } else {
81 | // safari will animate the max-height if transition is not set to 0
82 | element.css('transition', 'none');
83 | element.css('max-height', 'none');
84 | // remove transition block on next digest
85 | $timeout(function () {
86 | element.css('transition', '');
87 | }, 0);
88 | }
89 |
90 | element.removeClass('md-overflow');
91 | });
92 | }
93 | }
94 | }
95 | }());
--------------------------------------------------------------------------------
/docs/js/expansionPanelFooter.directive.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";angular
2 | .module('material.components.expansionPanels')
3 | .directive('mdExpansionPanelFooter', expansionPanelFooterDirective);
4 |
5 |
6 |
7 |
8 | /**
9 | * @ngdoc directive
10 | * @name mdExpansionPanelFooter
11 | * @module material.components.expansionPanels
12 | *
13 | * @restrict E
14 | *
15 | * @description
16 | * `mdExpansionPanelFooter` is nested inside of `mdExpansionPanelExpanded` and contains content you want at the bottom.
17 | * By default the Footer will stick to the bottom of the page if the panel expands past
18 | * this is optional
19 | *
20 | * @param {boolean=} md-no-sticky - add this aatribute to disable sticky
21 | **/
22 | function expansionPanelFooterDirective() {
23 | var directive = {
24 | restrict: 'E',
25 | transclude: true,
26 | template: '',
27 | require: '^^mdExpansionPanel',
28 | link: link
29 | };
30 | return directive;
31 |
32 |
33 |
34 | function link(scope, element, attrs, expansionPanelCtrl) {
35 | var isStuck = false;
36 | var noSticky = attrs.mdNoSticky !== undefined;
37 | var container = angular.element(element[0].querySelector('.md-expansion-panel-footer-container'));
38 |
39 | expansionPanelCtrl.registerFooter({
40 | show: show,
41 | hide: hide,
42 | onScroll: onScroll,
43 | onResize: onResize,
44 | noSticky: noSticky
45 | });
46 |
47 |
48 |
49 | function show() {
50 |
51 | }
52 | function hide() {
53 | unstick();
54 | }
55 |
56 | function onScroll(top, bottom, transformTop) {
57 | var height;
58 | var footerBounds = element[0].getBoundingClientRect();
59 | var offset;
60 |
61 | if (footerBounds.bottom > bottom) {
62 | height = container[0].offsetHeight;
63 | offset = bottom - height - transformTop;
64 | if (offset < element[0].parentNode.getBoundingClientRect().top) {
65 | offset = element[0].parentNode.getBoundingClientRect().top;
66 | }
67 |
68 | // set container width because element becomes postion fixed
69 | container.css('width', expansionPanelCtrl.$element[0].offsetWidth + 'px');
70 |
71 | // set element height so it does not loose its height when container is position fixed
72 | element.css('height', height + 'px');
73 | container.css('top', offset + 'px');
74 |
75 | element.addClass('md-stick');
76 | isStuck = true;
77 | } else if (isStuck === true) {
78 | unstick();
79 | }
80 | }
81 |
82 | function onResize(width) {
83 | if (isStuck === false) { return; }
84 | container.css('width', width + 'px');
85 | }
86 |
87 |
88 | function unstick() {
89 | isStuck = false;
90 | container.css('width', '');
91 | container.css('top', '');
92 | element.css('height', '');
93 | element.removeClass('md-stick');
94 | }
95 | }
96 | }
97 | }());
--------------------------------------------------------------------------------
/docs/js/expansionPanelGroup.directive.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";angular
2 | .module('material.components.expansionPanels')
3 | .directive('mdExpansionPanelGroup', expansionPanelGroupDirective);
4 |
5 | /**
6 | * @ngdoc directive
7 | * @name mdExpansionPanelGroup
8 | * @module material.components.expansionPanels
9 | *
10 | * @restrict E
11 | *
12 | * @description
13 | * `mdExpansionPanelGroup` is a container used to manage multiple expansion panels
14 | *
15 | * @param {string=} md-component-id - add an id if you want to acces the panel via the `$mdExpansionPanelGroup` service
16 | * @param {string=} auto-expand - panels expand when added to ``
17 | * @param {string=} multiple - allows for more than one panel to be expanded at a time
18 | **/
19 | function expansionPanelGroupDirective() {
20 | var directive = {
21 | restrict: 'E',
22 | controller: ['$scope', '$attrs', '$element', '$mdComponentRegistry', controller]
23 | };
24 | return directive;
25 |
26 |
27 | function controller($scope, $attrs, $element, $mdComponentRegistry) {
28 | /* jshint validthis: true */
29 | var vm = this;
30 |
31 | var deregister;
32 | var registered = {};
33 | var panels = {};
34 | var onChangeFuncs = [];
35 | var multipleExpand = $attrs.mdMultiple !== undefined || $attrs.multiple !== undefined;
36 | var autoExpand = $attrs.mdAutoExpand !== undefined || $attrs.autoExpand !== undefined;
37 |
38 |
39 | deregister = $mdComponentRegistry.register({
40 | $element: $element,
41 | register: register,
42 | getRegistered: getRegistered,
43 | getAll: getAll,
44 | getOpen: getOpen,
45 | remove: remove,
46 | removeAll: removeAll,
47 | collapseAll: collapseAll,
48 | onChange: onChange,
49 | count: panelCount
50 | }, $attrs.mdComponentId);
51 |
52 | vm.addPanel = addPanel;
53 | vm.expandPanel = expandPanel;
54 | vm.removePanel = removePanel;
55 |
56 |
57 | $scope.$on('$destroy', function () {
58 | if (typeof deregister === 'function') {
59 | deregister();
60 | deregister = undefined;
61 | }
62 |
63 | // destroy all panels
64 | // for some reason the child panels scopes are not getting destroyed
65 | Object.keys(panels).forEach(function (key) {
66 | panels[key].destroy();
67 | });
68 | });
69 |
70 |
71 |
72 | function onChange(callback) {
73 | onChangeFuncs.push(callback);
74 |
75 | return function () {
76 | onChangeFuncs.splice(onChangeFuncs.indexOf(callback), 1);
77 | };
78 | }
79 |
80 | function callOnChange() {
81 | var count = panelCount();
82 | onChangeFuncs.forEach(function (func) {
83 | func(count);
84 | });
85 | }
86 |
87 |
88 | function addPanel(componentId, panelCtrl) {
89 | panels[componentId] = panelCtrl;
90 | if (autoExpand === true) {
91 | panelCtrl.expand();
92 | closeOthers(componentId);
93 | }
94 | callOnChange();
95 | }
96 |
97 | function expandPanel(componentId) {
98 | closeOthers(componentId);
99 | }
100 |
101 | function remove(componentId, options) {
102 | return panels[componentId].remove(options);
103 | }
104 |
105 | function removeAll(options) {
106 | Object.keys(panels).forEach(function (panelId) {
107 | panels[panelId].remove(options);
108 | });
109 | }
110 |
111 | function removePanel(componentId) {
112 | delete panels[componentId];
113 | callOnChange();
114 | }
115 |
116 | function panelCount() {
117 | return Object.keys(panels).length;
118 | }
119 |
120 | function closeOthers(id) {
121 | if (multipleExpand === false) {
122 | Object.keys(panels).forEach(function (panelId) {
123 | if (panelId !== id) { panels[panelId].collapse(); }
124 | });
125 | }
126 | }
127 |
128 |
129 | function register(name, options) {
130 | if (registered[name] !== undefined) {
131 | throw Error('$mdExpansionPanelGroup.register() The name "' + name + '" has already been registered');
132 | }
133 | registered[name] = options;
134 | }
135 |
136 |
137 | function getRegistered(name) {
138 | if (registered[name] === undefined) {
139 | throw Error('$mdExpansionPanelGroup.addPanel() Cannot find Panel with name of "' + name + '"');
140 | }
141 | return registered[name];
142 | }
143 |
144 |
145 | function getAll() {
146 | return Object.keys(panels).map(function (panelId) {
147 | return panels[panelId];
148 | });
149 | }
150 |
151 | function getOpen() {
152 | return Object.keys(panels).map(function (panelId) {
153 | return panels[panelId];
154 | }).filter(function (instance) {
155 | return instance.isOpen();
156 | });
157 | }
158 |
159 | function collapseAll(noAnimation) {
160 | var animation = noAnimation === true ? false : true;
161 | Object.keys(panels).forEach(function (panelId) {
162 | panels[panelId].collapse({animation: animation});
163 | });
164 | }
165 | }
166 | }
167 | }());
--------------------------------------------------------------------------------
/docs/js/expansionPanelGroup.service.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";angular
2 | .module('material.components.expansionPanels')
3 | .factory('$mdExpansionPanelGroup', expansionPanelGroupService);
4 |
5 |
6 | /**
7 | * @ngdoc service
8 | * @name $mdExpansionPanelGroup
9 | * @module material.components.expansionPanels
10 | *
11 | * @description
12 | * Expand and collapse Expansion Panel using its `md-component-id`
13 | *
14 | * @example
15 | * $mdExpansionPanelGroup('comonentId').then(function (instance) {
16 | * instance.register({
17 | * componentId: 'cardComponentId',
18 | * templateUrl: 'template.html',
19 | * controller: 'Controller'
20 | * });
21 | * instance.add('cardComponentId', {local: localData});
22 | * instance.remove('cardComponentId', {animation: false});
23 | * instance.removeAll({animation: false});
24 | * });
25 | */
26 | expansionPanelGroupService.$inject = ['$mdComponentRegistry', '$mdUtil', '$mdExpansionPanel', '$templateRequest', '$rootScope', '$compile', '$controller', '$q', '$log'];
27 | function expansionPanelGroupService($mdComponentRegistry, $mdUtil, $mdExpansionPanel, $templateRequest, $rootScope, $compile, $controller, $q, $log) {
28 | var errorMsg = "ExpansionPanelGroup '{0}' is not available! Did you use md-component-id='{0}'?";
29 | var service = {
30 | find: findInstance,
31 | waitFor: waitForInstance
32 | };
33 |
34 | return function (handle) {
35 | if (handle === undefined) { return service; }
36 | return findInstance(handle);
37 | };
38 |
39 |
40 |
41 | function findInstance(handle) {
42 | var instance = $mdComponentRegistry.get(handle);
43 |
44 | if (!instance) {
45 | // Report missing instance
46 | $log.error( $mdUtil.supplant(errorMsg, [handle || ""]) );
47 | return undefined;
48 | }
49 |
50 | return createGroupInstance(instance);
51 | }
52 |
53 | function waitForInstance(handle) {
54 | var deffered = $q.defer();
55 |
56 | $mdComponentRegistry.when(handle).then(function (instance) {
57 | deffered.resolve(createGroupInstance(instance));
58 | }).catch(function (error) {
59 | deffered.reject();
60 | $log.error(error);
61 | });
62 |
63 | return deffered.promise;
64 | }
65 |
66 |
67 |
68 |
69 |
70 | // --- returned service for group instance ---
71 |
72 | function createGroupInstance(instance) {
73 | var service = {
74 | add: add,
75 | register: register,
76 | getAll: getAll,
77 | getOpen: getOpen,
78 | remove: remove,
79 | removeAll: removeAll,
80 | collapseAll: collapseAll,
81 | onChange: onChange,
82 | count: count
83 | };
84 |
85 | return service;
86 |
87 |
88 | function register(name, options) {
89 | if (typeof name !== 'string') {
90 | throw Error('$mdExpansionPanelGroup.register() Expects name to be a string');
91 | }
92 |
93 | validateOptions(options);
94 | instance.register(name, options);
95 | }
96 |
97 | function remove(componentId, options) {
98 | return instance.remove(componentId, options);
99 | }
100 |
101 | function removeAll(options) {
102 | instance.removeAll(options);
103 | }
104 |
105 | function onChange(callback) {
106 | return instance.onChange(callback);
107 | }
108 |
109 | function count() {
110 | return instance.count();
111 | }
112 |
113 | function getAll() {
114 | return instance.getAll();
115 | }
116 |
117 | function getOpen() {
118 | return instance.getOpen();
119 | }
120 |
121 | function collapseAll(noAnimation) {
122 | instance.collapseAll(noAnimation);
123 | }
124 |
125 |
126 | function add(options, locals) {
127 | locals = locals || {};
128 | // assume if options is a string then they are calling a registered card by its component id
129 | if (typeof options === 'string') {
130 | // call add panel with the stored options
131 | return add(instance.getRegistered(options), locals);
132 | }
133 |
134 | validateOptions(options);
135 | if (options.componentId && instance.isPanelActive(options.componentId)) {
136 | return $q.reject('panel with componentId "' + options.componentId + '" is currently active');
137 | }
138 |
139 |
140 | var deffered = $q.defer();
141 | var scope = $rootScope.$new();
142 | angular.extend(scope, options.scope);
143 |
144 | getTemplate(options, function (template) {
145 | var element = angular.element(template);
146 | var componentId = options.componentId || element.attr('md-component-id') || '_panelComponentId_' + $mdUtil.nextUid();
147 | var panelPromise = $mdExpansionPanel().waitFor(componentId);
148 | element.attr('md-component-id', componentId);
149 |
150 | var linkFunc = $compile(element);
151 | if (options.controller) {
152 | angular.extend(locals, options.locals || {});
153 | locals.$scope = scope;
154 | locals.$panel = panelPromise;
155 | var invokeCtrl = $controller(options.controller, locals, true);
156 | var ctrl = invokeCtrl();
157 | element.data('$ngControllerController', ctrl);
158 | element.children().data('$ngControllerController', ctrl);
159 | if (options.controllerAs) {
160 | scope[options.controllerAs] = ctrl;
161 | }
162 | }
163 |
164 | // link after the element is added so we can find card manager directive
165 | instance.$element.append(element);
166 | linkFunc(scope);
167 |
168 | panelPromise.then(function (instance) {
169 | deffered.resolve(instance);
170 | });
171 | });
172 |
173 | return deffered.promise;
174 | }
175 |
176 |
177 | function validateOptions(options) {
178 | if (typeof options !== 'object' || options === null) {
179 | throw Error('$mdExapnsionPanelGroup.add()/.register() : Requires an options object to be passed in');
180 | }
181 |
182 | // if none of these exist then a dialog box cannot be created
183 | if (!options.template && !options.templateUrl) {
184 | throw Error('$mdExapnsionPanelGroup.add()/.register() : Is missing required paramters to create. Required One of the following: template, templateUrl');
185 | }
186 | }
187 |
188 |
189 |
190 | function getTemplate(options, callback) {
191 | var template;
192 |
193 | if (options.templateUrl !== undefined) {
194 | $templateRequest(options.templateUrl)
195 | .then(function(response) {
196 | callback(response);
197 | });
198 | } else {
199 | callback(options.template);
200 | }
201 | }
202 | }
203 | }
204 | }());
--------------------------------------------------------------------------------
/docs/js/expansionPanelHeader.directive.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";angular
2 | .module('material.components.expansionPanels')
3 | .directive('mdExpansionPanelHeader', expansionPanelHeaderDirective);
4 |
5 |
6 |
7 | /**
8 | * @ngdoc directive
9 | * @name mdExpansionPanelHeader
10 | * @module material.components.expansionPanels
11 | *
12 | * @restrict E
13 | *
14 | * @description
15 | * `mdExpansionPanelHeader` is nested inside of `mdExpansionPanelExpanded` and contains content you want in place of the collapsed content
16 | * this is optional
17 | *
18 | * @param {boolean=} md-no-sticky - add this aatribute to disable sticky
19 | **/
20 | expansionPanelHeaderDirective.$inject = [];
21 | function expansionPanelHeaderDirective() {
22 | var directive = {
23 | restrict: 'E',
24 | transclude: true,
25 | template: '',
26 | require: '^^mdExpansionPanel',
27 | link: link
28 | };
29 | return directive;
30 |
31 |
32 |
33 | function link(scope, element, attrs, expansionPanelCtrl) {
34 | var isStuck = false;
35 | var noSticky = attrs.mdNoSticky !== undefined;
36 | var container = angular.element(element[0].querySelector('.md-expansion-panel-header-container'));
37 |
38 | expansionPanelCtrl.registerHeader({
39 | show: show,
40 | hide: hide,
41 | noSticky: noSticky,
42 | onScroll: onScroll,
43 | onResize: onResize
44 | });
45 |
46 |
47 | function show() {
48 |
49 | }
50 | function hide() {
51 | unstick();
52 | }
53 |
54 |
55 | function onScroll(top, bottom, transformTop) {
56 | var offset;
57 | var panelbottom;
58 | var bounds = element[0].getBoundingClientRect();
59 |
60 |
61 | if (bounds.top < top) {
62 | offset = top - transformTop;
63 | panelbottom = element[0].parentNode.getBoundingClientRect().bottom - top - bounds.height;
64 | if (panelbottom < 0) {
65 | offset += panelbottom;
66 | }
67 |
68 | // set container width because element becomes postion fixed
69 | container.css('width', element[0].offsetWidth + 'px');
70 | container.css('top', offset + 'px');
71 |
72 | // set element height so it does not shink when container is position fixed
73 | element.css('height', container[0].offsetHeight + 'px');
74 |
75 | element.removeClass('md-no-stick');
76 | element.addClass('md-stick');
77 | isStuck = true;
78 | } else if (isStuck === true) {
79 | unstick();
80 | }
81 | }
82 |
83 | function onResize(width) {
84 | if (isStuck === false) { return; }
85 | container.css('width', width + 'px');
86 | }
87 |
88 |
89 | function unstick() {
90 | isStuck = false;
91 | container.css('width', '');
92 | element.css('height', '');
93 | element.css('top', '');
94 | element.removeClass('md-stick');
95 | element.addClass('md-no-stick');
96 | }
97 | }
98 | }
99 | }());
--------------------------------------------------------------------------------
/docs/js/expansionPanelIcon.directive.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";angular
2 | .module('material.components.expansionPanels')
3 | .directive('mdExpansionPanelIcon', mdExpansionPanelIconDirective);
4 |
5 |
6 |
7 | /**
8 | * @ngdoc directive
9 | * @name mdExpansionPanelIcon
10 | * @module material.components.expansionPanels
11 | *
12 | * @restrict E
13 | *
14 | * @description
15 | * `mdExpansionPanelIcon` can be used in both `md-expansion-panel-collapsed` and `md-expansion-panel-header` as the first or last element.
16 | * Adding this will provide a animated arrow for expanded and collapsed states
17 | **/
18 | function mdExpansionPanelIconDirective() {
19 | var directive = {
20 | restrict: 'E',
21 | template: '',
22 | replace: true
23 | };
24 | return directive;
25 | }
26 | }());
--------------------------------------------------------------------------------
/docs/nav.controller.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";angular
2 | .module('angularMaterialExpansionPanel')
3 | .controller('NavController', NavController);
4 |
5 |
6 |
7 | NavController.$inject = ['$scope', '$rootScope'];
8 | function NavController($scope, $rootScope) {
9 | $rootScope.$on('$routeChangeSuccess', function(event, current) {
10 | $scope.currentNavItem = current.$$route.originalPath || '/';
11 | });
12 | }
13 | }());
--------------------------------------------------------------------------------
/docs/pages/autoExpand/autoExpand.controller.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";angular
2 | .module('angularMaterialExpansionPanel')
3 | .controller('AutoExpandController', AutoExpandController);
4 |
5 |
6 |
7 | AutoExpandController.$inject = ['$mdExpansionPanelGroup'];
8 | function AutoExpandController($mdExpansionPanelGroup) {
9 | var vm = this;
10 |
11 | var groupInstance;
12 |
13 | vm.title = 'Panel Title';
14 | vm.summary = 'Panel Summary text';
15 | 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.';
16 |
17 | vm.addTemplated = addTemplated;
18 |
19 | $mdExpansionPanelGroup().waitFor('expansionPanelGroup').then(function (instance) {
20 | groupInstance = instance;
21 |
22 | instance.register('templated', {
23 | templateUrl: 'pages/group/panels/templated/templated.html',
24 | controller: 'TemplatedPanelController',
25 | controllerAs: 'vm'
26 | });
27 |
28 | instance.add({
29 | templateUrl: 'pages/group/panels/one/one.html',
30 | controller: 'OnePanelController',
31 | controllerAs: 'vm'
32 | });
33 | });
34 |
35 | function addTemplated() {
36 | groupInstance.add('templated', {
37 | title: vm.title,
38 | summary: vm.summary,
39 | content: vm.content
40 | }).then(function (panel) {
41 | // panel.expand().then(function () {
42 | // console.log('opened post animation');
43 | // });
44 | });
45 | }
46 | }
47 | }());
--------------------------------------------------------------------------------
/docs/pages/autoExpand/autoExpand.html:
--------------------------------------------------------------------------------
1 |
Group With Auto Expand
2 |
3 |
4 |
5 | Expansion Panel Groups with the auto-expand attribute will expand when added to the group
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
53 |
54 |
--------------------------------------------------------------------------------
/docs/pages/group/group.controller.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";angular
2 | .module('angularMaterialExpansionPanel')
3 | .controller('GroupController', GroupController);
4 |
5 |
6 |
7 | GroupController.$inject = ['$mdExpansionPanelGroup'];
8 | function GroupController($mdExpansionPanelGroup) {
9 | var vm = this;
10 |
11 | var groupInstance;
12 |
13 | vm.title = 'Panel Title';
14 | vm.summary = 'Panel Summary text';
15 | 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.';
16 |
17 | vm.addTemplated = addTemplated;
18 |
19 | $mdExpansionPanelGroup().waitFor('expansionPanelGroup').then(function (instance) {
20 | groupInstance = instance;
21 |
22 | instance.register('templated', {
23 | templateUrl: 'pages/group/panels/templated/templated.html',
24 | controller: 'TemplatedPanelController',
25 | controllerAs: 'vm'
26 | });
27 |
28 | instance.add({
29 | templateUrl: 'pages/group/panels/one/one.html',
30 | controller: 'OnePanelController',
31 | controllerAs: 'vm'
32 | }).then(function (panelInstance) {
33 | panelInstance.expand();
34 | });
35 |
36 | var change = instance.onChange(function (count) {
37 | console.log('panel count', count);
38 | });
39 |
40 |
41 | setTimeout(function () {
42 | change();
43 | }, 10000);
44 | });
45 |
46 | function addTemplated() {
47 | groupInstance.add('templated', {
48 | title: vm.title,
49 | summary: vm.summary,
50 | content: vm.content
51 | }).then(function (panel) {
52 | panel.onRemove(function () {
53 | console.log('panel removed');
54 | });
55 | });
56 | }
57 | }
58 | }());
--------------------------------------------------------------------------------
/docs/pages/group/group.html:
--------------------------------------------------------------------------------
1 |
Group
2 |
3 |
4 | Expansion Panel Groups 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.
5 |
5 | Expansion Panels 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.
6 |