jetformbuilder
/
modules
/
blocks-v2
/
phone-field
/
assets
/
src
/
frontend
/
field
/
i18n-loader.js
jetformbuilder
/
modules
/
blocks-v2
/
phone-field
/
assets
/
src
/
frontend
/
field
Last commit date
PhoneFieldData.js
2 months ago
i18n-loader.js
2 months ago
index.js
4 months ago
style.scss
4 months ago
i18n-loader.js
248 lines
| 1 | /** |
| 2 | * i18n Loader for intl-tel-input translations (side-effect imports) |
| 3 | * |
| 4 | * This module uses side-effect imports as recommended by intl-tel-input authors. |
| 5 | * Each locale import registers itself in the global intlTelInputGlobals object. |
| 6 | */ |
| 7 | |
| 8 | /** |
| 9 | * Map normalized locale codes to intl-tel-input i18n folder names. |
| 10 | */ |
| 11 | const localeMap = { |
| 12 | ar: 'ar', |
| 13 | bg: 'bg', |
| 14 | bn: 'bn', |
| 15 | bs: 'bs', |
| 16 | ca: 'ca', |
| 17 | cs: 'cs', |
| 18 | da: 'da', |
| 19 | de: 'de', |
| 20 | el: 'el', |
| 21 | en: 'en', |
| 22 | es: 'es', |
| 23 | fa: 'fa', |
| 24 | fi: 'fi', |
| 25 | fr: 'fr', |
| 26 | hi: 'hi', |
| 27 | hr: 'hr', |
| 28 | hu: 'hu', |
| 29 | id: 'id', |
| 30 | it: 'it', |
| 31 | ja: 'ja', |
| 32 | ko: 'ko', |
| 33 | mr: 'mr', |
| 34 | nl: 'nl', |
| 35 | no: 'no', |
| 36 | pl: 'pl', |
| 37 | pt: 'pt', |
| 38 | ro: 'ro', |
| 39 | ru: 'ru', |
| 40 | sk: 'sk', |
| 41 | sv: 'sv', |
| 42 | te: 'te', |
| 43 | th: 'th', |
| 44 | tr: 'tr', |
| 45 | uk: 'uk', |
| 46 | ur: 'ur', |
| 47 | vi: 'vi', |
| 48 | zh: 'zh', |
| 49 | }; |
| 50 | |
| 51 | /** |
| 52 | * Dynamic import loaders for each supported locale |
| 53 | * These are side-effect imports that register translations globally |
| 54 | * Note: English is built-in to intl-tel-input, so no loader needed |
| 55 | */ |
| 56 | const loaders = { |
| 57 | uk: () => import( /* webpackChunkName: "phone-i18n-uk" */ '../../../lib/intl-tel-input/i18n/uk' ), |
| 58 | ru: () => import( /* webpackChunkName: "phone-i18n-ru" */ '../../../lib/intl-tel-input/i18n/ru' ), |
| 59 | de: () => import( /* webpackChunkName: "phone-i18n-de" */ '../../../lib/intl-tel-input/i18n/de' ), |
| 60 | fr: () => import( /* webpackChunkName: "phone-i18n-fr" */ '../../../lib/intl-tel-input/i18n/fr' ), |
| 61 | es: () => import( /* webpackChunkName: "phone-i18n-es" */ '../../../lib/intl-tel-input/i18n/es' ), |
| 62 | it: () => import( /* webpackChunkName: "phone-i18n-it" */ '../../../lib/intl-tel-input/i18n/it' ), |
| 63 | pl: () => import( /* webpackChunkName: "phone-i18n-pl" */ '../../../lib/intl-tel-input/i18n/pl' ), |
| 64 | pt: () => import( /* webpackChunkName: "phone-i18n-pt" */ '../../../lib/intl-tel-input/i18n/pt' ), |
| 65 | nl: () => import( /* webpackChunkName: "phone-i18n-nl" */ '../../../lib/intl-tel-input/i18n/nl' ), |
| 66 | ja: () => import( /* webpackChunkName: "phone-i18n-ja" */ '../../../lib/intl-tel-input/i18n/ja' ), |
| 67 | zh: () => import( /* webpackChunkName: "phone-i18n-zh" */ '../../../lib/intl-tel-input/i18n/zh' ), |
| 68 | ko: () => import( /* webpackChunkName: "phone-i18n-ko" */ '../../../lib/intl-tel-input/i18n/ko' ), |
| 69 | ar: () => import( /* webpackChunkName: "phone-i18n-ar" */ '../../../lib/intl-tel-input/i18n/ar' ), |
| 70 | tr: () => import( /* webpackChunkName: "phone-i18n-tr" */ '../../../lib/intl-tel-input/i18n/tr' ), |
| 71 | sv: () => import( /* webpackChunkName: "phone-i18n-sv" */ '../../../lib/intl-tel-input/i18n/sv' ), |
| 72 | da: () => import( /* webpackChunkName: "phone-i18n-da" */ '../../../lib/intl-tel-input/i18n/da' ), |
| 73 | fi: () => import( /* webpackChunkName: "phone-i18n-fi" */ '../../../lib/intl-tel-input/i18n/fi' ), |
| 74 | no: () => import( /* webpackChunkName: "phone-i18n-no" */ '../../../lib/intl-tel-input/i18n/no' ), |
| 75 | cs: () => import( /* webpackChunkName: "phone-i18n-cs" */ '../../../lib/intl-tel-input/i18n/cs' ), |
| 76 | hu: () => import( /* webpackChunkName: "phone-i18n-hu" */ '../../../lib/intl-tel-input/i18n/hu' ), |
| 77 | ro: () => import( /* webpackChunkName: "phone-i18n-ro" */ '../../../lib/intl-tel-input/i18n/ro' ), |
| 78 | bg: () => import( /* webpackChunkName: "phone-i18n-bg" */ '../../../lib/intl-tel-input/i18n/bg' ), |
| 79 | hr: () => import( /* webpackChunkName: "phone-i18n-hr" */ '../../../lib/intl-tel-input/i18n/hr' ), |
| 80 | sk: () => import( /* webpackChunkName: "phone-i18n-sk" */ '../../../lib/intl-tel-input/i18n/sk' ), |
| 81 | el: () => import( /* webpackChunkName: "phone-i18n-el" */ '../../../lib/intl-tel-input/i18n/el' ), |
| 82 | th: () => import( /* webpackChunkName: "phone-i18n-th" */ '../../../lib/intl-tel-input/i18n/th' ), |
| 83 | vi: () => import( /* webpackChunkName: "phone-i18n-vi" */ '../../../lib/intl-tel-input/i18n/vi' ), |
| 84 | id: () => import( /* webpackChunkName: "phone-i18n-id" */ '../../../lib/intl-tel-input/i18n/id' ), |
| 85 | hi: () => import( /* webpackChunkName: "phone-i18n-hi" */ '../../../lib/intl-tel-input/i18n/hi' ), |
| 86 | bn: () => import( /* webpackChunkName: "phone-i18n-bn" */ '../../../lib/intl-tel-input/i18n/bn' ), |
| 87 | ur: () => import( /* webpackChunkName: "phone-i18n-ur" */ '../../../lib/intl-tel-input/i18n/ur' ), |
| 88 | fa: () => import( /* webpackChunkName: "phone-i18n-fa" */ '../../../lib/intl-tel-input/i18n/fa' ), |
| 89 | mr: () => import( /* webpackChunkName: "phone-i18n-mr" */ '../../../lib/intl-tel-input/i18n/mr' ), |
| 90 | te: () => import( /* webpackChunkName: "phone-i18n-te" */ '../../../lib/intl-tel-input/i18n/te' ), |
| 91 | bs: () => import( /* webpackChunkName: "phone-i18n-bs" */ '../../../lib/intl-tel-input/i18n/bs' ), |
| 92 | ca: () => import( /* webpackChunkName: "phone-i18n-ca" */ '../../../lib/intl-tel-input/i18n/ca' ), |
| 93 | }; |
| 94 | |
| 95 | /** |
| 96 | * Cache for loaded translation modules |
| 97 | */ |
| 98 | const translationCache = {}; |
| 99 | |
| 100 | const getWindowLocaleContext = () => { |
| 101 | return typeof window.jfbPhoneFieldLocaleContext === 'object' && |
| 102 | window.jfbPhoneFieldLocaleContext !== null |
| 103 | ? window.jfbPhoneFieldLocaleContext |
| 104 | : {}; |
| 105 | }; |
| 106 | |
| 107 | const getFirstNormalizedLocale = ( candidates = [] ) => { |
| 108 | for ( const locale of candidates ) { |
| 109 | const normalizedLocale = normalizeLocale( locale ); |
| 110 | |
| 111 | if ( normalizedLocale ) { |
| 112 | return normalizedLocale; |
| 113 | } |
| 114 | } |
| 115 | |
| 116 | return ''; |
| 117 | }; |
| 118 | |
| 119 | export function normalizeLocale( locale ) { |
| 120 | if ( ! locale || 'string' !== typeof locale ) { |
| 121 | return ''; |
| 122 | } |
| 123 | |
| 124 | const sanitized = locale.trim().replace( /-/g, '_' ); |
| 125 | |
| 126 | if ( ! sanitized ) { |
| 127 | return ''; |
| 128 | } |
| 129 | |
| 130 | const [ language = '', region = '' ] = sanitized.split( '_' ); |
| 131 | |
| 132 | if ( ! language ) { |
| 133 | return ''; |
| 134 | } |
| 135 | |
| 136 | return region |
| 137 | ? `${ language.toLowerCase() }_${ region.toUpperCase() }` |
| 138 | : language.toLowerCase(); |
| 139 | } |
| 140 | |
| 141 | export function resolveIntlLocale( locale ) { |
| 142 | const normalizedLocale = normalizeLocale( locale ); |
| 143 | |
| 144 | if ( ! normalizedLocale ) { |
| 145 | return 'en'; |
| 146 | } |
| 147 | |
| 148 | const [ language ] = normalizedLocale.split( '_' ); |
| 149 | |
| 150 | return localeMap[ normalizedLocale ] || localeMap[ language ] || 'en'; |
| 151 | } |
| 152 | |
| 153 | /** |
| 154 | * Load translations for intl-tel-input (ESM import approach) |
| 155 | * |
| 156 | * @param {string} wpLocale - WordPress locale (e.g., 'uk', 'de_DE') |
| 157 | * @return {Promise<Object>} - Promise that resolves to translations object |
| 158 | */ |
| 159 | export async function loadIntlTelInputLocale( wpLocale ) { |
| 160 | const locale = resolveIntlLocale( wpLocale ); |
| 161 | |
| 162 | // English is built-in to intl-tel-input, no need to load |
| 163 | if ( locale === 'en' ) { |
| 164 | return {}; |
| 165 | } |
| 166 | |
| 167 | // Check cache first |
| 168 | if ( translationCache[ locale ] ) { |
| 169 | return translationCache[ locale ]; |
| 170 | } |
| 171 | |
| 172 | // Get loader for this locale |
| 173 | const loader = loaders[ locale ]; |
| 174 | |
| 175 | if ( ! loader ) { |
| 176 | // No loader found, return empty (will use English default) |
| 177 | return {}; |
| 178 | } |
| 179 | |
| 180 | try { |
| 181 | // Execute import and get the module |
| 182 | const module = await loader(); |
| 183 | |
| 184 | // Extract translations from the module |
| 185 | // module.default contains merged translations (countries + interface) |
| 186 | const translations = module.default || {}; |
| 187 | |
| 188 | // Cache the result |
| 189 | translationCache[ locale ] = translations; |
| 190 | |
| 191 | return translations; |
| 192 | } catch { |
| 193 | return {}; |
| 194 | } |
| 195 | } |
| 196 | |
| 197 | /** |
| 198 | * Get WordPress locale from document or global variable |
| 199 | * |
| 200 | * @return {string} WordPress locale code |
| 201 | */ |
| 202 | export function getPageLocale() { |
| 203 | const localeContext = getWindowLocaleContext(); |
| 204 | |
| 205 | return getFirstNormalizedLocale( [ |
| 206 | localeContext.pageLocale, |
| 207 | localeContext.pageLang, |
| 208 | document.documentElement?.lang, |
| 209 | localeContext.siteLocale, |
| 210 | localeContext.siteLang, |
| 211 | ] ); |
| 212 | } |
| 213 | |
| 214 | export function getSiteLocale() { |
| 215 | const localeContext = getWindowLocaleContext(); |
| 216 | |
| 217 | return getFirstNormalizedLocale( [ |
| 218 | localeContext.siteLocale, |
| 219 | localeContext.siteLang, |
| 220 | ] ); |
| 221 | } |
| 222 | |
| 223 | export function resolveCurrentLocale() { |
| 224 | return getPageLocale() || 'en'; |
| 225 | } |
| 226 | |
| 227 | /** |
| 228 | * Load translations based on current WordPress locale |
| 229 | * |
| 230 | * @return {Promise<Object>} Country translations |
| 231 | */ |
| 232 | export async function loadCurrentLocaleTranslations() { |
| 233 | const locale = resolveCurrentLocale(); |
| 234 | |
| 235 | return await loadIntlTelInputLocale( locale ); |
| 236 | } |
| 237 | |
| 238 | export default { |
| 239 | loadIntlTelInputLocale, |
| 240 | loadCurrentLocaleTranslations, |
| 241 | getPageLocale, |
| 242 | getSiteLocale, |
| 243 | resolveCurrentLocale, |
| 244 | resolveIntlLocale, |
| 245 | normalizeLocale, |
| 246 | localeMap, |
| 247 | }; |
| 248 |