templates/backOffice/appParts/phoneNumberJs.html.twig line 1

Open in your IDE?
  1. <script>
  2.     let regexFormatPhoneNumber="";
  3.     let regexPhoneNumber="";
  4.     let formatPhoneNumber="";
  5.     let placeholderPhoneNumber="";
  6.     let idCountryPhoneNumber=false;
  7.     let phoneCodePhoneNumber=false;
  8.     let phoneInputIdPhoneNumber=false;
  9.     let countryInputIdPhoneNumber=false;
  10.     let phoneCodeInputIdPhoneNumber=false;
  11.     let maxDigits =10;
  12.     const initPhoneNumberFormat = async (id,countryInputId,phoneCodeInputId) => {
  13.         phoneInputIdPhoneNumber = id;
  14.         countryInputIdPhoneNumber = countryInputId;
  15.         phoneCodeInputIdPhoneNumber = phoneCodeInputId;
  16.         // console.log('phoneCodeInputIdPhoneNumber---------------');
  17.         // console.log(phoneCodeInputIdPhoneNumber);
  18.         //Get from the database the regex and format.
  19.         let inputPhoneJq=$("#"+id);
  20.         const result = await phoneNumberFormat(inputPhoneJq.val());
  21.         inputPhoneJq.val(result);
  22.         inputPhoneJq.attr('placeholder',placeholderPhoneNumber);
  23.         inputPhoneJq.attr('data-regex',regexFormatPhoneNumber);
  24.         const inputPhone = document.getElementById(id);
  25.         inputPhone.addEventListener('keydown',enforceFormat);
  26.         inputPhone.addEventListener('keyup',formatToPhone);
  27.         if(countryInputIdPhoneNumber) {
  28.             document.getElementById(countryInputIdPhoneNumber).addEventListener('change', initToPhone);
  29.         }
  30.         $('#'+phoneCodeInputIdPhoneNumber).on('change', initToPhoneByChangeCode);//This is for select2
  31.         return result
  32.     }
  33.     const phoneNumberFormat = async(inputValue) => {
  34.         await getPhoneNumberFormatByCountryCode();
  35.         if(regexPhoneNumber) {
  36.             inputValue = inputValue.replace(/\D/g, '').substring(0, maxDigits); // First x digits of input only
  37.             regexPhoneNumber = regexPhoneNumber.replaceAll('/', '');
  38.             //Phone number:
  39.             return inputValue.replace(new RegExp(regexPhoneNumber), formatPhoneNumber);
  40.         }
  41.         inputValue = inputValue.replace(/\D-/g, '').substring(0, maxDigits); // First x digits of input only
  42.         return inputValue;
  43.     }
  44.     const formatToPhone = async(event) => {
  45.         if(isModifierKey(event)) {return;}
  46.         event.target.value = await phoneNumberFormat(event.target.value);
  47.         event.target.attributes['placeholder']=placeholderPhoneNumber;
  48.     };
  49.     const isNumericInput = (event) => {
  50.         const key = event.keyCode;
  51.         return ((key >= 48 && key <= 57) || // Allow number line
  52.             (key >= 96 && key <= 105) // Allow number pad
  53.         );
  54.     };
  55.     const isSeparatorInput = (event) => {
  56.         const key = event.keyCode;
  57.         return (key==189); // Allow "-"
  58.     };
  59.     const isModifierKey = (event) => {
  60.         const key = event.keyCode;
  61.         return (event.shiftKey === true || key === 35 || key === 36) || // Allow Shift, Home, End
  62.             (key === 8 || key === 9 || key === 13 || key === 46) || // Allow Backspace, Tab, Enter, Delete
  63.             (key > 36 && key < 41) || // Allow left, up, right, down
  64.             (
  65.                 // Allow Ctrl/Command + A,C,V,X,Z
  66.                 (event.ctrlKey === true || event.metaKey === true) &&
  67.                 (key === 65 || key === 67 || key === 86 || key === 88 || key === 90)
  68.             )
  69.     };
  70.     const initToPhone = (event) => {
  71.         enforceFormat(event);
  72.         formatToPhone(event);
  73.     };
  74.     const initToPhoneByChangeCode = async() => {
  75.         //When th Phone code change, then update phone number format
  76.         let phoneInputIdPhoneNumberId="#" + phoneInputIdPhoneNumber;
  77.         const result = await phoneNumberFormat($(phoneInputIdPhoneNumberId).val());
  78.         $(phoneInputIdPhoneNumberId).val(result);
  79.         $(phoneInputIdPhoneNumberId).attr('placeholder', placeholderPhoneNumber);
  80.         $(phoneInputIdPhoneNumberId).attr('data-regex', regexFormatPhoneNumber);
  81.     };
  82.     const enforceFormat = (event) => {
  83.         // Input must be of a valid number format or a modifier key, and not longer than ten digits
  84.         if(!isNumericInput(event) && !isModifierKey(event)){
  85.             if((regexFormatPhoneNumber==="") && isSeparatorInput(event)){
  86.                //ignore this case. This happens when the regex is not defined and the char is -
  87.             }
  88.             else{
  89.                 event.preventDefault();
  90.             }
  91.         }
  92.     };
  93.     function getPhoneNumberFormatByCountryCode(){
  94.         let checkDone = $.Deferred();
  95.         let idCountry = 0;
  96.         if(countryInputIdPhoneNumber) {
  97.             idCountry = $('#' + countryInputIdPhoneNumber + ' option:selected').val();
  98.         }
  99.         let phoneCode = $('#'+phoneCodeInputIdPhoneNumber+' option:selected').text();
  100.         if(phoneCode!==phoneCodePhoneNumber || idCountry!==idCountryPhoneNumber) {
  101.             $.ajax({
  102.                 data: {idCountry: idCountry, phoneCode: phoneCode},
  103.                 type: 'post',
  104.                 url: "{{ path('phone_format_by_country_code') }}",
  105.                 success: function (data) {
  106.                     // console.log('data');
  107.                     // console.log(data);
  108.                     if (data) {
  109.                         regexFormatPhoneNumber=data['regexFormat'];
  110.                         regexPhoneNumber=data['regex'];
  111.                         formatPhoneNumber=data['format'];
  112.                         placeholderPhoneNumber=data['placeholder'];
  113.                         maxDigits=data['maxDigits'];
  114.                         idCountryPhoneNumber=idCountry;
  115.                         phoneCodePhoneNumber=phoneCode;
  116.                         $("#"+phoneCodeInputIdPhoneNumber).attr('placeholder',placeholderPhoneNumber);
  117.                     }
  118.                     checkDone.resolve();
  119.                 },
  120.                 fail: function() {
  121.                     checkDone.resolve();
  122.                 }
  123.             });
  124.         }
  125.         else{
  126.             checkDone.resolve();
  127.         }
  128.         return $.when(checkDone).done(function(){
  129.             // Asyncs tasks are done
  130.         }).promise();
  131.     }
  132. </script>