1 | /*!
|
---|
2 | * AngularJS Material Design
|
---|
3 | * https://github.com/angular/material
|
---|
4 | * @license MIT
|
---|
5 | * v1.2.3
|
---|
6 | */
|
---|
7 | goog.provide('ngmaterial.components.content');
|
---|
8 | goog.require('ngmaterial.core');
|
---|
9 | /**
|
---|
10 | * @ngdoc module
|
---|
11 | * @name material.components.content
|
---|
12 | *
|
---|
13 | * @description
|
---|
14 | * Scrollable content
|
---|
15 | */
|
---|
16 | mdContentDirective['$inject'] = ["$mdTheming"];
|
---|
17 | angular.module('material.components.content', [
|
---|
18 | 'material.core'
|
---|
19 | ])
|
---|
20 | .directive('mdContent', mdContentDirective);
|
---|
21 |
|
---|
22 | /**
|
---|
23 | * @ngdoc directive
|
---|
24 | * @name mdContent
|
---|
25 | * @module material.components.content
|
---|
26 | *
|
---|
27 | * @restrict E
|
---|
28 | *
|
---|
29 | * @description
|
---|
30 | *
|
---|
31 | * The `<md-content>` directive is a container element useful for scrollable content. It achieves
|
---|
32 | * this by setting the CSS `overflow` property to `auto` so that content can properly scroll.
|
---|
33 | *
|
---|
34 | * In general, `<md-content>` components are not designed to be nested inside one another. If
|
---|
35 | * possible, it is better to make them siblings. This often results in a better user experience as
|
---|
36 | * having nested scrollbars may confuse the user.
|
---|
37 | *
|
---|
38 | * ## Troubleshooting
|
---|
39 | *
|
---|
40 | * In some cases, you may wish to apply the `md-no-momentum` class to ensure that Safari's
|
---|
41 | * momentum scrolling is disabled. Momentum scrolling can cause flickering issues while scrolling
|
---|
42 | * SVG icons and some other components.
|
---|
43 | *
|
---|
44 | * Additionally, we now also offer the `md-no-flicker` class which can be applied to any element
|
---|
45 | * and uses a Webkit-specific filter of `blur(0px)` that forces GPU rendering of all elements
|
---|
46 | * inside (which eliminates the flicker on iOS devices).
|
---|
47 | *
|
---|
48 | * _<b>Note:</b> Forcing an element to render on the GPU can have unintended side-effects, especially
|
---|
49 | * related to the z-index of elements. Please use with caution and only on the elements needed._
|
---|
50 | *
|
---|
51 | * @usage
|
---|
52 | *
|
---|
53 | * Add the `[layout-padding]` attribute to make the content padded.
|
---|
54 | *
|
---|
55 | * <hljs lang="html">
|
---|
56 | * <md-content layout-padding>
|
---|
57 | * Lorem ipsum dolor sit amet, ne quod novum mei.
|
---|
58 | * </md-content>
|
---|
59 | * </hljs>
|
---|
60 | */
|
---|
61 |
|
---|
62 | function mdContentDirective($mdTheming) {
|
---|
63 | return {
|
---|
64 | restrict: 'E',
|
---|
65 | controller: ['$scope', '$element', ContentController],
|
---|
66 | link: function(scope, element) {
|
---|
67 | element.addClass('_md'); // private md component indicator for styling
|
---|
68 |
|
---|
69 | $mdTheming(element);
|
---|
70 | scope.$broadcast('$mdContentLoaded', element);
|
---|
71 |
|
---|
72 | iosScrollFix(element[0]);
|
---|
73 | }
|
---|
74 | };
|
---|
75 |
|
---|
76 | function ContentController($scope, $element) {
|
---|
77 | this.$scope = $scope;
|
---|
78 | this.$element = $element;
|
---|
79 | }
|
---|
80 | }
|
---|
81 |
|
---|
82 | function iosScrollFix(node) {
|
---|
83 | // IOS FIX:
|
---|
84 | // If we scroll where there is no more room for the webview to scroll,
|
---|
85 | // by default the webview itself will scroll up and down, this looks really
|
---|
86 | // bad. So if we are scrolling to the very top or bottom, add/subtract one
|
---|
87 | angular.element(node).on('$md.pressdown', function(ev) {
|
---|
88 | // Only touch events
|
---|
89 | if (ev.pointer.type !== 't') return;
|
---|
90 | // Don't let a child content's touchstart ruin it for us.
|
---|
91 | if (ev.$materialScrollFixed) return;
|
---|
92 | ev.$materialScrollFixed = true;
|
---|
93 |
|
---|
94 | if (node.scrollTop === 0) {
|
---|
95 | node.scrollTop = 1;
|
---|
96 | } else if (node.scrollHeight === node.scrollTop + node.offsetHeight) {
|
---|
97 | node.scrollTop -= 1;
|
---|
98 | }
|
---|
99 | });
|
---|
100 | }
|
---|
101 |
|
---|
102 | ngmaterial.components.content = angular.module("material.components.content"); |
---|