add: добавлена кнопка "скопировать в буфер обмена" и отслеживание целей в Yandex-Metrica и Top-Mail.ru

etpgrf_site/typograph/templates/typograph/base.html

@@ -64,8 +64,8 @@
 {# Футер #}
 <footer class="footer mt-auto py-3">
   <div class="container">
-    <span class="text-muted small">&copy; Sergei Erjemin, 2025&ndash;{% now 'Y' %}</span>
+    <span class="text-muted small">&copy; Sergei Erjemin, 2025&ndash;{% now 'Y' %}.</span>
-    <span class="text-muted small float-end">v0.1.1</span>
+    <span class="text-muted small float-end">v0.1.2</span>
   </div>
 </footer>
 

etpgrf_site/typograph/templates/typograph/index.html

@@ -14,7 +14,7 @@
           на «ёлочки» (или “лапки” для англоя­зычного текста), отбивка и компоновка тире,
           инициалов, единиц измерения, переносы в словах, обработка псевдо­графики и преобра­зование
           их в спецсимволы, висячая пунктуация. Получите готовый и валидный HTML-код для вставки
-          на ваш сайт или публикации в блог.
+          на ваш сайт или публикацию в блог.
         </p>
         <p class="text-muted small">
           Исходный код etpgrf-типографа доступен в&nbsp;нескольких репози&shy;ториях
@@ -265,14 +265,19 @@
         </div>
 
         <!-- Кнопка отправки -->
-        <button type="submit" class="btn btn-primary btn-lg w-100">Типографировать</button>
+        <button type="submit" class="btn btn-primary btn-lg w-100" onclick="sendGoal('etpgrf-btn-pressed')">Типографировать</button>
       </form>
     </div>
 
     <div class="col-md-12 mt-4">
-      <label class="form-label fw-bold small text-muted ls-1">
+      <div class="d-flex justify-content-between align-items-end mb-2">
-        <i class="bi bi-code-slash me-1"></i> Результат обработки:
+        <label class="form-label fw-bold small text-muted ls-1 mb-0">
-      </label>
+          <i class="bi bi-code-slash me-1"></i> Результат обработки:
+        </label>
+        <button id="btn-copy" class="btn btn-sm btn-outline-secondary d-none" title="Копировать в буфер обмена">
+          <i class="bi bi-clipboard me-1"></i> Копировать в&nbsp;буфер обмена
+        </button>
+      </div>
       <div id="cm-result-wrapper" class="result-box p-0"></div>
       <div id="result-area" style="display: none;"></div>
     </div>

public/static/js/base.js

@@ -1,115 +1,133 @@
 (function () {
-  const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    "use strict";
-  const logoImg = document.getElementById('logo-img');
-  const navbar = document.getElementById('main-navbar');
 
-  // --- АВТОМАТИЧЕСКОЕ ПЕРЕКЛЮЧЕНИЕ ТЕМЫ (Dark/Light) ---
+    // --- АВТОМАТИЧЕСКОЕ ПЕРЕКЛЮЧЕНИЕ ТЕМЫ (Dark/Light) ---
-  function updateTheme(e) {
+    const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-    const theme = e.matches ? 'dark' : 'light';
-    document.documentElement.setAttribute('data-bs-theme', theme);
-  }
 
-  // --- ОБНОВЛЕНИЕ ЛОГОТИПА ПРИ СКРОЛЛЕ И СМЕНЕ ТЕМЫ ---
+    function updateTheme(e) {
-  function updateLogo() {
+        const theme = e.matches ? 'dark' : 'light';
-    const isDark = darkModeMediaQuery.matches;
+        document.documentElement.setAttribute('data-bs-theme', theme);
-    // Используем getBoundingClientRect для определения позиции контента
+        // При смене темы обновляем и логотип
-    if (document.getElementById('content-container').getBoundingClientRect().top < 78) {
+        updateLogo();
-      navbar.classList.add('navbar-scrolled');
-      logoImg.src = isDark ? logoImg.dataset.srcDarkCompact : logoImg.dataset.srcLightCompact;
-    } else {
-      navbar.classList.remove('navbar-scrolled');
-      logoImg.src = isDark ? logoImg.dataset.srcDark : logoImg.dataset.srcLight;
     }
-  }
 
-  // Инициализация
+    // --- ЛОГОТИП И СКРОЛЛ ---
-  updateTheme(darkModeMediaQuery);
+    function updateLogo() {
-  updateLogo();
+        const logoImg = document.getElementById('logo-img');
-  document.addEventListener('DOMContentLoaded', updateLogo);
+        const navbar = document.getElementById('main-navbar');
+        
+        if (!logoImg || !navbar) return;
 
-  // Слушаем скролл
+        const isDark = darkModeMediaQuery.matches;
-  window.addEventListener('scroll', updateLogo);
+        // Используем window.scrollY для определения прокрутки
+        // Если прокрутили больше 50px, уменьшаем шапку
+        const isScrolled = window.scrollY > 50; 
 
-  // Слушаем смену темы
+        if (isScrolled) {
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', updateLogo);
+            navbar.classList.add('navbar-scrolled');
+            logoImg.src = isDark ? logoImg.dataset.srcDarkCompact : logoImg.dataset.srcLightCompact;
+        } else {
+            navbar.classList.remove('navbar-scrolled');
+            logoImg.src = isDark ? logoImg.dataset.srcDark : logoImg.dataset.srcLight;
+        }
+    }
 
-  // --- КУКИ ---
+    // Инициализация темы и логотипа
-  const COOKIE_KEY = 'cookie_consent';
+    updateTheme(darkModeMediaQuery);
-  const TTL_MS = 90 * 24 * 60 * 60 * 1000; // 90 дней: 90 * 24 * 60 * 60 * 1000 = 7776000000)
+    darkModeMediaQuery.addEventListener('change', updateTheme);
+    
+    // Инициализация логотипа при загрузке и скролле
+    document.addEventListener('DOMContentLoaded', updateLogo);
+    window.addEventListener('scroll', updateLogo);
 
-  const banner = document.getElementById('cookie-banner');
-  const acceptButton = document.getElementById('cookie-accept');
 
-  // Функция загрузки счетчиков аналитики
+    // --- КУКИ И СЧЕТЧИКИ ---
-  function loadCounters() {
+    const COOKIE_KEY = 'cookie_consent';
-    // console.log("Загрузка счетчиков (Яндекс, Google)...");
+    const TTL_MS = 90 * 24 * 60 * 60 * 1000; // 90 дней
-    // Код Яндекс.Метрики
+    const MAILRU_ID = "3734603";
-    (function (m, e, t, r, i, k, a) {
+    const YANDEX_ID = "106310834";
-      m[i] = m[i] || function () { (m[i].a = m[i].a || []).push(arguments) };
+
-      m[i].l = 1 * new Date();
+    function loadCounters() {
-      for (var j = 0; j < document.scripts.length; j++) { if (document.scripts[j].src === r) { return; } }
+        // console.log("Загрузка счетчиков...");
-      k = e.createElement(t), a = e.getElementsByTagName(t)[0], k.async = 1, k.src = r, a.parentNode.insertBefore(k, a)
+        try {
-    })(window, document, 'script', 'https://mc.yandex.ru/metrika/tag.js?id=106310834', 'ym');
+            // Mail.ru
-    ym(106310834, 'init', {
+            var _tmr = window._tmr || (window._tmr = []);
-      ssr: true, webvisor: true, clickmap: true, ecommerce: "dataLayer",
+            _tmr.push({id: MAILRU_ID, type: "pageView", start: (new Date()).getTime()});
-      accurateTrackBounce: true, trackLinks: true
+            (function (d, w, id) {
+              if (d.getElementById(id)) return;
+              var ts = d.createElement("script"); ts.type = "text/javascript"; ts.async = true; ts.id = id;
+              ts.src = "https://top-fwz1.mail.ru/js/code.js";
+              var f = d.getElementsByTagName("script")[0]; f.parentNode.insertBefore(ts, f);
+            })(document, window, "topmailru-code");
+            
+            // Яндекс.Метрика
+            (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
+            m[i].l=1*new Date();
+            for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
+            k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
+            (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+
+            window.ym(YANDEX_ID, "init", {
+                 clickmap:true,
+                 trackLinks:true,
+                 accurateTrackBounce:true
+            });
+        } catch (e) {
+            console.error("Ошибка загрузки счетчиков:", e);
+        }
+    }
+
+    function checkConsent() {
+        try {
+            const stored = localStorage.getItem(COOKIE_KEY);
+            if (!stored) return false;
+            const data = JSON.parse(stored);
+            const now = Date.now();
+            if (now - data.timestamp > TTL_MS) {
+                localStorage.removeItem(COOKIE_KEY);
+                return false;
+            }
+            return true;
+        } catch (e) {
+            return false;
+        }
+    }
+
+    // Инициализация куки-баннера
+    document.addEventListener('DOMContentLoaded', function() {
+        const banner = document.getElementById('cookie-banner');
+        const acceptButton = document.getElementById('cookie-accept');
+
+        if (banner && acceptButton) {
+            if (checkConsent()) {
+                loadCounters();
+            } else {
+                banner.style.display = 'block';
+            }
+
+            acceptButton.addEventListener('click', function () {
+                const data = { value: true, timestamp: Date.now() };
+                localStorage.setItem(COOKIE_KEY, JSON.stringify(data));
+                banner.style.display = 'none';
+                loadCounters();
+            });
+        }
     });
-
+    
-    // Код Google Analytics
+    // Глобальная функция для отправки целей
-    // window.dataLayer = window.dataLayer || [];
+    window.sendGoal = function(goalName) {
-    // function gtag(){dataLayer.push(arguments);}
+        if (!checkConsent()) return;
-    // gtag('js', new Date());
+        // console.log("Sending goal:", goalName);
-    // gtag('config', 'G-XXXXXXXXXX');
+        
-
+        try {
-    // Код Top.Mail.Ru
+            if (window._tmr) {
-    var _tmr = window._tmr || (window._tmr = []);
+                window._tmr.push({ id: MAILRU_ID, type: "reachGoal", goal: goalName, value: 1 });
-    _tmr.push({id: "3734603", type: "pageView", start: (new Date()).getTime()});
+            }
-    (function (d, w, id) {
+            if (typeof window.ym === 'function') {
-      if (d.getElementById(id)) return;
+                window.ym(YANDEX_ID, 'reachGoal', goalName);
-      var ts = d.createElement("script");
+            }
-      ts.type = "text/javascript"; ts.async = true; ts.id = id; ts.src = "https://top-fwz1.mail.ru/js/code.js";
+        } catch (e) {
-      var f = function () {
+            console.error("Ошибка отправки цели:", e);
-        var s = d.getElementsByTagName("script")[0]; s.parentNode.insertBefore(ts, s);
+        }
-      };
-      if (w.opera == "[object Opera]") {
-        d.addEventListener("DOMContentLoaded", f, false);
-      } else { f(); }
-    })(document, window, "tmr-code");
-    // <noscript><div><img src="https://top-fwz1.mail.ru/counter?id=3734603;js=na" style="position:absolute;left:-9999px;" alt="Top.Mail.Ru" /></div></noscript>
-    // alert("Отладка. Счетчики загружены (здесь должен быть реальный код счетчиков).");
-  }
-
-  function checkConsent() {
-    const stored = localStorage.getItem(COOKIE_KEY);
-    if (!stored) return false;
-
-    try {
-      const data = JSON.parse(stored);
-      const now = Date.now();
-      // Проверяем, не истек ли срок
-      if (now - data.timestamp > TTL_MS) {
-        localStorage.removeItem(COOKIE_KEY);
-        return false;
-      }
-      return true;
-    } catch (e) {
-      return false;
-    }
-  }
-
-  if (checkConsent()) {
-    loadCounters();
-  } else {
-    banner.style.display = 'block';
-  }
-
-  acceptButton.addEventListener('click', function () {
-    const data = {
-      value: true,
-      timestamp: Date.now()
     };
-    localStorage.setItem(COOKIE_KEY, JSON.stringify(data));
+})();
-    banner.style.display = 'none';
-    loadCounters();
-  });
-})();

public/static/js/index.js

@@ -19,9 +19,12 @@ import {
 } from "../codemirror/editor.js";
 
 const resultWrapper = document.getElementById('cm-result-wrapper');
+const btnCopy = document.getElementById('btn-copy');
+const sourceTextarea = document.querySelector('textarea[name="text"]');
+
+// console.log("Index.js loaded. btnCopy:", !!btnCopy, "sourceTextarea:", !!sourceTextarea); // DEBUG
 
 const themeCompartment = new Compartment();
-
 function getTheme() {
   return window.matchMedia('(prefers-color-scheme: dark)').matches ? oneDark : [];
 }
@@ -47,8 +50,10 @@ const charNames = {
   0x2063: "Invisible Comma (невидимая запятая для семантической разметки математических выражений — ⁣)",
 };
 
+const PLACEHOLDER_TEXT = "Здесь появится результат...";
+
 const resultState = EditorState.create({
-  doc: "Здесь появится результат...",
+  doc: PLACEHOLDER_TEXT,
   extensions: [
     lineNumbers(),
     highlightActiveLineGutter(),
@@ -83,17 +88,77 @@ const resultView = new EditorView({
   parent: resultWrapper
 });
 
+// Обработка ответа от сервера (HTMX)
 document.body.addEventListener('htmx:afterSwap', function (evt) {
+  // console.log("HTMX afterSwap event:", evt.detail.target.id); // DEBUG
   if (evt.detail.target.id === 'result-area') {
     const newContent = evt.detail.xhr.response;
+    
+    // Обновляем редактор
     resultView.dispatch({
       changes: {from: 0, to: resultView.state.doc.length, insert: newContent}
     });
+    
+    // Показываем кнопку копирования
+    if (btnCopy) {
+        // console.log("Showing copy button"); // DEBUG
+        btnCopy.classList.remove('d-none');
+    }
   }
 });
 
+// Скрываем кнопку и сбрасываем редактор при изменении исходного текста
+if (sourceTextarea) {
+  sourceTextarea.addEventListener('input', () => {
+    if (btnCopy) {
+      btnCopy.classList.add('d-none');
+    }
+    // Сбрасываем редактор на плейсхолдер
+    if (resultView.state.doc.toString() !== PLACEHOLDER_TEXT) {
+        resultView.dispatch({
+          changes: {from: 0, to: resultView.state.doc.length, insert: PLACEHOLDER_TEXT}
+        });
+    }
+  });
+}
+
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
   resultView.dispatch({
     effects: themeCompartment.reconfigure(getTheme())
   });
 });
+
+// --- КОПИРОВАНИЕ В БУФЕР ---
+if (btnCopy) {
+  btnCopy.addEventListener('click', async () => {
+    const text = resultView.state.doc.toString();
+    // console.log("Copying text:", text.substring(0, 20) + "..."); // DEBUG
+    
+    // Отправляем цель в метрику
+    if (typeof window.sendGoal === 'function') {
+        window.sendGoal('etpgrf-copy-pressed');
+    }
+    
+    try {
+      await navigator.clipboard.writeText(text);
+      
+      // Визуальное подтверждение
+      const originalHtml = btnCopy.innerHTML;
+      const originalClass = btnCopy.className; 
+      
+      btnCopy.innerHTML = '<i class="bi bi-check-lg me-1"></i> Скопировано!';
+      btnCopy.classList.remove('btn-outline-secondary', 'btn-outline-primary');
+      btnCopy.classList.add('btn-success');
+      
+      setTimeout(() => {
+        btnCopy.innerHTML = originalHtml;
+        btnCopy.className = originalClass;
+        btnCopy.classList.remove('d-none'); 
+      }, 2000);
+      
+    } catch (err) {
+      console.error('Ошибка копирования:', err);
+      alert('Не удалось скопировать текст.');
+    }
+  });
+}