angular-horizontal-scroll-table
Version:
angular-horizontal-scroll-table is A simple solution for horizontal scroll in any table.
212 lines (206 loc) • 9.24 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, HostListener, NgModule } from '@angular/core';
class BassHorizontalScrollDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.fristtime = true;
this.onBodyscroll = () => {
if (this.z2table) {
const scrollFound = this.containerHasHorizontalScrollbar();
if (scrollFound) {
this.showOrHideScroll();
}
this.hideBodyScroll();
}
};
}
onScroll(e) {
this.changeScrollOfBarWrap(e.scrollLeft);
}
ngOnInit() {
setTimeout(() => {
this.inIt();
}, 1000);
}
ngOnChanges(changes) {
if (this.z2table) {
setTimeout(() => {
this.changes(changes);
}, 1000);
}
}
ngOnDestroy() {
window.removeEventListener('scroll', this.onBodyscroll, true);
}
inIt() {
this.z2tableinit();
this.addScrollBars();
// get event on body/window scroll
window.addEventListener('scroll', this.onBodyscroll, true);
this.addZ2ScrollEvents();
const scrollFound = this.containerHasHorizontalScrollbar();
if (scrollFound) {
this.showOrHideScroll();
}
this.hideBodyScroll();
}
changes(changes) {
if (changes.pageDestored) {
// // check if table in small or table in smaller than the window width
this.containerHasHorizontalScrollbar();
setTimeout(() => {
window.scroll({
top: 2,
left: 0,
behavior: 'smooth'
});
window.scroll({
top: 0,
left: 0,
behavior: 'smooth'
});
}, 1000);
}
else {
this.resizeZ2Table();
const scrollFound = this.containerHasHorizontalScrollbar();
if (scrollFound) {
this.showOrHideScroll();
}
}
}
containerHasHorizontalScrollbar() {
const hasHorizontalScrollbar = this.el.nativeElement.scrollWidth > this.el.nativeElement.clientWidth;
if (hasHorizontalScrollbar === false) {
this.scrollBarWrap.style.visibility = 'hidden';
return false;
}
else {
this.scrollBarWrap.style.visibility = 'visible';
return true;
}
}
resizeZ2Table() {
// tslint:disable-next-line:max-line-length
const scrollBarHeight = (window.innerWidth - document.documentElement.clientWidth) === 0 ? 17 : window.innerWidth - document.documentElement.clientWidth;
// resize z2table
const scrollBarContainerStyle = 'width: ' + (this.z2table.offsetWidth) + 'px;height: 1px';
this.scrollBarContainer.setAttribute('style', scrollBarContainerStyle);
// tslint:disable-next-line:max-line-length
const scrollBarWrapStyle = 'width: ' + (this.el.nativeElement.offsetWidth) + 'px;height:' + scrollBarHeight + 'px;position: fixed;overflow-x: scroll;visibility: visible;bottom: 0;z-index: 2;';
this.scrollBarWrap.setAttribute('style', scrollBarWrapStyle);
}
z2tableinit() {
this.z2table = document.querySelector('#' + this.tableId);
this.z2tableTHead = document.querySelector('#' + this.tableTHeadId);
this.z2tableTHeadTr = document.querySelector('#' + this.tableTHeadTrId);
this.el.nativeElement.classList.add('BassBarContainer');
this.el.nativeElement.style.overflow = 'auto';
this.hideBodyScroll();
if (!this.z2table) {
console.log('loooook table id not found..........');
}
if (!this.z2tableTHead) {
console.log('loooook table thead id not found..........');
}
if (!this.z2tableTHeadTr) {
console.log('loooook table thead tr not found..........');
}
}
addScrollBars() {
// add elements of scroll
this.scrollBarContainer = this.renderer.createElement('div');
this.scrollBarWrap = this.renderer.createElement('div');
this.scrollBarWrap.id = 'BassScrollBar';
this.resizeZ2Table();
}
showOrHideScroll() {
// get heigt of thead
const theadHeight = this.z2tableTHead.clientHeight;
const fixedNavbarHeight = theadHeight;
// Current container's top position
const bottomPosition = window.pageYOffset + window.innerHeight - theadHeight + fixedNavbarHeight;
// Detect Current container's top is in the table scope
if (this.z2table.offsetTop - 1 <= bottomPosition && (this.z2table.offsetTop + this.z2table.clientHeight - 1) >= bottomPosition) {
this.scrollBarWrap.style.visibility = 'visible';
}
else {
this.scrollBarWrap.style.visibility = 'hidden';
}
}
addZ2ScrollEvents() {
// tslint:disable-next-line:max-line-length
if (this.z2table) {
// add events on elements
this.scrollBarWrap.onscroll = (e) => {
this.changeScrollOfContainer(e.target.scrollLeft);
};
// add elements beyond table
this.renderer.appendChild(this.scrollBarWrap, this.scrollBarContainer);
this.renderer.appendChild(this.el.nativeElement, this.scrollBarWrap);
}
}
// change Scroll Of container when BarWrap scroll move
changeScrollOfContainer(leftPosition) {
this.el.nativeElement.scrollLeft = leftPosition;
this.z2tableTHead.scrollLeft = leftPosition;
}
// change Scroll Of BarWrap when container scroll move
changeScrollOfBarWrap(leftPosition) {
this.scrollBarWrap.scrollLeft = leftPosition;
this.z2tableTHead.scrollLeft = leftPosition;
}
hideBodyScroll() {
const bodyEl = document.getElementsByTagName('body')[0];
if (bodyEl) {
bodyEl.setAttribute('style', 'overflow-y: scroll;overflow-x: hidden;');
}
}
}
BassHorizontalScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BassHorizontalScrollDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
BassHorizontalScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.0.3", type: BassHorizontalScrollDirective, selector: "[bassHorizontalScroll]", inputs: { tableId: "tableId", tableTHeadId: "tableTHeadId", tableTHeadTrId: "tableTHeadTrId", pageUpdated: "pageUpdated", pageDestored: "pageDestored" }, host: { listeners: { "scroll": "onScroll($event.target)" } }, usesOnChanges: true, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: BassHorizontalScrollDirective, decorators: [{
type: Directive,
args: [{
selector: '[bassHorizontalScroll]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { tableId: [{
type: Input
}], tableTHeadId: [{
type: Input
}], tableTHeadTrId: [{
type: Input
}], pageUpdated: [{
type: Input
}], pageDestored: [{
type: Input
}], onScroll: [{
type: HostListener,
args: ['scroll', ['$event.target']]
}] } });
class NgHorizontalScrollModule {
}
NgHorizontalScrollModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgHorizontalScrollModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NgHorizontalScrollModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgHorizontalScrollModule, declarations: [BassHorizontalScrollDirective], exports: [BassHorizontalScrollDirective] });
NgHorizontalScrollModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgHorizontalScrollModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: NgHorizontalScrollModule, decorators: [{
type: NgModule,
args: [{
declarations: [
BassHorizontalScrollDirective
],
imports: [],
exports: [
BassHorizontalScrollDirective
]
}]
}] });
/*
* Public API Surface of angular-horizontal-scroll-table
*/
/**
* Generated bundle index. Do not edit.
*/
export { BassHorizontalScrollDirective, NgHorizontalScrollModule };
//# sourceMappingURL=angular-horizontal-scroll-table.mjs.map