imba-localization 0.2.6 → 0.2.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.
Files changed (4) hide show
  1. package/README.md +30 -30
  2. package/components.imba +51 -0
  3. package/localization.imba +2 -52
  4. package/package.json +12 -3
package/README.md CHANGED
@@ -175,36 +175,36 @@ Here are CSS classes (and one variable) you can redefine:
175
175
  css
176
176
  $ease: 0.5s
177
177
  .main
178
- cursor:pointer
179
- rd:8px px:15px py:8px
180
- bgc:light-dark(#000000/10, #FFFFFF/20)
181
- fw:500 fs:13px
182
- ead:$ease
183
- .main-active
184
- bgc:light-dark(#000000/20, #FFFFFF/30)
185
- .main-flag
186
- mr:10px rd:50% w:20px h:20px
187
- .main-name
188
- mr:10px
189
- .main-arrow
190
- w:16px h:16px ml:auto
191
- fill:light-dark(#000000,#FFFFFF)
192
- scale-y:-1
193
- ead:$ease
194
- .menu
195
- t:100% l:50% x:-50% mt:2px rd:8px rd:8px py:5px zi:999
196
- fw:500 fs:13px
197
- backdrop-filter:blur(20px)
198
- bgc:light-dark(#000000/5, #FFFFFF/10)
199
- ead:$ease
200
- .menu-item
201
- cursor:pointer
202
- d:hflex px:10px py:5px rd:8px m:5px
203
- bg@hover:light-dark(#000000/10, #FFFFFF/20)
204
- .menu-item-icon
205
- h:20px w:20px mr:10px rd:50%
206
- .menu-item-text
207
- fs:13px
178
+ cursor:pointer
179
+ rd:8px px:15px py:8px
180
+ bgc:light-dark(#000000/10, #FFFFFF/20)
181
+ fw:500 fs:13px
182
+ ead:$ease
183
+ .main-active
184
+ bgc:light-dark(#000000/20, #FFFFFF/30)
185
+ .main-flag
186
+ mr:10px rd:50% w:20px h:20px
187
+ .main-name
188
+ mr:10px
189
+ .main-arrow
190
+ w:16px h:16px ml:auto
191
+ fill:light-dark(#000000,#FFFFFF)
192
+ scale-y:-1
193
+ ead:$ease
194
+ .menu
195
+ t:100% l:50% x:-50% mt:2px rd:8px rd:8px py:5px zi:999
196
+ fw:500 fs:13px
197
+ backdrop-filter:blur(20px)
198
+ bgc:light-dark(#000000/5, #FFFFFF/10)
199
+ ead:$ease
200
+ .menu-item
201
+ cursor:pointer
202
+ d:hflex px:10px py:5px rd:8px m:5px
203
+ bg@hover:light-dark(#000000/10, #FFFFFF/20)
204
+ .menu-item-icon
205
+ h:20px w:20px mr:10px rd:50%
206
+ .menu-item-text
207
+ fs:13px
208
208
  ```
209
209
  LanguageSelector can be easily customized through CSS and Imba tag (class) inheritance. Here how the above classes can be adjusted via the inheritance:
210
210
 
package/components.imba ADDED
@@ -0,0 +1,51 @@
1
+ const arrow-down =
2
+ <svg viewBox="0 0 256 256">
3
+ <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">
4
+
5
+ tag icon-arrow-down
6
+ <self>
7
+ <{arrow-down}>
8
+
9
+ tag language-selector
10
+ state
11
+ icons = "https://kapowaz.github.io/square-flags/flags/##.svg"
12
+ #dropdown = false
13
+ icon-arrow = arrow-down
14
+
15
+ def onselect key
16
+ #dropdown = false
17
+ state.active = key
18
+
19
+ css
20
+ $ease: 0.5s
21
+ .main rd:8px px:15px py:8px cursor:pointer bgc:light-dark(#000000/10, #FFFFFF/20) fw:500 fs:13px ead:$ease
22
+ .main-active bgc:light-dark(#000000/20, #FFFFFF/30)
23
+ .main-flag mr:10px rd:50% w:20px h:20px
24
+ .main-name mr:10px
25
+ .main-arrow w:16px h:16px fill:light-dark(#000000,#FFFFFF) ml:auto scale-y:-1 ead:$ease
26
+ .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
27
+ .menu-item d:hflex ai:center px:10px py:5px rd:8px cursor:pointer bg@hover:light-dark(#000000/10, #FFFFFF/20) m:5px
28
+ .menu-item-icon h:20px w:20px mr:10px rd:50%
29
+ .menu-item-text fs:13px
30
+
31
+ def icon country
32
+ return icons.replace('##',country)
33
+
34
+ def mouseleave e
35
+ const rect = self.getBoundingClientRect!
36
+ const menu = $menu.getBoundingClientRect!
37
+ const inside = e.clientY >= menu.bottom || e.clientY <= rect.top || (e.clientX <= rect.left and e.clientY <= rect.bottom) || (e.clientX <= menu.left and e.clientY >= menu.top) || (e.clientX >= rect.right and e.clientY <= rect.bottom) || (e.clientX >= menu.right and e.clientY >= menu.top)
38
+ #dropdown = !inside
39
+
40
+ <self [pos:rel] @mouseenter=(#dropdown = true) @mouseleave=mouseleave>
41
+ <div.main [pos:rel d:hcc] .main-active=#dropdown>
42
+ <img.main-flag src=icon(state[state.active].$.flag)>
43
+ <div.main-name> state.$.name
44
+ <{icon-arrow}.main-arrow [scale-y:1]=#dropdown>
45
+
46
+ if #dropdown
47
+ <div$menu.menu [pos:abs w:100% > max-content o@off:0] ease>
48
+ for own key, value of state.languages
49
+ <div.menu-item @click=onselect(key) [d:none]=(key == state.active)>
50
+ <img.menu-item-icon src=icon(value.$.flag)>
51
+ <span.menu-item-text> value.$.name
package/localization.imba CHANGED
@@ -1,4 +1,4 @@
1
- export class LocalizationState
1
+ export class Localization
2
2
  onready
3
3
  onerror
4
4
  onchange
@@ -49,54 +49,4 @@ export class LocalizationState
49
49
  name = name and languages[name] ? name : active
50
50
  if window.localStorage.getItem('imba-localization') != name
51
51
  window.localStorage.setItem('imba-localization', name)
52
- onchange(name) if onchange isa Function
53
-
54
- export tag ArrowIcon
55
- <self>
56
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
57
- <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">
58
-
59
- export tag LocalizationSelector
60
- state
61
- icons = "https://kapowaz.github.io/square-flags/flags/##.svg"
62
- #dropdown = false
63
- arrow = ArrowIcon
64
-
65
- def onselect key
66
- #dropdown = false
67
- state.active = key
68
-
69
- css
70
- $ease: 0.5s
71
- .main rd:8px px:15px py:8px cursor:pointer bgc:light-dark(#000000/10, #FFFFFF/20) fw:500 fs:13px ead:$ease
72
- .main-active bgc:light-dark(#000000/20, #FFFFFF/30)
73
- .main-flag mr:10px rd:50% w:20px h:20px
74
- .main-name mr:10px
75
- .main-arrow w:16px h:16px fill:light-dark(#000000,#FFFFFF) ml:auto scale-y:-1 ead:$ease
76
- .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
77
- .menu-item d:hflex px:10px py:5px rd:8px cursor:pointer bg@hover:light-dark(#000000/10, #FFFFFF/20) m:5px
78
- .menu-item-icon h:20px w:20px mr:10px rd:50%
79
- .menu-item-text fs:13px
80
-
81
- def icon country
82
- return icons.replace('##',country)
83
-
84
- def mouseleave e
85
- const rect = self.getBoundingClientRect!
86
- const menu = $menu.getBoundingClientRect!
87
- const inside = e.clientY >= menu.bottom || e.clientY <= rect.top || (e.clientX <= rect.left and e.clientY <= rect.bottom) || (e.clientX <= menu.left and e.clientY >= menu.top) || (e.clientX >= rect.right and e.clientY <= rect.bottom) || (e.clientX >= menu.right and e.clientY >= menu.top)
88
- #dropdown = !inside
89
-
90
- <self [pos:rel] @mouseenter=(#dropdown = true) @mouseleave=mouseleave>
91
- <div.main [pos:rel d:hcc] .main-active=#dropdown>
92
- <img.main-flag src=icon(state[state.active].$.flag)>
93
- <div.main-name> state.$.name
94
- <{arrow}.main-arrow [scale-y:1]=#dropdown>
95
-
96
- if #dropdown
97
- <div$menu.menu [pos:abs w:100% > max-content o@off:0] ease>
98
- for own key, value of state.languages
99
- <div.menu-item @click=onselect(key) [d:none]=(key == state.active)>
100
- <img.menu-item-icon src=icon(value.$.flag)>
101
- <span.menu-item-text> value.$.name
102
-
52
+ onchange(name) if onchange isa Function
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "imba-localization",
3
- "version": "0.2.6",
3
+ "version": "0.2.8",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/HeapVoid/imba-localization.git"
@@ -13,6 +13,15 @@
13
13
  "license": "MIT",
14
14
  "type": "module",
15
15
  "files": [
16
- "localization.imba"
17
- ]
16
+ "localization.imba",
17
+ "components.imba"
18
+ ],
19
+ "exports": {
20
+ ".": {
21
+ "import": "./localization.imba"
22
+ },
23
+ "./components": {
24
+ "import": "./components.imba"
25
+ }
26
+ }
18
27
  }