ACORE/static/assets/js/admin_phone_format.js

(function () {
  'use strict';

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

    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); // 9 digits after country code
    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;
    }
    input.value = toPretty(current);
  }

  function normalizePhoneInputs(scope) {
    var root = scope || document;
    var inputs = root.querySelectorAll('input[type="text"]');

    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"]');
    for (var i = 0; i < inputs.length; i += 1) {
      if (!isPhoneField(inputs[i])) {
        continue;
      }

      if (!inputs[i].value) {
        continue;
      }

      inputs[i].value = toCanonical(inputs[i].value);
    }
  }, true);

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