ionic-angular
Version:
A powerful framework for building mobile and progressive web apps with JavaScript and Angular
450 lines (449 loc) • 13.1 kB
TypeScript
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;
}