https://www.villasbuigues.com/crm/pages/vendor/sooprema/country-flags/v4/country-flags.js

1import countries from './countries.json' with { type: 'json' }
2
3const enableCountryFlags = () => {
4	const forms = [...document.querySelectorAll('form')]
5
6	const flagWith = '21px'
7	const flagHeight = '16px'
8
9	forms.forEach(form => {
10		const flagInputTel = form.querySelector('.flagInputTel')
11		const flagInputTelFlag = form.querySelector('.flagInputTelFlag')
12		const flagsDropdown = form.querySelector('.flagsDropdown')
13
14		if (flagInputTel && flagInputTelFlag && flagsDropdown) {
15			const langData = []
16
17			// Set defaults
18			let defaultDataLangLoaded = flagInputTelFlag.getAttribute('data-lang').toUpperCase()
19
20			// Fix for not matching langs
21			if (defaultDataLangLoaded === 'EN') defaultDataLangLoaded = 'GB'
22			else if (defaultDataLangLoaded === 'CA') defaultDataLangLoaded = 'ES'
23			else if (defaultDataLangLoaded === 'SV') defaultDataLangLoaded = 'SE'
24
25			// Defer loading
26			flagInputTelFlag.setAttribute('loading', 'lazy')
27			flagInputTelFlag.setAttribute('width', flagWith)
28			flagInputTelFlag.setAttribute('height', flagHeight)
29
30			const getCountryImage = country => {
31				const svg = country.flags.svg
32				const png = country.flags.png
33				return svg || png || ''
34			}
35
36			countries.forEach(country => {
37				if (country.alpha2Code === defaultDataLangLoaded) flagInputTelFlag.src = getCountryImage(country)
38
39				const newCountry = {
40					flag: getCountryImage(country),
41					dial: country.callingCodes[0]
42				}
43				langData.push(newCountry)
44
45				// Dynamic country dropdown items
46				const newDropdownAnchor = document.createElement('a')
47				newDropdownAnchor.classList.add('dropdown-item')
48				newDropdownAnchor.classList.add('pointer')
49				newDropdownAnchor.setAttribute('data-lang', country.alpha2Code)
50				newDropdownAnchor.setAttribute('data-dial', country.callingCodes[0])
51
52				const newDropdownFlag = document.createElement('img')
53				newDropdownFlag.setAttribute('loading', 'lazy')
54				newDropdownFlag.setAttribute('width', flagWith)
55				newDropdownFlag.setAttribute('height', flagHeight)
56				newDropdownFlag.src = getCountryImage(country)
57				newDropdownFlag.classList.add('img-dropdown')
58
59				newDropdownAnchor.appendChild(newDropdownFlag)
60				flagsDropdown.appendChild(newDropdownAnchor)
61
62				const formatedName = country.name.length > 25 ? country.name.slice(0, 28) + '...' : country.name
63
64				newDropdownAnchor.innerHTML = newDropdownAnchor.innerHTML + '  ' + formatedName
65
66				// Set country on dropdown change
67				newDropdownAnchor.addEventListener('click', e => {
68					const dataDial = e.target.getAttribute('data-dial')
69					flagInputTelFlag.src = getCountryImage(country)
70					flagInputTel.value = '+' + dataDial + ' '
71					flagInputTel.setAttribute('data-phone-prefix', '+' + dataDial + ' ')
72				})
73			})
74
75			// Set country on typing
76			flagInputTel.addEventListener('keyup', e => {
77				let value = e.target.value
78
79				if (!value) return
80
81				value = value.replace(/[^\d]/gi, '')
82
83				langData.forEach(lang => {
84					if (+lang.dial === +value) flagInputTelFlag.src = lang.flag
85				})
86			})
87		}
88	})
89}
90
91document.addEventListener('DOMContentLoaded', enableCountryFlags)