MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
-/* =========================
+/* ── Verse Actions ─────────────────────────────────────────────────────── */
-   GLOBAL CLICK HANDLER (SAFE)
+( function () {
-========================= */
+     'use strict';
-$(document).on('click', function (e) {
-  var $target = $(e.target);
-  /* =========================
-     COMMENTARY CLICK
-  ========================= */
-  var $commentBtn = $target.closest('.verse-action-commentary');
-  if ($commentBtn.length) {
-    e.preventDefault();
-     var verseId = $commentBtn.data('verse');
-    if (!verseId) return;
-    var $bodies = $('.commentary-body[data-verse="' + verseId + '"]');
-    var isOpen = !$bodies.first().hasClass('open');
-    // close others (optional UX)
-    $('.commentary-body.open').removeClass('open');
-    $('.verse-action-commentary.active').removeClass('active');
-    // toggle
-    $bodies.toggleClass('open', isOpen);
-    $commentBtn.toggleClass('active', isOpen);
-    return;
-  }
-  /* =========================
-     COPY VERSE CLICK
-  ========================= */
-  var $copyBtn = $target.closest('.verse-action-copy');
-  if ($copyBtn.length) {
-    e.preventDefault();
-    var line1 = $copyBtn.data('line1') || '';
-    var line2 = $copyBtn.data('line2') || '';
-    var text  = line2 ? line1 + '\n' + line2 : line1;
-    if (!text) return;
-    copyText(text, $copyBtn);
-    return;
-  }
-  /* =========================
-     COPY ID CLICK
-  ========================= */
-  var $idBtn = $target.closest('.copy-id-btn');
-  if ($idBtn.length) {
-    e.preventDefault();
-    var id = $idBtn.data('copyid');
-    if (!id) return;
-    copyText(id, $idBtn);
-    return;
-  }
-});
-/* =========================
+    /* =========================
     COPY FUNCTION + TOOLTIP
 ========================= */
 function copyText(text, $btn) {
+  function showTooltip() {
+    // Remove any existing tip on this button first
+    $btn.find('.copy-tooltip').remove();
-  function showTooltip() {
      var $tip = $('<span class="copy-tooltip">Copied ✓</span>');
-     $btn.append($tip);
+     $btn.css('position', 'relative').append($tip);
+    // Trigger animation on next frame so transition fires
+    requestAnimationFrame(function () {
+      requestAnimationFrame(function () {
+        $tip.addClass('copy-tooltip-visible');
+      });
+    });
      setTimeout(function () {
-       $tip.fadeOut(200, function () { $(this).remove(); });
+       $tip.removeClass('copy-tooltip-visible');
-     }, 1200);
+      // Remove after fade-out transition completes
+      setTimeout(function () { $tip.remove(); }, 400);
+     }, 1400);
    }
@@ Line 91: / Line 38: @@
    }
 }
+    // ── Commentary toggle handler ─────────────────────────────────────────
+    function handleCommentary( btn ) {
+        var verseId = btn.getAttribute( 'data-verse' );
+        if ( !verseId ) return;
+        var block = document.getElementById( verseId );
+        if ( !block ) return;
+        // Toggle visibility of all commentary panels inside this verse block
+        var panels = block.querySelectorAll( '.commentary-block' );
+        panels.forEach( function ( panel ) {
+            var isHidden = panel.style.display === 'none' || !panel.style.display;
+            panel.style.display = isHidden ? '' : 'none';
+        } );
+        btn.classList.toggle( 'verse-action-active' );
+    }
+    // ── Single delegated listener on the document ─────────────────────────
+    document.addEventListener( 'click', function ( e ) {
+        var btn = e.target.closest( '.verse-action-btn' );
+        if ( !btn ) return;
+        if ( btn.classList.contains( 'verse-action-copy' ) ) {
+            handleCopy( btn );
+        } else if ( btn.classList.contains( 'verse-action-commentary' ) ) {
+            handleCommentary( btn );
+        }
+    } );
+}() );