import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnDestroy, Renderer } from '@angular/core'; import { App } from '../app/app'; import { Config } from '../../config/config'; import { DomController } from '../../platform/dom-controller'; import { Img } from '../img/img-interface'; import { Ion } from '../ion'; import { Keyboard } from '../../platform/keyboard'; import { NavController } from '../../navigation/nav-controller'; import { Content as IContent, Tabs } from '../../navigation/nav-interfaces'; import { Platform } from '../../platform/platform'; import { ScrollEvent, ScrollView } from '../../util/scroll-view'; import { ViewController } from '../../navigation/view-controller'; export { ScrollEvent } from '../../util/scroll-view'; export declare class EventEmitterProxy extends EventEmitter { onSubscribe: Function; subscribe(generatorOrNext?: any, error?: any, complete?: any): any; } /** * @name Content * @description * The Content component provides an easy to use content area with * some useful methods to control the scrollable area. There should * only be one content in a single view component. If additional scrollable * elements are needed, use [ionScroll](../../scroll/Scroll). * * * The content area can also implement pull-to-refresh with the * [Refresher](../../refresher/Refresher) component. * * @usage * ```html * * Add your content here! * * ``` * * To get a reference to the content component from a Page's logic, * you can use Angular's `@ViewChild` annotation: * * ```ts * import { Component, ViewChild } from '@angular/core'; * import { Content } from 'ionic-angular'; * * @Component({...}) * export class MyPage{ * @ViewChild(Content) content: Content; * * scrollToTop() { * this.content.scrollToTop(); * } * } * ``` * * @advanced * * ### Scroll Events * * Scroll events happen outside of Angular's Zones. This is for performance reasons. So * if you're trying to bind a value to any scroll event, it will need to be wrapped in * a `zone.run()` * * ```ts * import { Component, NgZone } from '@angular/core'; * @Component({ * template: ` * * * {{scrollAmount}} * * * *

Some realllllllly long content

*
* `}) * class E2EPage { * public scrollAmount = 0; * constructor( public zone: NgZone){} * scrollHandler(event) { * console.log(`ScrollEvent: ${event}`) * this.zone.run(()=>{ * // since scrollAmount is data-binded, * // the update needs to happen in zone * this.scrollAmount++ * }) * } * } * ``` * * This goes for any scroll event, not just `ionScroll`. * * ### Resizing the content * * If the height of `ion-header`, `ion-footer` or `ion-tabbar` * changes dynamically, `content.resize()` has to be called in order to update the * layout of `Content`. * * * ```ts * @Component({ * template: ` * * * Main Navbar * * * Dynamic Toolbar * * * * * * `}) * * class E2EPage { * @ViewChild(Content) content: Content; * showToolbar: boolean = false; * * toggleToolbar() { * this.showToolbar = !this.showToolbar; * this.content.resize(); * } * } * ``` * * * Scroll to a specific position * * ```ts * import { Component, ViewChild } from '@angular/core'; * import { Content } from 'ionic-angular'; * * @Component({ * template: ` * * ` * )} * export class MyPage{ * @ViewChild(Content) content: Content; * * scrollTo() { * // set the scrollLeft to 0px, and scrollTop to 500px * // the scroll duration should take 200ms * this.content.scrollTo(0, 500, 200); * } * } * ``` * */ export declare class Content extends Ion implements OnDestroy, AfterViewInit, IContent { private _plt; private _dom; _app: App; _keyboard: Keyboard; _zone: NgZone; /** @internal */ _cTop: number; /** @internal */ _cBottom: number; /** @internal */ _pTop: number; /** @internal */ _pRight: number; /** @internal */ _pBottom: number; /** @internal */ _pLeft: number; /** @internal */ _scrollPadding: number; /** @internal */ _hdrHeight: number; /** @internal */ _ftrHeight: number; /** @internal */ _tabs: Tabs; /** @internal */ _tabbarHeight: number; /** @internal */ _tabsPlacement: string; /** @internal */ _tTop: number; /** @internal */ _fTop: number; /** @internal */ _fBottom: number; /** @internal */ _inputPolling: boolean; /** @internal */ _scroll: ScrollView; /** @internal */ _scLsn: Function; /** @internal */ _fullscreen: boolean; /** @internal */ _hasRefresher: boolean; /** @internal */ _footerEle: HTMLElement; /** @internal */ _dirty: boolean; /** @internal */ _imgs: Img[]; /** @internal */ _viewCtrlReadSub: any; /** @internal */ _viewCtrlWriteSub: any; /** @internal */ _scrollDownOnLoad: boolean; _viewCtrl: any; private _imgReqBfr; private _imgRndBfr; private _imgVelMax; /** @hidden */ statusbarPadding: boolean; /** @internal */ _fixedContent: ElementRef; /** @internal */ _scrollContent: ElementRef; /** * Content height of the viewable area. This does not include content * which is outside the overflow area, or content area which is under * headers and footers. Read-only. * * @return {number} */ readonly contentHeight: number; /** * Content width including content which is not visible on the screen * due to overflow. Read-only. * * @return {number} */ readonly contentWidth: number; /** * A number representing how many pixels the top of the content has been * adjusted, which could be by either padding or margin. This adjustment * is to account for the space needed for the header. * * @return {number} */ contentTop: number; /** * A number representing how many pixels the bottom of the content has been * adjusted, which could be by either padding or margin. This adjustment * is to account for the space needed for the footer. * * @return {number} */ contentBottom: number; /** * Content height including content which is not visible on the screen * due to overflow. Read-only. * * @return {number} */ readonly scrollHeight: number; /** * Content width including content which is not visible due to * overflow. Read-only. * * @return {number} */ readonly scrollWidth: number; /** * The distance of the content's top to its topmost visible content. * * @return {number} */ /** * @param {number} top */ scrollTop: number; /** * The distance of the content's left to its leftmost visible content. * * @return {number} */ /** * @param {number} top */ scrollLeft: number; /** * If the content is actively scrolling or not. * * @return {boolean} */ readonly isScrolling: boolean; /** * The current, or last known, vertical scroll direction. Possible * string values include `down` and `up`. * * @return {string} */ readonly directionY: string; /** * The current, or last known, horizontal scroll direction. Possible * string values include `right` and `left`. * * @return {string} */ readonly directionX: string; /** * @output {ScrollEvent} Emitted when the scrolling first starts. */ ionScrollStart: EventEmitterProxy; /** * @output {ScrollEvent} Emitted on every scroll event. */ ionScroll: EventEmitterProxy; /** * @output {ScrollEvent} Emitted when scrolling ends. */ ionScrollEnd: EventEmitterProxy; constructor(config: Config, _plt: Platform, _dom: DomController, elementRef: ElementRef, renderer: Renderer, _app: App, _keyboard: Keyboard, _zone: NgZone, viewCtrl: ViewController, navCtrl: NavController); /** * @hidden */ ngAfterViewInit(): void; /** * @hidden */ enableJsScroll(): void; /** * @hidden */ ngOnDestroy(): void; /** * @hidden */ getScrollElement(): HTMLElement; /** * @private */ getFixedElement(): HTMLElement; /** * @hidden */ onScrollElementTransitionEnd(callback: { (ev: TransitionEvent): void; }): void; /** * Scroll to the specified position. * * @param {number} x The x-value to scroll to. * @param {number} y The y-value to scroll to. * @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`. * @returns {Promise} Returns a promise which is resolved when the scroll has completed. */ scrollTo(x: number, y: number, duration?: number, done?: Function): Promise; /** * Scroll to the top of the content component. * * @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`. * @returns {Promise} Returns a promise which is resolved when the scroll has completed. */ scrollToTop(duration?: number): Promise; /** * Scroll to the bottom of the content component. * * @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`. * @returns {Promise} Returns a promise which is resolved when the scroll has completed. */ scrollToBottom(duration?: number): Promise; /** * @input {boolean} If true, the content will scroll behind the headers * and footers. This effect can easily be seen by setting the toolbar * to transparent. */ fullscreen: boolean; /** * @input {boolean} If true, the content will scroll down on load. */ scrollDownOnLoad: boolean; /** * @private */ addImg(img: Img): void; /** * @hidden */ removeImg(img: Img): void; /** * @hidden * DOM WRITE */ setScrollElementStyle(prop: string, val: any): void; /** * 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 */ getContentDimensions(): ContentDimensions; /** * @hidden * DOM WRITE * Adds padding to the bottom of the scroll element when the keyboard is open * so content below the keyboard can be scrolled into view. */ addScrollPadding(newPadding: number): void; /** * @hidden * DOM WRITE */ clearScrollPaddingFocusOut(): void; /** * Tell the content to recalculate its dimensions. This should be called * after dynamically adding/removing headers, footers, or tabs. */ resize(): void; /** * @hidden * DOM READ */ private _readDimensions(); /** * @hidden * DOM WRITE */ private _writeDimensions(); /** * @hidden */ imgsUpdate(): void; /** * @hidden */ isImgsUpdatable(): boolean; } export declare function updateImgs(imgs: Img[], viewableTop: number, contentHeight: number, scrollDirectionY: string, requestableBuffer: number, renderableBuffer: number): void; export interface ContentDimensions { contentHeight: number; contentTop: number; contentBottom: number; contentWidth: number; contentLeft: number; scrollHeight: number; scrollTop: number; scrollWidth: number; scrollLeft: number; }