1 | import { Renderer } from '@angular/core';
|
2 | import { Colors, Sizes } from './model';
|
3 |
|
4 | export class Homeworks {
|
5 | private m_component: string;
|
6 | private m_class: Array<string> = [];
|
7 |
|
8 | protected setRootElementClass(el: Element, className: string, isAdd: boolean = true): void {
|
9 | const context = this;
|
10 | const index: number = context.m_class.indexOf(className);
|
11 | if (index === -1) {
|
12 | if (isAdd === true) {
|
13 | context.m_class.push(className.replace(/\s/g, '-'));
|
14 | }
|
15 | }
|
16 | else {
|
17 | if (isAdd === false) {
|
18 | context.m_class.splice(index, 1);
|
19 | }
|
20 | }
|
21 |
|
22 | context.updateRootElementClass(el);
|
23 | }
|
24 |
|
25 | protected updateRootElementClass(el: Element) {
|
26 | const context = this;
|
27 | context.renderer.setElementAttribute(el, 'class', '');
|
28 | for (let idx in context.m_class) {
|
29 | context.renderer.setElementClass(el, context.m_class[idx], true);
|
30 | }
|
31 | }
|
32 |
|
33 | protected setElementClass(el: Element, className: string, isAdd: boolean = true): void {
|
34 | const context = this;
|
35 | const classFullName: string = `${context.m_component}-${className}`;
|
36 | context.renderer.setElementClass(el, classFullName, isAdd);
|
37 | }
|
38 |
|
39 | protected setPropagateChildClass(rootEl: Element, childEl: Element, className: string): void {
|
40 | if (className !== null && className !== '') {
|
41 | className
|
42 | .split(' ')
|
43 | .filter((e, i, arr) => {
|
44 | return arr.indexOf(e, i + 1) === -1;
|
45 | })
|
46 | .forEach((e, i) => {
|
47 | this.renderer.setElementClass(childEl, e, true);
|
48 | });
|
49 | }
|
50 | this.updateRootElementClass(rootEl);
|
51 | }
|
52 |
|
53 | protected setColor(el: Element, color: string): void {
|
54 | const context = this;
|
55 | const index: number = Colors.indexOf(color);
|
56 | if (index !== -1) {
|
57 | Colors.filter((e, i) => {
|
58 | return i !== index;
|
59 | }).map((e, i) => {
|
60 | context.setElementClass(el, e, false);
|
61 | });
|
62 | context.setElementClass(el, color);
|
63 | }
|
64 | }
|
65 |
|
66 | protected setSize(el: Element, size: string): void {
|
67 | const context = this;
|
68 | const sizeClassName: string = context.getSizeClassName(size);
|
69 | Sizes.filter((e, i) => {
|
70 | return e !== size;
|
71 | }).map((e, i) => {
|
72 | const removeSizeName: string = context.getSizeClassName(e);
|
73 | context.setElementClass(el, removeSizeName, false);
|
74 | });
|
75 | context.setElementClass(el, sizeClassName);
|
76 | }
|
77 |
|
78 | protected getSizeClassName(size: string): string {
|
79 | switch (size) {
|
80 | case 'extra large':
|
81 | return 'xg';
|
82 | case 'large':
|
83 | return 'lg';
|
84 | case 'medium':
|
85 | case 'normal':
|
86 | return 'md';
|
87 | case 'small':
|
88 | return 'sm';
|
89 | case 'extra small':
|
90 | return 'xs';
|
91 | }
|
92 | return 'md';
|
93 | }
|
94 |
|
95 | constructor(
|
96 | protected renderer: Renderer,
|
97 | component: string,
|
98 | alias: string = null
|
99 | ) {
|
100 | if (alias !== null) {
|
101 | this.m_component = alias;
|
102 | }
|
103 | else {
|
104 | this.m_component = component;
|
105 | }
|
106 | }
|
107 | } |
\ | No newline at end of file |