MediaWiki:Common.js: Difference between revisions

From ChronoRo WIKI
Jump to navigation Jump to search
No edit summary
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
/* Any JavaScript here will be loaded for all users on every page load. */
(function () {
document.addEventListener('click', function (e) {
  function copyText(text) {
     var el = e.target.closest('.wiki-copy-btn');
    if (navigator.clipboard && navigator.clipboard.writeText) {
     if (!el) return;
      return navigator.clipboard.writeText(text);
    }
    return new Promise(function (resolve) {
      var ta = document.createElement('textarea');
      ta.value = text;
      ta.setAttribute('readonly', '');
      ta.style.position = 'fixed';
      ta.style.left = '-9999px';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(ta);
      resolve();
    });
  }
 
  function showTip(targetEl, msg) {
     var rect = targetEl.getBoundingClientRect();
 
    var tip = document.createElement('div');
    tip.textContent = msg || 'Copied!';
    document.body.appendChild(tip);
 
    // базовые стили прямо тут (не зависят от CSS)
    tip.style.position = 'absolute';
    tip.style.zIndex = '999999';
    tip.style.background = '#2b2b2b';
    tip.style.color = '#fff';
    tip.style.fontSize = '12px';
    tip.style.padding = '4px 8px';
    tip.style.borderRadius = '4px';
    tip.style.whiteSpace = 'nowrap';
     tip.style.pointerEvents = 'none';
 
    // делаем видимым сразу
    tip.style.opacity = '1';
    tip.style.transition = 'opacity 200ms ease, transform 200ms ease';
    tip.style.transform = 'translateY(4px)';


     var text = el.getAttribute('data-copy');
    // позиционирование (после того как tip появился)
     if (!text) return;
     var tipRect = tip.getBoundingClientRect();
    var top = window.scrollY + rect.top - tipRect.height - 8;
     var left = window.scrollX + rect.left + (rect.width / 2) - (tipRect.width / 2);


     navigator.clipboard.writeText(text);
     // не даём улететь за края
    top = Math.max(window.scrollY + 8, top);
    left = Math.max(window.scrollX + 8, left);


     // remove old tooltip if exists
     tip.style.top = top + 'px';
    var old = el.querySelector('.copy-tooltip');
     tip.style.left = left + 'px';
     if (old) old.remove();


     // create tooltip
     // небольшая "вспышка" вверх
     var tip = document.createElement('span');
     requestAnimationFrame(function () {
    tip.className = 'copy-tooltip';
      tip.style.transform = 'translateY(0)';
    tip.textContent = 'Copied!';
     });
     el.appendChild(tip);


     el.classList.add('copied');
     // fade out
    setTimeout(function () {
      tip.style.opacity = '0';
      tip.style.transform = 'translateY(-4px)';
    }, 800);


     setTimeout(function () {
     setTimeout(function () {
        el.classList.remove('copied');
      if (tip && tip.parentNode) tip.remove();
        tip.remove();
    }, 1100);
     }, 1000);
  }
});
 
  document.addEventListener('click', function (e) {
    var el = e.target.closest ? e.target.closest('.wiki-copy-btn') : null;
    if (!el) return;
 
    var text = el.getAttribute('data-copy');
    if (!text) return;
 
    e.preventDefault();
 
    copyText(text).then(function () {
      showTip(el, 'Copied!');
    }).catch(function () {
      showTip(el, 'Copy failed');
     });
  }, true);
})();

Latest revision as of 15:23, 21 January 2026

(function () {
  function copyText(text) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      return navigator.clipboard.writeText(text);
    }
    return new Promise(function (resolve) {
      var ta = document.createElement('textarea');
      ta.value = text;
      ta.setAttribute('readonly', '');
      ta.style.position = 'fixed';
      ta.style.left = '-9999px';
      document.body.appendChild(ta);
      ta.select();
      try { document.execCommand('copy'); } catch (e) {}
      document.body.removeChild(ta);
      resolve();
    });
  }

  function showTip(targetEl, msg) {
    var rect = targetEl.getBoundingClientRect();

    var tip = document.createElement('div');
    tip.textContent = msg || 'Copied!';
    document.body.appendChild(tip);

    // базовые стили прямо тут (не зависят от CSS)
    tip.style.position = 'absolute';
    tip.style.zIndex = '999999';
    tip.style.background = '#2b2b2b';
    tip.style.color = '#fff';
    tip.style.fontSize = '12px';
    tip.style.padding = '4px 8px';
    tip.style.borderRadius = '4px';
    tip.style.whiteSpace = 'nowrap';
    tip.style.pointerEvents = 'none';

    // делаем видимым сразу
    tip.style.opacity = '1';
    tip.style.transition = 'opacity 200ms ease, transform 200ms ease';
    tip.style.transform = 'translateY(4px)';

    // позиционирование (после того как tip появился)
    var tipRect = tip.getBoundingClientRect();
    var top = window.scrollY + rect.top - tipRect.height - 8;
    var left = window.scrollX + rect.left + (rect.width / 2) - (tipRect.width / 2);

    // не даём улететь за края
    top = Math.max(window.scrollY + 8, top);
    left = Math.max(window.scrollX + 8, left);

    tip.style.top = top + 'px';
    tip.style.left = left + 'px';

    // небольшая "вспышка" вверх
    requestAnimationFrame(function () {
      tip.style.transform = 'translateY(0)';
    });

    // fade out
    setTimeout(function () {
      tip.style.opacity = '0';
      tip.style.transform = 'translateY(-4px)';
    }, 800);

    setTimeout(function () {
      if (tip && tip.parentNode) tip.remove();
    }, 1100);
  }

  document.addEventListener('click', function (e) {
    var el = e.target.closest ? e.target.closest('.wiki-copy-btn') : null;
    if (!el) return;

    var text = el.getAttribute('data-copy');
    if (!text) return;

    e.preventDefault();

    copyText(text).then(function () {
      showTip(el, 'Copied!');
    }).catch(function () {
      showTip(el, 'Copy failed');
    });
  }, true);
})();