javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +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`.
* @returns {Promise} Returns a promise which is resolved when the scroll has completed.
*/
scrollTo(x: number, y: number, duration: number = 300): Promise<any> {
return this._scroll.scrollTo(x, y, duration);
scrollTo(x: number, y: number, duration: number = 300, done?: Function): Promise<any> {
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;
}