All files / src constants.js

100% Statements 13/13
100% Branches 0/0
100% Functions 0/0
100% Lines 13/13

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 9524x             24x         24x             24x                                                 24x   24x                 24x         24x                             24x   24x         24x   24x                   24x
export const ACCESSIBILITY_TRANSFORMATIONS = {
  'darkmode': {effect: 'tint:75:black'},
  'brightmode': {effect: 'tint:50:white'},
  'monochrome': {effect: 'grayscale'},
  'colorblind': {effect: 'assist_colorblind'}
};
 
export const predominantColorTransformPxl = [
  {width: 'iw_div_2', aspect_ratio: 1, crop: 'pad', background: 'auto'},
  {crop: 'crop', width: 1, height: 1, gravity: 'north_east'},
  {fetch_format: 'auto', quality: 'auto'}];
 
export const predominantColorTransform  = [
  {variables: [['$currWidth', 'w'], ['$currHeight', 'h']]},
  {width: 'iw_div_2', aspect_ratio: 1, crop: 'pad', background: 'auto'},
  {crop: 'crop', width: 10, height: 10, gravity: 'north_east'},
  {width: '$currWidth', height: '$currHeight', crop: 'fill'},
  {fetch_format: 'auto', quality: 'auto'}];
 
export const PLACEHOLDER_TRANSFORMATIONS = {
  vectorize: [{effect: 'vectorize:3:0.1', fetch_format: 'svg'}],
  pixelate: [{effect: 'pixelate', quality: 1, fetch_format: 'auto'}],
  blur: [{effect: 'blur:2000', quality: 1, fetch_format: 'auto'}],
  'predominant-color': predominantColorTransform,
  lqip: [
    {
      variables: [["$nh", "ih"], ["$nw", "iw"]],
      crop: "scale",
      width: "20",
      quality: "auto"
    },
    { crop: "scale", width: "$nw", height: "$nh" }
  ],
  color: [
    {
      variables: [["$nh", "ih"], ["$nw", "iw"]],
      crop: "scale",
      width: "1",
      quality: "1"
    },
    { crop: "scale", width: "$nw", height: "$nh" }
  ]
};
 
export const progressive = { flags: ["progressive"] }
 
export const COMPONENTS = {
  CldImage: 'CldImage',
  CldPlaceholder: 'CldPlaceholder',
  CldVideo: 'CldVideo',
  CldPoster: 'CldPoster',
  CldTransformation: 'CldTransformation',
  CldContext: 'CldContext'
}
 
export const RESPONSIVE_CSS_DEFAULT = Object.freeze({
  display: "block",
  width: "100%"
})
 
export const RESPONSIVE_CSS = {
  height: {
    display: "block",
    height: "100%",
    width: "auto"
  },
  true: RESPONSIVE_CSS_DEFAULT,
  auto: RESPONSIVE_CSS_DEFAULT,
  width: RESPONSIVE_CSS_DEFAULT,
  fill: {
    ...RESPONSIVE_CSS_DEFAULT,
    height: "100%"
  },
}
 
export const LAZY_LOADING = 'lazy'
 
export const IMAGE_CLASSES = {
  LOADING: 'cld-image-loading',
  LOADED: 'cld-image-loaded',
  DEFAULT: 'cld-image'
}
export const PLACEHOLDER_CLASS = 'cld-placeholder'
 
export const IMAGE_WITH_PLACEHOLDER_CSS = {
  [IMAGE_CLASSES.LOADING]: {
    opacity: 0,
    position: 'absolute',
  }, 
  [PLACEHOLDER_CLASS]: {
    display: 'inline-block'
  }
}
 
export const CLD_IMAGE_WRAPPER_CLASS = "cld-image-wrapper"