1
|
export class Layout {
|
2
|
_id:string;
|
3
|
portalPid:string;
|
4
|
layoutOptions:CustomizationOptions;
|
5
|
constructor(community, options:CustomizationOptions){
|
6
|
this.portalPid = community;
|
7
|
this.layoutOptions = options;
|
8
|
}
|
9
|
}
|
10
|
export class CustomizationOptions {
|
11
|
identity: {
|
12
|
mainColor: string;
|
13
|
secondaryColor: string;
|
14
|
};
|
15
|
identityIsCustom:boolean;
|
16
|
backgroundsAndButtonsIsCustom:boolean;
|
17
|
backgrounds: {
|
18
|
dark: {
|
19
|
color: string; //background
|
20
|
}
|
21
|
light: {
|
22
|
color: string; //background
|
23
|
},
|
24
|
form: {
|
25
|
color: string; //background
|
26
|
}
|
27
|
};
|
28
|
buttons: {
|
29
|
darkBackground: ButtonsCustomization;
|
30
|
lightBackground: ButtonsCustomization;
|
31
|
};
|
32
|
|
33
|
constructor(mainColor: string = null, secondaryColor: string = null) {
|
34
|
this.identity= {
|
35
|
mainColor: mainColor ? mainColor : CustomizationOptions.getIdentity().mainColor,
|
36
|
secondaryColor : secondaryColor ? secondaryColor : CustomizationOptions.getIdentity().secondaryColor,
|
37
|
};
|
38
|
this.identityIsCustom = false;
|
39
|
this.backgroundsAndButtonsIsCustom = false;
|
40
|
this.backgrounds={
|
41
|
dark : {
|
42
|
color: this.identity.mainColor,
|
43
|
},
|
44
|
light : {
|
45
|
color: CustomizationOptions.getRGBA(this.identity.mainColor,0.1),
|
46
|
},
|
47
|
form : {
|
48
|
color: CustomizationOptions.getRGBA(this.identity.mainColor,0.2),
|
49
|
}
|
50
|
};
|
51
|
|
52
|
|
53
|
this.buttons = {
|
54
|
darkBackground: {
|
55
|
isDefault:true,
|
56
|
backgroundColor: "#ffffff",
|
57
|
color: "#000000",
|
58
|
borderStyle: "solid",
|
59
|
borderColor: "#ffffff",
|
60
|
borderWidth: 1,
|
61
|
borderRadius: 500,
|
62
|
onHover: {
|
63
|
backgroundColor: "#eeeeee",
|
64
|
color: "#000000",
|
65
|
borderColor: "#eeeeee",
|
66
|
}
|
67
|
},
|
68
|
lightBackground: {
|
69
|
isDefault:true,
|
70
|
backgroundColor: this.identity.mainColor,
|
71
|
color: '#ffffff',
|
72
|
borderStyle: "solid",
|
73
|
borderColor: this.identity.mainColor,
|
74
|
borderWidth: 1,
|
75
|
borderRadius: 500,
|
76
|
onHover: {
|
77
|
backgroundColor: this.identity.secondaryColor,
|
78
|
color: '#ffffff',
|
79
|
borderColor: this.identity.secondaryColor,
|
80
|
}
|
81
|
}
|
82
|
|
83
|
};
|
84
|
}
|
85
|
public static checkForObsoleteVersion(current:CustomizationOptions, communityId:string){
|
86
|
let defaultCO = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor,CustomizationOptions.getIdentity(communityId).secondaryColor);
|
87
|
let updated = Object.assign({}, defaultCO);
|
88
|
if(current.identity && current.identity.mainColor && current.identity.secondaryColor ) {
|
89
|
updated = new CustomizationOptions(current.identity.mainColor, current.identity.secondaryColor);
|
90
|
}
|
91
|
if(!current.backgrounds){
|
92
|
current.backgrounds = Object.assign({}, updated.backgrounds);
|
93
|
}
|
94
|
if(!current.backgrounds.dark){
|
95
|
current.backgrounds.dark = Object.assign({}, updated.backgrounds.dark);
|
96
|
}
|
97
|
if(!current.backgrounds.light){
|
98
|
current.backgrounds.light = Object.assign({}, updated.backgrounds.light);
|
99
|
}
|
100
|
if(!current.backgrounds.form){
|
101
|
current.backgrounds.form = Object.assign({}, updated.backgrounds.form);
|
102
|
}
|
103
|
if(!current.buttons){
|
104
|
current.buttons = Object.assign({}, updated.buttons);
|
105
|
}
|
106
|
if(!current.buttons.darkBackground){
|
107
|
current.buttons.darkBackground = Object.assign({}, updated.buttons.darkBackground);
|
108
|
}
|
109
|
if(!current.buttons.lightBackground){
|
110
|
current.buttons.lightBackground = Object.assign({}, updated.buttons.lightBackground);
|
111
|
}
|
112
|
if(!current.hasOwnProperty('identityIsCustom')){
|
113
|
current.identityIsCustom = (JSON.stringify(current.identity) != JSON.stringify(defaultCO.identity));
|
114
|
}
|
115
|
if(!current.hasOwnProperty('backgroundsAndButtonsIsCustom')){
|
116
|
current.identityIsCustom = (JSON.stringify(current.backgrounds) != JSON.stringify(updated.backgrounds) || JSON.stringify(current.buttons) != JSON.stringify(updated.buttons)) ;
|
117
|
}
|
118
|
return current;
|
119
|
|
120
|
|
121
|
}
|
122
|
public static getIdentity(community:string=null){
|
123
|
let COLORS= {
|
124
|
default:{
|
125
|
mainColor:'#4687E6',
|
126
|
secondaryColor: '#2D72D6'
|
127
|
},
|
128
|
"covid-19":{
|
129
|
mainColor:"#03ADEE",
|
130
|
secondaryColor: "#F15157"
|
131
|
}
|
132
|
};
|
133
|
if(community && COLORS[community]){
|
134
|
return COLORS[community];
|
135
|
}
|
136
|
return COLORS.default;
|
137
|
}
|
138
|
public static getRGBA(color, A){
|
139
|
if(color.indexOf("#")!=-1){
|
140
|
return 'rgba('+parseInt(color.substring(1,3),16)+','+parseInt(color.substring(3,5),16)+','+parseInt(color.substring(5,7),16)+','+A+')';
|
141
|
}
|
142
|
return color;
|
143
|
}
|
144
|
|
145
|
public static isForLightBackground(color:string){
|
146
|
let L, r, g, b, a = 1;
|
147
|
if(color.length == 7 || color.length == 9) {
|
148
|
r = parseInt(color.substring(1, 3), 16);
|
149
|
g = parseInt(color.substring(3, 5), 16);
|
150
|
b = parseInt(color.substring(5, 7), 16);
|
151
|
if(color.length == 9) {
|
152
|
a = parseInt(color.substring(7, 9), 16);
|
153
|
}
|
154
|
}else if(color.length > 9){
|
155
|
let array = color.split("rgba(")[1].split(")")[0].split(",");
|
156
|
r = parseInt(array[0]);
|
157
|
g = parseInt(array[1]);
|
158
|
b = parseInt(array[2]);
|
159
|
a = +array[3];
|
160
|
|
161
|
}
|
162
|
const brightness = r* 0.299 + g * 0.587 + b * 0.114 + (1 - a) * 255;
|
163
|
|
164
|
return (brightness < 186)
|
165
|
|
166
|
// return !(r*0.299 + g*0.587 + b*0.114 > 186);
|
167
|
/*for(let c of [r,g,b]){
|
168
|
c = c / 255.0;
|
169
|
if(c <= 0.03928){
|
170
|
c = c / 12.92;
|
171
|
}else {
|
172
|
c = ((c + 0.055) / 1.055) ^ 2.4;
|
173
|
}
|
174
|
}
|
175
|
L = 0.2126 * r + 0.7152 * g + 0.0722 * b;
|
176
|
return L > 0.179// (L + 0.05) / (0.05) > (1.0 + 0.05) / (L + 0.05); //use #000000 else use #ffffff
|
177
|
*/
|
178
|
}
|
179
|
|
180
|
|
181
|
}
|
182
|
export class ButtonsCustomization{
|
183
|
isDefault:boolean;
|
184
|
backgroundColor: string;
|
185
|
color: string;
|
186
|
borderStyle: string;
|
187
|
borderColor: string;
|
188
|
borderWidth: number;
|
189
|
borderRadius: number;
|
190
|
onHover: {
|
191
|
backgroundColor: string;
|
192
|
color: string;
|
193
|
borderColor: string;
|
194
|
};
|
195
|
}
|