|
// https://twitter.com/abennouna/status/1083639191295148032 |
|
import { AfterViewChecked, Component, ElementRef, Renderer2 } from '@angular/core'; |
|
import { Platform } from '@ionic/angular'; |
|
|
|
@Component({ |
|
selector: 'app-main-footer', |
|
templateUrl: './main-footer.component.html', |
|
styleUrls: ['./main-footer.component.scss'], |
|
}) |
|
export class MainFooterComponent implements AfterViewChecked { |
|
initialized = false; |
|
|
|
constructor( |
|
private elementRef: ElementRef, |
|
private platform: Platform, |
|
private renderer: Renderer2, |
|
) { |
|
this.platform.ready().then(() => { |
|
this.platform.resize.subscribe(() => { |
|
this.positionAtBottom(); |
|
}); |
|
}); |
|
} |
|
|
|
ngAfterViewChecked() { |
|
if (!this.initialized) { |
|
const componentWrapper = this.elementRef.nativeElement; |
|
|
|
// Event is called multiple times, wait till it is available |
|
if (componentWrapper.offsetTop > 0) { |
|
this.initialized = true; |
|
|
|
this.positionAtBottom(); |
|
} |
|
} |
|
} |
|
|
|
private positionAtBottom() { |
|
const componentWrapper = this.elementRef.nativeElement; |
|
|
|
// reset position in order to get correct dimensions |
|
this.renderer.removeStyle(componentWrapper, 'position'); |
|
|
|
const boundingRectangle = componentWrapper.getBoundingClientRect(); |
|
|
|
if ( |
|
componentWrapper.offsetTop + boundingRectangle.height < |
|
this.platform.height() |
|
) { |
|
this.renderer.setStyle( |
|
componentWrapper, |
|
'top', |
|
this.platform.height() - boundingRectangle.height + 'px' |
|
); |
|
|
|
this.renderer.setStyle(componentWrapper, 'position', 'absolute'); |
|
|
|
// or just set in in `main-footer.component.scss` |
|
this.renderer.setStyle(componentWrapper, 'width', '100%'); |
|
} |
|
} |
|
} |
