https://onyxlawfirm.com/wp-content/themes/pql40/js/global/onep21-images.js

1/* Scripts that help images
2-------------------------------------------------------------------------------- */
3(function (window,Onep21) {
4
5	// COMPONENT constants
6
7
8
9	class Images extends Onep21.core.Include {
10
11		constructor(args = {}) {
12			super(args); // construct include
13
14			// whatever you need to construct class
15		}
16
17
18		/* Setup methods/props
19		-------------------------------------------------------------------------------- */
20
21		
22			/* Class to add to body for lazyloading background images (ie responsive background images) or any image-related stuff that cant have the loading="lazy" attributes but can be in a way lazyloaded with css
23			-------------------------------------------------------------------------------- */
24				docImagesLoaded() {
25					document.documentElement.classList.add('doc-images-loaded');
26				}
27
28			/* SVGs for Style friendliness + performance readiness
29			-------------------------------------------------------------------------------- */
30				loadSVGS() {
31					const elements = document.querySelectorAll('object.inline-svg, img.inline-svg, picture.inline-svg');
32					
33					elements.forEach((img) => {
34						const svgSource = img.getAttribute('data') || img.getAttribute('src');
35				
36						if (svgSource && svgSource.split('.').pop().toLowerCase() === 'svg') {
37							const imgID = img.getAttribute('id');
38							const imgClass = img.getAttribute('class');
39					
40							fetch(svgSource)
41								.then((response) => response.text())
42								.then((data) => {
43									const parser = new DOMParser();
44									const doc = parser.parseFromString(data, 'image/svg+xml');
45									let svg = doc.querySelector('svg');
46						
47									if (!svg) return;
48						
49									if (imgID) svg.setAttribute('id', imgID);
50									if (imgClass) svg.setAttribute('class', imgClass + ' replaced-svg');
51						
52									svg.removeAttribute('xmlns:a');
53						
54									img.replaceWith(svg);
55								})
56								.catch((err) => {
57									console.error('Failed to load SVG:', svgSource, err);
58								})
59								;
60						}
61					});
62				
63					if(Onep21.core.Config.debug) console.log('svg loaded');
64					document.body.classList.add('svgs-loaded');
65				}
66
67
68
69
70		/* Setup scripts when you want to run them via Initiator
71		-------------------------------------------------------------------------------- */
72			init() {
73				// super.init(); // call include init to setup as an extension
74				const ini = this; // store this as a constant so you can use it anwywhere in this method
75
76
77				// scripts for when ready
78				Onep21.core.Initiator.addCallback('ready',(event) => {
79
80				});
81
82				// scripts for when resize
83				Onep21.core.Initiator.addCallback('resize',(event) => {
84
85				});
86
87				// scripts for when scroll
88				Onep21.core.Initiator.addCallback('scroll',(event) => {
89
90				});
91
92				// scripts for when load
93				Onep21.core.Initiator.addCallback('load',(event) => {
94					ini.docImagesLoaded();
95					ini.loadSVGS();
96				});
97			}
98
99	}
100	
101	
102	new Images();
103	
104
105})(window,Onep21);