redoc/lib/shared/components/Tabs/tabs.js

96 lines
2.2 KiB
JavaScript
Raw Normal View History

2015-10-22 20:52:03 +03:00
'use strict';
2016-05-18 16:59:54 +03:00
import { Component, EventEmitter } from '@angular/core';
import { CORE_DIRECTIVES } from '@angular/common';
import { ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';
2015-10-22 20:52:03 +03:00
@Component({
2016-02-03 17:47:20 +03:00
selector: 'tabs',
events: ['change'],
2016-05-18 16:59:54 +03:00
inputs: ['selected'],
2015-10-22 20:52:03 +03:00
template: `
<ul>
2016-04-29 22:57:24 +03:00
<li *ngFor="let tab of tabs" [ngClass]="{active: tab.active}" (click)="selectTab(tab)"
class="tab-{{tab.tabStatus}}">{{tab.tabTitle}}</li>
2015-10-22 20:52:03 +03:00
</ul>
<ng-content></ng-content>
`,
directives: [CORE_DIRECTIVES],
2016-05-18 16:59:54 +03:00
styleUrls: ['./lib/shared/components/Tabs/tabs.css'],
changeDetection: ChangeDetectionStrategy.OnPush
2015-10-22 20:52:03 +03:00
})
2016-05-18 16:59:54 +03:00
@Reflect.metadata('parameters', [[ChangeDetectorRef]])
2015-10-22 20:52:03 +03:00
export class Tabs {
2016-05-18 16:59:54 +03:00
constructor(changeDetector) {
2015-10-22 20:52:03 +03:00
this.tabs = [];
2016-02-03 17:47:20 +03:00
this.change = new EventEmitter();
2016-05-18 16:59:54 +03:00
this.changeDetector = changeDetector;
2015-10-22 20:52:03 +03:00
}
2016-02-03 17:47:20 +03:00
selectTab(tab, notify = true) {
if (tab.active) return;
2015-10-22 20:52:03 +03:00
this.tabs.forEach((tab) => {
tab.active = false;
});
tab.active = true;
2016-02-03 17:47:20 +03:00
notify && this.change.next(tab.tabTitle);
}
selectyByTitle(tabTitle, notify = false) {
let prevActive;
let newActive;
this.tabs.forEach((tab) => {
if (tab.active) prevActive = tab;
tab.active = false;
if (tab.tabTitle === tabTitle) {
newActive = tab;
}
});
if (newActive) {
newActive.active = true;
} else {
prevActive.active = true;
}
notify && this.change.next(tabTitle);
2016-05-18 16:59:54 +03:00
this.changeDetector.markForCheck();
2015-10-22 20:52:03 +03:00
}
2015-12-13 13:38:39 +03:00
addTab(tab) {
2015-10-22 20:52:03 +03:00
if (this.tabs.length === 0) {
tab.active = true;
}
this.tabs.push(tab);
}
2016-05-18 16:59:54 +03:00
ngOnInit() {
if (this.selected) this.selected.subscribe(title => this.selectyByTitle(title));
}
2015-10-22 20:52:03 +03:00
}
@Component({
selector: 'tab',
inputs: ['tabTitle', 'tabStatus'],
2015-10-22 20:52:03 +03:00
template: `
2016-04-29 22:57:24 +03:00
<div class="tab-wrap" [ngClass]="{'active': active}">
2015-10-22 20:52:03 +03:00
<ng-content></ng-content>
</div>
`,
2016-02-10 14:36:10 +03:00
directives: [CORE_DIRECTIVES],
styles: [`
.tab-wrap {
display: none;
}
.tab-wrap.active {
display: block;
}`
]
2015-10-22 20:52:03 +03:00
})
@Reflect.metadata('parameters', [ [Tabs] ])
2015-10-22 20:52:03 +03:00
export class Tab {
constructor(tabs) {
2015-12-19 16:30:49 +03:00
this.active = false;
2015-10-22 20:52:03 +03:00
tabs.addTab(this);
}
}