You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
3.2 KiB
102 lines
3.2 KiB
/*!
|
|
* Angular Material Design
|
|
* https://github.com/angular/material
|
|
* @license MIT
|
|
* v1.1.3
|
|
*/
|
|
goog.provide('ngmaterial.components.content');
|
|
goog.require('ngmaterial.core');
|
|
/**
|
|
* @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;
|
|
}
|
|
});
|
|
}
|
|
|
|
ngmaterial.components.content = angular.module("material.components.content");
|