mirror of
https://github.com/gwenhael-le-moine/ledgerrb.git
synced 2025-01-29 08:34:30 +01:00
161 lines
4.7 KiB
JavaScript
161 lines
4.7 KiB
JavaScript
/*!
|
|
* Angular Material Design
|
|
* https://github.com/angular/material
|
|
* @license MIT
|
|
* v0.7.1
|
|
*/
|
|
goog.provide('ng.material.components.toolbar');
|
|
goog.require('ng.material.components.content');
|
|
goog.require('ng.material.core');
|
|
(function() {
|
|
'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) {
|
|
|
|
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.
|
|
contentElement.css(
|
|
'margin-top',
|
|
(-toolbarHeight * shrinkSpeedFactor) + 'px'
|
|
);
|
|
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,
|
|
'translate3d(0,' + (-y * shrinkSpeedFactor) + 'px,0)'
|
|
);
|
|
contentElement.css(
|
|
$mdConstant.CSS.TRANSFORM,
|
|
'translate3d(0,' + ((toolbarHeight - y) * shrinkSpeedFactor) + 'px,0)'
|
|
);
|
|
|
|
prevScrollTop = scrollTop;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
};
|
|
|
|
}
|
|
mdToolbarDirective.$inject = ["$$rAF", "$mdConstant", "$mdUtil", "$mdTheming"];
|
|
})();
|