From 19aa633a9a91bcab6ad6fbfd09df47f593e423ac Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 8 Dec 2016 09:29:15 -0600 Subject: [PATCH] feat(content): content dimension properties w/out dom read --- src/components/content/content.ts | 72 ++++++++++++++++++++++--------- src/util/scroll-view.ts | 29 ++++++++----- 2 files changed, 69 insertions(+), 32 deletions(-) diff --git a/src/components/content/content.ts b/src/components/content/content.ts index 1a53842dfb..5bcd45a494 100644 --- a/src/components/content/content.ts +++ b/src/components/content/content.ts @@ -171,9 +171,31 @@ export class Content extends Ion implements OnDestroy, OnInit { /** @private */ statusbarPadding: boolean; + /** + * 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} + */ + get contentHeight(): number { + return this._scroll.ev.contentHeight; + } + + /** + * Content width including content which is not visible on the screen + * due to overflow. Read-only. + * + * @return {number} + */ + get contentWidth(): number { + return this._scroll.ev.contentWidth; + } + /** * A number representing how many pixels the top of the content has been - * adjusted, which could be by either padding or margin. + * adjusted, which could be by either padding or margin. This adjustment + * is to account for the space needed for the header. * * @return {number} */ @@ -181,27 +203,32 @@ export class Content extends Ion implements OnDestroy, OnInit { /** * A number representing how many pixels the bottom of the content has been - * adjusted, which could be by either padding or margin. + * 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; /** - * The height the content, including content not visible - * on the screen due to overflow. + * Content height including content which is not visible on the screen + * due to overflow. Read-only. * * @return {number} */ - scrollHeight: number = 0; + get scrollHeight(): number { + return this._scroll.ev.scrollHeight; + } /** - * The width the content, including content not visible - * on the screen due to overflow. + * Content width including content which is not visible due to + * overflow. Read-only. * * @return {number} */ - scrollWidth: number = 0; + get scrollWidth(): number { + return this._scroll.ev.scrollWidth; + } /** * The distance of the content's top to its topmost visible content. @@ -209,7 +236,7 @@ export class Content extends Ion implements OnDestroy, OnInit { * @return {number} */ get scrollTop(): number { - return this._scroll.getTop(); + return this._scroll.ev.scrollTop; } set scrollTop(top: number) { this._scroll.setTop(top); @@ -221,14 +248,14 @@ export class Content extends Ion implements OnDestroy, OnInit { * @return {number} */ get scrollLeft(): number { - return this._scroll.getLeft(); + return this._scroll.ev.scrollLeft; } set scrollLeft(top: number) { this._scroll.setLeft(top); } /** - * If the scrollable area is actively scrolling or not. + * If the content is actively scrolling or not. * * @return {boolean} */ @@ -255,7 +282,8 @@ export class Content extends Ion implements OnDestroy, OnInit { } /** - * The current, or last known, vertical scroll direction. + * The current, or last known, vertical scroll direction. Possible + * string values include `down` and `up`. * * @return {string} */ @@ -264,7 +292,8 @@ export class Content extends Ion implements OnDestroy, OnInit { } /** - * The current, or last known, horizontal scroll direction. + * The current, or last known, horizontal scroll direction. Possible + * string values include `right` and `left`. * * @return {string} */ @@ -564,9 +593,6 @@ export class Content extends Ion implements OnDestroy, OnInit { let cacheFooterHeight = this._ftrHeight; let cacheTabsPlacement = this._tabsPlacement; let tabsTop = 0; - - this.scrollWidth = 0; - this.scrollHeight = 0; this._pTop = 0; this._pRight = 0; this._pBottom = 0; @@ -596,11 +622,6 @@ export class Content extends Ion implements OnDestroy, OnInit { if (tagName === 'ION-CONTENT') { scrollEvent.contentElement = ele; - // ******** DOM READ **************** - this.scrollWidth = ele.scrollWidth; - // ******** DOM READ **************** - this.scrollHeight = ele.scrollHeight; - if (this._fullscreen) { // ******** DOM READ **************** computedStyle = getComputedStyle(ele); @@ -672,6 +693,15 @@ export class Content extends Ion implements OnDestroy, OnInit { this._cBottom += this._pBottom; } + // ******** DOM READ **************** + const contentDimensions = this.getContentDimensions(); + scrollEvent.scrollHeight = contentDimensions.scrollHeight; + scrollEvent.scrollWidth = contentDimensions.scrollWidth; + scrollEvent.contentHeight = contentDimensions.contentHeight; + scrollEvent.contentWidth = contentDimensions.contentWidth; + scrollEvent.contentTop = contentDimensions.contentTop; + scrollEvent.contentBottom = contentDimensions.contentBottom; + this._dirty = ( cachePaddingTop !== this._pTop || cachePaddingBottom !== this._pBottom || diff --git a/src/util/scroll-view.ts b/src/util/scroll-view.ts index 3f717ab2ae..033df2857f 100644 --- a/src/util/scroll-view.ts +++ b/src/util/scroll-view.ts @@ -27,6 +27,12 @@ export class ScrollView { timeStamp: 0, scrollTop: 0, scrollLeft: 0, + scrollHeight: 0, + scrollWidth: 0, + contentHeight: 0, + contentWidth: 0, + contentTop: 0, + contentBottom: 0, startY: 0, startX: 0, deltaY: 0, @@ -37,12 +43,7 @@ export class ScrollView { directionX: null, domWrite: function(fn: DomCallback, ctx?: any) { _dom.write(fn, ctx); - }, - contentElement: null, - fixedElement: null, - scrollElement: null, - headerElement: null, - footerElement: null + } }; } @@ -522,6 +523,12 @@ export interface ScrollEvent { timeStamp: number; scrollTop: number; scrollLeft: number; + scrollHeight: number; + scrollWidth: number; + contentHeight: number; + contentWidth: number; + contentTop: number; + contentBottom: number; startY: number; startX: number; deltaY: number; @@ -531,11 +538,11 @@ export interface ScrollEvent { directionY: string; directionX: string; domWrite: {(fn: DomCallback, ctx?: any)}; - contentElement: HTMLElement; - fixedElement: HTMLElement; - scrollElement: HTMLElement; - headerElement: HTMLElement; - footerElement: HTMLElement; + contentElement?: HTMLElement; + fixedElement?: HTMLElement; + scrollElement?: HTMLElement; + headerElement?: HTMLElement; + footerElement?: HTMLElement; }