| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- /*!
- * AngularJS Material Design
- * https://github.com/angular/material
- * @license MIT
- * v1.1.8-master-aba7b2b
- */
- (function( window, angular, undefined ){
- "use strict";
- /**
- * @ngdoc module
- * @name material.components.content
- *
- * @description
- * Scrollable content
- */
- mdContentDirective['$inject'] = ["$mdTheming"];
- angular.module('material.components.content', [
- 'material.core'
- ])
- .directive('mdContent', mdContentDirective);
- /**
- * @ngdoc directive
- * @name mdContent
- * @module material.components.content
- *
- * @restrict E
- *
- * @description
- *
- * The `<md-content>` directive is a container element useful for scrollable content. It achieves
- * this by setting the CSS `overflow` property to `auto` so that content can properly scroll.
- *
- * In general, `<md-content>` components are not designed to be nested inside one another. If
- * possible, it is better to make them siblings. This often results in a better user experience as
- * having nested scrollbars may confuse the user.
- *
- * ## Troubleshooting
- *
- * In some cases, you may wish to apply the `md-no-momentum` class to ensure that Safari's
- * momentum scrolling is disabled. Momentum scrolling can cause flickering issues while scrolling
- * SVG icons and some other components.
- *
- * Additionally, we now also offer the `md-no-flicker` class which can be applied to any element
- * and uses a Webkit-specific filter of `blur(0px)` that forces GPU rendering of all elements
- * inside (which eliminates the flicker on iOS devices).
- *
- * _<b>Note:</b> Forcing an element to render on the GPU can have unintended side-effects, especially
- * related to the z-index of elements. Please use with caution and only on the elements needed._
- *
- * @usage
- *
- * Add the `[layout-padding]` attribute to make the content padded.
- *
- * <hljs lang="html">
- * <md-content layout-padding>
- * Lorem ipsum dolor sit amet, ne quod novum mei.
- * </md-content>
- * </hljs>
- */
- function mdContentDirective($mdTheming) {
- return {
- restrict: 'E',
- controller: ['$scope', '$element', ContentController],
- link: function(scope, element) {
- element.addClass('_md'); // private md component indicator for styling
- $mdTheming(element);
- scope.$broadcast('$mdContentLoaded', element);
- iosScrollFix(element[0]);
- }
- };
- function ContentController($scope, $element) {
- this.$scope = $scope;
- this.$element = $element;
- }
- }
- function iosScrollFix(node) {
- // IOS FIX:
- // If we scroll where there is no more room for the webview to scroll,
- // by default the webview itself will scroll up and down, this looks really
- // bad. So if we are scrolling to the very top or bottom, add/subtract one
- angular.element(node).on('$md.pressdown', function(ev) {
- // Only touch events
- if (ev.pointer.type !== 't') return;
- // Don't let a child content's touchstart ruin it for us.
- if (ev.$materialScrollFixed) return;
- ev.$materialScrollFixed = true;
- if (node.scrollTop === 0) {
- node.scrollTop = 1;
- } else if (node.scrollHeight === node.scrollTop + node.offsetHeight) {
- node.scrollTop -= 1;
- }
- });
- }
- })(window, window.angular);
|