ngc-scrolling-tabs
Version:
This component is a scrollable responsive tab component build on Angular 8 and Bootstrap 4. The left and right nav buttons will scroll one tab at a time. The component will track what tab is open and re-navigate to the open tab when the screen is refreshe
376 lines (369 loc) • 14.2 kB
JavaScript
import { EventEmitter, Component, ChangeDetectionStrategy, ChangeDetectorRef, ViewChild, Input, Output, HostListener, Directive, ElementRef, Renderer2, HostBinding, NgModule } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { CommonModule } from '@angular/common';
/**
* @fileoverview added by tsickle
* Generated from: lib/scrolling-tabs.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ScrollingTabsComponent {
/**
* @param {?} changeDetector
* @param {?} route
* @param {?} router
*/
constructor(changeDetector, route, router) {
this.changeDetector = changeDetector;
this.route = route;
this.router = router;
this.firstTabActive = true;
this.scrollToActive = true;
this.trackOpenTab = true;
this.selectedTabChanged = new EventEmitter();
this.tabs = [];
this.leftOffset = 0;
this.firstVisibleTabIndex = -1;
this.showLeftArrow = false;
this.showRightArrow = false;
}
/**
* @return {?}
*/
ngAfterViewInit() {
setTimeout((/**
* @return {?}
*/
() => {
// if there is a param of tabId and we want to track open tabs mark the open tab as active
if (this.route.snapshot.queryParams.tabId && this.trackOpenTab) {
this.markTabAsActive(this.route.snapshot.queryParams.tabId);
}
else if (this.firstTabActive) { // if we should mark the first tab as active if a active tab is not specified
this.markFirstTabActive();
}
// scroll to the active tab if setting is true and the tabs are larger than the window
if (this.scrollToActive && this.hasHiddenTabs()) {
this.scrollToActiveTab();
}
this.redrawTabs();
this.changeDetector.detectChanges();
}), 0);
}
/**
* @param {?} tab
* @return {?}
*/
addTab(tab) {
this.tabs.push(tab);
}
/**
* @param {?} tab
* @return {?}
*/
removeTab(tab) {
/** @type {?} */
const index = this.tabs.indexOf(tab);
if (index !== -1) {
this.tabs.splice(index, 1);
}
}
/**
* @return {?}
*/
windowResize() {
this.redrawTabs();
}
/**
* @return {?}
*/
redrawTabs() {
// Take the total width of the list. Subtract how far right we are and see if that is greater than the
// width of the current display
if (this.widthOfList() + this.leftOffset > this.navWrapper.nativeElement.offsetWidth) {
this.showRightArrow = true;
}
else {
this.showRightArrow = false;
}
// see if we have scrolled right and we are not at the left most position
if (this.leftOffset < 0) {
this.showLeftArrow = true;
}
else {
this.showLeftArrow = false;
}
}
/**
* @return {?}
*/
widthOfList() {
/** @type {?} */
let totalWidth = 0;
for (const li of this.tabList.nativeElement.children) {
totalWidth += li.offsetWidth;
}
return totalWidth;
}
/**
* @return {?}
*/
onScrollerLeftClick() {
// we need to go left for the width of the previous tab
this.firstVisibleTabIndex--;
// when moving left the left offset increases
this.leftOffset += this.tabList.nativeElement.children[this.firstVisibleTabIndex].offsetWidth;
this.redrawTabs();
}
/**
* @return {?}
*/
onScrollerRightClick() {
// when moving right you descrease the left offset. We want to go right the length of the current tab
this.leftOffset -= this.tabList.nativeElement.children[this.firstVisibleTabIndex].offsetWidth;
// change the index of the visible tab now that we have moved
this.firstVisibleTabIndex++;
this.redrawTabs();
}
/**
* @param {?} tab
* @return {?}
*/
onSelectedTabChanged(tab) {
this.markTabAsActive(tab.id);
if (this.trackOpenTab) {
this.pushCurrentTabToParam(tab);
}
this.selectedTabChanged.emit(tab);
}
/**
* @return {?}
*/
markFirstTabActive() {
/** @type {?} */
const activeTab = this.tabs.find((/**
* @param {?} t
* @return {?}
*/
t => t.active));
// if there is no active tab and we have tabs set first one to active
if (!activeTab && this.tabs.length > 0) {
this.tabs[0].active = true;
}
}
/**
* @return {?}
*/
scrollToActiveTab() {
/** @type {?} */
const activeTab = this.tabs.findIndex((/**
* @param {?} t
* @return {?}
*/
t => t.active));
this.firstVisibleTabIndex = activeTab;
for (let i = 0; i < activeTab; i++) {
if (this.tabList.nativeElement.children[i]) {
this.leftOffset -= this.tabList.nativeElement.children[i].offsetWidth;
}
}
}
/**
* @return {?}
*/
hasHiddenTabs() {
return this.widthOfList() > this.navWrapper.nativeElement.offsetWidth;
}
/**
* @param {?} tabId
* @return {?}
*/
markTabAsActive(tabId) {
for (const t of this.tabs) {
t.active = false;
if (t.id === tabId) {
t.active = true;
}
}
}
/**
* @param {?} tab
* @return {?}
*/
pushCurrentTabToParam(tab) {
this.router.navigate([], {
relativeTo: this.route,
queryParams: {
tabId: tab.id
},
queryParamsHandling: 'merge'
});
}
}
ScrollingTabsComponent.decorators = [
{ type: Component, args: [{
selector: 'ngc-scrolling-tabs',
template: "<div class=\"wrap-selector\">\n <div class=\"nav-tabs-boxed\">\n <div class=\"scroller scroller-left\" (click)=\"onScrollerLeftClick()\" *ngIf=\"showLeftArrow\">\n <svg class=\"arrow-img\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.0\" width=\"157.000000pt\" height=\"263.000000pt\"\n viewBox=\"0 0 157.000000 263.000000\" preserveAspectRatio=\"xMidYMid meet\">\n <g transform=\"translate(0.000000,263.000000) scale(0.100000,-0.100000)\" fill=\"currentColor\" stroke=\"none\">\n <path d=\"M653 1967 l-603 -602 0 -45 0 -45 603 -602 c710 -711 628 -655 764 -520 79 79 83 85 83 127 l0 45 -497 497 -498 498 498 498 497 497 0 45 c0 42 -4 48 -83 127 -136 135 -54 191 -764 -520z\" />\n </g>\n </svg>\n </div>\n <div class=\"scroller scroller-right\" (click)=\"onScrollerRightClick()\" *ngIf=\"showRightArrow\">\n <svg class=\"arrow-img\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.0\" width=\"157.000000pt\" height=\"263.000000pt\"\n viewBox=\"0 0 157.000000 263.000000\" preserveAspectRatio=\"xMidYMid meet\">\n <g transform=\"translate(0.000000,263.000000) scale(0.100000,-0.100000)\" fill=\"currentColor\" stroke=\"none\">\n <path d=\"M153 2477 c-79 -79 -83 -85 -83 -127 l0 -45 497 -497 498 -498 -498 -498 -497 -497 0 -45 c0 -42 4 -48 83 -127 136 -135 54 -191 764 520 l603 602 0 45 0 45 -603 602 c-710 711 -628 655 -764 520z\" />\n </g>\n </svg>\n </div>\n <div class=\"nav-wrapper\" #navWrapper>\n <ul class=\"nav nav-tabs list\" role=\"tablist\" #tabList [style.left.px]=\"leftOffset\">\n <li *ngFor=\"let tab of tabs\" class=\"nav-item\">\n <a [ngClass]=\"tab.getTabClasses()\" data-toggle=\"tab\" href=\"javascript:void(0)\" role=\"tab\"\n attr.aria-controls=\"{{tab.title}}\" (click)=\"onSelectedTabChanged(tab)\">{{tab.title}}</a>\n </li>\n </ul>\n </div>\n <div class=\"tab-content\">\n <ng-content></ng-content>\n </div>\n </div>\n</div>",
changeDetection: ChangeDetectionStrategy.OnPush,
styles: [".nav-wrapper{position:relative;margin:0 auto;overflow:hidden;padding:5px;height:38px}.nav-tabs{height:38px;margin-left:1px}.tab-content{margin-left:1px}.list{position:absolute;left:0;top:0;min-width:3000px;margin-top:0}.list li{display:table-cell;position:relative;text-align:center;cursor:grab;cursor:-webkit-grab;color:#efefef;vertical-align:middle}.scroller{text-align:center;cursor:pointer;padding:7px;white-space:no-wrap;vertical-align:middle}.scroller-right{float:right}.scroller-left{float:left}.arrow-img{height:20px;width:15px}.arrow-img:hover{opacity:.5}"]
}] }
];
/** @nocollapse */
ScrollingTabsComponent.ctorParameters = () => [
{ type: ChangeDetectorRef },
{ type: ActivatedRoute },
{ type: Router }
];
ScrollingTabsComponent.propDecorators = {
navWrapper: [{ type: ViewChild, args: ['navWrapper', { static: false },] }],
tabList: [{ type: ViewChild, args: ['tabList', { static: false },] }],
firstTabActive: [{ type: Input }],
scrollToActive: [{ type: Input }],
trackOpenTab: [{ type: Input }],
selectedTabChanged: [{ type: Output }],
windowResize: [{ type: HostListener, args: ['window:resize',] }]
};
if (false) {
/** @type {?} */
ScrollingTabsComponent.prototype.navWrapper;
/** @type {?} */
ScrollingTabsComponent.prototype.tabList;
/** @type {?} */
ScrollingTabsComponent.prototype.firstTabActive;
/** @type {?} */
ScrollingTabsComponent.prototype.scrollToActive;
/** @type {?} */
ScrollingTabsComponent.prototype.trackOpenTab;
/** @type {?} */
ScrollingTabsComponent.prototype.selectedTabChanged;
/** @type {?} */
ScrollingTabsComponent.prototype.tabs;
/** @type {?} */
ScrollingTabsComponent.prototype.leftOffset;
/** @type {?} */
ScrollingTabsComponent.prototype.firstVisibleTabIndex;
/** @type {?} */
ScrollingTabsComponent.prototype.showLeftArrow;
/** @type {?} */
ScrollingTabsComponent.prototype.showRightArrow;
/**
* @type {?}
* @private
*/
ScrollingTabsComponent.prototype.changeDetector;
/**
* @type {?}
* @private
*/
ScrollingTabsComponent.prototype.route;
/**
* @type {?}
* @private
*/
ScrollingTabsComponent.prototype.router;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/scrolling-tab.directive.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ScrollingTabDirective {
/**
* @param {?} tabs
* @param {?} elementRef
* @param {?} renderer
*/
constructor(tabs, elementRef, renderer) {
this.tabs = tabs;
this.elementRef = elementRef;
this.renderer = renderer;
this.active = false;
}
/**
* @return {?}
*/
ngOnInit() {
this.tabs.addTab(this);
this.renderer.addClass(this.elementRef.nativeElement, 'tab-pane');
this.renderer.setAttribute(this.elementRef.nativeElement, 'role', 'tabpanel');
}
/**
* @return {?}
*/
ngOnDestroy() {
this.tabs.removeTab(this);
}
/**
* @return {?}
*/
getTabClasses() {
return {
'nav-link': true,
active: this.active
};
}
}
ScrollingTabDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngcScrollingTab], ngcScrollingTab'
},] }
];
/** @nocollapse */
ScrollingTabDirective.ctorParameters = () => [
{ type: ScrollingTabsComponent },
{ type: ElementRef },
{ type: Renderer2 }
];
ScrollingTabDirective.propDecorators = {
id: [{ type: Input }],
title: [{ type: Input }],
active: [{ type: HostBinding, args: ['class.active',] }, { type: Input }]
};
if (false) {
/** @type {?} */
ScrollingTabDirective.prototype.id;
/** @type {?} */
ScrollingTabDirective.prototype.title;
/** @type {?} */
ScrollingTabDirective.prototype.active;
/**
* @type {?}
* @private
*/
ScrollingTabDirective.prototype.tabs;
/**
* @type {?}
* @private
*/
ScrollingTabDirective.prototype.elementRef;
/**
* @type {?}
* @private
*/
ScrollingTabDirective.prototype.renderer;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/scrolling-tabs.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ScrollingTabsModule {
}
ScrollingTabsModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [ScrollingTabsComponent, ScrollingTabDirective],
exports: [ScrollingTabsComponent, ScrollingTabDirective]
},] }
];
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ngc-scrolling-tabs.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { ScrollingTabsComponent, ScrollingTabsModule, ScrollingTabDirective as ɵa };
//# sourceMappingURL=ngc-scrolling-tabs.js.map