123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450 |
- 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<T> extends EventEmitter<T> {
- 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
- * <ion-content>
- * Add your content here!
- * </ion-content>
- * ```
- *
- * 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: `
- * <ion-header>
- * <ion-navbar>
- * <ion-title>{{scrollAmount}}</ion-title>
- * </ion-navbar>
- * </ion-header>
- * <ion-content (ionScroll)="scrollHandler($event)">
- * <p> Some realllllllly long content </p>
- * </ion-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: `
- * <ion-header>
- * <ion-navbar>
- * <ion-title>Main Navbar</ion-title>
- * </ion-navbar>
- * <ion-toolbar *ngIf="showToolbar">
- * <ion-title>Dynamic Toolbar</ion-title>
- * </ion-toolbar>
- * </ion-header>
- * <ion-content>
- * <button ion-button (click)="toggleToolbar()">Toggle Toolbar</button>
- * </ion-content>
- * `})
- *
- * 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: `<ion-content>
- * <button ion-button (click)="scrollTo()">Down 500px</button>
- * </ion-content>`
- * )}
- * 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<ScrollEvent>;
- /**
- * @output {ScrollEvent} Emitted on every scroll event.
- */
- ionScroll: EventEmitterProxy<ScrollEvent>;
- /**
- * @output {ScrollEvent} Emitted when scrolling ends.
- */
- ionScrollEnd: EventEmitterProxy<ScrollEvent>;
- 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<any>;
- /**
- * 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<any>;
- /**
- * 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<any>;
- /**
- * @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;
- }
|