ionic-framework
Version:
203 lines • 9.3 kB
JavaScript
var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
var core_1 = require('angular2/core');
var ion_1 = require('../ion');
var config_1 = require('../../config/config');
var dom_1 = require('../../util/dom');
var keyboard_1 = require('../../util/keyboard');
var view_controller_1 = require('../nav/view-controller');
var scroll_to_1 = require('../../animations/scroll-to');
/**
* The Content component provides an easy to use content area that can be configured to use Ionic's custom Scroll View, or the built in overflow scrolling of the browser.
*
* While we recommend using the custom Scroll features in Ionic in most cases, sometimes (for performance reasons) only the browser's native overflow scrolling will suffice, and so we've made it easy to toggle between the Ionic scroll implementation and overflow scrolling.
*
* You can implement pull-to-refresh with the [Refresher](../../scroll/Refresher) component.
*
* @usage
* ```html
* <ion-content>
* Add your content here!
* </ion-content>
* ```
*
*/
var Content = (function (_super) {
__extends(Content, _super);
/**
* @param {ElementRef} elementRef A reference to the component's DOM element.
* @param {Config} config The config object to change content's default settings.
*/
function Content(elementRef, config, keyboard, viewCtrl, _zone) {
_super.call(this, elementRef, config);
this._zone = _zone;
this.scrollPadding = 0;
this.keyboard = keyboard;
if (viewCtrl) {
viewCtrl.setContent(this);
viewCtrl.setContentRef(elementRef);
}
}
/**
* @private
*/
Content.prototype.ngOnInit = function () {
_super.prototype.ngOnInit.call(this);
this.scrollElement = this.getNativeElement().children[0];
};
/**
* Adds the specified scroll handler to the content' scroll element.
* @param {Function} handler The scroll event handler.
* @returns {Function} A function that removes the scroll handler.
*/
Content.prototype.addScrollEventListener = function (handler) {
var _this = this;
if (!this.scrollElement) {
return;
}
// ensure we're not creating duplicates
this.scrollElement.removeEventListener('scroll', handler);
this.scrollElement.addEventListener('scroll', handler);
return function () {
_this.scrollElement.removeEventListener('scroll', handler);
};
};
Content.prototype.onScrollEnd = function (callback) {
var lastScrollTop = null;
var framesUnchanged = 0;
var scrollElement = this.scrollElement;
function next() {
var currentScrollTop = scrollElement.scrollTop;
if (lastScrollTop !== null) {
if (Math.round(lastScrollTop) === Math.round(currentScrollTop)) {
framesUnchanged++;
}
else {
framesUnchanged = 0;
}
if (framesUnchanged > 9) {
return callback();
}
}
lastScrollTop = currentScrollTop;
dom_1.raf(function () {
dom_1.raf(next);
});
}
setTimeout(next, 100);
};
/**
* Adds the specified touchmove handler to the content's scroll element.
* @param {Function} handler The touchmove handler.
* @returns {Function} A function that removes the touchmove handler.
*/
Content.prototype.addTouchMoveListener = function (handler) {
var _this = this;
if (!this.scrollElement) {
return;
}
// ensure we're not creating duplicates
this.scrollElement.removeEventListener('touchmove', handler);
this.scrollElement.addEventListener('touchmove', handler);
return function () {
_this.scrollElement.removeEventListener('touchmove', handler);
};
};
/**
* Scroll to the specified position.
* @param {TODO} x The x-value to scroll to.
* @param {TODO} y The y-value to scroll to.
* @param {Number} duration Duration of the scroll animation.
* @param {TODO} tolerance TODO
* @returns {TODO} TODO
*/
Content.prototype.scrollTo = function (x, y, duration, tolerance) {
if (this._scrollTo) {
this._scrollTo.dispose();
}
this._scrollTo = new scroll_to_1.ScrollTo(this.scrollElement);
return this._scrollTo.start(x, y, duration, tolerance);
};
Content.prototype.scrollToTop = function () {
if (this._scrollTo) {
this._scrollTo.dispose();
}
this._scrollTo = new scroll_to_1.ScrollTo(this.scrollElement);
return this._scrollTo.start(0, 0, 300, 0);
};
/**
* @private
* Returns the content and scroll elements' dimensions.
* @returns {Object} dimensions The content and scroll elements' dimensions
* {Number} dimensions.contentHeight content offsetHeight
* {Number} dimensions.contentTop content offsetTop
* {Number} dimensions.contentBottom content offsetTop+offsetHeight
* {Number} dimensions.contentWidth content offsetWidth
* {Number} dimensions.contentLeft content offsetLeft
* {Number} dimensions.contentRight content offsetLeft + offsetWidth
* {Number} dimensions.scrollHeight scroll scrollHeight
* {Number} dimensions.scrollTop scroll scrollTop
* {Number} dimensions.scrollBottom scroll scrollTop + scrollHeight
* {Number} dimensions.scrollWidth scroll scrollWidth
* {Number} dimensions.scrollLeft scroll scrollLeft
* {Number} dimensions.scrollRight scroll scrollLeft + scrollWidth
*/
Content.prototype.getDimensions = function () {
var scrollElement = this.scrollElement;
var parentElement = scrollElement.parentElement;
return {
contentHeight: parentElement.offsetHeight,
contentTop: parentElement.offsetTop,
contentBottom: parentElement.offsetTop + parentElement.offsetHeight,
contentWidth: parentElement.offsetWidth,
contentLeft: parentElement.offsetLeft,
contentRight: parentElement.offsetLeft + parentElement.offsetWidth,
scrollHeight: scrollElement.scrollHeight,
scrollTop: scrollElement.scrollTop,
scrollBottom: scrollElement.scrollTop + scrollElement.scrollHeight,
scrollWidth: scrollElement.scrollWidth,
scrollLeft: scrollElement.scrollLeft,
scrollRight: scrollElement.scrollLeft + scrollElement.scrollWidth,
};
};
/**
* @private
* Adds padding to the bottom of the scroll element when the keyboard is open
* so content below the keyboard can be scrolled into view.
*/
Content.prototype.addScrollPadding = function (newScrollPadding) {
if (newScrollPadding > this.scrollPadding) {
console.debug('addScrollPadding', newScrollPadding);
this.scrollPadding = newScrollPadding;
this.scrollElement.style.paddingBottom = newScrollPadding + 'px';
}
};
Content = __decorate([
core_1.Component({
selector: 'ion-content',
template: '<scroll-content>' +
'<ng-content></ng-content>' +
'</scroll-content>'
}),
__param(3, core_1.Optional()),
__metadata('design:paramtypes', [(typeof (_a = typeof core_1.ElementRef !== 'undefined' && core_1.ElementRef) === 'function' && _a) || Object, (typeof (_b = typeof config_1.Config !== 'undefined' && config_1.Config) === 'function' && _b) || Object, (typeof (_c = typeof keyboard_1.Keyboard !== 'undefined' && keyboard_1.Keyboard) === 'function' && _c) || Object, (typeof (_d = typeof view_controller_1.ViewController !== 'undefined' && view_controller_1.ViewController) === 'function' && _d) || Object, (typeof (_e = typeof core_1.NgZone !== 'undefined' && core_1.NgZone) === 'function' && _e) || Object])
], Content);
return Content;
var _a, _b, _c, _d, _e;
})(ion_1.Ion);
exports.Content = Content;