99 lines
2.5 KiB
JavaScript
99 lines
2.5 KiB
JavaScript
|
(function(){"use strict";angular
|
||
|
|
.module('material.components.expansionPanels')
|
||
|
|
.directive('mdExpansionPanelHeader', expansionPanelHeaderDirective);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @ngdoc directive
|
||
|
|
* @name mdExpansionPanelHeader
|
||
|
|
* @module material.components.expansionPanels
|
||
|
|
*
|
||
|
|
* @restrict E
|
||
|
|
*
|
||
|
|
* @description
|
||
|
|
* `mdExpansionPanelHeader` is nested inside of `mdExpansionPanelExpanded` and contains content you want in place of the collapsed content
|
||
|
|
* this is optional
|
||
|
|
*
|
||
|
|
* @param {boolean=} md-no-sticky - add this aatribute to disable sticky
|
||
|
|
**/
|
||
|
|
expansionPanelHeaderDirective.$inject = [];
|
||
|
|
function expansionPanelHeaderDirective() {
|
||
|
|
var directive = {
|
||
|
|
restrict: 'E',
|
||
|
|
transclude: true,
|
||
|
|
template: '<div class="md-expansion-panel-header-container" ng-transclude></div>',
|
||
|
|
require: '^^mdExpansionPanel',
|
||
|
|
link: link
|
||
|
|
};
|
||
|
|
return directive;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
function link(scope, element, attrs, expansionPanelCtrl) {
|
||
|
|
var isStuck = false;
|
||
|
|
var noSticky = attrs.mdNoSticky !== undefined;
|
||
|
|
var container = angular.element(element[0].querySelector('.md-expansion-panel-header-container'));
|
||
|
|
|
||
|
|
expansionPanelCtrl.registerHeader({
|
||
|
|
show: show,
|
||
|
|
hide: hide,
|
||
|
|
noSticky: noSticky,
|
||
|
|
onScroll: onScroll,
|
||
|
|
onResize: onResize
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
function show() {
|
||
|
|
|
||
|
|
}
|
||
|
|
function hide() {
|
||
|
|
unstick();
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function onScroll(top, bottom, transformTop) {
|
||
|
|
var offset;
|
||
|
|
var panelbottom;
|
||
|
|
var bounds = element[0].getBoundingClientRect();
|
||
|
|
|
||
|
|
|
||
|
|
if (bounds.top < top) {
|
||
|
|
offset = top - transformTop;
|
||
|
|
panelbottom = element[0].parentNode.getBoundingClientRect().bottom - top - bounds.height;
|
||
|
|
if (panelbottom < 0) {
|
||
|
|
offset += panelbottom;
|
||
|
|
}
|
||
|
|
|
||
|
|
// set container width because element becomes postion fixed
|
||
|
|
container.css('width', element[0].offsetWidth + 'px');
|
||
|
|
container.css('top', offset + 'px');
|
||
|
|
|
||
|
|
// set element height so it does not shink when container is position fixed
|
||
|
|
element.css('height', container[0].offsetHeight + 'px');
|
||
|
|
|
||
|
|
element.removeClass('md-no-stick');
|
||
|
|
element.addClass('md-stick');
|
||
|
|
isStuck = true;
|
||
|
|
} else if (isStuck === true) {
|
||
|
|
unstick();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function onResize(width) {
|
||
|
|
if (isStuck === false) { return; }
|
||
|
|
container.css('width', width + 'px');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function unstick() {
|
||
|
|
isStuck = false;
|
||
|
|
container.css('width', '');
|
||
|
|
element.css('height', '');
|
||
|
|
element.css('top', '');
|
||
|
|
element.removeClass('md-stick');
|
||
|
|
element.addClass('md-no-stick');
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}());
|