export class Layout { _id:string; portalPid:string; layoutOptions:CustomizationOptions; constructor(community, options:CustomizationOptions){ this.portalPid = community; this.layoutOptions = options; } } export class CustomizationOptions { identity: { mainColor: string; secondaryColor: string; }; identityIsCustom:boolean; backgroundsAndButtonsIsCustom:boolean; backgrounds: { dark: { color: string; //background } light: { color: string; //background }, form: { color: string; //background imageUrl: string; imageFile: string; } }; buttons: { darkBackground: ButtonsCustomization; lightBackground: ButtonsCustomization; }; constructor(mainColor: string = null, secondaryColor: string = null) { this.identity= { mainColor: mainColor ? mainColor : CustomizationOptions.getIdentity().mainColor, secondaryColor : secondaryColor ? secondaryColor : CustomizationOptions.getIdentity().secondaryColor, }; this.identityIsCustom = false; this.backgroundsAndButtonsIsCustom = false; this.backgrounds={ dark : { color: this.identity.mainColor, }, light : { color: CustomizationOptions.getRGBA(this.identity.mainColor,0.05), }, form : { color: CustomizationOptions.getRGBA(this.identity.mainColor,0.15), imageUrl : null, imageFile : null } }; this.buttons = { darkBackground: { isDefault:true, backgroundColor: "#ffffff", color: "#000000", borderStyle: "solid", borderColor: "#ffffff", borderWidth: 1, borderRadius: 500, onHover: { backgroundColor: "#eeeeee", color: "#000000", borderColor: "#eeeeee", } }, lightBackground: { isDefault:true, backgroundColor: this.identity.mainColor, color: '#ffffff', borderStyle: "solid", borderColor: this.identity.mainColor, borderWidth: 1, borderRadius: 500, onHover: { backgroundColor: this.identity.secondaryColor, color: '#ffffff', borderColor: this.identity.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); if(current.identity && current.identity.mainColor && current.identity.secondaryColor ) { updated = new CustomizationOptions(current.identity.mainColor, current.identity.secondaryColor); } if(!current.backgrounds){ current.backgrounds = Object.assign({}, updated.backgrounds); } if(!current.backgrounds.dark){ current.backgrounds.dark = Object.assign({}, updated.backgrounds.dark); } if(!current.backgrounds.light){ current.backgrounds.light = Object.assign({}, updated.backgrounds.light); } if(!current.backgrounds.form){ current.backgrounds.form = Object.assign({}, updated.backgrounds.form); } if(!current.buttons){ current.buttons = Object.assign({}, updated.buttons); } if(!current.buttons.darkBackground){ current.buttons.darkBackground = Object.assign({}, updated.buttons.darkBackground); } if(!current.buttons.lightBackground){ current.buttons.lightBackground = Object.assign({}, updated.buttons.lightBackground); } if(!current.hasOwnProperty('identityIsCustom')){ current.identityIsCustom = (JSON.stringify(current.identity) != JSON.stringify(defaultCO.identity)); } if(!current.hasOwnProperty('backgroundsAndButtonsIsCustom')){ current.identityIsCustom = (JSON.stringify(current.backgrounds) != JSON.stringify(updated.backgrounds) || JSON.stringify(current.buttons) != JSON.stringify(updated.buttons)) ; } return current; } public static getIdentity(community:string=null){ let COLORS= { default:{ mainColor:'#4687E6', secondaryColor: '#2D72D6' }, "covid-19":{ mainColor:"#03ADEE", secondaryColor: "#F15157" } }; if(community && COLORS[community]){ return COLORS[community]; } return COLORS.default; } public static getRGBA(color, 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; } public static isForLightBackground(color:string){ let L, r, g, b, a = 1; if(color.length == 7 || color.length == 9) { r = parseInt(color.substring(1, 3), 16); g = parseInt(color.substring(3, 5), 16); b = parseInt(color.substring(5, 7), 16); if(color.length == 9) { a = parseInt(color.substring(7, 9), 16); } }else if(color.length > 9){ let array = color.split("rgba(")[1].split(")")[0].split(","); r = parseInt(array[0]); g = parseInt(array[1]); b = parseInt(array[2]); a = +array[3]; } const brightness = r* 0.299 + g * 0.587 + b * 0.114 + (1 - a) * 255; return (brightness < 186) // return !(r*0.299 + g*0.587 + b*0.114 > 186); /*for(let c of [r,g,b]){ c = c / 255.0; if(c <= 0.03928){ c = c / 12.92; }else { c = ((c + 0.055) / 1.055) ^ 2.4; } } L = 0.2126 * r + 0.7152 * g + 0.0722 * b; 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; backgroundColor: string; color: string; borderStyle: string; borderColor: string; borderWidth: number; borderRadius: number; onHover: { backgroundColor: string; color: string; borderColor: string; }; }