MediaWiki:Common.js: Difference between revisions

Revision as of 17:34, 25 March 2026

/* Global handlers for verse UI */

mw.hook('wikipage.content').add(function ($content) {

  /* =========================
     COMMENTARY TOGGLE
  ========================= */
  $content.off('click', '.verse-action-commentary').on('click', '.verse-action-commentary', function (e) {
    e.preventDefault();

    var verseId = $(this).data('verse');
    if (!verseId) return;

    var $bodies = $('.commentary-body[data-verse="' + verseId + '"]');

    $bodies.toggleClass('commentary-hidden');

    // Optional active state
    $(this).toggleClass('active');
  });


  /* =========================
     COPY VERSE (ICON BUTTON)
  ========================= */
  $content.off('click', '.verse-action-copy').on('click', '.verse-action-copy', function (e) {
    e.preventDefault();

    var $btn  = $(this);
    var line1 = $btn.data('line1') || '';
    var line2 = $btn.data('line2') || '';
    var text  = line2 ? line1 + '\n' + line2 : line1;

    if (!text) return;

    function showFeedback() {
      $btn.addClass('copied');

      setTimeout(function () {
        $btn.removeClass('copied');
      }, 1500);
    }

    // Clipboard API
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(showFeedback);
    } else {
      // fallback
      var $temp = $('<textarea>').val(text).appendTo('body');
      $temp[0].select();
      document.execCommand('copy');
      $temp.remove();
      showFeedback();
    }
  });


  /* =========================
     COPY ID BUTTON (if used)
  ========================= */
  $content.off('click', '.copy-id-btn').on('click', '.copy-id-btn', function () {
    var $btn = $(this);
    var id = $btn.data('copyid');
    if (!id) return;

    function showFeedback() {
      $btn.addClass('copied').text('✓');
      setTimeout(function () {
        $btn.removeClass('copied').text('⧉');
      }, 1800);
    }

    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(id).then(showFeedback);
    } else {
      var temp = $('<textarea>').val(id).appendTo('body');
      temp[0].select();
      document.execCommand('copy');
      temp.remove();
      showFeedback();
    }
  });


  /* =========================
     MENU (3 DOTS) SYSTEM
  ========================= */

  // Open/close menu
  $content.off('click', '.verse-dots').on('click', '.verse-dots', function (e) {
    e.stopPropagation();

    var $menu = $(this).next('.verse-menu');
    var isOpen = $menu.hasClass('open');

    $('.verse-menu.open').removeClass('open');
    $('.verse-dots.open').removeClass('open');

    if (!isOpen) {
      $menu.addClass('open');
      $(this).addClass('open');
    }
  });

  // Close on outside click
  $(document).off('click.verseMenu').on('click.verseMenu', function () {
    $('.verse-menu.open').removeClass('open');
    $('.verse-dots.open').removeClass('open');
  });

  // Menu → Commentary
  $content.off('click', '.verse-menu-commentary').on('click', '.verse-menu-commentary', function () {
    var verseId = $(this).data('verse');

    $('.commentary-body[data-verse="' + verseId + '"]').toggleClass('commentary-hidden');

    $('.verse-menu.open').removeClass('open');
    $('.verse-dots.open').removeClass('open');
  });

  // Menu → Copy
  $content.off('click', '.verse-menu-copy').on('click', '.verse-menu-copy', function () {
    var $dots = $(this).closest('.verse-menu').prev('.verse-dots');

    var line1 = $dots.data('line1') || '';
    var line2 = $dots.data('line2') || '';
    var text  = line2 ? line1 + '\n' + line2 : line1;

    var $item = $(this);

    function showFeedback() {
      $item.html('<span class="verse-menu-icon">✓</span> Copied!');
      setTimeout(function () {
        $item.html('<span class="verse-menu-icon">⧉</span> Copy verse');
        $('.verse-menu.open').removeClass('open');
        $('.verse-dots.open').removeClass('open');
      }, 1500);
    }

    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(text).then(showFeedback);
    } else {
      var $t = $('<textarea>').val(text).appendTo('body');
      $t[0].select();
      document.execCommand('copy');
      $t.remove();
      showFeedback();
    }
  });

  // Menu → Download
  $content.off('click', '.verse-menu-download').on('click', '.verse-menu-download', function () {
    var $dots = $(this).closest('.verse-menu').prev('.verse-dots');

    var id    = $dots.data('verse') || 'verse';
    var line1 = $dots.data('line1') || '';
    var line2 = $dots.data('line2') || '';
    var text  = line2 ? line1 + '\n' + line2 : line1;

    var blob = new Blob([text], { type: 'text/plain;charset=utf-8' });
    var url  = URL.createObjectURL(blob);

    var $a = $('<a>').attr({ href: url, download: id + '.txt' }).appendTo('body');
    $a[0].click();
    $a.remove();

    URL.revokeObjectURL(url);

    $('.verse-menu.open').removeClass('open');
    $('.verse-dots.open').removeClass('open');
  });

});