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
451 lines (444 loc) • 16.9 kB
JavaScript
import { __values } from 'tslib';
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
*/
var ScrollingTabsComponent = /** @class */ (function () {
function ScrollingTabsComponent(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 {?}
*/
ScrollingTabsComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
var _this = this;
setTimeout((/**
* @return {?}
*/
function () {
// 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 {?}
*/
ScrollingTabsComponent.prototype.addTab = /**
* @param {?} tab
* @return {?}
*/
function (tab) {
this.tabs.push(tab);
};
/**
* @param {?} tab
* @return {?}
*/
ScrollingTabsComponent.prototype.removeTab = /**
* @param {?} tab
* @return {?}
*/
function (tab) {
/** @type {?} */
var index = this.tabs.indexOf(tab);
if (index !== -1) {
this.tabs.splice(index, 1);
}
};
/**
* @return {?}
*/
ScrollingTabsComponent.prototype.windowResize = /**
* @return {?}
*/
function () {
this.redrawTabs();
};
/**
* @return {?}
*/
ScrollingTabsComponent.prototype.redrawTabs = /**
* @return {?}
*/
function () {
// 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 {?}
*/
ScrollingTabsComponent.prototype.widthOfList = /**
* @return {?}
*/
function () {
var e_1, _a;
/** @type {?} */
var totalWidth = 0;
try {
for (var _b = __values(this.tabList.nativeElement.children), _c = _b.next(); !_c.done; _c = _b.next()) {
var li = _c.value;
totalWidth += li.offsetWidth;
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_1) throw e_1.error; }
}
return totalWidth;
};
/**
* @return {?}
*/
ScrollingTabsComponent.prototype.onScrollerLeftClick = /**
* @return {?}
*/
function () {
// 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 {?}
*/
ScrollingTabsComponent.prototype.onScrollerRightClick = /**
* @return {?}
*/
function () {
// 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 {?}
*/
ScrollingTabsComponent.prototype.onSelectedTabChanged = /**
* @param {?} tab
* @return {?}
*/
function (tab) {
this.markTabAsActive(tab.id);
if (this.trackOpenTab) {
this.pushCurrentTabToParam(tab);
}
this.selectedTabChanged.emit(tab);
};
/**
* @return {?}
*/
ScrollingTabsComponent.prototype.markFirstTabActive = /**
* @return {?}
*/
function () {
/** @type {?} */
var activeTab = this.tabs.find((/**
* @param {?} t
* @return {?}
*/
function (t) { return 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 {?}
*/
ScrollingTabsComponent.prototype.scrollToActiveTab = /**
* @return {?}
*/
function () {
/** @type {?} */
var activeTab = this.tabs.findIndex((/**
* @param {?} t
* @return {?}
*/
function (t) { return t.active; }));
this.firstVisibleTabIndex = activeTab;
for (var i = 0; i < activeTab; i++) {
if (this.tabList.nativeElement.children[i]) {
this.leftOffset -= this.tabList.nativeElement.children[i].offsetWidth;
}
}
};
/**
* @return {?}
*/
ScrollingTabsComponent.prototype.hasHiddenTabs = /**
* @return {?}
*/
function () {
return this.widthOfList() > this.navWrapper.nativeElement.offsetWidth;
};
/**
* @param {?} tabId
* @return {?}
*/
ScrollingTabsComponent.prototype.markTabAsActive = /**
* @param {?} tabId
* @return {?}
*/
function (tabId) {
var e_2, _a;
try {
for (var _b = __values(this.tabs), _c = _b.next(); !_c.done; _c = _b.next()) {
var t = _c.value;
t.active = false;
if (t.id === tabId) {
t.active = true;
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
}
finally { if (e_2) throw e_2.error; }
}
};
/**
* @param {?} tab
* @return {?}
*/
ScrollingTabsComponent.prototype.pushCurrentTabToParam = /**
* @param {?} tab
* @return {?}
*/
function (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 = function () { return [
{ 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',] }]
};
return ScrollingTabsComponent;
}());
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
*/
var ScrollingTabDirective = /** @class */ (function () {
function ScrollingTabDirective(tabs, elementRef, renderer) {
this.tabs = tabs;
this.elementRef = elementRef;
this.renderer = renderer;
this.active = false;
}
/**
* @return {?}
*/
ScrollingTabDirective.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.tabs.addTab(this);
this.renderer.addClass(this.elementRef.nativeElement, 'tab-pane');
this.renderer.setAttribute(this.elementRef.nativeElement, 'role', 'tabpanel');
};
/**
* @return {?}
*/
ScrollingTabDirective.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.tabs.removeTab(this);
};
/**
* @return {?}
*/
ScrollingTabDirective.prototype.getTabClasses = /**
* @return {?}
*/
function () {
return {
'nav-link': true,
active: this.active
};
};
ScrollingTabDirective.decorators = [
{ type: Directive, args: [{
selector: '[ngcScrollingTab], ngcScrollingTab'
},] }
];
/** @nocollapse */
ScrollingTabDirective.ctorParameters = function () { return [
{ type: ScrollingTabsComponent },
{ type: ElementRef },
{ type: Renderer2 }
]; };
ScrollingTabDirective.propDecorators = {
id: [{ type: Input }],
title: [{ type: Input }],
active: [{ type: HostBinding, args: ['class.active',] }, { type: Input }]
};
return ScrollingTabDirective;
}());
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
*/
var ScrollingTabsModule = /** @class */ (function () {
function ScrollingTabsModule() {
}
ScrollingTabsModule.decorators = [
{ type: NgModule, args: [{
imports: [CommonModule],
declarations: [ScrollingTabsComponent, ScrollingTabDirective],
exports: [ScrollingTabsComponent, ScrollingTabDirective]
},] }
];
return ScrollingTabsModule;
}());
/**
* @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