https://kaspy.io/assets/js/generator/animations.js?ver=3.0

1let closeDropDownListener;
2
3const loader = $('#meme-generator-loader');
4const generatorBlockEl = $("#meme-generator-block")
5
6
7export function enableLoader() {
8    loader.css('display', 'flex')
9    generatorBlockEl.css('display', 'none')
10}
11
12export function disableLoader() {
13    loader.css('display', 'none')
14    generatorBlockEl.css('display', 'flex')
15}
16
17
18/**
19 * Для dropDown menu
20 */
21$(".dropdown-item").on('click', function (event) {
22    event.stopPropagation(); // зупиняємо поширення події, щоб не спрацьовував глобальний клік
23
24    if (!$(event.target).closest('.content').length) {
25        if ($(this).hasClass('active')) {
26            $(this).removeClass('active');
27            $(window).off('click', closeDropDownListener); // знімаємо обробник
28        } else {
29            $(".dropdown-item").removeClass('active');
30            $(this).addClass('active');
31
32            // Додаємо обробник для закриття при кліку поза елементом
33            closeDropDownListener = $(window).on('click', function () {
34                $(".dropdown-item").removeClass('active');
35                $(window).off('click', closeDropDownListener); // знімаємо обробник після закриття
36            });
37        }
38    }
39});
40
41
42/**
43 * Інпут для для завантаженя кастомного бекграунду
44 */
45$("#generator-background-file-input").on('change', function () {
46    const fullPath = $(this).val();
47    const fileName = fullPath.split('\\').pop().split('/').pop();
48    const submitButton = $("#generator-background-file-submit");
49    const removeButton = $("#generator-background-file-remove")
50
51    if (fileName) {
52        // Якщо файл вибрано, вставляємо його назву
53        $("#generator-background-file-tag").text(fileName);
54        // Знімаємо клас disabled та атрибут disabled з кнопки
55        submitButton.removeClass('disabled');
56        submitButton.removeAttr('disabled');
57        removeButton.removeClass('disabled');
58        removeButton.removeAttr('disabled');
59    } else {
60        // Якщо файл не вибрано, вставляємо SVG
61        $("#generator-background-file-tag").html(`
62            <svg style="width: 30px; height: 30px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
63                <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/>
64            </svg>
65        `);
66        // Додаємо клас disabled і атрибут disabled до кнопки
67        submitButton.addClass('disabled');
68        submitButton.attr('disabled', 'disabled');
69    }
70});
71
72/**
73 * Візуально видалити фото бекграунду
74 */
75export function removeBackgroundImageVisual() {
76    const photoInput = $("#generator-background-file-input");
77    const removeButton = $("#generator-background-file-remove")
78
79    photoInput[0].value = null;
80    $("#generator-background-file-tag").html(`
81        <svg style="width: 30px; height: 30px" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-2">
82            <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5m-13.5-9L12 3m0 0 4.5 4.5M12 3v13.5"/>
83        </svg>
84    `);
85    const submitButton = $("#generator-background-file-submit");
86    submitButton.addClass('disabled');
87    submitButton.attr('disabled', 'disabled');
88    removeButton.addClass('disabled');
89    removeButton.attr('disabled', 'disabled');
90}
91
92
93/**
94 * Прокручування slick
95 */
96$(document).ready(function () {
97    const owl = $('#generator-memes-list');
98
99    // Ініціалізація Owl Carousel з автопрокруткою
100    owl.owlCarousel({
101        items: 4,
102        loop: true,
103        margin: 10,
104        autoplay: true,
105        autoplayTimeout: 2000,
106        autoplayHoverPause: true,
107        nav: true,
108        responsive: {
109            0: {
110                items: 2
111            },
112            768: {
113                items: 4
114            }
115        }
116    });
117
118    let lightbox = GLightbox({});
119
120    lightbox.on('open', function () {
121        owl.trigger('stop.owl.autoplay');
122    });
123
124    lightbox.on('close', function () {
125        owl.trigger('play.owl.autoplay');
126    });
127
128    $('.play').on('click', function () {
129        owl.trigger('play.owl.autoplay', [1000]);
130    });
131
132    $('.stop').on('click', function () {
133        owl.trigger('stop.owl.autoplay');
134    });
135
136
137    /*
138     * ========================
139     * Part with download and copy
140     * ========================
141     */
142    const downloadPhotoHiddenLink = $("#download-big-photo-btn");
143    const copyPhotoHiddenLink = $("#copy-big-photo-btn");
144    const copyPhotoHiddenLinkInput = $("#copy-big-photo-btn-input");
145    lightbox.on("slide_changed", ({current, prev}) => {
146        let imageElement = $(".gslide.loaded.current").find('img');
147
148        const imageSrc = imageElement.attr('src'); // Отримання значення src атрибута
149        const linkForDownloadImage = `https://kaspy.io/memes/download?url=${imageSrc}`;
150        //
151        downloadPhotoHiddenLink.css("display", "block");
152        downloadPhotoHiddenLink.attr("href", linkForDownloadImage);
153        copyPhotoHiddenLink.css("display", "flex");
154        copyPhotoHiddenLinkInput.val(imageSrc)
155    });
156
157    lightbox.on("close", () => {
158        downloadPhotoHiddenLink.css("display", "none");
159        copyPhotoHiddenLink.css("display", "none");
160    });
161});
162
163/**
164 * Засвітити помилку
165 * @param elId
166 * @param text
167 * @param time
168 */
169export function showElementErrorForTimeOut(elId, text = 'Error', time = 3000) {
170    const errorEl = $(`#${elId}`);
171    errorEl.text(text);
172    errorEl.addClass('active'); // Додаємо клас 'active'
173
174    setTimeout(() => {
175        errorEl.removeClass('active'); // Прибираємо клас через заданий час
176    }, time);
177}
178
179
180/**
181 * for first enable all elements
182 * Check array and disable new elements
183 */
184export function disableBlockOnNonCompatibleElements(elementsForDisableArray, blockAllElements = false) {
185    /** Enable all elements */
186    const allElements = $(".item-btn");
187    /** Remove disable class */
188    allElements.removeClass('disable-element');
189
190
191    /**
192     * Check if we need to block all elements
193     * If we should block all elements, then we need to block all elements with index >= 50
194     * Because all elements with index >= 50 are custom items elements
195     * */
196    $('.generator-item-hide-element').removeClass('hidden');
197    if (blockAllElements) {
198        $('.generator-item-hide-element').addClass('hidden');
199    }
200
201    /** Disable elements */
202    elementsForDisableArray.forEach((element) => {
203        const elementElClass = "generator-item-draw-pair-" + element[0] + "-" + element[1];
204        const elementEl = $(`.${elementElClass}`);
205        elementEl.addClass('disable-element');
206    });
207}
208
209/*
210 * Change font text animation
211 */

212// export function changeFontTextAnimation(fontElement) {
213//     $(".fonts-btns-group").find('.button').removeClass('active')
214//     $(fontElement).addClass("active");
215// }
216
217export function changeFontTextAnimation(fontId) {
218    $(".fonts-btns-group").find('.button').removeClass('active')
219    const elementId = "#generator-text-font-choose-btn-" + fontId;
220    $(elementId).addClass("active");
221}