ecomp-portal-FE/client/bower_components/angular-material/modules/closure/toolbar/toolbar.js

   1 /*!
   2  * Angular Material Design
   3  * https://github.com/angular/material
   4  * @license MIT
   5  * v0.9.8
   6  */
   7 goog.provide('ng.material.components.toolbar');
   8 goog.require('ng.material.components.content');
   9 goog.require('ng.material.core');
  10 /**
  11  * @ngdoc module
  12  * @name material.components.toolbar
  13  */
  14 angular.module('material.components.toolbar', [
  15   'material.core',
  16   'material.components.content'
  17 ])
  18   .directive('mdToolbar', mdToolbarDirective);
  19
  20 /**
  21  * @ngdoc directive
  22  * @name mdToolbar
  23  * @module material.components.toolbar
  24  * @restrict E
  25  * @description
  26  * `md-toolbar` is used to place a toolbar in your app.
  27  *
  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.
  30  *
  31  * You can change the height of the toolbar by adding either the
  32  * `md-medium-tall` or `md-tall` class to the toolbar.
  33  *
  34  * @usage
  35  * <hljs lang="html">
  36  * <div layout="column" layout-fill>
  37  *   <md-toolbar>
  38  *
  39  *     <div class="md-toolbar-tools">
  40  *       <span>My App's Title</span>
  41  *
  42  *       <!-- fill up the space between left and right area -->
  43  *       <span flex></span>
  44  *
  45  *       <md-button>
  46  *         Right Bar Button
  47  *       </md-button>
  48  *     </div>
  49  *
  50  *   </md-toolbar>
  51  *   <md-content>
  52  *     Hello!
  53  *   </md-content>
  54  * </div>
  55  * </hljs>
  56  *
  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.
  61  *
  62  *
  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.
  66  */
  67 function mdToolbarDirective($$rAF, $mdConstant, $mdUtil, $mdTheming, $animate, $timeout) {
  68
  69   return {
  70     restrict: 'E',
  71     controller: angular.noop,
  72     link: function(scope, element, attr) {
  73       $mdTheming(element);
  74
  75       if (angular.isDefined(attr.mdScrollShrink)) {
  76         setupScrollShrink();
  77       }
  78
  79       function setupScrollShrink() {
  80         // Current "y" position of scroll
  81         var y = 0;
  82         // Store the last scroll top position
  83         var prevScrollTop = 0;
  84
  85         var shrinkSpeedFactor = attr.mdShrinkSpeedFactor || 0.5;
  86
  87         var toolbarHeight;
  88         var contentElement;
  89
  90         var debouncedContentScroll = $$rAF.throttle(onContentScroll);
  91         var debouncedUpdateHeight = $mdUtil.debounce(updateToolbarHeight, 5 * 1000);
  92
  93         // Wait for $mdContentLoaded event from mdContent directive.
  94         // If the mdContent element is a sibling of our toolbar, hook it up
  95         // to scroll events.
  96         scope.$on('$mdContentLoaded', onMdContentLoad);
  97
  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);
 104             }
 105
 106             newContentEl.on('scroll', debouncedContentScroll);
 107             newContentEl.attr('scroll-shrink', 'true');
 108
 109             contentElement = newContentEl;
 110             $$rAF(updateToolbarHeight);
 111           }
 112         }
 113
 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.
 119           //
 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);
 125
 126           onContentScroll();
 127         }
 128
 129         function onContentScroll(e) {
 130           var scrollTop = e ? e.target.scrollTop : prevScrollTop;
 131
 132           debouncedUpdateHeight();
 133
 134           y = Math.min(
 135             toolbarHeight / shrinkSpeedFactor,
 136             Math.max(0, y + scrollTop - prevScrollTop)
 137           );
 138
 139           element.css(
 140             $mdConstant.CSS.TRANSFORM,
 141             'translate3d(0,' + (-y * shrinkSpeedFactor) + 'px,0)'
 142           );
 143           contentElement.css(
 144             $mdConstant.CSS.TRANSFORM,
 145             'translate3d(0,' + ((toolbarHeight - y) * shrinkSpeedFactor) + 'px,0)'
 146           );
 147
 148           prevScrollTop = scrollTop;
 149
 150             if (element.hasClass('md-whiteframe-z1')) {
 151               if (!y) {
 152                 $timeout(function () { $animate.removeClass(element, 'md-whiteframe-z1'); });
 153               }
 154             } else {
 155               if (y) {
 156                 $timeout(function () { $animate.addClass(element, 'md-whiteframe-z1'); });
 157               }
 158             }
 159         }
 160
 161       }
 162
 163     }
 164   };
 165
 166 }
 167 mdToolbarDirective.$inject = ["$$rAF", "$mdConstant", "$mdUtil", "$mdTheming", "$animate", "$timeout"];
 168
 169 ng.material.components.toolbar = angular.module("material.components.toolbar");