diff --git a/bower.json b/bower.json index 9226001..c51620d 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-material-expansion-panel", - "version": "0.2.0", + "version": "0.3.0", "description": "Material Design Expansion Panels.", "main": [ "dist/md-expansion-panels.js", diff --git a/dist/md-expansion-panel.css b/dist/md-expansion-panel.css index a682123..3bce5cf 100644 --- a/dist/md-expansion-panel.css +++ b/dist/md-expansion-panel.css @@ -31,6 +31,7 @@ md-expansion-panel { outline: none; margin-top: 0; margin-bottom: 0; + padding: 0; box-shadow: 0 -1px 0 #e5e5e5, 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.24); } md-expansion-panel.md-open { margin-top: 16px; diff --git a/dist/md-expansion-panel.js b/dist/md-expansion-panel.js index 4677968..ca77b9b 100644 --- a/dist/md-expansion-panel.js +++ b/dist/md-expansion-panel.js @@ -14,6 +14,10 @@ angular .module('material.components.expansionPanels') .directive('mdExpansionPanel', expansionPanelDirective); + +var ANIMATION_TIME = 180; //ms + + /** * @ngdoc directive * @name mdExpansionPanel @@ -32,7 +36,7 @@ function expansionPanelDirective() { require: ['mdExpansionPanel', '?^^mdExpansionPanelGroup'], scope: true, compile: compile, - controller: ['$scope', '$element', '$attrs', '$window', '$$rAF', '$mdConstant', '$mdUtil', '$mdComponentRegistry', controller] + controller: ['$scope', '$element', '$attrs', '$window', '$$rAF', '$mdConstant', '$mdUtil', '$mdComponentRegistry', '$timeout', '$q', controller] }; return directive; @@ -54,16 +58,22 @@ function expansionPanelDirective() { return function postLink(scope, element, attrs, ctrls) { var epxansionPanelCtrl = ctrls[0]; var epxansionPanelGroupCtrl = ctrls[1]; - var componentId = attrs.mdComponentId; - epxansionPanelCtrl.componentId = componentId; + if (epxansionPanelGroupCtrl) { + epxansionPanelCtrl.epxansionPanelGroupCtrl = epxansionPanelGroupCtrl; + epxansionPanelGroupCtrl.addPanel(epxansionPanelCtrl.componentId, { + expand: epxansionPanelCtrl.expand, + collapse: epxansionPanelCtrl.collapse, + remove: epxansionPanelCtrl.remove + }); + } }; } - function controller($scope, $element, $attrs, $window, $$rAF, $mdConstant, $mdUtil, $mdComponentRegistry) { + function controller($scope, $element, $attrs, $window, $$rAF, $mdConstant, $mdUtil, $mdComponentRegistry, $timeout, $q) { /* jshint validthis: true */ var vm = this; @@ -87,8 +97,10 @@ function expansionPanelDirective() { vm.registerFooter = function (ctrl) { footerCtrl = ctrl; }; vm.$element = $element; + vm.componentId = $attrs.mdComponentId; vm.expand = expand; vm.collapse = collapse; + vm.remove = remove; $attrs.$observe('disabled', function(disabled) { isDisabled = (typeof disabled === 'string' && disabled !== 'false') ? true : false; @@ -123,20 +135,24 @@ function expansionPanelDirective() { $scope.$panel = { collapse: collapse, - expand: expand + expand: expand, + remove: remove }; $scope.$on('$destroy', function () { // remove component from registry if (typeof deregister === 'function') { deregister(); } + killEvents(); }); if ($attrs.mdComponentId) { deregister = $mdComponentRegistry.register({ expand: expand, - collapse: collapse + collapse: collapse, + remove: remove, + componentId: $attrs.mdComponentId }, $attrs.mdComponentId); } @@ -146,6 +162,12 @@ function expansionPanelDirective() { if (isOpen === true || isDisabled === true) { return; } isOpen = true; + var deferred = $q.defer(); + + if (vm.epxansionPanelGroupCtrl) { + vm.epxansionPanelGroupCtrl.expandPanel(vm.componentId); + } + $element.removeClass('md-close'); $element.addClass('md-open'); @@ -155,6 +177,11 @@ function expansionPanelDirective() { if (headerCtrl) { headerCtrl.show(); } if (footerCtrl) { footerCtrl.show(); } + + $timeout(function () { + deferred.resolve(); + }, ANIMATION_TIME); + return deferred.promise; } @@ -162,6 +189,8 @@ function expansionPanelDirective() { if (isOpen === false) { return; } isOpen = false; + var deferred = $q.defer(); + $element.addClass('md-close'); $element.removeClass('md-open'); @@ -171,6 +200,35 @@ function expansionPanelDirective() { if (headerCtrl) { headerCtrl.hide(); } if (footerCtrl) { footerCtrl.hide(); } + + $timeout(function () { + deferred.resolve(); + }, ANIMATION_TIME); + return deferred.promise; + } + + + function remove(noAnimation) { + var deferred = $q.defer(); + + if (vm.epxansionPanelGroupCtrl) { + vm.epxansionPanelGroupCtrl.removePanel(vm.componentId); + } + + if (noAnimation === true || isOpen === false) { + $scope.$destroy(); + $element.remove(); + deferred.resolve(); + } else { + collapse(); + $timeout(function () { + $scope.$destroy(); + $element.remove(); + deferred.resolve(); + }, ANIMATION_TIME); + } + + return deferred.promise; } @@ -215,7 +273,7 @@ function expansionPanelDirective() { resizeKiller = undefined; } - if (scrollContainer.nodeName === 'MD-CONTENT') { + if (scrollContainer && scrollContainer.nodeName === 'MD-CONTENT') { angular.element(scrollContainer).off('scroll', debouncedUpdateScroll); } @@ -551,6 +609,254 @@ function expansionPanelFooterDirective() { } } }()); +(function(){"use strict";angular + .module('material.components.expansionPanels') + .directive('mdExpansionPanelGroup', expansionPanelGroupDirective); + +/** + * @ngdoc directive + * @name mdExpansionPanelGroup + * @module material.components.expansionPanels + * + * @restrict E + * + * @description + * `mdExpansionPanelGroup` is a container used to manage multiple expansion panels + * + * @param {string=} md-component-id - add an id if you want to acces the panel via the `$mdExpansionPanelGroup` service + * @param {string=} auto-expand - panels expand when added to `` + * @param {string=} multiple - allows for more than one panel to be expanded at a time + **/ +function expansionPanelGroupDirective() { + var directive = { + restrict: 'E', + controller: ['$scope', '$attrs', '$element', '$mdComponentRegistry', controller] + }; + return directive; + + + function controller($scope, $attrs, $element, $mdComponentRegistry) { + /* jshint validthis: true */ + var vm = this; + + var registered = {}; + var panels = {}; + var multipleExpand = $attrs.mdMultiple !== undefined || $attrs.multiple !== undefined; + var autoExpand = $attrs.mdAutoExpand !== undefined || $attrs.autoExpand !== undefined; + + + vm.destroy = $mdComponentRegistry.register({ + $element: $element, + register: register, + getRegistered: getRegistered, + remove: remove, + removeAll: removeAll + }, $attrs.mdComponentId); + + vm.addPanel = addPanel; + vm.expandPanel = expandPanel; + vm.removePanel = removePanel; + + + $scope.$on('$destroy', function () { + if (typeof vm.destroy === 'function') { vm.destroy(); } + }); + + + function addPanel(componentId, panelCtrl) { + panels[componentId] = panelCtrl; + if (autoExpand === true) { + panelCtrl.expand(); + closeOthers(componentId); + } + } + + function expandPanel(componentId) { + closeOthers(componentId); + } + + function remove(componentId) { + return panels[componentId].remove(); + } + + function removeAll() { + Object.keys(panels).forEach(function (panelId) { + panels[panelId].remove(); + }); + } + + function removePanel(componentId) { + delete panels[componentId]; + } + + function closeOthers(id) { + if (multipleExpand === false) { + Object.keys(panels).forEach(function (panelId) { + if (panelId !== id) { panels[panelId].collapse(); } + }); + } + } + + + function register(name, options) { + if (registered[name] !== undefined) { + throw Error('$mdExpansionPanelGroup.register() The name "' + name + '" has already been registered'); + } + registered[name] = options; + } + + + function getRegistered(name) { + if (registered[name] === undefined) { + throw Error('$mdExpansionPanelGroup.addPanel() Cannot find Panel with name of "' + name + '"'); + } + return registered[name]; + } + } +} +}()); +(function(){"use strict";angular + .module('material.components.expansionPanels') + .factory('$mdExpansionPanelGroup', expansionPanelGroupService); + + +/** + * @ngdoc service + * @name $mdExpansionPanelGroup + * @module material.components.expansionPanels + * + * @description + * Expand and collapse Expansion Panel using its `md-component-id` + * + * @example + * $mdExpansionPanelGroup('comonentId').then(function (instance) { + * instance.register({ + * componentId: 'cardComponentId', + * templateUrl: 'template.html', + * controller: 'Controller' + * }); + * instance.add('cardComponentId', {local: localData}); + * instance.remove('cardComponentId'); + * instance.removeAll(); + * }); + */ +expansionPanelGroupService.$inject = ['$mdComponentRegistry', '$mdUtil', '$mdExpansionPanel', '$templateRequest', '$rootScope', '$compile', '$controller', '$q']; +function expansionPanelGroupService($mdComponentRegistry, $mdUtil, $mdExpansionPanel, $templateRequest, $rootScope, $compile, $controller, $q) { + return function (handle) { + var instance; + var service = { + add: add, + register: register, + remove: remove, + removeAll: removeAll + }; + + return $mdComponentRegistry + .when(handle) + .then(function (it) { + instance = it; + return service; + }); + + + + function register(name, options) { + if (typeof name !== 'string') { + throw Error('$mdExpansionPanelGroup.register() Expects name to be a string'); + } + + validateOptions(options); + instance.register(name, options); + } + + function remove(componentId) { + return instance.remove(componentId); + } + + function removeAll() { + instance.removeAll(); + } + + + function add(options, locals) { + locals = locals || {}; + // assume if options is a string then they are calling a registered card by its component id + if (typeof options === 'string') { + // call add panel with the stored options + return add(instance.getRegistered(options), locals); + } + + validateOptions(options); + if (options.componentId && instance.isPanelActive(options.componentId)) { + return $q.reject('panel with componentId "' + options.componentId + '" is currently active'); + } + + + var deffered = $q.defer(); + var scope = $rootScope.$new(); + angular.extend(scope, options.scope); + + getTemplate(options, function (template) { + var element = angular.element(template); + var componentId = options.componentId || element.attr('md-component-id') || '_panelComponentId_' + $mdUtil.nextUid(); + var panelPromise = $mdExpansionPanel(componentId); + element.attr('md-component-id', componentId); + + var linkFunc = $compile(element); + if (options.controller) { + angular.extend(locals, options.locals || {}); + locals.$scope = scope; + locals.$panel = panelPromise; + var invokeCtrl = $controller(options.controller, locals, true); + var ctrl = invokeCtrl(); + element.data('$ngControllerController', ctrl); + element.children().data('$ngControllerController', ctrl); + if (options.controllerAs) { + scope[options.controllerAs] = ctrl; + } + } + + // link after the element is added so we can find card manager directive + instance.$element.append(element); + linkFunc(scope); + + panelPromise.then(function (instance) { + deffered.resolve(instance); + }); + }); + + return deffered.promise; + } + + + function validateOptions(options) { + if (typeof options !== 'object' || options === null) { + throw Error('$mdExapnsionPanelGroup.add()/.register() : Requires an options object to be passed in'); + } + + // if none of these exist then a dialog box cannot be created + if (!options.template && !options.templateUrl) { + throw Error('$mdExapnsionPanelGroup.add()/.register() : Is missing required paramters to create. Required One of the following: template, templateUrl'); + } + } + + + + function getTemplate(options, callback) { + var template; + + if (options.templateUrl !== undefined) { + $templateRequest(options.templateUrl) + .then(function(response) { + callback(response); + }); + } else { + callback(options.template); + } + } + }; +} +}()); (function(){"use strict";angular .module('material.components.expansionPanels') .directive('mdExpansionPanelHeader', expansionPanelHeaderDirective); @@ -607,11 +913,13 @@ function expansionPanelHeaderDirective() { function onScroll(top) { var bounds = element[0].getBoundingClientRect(); - + var panelbottom = element[0].parentNode.getBoundingClientRect().bottom; + var offset = Math.max((top + bounds.height) - panelbottom, 0); + if (bounds.top < top) { // set container width because element becomes postion fixed container.css('width', element[0].offsetWidth + 'px'); - container.css('top', top + 'px'); + container.css('top', (top - offset) + 'px'); // set element height so it does not shink when container is position fixed element.css('height', container[0].offsetHeight + 'px'); diff --git a/dist/md-expansion-panel.min.css b/dist/md-expansion-panel.min.css index 4ed3dff..9f33aba 100644 --- a/dist/md-expansion-panel.min.css +++ b/dist/md-expansion-panel.min.css @@ -1 +1 @@ -md-expansion-panel .md-expansion-panel-footer-container,md-expansion-panel .md-expansion-panel-header-container,md-expansion-panel md-expansion-panel-collapsed{background:#fff}md-expansion-panel .md-expansion-panel-footer-container .md-summary,md-expansion-panel .md-expansion-panel-footer-container .md-title,md-expansion-panel .md-expansion-panel-header-container .md-summary,md-expansion-panel .md-expansion-panel-header-container .md-title,md-expansion-panel md-expansion-panel-collapsed .md-summary,md-expansion-panel md-expansion-panel-collapsed .md-title{color:#333}md-expansion-panel md-expansion-panel-footer .md-expansion-panel-footer-container,md-expansion-panel md-expansion-panel-header .md-expansion-panel-header-container{border-color:#ddd}md-expansion-panel .md-expansion-panel-icon-container .md-expansion-panel-icon{color:#999}md-expansion-panel[disabled] md-expansion-panel-collapsed{color:#ddd}md-expansion-panel:not(.md-open):not([disabled]):focus,md-expansion-panel:not(.md-open):not([disabled]):focus md-expansion-panel-collapsed{background:#eee}md-expansion-panel{display:block;position:relative;outline:none;margin-top:0;margin-bottom:0;box-shadow:0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24)}md-expansion-panel.md-open{margin-top:16px;margin-bottom:16px}md-expansion-panel.md-open:first-of-type{margin-top:0}md-expansion-panel.md-close{overflow:hidden}md-expansion-panel.md-open{-webkit-transition:margin-top .12s cubic-bezier(.25,.8,.25,1),margin-bottom .12s cubic-bezier(.25,.8,.25,1);transition:margin-top .12s cubic-bezier(.25,.8,.25,1),margin-bottom .12s cubic-bezier(.25,.8,.25,1)}md-expansion-panel.md-close{-webkit-transition:margin-top .08s cubic-bezier(.25,.8,.25,1),margin-bottom .08s cubic-bezier(.25,.8,.25,1);transition:margin-top .08s cubic-bezier(.25,.8,.25,1),margin-bottom .08s cubic-bezier(.25,.8,.25,1)}md-expansion-panel-collapsed .md-title,md-expansion-panel-header .md-title{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:16px;font-weight:600;min-width:80px;max-width:184px;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:nowrap}md-expansion-panel-collapsed .md-summary,md-expansion-panel-header .md-summary{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:nowrap}md-expansion-panel-collapsed{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:48px;line-height:48px;padding:0 24px;opacity:1;z-index:1;box-sizing:border-box}md-expansion-panel-collapsed.md-absolute{position:absolute}md-expansion-panel-collapsed.md-show{-webkit-transition:opacity .03s linear;transition:opacity .03s linear;-webkit-transition-delay:.03s;transition-delay:.03s}md-expansion-panel-collapsed.md-hide{-webkit-transition:opacity .1s cubic-bezier(.25,.8,.25,1);transition:opacity .1s cubic-bezier(.25,.8,.25,1);opacity:0}md-expansion-panel-expanded{display:none;min-height:48px;line-height:48px}md-expansion-panel-expanded.md-show{-webkit-transition:max-height .12s cubic-bezier(.25,.8,.25,1),opacity .12s cubic-bezier(.25,.8,.25,1);transition:max-height .12s cubic-bezier(.25,.8,.25,1),opacity .12s cubic-bezier(.25,.8,.25,1)}md-expansion-panel-expanded.md-hide{-webkit-transition:max-height .08s cubic-bezier(.25,.8,.25,1),opacity .08s cubic-bezier(.25,.8,.25,1);transition:max-height .08s cubic-bezier(.25,.8,.25,1),opacity .08s cubic-bezier(.25,.8,.25,1)}md-expansion-panel-expanded.md-hide,md-expansion-panel-expanded.md-show{display:block}md-expansion-panel-expanded.md-scroll-y{overflow-y:auto}md-expansion-panel-expanded.md-overflow{overflow:hidden}md-expansion-panel-expanded md-expansion-panel-content{display:block;padding:16px 24px}md-expansion-panel-header{display:block;position:relative}md-expansion-panel-header .md-expansion-panel-header-container{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:48px;line-height:48px;padding:0 24px;box-sizing:border-box;border-bottom:1px solid}md-expansion-panel-header.md-stick .md-expansion-panel-header-container{position:fixed;z-index:1;-webkit-animation:a .3s ease-out both;animation:a .3s ease-out both}md-expansion-panel-header.md-no-stick .md-expansion-panel-header-container{-webkit-animation:b .3s ease-out both;animation:b .3s ease-out both}md-expansion-panel-footer{display:block;position:relative}md-expansion-panel-footer.md-hide,md-expansion-panel-footer.md-show{display:block}md-expansion-panel-footer .md-expansion-panel-footer-container{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:48px;line-height:48px;padding:0 24px;border-top:1px solid;box-sizing:border-box}md-expansion-panel-footer.md-stick .md-expansion-panel-footer-container{position:fixed;z-index:1}md-expansion-panel .md-expansion-panel-icon-container:first-child{padding-right:12px}md-expansion-panel .md-expansion-panel-icon-container .md-expansion-panel-icon:after{font-family:mdMaterialIcons;font-size:18px;font-weight:600;display:block;content:'\e315';position:relative;speak:none;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform .4s cubic-bezier(.25,.8,.25,1);transition:-webkit-transform .4s cubic-bezier(.25,.8,.25,1);transition:transform .4s cubic-bezier(.25,.8,.25,1);transition:transform .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1)}md-expansion-panel.md-open>md-expansion-panel-collasped .md-expansion-panel-icon-container .md-expansion-panel-icon:after,md-expansion-panel.md-open>md-expansion-panel-header .md-expansion-panel-icon-container .md-expansion-panel-icon:after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}@-webkit-keyframes a{0%{box-shadow:0 0 0 0 transparent}to{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}}@keyframes a{0%{box-shadow:0 0 0 0 transparent}to{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}}@-webkit-keyframes b{0%{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}to{box-shadow:0 0 0 0 transparent}}@keyframes b{0%{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}to{box-shadow:0 0 0 0 transparent}} \ No newline at end of file +md-expansion-panel .md-expansion-panel-footer-container,md-expansion-panel .md-expansion-panel-header-container,md-expansion-panel md-expansion-panel-collapsed{background:#fff}md-expansion-panel .md-expansion-panel-footer-container .md-summary,md-expansion-panel .md-expansion-panel-footer-container .md-title,md-expansion-panel .md-expansion-panel-header-container .md-summary,md-expansion-panel .md-expansion-panel-header-container .md-title,md-expansion-panel md-expansion-panel-collapsed .md-summary,md-expansion-panel md-expansion-panel-collapsed .md-title{color:#333}md-expansion-panel md-expansion-panel-footer .md-expansion-panel-footer-container,md-expansion-panel md-expansion-panel-header .md-expansion-panel-header-container{border-color:#ddd}md-expansion-panel .md-expansion-panel-icon-container .md-expansion-panel-icon{color:#999}md-expansion-panel[disabled] md-expansion-panel-collapsed{color:#ddd}md-expansion-panel:not(.md-open):not([disabled]):focus,md-expansion-panel:not(.md-open):not([disabled]):focus md-expansion-panel-collapsed{background:#eee}md-expansion-panel{display:block;position:relative;outline:none;margin-top:0;margin-bottom:0;padding:0;box-shadow:0 -1px 0 #e5e5e5,0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.24)}md-expansion-panel.md-open{margin-top:16px;margin-bottom:16px}md-expansion-panel.md-open:first-of-type{margin-top:0}md-expansion-panel.md-close{overflow:hidden}md-expansion-panel.md-open{-webkit-transition:margin-top .12s cubic-bezier(.25,.8,.25,1),margin-bottom .12s cubic-bezier(.25,.8,.25,1);transition:margin-top .12s cubic-bezier(.25,.8,.25,1),margin-bottom .12s cubic-bezier(.25,.8,.25,1)}md-expansion-panel.md-close{-webkit-transition:margin-top .08s cubic-bezier(.25,.8,.25,1),margin-bottom .08s cubic-bezier(.25,.8,.25,1);transition:margin-top .08s cubic-bezier(.25,.8,.25,1),margin-bottom .08s cubic-bezier(.25,.8,.25,1)}md-expansion-panel-collapsed .md-title,md-expansion-panel-header .md-title{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:16px;font-weight:600;min-width:80px;max-width:184px;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:nowrap}md-expansion-panel-collapsed .md-summary,md-expansion-panel-header .md-summary{-webkit-box-flex:1;-ms-flex:1;flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;text-align:left;white-space:nowrap}md-expansion-panel-collapsed{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:48px;line-height:48px;padding:0 24px;opacity:1;z-index:1;box-sizing:border-box}md-expansion-panel-collapsed.md-absolute{position:absolute}md-expansion-panel-collapsed.md-show{-webkit-transition:opacity .03s linear;transition:opacity .03s linear;-webkit-transition-delay:.03s;transition-delay:.03s}md-expansion-panel-collapsed.md-hide{-webkit-transition:opacity .1s cubic-bezier(.25,.8,.25,1);transition:opacity .1s cubic-bezier(.25,.8,.25,1);opacity:0}md-expansion-panel-expanded{display:none;min-height:48px;line-height:48px}md-expansion-panel-expanded.md-show{-webkit-transition:max-height .12s cubic-bezier(.25,.8,.25,1),opacity .12s cubic-bezier(.25,.8,.25,1);transition:max-height .12s cubic-bezier(.25,.8,.25,1),opacity .12s cubic-bezier(.25,.8,.25,1)}md-expansion-panel-expanded.md-hide{-webkit-transition:max-height .08s cubic-bezier(.25,.8,.25,1),opacity .08s cubic-bezier(.25,.8,.25,1);transition:max-height .08s cubic-bezier(.25,.8,.25,1),opacity .08s cubic-bezier(.25,.8,.25,1)}md-expansion-panel-expanded.md-hide,md-expansion-panel-expanded.md-show{display:block}md-expansion-panel-expanded.md-scroll-y{overflow-y:auto}md-expansion-panel-expanded.md-overflow{overflow:hidden}md-expansion-panel-expanded md-expansion-panel-content{display:block;padding:16px 24px}md-expansion-panel-header{display:block;position:relative}md-expansion-panel-header .md-expansion-panel-header-container{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:48px;line-height:48px;padding:0 24px;box-sizing:border-box;border-bottom:1px solid}md-expansion-panel-header.md-stick .md-expansion-panel-header-container{position:fixed;z-index:1;-webkit-animation:a .3s ease-out both;animation:a .3s ease-out both}md-expansion-panel-header.md-no-stick .md-expansion-panel-header-container{-webkit-animation:b .3s ease-out both;animation:b .3s ease-out both}md-expansion-panel-footer{display:block;position:relative}md-expansion-panel-footer.md-hide,md-expansion-panel-footer.md-show{display:block}md-expansion-panel-footer .md-expansion-panel-footer-container{display:-webkit-box;display:-ms-flexbox;display:flex;min-height:48px;line-height:48px;padding:0 24px;border-top:1px solid;box-sizing:border-box}md-expansion-panel-footer.md-stick .md-expansion-panel-footer-container{position:fixed;z-index:1}md-expansion-panel .md-expansion-panel-icon-container:first-child{padding-right:12px}md-expansion-panel .md-expansion-panel-icon-container .md-expansion-panel-icon:after{font-family:mdMaterialIcons;font-size:18px;font-weight:600;display:block;content:'\e315';position:relative;speak:none;-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform .4s cubic-bezier(.25,.8,.25,1);transition:-webkit-transform .4s cubic-bezier(.25,.8,.25,1);transition:transform .4s cubic-bezier(.25,.8,.25,1);transition:transform .4s cubic-bezier(.25,.8,.25,1),-webkit-transform .4s cubic-bezier(.25,.8,.25,1)}md-expansion-panel.md-open>md-expansion-panel-collasped .md-expansion-panel-icon-container .md-expansion-panel-icon:after,md-expansion-panel.md-open>md-expansion-panel-header .md-expansion-panel-icon-container .md-expansion-panel-icon:after{-webkit-transform:rotate(90deg);transform:rotate(90deg)}@-webkit-keyframes a{0%{box-shadow:0 0 0 0 transparent}to{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}}@keyframes a{0%{box-shadow:0 0 0 0 transparent}to{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}}@-webkit-keyframes b{0%{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}to{box-shadow:0 0 0 0 transparent}}@keyframes b{0%{box-shadow:0 2px 4px 0 rgba(0,0,0,.16)}to{box-shadow:0 0 0 0 transparent}} \ No newline at end of file diff --git a/dist/md-expansion-panel.min.js b/dist/md-expansion-panel.min.js index 591e723..134de6a 100644 --- a/dist/md-expansion-panel.min.js +++ b/dist/md-expansion-panel.min.js @@ -1 +1 @@ -!function(){"use strict";angular.module("material.components.expansionPanels",["material.core"])}(),function(){"use strict";function e(){function e(e,n){var t="Invalid HTML for md-expansion-panel: ";if(e.attr("tabindex",n.tabindex||"0"),null===e[0].querySelector("md-expansion-panel-collapsed"))throw Error(t+"Expected a child element of `md-epxansion-panel-collapsed`");if(null===e[0].querySelector("md-expansion-panel-expanded"))throw Error(t+"Expected a child element of `md-epxansion-panel-expanded`");return function(e,n,t,o){var i=o[0],s=(o[1],t.mdComponentId);i.componentId=s}}function n(e,n,t,o,i,s,a,r){function c(e){var n=s.KEY_CODE;switch(e.keyCode){case n.ENTER:l();break;case n.ESCAPE:d()}}function l(){k!==!0&&P!==!0&&(k=!0,n.removeClass("md-close"),n.addClass("md-open"),m(),h.hide(),x.show(),g&&g.show(),v&&v.show())}function d(){k!==!1&&(k=!1,n.addClass("md-close"),n.removeClass("md-open"),u(),h.show(),x.hide(),g&&g.hide(),v&&v.hide())}function m(){(v&&v.noSticky!==!0||g&&g.noSticky!==!0)&&(w=e.$watch(function(){return n[0].offsetTop},S,!0),E=e.$watch(function(){return n[0].offsetWidth},H,!0),y=a.getNearestContentElement(n),"MD-CONTENT"===y.nodeName&&angular.element(y).on("scroll",S),x.setHeight===!0&&x.$element.on("scroll",S),angular.element(o).on("scroll",S).on("resize",S))}function u(){"function"==typeof w&&(w(),w=void 0),"function"==typeof E&&(E(),E=void 0),"MD-CONTENT"===y.nodeName&&angular.element(y).off("scroll",S),x.setHeight===!0&&x.$element.off("scroll",S),angular.element(o).off("scroll",S).off("resize",S)}function p(e){var n,t,o;o=x.setHeight===!0?x.$element[0].getBoundingClientRect():y.getBoundingClientRect(),n=Math.max(o.top,0),t=n+o.height,v&&v.noSticky===!1&&v.onScroll(n,t),g&&g.noSticky===!1&&g.onScroll(n,t)}function f(e){v&&v.noSticky===!1&&v.onResize(e),g&&g.noSticky===!1&&g.onResize(e)}var h,x,g,v,C,y,w,E,$=this,k=!1,P=!1,S=i.throttle(p),H=i.throttle(f);$.registerCollapsed=function(e){h=e},$.registerExpanded=function(e){x=e},$.registerHeader=function(e){g=e},$.registerFooter=function(e){v=e},$.$element=n,$.expand=l,$.collapse=d,t.$observe("disabled",function(e){P="string"==typeof e&&"false"!==e,P===!0?n.attr("tabindex","-1"):n.attr("tabindex","0")}),n.on("focus",function(e){n.on("keydown",c)}).on("blur",function(e){n.off("keydown",c)}),e.$panel={collapse:d,expand:l},e.$on("$destroy",function(){"function"==typeof C&&C()}),t.mdComponentId&&(C=r.register({expand:l,collapse:d},t.mdComponentId))}var t={restrict:"E",require:["mdExpansionPanel","?^^mdExpansionPanelGroup"],scope:!0,compile:e,controller:["$scope","$element","$attrs","$window","$$rAF","$mdConstant","$mdUtil","$mdComponentRegistry",n]};return t}angular.module("material.components.expansionPanels").directive("mdExpansionPanel",e)}(),function(){"use strict";function e(e){return function(n){return e.when(n).then(function(e){return e})}}angular.module("material.components.expansionPanels").factory("$mdExpansionPanel",e),e.$inject=["$mdComponentRegistry"]}(),function(){"use strict";function e(e){function n(n,t,o,i){function s(){t.css("width",t[0].offsetWidth+"px"),i.$element.css("min-height",t[0].offsetHeight+"px"),e(t,{addClass:"md-absolute md-hide",from:{opacity:1},to:{opacity:0}}).start().then(function(){t.removeClass("md-hide"),t.css("display","none")})}function a(){t.css("display",""),t.css("width",t[0].parentNode.offsetWidth+"px"),e(t,{addClass:"md-show",from:{opacity:0},to:{opacity:1}}).start().then(function(){t.removeClass("md-absolute md-show"),t.css("width",""),i.$element.css("min-height","")})}i.registerCollapsed({show:a,hide:s}),t.on("click",function(){i.expand()})}var t={restrict:"E",require:"^^mdExpansionPanel",link:n};return t}angular.module("material.components.expansionPanels").directive("mdExpansionPanelCollapsed",e),e.$inject=["$animateCss"]}(),function(){"use strict";function e(e){function n(n,t,o,i){function s(){var n=r?r:t[0].scrollHeight+"px";t.addClass("md-hide md-overflow"),t.removeClass("md-show md-scroll-y"),e(t,{from:{"max-height":n,opacity:1},to:{"max-height":"48px",opacity:0}}).start().then(function(){t.css("display","none"),t.removeClass("md-hide")})}function a(){t.css("display",""),t.addClass("md-show md-overflow");var n=r?r:t[0].scrollHeight+"px";e(t,{from:{"max-height":"48px",opacity:0},to:{"max-height":n,opacity:1}}).start().then(function(){void 0!==r?t.addClass("md-scroll-y"):t.css("max-height","none"),t.removeClass("md-overflow")})}var r=o.height||void 0;void 0!==r&&(r=r.replace("px","")+"px"),i.registerExpanded({show:a,hide:s,setHeight:void 0!==r,$element:t})}var t={restrict:"E",require:"^^mdExpansionPanel",link:n};return t}angular.module("material.components.expansionPanels").directive("mdExpansionPanelExpanded",e),e.$inject=["$animateCss"]}(),function(){"use strict";function e(){function e(e,n,t,o){function i(){}function s(){c()}function a(e,t){var i,s=n[0].getBoundingClientRect(),a=n[0].parentNode.getBoundingClientRect().top,r=a-t;s.bottom>t?(i=m[0].offsetHeight,r=Math.max(r+i,0),m.css("width",o.$element[0].offsetWidth+"px"),n.css("height",i+"px"),m.css("top",t-i+r+"px"),n.addClass("md-stick"),l=!0):l===!0&&c()}function r(e){l!==!1&&m.css("width",e+"px")}function c(){l=!1,m.css("width",""),m.css("top",""),n.css("height",""),n.removeClass("md-stick")}var l=!1,d=void 0!==t.mdNoSticky,m=angular.element(n[0].querySelector(".md-expansion-panel-footer-container"));o.registerFooter({show:i,hide:s,onScroll:a,onResize:r,noSticky:d})}var n={restrict:"E",transclude:!0,template:'',require:"^^mdExpansionPanel",link:e};return n}angular.module("material.components.expansionPanels").directive("mdExpansionPanelFooter",e)}(),function(){"use strict";function e(){function e(e,n,t,o){function i(){}function s(){c()}function a(e){var t=n[0].getBoundingClientRect();t.top',require:"^^mdExpansionPanel",link:e};return n}angular.module("material.components.expansionPanels").directive("mdExpansionPanelHeader",e),e.$inject=[]}(); \ No newline at end of file +!function(){"use strict";angular.module("material.components.expansionPanels",["material.core"])}(),function(){"use strict";function e(){function e(e,n){var t="Invalid HTML for md-expansion-panel: ";if(e.attr("tabindex",n.tabindex||"0"),null===e[0].querySelector("md-expansion-panel-collapsed"))throw Error(t+"Expected a child element of `md-epxansion-panel-collapsed`");if(null===e[0].querySelector("md-expansion-panel-expanded"))throw Error(t+"Expected a child element of `md-epxansion-panel-expanded`");return function(e,n,t,o){var r=o[0],i=o[1];i&&(r.epxansionPanelGroupCtrl=i,i.addPanel(r.componentId,{expand:r.expand,collapse:r.collapse,remove:r.remove}))}}function t(e,t,o,r,i,a,s,l,c,d){function m(e){var n=a.KEY_CODE;switch(e.keyCode){case n.ENTER:p();break;case n.ESCAPE:u()}}function p(){if(b!==!0&&I!==!0){b=!0;var e=d.defer();return S.epxansionPanelGroupCtrl&&S.epxansionPanelGroupCtrl.expandPanel(S.componentId),t.removeClass("md-close"),t.addClass("md-open"),h(),$.hide(),C.show(),y&&y.show(),E&&E.show(),c(function(){e.resolve()},n),e.promise}}function u(){if(b!==!1){b=!1;var e=d.defer();return t.addClass("md-close"),t.removeClass("md-open"),x(),$.show(),C.hide(),y&&y.hide(),E&&E.hide(),c(function(){e.resolve()},n),e.promise}}function f(o){var r=d.defer();return S.epxansionPanelGroupCtrl&&S.epxansionPanelGroupCtrl.removePanel(S.componentId),o===!0||b===!1?(e.$destroy(),t.remove(),r.resolve()):(u(),c(function(){e.$destroy(),t.remove(),r.resolve()},n)),r.promise}function h(){(E&&E.noSticky!==!0||y&&y.noSticky!==!0)&&(k=e.$watch(function(){return t[0].offsetTop},q,!0),R=e.$watch(function(){return t[0].offsetWidth},G,!0),P=s.getNearestContentElement(t),"MD-CONTENT"===P.nodeName&&angular.element(P).on("scroll",q),C.setHeight===!0&&C.$element.on("scroll",q),angular.element(r).on("scroll",q).on("resize",q))}function x(){"function"==typeof k&&(k(),k=void 0),"function"==typeof R&&(R(),R=void 0),P&&"MD-CONTENT"===P.nodeName&&angular.element(P).off("scroll",q),C.setHeight===!0&&C.$element.off("scroll",q),angular.element(r).off("scroll",q).off("resize",q)}function v(e){var n,t,o;o=C.setHeight===!0?C.$element[0].getBoundingClientRect():P.getBoundingClientRect(),n=Math.max(o.top,0),t=n+o.height,E&&E.noSticky===!1&&E.onScroll(n,t),y&&y.noSticky===!1&&y.onScroll(n,t)}function g(e){E&&E.noSticky===!1&&E.onResize(e),y&&y.noSticky===!1&&y.onResize(e)}var $,C,y,E,w,P,k,R,S=this,b=!1,I=!1,q=i.throttle(v),G=i.throttle(g);S.registerCollapsed=function(e){$=e},S.registerExpanded=function(e){C=e},S.registerHeader=function(e){y=e},S.registerFooter=function(e){E=e},S.$element=t,S.componentId=o.mdComponentId,S.expand=p,S.collapse=u,S.remove=f,o.$observe("disabled",function(e){I="string"==typeof e&&"false"!==e,I===!0?t.attr("tabindex","-1"):t.attr("tabindex","0")}),t.on("focus",function(e){t.on("keydown",m)}).on("blur",function(e){t.off("keydown",m)}),e.$panel={collapse:u,expand:p,remove:f},e.$on("$destroy",function(){"function"==typeof w&&w(),x()}),o.mdComponentId&&(w=l.register({expand:p,collapse:u,remove:f,componentId:o.mdComponentId},o.mdComponentId))}var o={restrict:"E",require:["mdExpansionPanel","?^^mdExpansionPanelGroup"],scope:!0,compile:e,controller:["$scope","$element","$attrs","$window","$$rAF","$mdConstant","$mdUtil","$mdComponentRegistry","$timeout","$q",t]};return o}angular.module("material.components.expansionPanels").directive("mdExpansionPanel",e);var n=180}(),function(){"use strict";function e(e){return function(n){return e.when(n).then(function(e){return e})}}angular.module("material.components.expansionPanels").factory("$mdExpansionPanel",e),e.$inject=["$mdComponentRegistry"]}(),function(){"use strict";function e(e){function n(n,t,o,r){function i(){t.css("width",t[0].offsetWidth+"px"),r.$element.css("min-height",t[0].offsetHeight+"px"),e(t,{addClass:"md-absolute md-hide",from:{opacity:1},to:{opacity:0}}).start().then(function(){t.removeClass("md-hide"),t.css("display","none")})}function a(){t.css("display",""),t.css("width",t[0].parentNode.offsetWidth+"px"),e(t,{addClass:"md-show",from:{opacity:0},to:{opacity:1}}).start().then(function(){t.removeClass("md-absolute md-show"),t.css("width",""),r.$element.css("min-height","")})}r.registerCollapsed({show:a,hide:i}),t.on("click",function(){r.expand()})}var t={restrict:"E",require:"^^mdExpansionPanel",link:n};return t}angular.module("material.components.expansionPanels").directive("mdExpansionPanelCollapsed",e),e.$inject=["$animateCss"]}(),function(){"use strict";function e(e){function n(n,t,o,r){function i(){var n=s?s:t[0].scrollHeight+"px";t.addClass("md-hide md-overflow"),t.removeClass("md-show md-scroll-y"),e(t,{from:{"max-height":n,opacity:1},to:{"max-height":"48px",opacity:0}}).start().then(function(){t.css("display","none"),t.removeClass("md-hide")})}function a(){t.css("display",""),t.addClass("md-show md-overflow");var n=s?s:t[0].scrollHeight+"px";e(t,{from:{"max-height":"48px",opacity:0},to:{"max-height":n,opacity:1}}).start().then(function(){void 0!==s?t.addClass("md-scroll-y"):t.css("max-height","none"),t.removeClass("md-overflow")})}var s=o.height||void 0;void 0!==s&&(s=s.replace("px","")+"px"),r.registerExpanded({show:a,hide:i,setHeight:void 0!==s,$element:t})}var t={restrict:"E",require:"^^mdExpansionPanel",link:n};return t}angular.module("material.components.expansionPanels").directive("mdExpansionPanelExpanded",e),e.$inject=["$animateCss"]}(),function(){"use strict";function e(){function e(e,n,t,o){function r(){}function i(){l()}function a(e,t){var r,i=n[0].getBoundingClientRect(),a=n[0].parentNode.getBoundingClientRect().top,s=a-t;i.bottom>t?(r=m[0].offsetHeight,s=Math.max(s+r,0),m.css("width",o.$element[0].offsetWidth+"px"),n.css("height",r+"px"),m.css("top",t-r+s+"px"),n.addClass("md-stick"),c=!0):c===!0&&l()}function s(e){c!==!1&&m.css("width",e+"px")}function l(){c=!1,m.css("width",""),m.css("top",""),n.css("height",""),n.removeClass("md-stick")}var c=!1,d=void 0!==t.mdNoSticky,m=angular.element(n[0].querySelector(".md-expansion-panel-footer-container"));o.registerFooter({show:r,hide:i,onScroll:a,onResize:s,noSticky:d})}var n={restrict:"E",transclude:!0,template:'',require:"^^mdExpansionPanel",link:e};return n}angular.module("material.components.expansionPanels").directive("mdExpansionPanelFooter",e)}(),function(){"use strict";function e(){function e(e,n,t,o){function r(e,n){f[e]=n,x===!0&&(n.expand(),c(e))}function i(e){c(e)}function a(e){return f[e].remove()}function s(){Object.keys(f).forEach(function(e){f[e].remove()})}function l(e){delete f[e]}function c(e){h===!1&&Object.keys(f).forEach(function(n){n!==e&&f[n].collapse()})}function d(e,n){if(void 0!==u[e])throw Error('$mdExpansionPanelGroup.register() The name "'+e+'" has already been registered');u[e]=n}function m(e){if(void 0===u[e])throw Error('$mdExpansionPanelGroup.addPanel() Cannot find Panel with name of "'+e+'"');return u[e]}var p=this,u={},f={},h=void 0!==n.mdMultiple||void 0!==n.multiple,x=void 0!==n.mdAutoExpand||void 0!==n.autoExpand;p.destroy=o.register({$element:t,register:d,getRegistered:m,remove:a,removeAll:s},n.mdComponentId),p.addPanel=r,p.expandPanel=i,p.removePanel=l,e.$on("$destroy",function(){"function"==typeof p.destroy&&p.destroy()})}var n={restrict:"E",controller:["$scope","$attrs","$element","$mdComponentRegistry",e]};return n}angular.module("material.components.expansionPanels").directive("mdExpansionPanelGroup",e)}(),function(){"use strict";function e(e,n,t,o,r,i,a,s){return function(l){function c(e,n){if("string"!=typeof e)throw Error("$mdExpansionPanelGroup.register() Expects name to be a string");u(n),h.register(e,n)}function d(e){return h.remove(e)}function m(){h.removeAll()}function p(e,o){if(o=o||{},"string"==typeof e)return p(h.getRegistered(e),o);if(u(e),e.componentId&&h.isPanelActive(e.componentId))return s.reject('panel with componentId "'+e.componentId+'" is currently active');var l=s.defer(),c=r.$new();return angular.extend(c,e.scope),f(e,function(r){var s=angular.element(r),d=e.componentId||s.attr("md-component-id")||"_panelComponentId_"+n.nextUid(),m=t(d);s.attr("md-component-id",d);var p=i(s);if(e.controller){angular.extend(o,e.locals||{}),o.$scope=c,o.$panel=m;var u=a(e.controller,o,!0),f=u();s.data("$ngControllerController",f),s.children().data("$ngControllerController",f),e.controllerAs&&(c[e.controllerAs]=f)}h.$element.append(s),p(c),m.then(function(e){l.resolve(e)})}),l.promise}function u(e){if("object"!=typeof e||null===e)throw Error("$mdExapnsionPanelGroup.add()/.register() : Requires an options object to be passed in");if(!e.template&&!e.templateUrl)throw Error("$mdExapnsionPanelGroup.add()/.register() : Is missing required paramters to create. Required One of the following: template, templateUrl")}function f(e,n){void 0!==e.templateUrl?o(e.templateUrl).then(function(e){n(e)}):n(e.template)}var h,x={add:p,register:c,remove:d,removeAll:m};return e.when(l).then(function(e){return h=e,x})}}angular.module("material.components.expansionPanels").factory("$mdExpansionPanelGroup",e),e.$inject=["$mdComponentRegistry","$mdUtil","$mdExpansionPanel","$templateRequest","$rootScope","$compile","$controller","$q"]}(),function(){"use strict";function e(){function e(e,n,t,o){function r(){}function i(){l()}function a(e){var t=n[0].getBoundingClientRect(),o=n[0].parentNode.getBoundingClientRect().bottom,r=Math.max(e+t.height-o,0);t.top',require:"^^mdExpansionPanel",link:e};return n}angular.module("material.components.expansionPanels").directive("mdExpansionPanelHeader",e),e.$inject=[]}(); \ No newline at end of file diff --git a/package.json b/package.json index b9aa06d..66edbee 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-material-expansion-panel", - "version": "0.2.0", + "version": "0.3.0", "author": "Ben Rubin", "description": "Material Design Expansion Panels.", "keywords": "material, material-design, design, angular, component, expansion, panel, panels",