diff --git a/src/components/content/content.ts b/src/components/content/content.ts index 9cdd445f2b..030b9830c6 100644 --- a/src/components/content/content.ts +++ b/src/components/content/content.ts @@ -325,8 +325,9 @@ export class Content extends Ion { * @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 = 300): Promise { - return this._scroll.scrollTo(x, y, duration); + scrollTo(x: number, y: number, duration: number = 300, done?: Function): Promise { + console.debug(`content, scrollTo started, y: ${y}, duration: ${duration}`); + return this._scroll.scrollTo(x, y, duration, done); } /** @@ -336,6 +337,7 @@ export class Content extends Ion { * @returns {Promise} Returns a promise which is resolved when the scroll has completed. */ scrollToTop(duration: number = 300) { + console.debug(`content, scrollToTop, duration: ${duration}`); return this._scroll.scrollToTop(duration); } @@ -352,6 +354,7 @@ export class Content extends Ion { * @param {number} top */ setScrollTop(top: number) { + console.debug(`content, setScrollTop, top: ${top}`); this._scroll.setTop(top); } @@ -361,6 +364,7 @@ export class Content extends Ion { * @returns {Promise} Returns a promise which is resolved when the scroll has completed. */ scrollToBottom(duration: number = 300) { + console.debug(`content, scrollToBottom, duration: ${duration}`); return this._scroll.scrollToBottom(duration); } @@ -411,26 +415,23 @@ export class Content extends Ion { * {number} dimensions.scrollLeft scroll scrollLeft * {number} dimensions.scrollRight scroll scrollLeft + scrollWidth */ - getContentDimensions() { - let _scrollEle = this._scrollEle; - let parentElement = _scrollEle.parentElement; + getContentDimensions(): ContentDimensions { + const scrollEle = this._scrollEle; + const parentElement = scrollEle.parentElement; return { - contentHeight: parentElement.offsetHeight, - contentTop: parentElement.offsetTop, - contentBottom: parentElement.offsetTop + parentElement.offsetHeight, + contentHeight: parentElement.offsetHeight - this.contentTop - this.contentBottom, + contentTop: this.contentTop, + contentBottom: this.contentBottom, contentWidth: parentElement.offsetWidth, contentLeft: parentElement.offsetLeft, - contentRight: parentElement.offsetLeft + parentElement.offsetWidth, - scrollHeight: _scrollEle.scrollHeight, - scrollTop: _scrollEle.scrollTop, - scrollBottom: _scrollEle.scrollTop + _scrollEle.scrollHeight, + scrollHeight: scrollEle.scrollHeight, + scrollTop: scrollEle.scrollTop, - scrollWidth: _scrollEle.scrollWidth, - scrollLeft: _scrollEle.scrollLeft, - scrollRight: _scrollEle.scrollLeft + _scrollEle.scrollWidth, + scrollWidth: scrollEle.scrollWidth, + scrollLeft: scrollEle.scrollLeft, }; } @@ -443,7 +444,7 @@ export class Content extends Ion { addScrollPadding(newPadding: number) { assert(typeof this._scrollPadding === 'number', '_scrollPadding must be a number'); if (newPadding > this._scrollPadding) { - console.debug('content addScrollPadding', newPadding); + console.debug(`content, addScrollPadding, newPadding: ${newPadding}, this._scrollPadding: ${this._scrollPadding}`); this._scrollPadding = newPadding; this._scrollEle.style.paddingBottom = (newPadding > 0) ? newPadding + 'px' : ''; @@ -456,13 +457,15 @@ export class Content extends Ion { */ clearScrollPaddingFocusOut() { if (!this._inputPolling) { + console.debug(`content, clearScrollPaddingFocusOut begin`); this._inputPolling = true; this._keyboard.onClose(() => { + console.debug(`content, clearScrollPaddingFocusOut _keyboard.onClose`); this._inputPolling = false; this._scrollPadding = -1; this.addScrollPadding(0); - }, 200, Infinity); + }, 200, 3000); } } @@ -641,3 +644,18 @@ function parsePxUnit(val: string): number { function cssFormat(val: number): string { return (val > 0 ? val + 'px' : ''); } + +export interface ContentDimensions { + contentHeight: number; + contentTop: number; + contentBottom: number; + + contentWidth: number; + contentLeft: number; + + scrollHeight: number; + scrollTop: number; + + scrollWidth: number; + scrollLeft: number; +}