class PCAFE_GFSPF_Frontend {
constructor(options){
this.options=options;
this.init();
}
init(){
this.initSmartPhoneField();
this.addCountryCode();
}
triggerPhoneData(sourceId, dataName, value){
const elements=document.querySelectorAll(`.spf_${sourceId}.spf_meta_${dataName}`);
if(!elements.length){
return;
}
const element=elements[0].querySelector('input');
if(element){
element.value=value;
element.dispatchEvent(new Event('change'));
}}
initSmartPhoneField(){
if(typeof intlTelInput==='undefined'){
return;
}
const input=document.querySelector(this.options.inputId);
if(!input){
return;
}
const preValue=input.value;
const iti=window.intlTelInput(input, this.configuration());
const fieldId=`${this.options.formId}_${this.options.fieldId}`;
input.addEventListener('blur', (e)=> {
this.validateNumber(e.currentTarget, fieldId, iti);
});
input.addEventListener('keyup', (e)=> {
const currentText=iti.getNumber(intlTelInput.utils.numberFormat.E164);
if(typeof currentText==='string'){
iti.setNumber(currentText);
}
this.formatValidation(e.currentTarget, iti);
});
setTimeout(()=> {
const countryData=iti.getSelectedCountryData();
this.populatePhoneMeta(countryData);
}, 500);
input.addEventListener('countrychange', (e)=> {
const countryData=iti.getSelectedCountryData();
this.populatePhoneMeta(countryData);
});
if(preValue){
iti.setNumber(preValue);
this.validateNumber(input, fieldId, iti);
}}
populatePhoneMeta(countryData){
if(!countryData){
return;
}
const sourceId=`${this.options.formId}_${this.options.fieldId}`;
if(countryData.iso2){
this.triggerPhoneData(sourceId, 'cc', countryData.iso2);
}
if(countryData.dialCode){
this.triggerPhoneData(sourceId, 'cdc', countryData.dialCode);
this.triggerPhoneData(sourceId, 'cdcp', `+${countryData.dialCode}`);
}
if(countryData.name){
this.triggerPhoneData(sourceId, 'cn', countryData.name);
}}
configuration(){
let fieldId=`input_${this.options.fieldId}`;
let config={
initialCountry: this.options.defaultCountry,
formatOnDisplay: true,
formatAsYouType: true,
countrySearch: true,
fixDropdownWidth: true,
hiddenInput: function(telInputName){
return {
phone: fieldId
};},
useFullscreenPopup: false
};
if(this.options.language){
config.i18n=this.geti18n(this.options.language);
}
if(this.options.autoIp){
this.detectIPAddress(config, this.options.pcafe_ipinfo_key);
}
if(this.options.flag===''||this.options.flag==='flagonly'){
config.nationalMode=true;
}else if(this.options.flag==='flagcode'){
config.nationalMode=false;
config.autoHideDialCode=false;
}else{
config.nationalMode=false;
config.separateDialCode=true;
}
if(this.options.exIn==='ex_only'){
config.onlyCountries=this.options.countries.split(',');
}
if(this.options.exIn==='pre_only'){
config.excludeCountries=this.options.countries.split(',');
}
if(this.options.placeholder){
config.autoPlaceholder='off';
}
if(this.options.strictMode){
config.strictMode=true;
}
if(!this.options.countrySearch){
config.countrySearch=false;
}
config=gform.applyFilters('gform_spf_options_pre_init', config, this.options.formId, this.options.fieldId);
return config;
}
detectIPAddress(config, apiKey){
const apiUrl=apiKey ? `https://ipinfo.io?token=${apiKey}`:'https://ipinfo.io/json';
config.initialCountry='auto';
config.geoIpLookup=function(callback){
fetch(apiUrl)
.then(r=> r.json())
.then(data=> {
const country=(data&&data.country) ? data.country.toLowerCase():'us';
callback(country);
})
.catch(()=> callback('us'));
};}
validateNumber(input, fieldId, iti){
if(!input.value){
const errorMsg=input.parentNode?.parentNode?.querySelector('.error-msg');
const validMsg=input.parentNode?.parentNode?.querySelector('.valid-msg');
if(errorMsg) errorMsg.classList.add('hide');
if(validMsg) validMsg.classList.add('hide');
return;
}
const isValid=iti.isValidNumber();
const errorMsg=input.parentNode?.parentNode?.querySelector('.error-msg');
const validMsg=input.parentNode?.parentNode?.querySelector('.valid-msg');
const hiddenInput=input.parentNode?.parentNode?.querySelector('input[type="hidden"]');
const number=iti.getNumber(intlTelInput.utils.numberFormat.E164);
if(errorMsg&&validMsg&&hiddenInput){
if(isValid){
errorMsg.classList.add('hide');
validMsg.classList.remove('hide');
input.setAttribute('aria-invalid', 'false');
}else{
validMsg.classList.add('hide');
errorMsg.classList.remove('hide');
input.setAttribute('aria-invalid', 'true');
}
hiddenInput.value=number;
}}
formatValidation(input, iti){
if(!input.value){
const errorMsg=input.parentNode?.parentNode?.querySelector('.error-msg');
const validMsg=input.parentNode?.parentNode?.querySelector('.valid-msg');
if(errorMsg) errorMsg.classList.add('hide');
if(validMsg) validMsg.classList.add('hide');
return;
}
const isValid=iti.isValidNumberPrecise();
const errorMsg=input.parentNode?.parentNode?.querySelector('.error-msg');
const validMsg=input.parentNode?.parentNode?.querySelector('.valid-msg');
if(errorMsg&&validMsg){
if(isValid){
errorMsg.classList.add('hide');
validMsg.classList.remove('hide');
}else{
validMsg.classList.add('hide');
errorMsg.classList.remove('hide');
}}
}
addCountryCode(){
if(this.options.flag!=='flagcode'){
return;
}
const input=document.querySelector(this.options.inputId);
if(!input){
return;
}
const iti=intlTelInput.getInstance(input);
if(!iti){
return;
}
const handleCountryChange=(e)=> {
const currentCountryData=iti.getSelectedCountryData();
const countryCode=`+${currentCountryData.dialCode}`;
this.updateCountryCodeHandler(e.currentTarget, countryCode);
};
input.addEventListener('keydown', handleCountryChange);
input.addEventListener('input', handleCountryChange);
input.addEventListener('countrychange', handleCountryChange);
}
updateCountryCodeHandler(element, currentCode){
let value=element.value;
if(!currentCode||currentCode==='+undefined'||['', '+'].includes(value)){
return;
}
if(!value.startsWith(currentCode)){
value=value.replace(/\+/g, '');
element.value=currentCode + value;
}}
createCookie(cookieName, value, minutes){
let expires='';
if(minutes){
const date=new Date();
date.setTime(date.getTime() + minutes * 60 * 1000);
expires=`; expires=${date.toUTCString()}`;
}
document.cookie=`${cookieName}=${value}${expires}; path=/`;
}
getCookie(cookieName){
const name=`${cookieName}=`;
const decodedCookie=decodeURIComponent(document.cookie);
const ca=decodedCookie.split(';');
for (let i=0; i < ca.length; i++){
let c=ca[i].trim();
if(c.indexOf(name)===0){
return c.substring(name.length);
}}
return '';
}
geti18n(language){
const langMap={
ar: 'spf_ar', bg: 'spf_bg', bn: 'spf_bn', bs: 'spf_bs', ca: 'spf_ca',
cs: 'spf_cs', da: 'spf_da', de: 'spf_de', el: 'spf_el', es: 'spf_es',
fa: 'spf_fa', fi: 'spf_fi', fr: 'spf_fr', hi: 'spf_hi', hr: 'spf_hr',
hu: 'spf_hu', id: 'spf_id', it: 'spf_it', ja: 'spf_ja', ko: 'spf_ko',
mr: 'spf_mr', nl: 'spf_nl', no: 'spf_no', pl: 'spf_pl', pt: 'spf_pt',
ro: 'spf_ro', ru: 'spf_ru', sk: 'spf_sk', sv: 'spf_sv', te: 'spf_te',
th: 'spf_th', tr: 'spf_tr', ur: 'spf_ur', vi: 'spf_vi', zh: 'spf_zh'
};
const varName=langMap[language];
return (varName&&typeof window[varName]!=='undefined') ? window[varName]:null;
}};