https://skillline.ai/js/main.js

1(function ($) {
2  "use strict";
3  if (typeof Livewire !== "undefined") {
4    Livewire.on("showAlertMessage", showAlert);
5    Livewire.on("showConfirm", ConfirmationBox);
6    Livewire.on("initSummerNote", initSummerNote);
7
8    function applySelect2Prefix($select) {
9      const prefix = $select.data("prefix");
10      if (!prefix) {
11        return;
12      }
13
14      const $container = $select.next(".select2");
15      const $rendered = $container.find(".select2-selection__rendered");
16      if (!$rendered.length) {
17        return;
18      }
19
20      const $clear = $rendered.find(".select2-selection__clear").detach();
21      const valueText = $select.find("option:selected").text().trim();
22
23      $rendered
24        .empty()
25        .append($clear)
26        .append('<span class="cr-select-prefix"></span>')
27        .append('<span class="cr-select-value"></span>');
28
29      $rendered.find(".cr-select-prefix").text(prefix + " ");
30      $rendered.find(".cr-select-value").text(valueText);
31    }
32
33    Livewire.on("toggleModel", (event) => {
34      jQuery(`#${event.id}`).modal(event.action);
35    });
36
37    Livewire.on("initSelect2", (event) => {
38      const { target, timeOut = 500 } = event;
39      setTimeout(() => {
40        jQuery(event.target).each((index, item) => {
41          let _this = jQuery(item);
42          let searchable = _this.data("searchable");
43          let componentId = _this.data("componentid");
44          let modelInput = _this.data("wiremodel");
45
46          let live = _this.data("live") ?? false;
47          let component = eval(componentId);
48          let params = {
49            placeholder: _this.data("placeholder"),
50            allowClear: true,
51          };
52
53          let autoclose = _this.data("autoclose");
54          if (event.data?.length) {
55            params["data"] = event.data;
56          }
57          if (autoclose == false) {
58            params["closeOnSelect"] = false;
59          }
60
61          if (_this.data("hide_search_opt")) {
62            params["minimumResultsForSearch"] = -1;
63          }
64
65          if (_this.data("parent")) {
66            params["dropdownParent"] = jQuery(_this.data("parent"));
67          }
68
69          if (!searchable) {
70            params["minimumResultsForSearch"] = Infinity;
71          }
72          params["dropdownCssClass"] = _this.data("class");
73
74          if (_this.data("format") == "custom") {
75            params["templateResult"] = formatSelect2Option;
76            params["templateSelection"] = formatSelect2Selection;
77            params["escapeMarkup"] = function (markup) {
78              return markup;
79            };
80          }
81          if (event.reset) {
82            if (_this.data("select2")) {
83              _this.val("").trigger("change");
84              _this.select2("destroy");
85            }
86          }
87          _this.select2(params);
88          applySelect2Prefix(_this);
89          if (event.reset) {
90            _this.val(event.value ?? "").trigger("change");
91            applySelect2Prefix(_this);
92          }
93          if (_this.data("disable_onchange") != "true") {
94            _this.on("change", function (e) {
95              if (modelInput) {
96                let value = _this.select2("val");
97                component.set(modelInput, value, live);
98              }
99              applySelect2Prefix(_this);
100            });
101          }
102        });
103      }, timeOut);
104    });
105  }
106
107  jQuery(document).on("click", "#confirm-popup .am-confirm-yes", function () {
108    Livewire.dispatch(popupParams.action, { params: popupParams });
109    jQuery("#confirm-popup").modal("hide");
110  });
111
112  jQuery(document).on("click", ".am-ordersummary_close", function () {
113    jQuery(".am-ordersummary").slideUp("slow");
114  });
115
116  jQuery(document).on(
117    "click",
118    ".am-orderwrap > .am-header_user_noti",
119    function () {
120      jQuery(".am-ordersummary").slideDown();
121    },
122  );
123
124  jQuery(document).on("click", ".am-header_user_menu > a", function () {
125    jQuery(".am-header_user_menu > ul").slideToggle();
126  });
127
128  jQuery(document).on("click", ".am-notifywrap > a", function () {
129    jQuery(".am-notifywrap > .am-allnotifications").slideToggle();
130  });
131})(jQuery);
132
133let popupParams;
134
135function ConfirmationBox(params) {
136  popupParams = params;
137  let {
138    content,
139    title,
140    action,
141    icon = "delete",
142    btnOk_title = "",
143    btnCancel_title = "",
144    overrideClass = "",
145  }

145 = params;
146  jQuery("#confirm-popup .am-deletepopup_icon")
147    .not(`.am-deletepopup_icon.${icon}-icon`)
148    .remove();
149  jQuery("#confirm-popup").modal("show");
150  if (title) {
151    jQuery("#confirm-popup .am-deletepopup_title h3").text(title);
152  }
153  if (content) {
154    jQuery("#confirm-popup .am-deletepopup_title p").text(content);
155  }
156  if (btnOk_title) {
157    jQuery("#confirm-popup .am-confirm-yes").text(btnOk_title);
158  }
159  if (btnCancel_title) {
160    jQuery("#confirm-popup .am-cancel").text(btnCancel_title);
161  }
162  if (overrideClass) {
163    jQuery("#confirm-popup")
164      .removeClass("am-deletepopup")
165      .addClass(overrideClass);
166  }
167}
168
169// initialize time picker
170function initializeTimePicker() {
171  jQuery(".flat-time").each(function (index, item) {
172    let _this = jQuery(this);
173    let time_24hr = _this.data("time_24hr");
174    let config = { dateFormat: "H:i", noCalendar: true, enableTime: true };
175
176    if (time_24hr != "") {
177      config.time_24hr = time_24hr;
178    }
179    jQuery(item).flatpickr(config);
180  });
181}
182
183// initialize date picker
184function initializeDatePicker() {
185  jQuery(".flat-date").each(function (index, item) {
186    let _this = jQuery(item);
187    let dateFormat = _this.data("format");
188    let enableTime = _this.data("enable_time");
189    let time_24hr = _this.data("time_24hr");
190    let mode = _this.data("mode");
191    let disable = _this.data("disable_dates");
192    let defaultDate = _this.data("default_date");
193    let minDate = _this.data("min_date");
194    let config = { dateFormat: dateFormat };
195    if (enableTime) {
196      config.enableTime = enableTime ?? false;
197    }
198    if (mode) {
199      config.mode = mode;
200    }
201    if (time_24hr) {
202      config.time_24hr = time_24hr;
203    }
204    if (defaultDate) {
205      config.defaultDate = defaultDate;
206    }
207    if (disable) {
208      config.disable = disable;
209    }
210    if (minDate) {
211      config.minDate = minDate;
212    }
213    jQuery(item).flatpickr(config);
214  });
215}
216
217function showAlert(data) {
218  let { message, type, autoclose = 2000 } = data;
219
220  jQuery(".am-themetoast").addClass("show");
221  jQuery(".am-themetoast").removeClass("hide");
222  jQuery(".am-themetoast h6").text(message);
223  let successIcon = `
224    <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
225        <path d="M3 9.75L6.75 13.5L15 4.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
226    </svg>
227    `;
228  let errorIcon = `
229    <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
230        <path d="M0 16C0 7.16344 7.16344 0 16 0V0C24.8366 0 32 7.16344 32 16V16C32 24.8366 24.8366 32 16 32V32C7.16344 32 0 24.8366 0 16V16Z" fill="#F04438"/>
231        <path d="M11.5 20.5L20.5 11.5M11.5 11.5L20.5 20.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
232    </svg>`;
233  jQuery(".am-themetoast .am-toast-icon").html(
234    type == "success" ? successIcon : errorIcon,
235  );
236  setTimeout(() => {
237    jQuery(".am-themetoast").removeClass("show");
238    jQuery(".am-themetoast").addClass("hide");
239  }, autoclose);
240}
241
242function initSummerNote(params) {
243  const { target, wiremodel, conetent, componentId } = params;
244  jQuery(target).summernote("destroy");
245  jQuery(target).summernote(summernoteConfigs(target, jQuery(target).next()));
246  let component = eval(componentId);
247  jQuery(target).summernote("code", conetent?.length ? conetent : "");
248  setTimeout(() => {
249    charLeft(conetent?.length ?? 0, ".characters-count");
250  }, 200);
251  jQuery(target).on("summernote.change", function (we, contents, $editable) {
252    if (contents.trim() === "<br>") {
253      contents = "";
254    }
255    if (conetent?.trim()?.length != contents.length) {
256      component.set(wiremodel, contents, false);
257    }
258  });
259}
260
261function formatSelect2Option(option) {
262  if (!option.id) {
263    return option.text;
264  }
265
266  var $option = jQuery(
267    "<span>" +
268    option.text +
269    ' <span class="price">' +
270    jQuery(option.element).data("price") +
271    "</span></span>",
272  );
273
274  return $option;
275}
276
277function formatSelect2Selection(option) {
278  if (!option.id) {
279    return option.text;
280  }
281
282  var $selection = jQuery(
283    "<span>" +
284    option.text +
285    ' <span class="price">' +
286    jQuery(option.element).data("price") +
287    "</span></span>",
288  );
289
290  return $selection;
291}
292
293var charLimit = 1073741823; // Значение для longtext столбца в MySQL
294function summernoteConfigs(
295  selector = ".summernote",
296  charSelector = ".total-characters",
297) {
298  return {
299    toolbar: [
300      ["style", ["bold", "italic", "underline"]],
301      ["fontsize", ["fontsize"]],
302      ["para", ["ul", "ol"]],
303    ],
304    fontSizes: [
305      "8",
306      "9",
307      "10",
308      "11",
309      "12",
310      "14",
311      "16",
312      "18",
313      "20",
314      "22",
315      "24",
316      "26",
317      "28",
318      "30",
319      "32",
320      "36",
321      "48",
322      "64",
323    ],
324    height: 300,
325    spellCheck: true,
326    dialogsInBody: true,
327    disableDragAndDrop: true,
328    disableResizeEditor: true,
329    callbacks: {
330      onInit: function () {
331        if (jQuery(this).summernote("isEmpty")) {
332          jQuery(selector).summernote("code", "");
333          jQuery(selector).summernote("fontSize", "16");
334          charLeft(0, charSelector);
335        } else {
336          let characters = jQuery(selector)
337            .summernote("code")
338            .summernote("fontSize", "16")
339            .replace(/(<([^>]+)>)/gi, "");
340          charLeft(characters.length, charSelector);
341        }
342      },
343      onKeydown: function (e) {
344        var t = e.currentTarget.innerText;
345        charLeft(t.trim().length, charSelector);
346        if (
347          t.trim().length >= charLimit &&
348          ![8, 37, 39, 46, 65, 88, 67, 65 + 91, 88 + 91, 67 + 91].includes(
349            e.keyCode,
350          )
351        ) {
352          e.preventDefault();
353          return;
354        }
355
356        if (charSelector != ".total-characters") {
357          return;
358        }
359        if (t.trim().length >= charLimit) {
360          if (
361            e.keyCode != 8 &&
362            !(e.keyCode >= 37 && e.keyCode <= 40) &&
363            e.keyCode != 46 &&
364            !(e.keyCode == 32 && e.spaceKey) &&
365            !(e.keyCode == 88 && e.ctrlKey) &&
366            !(e.keyCode == 67 && e.ctrlKey)
367          )
368            e.preventDefault();
369        }
370      },
371      onPaste: function (e) {
372        e.preventDefault();
373        // Get plain text from clipboard
374        let bufferText = (
375          (e.originalEvent || e).clipboardData || window.clipboardData
376        ).getData("Text");
377        console.log(bufferText.length, bufferText);
378        let characters = jQuery(selector)
379          .summernote("code")
380          .replace(/(<([^>]+)>)/gi, "");
381        let totalCharacters = characters?.trim()?.length;
382        let t = e.currentTarget.innerText;
383
384        // Calculate max characters that can be pasted
385        let maxPaste = Math.min(bufferText.length, charLimit - t.length);
386        let maxText = bufferText.substring(0, maxPaste);
387        // Insert plain text at cursor position
388        if (maxPaste > 0) {
389          const selection = window.getSelection();
390          const range = selection.getRangeAt(0);
391          range.deleteContents();

392          range.insertNode(document.createTextNode(maxText));
393        }
394        let remainingChar = totalCharacters + maxText.length;
395        console.log("remainingChar", remainingChar);
396
397        charLeft(remainingChar, charSelector);
398      },
399      onCut: function (e) {
400        e.preventDefault();
401      },
402    },
403  };
404}
405
406function charLeft(contentLength = 0, charSelector) {
407  if (charSelector == ".total-characters") {
408    let charShow = charLimit - contentLength;
409    if (charShow < 0) {
410      charShow = 0;
411    }
412    let charLeftHtml = `<div class='tu-input-counter'><span>Characters left:</span><b>${charShow}</b> / <em> ${charLimit}</em></div>`;
413    jQuery(charSelector).html(charLeftHtml);
414  } else {
415    let charLeftHtml = `<div class='tu-input-counter'><span>Characters count:</span> ${contentLength}</div>`;
416    jQuery(charSelector).html(charLeftHtml);
417  }
418}
419
420function initVenobox() {
421  let venobox = document.querySelector(".tu-themegallery");
422  if (venobox !== null) {
423    return jQuery(".tu-themegallery").venobox();
424  }
425}
426
427function clearFormErrors(target) {
428  jQuery(`${target} .am-invalid`).removeClass("am-invalid");
429  jQuery(`${target} span.am-error-msg`).remove();
430}
431
432jQuery(document).on(
433  "click",
434  ".am-navigation .page-item-has-children > a",
435  function () {
436    jQuery(this).parent().children(".sub-menu").slideToggle("300");
437    jQuery(this).parent(".page-item-has-children").toggleClass("active");
438  },
439);
440
441function initJs() {
442  setTimeout(() => {
443    jQuery(".video-js").each((index, item) => {
444      let _this = jQuery(item);
445      item.onloadeddata = function () {
446        _this.closest(".am-revolutionize_video").removeClass("am-shimmer");
447        videojs(item);
448      };
449    });
450    initVenobox();
451  }, 500);
452}
453
454initJs();
455document.addEventListener("DOMContentLoaded", function () {
456  const disputeChatToggle = document.querySelector(".am-dispute-chat-toggle");
457  if (disputeChatToggle) {
458    disputeChatToggle.addEventListener("click", function () {
459      document.querySelector(".am-dispute-details").classList.toggle("show");
460    });
461  }
462  const langForm = document.querySelector(".am-switch-language.am-multi-lang");
463  const currencyForm = document.querySelector(
464    ".am-switch-language.am-multi-currency",
465  );
466  if (langForm) {
467    const langAnchor = langForm.querySelector("a.am-lang-anchor");
468    const langList = langForm.querySelector(".sub-menutwo.locale-menu");
469    const langInput = langForm.querySelector('input[name="am-locale"]');
470    langList.querySelectorAll("li")?.forEach((item) => {
471      item.addEventListener("click", function () {
472        const langText = this.querySelector("span").textContent;
473        const currentLang = langAnchor.textContent.trim();
474        if (currentLang === langText) {
475          return;
476        }
477        langAnchor.innerHTML =
478          langText + '<i class="am-icon-chevron-down"></i>';
479        langInput.value = this.dataset.lang;
480        langForm.submit();
481      });
482    });
483  }
484
485  if (currencyForm) {
486    const currencyAnchor = currencyForm.querySelector("a.am-currency-anchor");
487    const currencyList = currencyForm.querySelector(
488      ".sub-menutwo.currency-menu",
489    );
490    const currencyInput = currencyForm.querySelector(
491      'input[name="am-currency"]',
492    );
493    currencyList.querySelectorAll("li")?.forEach((item) => {
494      item.addEventListener("click", function () {
495        const langText = this.querySelector("span").textContent;
496        const currentLang = currencyAnchor.textContent.trim();
497        if (currentLang === langText) {
498          return;
499        }
500        currencyAnchor.innerHTML =
501          langText + '<i class="am-icon-chevron-down"></i>';
502        currencyInput.value = this.dataset.currency;
503        currencyForm.submit();
504      });
505    });
506  }
507
508  jQuery(() => {
509    jQuery(".sidebar-sub-menu > a").click(function () {
510      jQuery(".am-submenu").slideToggle(300);
511      jQuery(this).parent(".sidebar-sub-menu").toggleClass("am-menuopen");
512    });
513  });
514});