Wp:JavaScript: различия между версиями

Текущая версия от 00:20, 22 марта 2025

Разные интересности добавленные в качестве JS:

1.1. Обертыши для адресов, телефонов и E-Mail через ID

Почему-то не всегда на все срабатывает. Но думаю найду причину. Пример HTML вставки:

<address id="mail">mail@mail.ru</adress>
<address id="tel_num">+7 (999) 888-77-66</address>
<address id="adress_lnk">191186, Санкт-Петербург, Невский пр., д. 77/33</address>

Сам собственно код JS:

function handleAddressElements() {
    // Обрабатываем <address id="adress_lnk">
    const addressLink = document.getElementById('adress_lnk');
    if (addressLink && !addressLink.dataset.processed) {
        addressLink.dataset.processed = true;
        const text = encodeURIComponent(addressLink.textContent.trim());
        if (!text) {
            console.error('Адрес пустой');
            return;
        }
        const link = document.createElement('a');
        link.href = '#';
        link.textContent = addressLink.textContent;
        link.addEventListener('click', function (event) {
            openMap(text, event);
        });
        addressLink.innerHTML = '';
        addressLink.appendChild(link);
    }

    // Обрабатываем <address id="tel_num">
    const telNum = document.getElementById('tel_num');
    if (telNum && !telNum.dataset.processed) {
        telNum.dataset.processed = true;
        const phoneNumber = telNum.textContent.trim();
        if (!phoneNumber) {
            console.error('Номер телефона пустой');
            return;
        }
        telNum.style.cursor = 'pointer';
        telNum.addEventListener('click', function () {
            openPhoneModal(phoneNumber);
        });
    }

    // Обрабатываем <address id="mail">
    const mailAddress = document.getElementById('mail');
    if (mailAddress && !mailAddress.dataset.processed) {
        mailAddress.dataset.processed = true;
        const email = mailAddress.textContent.trim();
        if (!email) {
            console.error('Email пустой');
            return;
        }
        const mailtoLink = document.createElement('a');
        mailtoLink.href = `mailto:${email}`;
        mailtoLink.textContent = email;
        mailAddress.innerHTML = '';
        mailAddress.appendChild(mailtoLink);
    }
}

// Обрабатываем элементы при загрузке страницы
document.addEventListener('DOMContentLoaded', handleAddressElements);

// Отслеживаем добавление новых элементов
const observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        if (mutation.type === 'childList') {
            handleAddressElements();
        }
    });
});

observer.observe(document.body, { childList: true, subtree: true });

// Функция для открытия карты
function openMap(address, event) {
    const isMobile = /Android|webOS|iPhone|iPad|iPadOS|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
    const isIOS = /iPhone|iPad|iPod|iPadOS/i.test(navigator.userAgent);

    const yandexMapsUrl = `https://yandex.ru/maps/?text=${address}`;
    const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${address}`;
    const appleMapsUrl = `http://maps.apple.com/?q=${address}`;
    const dgisUrl = `https://2gis.ru/search/${address}`;

    if (isMobile) {
        const yandexWindow = window.open(yandexMapsUrl, '_blank');
        setTimeout(() => {
            if (!yandexWindow || yandexWindow.closed || yandexWindow.innerHeight === 0) {
                if (isIOS) {
                    window.open(appleMapsUrl, '_blank');
                } else {
                    window.open(googleMapsUrl, '_blank');
                }
            }
        }, 500);
    } else {
        window.open(dgisUrl, '_blank');
    }

    event.preventDefault();
}

// Функция для открытия модального окна с выбором действия для телефона
function openPhoneModal(phoneNumber) {
    const cleanedCallNumber = phoneNumber.replace(/[\s\-()]/g, '');
    const cleanedWhatsappNumber = phoneNumber.replace(/[\s\-()+]/g, '');

    const modal = document.createElement('div');
    modal.style.position = 'fixed';
    modal.style.top = '0';
    modal.style.left = '0';
    modal.style.width = '100%';
    modal.style.height = '100%';
    modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    modal.style.zIndex = '1000';
    modal.style.display = 'flex';
    modal.style.justifyContent = 'center';
    modal.style.alignItems = 'center';

    const buttonContainer = document.createElement('div');
    buttonContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.33)';
    buttonContainer.style.padding = '150px 50px';
    buttonContainer.style.borderRadius = '50px';
    buttonContainer.style.border = '2px solid #ccc';
    buttonContainer.style.textAlign = 'center';
    buttonContainer.style.boxShadow = '3px 3px 5px 0 rgba(0, 0, 0, 0.5)';

    const callButton = document.createElement('button');
    callButton.textContent = 'Позвонить';
    callButton.style.margin = '10px';
    callButton.style.padding = '10px 20px';
    callButton.style.backgroundColor = '#007BFF';
    callButton.style.color = '#fff';
    callButton.style.border = '3px solid rgb(0, 64, 128)';
    callButton.style.borderRadius = '10px';
    callButton.style.boxShadow = '3px 3px 5px 0 rgba(0, 0, 0, 0.5)';
    callButton.style.cursor = 'pointer';
    callButton.addEventListener('click', function () {
        window.open(`tel:${cleanedCallNumber}`, '_blank');
        document.body.removeChild(modal);
    });

    const whatsappButton = document.createElement('button');
    whatsappButton.textContent = 'Написать в WhatsApp';
    whatsappButton.style.margin = '10px';
    whatsappButton.style.padding = '10px 20px';
    whatsappButton.style.backgroundColor = 'rgb(37,211,102)';
    whatsappButton.style.color = '#fff';
    whatsappButton.style.border = '3px solid rgb(16, 105, 51)';
    whatsappButton.style.borderRadius = '10px';
    whatsappButton.style.boxShadow = '3px 3px 5px 0 rgba(0, 0, 0, 0.5)';
    whatsappButton.style.cursor = 'pointer';
    whatsappButton.addEventListener('click', function () {
        window.open(`https://wa.me/${cleanedWhatsappNumber}`, '_blank');
        document.body.removeChild(modal);
    });

    const closeButton = document.createElement('button');
    closeButton.textContent = 'Закрыть';
    closeButton.style.margin = '10px';
    closeButton.style.padding = '10px 20px';
    closeButton.style.backgroundColor = 'rgb(220,53,69)';
    closeButton.style.color = '#fff';
    closeButton.style.border = '3px solid rgb(110, 26, 34)';
    closeButton.style.borderRadius = '10px';
    closeButton.style.boxShadow = '3px 3px 5px 0 rgba(0, 0, 0, 0.5)';
    closeButton.style.cursor = 'pointer';
    closeButton.addEventListener('click', function () {
        document.body.removeChild(modal);
    });

    buttonContainer.appendChild(callButton);
    buttonContainer.appendChild(whatsappButton);
    buttonContainer.appendChild(closeButton);

    modal.appendChild(buttonContainer);

    document.body.appendChild(modal);
}

1.2. Те же обертыши для адресов, телефонов и E-Mail, но уже через CLASS

document.addEventListener('DOMContentLoaded', function () {
    // Обрабатываем <address class="adress_lnk">
    const addressLinks = document.querySelectorAll('.adress_lnk');
    addressLinks.forEach(function (addressLink) {
        const text = encodeURIComponent(addressLink.textContent.trim());
        const link = document.createElement('a');
        link.href = '#';
        link.textContent = addressLink.textContent;
        link.addEventListener('click', function (event) {
            openMap(text, event);
        });
        addressLink.innerHTML = '';
        addressLink.appendChild(link);
    });

    // Обрабатываем <address class="tel_num">
    const telNums = document.querySelectorAll('.tel_num');
    telNums.forEach(function (telNum) {
        const phoneNumber = telNum.textContent.trim();
        telNum.style.cursor = 'pointer';
        telNum.addEventListener('click', function () {
            openPhoneModal(phoneNumber);
        });
    });

    // Обрабатываем <address class="mail">
    const mailElements = document.querySelectorAll('.mail');
    mailElements.forEach(function (mailAddress) {
        const email = mailAddress.textContent.trim();
        if (!email) {
            console.error('Email пустой');
            return;
        }
        const mailtoLink = document.createElement('a');
        mailtoLink.href = `mailto:${email}`;
        mailtoLink.textContent = email;
        mailAddress.innerHTML = '';
        mailAddress.appendChild(mailtoLink);
    });

    // Функция для открытия карты
    function openMap(address, event) {
        const isMobile = /Android|webOS|iPhone|iPad|iPadOS|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        const isIOS = /iPhone|iPad|iPod|iPadOS/i.test(navigator.userAgent);

        const yandexMapsUrl = `https://yandex.ru/maps/?text=${address}`;
        const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${address}`;
        const appleMapsUrl = `http://maps.apple.com/?q=${address}`;
        const dgisUrl = `https://2gis.ru/search/${address}`;

        if (isMobile) {
            const yandexWindow = window.open(yandexMapsUrl, '_blank');
            setTimeout(() => {
                if (!yandexWindow || yandexWindow.closed || yandexWindow.innerHeight === 0) {
                    if (isIOS) {
                        window.open(appleMapsUrl, '_blank');
                    } else {
                        window.open(googleMapsUrl, '_blank');
                    }
                }
            }, 500);
        } else {
            window.open(dgisUrl, '_blank');
        }

        event.preventDefault();
    }

    // Функция для открытия модального окна с выбором действия для телефона
    function openPhoneModal(phoneNumber) {
        const cleanedCallNumber = phoneNumber.replace(/[\s\-()]/g, '');
        const cleanedWhatsappNumber = phoneNumber.replace(/[\s\-()+]/g, '');

        const modal = document.createElement('div');
        modal.style.position = 'fixed';
        modal.style.top = '0';
        modal.style.left = '0';
        modal.style.width = '100%';
        modal.style.height = '100%';
        modal.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        modal.style.zIndex = '1000';
        modal.style.display = 'flex';
        modal.style.justifyContent = 'center';
        modal.style.alignItems = 'center';

        const buttonContainer = document.createElement('div');
        buttonContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.33)';
        buttonContainer.style.padding = '150px 50px';
        buttonContainer.style.borderRadius = '50px';
        buttonContainer.style.border = '2px solid #ccc';
        buttonContainer.style.textAlign = 'center';
        buttonContainer.style.boxShadow = '3px 3px 5px 0 rgba(0, 0, 0, 0.5)';

        const callButton = document.createElement('button');
        callButton.textContent = 'Позвонить';
        callButton.style.margin = '10px';
        callButton.style.padding = '10px 20px';
        callButton.style.backgroundColor = '#007BFF';
        callButton.style.color = '#fff';
        callButton.style.border = '3px solid rgb(0, 64, 128)';
        callButton.style.borderRadius = '10px';
        callButton.style.boxShadow = '3px 3px 5px 0 rgba(0, 0, 0, 0.5)';
        callButton.style.cursor = 'pointer';
        callButton.addEventListener('click', function () {
            window.open(`tel:${cleanedCallNumber}`, '_blank');
            document.body.removeChild(modal);
        });

        const whatsappButton = document.createElement('button');
        whatsappButton.textContent = 'Написать в WhatsApp';
        whatsappButton.style.margin = '10px';
        whatsappButton.style.padding = '10px 20px';
        whatsappButton.style.backgroundColor = 'rgb(37,211,102)';
        whatsappButton.style.color = '#fff';
        whatsappButton.style.border = '3px solid rgb(16, 105, 51)';
        whatsappButton.style.borderRadius = '10px';
        whatsappButton.style.boxShadow = '3px 3px 5px 0 rgba(0, 0, 0, 0.5)';
        whatsappButton.style.cursor = 'pointer';
        whatsappButton.addEventListener('click', function () {
            window.open(`https://wa.me/${cleanedWhatsappNumber}`, '_blank');
            document.body.removeChild(modal);
        });

        const closeButton = document.createElement('button');
        closeButton.textContent = 'Закрыть';
        closeButton.style.margin = '10px';
        closeButton.style.padding = '10px 20px';
        closeButton.style.backgroundColor = 'rgb(220,53,69)';
        closeButton.style.color = '#fff';
        closeButton.style.border = '3px solid rgb(110, 26, 34)';
        closeButton.style.borderRadius = '10px';
        closeButton.style.boxShadow = '3px 3px 5px 0 rgba(0, 0, 0, 0.5)';
        closeButton.style.cursor = 'pointer';
        closeButton.addEventListener('click', function () {
            document.body.removeChild(modal);
        });

        buttonContainer.appendChild(callButton);
        buttonContainer.appendChild(whatsappButton);
        buttonContainer.appendChild(closeButton);

        modal.appendChild(buttonContainer);

        document.body.appendChild(modal);
    }
});