2 * Angular Material Design
3 * https://github.com/angular/material
7 (function( window, angular, undefined ){
12 * @name material.components.toolbar
14 angular.module('material.components.toolbar', [
16 'material.components.content'
18 .directive('mdToolbar', mdToolbarDirective);
23 * @module material.components.toolbar
26 * `md-toolbar` is used to place a toolbar in your app.
28 * Toolbars are usually used above a content area to display the title of the
29 * current page, and show relevant action buttons for that page.
31 * You can change the height of the toolbar by adding either the
32 * `md-medium-tall` or `md-tall` class to the toolbar.
36 * <div layout="column" layout-fill>
39 * <div class="md-toolbar-tools">
40 * <span>My App's Title</span>
42 * <!-- fill up the space between left and right area -->
57 * @param {boolean=} md-scroll-shrink Whether the header should shrink away as
58 * the user scrolls down, and reveal itself as the user scrolls up.
59 * Note: for scrollShrink to work, the toolbar must be a sibling of a
60 * `md-content` element, placed before it. See the scroll shrink demo.
63 * @param {number=} md-shrink-speed-factor How much to change the speed of the toolbar's
64 * shrinking by. For example, if 0.25 is given then the toolbar will shrink
65 * at one fourth the rate at which the user scrolls down. Default 0.5.
67 function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate, $timeout) {
71 controller: angular.noop,
72 link: function(scope, element, attr) {
75 if (angular.isDefined(attr.mdScrollShrink)) {
79 function setupScrollShrink() {
80 // Current "y" position of scroll
82 // Store the last scroll top position
83 var prevScrollTop = 0;
85 var shrinkSpeedFactor = attr.mdShrinkSpeedFactor || 0.5;
90 var debouncedContentScroll = $$rAF.throttle(onContentScroll);
91 var debouncedUpdateHeight = $mdUtil.debounce(updateToolbarHeight, 5 * 1000);
93 // Wait for $mdContentLoaded event from mdContent directive.
94 // If the mdContent element is a sibling of our toolbar, hook it up
96 scope.$on('$mdContentLoaded', onMdContentLoad);
98 function onMdContentLoad($event, newContentEl) {
99 // Toolbar and content must be siblings
100 if (element.parent()[0] === newContentEl.parent()[0]) {
101 // unhook old content event listener if exists
102 if (contentElement) {
103 contentElement.off('scroll', debouncedContentScroll);
106 newContentEl.on('scroll', debouncedContentScroll);
107 newContentEl.attr('scroll-shrink', 'true');
109 contentElement = newContentEl;
110 $$rAF(updateToolbarHeight);
114 function updateToolbarHeight() {
115 toolbarHeight = element.prop('offsetHeight');
116 // Add a negative margin-top the size of the toolbar to the content el.
117 // The content will start transformed down the toolbarHeight amount,
118 // so everything looks normal.
120 // As the user scrolls down, the content will be transformed up slowly
121 // to put the content underneath where the toolbar was.
122 var margin = (-toolbarHeight * shrinkSpeedFactor) + 'px';
123 contentElement.css('margin-top', margin);
124 contentElement.css('margin-bottom', margin);
129 function onContentScroll(e) {
130 var scrollTop = e ? e.target.scrollTop : prevScrollTop;
132 debouncedUpdateHeight();
135 toolbarHeight / shrinkSpeedFactor,
136 Math.max(0, y + scrollTop - prevScrollTop)
140 $mdConstant.CSS.TRANSFORM,
141 'translate3d(0,' + (-y * shrinkSpeedFactor) + 'px,0)'
144 $mdConstant.CSS.TRANSFORM,
145 'translate3d(0,' + ((toolbarHeight - y) * shrinkSpeedFactor) + 'px,0)'
148 prevScrollTop = scrollTop;
150 if (element.hasClass('md-whiteframe-z1')) {
152 $timeout(function () { $animate.removeClass(element, 'md-whiteframe-z1'); });
156 $timeout(function () { $animate.addClass(element, 'md-whiteframe-z1'); });
167 mdToolbarDirective.$inject = ["$$rAF", "$mdConstant", "$mdUtil", "$mdTheming", "$animate", "$timeout"];
169 })(window, window.angular);