Terncode/pixel.horse
1
0
Fork 0
mirror of https://github.com/Terncode/pixel.horse.git synced 2026-09-24 21:55:52 +02:00
Code Issues Packages Projects Releases Wiki Activity

tslint changes

Browse Source
This commit is contained in:
Jeremy Simpson
2019-08-30 01:52:40 -07:00
parent 7603879d35
commit 7f7efbb94b
446 changed files with 70650 additions and 70661 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ts/components/shared/tabset/tabset.ts
+66 -66
View File
@@ -1,93 +1,93 @@
import {
Component, Directive, TemplateRef, Input, ContentChild, ContentChildren, QueryList, Output, EventEmitter
Component, Directive, TemplateRef, Input, ContentChild, ContentChildren, QueryList, Output, EventEmitter
} from '@angular/core';
import { uniqueId } from 'lodash';
import { Key } from '../../../client/input/input';
@Directive({
selector: '[tabTitle]'
selector: '[tabTitle]'
})
export class TabTitle {
constructor(public templateRef: TemplateRef<any>) {
}
constructor(public templateRef: TemplateRef<any>) {
}
}
@Directive({
selector: '[tabContent]',
selector: '[tabContent]',
})
export class TabContent {
constructor(public templateRef: TemplateRef<any>) {
}
constructor(public templateRef: TemplateRef<any>) {
}
}
@Directive({
selector: 'tab',
selector: 'tab',
})
export class Tab {
@Input() id = uniqueId(`tabset-tab`);
@Input() title?: string;
@Input() icon?: any;
@Input() disabled = false;
@ContentChild(TabContent, { static: false }) contentTpl?: TabContent;
@ContentChild(TabTitle, { static: false }) titleTpl?: TabTitle;
@Input() id = uniqueId(`tabset-tab`);
@Input() title?: string;
@Input() icon?: any;
@Input() disabled = false;
@ContentChild(TabContent, { static: false }) contentTpl?: TabContent;
@ContentChild(TabTitle, { static: false }) titleTpl?: TabTitle;
}
@Component({
selector: 'tabset',
templateUrl: 'tabset.pug',
selector: 'tabset',
templateUrl: 'tabset.pug',
})
export class Tabset {
justifyClass?: string;
@ContentChildren(Tab) tabs!: QueryList<Tab>;
@Input() label = '';
@Input() destroyOnHide = true;
@Input()
set justify(className: 'start' | 'center' | 'end' | 'fill' | 'justified') {
if (className === 'fill' || className === 'justified') {
this.justifyClass = `nav-${className}`;
} else {
this.justifyClass = `justify-content-${className}`;
}
}
@Input() orientation: 'horizontal' | 'vertical' = 'horizontal';
@Input() type: 'tabs' | 'pills' = 'tabs';
@Input() activeIndex = 0;
@Output() activeIndexChange = new EventEmitter<number>();
constructor() {
this.justify = 'start';
}
get navClass() {
return `nav-${this.type}${this.orientation === 'horizontal' ? ` ${this.justifyClass}` : ' flex-column'}`;
}
select(index: number) {
if (this.activeIndex !== index) {
this.activeIndex = index;
this.activeIndexChange.emit(index);
}
}
keydown(e: KeyboardEvent) {
const index = this.handleKey(e.keyCode);
justifyClass?: string;
@ContentChildren(Tab) tabs!: QueryList<Tab>;
@Input() label = '';
@Input() destroyOnHide = true;
@Input()
set justify(className: 'start' | 'center' | 'end' | 'fill' | 'justified') {
if (className === 'fill' || className === 'justified') {
this.justifyClass = `nav-${className}`;
} else {
this.justifyClass = `justify-content-${className}`;
}
}
@Input() orientation: 'horizontal' | 'vertical' = 'horizontal';
@Input() type: 'tabs' | 'pills' = 'tabs';
@Input() activeIndex = 0;
@Output() activeIndexChange = new EventEmitter<number>();
constructor() {
this.justify = 'start';
}
get navClass() {
return `nav-${this.type}${this.orientation === 'horizontal' ? ` ${this.justifyClass}` : ' flex-column'}`;
}
select(index: number) {
if (this.activeIndex !== index) {
this.activeIndex = index;
this.activeIndexChange.emit(index);
}
}
keydown(e: KeyboardEvent) {
const index = this.handleKey(e.keyCode);
if (index !== undefined) {
e.preventDefault();
const element = document.getElementById(this.tabs.toArray()[index].id);
element && element.focus();
this.select(index);
}
}
private handleKey(keyCode: number) {
if (keyCode === Key.LEFT) {
return this.activeIndex === 0 ? this.tabs.length - 1 : this.activeIndex - 1;
} else if (keyCode === Key.RIGHT) {
return this.activeIndex === this.tabs.length - 1 ? 0 : this.activeIndex + 1;
} else if (keyCode === Key.HOME) {
return 0;
} else if (keyCode === Key.END) {
return this.tabs.length - 1;
} else {
return undefined;
}
}
if (index !== undefined) {
e.preventDefault();
const element = document.getElementById(this.tabs.toArray()[index].id);
element && element.focus();
this.select(index);
}
}
private handleKey(keyCode: number) {
if (keyCode === Key.LEFT) {
return this.activeIndex === 0 ? this.tabs.length - 1 : this.activeIndex - 1;
} else if (keyCode === Key.RIGHT) {
return this.activeIndex === this.tabs.length - 1 ? 0 : this.activeIndex + 1;
} else if (keyCode === Key.HOME) {
return 0;
} else if (keyCode === Key.END) {
return this.tabs.length - 1;
} else {
return undefined;
}
}
}
export const tabsetComponents = [TabContent, TabTitle, Tabset, Tab];