openaire-library/connect/community/CustomizationOptions.ts

import {properties} from "../../../../environments/environment";

export class Layout {
  _id:string;
  portalPid:string;
  layoutOptions:CustomizationOptions;
  date;
  constructor(community, options:CustomizationOptions){
    this.portalPid = community;
    this.layoutOptions = options;
  }
  
  public static getVariables(options: CustomizationOptions): {} | null {
    if(options) {
      let variables = {};
      if(options.identity) {
        variables['@global-primary-background'] = options.identity.mainColor;
        variables['@global-secondary-background'] = options.identity.secondaryColor;
      }
      if(options.backgrounds){
        variables['@general-search-form-background'] = options.backgrounds.form.color;
        variables['@general-search-form-background-image'] = (options.backgrounds.form.imageFile?(this.getUrl(properties.utilsService + '/download/' +options.backgrounds.form.imageFile)): 'none') ;
        variables['@general-search-form-background-position'] = options.backgrounds.form.position;
       variables['@base-body-background'] = options.backgrounds.light.color;
      }
      if(options.buttons){
        //general
        variables['@button-border-width'] = options.buttons.lightBackground.borderWidth + "px";
        variables['@button-border-radius'] = options.buttons.lightBackground.borderRadius + "px";
        // default -> on dark background todo check again when we have sucj=h buttons
        variables['@button-default-background'] = options.buttons.darkBackground.backgroundColor;
        variables['@button-default-color'] = options.buttons.darkBackground.color;
        variables['@button-default-border'] = options.buttons.darkBackground.borderColor;
        variables['@button-default-hover-background'] = options.buttons.darkBackground.onHover.backgroundColor;
        variables['@button-default-hover-color'] = options.buttons.darkBackground.onHover.color;
        variables['@button-default-hover-border'] = options.buttons.darkBackground.onHover.borderColor;
        variables['@button-default-active-background'] = options.buttons.darkBackground.onHover.backgroundColor;
        variables['@button-default-active-color'] = options.buttons.darkBackground.onHover.color;
        variables['@button-default-active-border'] = options.buttons.darkBackground.onHover.borderColor;
        
        // primary   
        variables['@button-primary-background'] = options.buttons.lightBackground.backgroundColor;
        variables['@button-primary-color'] = options.buttons.lightBackground.color;
        variables['@button-primary-border'] = options.buttons.lightBackground.borderColor;
        variables['@button-primary-hover-background'] = options.buttons.lightBackground.onHover.backgroundColor;
        variables['@button-primary-hover-color'] = options.buttons.lightBackground.onHover.color;
        variables['@button-primary-hover-border'] = options.buttons.lightBackground.onHover.borderColor;
        variables['@button-primary-active-background'] = options.buttons.lightBackground.onHover.backgroundColor;
        variables['@button-primary-active-color'] = options.buttons.lightBackground.onHover.color;
        variables['@button-primary-active-border'] = options.buttons.lightBackground.onHover.borderColor;
        
        // secondary
        variables['@button-secondary-background'] = options.buttons.lightBackground.color;
        variables['@button-secondary-color'] = options.buttons.lightBackground.backgroundColor;
        variables['@button-secondary-border'] = options.buttons.lightBackground.backgroundColor;
        variables['@button-secondary-hover-background'] = options.buttons.lightBackground.backgroundColor;
        variables['@button-secondary-hover-color'] = options.buttons.lightBackground.color;
        variables['@button-secondary-hover-border'] = options.buttons.lightBackground.borderColor;
        variables['@button-secondary-active-background'] = options.buttons.lightBackground.backgroundColor;
        variables['@button-secondary-active-color'] = options.buttons.lightBackground.color;
        variables['@button-secondary-active-border'] = options.buttons.lightBackground.borderColor;

      }
      return variables;
    }
    return null;
  }
  public static getUrl(url){
    return 'url("' + url + '")';
  }

}
export class CustomizationOptions {
  identity: {
    mainColor: string;
    secondaryColor: string;
  };
  identityIsCustom:boolean;
  backgroundsIsCustom:boolean;
  buttonsIsCustom:boolean;
  backgrounds: {
    dark: {
       color: string; //background
    }
    light: {
      color: string; //background
    },
    form: {
      color: string; //background
      imageUrl: string;
      imageFile: string;
      position: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.backgroundsIsCustom = false;
    this.buttonsIsCustom = false;
    this.backgrounds={
      dark : {
        color: this.identity.mainColor,
      },
      light : {
        color: "#f9f9f9" //CustomizationOptions.getRGBA(this.identity.mainColor,0.05),
      },
      form : {
        color: CustomizationOptions.getRGBA(this.identity.mainColor,0.15),
        imageUrl : null,
        imageFile : null,
        position: 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.backgrounds.form.position){
      current.backgrounds.form.position = "center bottom"
    }
    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.hasOwnProperty('backgroundsIsCustom') || (!current.hasOwnProperty('buttonsIsCustom')))){
      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;
  };
}