redoc/lib/shared/components/StickySidebar/sticky-sidebar.ts
2016-06-15 21:48:04 +03:00

67 lines
1.8 KiB
TypeScript

'use strict';
import { Directive, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
import {BrowserDomAdapter} from '@angular/platform-browser/src/browser/browser_adapter';
@Directive({
selector: '[sticky-sidebar]'
})
export class StickySidebar implements OnInit, OnDestroy {
$element: any;
cancelScrollBinding: any;
$redocEl: any;
@Input() scrollParent:any;
@Input() scrollYOffset:any;
constructor(elementRef:ElementRef, private dom:BrowserDomAdapter) {
this.$element = elementRef.nativeElement;
// initial styling
this.dom.setStyle(this.$element, 'position', 'absolute');
this.dom.setStyle(this.$element, 'top', '0');
this.dom.setStyle(this.$element, 'bottom', '0');
this.dom.setStyle(this.$element, 'max-height', '100%');
}
bind() {
this.cancelScrollBinding = this.dom.onAndCancel(this.scrollParent, 'scroll', () => { this.updatePosition(); });
this.updatePosition();
}
unbind() {
if (this.cancelScrollBinding) this.cancelScrollBinding();
}
updatePosition() {
if ( this.scrollY + this.scrollYOffset() >= this.$redocEl.offsetTop) {
this.stick();
} else {
this.unstick();
}
}
stick() {
this.dom.setStyle(this.$element, 'position', 'fixed');
this.dom.setStyle(this.$element, 'top', this.scrollYOffset() + 'px');
}
unstick() {
this.dom.setStyle(this.$element, 'position', 'absolute');
this.dom.setStyle(this.$element, 'top', '0');
}
get scrollY() {
return (this.scrollParent.pageYOffset != undefined) ? this.scrollParent.pageYOffset : this.scrollParent.scrollTop;
}
ngOnInit() {
// FIXME use more reliable code
this.$redocEl = this.$element.offsetParent || this.dom.defaultDoc().body;
this.bind();
}
ngOnDestroy() {
this.unbind();
}
}