diff options
Diffstat (limited to 'ecomp-portal-FE/client/bower_components/angular-material/modules/closure/toolbar/toolbar.js')
| -rw-r--r-- | ecomp-portal-FE/client/bower_components/angular-material/modules/closure/toolbar/toolbar.js | 169 |
1 files changed, 169 insertions, 0 deletions
diff --git a/ecomp-portal-FE/client/bower_components/angular-material/modules/closure/toolbar/toolbar.js b/ecomp-portal-FE/client/bower_components/angular-material/modules/closure/toolbar/toolbar.js new file mode 100644 index 00000000..e28550eb --- /dev/null +++ b/ecomp-portal-FE/client/bower_components/angular-material/modules/closure/toolbar/toolbar.js @@ -0,0 +1,169 @@ +/*! + * Angular Material Design + * https://github.com/angular/material + * @license MIT + * v0.9.8 + */ +goog.provide('ng.material.components.toolbar'); +goog.require('ng.material.components.content'); +goog.require('ng.material.core'); +/** + * @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, $timeout) { + + 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, + 'translate3d(0,' + (-y * shrinkSpeedFactor) + 'px,0)' + ); + contentElement.css( + $mdConstant.CSS.TRANSFORM, + 'translate3d(0,' + ((toolbarHeight - y) * shrinkSpeedFactor) + 'px,0)' + ); + + prevScrollTop = scrollTop; + + if (element.hasClass('md-whiteframe-z1')) { + if (!y) { + $timeout(function () { $animate.removeClass(element, 'md-whiteframe-z1'); }); + } + } else { + if (y) { + $timeout(function () { $animate.addClass(element, 'md-whiteframe-z1'); }); + } + } + } + + } + + } + }; + +} +mdToolbarDirective.$inject = ["$$rAF", "$mdConstant", "$mdUtil", "$mdTheming", "$animate", "$timeout"]; + +ng.material.components.toolbar = angular.module("material.components.toolbar");
\ No newline at end of file |