code-snippets/tilda/ui/customize-bf905a-widget.html at main · baslie/code-snippets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
Меняем кнопки и цвета у блока BF905A в Тильде

<!-- ********************************************************************** -->
<!-- Меняем кнопки и цвета у блока BF905A в Тильде                          -->
<!-- ********************************************************************** -->
<script>
const ucNewIcons = {
    "t898__icon-telegram_wrapper": {
        "iconPath": "none", // Нет новой иконки
        "tooltipText": null // Нет нового названия для тултипа
    },
    "t898__icon-whatsapp_wrapper": {
        "iconPath": "none",
        "tooltipText": null
    },
    "t898__icon-vkontakte_wrapper": {
        "iconPath": "none",
        "tooltipText": "ВКонтакте"
    },
    "t898__icon-skype_wrapper": {
        "iconPath": "none",
        "tooltipText": null
    },
    "t898__icon-phone_wrapper": {
        "iconPath": "https://static.tildacdn.com/tild6638-6464-4664-a364-376238326233/phone.svg",
        "tooltipText": "Телефон" // Пример нового текста для тултипа
    }
};

document.addEventListener('DOMContentLoaded', function() {
    Object.keys(ucNewIcons).forEach(className => {
        const iconWrappers = document.querySelectorAll(`.${className}`);
        iconWrappers.forEach(iconWrapper => {
            const { iconPath, tooltipText } = ucNewIcons[className];
            const tooltip = iconWrapper.querySelector('.t898__tooltip');

            // Если путь к иконке задан и отличен от "none"
            if (iconPath && iconPath !== "none") {
                // Очищаем содержимое, кроме тултипа
                Array.from(iconWrapper.childNodes).forEach(node => {
                    if (!node.classList || !node.classList.contains('t898__tooltip')) {
                        node.remove();
                    }
                });
                // Добавляем новую иконку
                const imgElement = document.createElement('img');
                imgElement.setAttribute('src', iconPath);
                imgElement.setAttribute('width', '50');
                imgElement.setAttribute('height', '50');
                imgElement.setAttribute('alt', 'Icon');
                iconWrapper.prepend(imgElement); // Добавляем изображение перед тултипом
            }

            // Обновляем текст тултипа, если это необходимо
            if (tooltipText && tooltip) {
                tooltip.textContent = tooltipText;
            }
        });
    });
});
</script>
<style>
/* Убираем тень у виджета с кнопками */
.t898__btn_label,
.t898__btn_label:hover,
.t898__icon_link,
.t898__icon_link:hover {
    box-shadow: none;
}

/* FIX: исправляем пробел у тултипа + меняем фон */
.t898__tooltip:after {
    right: -18px;
    border-left-color: #55514E;
}
.t898__tooltip {
    background: #55514E;
}

/* Цвет фона основной кнопки */
.t898__btn_label,
.t898__btn_input:checked+label {
    background: #55514E !important;
}

/* Цвет иконки у основной кнопки */
.t898__icon-write {
    stroke: #F4F2EF;
}

/* Цвет иконки «Close» */
.t898__icon-close g {
    fill: #F4F2EF;
}

/* Подсказка у основной кнопки */
.t898__hint {
    background: #55514E;
    opacity: 1;
}
.t898__hint:after {
    right: -18px;
    border-left-color: #55514E;
}
</style>