openaire-library/connect/community/CustomizationOptions.ts

export class Layout {
  _id:string;
  portalPid:string;
  layoutOptions:CustomizationOptions;
  constructor(community, options:CustomizationOptions){
    this.portalPid = community;
    this.layoutOptions = options;
  }
}
export class CustomizationOptions {
  identity: {
    isDefault: boolean;
    mainColor: string;
    secondaryColor: string;
  };
  backgrounds: {
    isDefault:boolean,
    dark: {
      isDefault:boolean,
       color: string; //background
    }
    light: {
      isDefault:boolean,
      color: string; //background
    }
  };
  buttons: {
    isDefault:boolean,
    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,
      isDefault : true
    };
    this.backgrounds={
      isDefault: true,
      dark : {
        isDefault: true,
        color: this.identity.mainColor,
      },
      light : {
        isDefault: true,
        color: CustomizationOptions.getRGBA(this.identity.mainColor,0.1),
      }
    };


    this.buttons = {
      isDefault: true,
      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 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;
    // console.log(color + " " +color.length);
    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];

    }
    console.log(color, color.length, r, g, b, a);
     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;
  };
}