https://zoloblocks.com/wp-content/themes/axvart/assets/js/image-filter-frontend.js?ver=1.0.5

1/**
2 * Axvart Image Filter Frontend
3 *
4 * This file handles the frontend functionality for image filters.
5 * It processes filter attributes and applies them to images.
6 *
7 * @package Axvart
8 * @since 1.0.0
9 */
10
11(function() {
12    'use strict';
13    document.addEventListener("DOMContentLoaded", () => {
14      document
15        .querySelectorAll("[data-axvart-filter]")
16        .forEach((block) => {
17          try {
18            const {
19              blur,
20              brightness,
21              contrast,
22              grayscale,
23              hueRotate,
24              invert,
25              saturate,
26              sepia,
27              opacity,
28            } = JSON.parse(
29              block.getAttribute("data-axvart-filter") || "{}"
30            );
31
32            const filterString = `blur(${blur}px) brightness(${brightness}) contrast(${contrast}) grayscale(${grayscale}) hue-rotate(${hueRotate}deg) invert(${invert}) saturate(${saturate}) sepia(${sepia}) opacity(${opacity})`;
33
34            block.querySelector('img').style.filter = filterString;
35            block.querySelector('img').style.opacity = opacity;
36          } catch (error) {
37            console.error("Invalid wrapper link settings", error);
38          }
39        });
40    });
41
42})();