@everymatrix/general-navigation-bar 1.16.1
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/README.md +30 -0
- package/dist/general-navigation-bar.js +690 -0
- package/dist/general-navigation-bar.js.map +1 -0
- package/dist/mobile-bottom-navigation.js +8003 -0
- package/dist/mobile-bottom-navigation.js.map +1 -0
- package/index.html +24 -0
- package/index.js +1 -0
- package/package.json +39 -0
- package/public/favicon.png +0 -0
- package/public/reset.css +48 -0
- package/rollup.config.js +59 -0
- package/src/GeneralNavigationBar.svelte +453 -0
- package/src/i18n.js +27 -0
- package/src/index.ts +4 -0
- package/src/translations.js +20 -0
- package/stories/MobileBottomNavigation.stories.js +13 -0
- package/tsconfig.json +6 -0
package/index.html
ADDED
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset='utf-8'>
|
|
6
|
+
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
|
7
|
+
|
|
8
|
+
<title>
|
|
9
|
+
general-navigation-bar
|
|
10
|
+
</title>
|
|
11
|
+
<link rel="stylesheet" href="public/reset.css">
|
|
12
|
+
<script src='dist/general-navigation-bar.js'></script>
|
|
13
|
+
</head>
|
|
14
|
+
|
|
15
|
+
<body>
|
|
16
|
+
|
|
17
|
+
<div class="webcomponent">
|
|
18
|
+
<general-navigation-bar cmsendpoint="https://demo1-stage.everymatrix.com/apijson/" lang="en" env="stage"
|
|
19
|
+
secondarymenutitle="" userroles="everyone" activecategory="/live-casino"></general-navigation-bar>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
</body>
|
|
23
|
+
|
|
24
|
+
</html>
|
package/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import './dist/general-navigation-bar.js';
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@everymatrix/general-navigation-bar",
|
|
3
|
+
"version": "1.16.1",
|
|
4
|
+
"main": "dist/general-navigation-bar.js",
|
|
5
|
+
"svelte": "src/index.ts",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "sirv public",
|
|
8
|
+
"build": "cross-env NODE_ENV=production rollup -c",
|
|
9
|
+
"dev": "cross-env NODE_ENV=\"development\" rollup -c -w",
|
|
10
|
+
"validate": "svelte-check",
|
|
11
|
+
"test": "echo"
|
|
12
|
+
},
|
|
13
|
+
"devDependencies": {
|
|
14
|
+
"@rollup/plugin-babel": "^5.3.0",
|
|
15
|
+
"@rollup/plugin-commonjs": "^16.0.0",
|
|
16
|
+
"@rollup/plugin-node-resolve": "^10.0.0",
|
|
17
|
+
"@rollup/plugin-typescript": "^6.0.0",
|
|
18
|
+
"@tsconfig/svelte": "^1.0.0",
|
|
19
|
+
"rollup": "^2.3.4",
|
|
20
|
+
"rollup-plugin-dev-server": "^0.4.3",
|
|
21
|
+
"rollup-plugin-livereload": "^2.0.0",
|
|
22
|
+
"rollup-plugin-svelte": "^7.0.0",
|
|
23
|
+
"rollup-plugin-terser": "^7.0.0",
|
|
24
|
+
"rollup-plugin-uglify": "^6.0.4",
|
|
25
|
+
"svelte-check": "^1.0.0",
|
|
26
|
+
"svelte-preprocess": "^5.0.0",
|
|
27
|
+
"tslib": "^2.0.0",
|
|
28
|
+
"typescript": "^3.9.3"
|
|
29
|
+
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"cross-env": "^7.0.3",
|
|
32
|
+
"sirv-cli": "^1.0.0",
|
|
33
|
+
"svelte": "^3.0.0"
|
|
34
|
+
},
|
|
35
|
+
"publishConfig": {
|
|
36
|
+
"access": "public"
|
|
37
|
+
},
|
|
38
|
+
"gitHead": "a305078a67c4daeeb719b3e79cecee8b7c87f030"
|
|
39
|
+
}
|
|
Binary file
|
package/public/reset.css
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/* http://meyerweb.com/eric/tools/css/reset/
|
|
2
|
+
v2.0 | 20110126
|
|
3
|
+
License: none (public domain)
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
html, body, div, span, applet, object, iframe,
|
|
7
|
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
|
8
|
+
a, abbr, acronym, address, big, cite, code,
|
|
9
|
+
del, dfn, em, img, ins, kbd, q, s, samp,
|
|
10
|
+
small, strike, strong, sub, sup, tt, var,
|
|
11
|
+
b, u, i, center,
|
|
12
|
+
dl, dt, dd, ol, ul, li,
|
|
13
|
+
fieldset, form, label, legend,
|
|
14
|
+
table, caption, tbody, tfoot, thead, tr, th, td,
|
|
15
|
+
article, aside, canvas, details, embed,
|
|
16
|
+
figure, figcaption, footer, header, hgroup,
|
|
17
|
+
menu, nav, output, ruby, section, summary,
|
|
18
|
+
time, mark, audio, video {
|
|
19
|
+
margin: 0;
|
|
20
|
+
padding: 0;
|
|
21
|
+
border: 0;
|
|
22
|
+
font-size: 100%;
|
|
23
|
+
font: inherit;
|
|
24
|
+
vertical-align: baseline;
|
|
25
|
+
}
|
|
26
|
+
/* HTML5 display-role reset for older browsers */
|
|
27
|
+
article, aside, details, figcaption, figure,
|
|
28
|
+
footer, header, hgroup, menu, nav, section {
|
|
29
|
+
display: block;
|
|
30
|
+
}
|
|
31
|
+
body {
|
|
32
|
+
line-height: 1;
|
|
33
|
+
}
|
|
34
|
+
ol, ul {
|
|
35
|
+
list-style: none;
|
|
36
|
+
}
|
|
37
|
+
blockquote, q {
|
|
38
|
+
quotes: none;
|
|
39
|
+
}
|
|
40
|
+
blockquote:before, blockquote:after,
|
|
41
|
+
q:before, q:after {
|
|
42
|
+
content: '';
|
|
43
|
+
content: none;
|
|
44
|
+
}
|
|
45
|
+
table {
|
|
46
|
+
border-collapse: collapse;
|
|
47
|
+
border-spacing: 0;
|
|
48
|
+
}
|
package/rollup.config.js
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import svelte from 'rollup-plugin-svelte';
|
|
2
|
+
import commonjs from '@rollup/plugin-commonjs';
|
|
3
|
+
import resolve from '@rollup/plugin-node-resolve';
|
|
4
|
+
import serve from 'rollup-plugin-dev-server';
|
|
5
|
+
import livereload from 'rollup-plugin-livereload';
|
|
6
|
+
import { terser } from 'rollup-plugin-terser';
|
|
7
|
+
import sveltePreprocess from 'svelte-preprocess';
|
|
8
|
+
import typescript from '@rollup/plugin-typescript';
|
|
9
|
+
const production = process.env.NODE_ENV === 'production';
|
|
10
|
+
const dev = process.env.NODE_ENV === 'development';
|
|
11
|
+
|
|
12
|
+
export default {
|
|
13
|
+
input: 'src/index.ts',
|
|
14
|
+
output: {
|
|
15
|
+
sourcemap: true,
|
|
16
|
+
format: 'umd',
|
|
17
|
+
name: 'app',
|
|
18
|
+
file: 'dist/general-navigation-bar.js'
|
|
19
|
+
},
|
|
20
|
+
plugins: [
|
|
21
|
+
svelte({
|
|
22
|
+
preprocess: sveltePreprocess(),
|
|
23
|
+
compilerOptions: {
|
|
24
|
+
// enable run-time checks when not in production
|
|
25
|
+
customElement: true,
|
|
26
|
+
dev: !production
|
|
27
|
+
}
|
|
28
|
+
}),
|
|
29
|
+
commonjs(),
|
|
30
|
+
resolve({
|
|
31
|
+
browser: true,
|
|
32
|
+
dedupe: ['svelte']
|
|
33
|
+
}),
|
|
34
|
+
dev && serve({
|
|
35
|
+
open: true,
|
|
36
|
+
verbose: true,
|
|
37
|
+
allowCrossOrigin: true,
|
|
38
|
+
historyApiFallback: false,
|
|
39
|
+
host: 'localhost',
|
|
40
|
+
port: 5050,
|
|
41
|
+
}),
|
|
42
|
+
dev && livereload({ watch: ['', 'dist'] }),
|
|
43
|
+
typescript({
|
|
44
|
+
sourceMap: !production,
|
|
45
|
+
inlineSources: !production,
|
|
46
|
+
}),
|
|
47
|
+
// If we're building for production (npm run build
|
|
48
|
+
// instead of npm run dev), minify
|
|
49
|
+
production &&
|
|
50
|
+
terser({
|
|
51
|
+
output: {
|
|
52
|
+
comments: "all"
|
|
53
|
+
},
|
|
54
|
+
})
|
|
55
|
+
],
|
|
56
|
+
watch: {
|
|
57
|
+
clearScreen: false
|
|
58
|
+
}
|
|
59
|
+
};
|
|
@@ -0,0 +1,453 @@
|
|
|
1
|
+
<svelte:options tag={null} />
|
|
2
|
+
<script lang="ts">
|
|
3
|
+
|
|
4
|
+
import { getDevice } from 'rvhelper';
|
|
5
|
+
import { onMount } from 'svelte';
|
|
6
|
+
import { _, addNewMessages, setLocale } from './i18n';
|
|
7
|
+
import { TRANSLATIONS } from './translations';
|
|
8
|
+
|
|
9
|
+
export let cmsendpoint:string = '';
|
|
10
|
+
export let lang:string = '';
|
|
11
|
+
export let env:string = '';
|
|
12
|
+
export let secondarymenutitle:string = '';
|
|
13
|
+
export let userroles:string = '';
|
|
14
|
+
export let clientstyling:string = '';
|
|
15
|
+
export let clientstylingurl:string = '';
|
|
16
|
+
export let translationurl:string = '';
|
|
17
|
+
export let activecategory:string = '';
|
|
18
|
+
|
|
19
|
+
let userAgent:string = window.navigator.userAgent;
|
|
20
|
+
let isMobile:boolean = (getDevice(userAgent) === 'PC') ? false : true;
|
|
21
|
+
let isLoading:boolean = true;
|
|
22
|
+
let showNavigation:boolean = false;
|
|
23
|
+
|
|
24
|
+
let navigationWindowOpened:boolean = false;
|
|
25
|
+
let activeMenuItemId:string = '';
|
|
26
|
+
let navigationBarSimple:boolean = false;
|
|
27
|
+
let primaryMenu:Array<Object> = [];
|
|
28
|
+
let primaryMenuSpliced:Array<Object> = [];
|
|
29
|
+
let secondaryMenu:Array<Object> = [];
|
|
30
|
+
let customStylingContainer:HTMLElement;
|
|
31
|
+
let imageIconUrl:string = '';
|
|
32
|
+
let eventInterpreted:object = {};
|
|
33
|
+
|
|
34
|
+
const setTranslationUrl = ():void => {
|
|
35
|
+
let url:string = translationurl;
|
|
36
|
+
|
|
37
|
+
fetch(url).then((res:any) => res.json())
|
|
38
|
+
.then((res) => {
|
|
39
|
+
Object.keys(res).forEach((item:any):void => {
|
|
40
|
+
addNewMessages(item, res[item]);
|
|
41
|
+
});
|
|
42
|
+
}).catch((err:any) => {
|
|
43
|
+
console.log(err);
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
Object.keys(TRANSLATIONS).forEach((item:any) => {
|
|
48
|
+
addNewMessages(item, TRANSLATIONS[item]);
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
const messageHandler = (e:any) => {
|
|
52
|
+
if (e.data) {
|
|
53
|
+
switch(e.data.type) {
|
|
54
|
+
case 'PlayerAccountMenuActive':
|
|
55
|
+
navigationWindowOpened = false;
|
|
56
|
+
break;
|
|
57
|
+
|
|
58
|
+
case 'OpenLoginRegisterModal':
|
|
59
|
+
navigationWindowOpened = false;
|
|
60
|
+
break;
|
|
61
|
+
|
|
62
|
+
case 'GoToHomepage':
|
|
63
|
+
navigationWindowOpened = false;
|
|
64
|
+
break;
|
|
65
|
+
|
|
66
|
+
default:
|
|
67
|
+
break;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
const navigationWindowToggle = () => {
|
|
73
|
+
navigationWindowOpened = !navigationWindowOpened;
|
|
74
|
+
window.postMessage({ type: 'MobileBottomNav', navigationWindowOpened }, window.location.href);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
const createPrimaryMenu = (data):void => {
|
|
78
|
+
primaryMenuSpliced = [];
|
|
79
|
+
primaryMenuSpliced = navigationBarSimple ? data.splice(0,5) : data.splice(0,4);
|
|
80
|
+
|
|
81
|
+
if (activecategory) {
|
|
82
|
+
setActiveIndex();
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
const getMobileBottomMenu = ():void => {
|
|
87
|
+
isLoading = true;
|
|
88
|
+
let device = getDevice(userAgent);
|
|
89
|
+
let url:URL = new URL(`${cmsendpoint}/${lang}/bottom-mobile-menu?env=${env}`);
|
|
90
|
+
|
|
91
|
+
url.searchParams.append('userRoles', userroles);
|
|
92
|
+
|
|
93
|
+
if (device){
|
|
94
|
+
if(device === 'iPad' || device === 'iPhone') {
|
|
95
|
+
url.searchParams.append('device', 'mtWeb'); // replace with ios when we will have a native ios up for this
|
|
96
|
+
} else {
|
|
97
|
+
url.searchParams.append('device', 'mtWeb')
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
fetch(url.href)
|
|
102
|
+
.then((res: any) => res.json())
|
|
103
|
+
.then((data: any):void => {
|
|
104
|
+
|
|
105
|
+
// Reset arrays
|
|
106
|
+
primaryMenu = [];
|
|
107
|
+
secondaryMenu = [];
|
|
108
|
+
|
|
109
|
+
// Show navigation only if there are items coming from CMS
|
|
110
|
+
showNavigation = data.length > 0;
|
|
111
|
+
|
|
112
|
+
// Get items
|
|
113
|
+
data.forEach((item):void => {
|
|
114
|
+
//check if the operator wants an event interpreted
|
|
115
|
+
eventInterpreted[item.label] = item.eventTrigger ? item.path : null
|
|
116
|
+
|
|
117
|
+
if (item.path == '/menu-item') {
|
|
118
|
+
imageIconUrl = item?.img;
|
|
119
|
+
secondaryMenu = item.children;
|
|
120
|
+
} else {
|
|
121
|
+
primaryMenu.push(item);
|
|
122
|
+
}
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
// Hide secondary menu if there are no items configured in CMS
|
|
126
|
+
navigationBarSimple = secondaryMenu.length == 0;
|
|
127
|
+
createPrimaryMenu(primaryMenu);
|
|
128
|
+
|
|
129
|
+
isLoading = false;
|
|
130
|
+
})
|
|
131
|
+
.then(() => {
|
|
132
|
+
// html menu item is generated after fetching data. after this, set custom styling
|
|
133
|
+
clientstyling && setClientStyling();
|
|
134
|
+
clientstylingurl && setClientStylingURL();
|
|
135
|
+
})
|
|
136
|
+
.catch((err: any) => {
|
|
137
|
+
isLoading = false;
|
|
138
|
+
console.error(err);
|
|
139
|
+
});
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
const setActiveIndex = ():void => {
|
|
143
|
+
|
|
144
|
+
const listOfMenus = primaryMenuSpliced.concat(secondaryMenu);
|
|
145
|
+
|
|
146
|
+
const activeMenu:any = listOfMenus.find((menu:any) => menu.path.includes(activecategory))
|
|
147
|
+
if(activeMenu){
|
|
148
|
+
activeMenuItemId = activeMenu.id;
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
const triggerNavigation = (url, target?, externalLink?, label?) => {
|
|
153
|
+
if(eventInterpreted[label]){
|
|
154
|
+
window.postMessage({ type: `MobileBottomNavigationEvent`, event: eventInterpreted[label]}, window.location.href);
|
|
155
|
+
} else {
|
|
156
|
+
window.postMessage({ type: 'NavigateTo', url, target: target, externalLink: externalLink }, window.location.href);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
//Analytics event
|
|
160
|
+
if(typeof gtag == 'function'){
|
|
161
|
+
gtag('event', 'ChangeMenu', {
|
|
162
|
+
'context': 'MobileBottomNavigation',
|
|
163
|
+
'menuItem' : `${url}`
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
const setClientStyling = ():void => {
|
|
169
|
+
let sheet = document.createElement('style');
|
|
170
|
+
if(clientstyling && customStylingContainer) {
|
|
171
|
+
sheet.innerHTML = clientstyling;
|
|
172
|
+
customStylingContainer.appendChild(sheet);
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
const setClientStylingURL = ():void => {
|
|
177
|
+
let url:URL = new URL(clientstylingurl);
|
|
178
|
+
let cssFile:HTMLElement = document.createElement('style');
|
|
179
|
+
|
|
180
|
+
fetch(url.href)
|
|
181
|
+
.then((res:any) => res.text())
|
|
182
|
+
.then((data:any) => {
|
|
183
|
+
cssFile.innerHTML = data
|
|
184
|
+
|
|
185
|
+
setTimeout(() => { customStylingContainer.appendChild(cssFile) }, 1);
|
|
186
|
+
});
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
const setActiveLanguage = () => {
|
|
190
|
+
setLocale(lang);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
onMount(() => {
|
|
194
|
+
window.addEventListener('message', messageHandler, false);
|
|
195
|
+
|
|
196
|
+
return () => {
|
|
197
|
+
window.removeEventListener('message', messageHandler);
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
$: activecategory && !isLoading && setActiveIndex();
|
|
202
|
+
$: lang && setActiveLanguage();
|
|
203
|
+
$: cmsendpoint && lang && env && userroles && getMobileBottomMenu();
|
|
204
|
+
$: clientstyling && customStylingContainer && setClientStyling();
|
|
205
|
+
$: clientstylingurl && customStylingContainer && setClientStylingURL();
|
|
206
|
+
$: translationurl && setTranslationUrl();
|
|
207
|
+
|
|
208
|
+
</script>
|
|
209
|
+
|
|
210
|
+
{#if !isLoading && isMobile && showNavigation}
|
|
211
|
+
<div class="NavigationWrapper" bind:this={customStylingContainer}>
|
|
212
|
+
<div class="NavigationPanel">
|
|
213
|
+
{#if !navigationBarSimple}
|
|
214
|
+
<div class="NavigationWindow {navigationWindowOpened ? 'NavigationWindowOpened' : ''}">
|
|
215
|
+
<span class="ModalCloseBtn" part="ModalCloseBtn" on:click={navigationWindowToggle} role="button">
|
|
216
|
+
<slot name="close">
|
|
217
|
+
<svg class="w-6 h-6" part="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path part="ModalCloseBtnPath" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
|
218
|
+
</slot>
|
|
219
|
+
</span>
|
|
220
|
+
<h3 class="NavigationWindowTitle">{secondarymenutitle || $_('secondaryMenuTitle')}</h3>
|
|
221
|
+
<div class="NavigationSecondaryWrapper">
|
|
222
|
+
{#each secondaryMenu as item}
|
|
223
|
+
<div on:click={() => {!item.attrs?.target ? triggerNavigation(item.path, null, item?.externalLink, item.label) : triggerNavigation(item.path, item.attrs?.target, item?.externalLink, item.label)}} class="NavigationSecondaryItemAnchor {activeMenuItemId === item.id ? 'ActiveItem' : ''}">
|
|
224
|
+
{#if item.img}
|
|
225
|
+
<div class="NavigationSecondaryItemImgWrapper" part="NavigationSecondaryItemImgWrapper">
|
|
226
|
+
<img class="NavigationSecondaryItemImg" part="NavigationSecondaryItemImg" src="{item.img}" alt="{item.label}">
|
|
227
|
+
</div>
|
|
228
|
+
{/if}
|
|
229
|
+
<p class="NavigationSecondaryItemLabel" part="NavigationSecondaryItemLabel">{item.label}</p>
|
|
230
|
+
</div>
|
|
231
|
+
{/each}
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
{/if}
|
|
235
|
+
|
|
236
|
+
<div class="NavigationBar {navigationWindowOpened ? 'NavigationBarOpened' : ''} {navigationBarSimple ? 'NavigationBarSimple' : ''}" part="NavigationBar {navigationWindowOpened ? 'NavigationBarOpened' : ''} {navigationBarSimple ? 'NavigationBarSimple' : ''}">
|
|
237
|
+
{#each primaryMenuSpliced as item, i}
|
|
238
|
+
<div on:click={() => {!item.attrs?.target ? triggerNavigation(item.path, null, item?.externalLink, item.label) : triggerNavigation(item.path, item.attrs?.target, item?.externalLink, item.label)}} class="NavigationPrimaryItemAnchor NavItem{i} {activeMenuItemId === item.id ? 'ActiveItem' : ''}">
|
|
239
|
+
{#if item.img}
|
|
240
|
+
<div class="NavigationPrimaryItemImgWrapper">
|
|
241
|
+
<img class="NavigationPrimaryItemImg" src="{item.img}" alt="{item.label}">
|
|
242
|
+
</div>
|
|
243
|
+
{/if}
|
|
244
|
+
<p class="NavigationPrimaryItemLabel">{item.label}</p>
|
|
245
|
+
</div>
|
|
246
|
+
{/each}
|
|
247
|
+
{#if !navigationBarSimple}
|
|
248
|
+
<button class="NavigationButton {navigationWindowOpened ? 'NavigationButtonActive' : ''}" on:click={navigationWindowToggle}>
|
|
249
|
+
<span part="NavigationButtonSpan">
|
|
250
|
+
{#if imageIconUrl}
|
|
251
|
+
<img src="{imageIconUrl}" class="middleIcon" alt="{imageIconUrl}">
|
|
252
|
+
{:else}
|
|
253
|
+
<svg class="middleIcon" xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 21 21"><defs><style>.a{fill:var(--emfe-w-color-white, #FFFFFF);stroke:var(--emfe-w-color-primary, #D0046C);stroke-linecap:round;stroke-linejoin:round;}.b{stroke:none;}.c{fill:none;}</style></defs><g transform="translate(-150 -514)"><g class="a" part="a" transform="translate(150 514)"><rect class="b" part="b" width="10" height="10" rx="2"/><rect class="c" part="c" x="0.5" y="0.5" width="9" height="9" rx="1.5"/></g><g class="a" part="a" transform="translate(161 514)"><rect class="b" part="b" width="10" height="10" rx="2"/><rect class="c" part="c" x="0.5" y="0.5" width="9" height="9" rx="1.5"/></g><g class="a" part="a" transform="translate(161 525)"><rect class="b" part="b" width="10" height="10" rx="2"/><rect class="c" part="c" x="0.5" y="0.5" width="9" height="9" rx="1.5"/></g><g class="a" part="a" transform="translate(150 525)"><rect class="b" part="b" width="10" height="10" rx="2"/><rect class="c" part="c" x="0.5" y="0.5" width="9" height="9" rx="1.5"/></g></g></svg>
|
|
254
|
+
{/if}
|
|
255
|
+
</span>
|
|
256
|
+
</button>
|
|
257
|
+
{/if}
|
|
258
|
+
</div>
|
|
259
|
+
</div>
|
|
260
|
+
</div>
|
|
261
|
+
{/if}
|
|
262
|
+
|
|
263
|
+
<style lang="scss">
|
|
264
|
+
|
|
265
|
+
|
|
266
|
+
|
|
267
|
+
.NavigationWrapper {
|
|
268
|
+
background: var(--emfe-w-color-gray-50, #F9F8F8);
|
|
269
|
+
width: 100%;
|
|
270
|
+
height: 100px;
|
|
271
|
+
}
|
|
272
|
+
|
|
273
|
+
.NavigationPanel {
|
|
274
|
+
position: fixed;
|
|
275
|
+
bottom: 20px;
|
|
276
|
+
left: 50%;
|
|
277
|
+
transform: translateX(-50%);
|
|
278
|
+
width: calc(100% - 30px);
|
|
279
|
+
max-width: 450px;
|
|
280
|
+
height: 70px;
|
|
281
|
+
z-index: 30;
|
|
282
|
+
}
|
|
283
|
+
|
|
284
|
+
.NavigationWindow {
|
|
285
|
+
display: flex;
|
|
286
|
+
flex-direction: column;
|
|
287
|
+
background: var(--emfe-w-color-white, #FFFFFF);
|
|
288
|
+
position: absolute;
|
|
289
|
+
bottom: 30px;
|
|
290
|
+
left: 0;
|
|
291
|
+
opacity: 0;
|
|
292
|
+
transform: translateY(100%);
|
|
293
|
+
border-radius: 5px 5px 0 0;
|
|
294
|
+
transition: .25s ease;
|
|
295
|
+
width: 100%;
|
|
296
|
+
max-height: 40vh;
|
|
297
|
+
&.NavigationWindowOpened {
|
|
298
|
+
opacity: 1;
|
|
299
|
+
padding-bottom: 60px;
|
|
300
|
+
transform: translateY(5px);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.ModalCloseBtn {
|
|
304
|
+
position: absolute;
|
|
305
|
+
top: 10px;
|
|
306
|
+
right: 10px;
|
|
307
|
+
width: 24px;
|
|
308
|
+
height: 24px;
|
|
309
|
+
border-radius: 100%;
|
|
310
|
+
color: var(--emfe-w-color-secondary, var(--emfe-w-color-orange-500, #FD2839));
|
|
311
|
+
background: rgba(255, 255, 255, .1);
|
|
312
|
+
cursor: pointer;
|
|
313
|
+
transition: all 150ms ease-in-out;
|
|
314
|
+
z-index: 1;
|
|
315
|
+
|
|
316
|
+
svg {
|
|
317
|
+
width: 24px;
|
|
318
|
+
height: 24px;
|
|
319
|
+
margin: 50%;
|
|
320
|
+
transform: translate(-50%, -50%);
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
&:hover {
|
|
324
|
+
background: rgba(255, 255, 255, .2);
|
|
325
|
+
}
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
.NavigationWindowTitle {
|
|
329
|
+
padding: 16px 10px;
|
|
330
|
+
margin: 0;
|
|
331
|
+
color: var(--emfe-w-color-black, #000000);
|
|
332
|
+
font-size: 12px;
|
|
333
|
+
flex-grow: 0;
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
.NavigationSecondaryWrapper {
|
|
337
|
+
display: flex;
|
|
338
|
+
flex-wrap: wrap;
|
|
339
|
+
padding: 0 10px;
|
|
340
|
+
flex-grow: 1;
|
|
341
|
+
overflow-y: auto;
|
|
342
|
+
-webkit-overflow-scrolling: touch;
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.NavigationPrimaryItemAnchor.NavItem0 {
|
|
347
|
+
grid-area: item0;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.NavigationPrimaryItemAnchor.NavItem1 {
|
|
351
|
+
grid-area: item1;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.NavigationPrimaryItemAnchor.NavItem2 {
|
|
355
|
+
grid-area: item2;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
.NavigationPrimaryItemAnchor.NavItem3 {
|
|
359
|
+
grid-area: item3;
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
.NavigationPrimaryItemAnchor.NavItem4 {
|
|
363
|
+
grid-area: item4;
|
|
364
|
+
}
|
|
365
|
+
|
|
366
|
+
.NavigationBar {
|
|
367
|
+
background: var(--emfe-w-color-white, #FFFFFF);
|
|
368
|
+
display: grid;
|
|
369
|
+
grid-auto-flow: column;
|
|
370
|
+
grid-template-columns: 1fr 1fr 20% 1fr 1fr;
|
|
371
|
+
grid-template-areas: "item0 item1 . item2 item3";
|
|
372
|
+
height: 70px;
|
|
373
|
+
border-radius: 5px;
|
|
374
|
+
position: relative;
|
|
375
|
+
&.NavigationBarSimple {
|
|
376
|
+
grid-template-columns: repeat(5, 20%);
|
|
377
|
+
grid-template-areas: "item0 item1 item2 item3 item4";
|
|
378
|
+
}
|
|
379
|
+
&.NavigationBarOpened {
|
|
380
|
+
box-shadow: 0 0 11px rgba(0, 0, 0, 0.09);
|
|
381
|
+
}
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.NavigationPrimaryItemAnchor,
|
|
385
|
+
.NavigationSecondaryItemAnchor{
|
|
386
|
+
display: flex;
|
|
387
|
+
flex-direction: column;
|
|
388
|
+
align-items: center;
|
|
389
|
+
justify-content: center;
|
|
390
|
+
gap: 5px;
|
|
391
|
+
text-decoration: none;
|
|
392
|
+
color: var(--emfe-w-color-black, #000000);
|
|
393
|
+
font-size: 9px;
|
|
394
|
+
overflow: hidden;
|
|
395
|
+
white-space: nowrap;
|
|
396
|
+
padding-bottom: 12px;
|
|
397
|
+
.NavigationPrimaryItemImg,
|
|
398
|
+
.NavigationSecondaryItemImg {
|
|
399
|
+
width: 20px;
|
|
400
|
+
}
|
|
401
|
+
.NavigationPrimaryItemLabel,
|
|
402
|
+
.NavigationSecondaryItemLabel{
|
|
403
|
+
margin: 0;
|
|
404
|
+
overflow: hidden;
|
|
405
|
+
white-space: nowrap;
|
|
406
|
+
text-overflow: ellipsis;
|
|
407
|
+
width: 100%;
|
|
408
|
+
text-align: center;
|
|
409
|
+
}
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.NavigationSecondaryItemAnchor {
|
|
413
|
+
width: 25%;
|
|
414
|
+
padding: 10px 0;
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
.ActiveItem {
|
|
418
|
+
background-color: var(--emfe-w-color-primary-50, var(--emfe-w-color-pink-20, #FBECF4));
|
|
419
|
+
}
|
|
420
|
+
.NavigationButton {
|
|
421
|
+
background: var(--emfe-w-color-white, #FFFFFF);
|
|
422
|
+
border: none;
|
|
423
|
+
width: 20%;
|
|
424
|
+
height: 100%;
|
|
425
|
+
position: absolute;
|
|
426
|
+
top: 50%;
|
|
427
|
+
left: 50%;
|
|
428
|
+
transform: translate(-50%, -50%);
|
|
429
|
+
padding: 0;
|
|
430
|
+
padding-bottom: 12px;
|
|
431
|
+
.middleIcon {
|
|
432
|
+
width: 32px;
|
|
433
|
+
height: 32px;
|
|
434
|
+
}
|
|
435
|
+
&:before {
|
|
436
|
+
border-left: 8px solid transparent;
|
|
437
|
+
border-right: 8px solid transparent;
|
|
438
|
+
border-top: 8px solid var(--emfe-w-color-gray-50, #F9F8F8);
|
|
439
|
+
content: "";
|
|
440
|
+
height: 0;
|
|
441
|
+
left: 50%;
|
|
442
|
+
opacity: 0;
|
|
443
|
+
position: absolute;
|
|
444
|
+
top: 0;
|
|
445
|
+
transform: translateX(-50%);
|
|
446
|
+
width: 0;
|
|
447
|
+
}
|
|
448
|
+
&.NavigationButtonActive:before {
|
|
449
|
+
opacity: 1;
|
|
450
|
+
transition: .7s ease;
|
|
451
|
+
}
|
|
452
|
+
}
|
|
453
|
+
</style>
|
package/src/i18n.js
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import {
|
|
2
|
+
dictionary,
|
|
3
|
+
locale,
|
|
4
|
+
addMessages,
|
|
5
|
+
_
|
|
6
|
+
} from 'svelte-i18n';
|
|
7
|
+
|
|
8
|
+
function setupI18n({ withLocale: _locale, translations }) {
|
|
9
|
+
locale.subscribe((data) => {
|
|
10
|
+
if (data == null) {
|
|
11
|
+
dictionary.set(translations);
|
|
12
|
+
locale.set(_locale);
|
|
13
|
+
}
|
|
14
|
+
}); // maybe we will need this to make sure that the i18n is set up only once
|
|
15
|
+
/*dictionary.set(translations);
|
|
16
|
+
locale.set(_locale);*/
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
function addNewMessages(lang, dict) {
|
|
20
|
+
addMessages(lang, dict);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
function setLocale(_locale) {
|
|
24
|
+
locale.set(_locale);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export { _, setupI18n, addNewMessages, setLocale };
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export const TRANSLATIONS = {
|
|
2
|
+
"en": {
|
|
3
|
+
"secondaryMenuTitle": "Categories"
|
|
4
|
+
},
|
|
5
|
+
"zh-hk": {
|
|
6
|
+
"secondaryMenuTitle": "類別"
|
|
7
|
+
},
|
|
8
|
+
"fr": {
|
|
9
|
+
"secondaryMenuTitle": "Catégories"
|
|
10
|
+
},
|
|
11
|
+
"ro": {
|
|
12
|
+
"secondaryMenuTitle": "Categorii"
|
|
13
|
+
},
|
|
14
|
+
"es": {
|
|
15
|
+
"secondaryMenuTitle": "Categorias"
|
|
16
|
+
},
|
|
17
|
+
"pt": {
|
|
18
|
+
"secondaryMenuTitle": "Categorias"
|
|
19
|
+
}
|
|
20
|
+
}
|