https://pmpractice.ru/local/templates/main/js/custom.js

1document.addEventListener("DOMContentLoaded", () => {
2  // îòêðûòèå/çàêðûòèå ôîðìû êîíñóëüòàöèè
3  const jsConsultationBtn = document.querySelectorAll(".js-consultation");
4  const popupConsultation = document.querySelector(".popupConsultation");
5
6  let currentPopupConsultationTitle = "Ïîëó÷èòü êîíñóëüòàöèþ";
7  let observer;
8
9  const setPopupConsultationTitle = (title = currentPopupConsultationTitle) => {
10    currentPopupConsultationTitle = title;
11
12    if (observer) {
13      observer.disconnect();
14    }
15
16    popupConsultation
17      .querySelectorAll(".popupFormConsultation-title")
18      .forEach((titleEl) => {
19        if (titleEl.textContent !== title) {
20          titleEl.textContent = title;
21        }
22      });
23
24    if (observer) {
25      observer.observe(popupConsultation, {
26        childList: true,
27        subtree: true,
28      });
29    }
30  };
31
32  observer = new MutationObserver(() => {
33    setPopupConsultationTitle();
34  });
35
36  observer.observe(popupConsultation, {
37    childList: true,
38    subtree: true,
39  });
40
41  const overlay = popupConsultation.querySelector(".overlay");
42  const jsConsultationClosed = popupConsultation.querySelector(
43    ".popupFormConsultation-closed",
44  );
45  const popupFormConsultationSubmit = popupConsultation.querySelector(
46    ".popupFormConsultation-submit",
47  );
48
49  const allInputsInConsultationForm = document.querySelectorAll(
50    ".popupFormConsultation-input, .popupFormConsultation-select",
51  );
52  if (window.FormMetrics) {
53    const metrics = new window.FormMetrics();
54    metrics.add({
55      root: popupConsultation,
56      events: ["input", "change"],
57      target: ".popupFormConsultation-input, .popupFormConsultation-select",
58      goal: "UKC_FORM_START",
59      once: true,
60    });
61  }
62
63  const clearEmptyClassFromConsultationInput = () => {
64    for (let el of allInputsInConsultationForm) {
65      el.classList.remove("popupFormConsultation-input-empty");
66    }
67  };
68  const checkValidity = () => {
69    for (let el of allInputsInConsultationForm) {
70      if (el.value === "" && el.required && el) {
71        el.classList.add("popupFormConsultation-input-empty");
72      } else {
73        el.classList.remove("popupFormConsultation-input-empty");
74      }
75    }
76  };
77  jsConsultationBtn.forEach((el) => {
78    el.addEventListener("click", () => {
79      const popupConsultationTitle =
80        el.dataset.consultationTitle || "Ïîëó÷èòü êîíñóëüòàöèþ";
81      const popupConsultationSelectDefaultOptionText =
82        el.dataset.consultationSelectDefaultOptionText || null;
83      const popupConsultationSubmitText =
84        el.dataset.consultationSubmitText || "Îòïðàâèòü çàÿâêó";
85
86      popupConsultation.classList.add("active");
87
88      setPopupConsultationTitle(popupConsultationTitle);
89      popupFormConsultationSubmit.value = popupConsultationSubmitText;
90
91      if (popupConsultationSelectDefaultOptionText) {
92        const consultationSelect = popupConsultation.querySelector(
93          ".popupFormConsultation-select",
94        );
95
96        if (consultationSelect) {
97          consultationSelect.value = popupConsultationSelectDefaultOptionText;
98          consultationSelect.dispatchEvent(new Event("change"));
99        }
100      }
101    });
102  });
103
104  overlay.addEventListener("click", () => {
105    popupConsultation.classList.remove("active");
106    clearEmptyClassFromConsultationInput();
107  });
108  jsConsultationClosed.addEventListener("click", (e) => {
109    e.preventDefault();
110    popupConsultation.classList.remove("active");
111    clearEmptyClassFromConsultationInput();
112  });
113  // const allInputsInConsultationForm = consultationForm.elements;
114  popupFormConsultationSubmit?.addEventListener("click", () => {
115    checkValidity();
116    // preloader();
117  });
118
119  // îòêðûòèå/çàêðûòèå ïîäñêàçêè â ôîðìå
120  const hoverSelectIcon = popupConsultation.querySelector(
121    ".hoverSelect-info--icon",
122  );
123  const popupFormConsultationInfo = popupConsultation.querySelector(
124    ".popupFormConsultation-select--info",
125  ); //(popupConsultation.querySelector('.popupFormConsultation-select--info')) ? popupConsultation.querySelector('.popupFormConsultation-select--info') : '';
126  const popupFormConsultationInfoClosed = popupConsultation.querySelector(
127    ".popupFormConsultation-select--info_closed",
128  ); //(popupConsultation.querySelector('.popupFormConsultation-select--info_closed')) ? popupConsultation.querySelector('.popupFormConsultation-select--info_closed') : '';
129  hoverSelectIcon?.addEventListener("click", () => {
130    popupFormConsultationInfo.classList.add("active");
131  });
132  popupFormConsultationInfoClosed?.addEventListener("click", () => {
133    popupFormConsultationInfo.classList.remove("active");
134  });
135
136  // ïðåëîàäåð
137  let preloader = () => {
138    let body = document.querySelector("body");
139    let preload = document.createElement("div");
140    preload.classList.add("preloaderView");
141    preload.innerHTML = `
142        <div class="preloaderView_block">
143            <div class="main_preloader">
144            </div>
145            <div class="preloader_ball-one">
146            </div>
147            <div class="preloader_ball-two">
148            </div>
149            <div class="preloader_ball-three">
150            </div>
151        </div>
152        `;

153    body.append(preload);
154    let setInvisible = () => {
155      preload.remove();
156    };
157    setTimeout(setInvisible, 2000);
158  };
159  // êîíåö ïðåëîàäåð
160
161  /*
162  const popupConsultationSuccess = document.querySelector('.popupConsultation-success');
163  const succesOverlay = popupConsultationSuccess.querySelector('.overlay');
164  const succesClosedBtn = popupConsultationSuccess.querySelector('.popupFormConsultation-closed');
165  succesOverlay.addEventListener('click', () => {
166      popupConsultationSuccess.classList.remove('open');
167  });
168  succesClosedBtn.addEventListener('click', () => {
169      popupConsultationSuccess.classList.remove('open');
170  });*/
171  // фиксация поля с содержанием на странице типа стратья
172  if (document.querySelector(".contentNav")) {
173    let element = document.querySelector(".contentNav");
174    window.addEventListener("scroll", function () {
175      if (window.scrollY > 100) {
176        element.classList.add("pdd");
177      } else {
178        element.classList.remove("pdd");
179      }
180    });
181  }
182});
183
184BX.ready(function () {
185  BX.bindDelegate(
186    document.body,
187    "submit",
188    { className: "search-form" },
189    function (e) {
190      if (!e) {
191        e = window.event;
192      }
193
194      var form = new FormData(this);
195      var formData = form.get("search");
196      var formDataFormat = null;
197      if (form.get("format").length > 0) {
198        formDataFormat = form.get("format");
199      }
200
201      console.log(formData);
202
203      getFilter(formData, formDataFormat);
204
205      return BX.PreventDefault(e);
206    },
207  );
208
209  function getFilter(search_string, search_format = null) {
210    let ajaxUrl;
211
212    ajaxUrl = "/training/programs/ajax.php";
213
214    formData = {
215      search_string: search_string,
216      format: search_format,
217    };
218    // console.log(formData);
219    // console.log(search_format);
220
221    BX.ajax({
222      url: ajaxUrl,
223      data: formData,
224      method: "POST",
225      dataType: "html",
226      timeout: 30,
227      async: true,
228      processData: true,
229      scriptsRunFirst: true,
230      emulateOnload: true,
231      start: true,
232      cache: false,
233      onsuccess: function (data) {
234        if (data.length > 0) {
235          // console.log(data);
236          // let container = document.querySelector('#infoBlock__programms');
237          let container = document.querySelector("#main__programms");
238
239          container.innerHTML = "";
240          container.innerHTML = data;
241        }
242      },
243      onfailure: function () {
244        // console.log(data);
245      },
246    });
247  }
248});