All files / src constants.js

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
95
24x
 
 
 
 
 
 
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"