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