@alexsab-ru/scripts 0.13.0 → 0.14.0

package/lib/fixed_analytics.js

@@ -0,0 +1,240 @@
+import { sendToCallTouch } from './calltouch';
+
+window.dataLayer = window.dataLayer || [];
+
+export function reachGoal(eventAction, t = {}) {
+    t.eventAction = eventAction;
+    if(isGTMInstalled()) {
+        dl("reachGoal-"+eventAction, {
+            ...t
+        })
+    } else {
+        if(checkGA4InDataLayer()) {
+            gGoal(eventAction, {
+                ...t
+            });
+        }
+        if(window.ct && window.calltouch_params) {
+            t.siteId = window.calltouch_params.site_id;
+            console.log("sendToCallTouch:", t);
+            sendToCallTouch(t)
+            .then(result => {
+                console.log('Данные успешно отправлены в колтач:', eventAction, result);
+            })
+            .catch(error => {
+                console.error('Ошибка при отправке данных в колтач:', eventAction, error);
+            });
+            window.ct(window.calltouch_params.mod_id, 'goal', eventAction);
+        }
+        ymGoal(eventAction, {
+            ...t
+        });
+    }
+}
+
+export function pageView(eventAction, t = {}) {
+    t.eventAction = eventAction;
+    if(isGTMInstalled()) {
+        dl("pageView-"+eventAction, {
+            ...t
+        })
+    } else {
+        if(checkGA4InDataLayer()) {
+            gGoal(eventAction, {
+                ...t
+            });
+        }
+        ymPage(eventAction, {
+            ...t
+        });
+    }
+}
+
+export function dl(event, t = {}) {
+    if (typeof window !== 'undefined' && window.dataLayer && Array.isArray(window.dataLayer)) {
+        window.dataLayer.push({
+            event: event,
+            ...t
+        });
+    }
+}
+
+export function getFormDataObject(formData, form_id) {
+    let eventProperties = {};
+    formData.forEach((value, key) => (eventProperties[key] = value));
+    eventProperties['formID'] = form_id;
+    return {
+        "eventProperties": eventProperties,
+        "eventCategory": "Lead",
+        "sourceName": "page",
+    };
+}
+
+export function gGoal(goalName, goalParams) {
+    try {
+        dl(goalName, goalParams)
+    } catch (err) {
+        console.error(goalName + ' - error send goal to Google Analytics:', err);
+    }
+}
+
+// Универсальная функция для обработки Yandex Metrika целей
+function executeYandexMetrikaAction(actionType, name, params = {}) {
+    try {
+        if (typeof Ya !== 'undefined' && Ya._metrika && Ya._metrika.getCounters) {
+            Ya._metrika.getCounters().forEach((counter) => {
+                if (counter && counter.id) {
+                    ym(counter.id, actionType, name, params);
+                }
+            });
+        }
+    } catch (err) {
+        console.error(`${name} - error send ${actionType} to Metrika:`, err);
+    }
+}
+
+export function ymGoal(goalName, goalParams = {}) {
+    executeYandexMetrikaAction("reachGoal", goalName, goalParams);
+}
+
+export function ymPage(pageName, goalParams = {}) {
+    executeYandexMetrikaAction("hit", pageName, goalParams);
+}
+
+export function addClickCopyContextmenuGoals(item, prefix) {
+    if (!item || !prefix) return;
+    
+    const events = [
+        { event: 'click', suffix: '_click' },
+        { event: 'copy', suffix: '_copy' },
+        { event: 'contextmenu', suffix: '_contextmenu' }
+    ];
+    
+    events.forEach(({ event, suffix }) => {
+        item.addEventListener(event, function(evt) {
+            reachGoal(prefix + suffix);
+        });
+    });
+}
+
+// Безопасная инициализация событий
+function initializeEventListeners() {
+    // Телефонные ссылки
+    const phoneLinks = document.querySelectorAll('a[href^="tel:"]');
+    phoneLinks.forEach((tel) => {
+        addClickCopyContextmenuGoals(tel, "phone");
+    });
+
+    // Email ссылки  
+    const emailLinks = document.querySelectorAll('a[href^="mailto:"]');
+    emailLinks.forEach((email) => {
+        addClickCopyContextmenuGoals(email, "email");
+    });
+
+    // Цели для форм
+    const goals = [
+        {
+            selector: 'form input',
+            action: 'click',
+            goal: 'form_click',
+            title: 'Клик в поле любой формы',
+        },
+        {
+            selector: 'form input',
+            action: 'change',
+            goal: 'form_change',
+            title: 'Изменения полей любой формы',
+        },
+    ];
+
+    goals.forEach(function(goalConfig) {
+        if (!goalConfig.goal && !goalConfig.hit) {
+            console.warn("Ошибка в списке целей", goalConfig);
+            return;
+        }
+        
+        const elements = document.querySelectorAll(goalConfig.selector);
+        elements.forEach(function(element) {
+            if (goalConfig.goal) {
+                element.addEventListener(goalConfig.action, function(){
+                    reachGoal(goalConfig.goal, {
+                        title: goalConfig.title,
+                    });
+                });
+            } else if (goalConfig.hit) {
+                element.addEventListener(goalConfig.action, function(){
+                    pageView(goalConfig.hit, {
+                        title: goalConfig.title,
+                    });
+                });
+            }
+        });
+    });
+}
+
+function isGTMInstalled() {
+    // Кешируем результат для избежания повторных вычислений
+    if (typeof window.isGTMInstalled === 'boolean') {
+        return window.isGTMInstalled;
+    }
+
+    // Проверяем dataLayer
+    if (window.dataLayer && 
+        Array.isArray(window.dataLayer) && 
+        window.dataLayer.length > 0 && 
+        window.dataLayer[0] && 
+        window.dataLayer[0].event === "gtm.js") {
+        window.isGTMInstalled = true;
+        return true;
+    }
+
+    // Проверяем скрипты
+    const scripts = document.querySelectorAll('script[src*="gtm.js"]');
+    if (scripts.length > 0) {
+        window.isGTMInstalled = true;
+        return true;
+    }
+
+    window.isGTMInstalled = false;
+    return false;
+}
+
+function checkGA4InDataLayer() {
+    // Кешируем результат
+    if (typeof window.ga4Installed === 'boolean') {
+        return window.ga4Installed;
+    }
+
+    // Проверяем dataLayer на наличие GA4 конфигурации
+    if (window.dataLayer && Array.isArray(window.dataLayer)) {
+        const ga4Config = window.dataLayer.find(item =>
+            Array.isArray(item) &&
+            item.length >= 2 && 
+            item[0] === 'config' && 
+            typeof item[1] === 'string' && 
+            item[1].startsWith('G-')
+        );
+
+        if (ga4Config) {
+            window.ga4Installed = true;
+            return true;
+        }
+    }
+
+    // Проверяем скрипты gtag.js
+    const scripts = document.querySelectorAll('script[src*="gtag.js"]');
+    if (scripts.length > 0) {
+        window.ga4Installed = true;
+        return true;
+    }
+
+    window.ga4Installed = false;
+    return false;
+}
+
+// Инициализация после загрузки DOM
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initializeEventListeners);
+} else {
+    initializeEventListeners();
+}

package/lib/fixed_form.js

@@ -0,0 +1,443 @@
+import { getCookie, setCookie, deleteCookie } from './cookie';
+import { createRequest } from './calltouch';
+import { reachGoal, getFormDataObject } from './analytics';
+
+export const noValidPhone = (phoneValue) => {
+    return ([...new Set(phoneValue.replace(/^(\+7)/g, "").replace(/\D/g, ""))].length === 1);
+};
+
+// Debounce функция для ограничения частоты вызовов
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+export function maskphone(e) {
+    const input = e.target || this;
+    if (!input || !input.value) return;
+    
+    let num = input.value.replace(/^(\+7|8|7)/g, "").replace(/\D/g, "").split(/(?=.)/);
+    let i = num.length;
+
+    if (input.value !== "" && input.value !== "+") {
+        if (0 <= i) num.unshift("+7");
+        if (1 <= i) num.splice(1, 0, " ");
+        if (4 <= i) num.splice(5, 0, " ");
+        if (7 <= i) num.splice(9, 0, "-");
+        if (9 <= i) num.splice(12, 0, "-");
+        input.value = num.join("");
+    }
+}
+
+// Debounced версия маски телефона
+const debouncedMaskphone = debounce(maskphone, 100);
+
+export const phoneChecker = (phone) => {
+    if (!phone) return false;
+    
+    let form = phone.closest("form");
+    if (!form) return false;
+    
+    if (!phone.value.length) {
+        showErrorMes(form, ".phone", "Телефон является обязательным полем");
+        return false;
+    } else {
+        const phoneRe = new RegExp(/^\+7 [0-9]{3} [0-9]{3}-[0-9]{2}-[0-9]{2}$/);
+        if (!phoneRe.test(phone.value) || noValidPhone(phone.value)) {
+            showErrorMes(form, ".phone", "Введен некорректный номер телефона");
+            return false;
+        }
+    }
+    showErrorMes(form, ".phone", "");
+    return true;
+};
+
+// TEXTAREA
+const minLengthTextareaField = 10;
+
+const checkTextareaLength = (textarea, minLength) => {
+    if (!textarea) return;
+    
+    if (textarea.value.length >= minLength) {
+        const errorElement = textarea.nextSibling?.nextElementSibling;
+        if (errorElement && errorElement.classList) {
+            errorElement.classList.add("hidden");
+        }
+    }
+};
+
+// BUTTON
+const stateBtn = (btn, value, disable = false) => {
+    if (!btn) return;
+    
+    if (btn.tagName === 'INPUT') {
+        btn.value = value;
+        btn.disabled = disable;
+    } else {
+        btn.textContent = value; // Используем textContent вместо innerText для безопасности
+        if (disable) {
+            btn.setAttribute('disabled', true);
+        } else {
+            btn.removeAttribute('disabled');
+        }
+    }
+};
+
+export const showErrorMes = (form, el, text) => {
+    if (!form || !el) return;
+    
+    let field = form.querySelector(el);
+    if (field) {
+        field.textContent = text; // Используем textContent для безопасности
+        field.classList.remove("hidden");
+    }
+};
+
+export const showMessageModal = (messageModal, icon, message) => {
+    document.querySelectorAll(".modal-overlay").forEach((el) => {
+        el.classList.add("hidden");
+    });
+    
+    if (messageModal) {
+        const iconElement = messageModal.querySelector("#icon");
+        const messageElement = messageModal.querySelector("p");
+        
+        if (iconElement) iconElement.innerHTML = icon; // SVG можно вставлять через innerHTML
+        if (messageElement) messageElement.textContent = message; // Текст только через textContent
+        
+        messageModal.classList.remove("hidden");
+    }
+};
+
+const propsParams = {
+    callback: null,
+    callback_error: null,
+    validation: null,
+    ct_routeKey: '',
+    confirmModalText: '',
+    verbose: false,
+    agreeSelector: "agree",
+    sendMailCookie: "SEND_MAIL",
+}
+
+export const errorIcon = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><path fill="#ed1c24" d="M26,0A26,26,0,1,0,52,26,26,26,0,0,0,26,0Zm9.6,17.5a1.94,1.94,0,0,1,2,2,2,2,0,1,1-2-2Zm-19.2,0a1.94,1.94,0,0,1,2,2,2,2,0,1,1-2-2ZM39.65,40.69a.93.93,0,0,1-.45.11,1,1,0,0,1-.89-.55,13.81,13.81,0,0,0-24.62,0,1,1,0,1,1-1.78-.9,15.8,15.8,0,0,1,28.18,0A1,1,0,0,1,39.65,40.69Z"></path></svg>';
+export const successIcon = '<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><path fill="#279548" d="M26,0A26,26,0,1,0,52,26,26,26,0,0,0,26,0Zm9.6,17.5a1.94,1.94,0,0,1,2,2,2,2,0,1,1-2-2Zm-19.2,0a2,2,0,1,1-2,2A2,2,0,0,1,16.4,17.5ZM40.09,32.15a15.8,15.8,0,0,1-28.18,0,1,1,0,0,1,1.78-.9,13.81,13.81,0,0,0,24.62,0,1,1,0,1,1,1.78.9Z"></path></svg>';
+export const errorText = 'Упс! Что-то пошло не так. Перезагрузите страницу и попробуйте снова.';
+export const successText = 'Спасибо! В скором времени мы свяжемся с Вами!';
+export const messageModal = document.getElementById("message-modal");
+
+// Валидация входных данных
+function sanitizeInput(input) {
+    if (typeof input !== 'string') return '';
+    return input.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '');
+}
+
+// Функция для безопасной обработки FormData
+function processFormData(formData, form) {
+    // Добавляем URL страницы
+    formData.append("page_url", window.location.origin + window.location.pathname);
+
+    // Проверяем куки fta
+    const ftaCookie = getCookie('fta');
+    if (ftaCookie) {
+        formData.append("fta", true);
+    }
+
+    // Обрабатываем GTM campaign URL
+    const campaignUrl = getCookie('__gtm_campaign_url');
+    if (campaignUrl) {
+        try {
+            const source = new URL(campaignUrl);
+            const searchParams = new URLSearchParams(source.search);
+            searchParams.forEach((value, key) => {
+                formData.append(key, sanitizeInput(value));
+            });
+        } catch (error) {
+            console.warn('Invalid campaign URL:', error);
+        }
+    }
+
+    // Добавляем re если существует
+    if (typeof window.re !== 'undefined') {
+        formData.append("re", sanitizeInput(window.re));
+    }
+
+    // Обрабатываем URL параметры
+    const urlParams = new URLSearchParams(window.location.search);
+    urlParams.forEach((value, key) => {
+        const sanitizedValue = sanitizeInput(decodeURIComponent(value));
+        if (formData.has(key)) {
+            formData.set(key, sanitizedValue);
+        } else {
+            formData.append(key, sanitizedValue);
+        }
+    });
+
+    return formData;
+}
+
+async function submitForm(form) {
+    if (!form) return false;
+    
+    const btn = form.querySelector('[type="submit"]');
+    const btnText = (btn && (btn.value || btn.textContent)) || 'Отправить';
+    const agree = form.querySelector('[name="' + props.agreeSelector + '"]');
+    const phone = form.querySelector('[name="phone"]');
+    const name = form.querySelector('[name="name"]');
+    const dealer = form.querySelector('[name="dealer"]');
+
+    if (!phoneChecker(phone)) {
+        return false;
+    }
+
+    if (dealer && dealer.hasAttribute('required')) {
+        if (!dealer.value) {
+            showErrorMes(form, '.dealer', 'Выберите дилерский центр');
+            return false;
+        }
+    }
+
+    if (props.validation && typeof props.validation === 'function') {
+        try {
+            const validationResult = props.validation(form);
+            if (validationResult === false) {
+                return false;
+            }
+        } catch (error) {
+            console.error('Validation error:', error);
+            return false;
+        }
+    }
+
+    if (!agree || !agree.checked) {
+        showErrorMes(form, "." + props.agreeSelector, "Чтобы продолжить, установите флажок");
+        return false;
+    }
+
+    stateBtn(btn, "Отправляем...", true);
+
+    // Отправка цели что форма submit только после всех проверок
+    reachGoal("form_submit");
+
+    let formData = new FormData(form);
+    let sendMailCookie = props.sendMailCookie;
+    
+    if (formData.get('dealer')) {
+        sendMailCookie += "_" + formData.get('dealer');
+    }
+
+    // Обрабатываем FormData безопасно
+    formData = processFormData(formData, form);
+
+    let formDataObj = {};
+    
+    // Обработка CallTouch
+    try {
+        if (props.ct_routeKey && props.ct_routeKey.trim() !== '') {
+            const phoneValue = phone ? phone.value : '';
+            const nameValue = name ? name.value : '';
+            
+            const requestData = await createRequest(
+                props.ct_routeKey, 
+                phoneValue, 
+                nameValue, 
+                props.verbose
+            );
+            
+            formData.append("ct_callback", true);
+            formData.append("ctw_createRequest", JSON.stringify(requestData));
+        }
+    } catch (error) {
+        if (props.ct_routeKey && props.ct_routeKey.trim() !== '') {
+            formData.append("ctw_createRequest", JSON.stringify({ error: error.message || error }));
+        }
+        if (props.verbose) {
+            console.error("Error during request Calltouch callback:", error);
+        }
+        formDataObj = getFormDataObject(formData, form.id);
+    }
+
+    // Отправка данных на сервер
+    const params = new URLSearchParams([...formData]);
+
+    try {
+        const response = await fetch(url, {
+            method: "POST",
+            mode: "cors",
+            cache: "no-cache",
+            credentials: "same-origin",
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded",
+            },
+            body: params,
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const data = await response.json();
+        
+        if (props.verbose) {
+            console.log('Form response:', data);
+        }
+        
+        stateBtn(btn, btnText);
+        
+        if (data.answer === "required") {
+            reachGoal("form_required");
+            showErrorMes(form, data.field, sanitizeInput(data.message));
+            return false;
+        } else if (data.answer === "error") {
+            reachGoal("form_error");
+            
+            if (props.callback_error && typeof props.callback_error === 'function') {
+                props.callback_error(data);
+            } else if (messageModal) {
+                const errorMsg = sanitizeInput(data.error || 'Неизвестная ошибка');
+                showMessageModal(messageModal, errorIcon, errorText + " " + errorMsg);
+            }
+            return false;
+        } else {
+            if (data.attention !== true) {
+                formDataObj = getFormDataObject(formData, form.id);
+                reachGoal("form_success", formDataObj);
+            }
+            
+            setCookie(sendMailCookie, true, {
+                'domain': window.location.hostname,
+                'path': '/',
+                'expires': 600
+            });
+            
+            if (props.callback && typeof props.callback === 'function') {
+                props.callback(data);
+            } else if (messageModal) {
+                showMessageModal(messageModal, successIcon, successText);
+            }
+            
+            form.reset();
+            return true;
+        }
+    } catch (error) {
+        reachGoal("form_error");
+        console.error("Ошибка отправки данных формы:", error);
+        deleteCookie(sendMailCookie);
+        
+        if (props.callback_error && typeof props.callback_error === 'function') {
+            props.callback_error({ error: error.message });
+        } else if (messageModal) {
+            showMessageModal(messageModal, errorIcon, errorText + " " + error.message);
+        }
+        
+        stateBtn(btn, btnText);
+        return false;
+    }
+}
+
+async function sendForm(form) {
+    if (!form) return false;
+    
+    let formData = new FormData(form);
+    let sendMailCookie = props.sendMailCookie;
+    
+    if (formData.get('dealer')) {
+        sendMailCookie += "_" + formData.get('dealer');
+    }
+    
+    if (getCookie(sendMailCookie)) {
+        const confirmModal = document.getElementById('confirm-modal');
+        if (confirmModal) {
+            const messageElement = confirmModal.querySelector('p');
+            if (messageElement) {
+                const confirmText = props.confirmModalText || 
+                    'ПЕРЕДАЙ ТЕКСТ В ОБЪЕКТЕ props = {confirmModalText: "text"}';
+                messageElement.textContent = confirmText;
+            }
+            
+            confirmModal.classList.remove("hidden");
+
+            const accept = confirmModal.querySelector('#accept-confirm');
+            const acceptClose = confirmModal.querySelector('#accept-close');
+
+            if (accept && !accept.dataset.listenerAdded) {
+                accept.dataset.listenerAdded = 'true';
+                accept.addEventListener('click', async () => {
+                    confirmModal.classList.add("hidden");
+                    deleteCookie(sendMailCookie);
+                    await submitForm(form);
+                });
+            }
+
+            if (acceptClose && !acceptClose.dataset.listenerAdded) {
+                acceptClose.dataset.listenerAdded = 'true';
+                acceptClose.addEventListener('click', () => {
+                    const modals = document.querySelectorAll('.modal-overlay');
+                    form.reset();
+                    modals.forEach((modal) => modal.classList.add("hidden"));
+                    confirmModal.classList.add("hidden");
+                });
+            }
+            return false;
+        }
+    } else {
+        return await submitForm(form);
+    }
+}
+
+export const connectForms = (url, props = propsParams) => {
+    if (!url) {
+        console.error('URL is required for connectForms');
+        return;
+    }
+    
+    props = { ...propsParams, ...props };
+
+    // Настройка масок телефонов
+    document.querySelectorAll("input[name=phone]").forEach(function (element) {
+        element.addEventListener("input", debouncedMaskphone);
+        element.addEventListener("change", () => phoneChecker(element));
+    });
+
+    // Настройка чекбоксов согласия
+    document.querySelectorAll("input[name=" + props.agreeSelector + "]").forEach(function (element) {
+        let errorMes = element.parentElement?.querySelector("." + props.agreeSelector);
+        if (errorMes) {
+            element.addEventListener("change", (e) => {
+                if (!e.target.checked) {
+                    errorMes.classList.remove("hidden");
+                } else {
+                    errorMes.classList.add("hidden");
+                }
+            });
+        }
+    });
+
+    // Настройка textarea
+    document.querySelectorAll("textarea").forEach(function (textarea) {
+        const debouncedCheck = debounce(() => {
+            checkTextareaLength(textarea, minLengthTextareaField);
+        }, 300);
+        
+        if (textarea.addEventListener) {
+            textarea.addEventListener("input", debouncedCheck, false);
+        } else if (textarea.attachEvent) {
+            textarea.attachEvent("onpropertychange", debouncedCheck);
+        }
+    });
+
+    // Обработка отправки форм
+    document.querySelectorAll("form:not(.vue-form)").forEach((form) => {
+        form.addEventListener('submit', async (event) => {
+            event.preventDefault();
+            await sendForm(form);
+        });
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexsab-ru/scripts",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "common libs for websites",
   "main": "index.js",
   "scripts": {