xref: /plugin/combo/resources/snippet/js/lozad-svg-injection.js (revision 37748cd8654635afbeca80942126742f0f4cc346)
1window.addEventListener("load", function (event) {
2    // lazy loads elements with default selector as '.lozad'
3    const svgObserver = lozad('.lazy-svg-injection-combo', {
4        load: function (el) {
5            // SvgInjector leaves a src blank
6            // creating a broken image
7            // we cache the image and display it again after
8            let displayValue = el.style.getPropertyValue('display');
9            let displayPriority = el.style.getPropertyPriority('display');
10            // important is important because other css styling rule may also use it
11            el.style.setProperty('display', 'none', 'important');
12            // SVGInjector takes over and load the svg element
13            // in place of lozad
14            SVGInjector(el, {
15                    each: function (svg) {
16                        // Style copy (max width)
17                        // If any error, svg is a string with the error
18                        // Example: `Unable to load SVG file: http://doku/_media/ui/preserveaspectratio.svg`
19                        if (typeof svg === 'object') {
20                            if (el.hasOwnProperty("style")) {
21                                svg.style.cssText = el.style.cssText;
22                            }
23                            if (el.hasOwnProperty("dataset")) {
24                                let dataSet = el.dataset;
25                                if (dataSet.hasOwnProperty("class")) {
26                                    dataSet.class.split(" ").forEach(e => svg.classList.add(e));
27                                }
28                            }
29                        }
30                        // remove the none display or set the old value back
31                        if (displayValue === "") {
32                            svg.style.removeProperty("display");
33                        } else {
34                            svg.style.setProperty("display", displayValue, displayPriority);
35                        }
36                    },
37                }
38            )
39        },
40        loaded: function (el) {
41            // Custom implementation on a loaded element
42            el.classList.add('loaded-combo');
43        }
44    });
45    svgObserver.observe();
46});
47