ledgerrb/public/app/bower_components/angular-material/modules/js/toolbar/toolbar.js
Gwenhael Le Moine d5d3e3c31c bower update
2015-08-30 19:52:32 +02:00

167 lines
No EOL
5 KiB
JavaScript

/*!
* Angular Material Design
* https://github.com/angular/material
* @license MIT
* v0.10.1
*/
(function( window, angular, undefined ){
"use strict";
/**
* @ngdoc module
* @name material.components.toolbar
*/
angular.module('material.components.toolbar', [
'material.core',
'material.components.content'
])
.directive('mdToolbar', mdToolbarDirective);
/**
* @ngdoc directive
* @name mdToolbar
* @module material.components.toolbar
* @restrict E
* @description
* `md-toolbar` is used to place a toolbar in your app.
*
* Toolbars are usually used above a content area to display the title of the
* current page, and show relevant action buttons for that page.
*
* You can change the height of the toolbar by adding either the
* `md-medium-tall` or `md-tall` class to the toolbar.
*
* @usage
* <hljs lang="html">
* <div layout="column" layout-fill>
* <md-toolbar>
*
* <div class="md-toolbar-tools">
* <span>My App's Title</span>
*
* <!-- fill up the space between left and right area -->
* <span flex></span>
*
* <md-button>
* Right Bar Button
* </md-button>
* </div>
*
* </md-toolbar>
* <md-content>
* Hello!
* </md-content>
* </div>
* </hljs>
*
* @param {boolean=} md-scroll-shrink Whether the header should shrink away as
* the user scrolls down, and reveal itself as the user scrolls up.
* Note: for scrollShrink to work, the toolbar must be a sibling of a
* `md-content` element, placed before it. See the scroll shrink demo.
*
*
* @param {number=} md-shrink-speed-factor How much to change the speed of the toolbar's
* shrinking by. For example, if 0.25 is given then the toolbar will shrink
* at one fourth the rate at which the user scrolls down. Default 0.5.
*/
function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate ) {
var translateY = angular.bind(null, $mdUtil.supplant, 'translate3d(0,{0}px,0)' );
return {
restrict: 'E',
controller: angular.noop,
link: function(scope, element, attr) {
$mdTheming(element);
if (angular.isDefined(attr.mdScrollShrink)) {
setupScrollShrink();
}
function setupScrollShrink() {
// Current "y" position of scroll
var y = 0;
// Store the last scroll top position
var prevScrollTop = 0;
var shrinkSpeedFactor = attr.mdShrinkSpeedFactor || 0.5;
var toolbarHeight;
var contentElement;
var debouncedContentScroll = $$rAF.throttle(onContentScroll);
var debouncedUpdateHeight = $mdUtil.debounce(updateToolbarHeight, 5 * 1000);
// Wait for $mdContentLoaded event from mdContent directive.
// If the mdContent element is a sibling of our toolbar, hook it up
// to scroll events.
scope.$on('$mdContentLoaded', onMdContentLoad);
function onMdContentLoad($event, newContentEl) {
// Toolbar and content must be siblings
if (element.parent()[0] === newContentEl.parent()[0]) {
// unhook old content event listener if exists
if (contentElement) {
contentElement.off('scroll', debouncedContentScroll);
}
newContentEl.on('scroll', debouncedContentScroll);
newContentEl.attr('scroll-shrink', 'true');
contentElement = newContentEl;
$$rAF(updateToolbarHeight);
}
}
function updateToolbarHeight() {
toolbarHeight = element.prop('offsetHeight');
// Add a negative margin-top the size of the toolbar to the content el.
// The content will start transformed down the toolbarHeight amount,
// so everything looks normal.
//
// As the user scrolls down, the content will be transformed up slowly
// to put the content underneath where the toolbar was.
var margin = (-toolbarHeight * shrinkSpeedFactor) + 'px';
contentElement.css('margin-top', margin);
contentElement.css('margin-bottom', margin);
onContentScroll();
}
function onContentScroll(e) {
var scrollTop = e ? e.target.scrollTop : prevScrollTop;
debouncedUpdateHeight();
y = Math.min(
toolbarHeight / shrinkSpeedFactor,
Math.max(0, y + scrollTop - prevScrollTop)
);
element.css( $mdConstant.CSS.TRANSFORM, translateY([-y * shrinkSpeedFactor]) );
contentElement.css( $mdConstant.CSS.TRANSFORM, translateY([(toolbarHeight - y) * shrinkSpeedFactor]) );
prevScrollTop = scrollTop;
$mdUtil.nextTick(function () {
var hasWhiteFrame = element.hasClass('md-whiteframe-z1');
if ( hasWhiteFrame && !y) {
$animate.removeClass(element, 'md-whiteframe-z1');
} else if ( !hasWhiteFrame && y ) {
$animate.addClass(element, 'md-whiteframe-z1');
}
});
}
}
}
};
}
mdToolbarDirective.$inject = ["$$rAF", "$mdConstant", "$mdUtil", "$mdTheming", "$animate"];
})(window, window.angular);