src/config.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

const config = {
    // selects images that load libra.js
    selector: '[data-libra]',

    // margin between viewport and zoomed image
    // in px
    margin: 50,

    // in small screens, it's best to not use margins
    // otherwise, the zoomed image gets even smaller
    // define on screen smaller than what size, margin is set to 0
    zeroMarginBreakpoint: 768,

    // shifts the zoomed image if needed
    offset: { x: 0, y: 0 },

    transitionDuration: 200, // milliseconds
    imageCursor: 'zoom-in',
};

function deepMerge(target, source) {
  for (const key in source) {
    if (
      typeof source[key] === 'object' &&
      source[key] !== null &&
      !Array.isArray(source[key])
    ) {
      if (!target[key]) target[key] = {};
      deepMerge(target[key], source[key]);
    } else {
      target[key] = source[key];
    }
  }
  return target;
}

export function setConfig(newConfig) {
  deepMerge(config, newConfig);
}

export default config;