https://tigalab.id/wp-content/plugins/bwd-filterable-gallery/assets/public/js/main.js?ver=1.0.0

1(function ($) {
2  "use strict";
3  $(window).on("elementor/frontend/init", function () {
4    elementorFrontend.hooks.addAction(
5      "frontend/element_ready/NameFilterableGallery.default",
6      function ($scope) {
7        // gellary-image-animation
8        // $(".snake").snakeify({
9        //   speed: 200,
10        // });
11
12        $(document).ready(function() {
13          $('.bwdfg-grid-common').magnificPopup({
14            type:'image',
15            delegate:'a',
16            gallery:{
17              enabled:true
18            }
19          });
20        });
21
22      }
23    );
24  });
25})(jQuery);
26
27
28//filterable gallery
29("use strict");
30function filteringGallery(imgGallery) {
31  let filterBtns = imgGallery.querySelectorAll(
32    ".bwdfg-my-commonsk-class .bwdfg-menu-item"
33  );
34  let galleryImg = imgGallery.querySelectorAll(
35    ".bwdfg-grid-common .bwdfg-grid-item"
36  );
37
38  let itemPadding = getComputedStyle(galleryImg[0],null).getPropertyValue("padding");
39
40  for (let btn of filterBtns) {
41    // add click event to btn
42    btn.addEventListener("click", () => {
43      // add or remove button active class
44      (function addRemoveBtnActiveClass() {
45        for (let btnItem of filterBtns) {
46          btnItem.classList.remove("active");
47        }
48        btn.classList.add("active");
49      })();
50
51      // get clicked button data-filter value
52      let filterValue = btn.getAttribute("data-filter");
53
54      //gallery img filtering by filter value
55      (function checkingImgFiltering() {
56
57        // adding Active Class to img
58        function addingImgActiveClass(addItem) {
59          addItem.style.padding = itemPadding;
60          addItem.classList.add("bwdfg-img-galleryItem-active");
61        }
62        for (let imgItem of galleryImg) {
63          // checking padding if img item has
64       
65          if (filterValue == "*") {
66            addingImgActiveClass(imgItem);
67          } else if (imgItem.classList.contains(filterValue)) {
68            // removing img active class
69            (function removingImgActiveClass() {
70              for (let imgSingleItem of galleryImg) {
71                if (!imgSingleItem.classList.contains(filterValue)) {
72                  imgSingleItem.style.padding = "0";
73                  imgSingleItem.style.maxWidth = "0";
74                  imgSingleItem.classList.remove("bwdfg-img-galleryItem-active");
75                }
76              }
77            })();
78            addingImgActiveClass(imgItem);
79          }
80        }
81      })();
82    });
83  }
84}
85
86//all galleryFilter player
87const galleryFilterPlayer = () => {
88  let allgalleryFilterCommon = document.querySelectorAll(".bwdfg-gallery-filtering-common");
89  for (item of allgalleryFilterCommon) {
90    filteringGallery(item);
91  }
92};
93
94
95// editMode active or not
96let bwdfgGalleryFilteringEditModeObserver = (getEditMode) => {
97  // elementor render observing
98  const bwdfgGalleryFilteringObserver = new MutationObserver((mutations) => {
99    mutations.map((record) => {
100      if (record.addedNodes.length) {
101        record.addedNodes.forEach((singleItem) => {
102          if (singleItem.nodeName == "DIV") {
103            if (singleItem.querySelector(".bwdfg-gallery-filtering-common")) {
104              let observedItem = singleItem.querySelector(".bwdfg-gallery-filtering-common");
105              filteringGallery(observedItem);
106            }
107          }
108        });
109      }
110    });
111  });
112
113  bwdfgGalleryFilteringObserver.observe(getEditMode, {
114    subtree: true,
115    childList: true,
116  });
117};
118// edit mode checker
119(() => {
120  let bwdfgMyInterValId;
121  if (
122    document.querySelector(".elementor-edit-area") ||
123    document.querySelector(".bwdfg-gallery-filtering-common")
124  ) {
125    galleryFilterPlayer();
126  } else {
127    bwdfgMyInterValId = setInterval(() => {
128      let bwdfgElementorEditArea = document.querySelector(".elementor-edit-area");
129      if (bwdfgElementorEditArea) {
130        clearInterval(bwdfgMyInterValId);
131        // play ===============
132        bwdfgGalleryFilteringEditModeObserver(bwdfgElementorEditArea);
133      }
134    }, 300);
135  }
136})()
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159// is galleryFilter active or not
160// (() => {
161//   let intervalId;

162//   if (document.querySelector(".bwdfg-gallery-filtering-common")) {
163//     galleryFilterPlayer();
164//   } else {
165//     intervalId = setInterval(() => {
166//       let galleryFilterCommon = document.querySelector(
167//         ".bwdfg-gallery-filtering-common"
168//       );
169//       if (galleryFilterCommon) {
170//         clearInterval(intervalId);
171//         // play galleryFilter================
172//         galleryFilterPlayer();
173//       }
174//     }, 100);
175//   }
176// })();