zmp-cli 3.15.6 → 3.15.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 (225) hide show
  1. package/README.md +37 -0
  2. package/build/index.js +1 -184
  3. package/config/index.js +1 -44
  4. package/create/index.js +1 -230
  5. package/create/utils/generate-app-config.js +1 -34
  6. package/create/utils/generate-npm-scripts.js +1 -26
  7. package/create/utils/get-options.js +1 -204
  8. package/create/utils/npm-scripts.js +1 -62
  9. package/deploy/index.js +1 -149
  10. package/deploy/utils/get-options.js +1 -69
  11. package/deploy/utils/request-upload.js +1 -34
  12. package/deploy/utils/upload-app.js +1 -82
  13. package/index.js +1 -319
  14. package/login/index.js +1 -169
  15. package/login/utils/get-options.js +1 -58
  16. package/login/utils/zalo-login.js +1 -32
  17. package/migrate/icons/update-icon-v3.js +1 -19
  18. package/migrate/index.js +1 -60
  19. package/migrate/utils/get-options.js +1 -46
  20. package/migrate/utils/migrate-react.js +1 -33
  21. package/package.json +13 -40
  22. package/start/frame/index.html +264 -254
  23. package/start/index.js +1 -382
  24. package/sync/index-to-app-config.js +1 -146
  25. package/sync/index.js +1 -55
  26. package/utils/axios.js +1 -15
  27. package/utils/check-update.js +1 -53
  28. package/utils/constants.js +1 -20
  29. package/utils/env.js +1 -39
  30. package/utils/error.js +1 -16
  31. package/utils/find-files-by-ext.js +1 -27
  32. package/utils/find-free-port.js +1 -11
  33. package/utils/fs-extra.js +1 -90
  34. package/utils/generate-pages-map.js +1 -17
  35. package/utils/get-app-info.js +1 -22
  36. package/utils/get-current-project.js +1 -25
  37. package/utils/get-ip.js +1 -19
  38. package/utils/log.js +1 -19
  39. package/utils/node-blob.js +1 -106
  40. package/utils/resumable.d.js +1 -0
  41. package/utils/resumable.js +1 -1204
  42. package/utils/spinner.js +1 -25
  43. package/utils/tunnel.js +1 -36
  44. package/.editorconfig +0 -15
  45. package/.eslintignore +0 -8
  46. package/.eslintrc.js +0 -10
  47. package/.vscode/launch.json +0 -23
  48. package/LICENSE +0 -21
  49. package/README.git.md +0 -37
  50. package/assets/index.js +0 -147
  51. package/build/dist/index.dev.js +0 -217
  52. package/config/dist/index.dev.js +0 -48
  53. package/create/init-zmp-ui.js +0 -216
  54. package/create/templates/app-parameters.js +0 -33
  55. package/create/templates/common/css/icons.css +0 -60
  56. package/create/templates/common/icons/512x512.png +0 -0
  57. package/create/templates/common/icons/apple-touch-icon.png +0 -0
  58. package/create/templates/common/icons/favicon.png +0 -0
  59. package/create/templates/common/postcss.config.js +0 -5
  60. package/create/templates/common/splash-2732x2732.png +0 -0
  61. package/create/templates/common/tailwind/postcss.config.js +0 -5
  62. package/create/templates/common/tailwind/tailwind.config.js +0 -9
  63. package/create/templates/common/tailwind/tailwind.css +0 -3
  64. package/create/templates/common/webpack/build.js +0 -41
  65. package/create/templates/copy-assets.js +0 -158
  66. package/create/templates/core/babel.config.js +0 -11
  67. package/create/templates/core/copy-assets.js +0 -83
  68. package/create/templates/core/generate-home-page.js +0 -143
  69. package/create/templates/core/generate-root.js +0 -283
  70. package/create/templates/core/generate-routes.js +0 -155
  71. package/create/templates/core/generate-scripts.js +0 -94
  72. package/create/templates/core/pages/404.html +0 -20
  73. package/create/templates/core/pages/about.html +0 -26
  74. package/create/templates/core/pages/catalog.html +0 -40
  75. package/create/templates/core/pages/dynamic-route.html +0 -115
  76. package/create/templates/core/pages/form.html +0 -258
  77. package/create/templates/core/pages/left-page-1.html +0 -24
  78. package/create/templates/core/pages/left-page-2.html +0 -23
  79. package/create/templates/core/pages/product.html +0 -36
  80. package/create/templates/core/pages/request-and-load.html +0 -35
  81. package/create/templates/core/pages/settings.html +0 -252
  82. package/create/templates/create-folders.js +0 -30
  83. package/create/templates/dist/generate-styles.dev.js +0 -46
  84. package/create/templates/generate-config-xml.js +0 -18
  85. package/create/templates/generate-index.js +0 -49
  86. package/create/templates/generate-manifest.js +0 -49
  87. package/create/templates/generate-recoil.js +0 -56
  88. package/create/templates/generate-routes.js +0 -16
  89. package/create/templates/generate-scripts.js +0 -16
  90. package/create/templates/generate-service-worker.js +0 -126
  91. package/create/templates/generate-store.js +0 -88
  92. package/create/templates/generate-styles.js +0 -110
  93. package/create/templates/generate-webpack-config.js +0 -335
  94. package/create/templates/generate-zmp-custom.js +0 -81
  95. package/create/templates/react/babel.config.js +0 -12
  96. package/create/templates/react/components/app-items.jsx +0 -44
  97. package/create/templates/react/components/navbar-back.jsx +0 -25
  98. package/create/templates/react/components/user-card.jsx +0 -18
  99. package/create/templates/react/copy-assets.js +0 -85
  100. package/create/templates/react/dist/generate-scripts.dev.js +0 -23
  101. package/create/templates/react/generate-home-page.js +0 -111
  102. package/create/templates/react/generate-root.js +0 -84
  103. package/create/templates/react/generate-routes.js +0 -16
  104. package/create/templates/react/generate-scripts.js +0 -68
  105. package/create/templates/react/pages/404.js +0 -27
  106. package/create/templates/react/pages/about.js +0 -52
  107. package/create/templates/react/pages/catalog.js +0 -112
  108. package/create/templates/react/pages/dynamic-route.js +0 -80
  109. package/create/templates/react/pages/form.js +0 -152
  110. package/create/templates/react/pages/index copy.js +0 -17
  111. package/create/templates/react/pages/index.js +0 -17
  112. package/create/templates/react/pages/settings.js +0 -76
  113. package/create/templates/react/pages/user.js +0 -56
  114. package/create/templates/react/vite.config.js +0 -11
  115. package/create/templates/react-typescript/_tsconfig.json +0 -33
  116. package/create/templates/react-typescript/components/app-items.js +0 -53
  117. package/create/templates/react-typescript/components/index.js +0 -9
  118. package/create/templates/react-typescript/components/navbar-back.js +0 -40
  119. package/create/templates/react-typescript/components/user-card.js +0 -32
  120. package/create/templates/react-typescript/copy-assets.js +0 -94
  121. package/create/templates/react-typescript/dist/generate-scripts.dev.js +0 -23
  122. package/create/templates/react-typescript/generate-home-page.js +0 -113
  123. package/create/templates/react-typescript/generate-root.js +0 -81
  124. package/create/templates/react-typescript/generate-routes.js +0 -12
  125. package/create/templates/react-typescript/generate-scripts.js +0 -67
  126. package/create/templates/react-typescript/pages/404.js +0 -27
  127. package/create/templates/react-typescript/pages/about.js +0 -52
  128. package/create/templates/react-typescript/pages/catalog.js +0 -112
  129. package/create/templates/react-typescript/pages/dynamic-route.js +0 -80
  130. package/create/templates/react-typescript/pages/form.js +0 -152
  131. package/create/templates/react-typescript/pages/index.js +0 -17
  132. package/create/templates/react-typescript/pages/settings.js +0 -76
  133. package/create/templates/react-typescript/pages/user.js +0 -56
  134. package/create/templates/react-typescript/vite.config.js +0 -21
  135. package/create/templates/svelte/babel.config.js +0 -10
  136. package/create/templates/svelte/copy-assets.js +0 -47
  137. package/create/templates/svelte/generate-home-page.js +0 -158
  138. package/create/templates/svelte/generate-root.js +0 -235
  139. package/create/templates/svelte/generate-routes.js +0 -91
  140. package/create/templates/svelte/generate-scripts.js +0 -47
  141. package/create/templates/svelte/pages/404.svelte +0 -10
  142. package/create/templates/svelte/pages/about.svelte +0 -16
  143. package/create/templates/svelte/pages/catalog.svelte +0 -31
  144. package/create/templates/svelte/pages/dynamic-route.svelte +0 -34
  145. package/create/templates/svelte/pages/form.svelte +0 -175
  146. package/create/templates/svelte/pages/left-page-1.svelte +0 -13
  147. package/create/templates/svelte/pages/left-page-2.svelte +0 -12
  148. package/create/templates/svelte/pages/product.svelte +0 -21
  149. package/create/templates/svelte/pages/request-and-load.svelte +0 -21
  150. package/create/templates/svelte/pages/settings.svelte +0 -175
  151. package/create/templates/vue/babel.config.js +0 -10
  152. package/create/templates/vue/components/header.vue +0 -28
  153. package/create/templates/vue/components/sun-and-moon.vue +0 -34
  154. package/create/templates/vue/copy-assets.js +0 -67
  155. package/create/templates/vue/generate-home-page.js +0 -56
  156. package/create/templates/vue/generate-root.js +0 -50
  157. package/create/templates/vue/generate-routes.js +0 -7
  158. package/create/templates/vue/generate-scripts.js +0 -63
  159. package/create/templates/vue/global-components.d.ts +0 -121
  160. package/create/templates/vue/icons/moon.svg +0 -3
  161. package/create/templates/vue/icons/sun.svg +0 -3
  162. package/create/templates/vue/pages/404.vue +0 -12
  163. package/create/templates/vue/pages/about.vue +0 -15
  164. package/create/templates/vue/pages/catalog.vue +0 -39
  165. package/create/templates/vue/pages/dynamic-route.vue +0 -34
  166. package/create/templates/vue/pages/form.vue +0 -162
  167. package/create/templates/vue/pages/left-page-1.vue +0 -14
  168. package/create/templates/vue/pages/left-page-2.vue +0 -11
  169. package/create/templates/vue/pages/product.vue +0 -31
  170. package/create/templates/vue/pages/request-and-load.vue +0 -25
  171. package/create/templates/vue/pages/settings.vue +0 -18
  172. package/create/templates/vue/vite.config.js +0 -11
  173. package/create/templates/zaui/_tsconfig.json +0 -33
  174. package/create/templates/zaui/babel.config.js +0 -12
  175. package/create/templates/zaui/components/user-card.jsx +0 -16
  176. package/create/templates/zaui/copy-assets.js +0 -90
  177. package/create/templates/zaui/generate-home-page.js +0 -117
  178. package/create/templates/zaui/generate-root.js +0 -53
  179. package/create/templates/zaui/generate-routes.js +0 -10
  180. package/create/templates/zaui/generate-scripts.js +0 -39
  181. package/create/templates/zaui/generate-user-card.js +0 -55
  182. package/create/templates/zaui/pages/about.js +0 -129
  183. package/create/templates/zaui/pages/form.js +0 -123
  184. package/create/templates/zaui/pages/index.js +0 -9
  185. package/create/templates/zaui/pages/user.js +0 -109
  186. package/create/templates/zaui/vite.config.js +0 -11
  187. package/create/utils/colors.js +0 -94
  188. package/create/utils/dist/get-options.dev.js +0 -277
  189. package/create/utils/generate-gitignore.js +0 -43
  190. package/create/utils/generate-package-json.js +0 -132
  191. package/create/utils/generate-readme.js +0 -28
  192. package/create/utils/indent.js +0 -31
  193. package/create/utils/string.js +0 -13
  194. package/create/utils/styles-extension.js +0 -9
  195. package/create/utils/template-if.js +0 -9
  196. package/deploy/dist/index.dev.js +0 -227
  197. package/deploy/utils/dist/request-upload.dev.js +0 -62
  198. package/deploy/utils/dist/upload-app.dev.js +0 -113
  199. package/dist/bundle.js +0 -1
  200. package/dist/index.dev.js +0 -352
  201. package/jsconfig.json +0 -8
  202. package/login/dist/index.dev.js +0 -223
  203. package/login/utils/dist/zalo-login.dev.js +0 -41
  204. package/screenshots/wellcome.jpg +0 -0
  205. package/show-qr-app/assets/css/style.css +0 -87
  206. package/show-qr-app/assets/js/qrcode.min.js +0 -1
  207. package/show-qr-app/index.html +0 -57
  208. package/show-qr-app/package.json +0 -14
  209. package/start/dist/index.dev.js +0 -312
  210. package/start/generate-hr-config.js +0 -59
  211. package/ui/server.js +0 -194
  212. package/ui/www/css/app.css +0 -1
  213. package/ui/www/css/app.css.map +0 -1
  214. package/ui/www/fonts/ZMPIcons-Regular.eot +0 -0
  215. package/ui/www/fonts/ZMPIcons-Regular.ttf +0 -0
  216. package/ui/www/fonts/ZMPIcons-Regular.woff +0 -0
  217. package/ui/www/fonts/ZMPIcons-Regular.woff2 +0 -0
  218. package/ui/www/images/logo.png +0 -0
  219. package/ui/www/index.html +0 -1
  220. package/ui/www/js/app.js +0 -3
  221. package/ui/www/js/app.js.LICENSE.txt +0 -20
  222. package/ui/www/js/app.js.map +0 -1
  223. package/ui/www/static/icons/apple-touch-icon.png +0 -0
  224. package/ui/www/static/icons/favicon.png +0 -0
  225. package/utils/dist/get-app-info.dev.js +0 -54
package/start/frame/index.html CHANGED
@@ -1,289 +1,299 @@
1
1
  <!DOCTYPE html>
2
2
  <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta
6
- http-equiv="Content-Security-Policy"
7
- content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:"
8
- />
9
- <meta
10
- name="viewport"
11
- content="width=device-width, initial-scale=1, viewport-fit=cover"
12
- />
13
3
 
14
- <meta name="theme-color" content="#007aff" />
15
- <meta name="format-detection" content="telephone=no" />
16
- <meta name="msapplication-tap-highlight" content="no" />
17
- <link rel="icon" href="/src/static/icons/favicon.png" />
18
- <link
19
- rel="stylesheet"
20
- href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
21
- integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
22
- crossorigin="anonymous"
23
- referrerpolicy="no-referrer"
24
- />
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <meta http-equiv="Content-Security-Policy"
7
+ content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:" />
8
+ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
25
9
 
26
- <title>Zalo Mini Program</title>
27
- <style>
28
- body {
29
- font-family: -apple-system, BlinkMacSystemFont, sans-serif;
30
- margin: 0px;
31
- }
10
+ <meta name="theme-color" content="#007aff" />
11
+ <meta name="format-detection" content="telephone=no" />
12
+ <meta name="msapplication-tap-highlight" content="no" />
13
+ <link rel="icon" href="/src/static/icons/favicon.png" />
14
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
15
+ integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
16
+ crossorigin="anonymous" referrerpolicy="no-referrer" />
32
17
 
33
- #zalo-frame {
34
- width: 100%;
35
- height: calc(100vh - 74px);
36
- border: none;
37
- overflow: auto;
38
- cursor: grab;
39
- }
18
+ <title>Zalo Mini Program</title>
19
+ <style>
20
+ body {
21
+ font-family: -apple-system, BlinkMacSystemFont, sans-serif;
22
+ margin: 0px;
23
+ }
40
24
 
41
- #zalo-frame.transparent-nav {
42
- height: calc(100vh - 30px);
43
- }
25
+ #zalo-frame {
26
+ width: 100%;
27
+ height: calc(100vh - 74px);
28
+ border: none;
29
+ overflow: auto;
30
+ cursor: grab;
31
+ }
44
32
 
45
- .wrapper-frame {
46
- width: 100%;
47
- height: 100vh;
48
- background-color: black;
49
- margin: auto;
50
- overflow: hidden;
51
- }
33
+ #zalo-frame.no-header {
34
+ height: calc(100vh - 30px);
35
+ }
52
36
 
53
- .status-bar {
54
- height: 30px;
55
- background-color: #0068ff;
56
- color: white;
57
- font-size: 13px;
58
- }
37
+ #zalo-frame.no-header.no-nav {
38
+ height: 100vh;
39
+ }
59
40
 
60
- .status-bar .right {
61
- float: right;
62
- padding: 6px;
63
- }
41
+ .wrapper-frame {
42
+ width: 100%;
43
+ height: 100vh;
44
+ background-color: black;
45
+ margin: auto;
46
+ overflow: hidden;
47
+ }
64
48
 
65
- .status-bar .left {
66
- float: left;
67
- padding: 6px;
68
- margin-left: 5px;
69
- }
49
+ .status-bar {
50
+ height: 30px;
51
+ background-color: #0068ff;
52
+ color: white;
53
+ font-size: 13px;
54
+ }
70
55
 
71
- .status-bar .right i {
72
- margin-right: 5px;
73
- }
56
+ .status-bar .right {
57
+ float: right;
58
+ padding: 6px;
59
+ }
74
60
 
75
- .header {
76
- position: relative;
77
- height: 32px;
78
- background-color: #0068ff;
79
- text-align: center;
80
- color: #fff;
81
- padding-top: 12px;
82
- }
61
+ .status-bar .left {
62
+ float: left;
63
+ padding: 6px;
64
+ margin-left: 5px;
65
+ }
83
66
 
84
- #right-buttons,
85
- #left-buttons {
86
- display: flex;
87
- justify-content: space-around;
88
- align-items: center;
89
- font-size: 14px;
90
- position: absolute;
91
- right: 6px;
92
- top: 36px;
93
- height: 28px;
94
- width: max-content;
95
- border-radius: 16px;
96
- border: 1px solid rgba(0, 0, 0, 0.1);
97
- }
67
+ .status-bar .right i {
68
+ margin-right: 5px;
69
+ }
98
70
 
99
- #left-buttons {
100
- left: 6px;
101
- top: 6px;
102
- }
71
+ .header {
72
+ position: relative;
73
+ height: 32px;
74
+ background-color: #0068ff;
75
+ text-align: center;
76
+ color: #fff;
77
+ padding-top: 12px;
78
+ }
103
79
 
104
- .text-white {
105
- color: white;
106
- }
80
+ #right-buttons,
81
+ #left-buttons {
82
+ display: flex;
83
+ justify-content: space-around;
84
+ align-items: center;
85
+ font-size: 14px;
86
+ position: absolute;
87
+ right: 6px;
88
+ top: 36px;
89
+ height: 28px;
90
+ width: max-content;
91
+ border-radius: 16px;
92
+ border: 1px solid rgba(0, 0, 0, 0.1);
93
+ }
107
94
 
108
- .text-black {
109
- color: black;
110
- }
95
+ #left-buttons {
96
+ left: 6px;
97
+ top: 6px;
98
+ }
111
99
 
112
- #right-buttons i,
113
- #left-buttons i {
114
- min-width: 23px;
115
- width: 100%;
116
- height: 100%;
117
- justify-content: center;
118
- align-items: center;
119
- display: flex;
120
- padding: 0 4px;
121
- }
100
+ .text-white {
101
+ color: white;
102
+ }
122
103
 
123
- #right-buttons i:first-child {
124
- border-right: 1px solid rgba(0, 0, 0, 0.1);
125
- }
104
+ .text-black {
105
+ color: black;
106
+ }
126
107
 
127
- .text-black #statusbar,
128
- .text-black #header,
129
- .text-black #left-buttons,
130
- .text-black #right-buttons {
131
- color: black;
132
- background-color: rgba(255, 255, 255, 0.6);
133
- }
108
+ #right-buttons i,
109
+ #left-buttons i {
110
+ min-width: 23px;
111
+ width: 100%;
112
+ height: 100%;
113
+ justify-content: center;
114
+ align-items: center;
115
+ display: flex;
116
+ padding: 0 4px;
117
+ }
134
118
 
135
- .text-white #statusbar,
136
- .text-white #header,
137
- .text-white #left-buttons,
138
- .text-white #right-buttons {
139
- color: white;
140
- background-color: rgba(0, 0, 0, 0.1);
141
- }
119
+ #right-buttons i:first-child {
120
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
121
+ }
142
122
 
143
- .btn-none,
144
- .btn-back #btn-home,
145
- .btn-home #btn-back {
146
- display: none !important;
147
- }
123
+ .text-black #statusbar,
124
+ .text-black #header,
125
+ .text-black #left-buttons,
126
+ .text-black #right-buttons {
127
+ color: black;
128
+ background-color: rgba(255, 255, 255, 0.6);
129
+ }
148
130
 
149
- .btn-both,
150
- .btn-back,
151
- .btn-back #btn-back,
152
- .btn-home,
153
- .btn-home #btn-home {
154
- display: flex !important;
155
- }
131
+ .text-white #statusbar,
132
+ .text-white #header,
133
+ .text-white #left-buttons,
134
+ .text-white #right-buttons {
135
+ color: white;
136
+ background-color: rgba(0, 0, 0, 0.1);
137
+ }
156
138
 
157
- .btn-back.btn-home #btn-back {
158
- border-right: 1px solid rgba(0, 0, 0, 0.1);
159
- }
139
+ #statusbar.hidden {
140
+ display: none;
141
+ }
160
142
 
161
- .btn-back:not(.btn-home) {
162
- background-color: transparent !important;
163
- border: none !important;
164
- }
165
- </style>
166
- </head>
143
+ #statusbar.transparent {
144
+ background-color: transparent;
145
+ position: absolute;
146
+ width: 100%;
147
+ }
167
148
 
168
- <body>
169
- <div id="wrapper-frame" class="wrapper-frame">
170
- <div id="statusbar" class="status-bar">
171
- <div class="right">
172
- <i class="fas fa-wifi"></i>
173
- <i class="fas fa-battery-full"></i>
174
- </div>
175
- <div class="left">12:00</div>
176
- </div>
149
+ .btn-none,
150
+ .btn-back #btn-home,
151
+ .btn-home #btn-back {
152
+ display: none !important;
153
+ }
177
154
 
178
- <div id="header" class="header">
179
- <div class="btn-none" id="left-buttons">
180
- <i id="btn-back" class="fas fa-chevron-left"></i>
181
- <i id="btn-home" class="fas fa-home"></i>
182
- </div>
183
- <span id="title"></span>
155
+ .btn-both,
156
+ .btn-back,
157
+ .btn-back #btn-back,
158
+ .btn-home,
159
+ .btn-home #btn-home {
160
+ display: flex !important;
161
+ }
162
+
163
+ .btn-back.btn-home #btn-back {
164
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
165
+ }
166
+
167
+ .btn-back:not(.btn-home) {
168
+ background-color: transparent !important;
169
+ border: none !important;
170
+ }
171
+ </style>
172
+ </head>
173
+
174
+ <body>
175
+ <div id="wrapper-frame" class="wrapper-frame">
176
+ <div id="statusbar" class="status-bar">
177
+ <div class="right">
178
+ <i class="fas fa-wifi"></i>
179
+ <i class="fas fa-battery-full"></i>
184
180
  </div>
185
- <div id="right-buttons">
186
- <i class="fas fa-ellipsis-h"></i>
187
- <i class="fas fa-power-off"></i>
181
+ <div class="left">12:00</div>
182
+ </div>
183
+
184
+ <div id="header" class="header">
185
+ <div class="btn-none" id="left-buttons">
186
+ <i id="btn-back" class="fas fa-chevron-left"></i>
187
+ <i id="btn-home" class="fas fa-home"></i>
188
188
  </div>
189
+ <span id="title"></span>
190
+ </div>
191
+ <div id="right-buttons">
192
+ <i class="fas fa-ellipsis-h"></i>
193
+ <i class="fas fa-power-off"></i>
189
194
  </div>
190
- </body>
195
+ </div>
196
+ </body>
191
197
 
192
- <script>
193
- window.configLeftButton = function (type) {
194
- switch (type) {
195
- case 'none':
196
- document.getElementById('left-buttons').classList.remove('btn-home');
197
- document.getElementById('left-buttons').classList.remove('btn-back');
198
- document.getElementById('left-buttons').classList.add('btn-none');
199
- break;
200
- case 'home':
201
- document.getElementById('left-buttons').classList.remove('btn-none');
202
- document.getElementById('left-buttons').classList.remove('btn-back');
203
- document.getElementById('left-buttons').classList.add('btn-home');
204
- break;
205
- case 'back':
206
- document.getElementById('left-buttons').classList.remove('btn-none');
207
- document.getElementById('left-buttons').classList.remove('btn-home');
208
- document.getElementById('left-buttons').classList.add('btn-back');
209
- break;
210
- case 'both':
211
- document.getElementById('left-buttons').classList.remove('btn-none');
212
- document.getElementById('left-buttons').classList.add('btn-back');
213
- document.getElementById('left-buttons').classList.add('btn-home');
214
- default:
215
- break;
216
- }
217
- };
198
+ <script>
199
+ window.configLeftButton = function (type) {
200
+ switch (type) {
201
+ case 'none':
202
+ document.getElementById('left-buttons').classList.remove('btn-home');
203
+ document.getElementById('left-buttons').classList.remove('btn-back');
204
+ document.getElementById('left-buttons').classList.add('btn-none');
205
+ break;
206
+ case 'home':
207
+ document.getElementById('left-buttons').classList.remove('btn-none');
208
+ document.getElementById('left-buttons').classList.remove('btn-back');
209
+ document.getElementById('left-buttons').classList.add('btn-home');
210
+ break;
211
+ case 'back':
212
+ document.getElementById('left-buttons').classList.remove('btn-none');
213
+ document.getElementById('left-buttons').classList.remove('btn-home');
214
+ document.getElementById('left-buttons').classList.add('btn-back');
215
+ break;
216
+ case 'both':
217
+ document.getElementById('left-buttons').classList.remove('btn-none');
218
+ document.getElementById('left-buttons').classList.add('btn-back');
219
+ document.getElementById('left-buttons').classList.add('btn-home');
220
+ default:
221
+ break;
222
+ }
223
+ };
218
224
 
219
- function configTextColor(color) {
220
- if (color) {
221
- document
222
- .getElementById('wrapper-frame')
223
- .classList.add(color === 'white' ? 'text-white' : 'text-black');
224
- document
225
- .getElementById('wrapper-frame')
226
- .classList.remove(color === 'white' ? 'text-black' : 'text-white');
227
- }
225
+ function configTextColor(color) {
226
+ if (color) {
227
+ document
228
+ .getElementById('wrapper-frame')
229
+ .classList.add(color === 'white' ? 'text-white' : 'text-black');
230
+ document
231
+ .getElementById('wrapper-frame')
232
+ .classList.remove(color === 'white' ? 'text-black' : 'text-white');
233
+ }
234
+ }
235
+ function configTopBar(navColor, actionBarHidden, statusBarType) {
236
+ document.getElementById('header').style.backgroundColor = navColor;
237
+ document.getElementById('statusbar').style.backgroundColor = navColor;
238
+ if (actionBarHidden) {
239
+ document.getElementById('zalo-frame').classList.add('no-header');
240
+ document.getElementById('header').style.display = 'none';
241
+ } else {
242
+ document.getElementById('zalo-frame').classList.remove('no-header')
243
+ document.getElementById('header').style.display = 'block';
228
244
  }
229
- function configTopBar(navColor, statusBarColor) {
230
- if (navColor) {
231
- document.getElementById('zalo-frame').classList.remove('transparent-nav')
232
- document.getElementById('header').style.backgroundColor = navColor;
233
- document.getElementById('statusbar').style.backgroundColor = navColor;
234
- } else if (statusBarColor) {
235
- document.getElementById('zalo-frame').classList.add('transparent-nav');
236
- document.getElementById('header').style.display = 'none';
237
- document.getElementById('statusbar').style.backgroundColor =
238
- statusBarColor;
239
- }
245
+ document.getElementById('statusbar').className = ["status-bar", statusBarType].join(" ");
246
+ if (statusBarType === "hidden" || statusBarType === 'transparent') {
247
+ document.getElementById('zalo-frame').classList.add('no-nav');
248
+ } else {
249
+ document.getElementById('zalo-frame').classList.remove('no-nav');
240
250
  }
241
- function configTitle(title) {
242
- if (title) {
243
- document.getElementById('title').innerHTML = title;
244
- document.title = title;
245
- }
251
+ }
252
+ function configTitle(title) {
253
+ if (title) {
254
+ document.getElementById('title').innerHTML = title;
255
+ document.title = title;
246
256
  }
247
- window.addEventListener('message', function (event) {
248
- const { type, data } = event.data;
249
- switch (type) {
250
- case 'config-left-button':
251
- configLeftButton(data);
252
- break;
253
- case 'config-text-color':
254
- configTextColor(data);
255
- break;
256
- case 'config-top-bar':
257
- configTopBar(data.navColor, data.statusBarColor);
258
- break;
259
- case 'config-title':
260
- configTitle(data);
261
- break;
262
- case 'custom':
263
- eval(data);
264
- break;
265
- default:
266
- break;
267
- }
257
+ }
258
+ window.addEventListener('message', function (event) {
259
+ const { type, data } = event.data;
260
+ switch (type) {
261
+ case 'config-left-button':
262
+ configLeftButton(data);
263
+ break;
264
+ case 'config-text-color':
265
+ configTextColor(data);
266
+ break;
267
+ case 'config-top-bar':
268
+ configTopBar(data.navColor, data.actionBarHidden, data.statusBar);
269
+ break;
270
+ case 'config-title':
271
+ configTitle(data);
272
+ break;
273
+ case 'custom':
274
+ eval(data);
275
+ break;
276
+ default:
277
+ break;
278
+ }
279
+ });
280
+ fetch(
281
+ `${window.location.protocol}//${window.location.hostname}:${window.location.port - 1
282
+ }/app-config.json`
283
+ )
284
+ .then((response) => response.json())
285
+ .then((data) => {
286
+ configTitle(data.app.title);
287
+ configTopBar(data.app.headerColor, data.app.actionBarHidden, data.app.statusBar);
288
+ configTextColor(data.app.textColor);
289
+ window.configLeftButton(data.app.leftButton);
268
290
  });
269
- fetch(
270
- `${window.location.protocol}//${window.location.hostname}:${
271
- window.location.port - 1
272
- }/app-config.json`
273
- )
274
- .then((response) => response.json())
275
- .then((data) => {
276
- configTitle(data.app.title);
277
- configTopBar(data.app.headerColor, data.app.statusBarColor);
278
- configTextColor(data.app.textColor);
279
- window.configLeftButton(data.app.leftButton);
280
- });
281
- const iframe = document.createElement('iframe');
282
- iframe.id = 'zalo-frame';
283
- iframe.src = `${window.location.protocol}//${window.location.hostname}:${
284
- window.location.port - 1
285
- }`;
286
- iframe.allow = 'geolocation; microphone; camera; midi; encrypted-media;';
287
- document.body.firstElementChild.appendChild(iframe);
288
- </script>
289
- </html>
291
+ const iframe = document.createElement('iframe');
292
+ iframe.id = 'zalo-frame';
293
+ iframe.src = `${window.location.protocol}//${window.location.hostname}:${window.location.port - 1
294
+ }${location.pathname}${location.search}${location.hash}`;
295
+ iframe.allow = 'geolocation; microphone; camera; midi; encrypted-media;';
296
+ document.body.firstElementChild.appendChild(iframe);
297
+ </script>
298
+
299
+ </html>