ACORE/static/assets/js/admin_phone_format.js

(function () {
  'use strict';
  if (window.__acorePhoneFormatLoaded) {
    return;
  }
  window.__acorePhoneFormatLoaded = true;

  function isPhoneField(input) {
    if (!input || input.tagName !== 'INPUT') {
      return false;
    }
    if (input.type && input.type !== 'text' && input.type !== 'tel') {
      return false;
    }

    if ((input.className || '').split(/\s+/).indexOf('js-phone') !== -1) {
      return true;
    }
    if ((input.getAttribute('inputmode') || '') === 'tel') {
      return true;
    }
    if ((input.getAttribute('autocomplete') || '') === 'tel') {
      return true;
    }

    var name = (input.name || '').toLowerCase();
    var id = (input.id || '').toLowerCase();
    return name.indexOf('phone') !== -1 || id.indexOf('phone') !== -1;
  }

  function onlyDigits(value) {
    return (value || '').replace(/\D/g, '');
  }

  function toUaDigits(value) {
    var digits = onlyDigits(value);
    if (!digits) {
      return '';
    }

    if (digits.indexOf('380') === 0) {
      return digits.slice(0, 12);
    }

    if (digits.indexOf('80') === 0) {
      return ('3' + digits).slice(0, 12);
    }

    if (digits.charAt(0) === '0') {
      return ('38' + digits).slice(0, 12);
    }

    if (digits.length <= 9) {
      return ('380' + digits).slice(0, 12);
    }

    return digits.slice(0, 12);
  }

  function toCanonical(value) {
    var uaDigits = toUaDigits(value);
    if (!uaDigits) {
      return '';
    }
    return '+' + uaDigits;
  }

  function toPretty(value) {
    var uaDigits = toUaDigits(value);
    if (!uaDigits) {
      return '';
    }

    var local = uaDigits.slice(3);
    var p1 = local.slice(0, 2);
    var p2 = local.slice(2, 5);
    var p3 = local.slice(5, 7);
    var p4 = local.slice(7, 9);

    var result = '+380';
    if (p1) {
      result += ' (' + p1;
    }
    if (p1.length === 2) {
      result += ')';
    }
    if (p2) {
      result += ' ' + p2;
    }
    if (p3) {
      result += '-' + p3;
    }
    if (p4) {
      result += '-' + p4;
    }

    return result;
  }

  function formatField(input) {
    var current = input.value;
    if (!current) {
      return;
    }
    var pretty = toPretty(current);
    if (pretty === current) {
      return;
    }
    input.value = pretty;
  }

  function normalizePhoneInputs(scope) {
    var root = scope || document;
    if (!root.querySelectorAll) {
      return;
    }
    var inputs = root.querySelectorAll('input[type="text"], input[type="tel"], input.js-phone');

    for (var i = 0; i < inputs.length; i += 1) {
      if (!isPhoneField(inputs[i])) {
        continue;
      }
      formatField(inputs[i]);
    }
  }

  document.addEventListener('input', function (event) {
    var input = event.target;
    if (!isPhoneField(input)) {
      return;
    }
    formatField(input);
  });

  document.addEventListener('blur', function (event) {
    var input = event.target;
    if (!isPhoneField(input)) {
      return;
    }
    formatField(input);
  }, true);

  document.addEventListener('submit', function (event) {
    var form = event.target;
    if (!form || form.tagName !== 'FORM') {
      return;
    }

    var inputs = form.querySelectorAll('input[type="text"], input[type="tel"], input.js-phone');
    for (var i = 0; i < inputs.length; i += 1) {
      if (!isPhoneField(inputs[i]) || !inputs[i].value) {
        continue;
      }
      inputs[i].value = toCanonical(inputs[i].value);
    }
  }, true);

  document.addEventListener('htmx:configRequest', function (event) {
    var params = event.detail && event.detail.parameters;
    if (!params) {
      return;
    }
    var source = event.detail.elt;
    var form = source && source.closest ? source.closest('form') : null;
    if (!form) {
      return;
    }
    var inputs = form.querySelectorAll('input[type="text"], input[type="tel"], input.js-phone');
    for (var i = 0; i < inputs.length; i += 1) {
      if (!isPhoneField(inputs[i]) || !inputs[i].name || !inputs[i].value) {
        continue;
      }
      var canonical = toCanonical(inputs[i].value);
      if (typeof params.set === 'function') {
        params.set(inputs[i].name, canonical);
      } else {
        params[inputs[i].name] = canonical;
      }
    }
  });

  document.addEventListener('htmx:afterSwap', function (event) {
    var target = event.detail && event.detail.target;
    normalizePhoneInputs(target || document);
  });

  document.addEventListener('DOMContentLoaded', function () {
    normalizePhoneInputs(document);
  });
})();