imba-localization 0.4.6 → 0.4.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/localization.imba +86 -19
- package/package.json +1 -1
package/localization.imba
CHANGED
|
@@ -65,34 +65,95 @@ export class Localization
|
|
|
65
65
|
|
|
66
66
|
export const path-arrow-down = <path d="M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z">
|
|
67
67
|
|
|
68
|
+
# Emoji flags mapping - comprehensive list by region
|
|
69
|
+
const flags = {
|
|
70
|
+
# Europe
|
|
71
|
+
'gb': '🇬🇧', 'us': '🇺🇸', 'ru': '🇷🇺', 'de': '🇩🇪', 'fr': '🇫🇷',
|
|
72
|
+
'es': '🇪🇸', 'it': '🇮🇹', 'nl': '🇳🇱', 'pl': '🇵🇱', 'ua': '🇺🇦',
|
|
73
|
+
'cz': '🇨🇿', 'gr': '🇬🇷', 'hu': '🇭🇺', 'ro': '🇷🇴', 'se': '🇸🇪',
|
|
74
|
+
'no': '🇳🇴', 'dk': '🇩🇰', 'fi': '🇫🇮', 'pt': '🇵🇹', 'ie': '🇮🇪',
|
|
75
|
+
'be': '🇧🇪', 'at': '🇦🇹', 'ch': '🇨🇭', 'sk': '🇸🇰', 'bg': '🇧🇬',
|
|
76
|
+
'hr': '🇭🇷', 'rs': '🇷🇸', 'si': '🇸🇮', 'lt': '🇱🇹', 'lv': '🇱🇻',
|
|
77
|
+
'ee': '🇪🇪', 'is': '🇮🇸', 'lu': '🇱🇺', 'mt': '🇲🇹', 'cy': '🇨🇾',
|
|
78
|
+
'ba': '🇧🇦', 'mk': '🇲🇰', 'al': '🇦🇱', 'md': '🇲🇩', 'me': '🇲🇪',
|
|
79
|
+
'by': '🇧🇾', 'ru': '🇷🇺', 'ge': '🇬🇪', 'am': '🇦🇲', 'az': '🇦🇿',
|
|
80
|
+
|
|
81
|
+
# Asia
|
|
82
|
+
'cn': '🇨🇳', 'jp': '🇯🇵', 'kr': '🇰🇷', 'in': '🇮🇳', 'id': '🇮🇩',
|
|
83
|
+
'th': '🇹🇭', 'vn': '🇻🇳', 'ph': '🇵🇭', 'sg': '🇸🇬', 'my': '🇲🇾',
|
|
84
|
+
'hk': '🇭🇰', 'tw': '🇹🇼', 'pk': '🇵🇰', 'bd': '🇧🇩', 'lk': '🇱🇰',
|
|
85
|
+
'kh': '🇰🇭', 'la': '🇱🇦', 'mm': '🇲🇲', 'bn': '🇧🇳', 'mo': '🇲🇴',
|
|
86
|
+
'mn': '🇲🇳', 'np': '🇳🇵', 'bt': '🇧🇹', 'mv': '🇲🇻', 'kz': '🇰🇿',
|
|
87
|
+
'uz': '🇺🇿', 'tm': '🇹🇲', 'kg': '🇰🇬', 'tj': '🇹🇯', 'af': '🇦🇫',
|
|
88
|
+
|
|
89
|
+
# Middle East
|
|
90
|
+
'tr': '🇹🇷', 'il': '🇮🇱', 'ae': '🇦🇪', 'sa': '🇸🇦', 'qa': '🇶🇦',
|
|
91
|
+
'kw': '🇰🇼', 'bh': '🇧🇭', 'om': '🇴🇲', 'jo': '🇯🇴', 'lb': '🇱🇧',
|
|
92
|
+
'iq': '🇮🇶', 'ir': '🇮🇷', 'sy': '🇸🇾', 'ye': '🇾🇪', 'ps': '🇵🇸',
|
|
93
|
+
|
|
94
|
+
# Americas
|
|
95
|
+
'br': '🇧🇷', 'mx': '🇲🇽', 'ca': '🇨🇦', 'ar': '🇦🇷', 'cl': '🇨🇱',
|
|
96
|
+
'co': '🇨🇴', 'pe': '🇵🇪', 've': '🇻🇪', 'ec': '🇪🇨', 'uy': '🇺🇾',
|
|
97
|
+
'py': '🇵🇾', 'bo': '🇧🇴', 'cr': '🇨🇷', 'pa': '🇵🇦', 'gt': '🇬🇹',
|
|
98
|
+
'cu': '🇨🇺', 'do': '🇩🇴', 'hn': '🇭🇳', 'sv': '🇸🇻', 'ni': '🇳🇮',
|
|
99
|
+
'jm': '🇯🇲', 'tt': '🇹🇹', 'bs': '🇧🇸', 'bb': '🇧🇧', 'pr': '🇵🇷',
|
|
100
|
+
|
|
101
|
+
# Africa
|
|
102
|
+
'za': '🇿🇦', 'eg': '🇪🇬', 'ng': '🇳🇬', 'ke': '🇰🇪', 'gh': '🇬🇭',
|
|
103
|
+
'ma': '🇲🇦', 'dz': '🇩🇿', 'tn': '🇹🇳', 'et': '🇪🇹', 'tz': '🇹🇿',
|
|
104
|
+
'ug': '🇺🇬', 'zw': '🇿🇼', 'ao': '🇦🇴', 'cm': '🇨🇲', 'ci': '🇨🇮',
|
|
105
|
+
'cd': '🇨🇩', 'sn': '🇸🇳', 'ml': '🇲🇱', 'bf': '🇧🇫', 'ne': '🇳🇪',
|
|
106
|
+
'tg': '🇹🇬', 'bw': '🇧🇼', 'na': '🇳🇦', 'mz': '🇲🇿', 'mg': '🇲🇬',
|
|
107
|
+
|
|
108
|
+
# Oceania
|
|
109
|
+
'au': '🇦🇺', 'nz': '🇳🇿', 'fj': '🇫🇯', 'pg': '🇵🇬', 'ws': '🇼🇸',
|
|
110
|
+
'to': '🇹🇴', 'vu': '🇻🇺', 'sb': '🇸🇧', 'nc': '🇳🇨', 'pf': '🇵🇫',
|
|
111
|
+
'gu': '🇬🇺', 'as': '🇦🇸', 'ck': '🇨🇰', 'nu': '🇳🇺', 'tk': '🇹🇰',
|
|
112
|
+
|
|
113
|
+
# Caribbean & Atlantic
|
|
114
|
+
'bm': '🇧🇲', 'ky': '🇰🇾', 'vi': '🇻🇮', 'ag': '🇦🇬', 'dm': '🇩🇲',
|
|
115
|
+
'gd': '🇬🇩', 'kn': '🇰🇳', 'lc': '🇱🇨', 'vc': '🇻🇨', 'ai': '🇦🇮',
|
|
116
|
+
'ms': '🇲🇸', 'gp': '🇬🇵', 'mq': '🇲🇶', 'gf': '🇬🇫', 'aw': '🇦🇼',
|
|
117
|
+
'cw': '🇨🇼', 'sx': '🇸🇽', 'bq': '🇧🇶', 'tc': '🇹🇨', 'vg': '🇻🇬',
|
|
118
|
+
|
|
119
|
+
# Indian Ocean
|
|
120
|
+
'mu': '🇲🇺', 'sc': '🇸🇨', 're': '🇷🇪', 'yt': '🇾🇹', 'km': '🇰🇲',
|
|
121
|
+
'mv': '🇲🇻', 'io': '🇮🇴', 'cx': '🇨🇽', 'cc': '🇨🇨', 'hm': '🇭🇲',
|
|
122
|
+
|
|
123
|
+
# Arctic & Antarctic
|
|
124
|
+
'gl': '🇬🇱', 'fo': '🇫🇴', 'sj': '🇸🇯', 'ax': '🇦🇽', 'tf': '🇹🇫',
|
|
125
|
+
'bv': '🇧🇻', 'gs': '🇬🇸', 'aq': '🇦🇶', 'tf': '🇹🇫',
|
|
126
|
+
|
|
127
|
+
# Special territories
|
|
128
|
+
'eu': '🇪🇺', 'un': '🇺🇳', 'ac': '🇦🇨', 'ta': '🇹🇦', 'cp': '🇨🇵',
|
|
129
|
+
'dg': '🇩🇬', 'ea': '🇪🇦', 'ic': '🇮🇨', 'xk': '🇽🇰'
|
|
130
|
+
}
|
|
131
|
+
|
|
68
132
|
tag language-selector
|
|
69
133
|
state
|
|
70
|
-
icons = "https://kapowaz.github.io/square-flags/flags/##.svg"
|
|
71
134
|
#dropdown = false
|
|
72
135
|
arrow = path-arrow-down
|
|
73
136
|
passive = false
|
|
74
|
-
|
|
137
|
+
first = true # Show selected language first in dropdown
|
|
138
|
+
|
|
75
139
|
def setup
|
|
76
|
-
|
|
77
|
-
state.active = data
|
|
78
|
-
else
|
|
79
|
-
data = state.active
|
|
140
|
+
data = state.active
|
|
80
141
|
|
|
81
142
|
def onselect key
|
|
82
143
|
#dropdown = false
|
|
83
144
|
data = key
|
|
84
|
-
state.active = key
|
|
85
145
|
|
|
86
146
|
def flag language
|
|
87
147
|
const settings = language.$
|
|
88
148
|
if !settings
|
|
89
149
|
state.err.throw('localization-no-key', '$')
|
|
90
|
-
return
|
|
150
|
+
return '🌐'
|
|
91
151
|
const flag = settings.flag
|
|
92
152
|
if !flag
|
|
93
153
|
state.err.throw('localization-no-key', '$.flag')
|
|
94
|
-
return
|
|
95
|
-
|
|
154
|
+
return '🌐'
|
|
155
|
+
# Return emoji flag
|
|
156
|
+
return flags[flag] || '🌐'
|
|
96
157
|
|
|
97
158
|
def name language
|
|
98
159
|
const settings = language.$
|
|
@@ -120,30 +181,36 @@ tag language-selector
|
|
|
120
181
|
return if !passive
|
|
121
182
|
#dropdown = !#dropdown
|
|
122
183
|
|
|
123
|
-
css
|
|
184
|
+
css
|
|
124
185
|
$ease: 0.5s
|
|
125
186
|
.container rd:8px px:15px py:8px bgc:light-dark(#000000/10, #FFFFFF/20) fw:500 fs:13px ead:$ease bd:1px solid transparent
|
|
126
187
|
@.active bgc:light-dark(#000000/20, #FFFFFF/30) bd:1px solid transparent
|
|
127
|
-
.flag mr:10px
|
|
188
|
+
.flag mr:10px fs:20px lh:20px bd:1px solid transparent
|
|
128
189
|
.name mr:10px bd:1px solid transparent
|
|
129
190
|
.arrow w:16px h:16px fill:light-dark(#000000,#FFFFFF) ml:auto scale-y:-1 bd:1px solid transparent
|
|
130
191
|
@.active scale-y:1 bd:1px solid transparent
|
|
131
192
|
.menu t:100% l:50% x:-50% zi:999 backdrop-filter:blur(20px) mt:2px rd:8px rd:8px py:5px bgc:light-dark(#000000/5, #FFFFFF/10) fw:500 fs:13px ead:$ease bd:1px solid transparent
|
|
132
193
|
.item d:hflex ai:center px:10px py:5px rd:8px cursor:pointer bg@hover:light-dark(#000000/10, #FFFFFF/20) m:5px bd:1px solid transparent
|
|
133
|
-
.icon
|
|
194
|
+
.icon mr:10px fs:20px lh:20px bd:1px solid transparent
|
|
134
195
|
.text fs:13px bd:1px solid transparent
|
|
135
196
|
|
|
136
197
|
<self [pos:rel] @mouseenter=mouseenter @mouseleave=mouseleave @click=click>
|
|
137
198
|
<div.container [pos:rel d:hcc] .active=#dropdown [cursor:pointer]=(Object.keys(state.languages).length > 1)>
|
|
138
|
-
<
|
|
139
|
-
<div.name> name(state[
|
|
199
|
+
<span.flag> flag(state[data])
|
|
200
|
+
<div.name> name(state[data])
|
|
140
201
|
if Object.keys(state.languages).length > 1
|
|
141
202
|
<svg.arrow [ead:$ease] .active=#dropdown viewBox="0 0 256 256">
|
|
142
203
|
<{arrow}>
|
|
143
|
-
|
|
204
|
+
|
|
144
205
|
if #dropdown and Object.keys(state.languages).length > 1
|
|
145
206
|
<div$menu.menu [pos:abs w:100% > max-content o@off:0] ease>
|
|
207
|
+
# Current language first (if first is true)
|
|
208
|
+
if first
|
|
209
|
+
<div.item @click.trap=onselect(data)>
|
|
210
|
+
<span.icon> flag(state[data])
|
|
211
|
+
<span.text> name(state[data])
|
|
212
|
+
# Other languages
|
|
146
213
|
for own key, value of state.languages
|
|
147
|
-
<div.item @click.trap=onselect(key) [d:none]=(key ==
|
|
148
|
-
<
|
|
149
|
-
<span.text> name(value)
|
|
214
|
+
<div.item @click.trap=onselect(key) [d:none]=(key == data && first)>
|
|
215
|
+
<span.icon> flag(value)
|
|
216
|
+
<span.text> name(value)
|