Рубрика: JS

tippy.js

PHP
1
2
3
4
<button data-template="wn1">Кнопка</button>
<div id="wn1" style="display: none;">
  <div>Самый распространенный цвет сияния в природе, но при этом всегда уникальное и неповторимое, как и большое множество проектов.</div>
</div>

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$color_bg: #5236AF
 
.tippy-box[data-theme~='custom']
  background-color: $color_bg
  color: #fff
  border-radius: 20px
  padding: 10px
  div
    font-size: clamp(12px, 1.5vw, 16px)
  p:last-child
    margin: 0
 
.tippy-box[data-theme~='custom'][data-placement^='top'] > .tippy-arrow::before
  border-top-color: $color_bg
.tippy-box[data-theme~='custom'][data-placement^='bottom'] > .tippy-arrow::before
  border-bottom-color: $color_bg
.tippy-box[data-theme~='custom'][data-placement^='left'] > .tippy-arrow::before
  border-left-color: $color_bg
.tippy-box[data-theme~='custom'][data-placement^='right'] > .tippy-arrow::before
  border-right-color: $color_bg

PHP
1
2
3
4
5
6
7
8
9
10
11
window.addEventListener("load", () => {
  tippy("button", {
    content(reference) {
      const id = reference.getAttribute("data-template");
      const template = document.getElementById(id);
      return template?.innerHTML || "Нет содержимого в данном блоке";
    },
    theme: "custom",
    allowHTML: true,
  });
});

https://atomiks.github.io/tippyjs/

Код на JavaScript, который будет копировать email-адреса при клике на них и показывать уведомление о копировании:

PHP
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
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Копирование email</title>
    <style>
        .notification {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            background-color: #4CAF50;
            color: white;
            padding: 12px 24px;
            border-radius: 4px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1000;
        }
        
        .notification.show {
            opacity: 1;
        }
        
        /* Стиль для email-ссылок (необязательно) */
        a[href^="mailto:"] {
            color: #0066cc;
            text-decoration: underline;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- Пример email-адресов на странице -->
    <p>Контакты: <a href="mailto:example@domain.com">example@domain.com</a></p>
    <p>Поддержка: <a href="mailto:support@company.org">support@company.org</a></p>
    
    <!-- Элемент уведомления -->
    <div id="notification" class="notification">Email скопирован!</div>
    
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const notification = document.getElementById('notification');
            
            // Функция для копирования текста в буфер обмена
            function copyToClipboard(text) {
                navigator.clipboard.writeText(text).then(function() {
                    showNotification();
                }).catch(function(err) {
                    console.error('Не удалось скопировать текст: ', err);
                });
            }
            
            // Функция для показа уведомления
            function showNotification() {
                notification.classList.add('show');
                setTimeout(function() {
                    notification.classList.remove('show');
                }, 3000);
            }
            
            // Обработчик кликов по email-ссылкам
            document.addEventListener('click', function(e) {
                // Проверяем, был ли клик по ссылке с mailto:
                if (e.target.tagName === 'A' && e.target.getAttribute('href')?.startsWith('mailto:')) {
                    e.preventDefault();
                    const email = e.target.getAttribute('href').replace('mailto:', '');
                    copyToClipboard(email);
                }
                
                // Дополнительно: обработка кликов по тексту, который выглядит как email
                // (даже если он не в ссылке)
                if (e.target.textContent.includes('@') &&
                    e.target.textContent.includes('.') &&
                    !e.target.hasAttribute('href')) {
                    const potentialEmail = e.target.textContent.trim();
                    if (isValidEmail(potentialEmail)) {
                        copyToClipboard(potentialEmail);
                    }
                }
            });
            
            // Функция для проверки, похож ли текст на email
            function isValidEmail(text) {
                return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(text);
            }
        });
    </script>
</body>
</html>

 

Читать подробнее…

PHP
1
2
3
4
5
<div id="bl_more">
  <p>Крымский район расположен в юго-западной  части Краснодарского края. Общая площадь его составляет 1,6 тыс.км². на севере граничит со Славянским районом, граница района проходит по  реке Кубань, на западе граничит с Анапским районом, на востоке граничит с Абинским районом, на юге — с Новороссийском и Геленджиком.</p>
  <p>Территория Крымского района входит в две зоны: Прикубанскую наклонную равнину и область средне-высоких гор западной части оконечности Большого Кавказа.</p>
</div>
<button id="more">Подробнее...</button>

CSS
1
2
3
4
5
6
7
8
#bl_more
  line-clamp: auto
  interpolate-size: allow-keywords
  transition: block-size .3s ease
  block-size: 2lh
  overflow: clip
  &.open
    block-size: auto

JavaScript
1
2
3
4
5
/**/
more.onclick = (e) => {
  bl_more.classList.toggle("open");
  more.textContent = bl_more.classList.contains("open") ? "Скрыть" : "Подробнее...";
};