https://designtorget.se/includes/js/lazy_content_blocks.js?v=250521

1(function () {
2  const templateCache = new WeakMap();
3
4  const breakpoints = [
5    { name: 'medium', query: '(min-width: 640px)' },
6    { name: 'large', query: '(min-width: 1024px)' },
7    { name: 'xlarge', query: '(min-width: 1200px)' },
8    { name: 'xxlarge', query: '(min-width: 1440px)' }
9  ];
10
11  function getCurrentBreakpoint() {
12    let current = 'small';
13    for (const breakpoint of breakpoints) {
14      if (window.matchMedia(breakpoint.query).matches) {
15        current = breakpoint.name;
16      }
17    }
18    return current;
19  }
20
21  function getLazyBlocks() {
22    return document.querySelectorAll('[data-content-block-lazy-loaded="false"]');
23  }
24
25  function getHiddenMediaQueries(element) {
26    const raw = element.getAttribute('data-hidden-media-queries');
27    if (!raw) return [];
28    try { return JSON.parse(raw); } catch { return []; }
29  }
30
31  function cacheTemplate(element) {
32    const template = element.getAttribute('data-content-block-lazy-template');
33    if (template !== null) {
34      templateCache.set(element, template);
35      element.removeAttribute('data-content-block-lazy-template');
36    }
37  }
38
39  function getTemplate(element) {
40    return templateCache.get(element) ?? element.getAttribute('data-content-block-lazy-template') ?? '';
41  }
42
43  function executeScripts(element) {
44    for (const oldScript of element.querySelectorAll('script')) {
45      const newScript = document.createElement('script');
46      for (const attr of oldScript.attributes) {
47        newScript.setAttribute(attr.name, attr.value);
48      }
49      newScript.textContent = oldScript.textContent;
50      oldScript.replaceWith(newScript);
51    }
52  }
53
54  function loadLazyContentBlock(element) {
55    element.innerHTML = getTemplate(element);
56    executeScripts(element);
57    element.setAttribute('data-content-block-lazy-loaded', 'true');
58  }
59
60  function lazyLoadContentBlocks(currentMediaQuery) {
61    for (const element of getLazyBlocks()) {
62      cacheTemplate(element);
63
64      const hiddenMediaQueries = getHiddenMediaQueries(element);
65      const isHidden = hiddenMediaQueries.includes(currentMediaQuery);
66

67      if (!isHidden) {
68        loadLazyContentBlock(element);
69      }
70    }
71  }
72
73  function onBreakpointChange() {
74    lazyLoadContentBlocks(getCurrentBreakpoint());
75  }
76
77  for (const breakpoint of breakpoints) {
78    window.matchMedia(breakpoint.query).addEventListener('change', onBreakpointChange);
79  }
80
81  onBreakpointChange();
82})();