content.d.ts 13KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450
  1. import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnDestroy, Renderer } from '@angular/core';
  2. import { App } from '../app/app';
  3. import { Config } from '../../config/config';
  4. import { DomController } from '../../platform/dom-controller';
  5. import { Img } from '../img/img-interface';
  6. import { Ion } from '../ion';
  7. import { Keyboard } from '../../platform/keyboard';
  8. import { NavController } from '../../navigation/nav-controller';
  9. import { Content as IContent, Tabs } from '../../navigation/nav-interfaces';
  10. import { Platform } from '../../platform/platform';
  11. import { ScrollEvent, ScrollView } from '../../util/scroll-view';
  12. import { ViewController } from '../../navigation/view-controller';
  13. export { ScrollEvent } from '../../util/scroll-view';
  14. export declare class EventEmitterProxy<T> extends EventEmitter<T> {
  15. onSubscribe: Function;
  16. subscribe(generatorOrNext?: any, error?: any, complete?: any): any;
  17. }
  18. /**
  19. * @name Content
  20. * @description
  21. * The Content component provides an easy to use content area with
  22. * some useful methods to control the scrollable area. There should
  23. * only be one content in a single view component. If additional scrollable
  24. * elements are needed, use [ionScroll](../../scroll/Scroll).
  25. *
  26. *
  27. * The content area can also implement pull-to-refresh with the
  28. * [Refresher](../../refresher/Refresher) component.
  29. *
  30. * @usage
  31. * ```html
  32. * <ion-content>
  33. * Add your content here!
  34. * </ion-content>
  35. * ```
  36. *
  37. * To get a reference to the content component from a Page's logic,
  38. * you can use Angular's `@ViewChild` annotation:
  39. *
  40. * ```ts
  41. * import { Component, ViewChild } from '@angular/core';
  42. * import { Content } from 'ionic-angular';
  43. *
  44. * @Component({...})
  45. * export class MyPage{
  46. * @ViewChild(Content) content: Content;
  47. *
  48. * scrollToTop() {
  49. * this.content.scrollToTop();
  50. * }
  51. * }
  52. * ```
  53. *
  54. * @advanced
  55. *
  56. * ### Scroll Events
  57. *
  58. * Scroll events happen outside of Angular's Zones. This is for performance reasons. So
  59. * if you're trying to bind a value to any scroll event, it will need to be wrapped in
  60. * a `zone.run()`
  61. *
  62. * ```ts
  63. * import { Component, NgZone } from '@angular/core';
  64. * @Component({
  65. * template: `
  66. * <ion-header>
  67. * <ion-navbar>
  68. * <ion-title>{{scrollAmount}}</ion-title>
  69. * </ion-navbar>
  70. * </ion-header>
  71. * <ion-content (ionScroll)="scrollHandler($event)">
  72. * <p> Some realllllllly long content </p>
  73. * </ion-content>
  74. * `})
  75. * class E2EPage {
  76. * public scrollAmount = 0;
  77. * constructor( public zone: NgZone){}
  78. * scrollHandler(event) {
  79. * console.log(`ScrollEvent: ${event}`)
  80. * this.zone.run(()=>{
  81. * // since scrollAmount is data-binded,
  82. * // the update needs to happen in zone
  83. * this.scrollAmount++
  84. * })
  85. * }
  86. * }
  87. * ```
  88. *
  89. * This goes for any scroll event, not just `ionScroll`.
  90. *
  91. * ### Resizing the content
  92. *
  93. * If the height of `ion-header`, `ion-footer` or `ion-tabbar`
  94. * changes dynamically, `content.resize()` has to be called in order to update the
  95. * layout of `Content`.
  96. *
  97. *
  98. * ```ts
  99. * @Component({
  100. * template: `
  101. * <ion-header>
  102. * <ion-navbar>
  103. * <ion-title>Main Navbar</ion-title>
  104. * </ion-navbar>
  105. * <ion-toolbar *ngIf="showToolbar">
  106. * <ion-title>Dynamic Toolbar</ion-title>
  107. * </ion-toolbar>
  108. * </ion-header>
  109. * <ion-content>
  110. * <button ion-button (click)="toggleToolbar()">Toggle Toolbar</button>
  111. * </ion-content>
  112. * `})
  113. *
  114. * class E2EPage {
  115. * @ViewChild(Content) content: Content;
  116. * showToolbar: boolean = false;
  117. *
  118. * toggleToolbar() {
  119. * this.showToolbar = !this.showToolbar;
  120. * this.content.resize();
  121. * }
  122. * }
  123. * ```
  124. *
  125. *
  126. * Scroll to a specific position
  127. *
  128. * ```ts
  129. * import { Component, ViewChild } from '@angular/core';
  130. * import { Content } from 'ionic-angular';
  131. *
  132. * @Component({
  133. * template: `<ion-content>
  134. * <button ion-button (click)="scrollTo()">Down 500px</button>
  135. * </ion-content>`
  136. * )}
  137. * export class MyPage{
  138. * @ViewChild(Content) content: Content;
  139. *
  140. * scrollTo() {
  141. * // set the scrollLeft to 0px, and scrollTop to 500px
  142. * // the scroll duration should take 200ms
  143. * this.content.scrollTo(0, 500, 200);
  144. * }
  145. * }
  146. * ```
  147. *
  148. */
  149. export declare class Content extends Ion implements OnDestroy, AfterViewInit, IContent {
  150. private _plt;
  151. private _dom;
  152. _app: App;
  153. _keyboard: Keyboard;
  154. _zone: NgZone;
  155. /** @internal */
  156. _cTop: number;
  157. /** @internal */
  158. _cBottom: number;
  159. /** @internal */
  160. _pTop: number;
  161. /** @internal */
  162. _pRight: number;
  163. /** @internal */
  164. _pBottom: number;
  165. /** @internal */
  166. _pLeft: number;
  167. /** @internal */
  168. _scrollPadding: number;
  169. /** @internal */
  170. _hdrHeight: number;
  171. /** @internal */
  172. _ftrHeight: number;
  173. /** @internal */
  174. _tabs: Tabs;
  175. /** @internal */
  176. _tabbarHeight: number;
  177. /** @internal */
  178. _tabsPlacement: string;
  179. /** @internal */
  180. _tTop: number;
  181. /** @internal */
  182. _fTop: number;
  183. /** @internal */
  184. _fBottom: number;
  185. /** @internal */
  186. _inputPolling: boolean;
  187. /** @internal */
  188. _scroll: ScrollView;
  189. /** @internal */
  190. _scLsn: Function;
  191. /** @internal */
  192. _fullscreen: boolean;
  193. /** @internal */
  194. _hasRefresher: boolean;
  195. /** @internal */
  196. _footerEle: HTMLElement;
  197. /** @internal */
  198. _dirty: boolean;
  199. /** @internal */
  200. _imgs: Img[];
  201. /** @internal */
  202. _viewCtrlReadSub: any;
  203. /** @internal */
  204. _viewCtrlWriteSub: any;
  205. /** @internal */
  206. _scrollDownOnLoad: boolean;
  207. _viewCtrl: any;
  208. private _imgReqBfr;
  209. private _imgRndBfr;
  210. private _imgVelMax;
  211. /** @hidden */
  212. statusbarPadding: boolean;
  213. /** @internal */
  214. _fixedContent: ElementRef;
  215. /** @internal */
  216. _scrollContent: ElementRef;
  217. /**
  218. * Content height of the viewable area. This does not include content
  219. * which is outside the overflow area, or content area which is under
  220. * headers and footers. Read-only.
  221. *
  222. * @return {number}
  223. */
  224. readonly contentHeight: number;
  225. /**
  226. * Content width including content which is not visible on the screen
  227. * due to overflow. Read-only.
  228. *
  229. * @return {number}
  230. */
  231. readonly contentWidth: number;
  232. /**
  233. * A number representing how many pixels the top of the content has been
  234. * adjusted, which could be by either padding or margin. This adjustment
  235. * is to account for the space needed for the header.
  236. *
  237. * @return {number}
  238. */
  239. contentTop: number;
  240. /**
  241. * A number representing how many pixels the bottom of the content has been
  242. * adjusted, which could be by either padding or margin. This adjustment
  243. * is to account for the space needed for the footer.
  244. *
  245. * @return {number}
  246. */
  247. contentBottom: number;
  248. /**
  249. * Content height including content which is not visible on the screen
  250. * due to overflow. Read-only.
  251. *
  252. * @return {number}
  253. */
  254. readonly scrollHeight: number;
  255. /**
  256. * Content width including content which is not visible due to
  257. * overflow. Read-only.
  258. *
  259. * @return {number}
  260. */
  261. readonly scrollWidth: number;
  262. /**
  263. * The distance of the content's top to its topmost visible content.
  264. *
  265. * @return {number}
  266. */
  267. /**
  268. * @param {number} top
  269. */
  270. scrollTop: number;
  271. /**
  272. * The distance of the content's left to its leftmost visible content.
  273. *
  274. * @return {number}
  275. */
  276. /**
  277. * @param {number} top
  278. */
  279. scrollLeft: number;
  280. /**
  281. * If the content is actively scrolling or not.
  282. *
  283. * @return {boolean}
  284. */
  285. readonly isScrolling: boolean;
  286. /**
  287. * The current, or last known, vertical scroll direction. Possible
  288. * string values include `down` and `up`.
  289. *
  290. * @return {string}
  291. */
  292. readonly directionY: string;
  293. /**
  294. * The current, or last known, horizontal scroll direction. Possible
  295. * string values include `right` and `left`.
  296. *
  297. * @return {string}
  298. */
  299. readonly directionX: string;
  300. /**
  301. * @output {ScrollEvent} Emitted when the scrolling first starts.
  302. */
  303. ionScrollStart: EventEmitterProxy<ScrollEvent>;
  304. /**
  305. * @output {ScrollEvent} Emitted on every scroll event.
  306. */
  307. ionScroll: EventEmitterProxy<ScrollEvent>;
  308. /**
  309. * @output {ScrollEvent} Emitted when scrolling ends.
  310. */
  311. ionScrollEnd: EventEmitterProxy<ScrollEvent>;
  312. constructor(config: Config, _plt: Platform, _dom: DomController, elementRef: ElementRef, renderer: Renderer, _app: App, _keyboard: Keyboard, _zone: NgZone, viewCtrl: ViewController, navCtrl: NavController);
  313. /**
  314. * @hidden
  315. */
  316. ngAfterViewInit(): void;
  317. /**
  318. * @hidden
  319. */
  320. enableJsScroll(): void;
  321. /**
  322. * @hidden
  323. */
  324. ngOnDestroy(): void;
  325. /**
  326. * @hidden
  327. */
  328. getScrollElement(): HTMLElement;
  329. /**
  330. * @private
  331. */
  332. getFixedElement(): HTMLElement;
  333. /**
  334. * @hidden
  335. */
  336. onScrollElementTransitionEnd(callback: {
  337. (ev: TransitionEvent): void;
  338. }): void;
  339. /**
  340. * Scroll to the specified position.
  341. *
  342. * @param {number} x The x-value to scroll to.
  343. * @param {number} y The y-value to scroll to.
  344. * @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`.
  345. * @returns {Promise} Returns a promise which is resolved when the scroll has completed.
  346. */
  347. scrollTo(x: number, y: number, duration?: number, done?: Function): Promise<any>;
  348. /**
  349. * Scroll to the top of the content component.
  350. *
  351. * @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`.
  352. * @returns {Promise} Returns a promise which is resolved when the scroll has completed.
  353. */
  354. scrollToTop(duration?: number): Promise<any>;
  355. /**
  356. * Scroll to the bottom of the content component.
  357. *
  358. * @param {number} [duration] Duration of the scroll animation in milliseconds. Defaults to `300`.
  359. * @returns {Promise} Returns a promise which is resolved when the scroll has completed.
  360. */
  361. scrollToBottom(duration?: number): Promise<any>;
  362. /**
  363. * @input {boolean} If true, the content will scroll behind the headers
  364. * and footers. This effect can easily be seen by setting the toolbar
  365. * to transparent.
  366. */
  367. fullscreen: boolean;
  368. /**
  369. * @input {boolean} If true, the content will scroll down on load.
  370. */
  371. scrollDownOnLoad: boolean;
  372. /**
  373. * @private
  374. */
  375. addImg(img: Img): void;
  376. /**
  377. * @hidden
  378. */
  379. removeImg(img: Img): void;
  380. /**
  381. * @hidden
  382. * DOM WRITE
  383. */
  384. setScrollElementStyle(prop: string, val: any): void;
  385. /**
  386. * Returns the content and scroll elements' dimensions.
  387. * @returns {object} dimensions The content and scroll elements' dimensions
  388. * {number} dimensions.contentHeight content offsetHeight
  389. * {number} dimensions.contentTop content offsetTop
  390. * {number} dimensions.contentBottom content offsetTop+offsetHeight
  391. * {number} dimensions.contentWidth content offsetWidth
  392. * {number} dimensions.contentLeft content offsetLeft
  393. * {number} dimensions.contentRight content offsetLeft + offsetWidth
  394. * {number} dimensions.scrollHeight scroll scrollHeight
  395. * {number} dimensions.scrollTop scroll scrollTop
  396. * {number} dimensions.scrollBottom scroll scrollTop + scrollHeight
  397. * {number} dimensions.scrollWidth scroll scrollWidth
  398. * {number} dimensions.scrollLeft scroll scrollLeft
  399. * {number} dimensions.scrollRight scroll scrollLeft + scrollWidth
  400. */
  401. getContentDimensions(): ContentDimensions;
  402. /**
  403. * @hidden
  404. * DOM WRITE
  405. * Adds padding to the bottom of the scroll element when the keyboard is open
  406. * so content below the keyboard can be scrolled into view.
  407. */
  408. addScrollPadding(newPadding: number): void;
  409. /**
  410. * @hidden
  411. * DOM WRITE
  412. */
  413. clearScrollPaddingFocusOut(): void;
  414. /**
  415. * Tell the content to recalculate its dimensions. This should be called
  416. * after dynamically adding/removing headers, footers, or tabs.
  417. */
  418. resize(): void;
  419. /**
  420. * @hidden
  421. * DOM READ
  422. */
  423. private _readDimensions();
  424. /**
  425. * @hidden
  426. * DOM WRITE
  427. */
  428. private _writeDimensions();
  429. /**
  430. * @hidden
  431. */
  432. imgsUpdate(): void;
  433. /**
  434. * @hidden
  435. */
  436. isImgsUpdatable(): boolean;
  437. }
  438. export declare function updateImgs(imgs: Img[], viewableTop: number, contentHeight: number, scrollDirectionY: string, requestableBuffer: number, renderableBuffer: number): void;
  439. export interface ContentDimensions {
  440. contentHeight: number;
  441. contentTop: number;
  442. contentBottom: number;
  443. contentWidth: number;
  444. contentLeft: number;
  445. scrollHeight: number;
  446. scrollTop: number;
  447. scrollWidth: number;
  448. scrollLeft: number;
  449. }