MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Change base-background to global-backround. Add method to convert rgba to rgb in order to avoid different colors when elements stacks.

This commit is contained in:
Konstantinos Triantafyllou 2023-05-27 22:46:07 +03:00
parent ddcdd79204
commit 63cf1b09da
1 changed files with 113 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

206
connect/community/CustomizationOptions.ts
View File

@ -1,86 +1,102 @@
import {properties} from "../../../../environments/environment"; import {properties} from "../../../../environments/environment";
export class Layout { export class Layout {
_id:string; _id: string;
portalPid:string; portalPid: string;
layoutOptions:CustomizationOptions; layoutOptions: CustomizationOptions;
date; date;
constructor(community, options:CustomizationOptions){
constructor(community, options: CustomizationOptions) {
this.portalPid = community; this.portalPid = community;
this.layoutOptions = options; this.layoutOptions = options;
} }
public static getVariables(options: CustomizationOptions): {} | null { public static getVariables(options: CustomizationOptions): {} | null {
if(options) { if (options) {
let variables = {}; let variables = {};
if(options.identity) { if (options.identity) {
variables['@global-primary-background'] = options.identity.mainColor; variables['@global-primary-background'] = Layout.convertRGBAtoRGB(options.identity.mainColor);
variables['@global-secondary-background'] = options.identity.secondaryColor; variables['@global-secondary-background'] = Layout.convertRGBAtoRGB(options.identity.secondaryColor);
} }
if(options.backgrounds){ if (options.backgrounds) {
variables['@general-search-form-background'] = options.backgrounds.form.color; variables['@general-search-form-background'] = Layout.convertRGBAtoRGB(options.backgrounds.form.color);
variables['@base-body-background'] = options.backgrounds.light.color; variables['@global-background'] = Layout.convertRGBAtoRGB(options.backgrounds.light.color);
variables['@hero-background-image'] = (options.backgrounds.form.imageFile?(this.getUrl(properties.utilsService + '/download/' +options.backgrounds.form.imageFile)): 'none') ; variables['@hero-background-image'] = (options.backgrounds.form.imageFile ? (this.getUrl(properties.utilsService + '/download/' + options.backgrounds.form.imageFile)) : 'none');
variables['@hero-background-position'] = options.backgrounds.form.position; variables['@hero-background-position'] = options.backgrounds.form.position;
} }
if(options.buttons){ if (options.buttons) {
//general //general
variables['@button-border-width'] = options.buttons.lightBackground.borderWidth + "px"; variables['@button-border-width'] = options.buttons.lightBackground.borderWidth + "px";
variables['@button-border-radius'] = options.buttons.lightBackground.borderRadius + "px"; variables['@button-border-radius'] = options.buttons.lightBackground.borderRadius + "px";
// default -> on dark background todo check again when we have sucj=h buttons // default -> on dark background todo check again when we have sucj=h buttons
variables['@button-default-background'] = options.buttons.darkBackground.backgroundColor; variables['@button-default-background'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.backgroundColor);
variables['@button-default-color'] = options.buttons.darkBackground.color; variables['@button-default-color'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.color);
variables['@button-default-border'] = options.buttons.darkBackground.borderColor; variables['@button-default-border'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.borderColor);
variables['@button-default-hover-background'] = options.buttons.darkBackground.onHover.backgroundColor; variables['@button-default-hover-background'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.backgroundColor);
variables['@button-default-hover-color'] = options.buttons.darkBackground.onHover.color; variables['@button-default-hover-color'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.color);
variables['@button-default-hover-border'] = options.buttons.darkBackground.onHover.borderColor; variables['@button-default-hover-border'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.borderColor);
variables['@button-default-active-background'] = options.buttons.darkBackground.onHover.backgroundColor; variables['@button-default-active-background'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.backgroundColor);
variables['@button-default-active-color'] = options.buttons.darkBackground.onHover.color; variables['@button-default-active-color'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.color);
variables['@button-default-active-border'] = options.buttons.darkBackground.onHover.borderColor; variables['@button-default-active-border'] = Layout.convertRGBAtoRGB(options.buttons.darkBackground.onHover.borderColor);
// primary // primary
variables['@button-primary-background'] = options.buttons.lightBackground.backgroundColor; variables['@button-primary-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
variables['@button-primary-color'] = options.buttons.lightBackground.color; variables['@button-primary-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.color);
variables['@button-primary-border'] = options.buttons.lightBackground.borderColor; variables['@button-primary-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.borderColor);
variables['@button-primary-hover-background'] = options.buttons.lightBackground.onHover.backgroundColor; variables['@button-primary-hover-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.backgroundColor);
variables['@button-primary-hover-color'] = options.buttons.lightBackground.onHover.color; variables['@button-primary-hover-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.color);
variables['@button-primary-hover-border'] = options.buttons.lightBackground.onHover.borderColor; variables['@button-primary-hover-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.borderColor);
variables['@button-primary-active-background'] = options.buttons.lightBackground.onHover.backgroundColor; variables['@button-primary-active-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.backgroundColor);
variables['@button-primary-active-color'] = options.buttons.lightBackground.onHover.color; variables['@button-primary-active-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.color);
variables['@button-primary-active-border'] = options.buttons.lightBackground.onHover.borderColor; variables['@button-primary-active-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.onHover.borderColor);
// secondary // secondary
variables['@button-secondary-background'] = options.buttons.lightBackground.color; variables['@button-secondary-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.color);
variables['@button-secondary-color'] = options.buttons.lightBackground.backgroundColor; variables['@button-secondary-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
variables['@button-secondary-border'] = options.buttons.lightBackground.backgroundColor; variables['@button-secondary-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
variables['@button-secondary-hover-background'] = options.buttons.lightBackground.backgroundColor; variables['@button-secondary-hover-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
variables['@button-secondary-hover-color'] = options.buttons.lightBackground.color; variables['@button-secondary-hover-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.color);
variables['@button-secondary-hover-border'] = options.buttons.lightBackground.borderColor; variables['@button-secondary-hover-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.borderColor);
variables['@button-secondary-active-background'] = options.buttons.lightBackground.backgroundColor; variables['@button-secondary-active-background'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.backgroundColor);
variables['@button-secondary-active-color'] = options.buttons.lightBackground.color; variables['@button-secondary-active-color'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.color);
variables['@button-secondary-active-border'] = options.buttons.lightBackground.borderColor; variables['@button-secondary-active-border'] = Layout.convertRGBAtoRGB(options.buttons.lightBackground.borderColor);
} }
return variables; return variables;
} }
return null; return null;
} }
public static getUrl(url){
public static getUrl(url) {
return 'url("' + url + '")'; return 'url("' + url + '")';
} }
public static convertRGBAtoRGB(color: string): string {
if(color.includes('rgba')) {
const regexPattern = /rgba\((\d+),\s*(\d+),\s*(\d+),\s*([\d.]+)\)/;
const matches = color.match(regexPattern);
const [, r, g, b, a] = matches;
let R = parseInt(r)*parseFloat(a) + (1 - parseFloat(a))*255;
let G = parseInt(g)*parseFloat(a) + (1 - parseFloat(a))*255;
let B = parseInt(b)*parseFloat(a) + (1 - parseFloat(a))*255;
return 'rgb(' + R + ',' + G + ',' + B + ',' + ')';
} else {
return color;
}
}
} }
export class CustomizationOptions { export class CustomizationOptions {
identity: { identity: {
mainColor: string; mainColor: string;
secondaryColor: string; secondaryColor: string;
}; };
identityIsCustom:boolean; identityIsCustom: boolean;
backgroundsIsCustom:boolean; backgroundsIsCustom: boolean;
buttonsIsCustom:boolean; buttonsIsCustom: boolean;
backgrounds: { backgrounds: {
dark: { dark: {
color: string; //background color: string; //background
} }
light: { light: {
color: string; //background color: string; //background
@ -89,41 +105,41 @@ export class CustomizationOptions {
color: string; //background color: string; //background
imageUrl: string; imageUrl: string;
imageFile: string; imageFile: string;
position:string; position: string;
} }
}; };
buttons: { buttons: {
darkBackground: ButtonsCustomization; darkBackground: ButtonsCustomization;
lightBackground: ButtonsCustomization; lightBackground: ButtonsCustomization;
}; };
constructor(mainColor: string = null, secondaryColor: string = null) { constructor(mainColor: string = null, secondaryColor: string = null) {
this.identity= { this.identity = {
mainColor: mainColor ? mainColor : CustomizationOptions.getIdentity().mainColor, mainColor: mainColor ? mainColor : CustomizationOptions.getIdentity().mainColor,
secondaryColor : secondaryColor ? secondaryColor : CustomizationOptions.getIdentity().secondaryColor, secondaryColor: secondaryColor ? secondaryColor : CustomizationOptions.getIdentity().secondaryColor,
}; };
this.identityIsCustom = false; this.identityIsCustom = false;
this.backgroundsIsCustom = false; this.backgroundsIsCustom = false;
this.buttonsIsCustom = false; this.buttonsIsCustom = false;
this.backgrounds={ this.backgrounds = {
dark : { dark: {
color: this.identity.mainColor, color: this.identity.mainColor,
}, },
light : { light: {
color: "#f9f9f9" //CustomizationOptions.getRGBA(this.identity.mainColor,0.05), color: "#f9f9f9" //CustomizationOptions.getRGBA(this.identity.mainColor,0.05),
}, },
form : { form: {
color: CustomizationOptions.getRGBA(this.identity.mainColor,0.15), color: CustomizationOptions.getRGBA(this.identity.mainColor, 0.15),
imageUrl : null, imageUrl: null,
imageFile : null, imageFile: null,
position: null position: null
} }
}; };
this.buttons = { this.buttons = {
darkBackground: { darkBackground: {
isDefault:true, isDefault: true,
backgroundColor: "#ffffff", backgroundColor: "#ffffff",
color: "#000000", color: "#000000",
borderStyle: "solid", borderStyle: "solid",
@ -137,7 +153,7 @@ export class CustomizationOptions {
} }
}, },
lightBackground: { lightBackground: {
isDefault:true, isDefault: true,
backgroundColor: this.identity.mainColor, backgroundColor: this.identity.mainColor,
color: '#ffffff', color: '#ffffff',
borderStyle: "solid", borderStyle: "solid",
@ -150,15 +166,16 @@ export class CustomizationOptions {
borderColor: this.identity.secondaryColor, borderColor: this.identity.secondaryColor,
} }
} }
}; };
} }
public static checkForObsoleteVersion(current:CustomizationOptions, communityId:string){
let defaultCO = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor,CustomizationOptions.getIdentity(communityId).secondaryColor); public static checkForObsoleteVersion(current: CustomizationOptions, communityId: string) {
let defaultCO = new CustomizationOptions(CustomizationOptions.getIdentity(communityId).mainColor, CustomizationOptions.getIdentity(communityId).secondaryColor);
let updated = Object.assign({}, defaultCO); let updated = Object.assign({}, defaultCO);
if(!current){ if (!current) {
current = Object.assign({}, defaultCO); current = Object.assign({}, defaultCO);
}else { } else {
if (current.identity && current.identity.mainColor && current.identity.secondaryColor) { if (current.identity && current.identity.mainColor && current.identity.secondaryColor) {
updated = new CustomizationOptions(current.identity.mainColor, current.identity.secondaryColor); updated = new CustomizationOptions(current.identity.mainColor, current.identity.secondaryColor);
} }
@ -195,53 +212,55 @@ export class CustomizationOptions {
} }
} }
return current; return current;
} }
public static getIdentity(community:string=null){
let COLORS= { public static getIdentity(community: string = null) {
default:{ let COLORS = {
mainColor:'#4687E6', default: {
mainColor: '#4687E6',
secondaryColor: '#2D72D6' secondaryColor: '#2D72D6'
}, },
"covid-19":{ "covid-19": {
mainColor:"#03ADEE", mainColor: "#03ADEE",
secondaryColor: "#F15157" secondaryColor: "#F15157"
} }
}; };
if(community && COLORS[community]){ if (community && COLORS[community]) {
return COLORS[community]; return COLORS[community];
} }
return COLORS.default; return COLORS.default;
} }
public static getRGBA(color, A){
if(color.indexOf("#")!=-1){ public static getRGBA(color, A) {
return 'rgba('+parseInt(color.substring(1,3),16)+','+parseInt(color.substring(3,5),16)+','+parseInt(color.substring(5,7),16)+','+A+')'; if (color.indexOf("#") != -1) {
return 'rgba(' + parseInt(color.substring(1, 3), 16) + ',' + parseInt(color.substring(3, 5), 16) + ',' + parseInt(color.substring(5, 7), 16) + ',' + A + ')';
} }
return color; return color;
} }
public static isForLightBackground(color:string){ public static isForLightBackground(color: string) {
let L, r, g, b, a = 1; let L, r, g, b, a = 1;
if(color.length == 7 || color.length == 9) { if (color.length == 7 || color.length == 9) {
r = parseInt(color.substring(1, 3), 16); r = parseInt(color.substring(1, 3), 16);
g = parseInt(color.substring(3, 5), 16); g = parseInt(color.substring(3, 5), 16);
b = parseInt(color.substring(5, 7), 16); b = parseInt(color.substring(5, 7), 16);
if(color.length == 9) { if (color.length == 9) {
a = parseInt(color.substring(7, 9), 16); a = parseInt(color.substring(7, 9), 16);
} }
}else if(color.length > 9){ } else if (color.length > 9) {
let array = color.split("rgba(")[1].split(")")[0].split(","); let array = color.split("rgba(")[1].split(")")[0].split(",");
r = parseInt(array[0]); r = parseInt(array[0]);
g = parseInt(array[1]); g = parseInt(array[1]);
b = parseInt(array[2]); b = parseInt(array[2]);
a = +array[3]; a = +array[3];
} }
const brightness = r* 0.299 + g * 0.587 + b * 0.114 + (1 - a) * 255; const brightness = r * 0.299 + g * 0.587 + b * 0.114 + (1 - a) * 255;
return (brightness < 186) return (brightness < 186)
// return !(r*0.299 + g*0.587 + b*0.114 > 186); // return !(r*0.299 + g*0.587 + b*0.114 > 186);
/*for(let c of [r,g,b]){ /*for(let c of [r,g,b]){
c = c / 255.0; c = c / 255.0;
@ -255,11 +274,12 @@ export class CustomizationOptions {
return L > 0.179// (L + 0.05) / (0.05) > (1.0 + 0.05) / (L + 0.05); //use #000000 else use #ffffff return L > 0.179// (L + 0.05) / (0.05) > (1.0 + 0.05) / (L + 0.05); //use #000000 else use #ffffff
*/ */
} }
} }
export class ButtonsCustomization{
isDefault:boolean; export class ButtonsCustomization {
isDefault: boolean;
backgroundColor: string; backgroundColor: string;
color: string; color: string;
borderStyle: string; borderStyle: string;