javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(content): get correct content dimensions

Browse Source
This commit is contained in:
Adam Bradley
2016-11-21 08:49:22 -06:00
parent 57a5345558
commit 1d245ec6bf
1 changed files with 35 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/content/content.ts
View File

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