imba-localization 0.2.7 → 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 (3) hide show
  1. package/components.imba +51 -0
  2. package/localization.imba +2 -52
  3. package/package.json +12 -3
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 ai:center 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.7",
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
  }