wordpress-theme-aksrt/assets/js/core/comment-fixed-input.js

/**
 * Mobile FixedInput + autoheight for comment respond (zibll parity).
 */
(function () {
  'use strict';

  function $(sel, root) {
    return (root || document).querySelector(sel);
  }

  function FixedInput(el, action) {
    if (!el) return;
    if (!el.dataset.fixedBound) {
      el.addEventListener('click', function (e) {
        if (e.target && e.target.closest && e.target.closest('.fixed-body')) {
          FixedInput(el, 'hide');
        }
      });
      el.dataset.fixedBound = '1';
    }
    if (action === 'show') {
      el.classList.add('show');
      window.setTimeout(function () {
        var field = el.querySelector('textarea, input');
        if (field) field.focus();
      }, 100);
      return;
    }
    if (action === 'hide') {
      var cancel = el.querySelector('#cancel-comment-reply-link');
      if (cancel) cancel.click();
      el.querySelectorAll('input,textarea').forEach(function (n) {
        try { n.blur(); } catch (e) {}
      });
      el.querySelectorAll('.dropup.open, .open').forEach(function (n) {
        n.classList.remove('open');
      });
      el.classList.remove('show');
    }
  }

  document.addEventListener('click', function (e) {
    var trigger = e.target && e.target.closest ? e.target.closest('[fixed-input]') : null;
    if (!trigger) return;
    e.preventDefault();
    var targetSel = trigger.getAttribute('fixed-input') || '#respond';
    var panel = document.querySelector(targetSel);
    var comments = document.getElementById('comments');
    if (comments && comments.scrollIntoView) {
      comments.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
    FixedInput(panel, 'show');
  });

  // Autoheight textareas.
  function bindAutoheight(ta) {
    if (!ta || ta.dataset.autoheightBound) return;
    ta.dataset.autoheightBound = '1';
    var max = parseInt(ta.getAttribute('maxheight') || '188', 10) || 188;
    var resize = function () {
      ta.style.height = 'auto';
      var h = Math.min(ta.scrollHeight, max);
      ta.style.height = h + 'px';
      ta.style.overflowY = ta.scrollHeight > max ? 'auto' : 'hidden';
    };
    ta.addEventListener('input', resize);
    resize();
  }

  function scan() {
    document.querySelectorAll('textarea[autoheight], textarea.grin').forEach(bindAutoheight);
  }

  document.addEventListener('DOMContentLoaded', scan);
  if (window.AksrtFrontend && typeof window.AksrtFrontend.register === 'function') {
    window.AksrtFrontend.register('aksrt-comment-fixed-input', function (root) {
      scan();
      // Expose for submit hide.
      root = root || document;
      var respond = root.querySelector ? root.querySelector('#respond') : document.getElementById('respond');
      if (respond) {
        respond.aksrtFixedInput = function (action) {
          FixedInput(respond, action);
        };
      }
    });
  }

  window.AksrtFixedInput = FixedInput;
})();