x4js 2.0.7 → 2.0.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/lib/types/x4.d.ts +6144 -178
- package/package.json +5 -1
- package/build/x4.css +0 -1
- package/build/x4.js +0 -1
- package/scripts/build.mjs +0 -362
- package/scripts/prepack.mjs +0 -51
- package/src/components/base.scss +0 -26
- package/src/components/boxes/boxes.module.scss +0 -37
- package/src/components/boxes/boxes.ts +0 -125
- package/src/components/btngroup/btngroup.module.scss +0 -29
- package/src/components/btngroup/btngroup.ts +0 -106
- package/src/components/button/button.module.scss +0 -154
- package/src/components/button/button.ts +0 -117
- package/src/components/calendar/calendar-check-sharp-light.svg +0 -1
- package/src/components/calendar/calendar.module.scss +0 -163
- package/src/components/calendar/calendar.ts +0 -326
- package/src/components/calendar/chevron-left-sharp-light.svg +0 -1
- package/src/components/calendar/chevron-right-sharp-light.svg +0 -1
- package/src/components/checkbox/check.svg +0 -4
- package/src/components/checkbox/checkbox.module.scss +0 -142
- package/src/components/checkbox/checkbox.ts +0 -125
- package/src/components/colorinput/colorinput.module.scss +0 -65
- package/src/components/colorinput/colorinput.ts +0 -88
- package/src/components/colorinput/crosshairs-simple-sharp-light.svg +0 -1
- package/src/components/colorpicker/colorpicker.module.scss +0 -133
- package/src/components/colorpicker/colorpicker.ts +0 -477
- package/src/components/combobox/combobox.module.scss +0 -121
- package/src/components/combobox/combobox.ts +0 -190
- package/src/components/combobox/updown.svg +0 -4
- package/src/components/dialog/dialog.module.scss +0 -71
- package/src/components/dialog/dialog.ts +0 -91
- package/src/components/dialog/xmark-sharp-light.svg +0 -1
- package/src/components/form/form.module.scss +0 -34
- package/src/components/form/form.ts +0 -36
- package/src/components/header/header.module.scss +0 -40
- package/src/components/header/header.ts +0 -124
- package/src/components/icon/icon.module.scss +0 -30
- package/src/components/icon/icon.ts +0 -134
- package/src/components/image/image.module.scss +0 -21
- package/src/components/image/image.ts +0 -67
- package/src/components/input/input.module.scss +0 -69
- package/src/components/input/input.ts +0 -274
- package/src/components/label/label.module.scss +0 -52
- package/src/components/label/label.ts +0 -55
- package/src/components/listbox/listbox.module.scss +0 -103
- package/src/components/listbox/listbox.ts +0 -427
- package/src/components/menu/caret-right-solid.svg +0 -1
- package/src/components/menu/menu.module.scss +0 -108
- package/src/components/menu/menu.ts +0 -168
- package/src/components/messages/circle-exclamation.svg +0 -1
- package/src/components/messages/messages.module.scss +0 -47
- package/src/components/messages/messages.ts +0 -64
- package/src/components/normalize.scss +0 -386
- package/src/components/notification/circle-check-solid.svg +0 -1
- package/src/components/notification/circle-exclamation-solid.svg +0 -1
- package/src/components/notification/circle-notch-light.svg +0 -1
- package/src/components/notification/notification.module.scss +0 -82
- package/src/components/notification/notification.ts +0 -108
- package/src/components/notification/xmark-sharp-light.svg +0 -1
- package/src/components/panel/panel.module.scss +0 -48
- package/src/components/panel/panel.ts +0 -57
- package/src/components/popup/popup.module.scss +0 -43
- package/src/components/popup/popup.ts +0 -395
- package/src/components/progress/progress.module.scss +0 -57
- package/src/components/progress/progress.ts +0 -43
- package/src/components/rating/rating.module.scss +0 -23
- package/src/components/rating/rating.ts +0 -125
- package/src/components/rating/star-sharp-light.svg +0 -1
- package/src/components/rating/star-sharp-solid.svg +0 -1
- package/src/components/shared.scss +0 -76
- package/src/components/sizers/sizer.module.scss +0 -90
- package/src/components/sizers/sizer.ts +0 -120
- package/src/components/slider/slider.module.scss +0 -71
- package/src/components/slider/slider.ts +0 -143
- package/src/components/switch/switch.module.scss +0 -127
- package/src/components/switch/switch.ts +0 -56
- package/src/components/tabs/tabs.module.scss +0 -46
- package/src/components/tabs/tabs.ts +0 -157
- package/src/components/textarea/textarea.module.scss +0 -59
- package/src/components/textarea/textarea.ts +0 -54
- package/src/components/textedit/textedit.module.scss +0 -114
- package/src/components/textedit/textedit.ts +0 -82
- package/src/components/themes.scss +0 -77
- package/src/components/tooltips/circle-info-sharp-light.svg +0 -1
- package/src/components/tooltips/tooltips.scss +0 -51
- package/src/components/tooltips/tooltips.ts +0 -103
- package/src/components/treeview/chevron-down-light.svg +0 -1
- package/src/components/treeview/treeview.module.scss +0 -116
- package/src/components/treeview/treeview.ts +0 -403
- package/src/components/viewport/viewport.module.scss +0 -25
- package/src/components/viewport/viewport.ts +0 -38
- package/src/core/component.ts +0 -979
- package/src/core/core_colors.ts +0 -250
- package/src/core/core_dom.ts +0 -471
- package/src/core/core_dragdrop.ts +0 -201
- package/src/core/core_element.ts +0 -98
- package/src/core/core_events.ts +0 -149
- package/src/core/core_i18n.ts +0 -377
- package/src/core/core_router.ts +0 -221
- package/src/core/core_styles.ts +0 -215
- package/src/core/core_svg.ts +0 -550
- package/src/core/core_tools.ts +0 -673
- package/src/demo/assets/house-light.svg +0 -1
- package/src/demo/assets/radio.svg +0 -4
- package/src/demo/index.html +0 -12
- package/src/demo/main.scss +0 -21
- package/src/demo/main.tsx +0 -323
- package/src/x4.scss +0 -19
- package/tsconfig.json +0 -14
- package/types/scss.d.ts +0 -4
- package/types/svg.d.ts +0 -4
- package/types/x4react.d.ts +0 -9
package/src/core/core_i18n.ts
DELETED
|
@@ -1,377 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ___ ___ __
|
|
3
|
-
* \ \/ / / _
|
|
4
|
-
* \ / /_| |_
|
|
5
|
-
* / \____ _|
|
|
6
|
-
* /__/\__\ |_|
|
|
7
|
-
*
|
|
8
|
-
* @file core_i18n.ts
|
|
9
|
-
* @author Etienne Cochard
|
|
10
|
-
*
|
|
11
|
-
* @copyright (c) 2024 R-libre ingenierie
|
|
12
|
-
*
|
|
13
|
-
* Use of this source code is governed by an MIT-style license
|
|
14
|
-
* that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
|
|
15
|
-
**/
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* language definition
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
|
-
interface Language {
|
|
23
|
-
name: string;
|
|
24
|
-
base: string;
|
|
25
|
-
src_translations: any;
|
|
26
|
-
translations: any;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
const sym_lang = Symbol( "i18n" );
|
|
30
|
-
|
|
31
|
-
let languages: Record<string,Language> = {
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
/**
|
|
35
|
-
* create a new language
|
|
36
|
-
* @param name language name (code)
|
|
37
|
-
* @param base base language (code)
|
|
38
|
-
* @example:
|
|
39
|
-
* ```js
|
|
40
|
-
* createLanguage( 'en', 'fr' );
|
|
41
|
-
* ```
|
|
42
|
-
*/
|
|
43
|
-
|
|
44
|
-
export function createLanguage( name: string, base: string ) {
|
|
45
|
-
languages[name] = {
|
|
46
|
-
name,
|
|
47
|
-
base,
|
|
48
|
-
src_translations: {},
|
|
49
|
-
translations: {}
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
/**
|
|
54
|
-
* check if the given language is known
|
|
55
|
-
* @param name language name (code)
|
|
56
|
-
*/
|
|
57
|
-
|
|
58
|
-
export function isLanguage( name: string ): boolean {
|
|
59
|
-
return languages[name]!==undefined;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
* build the language with given fragments
|
|
64
|
-
* @param name language name (code)
|
|
65
|
-
* @param parts misc elements that make the language
|
|
66
|
-
* @example:
|
|
67
|
-
* ```js
|
|
68
|
-
* createLanguage( 'en', 'fr' );
|
|
69
|
-
* const app = {
|
|
70
|
-
* clients: {
|
|
71
|
-
* translation1: "hello",
|
|
72
|
-
* }
|
|
73
|
-
* }
|
|
74
|
-
* addTranslation( 'en', app );
|
|
75
|
-
* ```
|
|
76
|
-
*/
|
|
77
|
-
|
|
78
|
-
export function addTranslation( name: string, ...parts: any[] ) {
|
|
79
|
-
|
|
80
|
-
if( !isLanguage(name) ) {
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
|
|
84
|
-
const lang = languages[name];
|
|
85
|
-
|
|
86
|
-
parts.forEach( p => {
|
|
87
|
-
_patch( lang.src_translations, p );
|
|
88
|
-
} );
|
|
89
|
-
|
|
90
|
-
lang.translations = _proxyfy( lang.src_translations, lang.base, true );
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
/**
|
|
94
|
-
* patch the base object with the given object
|
|
95
|
-
* (real patch)
|
|
96
|
-
*/
|
|
97
|
-
|
|
98
|
-
function _patch( obj: any, by: any ) {
|
|
99
|
-
|
|
100
|
-
for( let n in by ) {
|
|
101
|
-
const src = by[n];
|
|
102
|
-
if( typeof src === "string" ) {
|
|
103
|
-
obj[n] = src;
|
|
104
|
-
}
|
|
105
|
-
else {
|
|
106
|
-
if( Array.isArray(src) && (!obj[n] || !Array.isArray(obj[n])) ) {
|
|
107
|
-
obj[n] = [...src];
|
|
108
|
-
}
|
|
109
|
-
else if( !obj[n] || (typeof obj[n] !== "object") ) {
|
|
110
|
-
obj[n] = { ...src };
|
|
111
|
-
}
|
|
112
|
-
else {
|
|
113
|
-
_patch( obj[n], by[n] );
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
/**
|
|
120
|
-
* create a proxy for all sub objects
|
|
121
|
-
* (deep traverse)
|
|
122
|
-
*/
|
|
123
|
-
|
|
124
|
-
function _proxyfy( obj: any, base: any, root: any ) {
|
|
125
|
-
|
|
126
|
-
const result: any = {}
|
|
127
|
-
|
|
128
|
-
for( const n in obj ) {
|
|
129
|
-
if( typeof obj[n]!=="string" && !Array.isArray(obj[n])) {
|
|
130
|
-
result[n] = _proxyfy( obj[n], base, false );
|
|
131
|
-
}
|
|
132
|
-
else {
|
|
133
|
-
result[n] = obj[n];
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
return _mk_proxy( result, base, root );
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
/**
|
|
142
|
-
* create a proxy for the given object
|
|
143
|
-
*/
|
|
144
|
-
|
|
145
|
-
function _mk_proxy( obj: any, base: string, root: boolean ) : any {
|
|
146
|
-
return new Proxy( obj, {
|
|
147
|
-
get: (target, prop) => {
|
|
148
|
-
if( root ) {
|
|
149
|
-
req_path = [prop];
|
|
150
|
-
}
|
|
151
|
-
else {
|
|
152
|
-
req_path.push( prop );
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
let value = target[prop];
|
|
156
|
-
if( value===undefined ) {
|
|
157
|
-
if( base ) {
|
|
158
|
-
value = _findBaseTrans( base );
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
if( value===undefined ) {
|
|
162
|
-
console.error( "I18N error: unable to find", '_tr.'+req_path.join('.') );
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
return value;
|
|
167
|
-
}
|
|
168
|
-
});
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
/**
|
|
173
|
-
* when we ask for _tr.xxx
|
|
174
|
-
* reqpath is set to [xxx]
|
|
175
|
-
*
|
|
176
|
-
* then when we try to get _tr.xxx.yyy
|
|
177
|
-
* reqpath is [xxx,yyy]
|
|
178
|
-
* if yyy is not found, we try with base langage for the full reqpath
|
|
179
|
-
* until no base found
|
|
180
|
-
*/
|
|
181
|
-
|
|
182
|
-
let req_path: (string | symbol)[];
|
|
183
|
-
|
|
184
|
-
/**
|
|
185
|
-
*
|
|
186
|
-
*/
|
|
187
|
-
|
|
188
|
-
function _findBaseTrans( base: any ) {
|
|
189
|
-
|
|
190
|
-
while( base ) {
|
|
191
|
-
const lang = languages[base];
|
|
192
|
-
let trans = lang.translations;
|
|
193
|
-
let value;
|
|
194
|
-
|
|
195
|
-
for( const p of req_path ) {
|
|
196
|
-
value = trans[p];
|
|
197
|
-
if( value===undefined ) {
|
|
198
|
-
break;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
trans = value;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
if( value!==undefined ) {
|
|
205
|
-
return trans;
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
base = lang.base;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
return undefined;
|
|
212
|
-
}
|
|
213
|
-
|
|
214
|
-
export let _tr: Partial<typeof fr> = {};
|
|
215
|
-
|
|
216
|
-
/**
|
|
217
|
-
* select the given language as current
|
|
218
|
-
* @param name laguage name (code)
|
|
219
|
-
*/
|
|
220
|
-
|
|
221
|
-
export function selectLanguage( name: string ) {
|
|
222
|
-
|
|
223
|
-
if( !isLanguage(name) ) {
|
|
224
|
-
return;
|
|
225
|
-
}
|
|
226
|
-
|
|
227
|
-
_tr = languages[name].translations;
|
|
228
|
-
(_tr as any)[sym_lang] = name;
|
|
229
|
-
return _tr;
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
/**
|
|
233
|
-
*
|
|
234
|
-
*/
|
|
235
|
-
|
|
236
|
-
export function getCurrentLanguage( ): string {
|
|
237
|
-
return (_tr as any)[sym_lang];
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
/**
|
|
241
|
-
*
|
|
242
|
-
*/
|
|
243
|
-
|
|
244
|
-
export function getAvailableLanguages( ): string[] {
|
|
245
|
-
return Object.keys( languages );
|
|
246
|
-
}
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
/**
|
|
252
|
-
* language definition
|
|
253
|
-
* x4 specific strings
|
|
254
|
-
*/
|
|
255
|
-
|
|
256
|
-
let fr = {
|
|
257
|
-
global: {
|
|
258
|
-
ok: 'OK',
|
|
259
|
-
cancel: 'Annuler',
|
|
260
|
-
ignore: 'Ignorer',
|
|
261
|
-
yes: 'Oui',
|
|
262
|
-
no: 'Non',
|
|
263
|
-
abort: "Abandonner",
|
|
264
|
-
retry: "Réessayer",
|
|
265
|
-
|
|
266
|
-
error: "Erreur",
|
|
267
|
-
today: "Aujourd'hui",
|
|
268
|
-
|
|
269
|
-
open: 'Ouvrir',
|
|
270
|
-
new: 'Nouveau',
|
|
271
|
-
delete: 'Supprimer',
|
|
272
|
-
close: 'Fermer',
|
|
273
|
-
save: 'Enregistrer',
|
|
274
|
-
|
|
275
|
-
search: 'Rechercher',
|
|
276
|
-
search_tip: 'Saisissez le texte à rechercher. <b>Enter</b> pour lancer la recherche. <b>Esc</b> pour annuler.',
|
|
277
|
-
|
|
278
|
-
required_field: "information requise",
|
|
279
|
-
invalid_format: "format invalide",
|
|
280
|
-
invalid_email: 'adresse mail invalide',
|
|
281
|
-
invalid_number: 'valeur numérique invalide',
|
|
282
|
-
|
|
283
|
-
diff_date_seconds: '{0} secondes',
|
|
284
|
-
diff_date_minutes: '{0} minutes',
|
|
285
|
-
diff_date_hours: '{0} heures',
|
|
286
|
-
|
|
287
|
-
invalid_date: 'Date non reconnue ({0})',
|
|
288
|
-
empty_list: 'Liste vide',
|
|
289
|
-
|
|
290
|
-
date_input_formats: 'd/m/y|d.m.y|d m y|d-m-y|dmy',
|
|
291
|
-
date_format: 'D/M/Y',
|
|
292
|
-
|
|
293
|
-
day_short: [ 'dim', 'lun', 'mar', 'mer', 'jeu', 'ven', 'sam' ],
|
|
294
|
-
day_long: [ 'dimanche', 'lundi', 'mardi', 'mercredi', 'jeudi', 'vendredi', 'samedi' ],
|
|
295
|
-
|
|
296
|
-
month_short: [ 'jan', 'fév', 'mar', 'avr', 'mai', 'jun', 'jui', 'aoû', 'sep', 'oct', 'nov', 'déc' ],
|
|
297
|
-
month_long: [ 'janvier', 'février', 'mars', 'avril', 'mai', 'juin', 'juillet', 'août', 'septembre', 'octobre', 'novembre', 'décembre' ],
|
|
298
|
-
|
|
299
|
-
property: 'Propriété',
|
|
300
|
-
value: 'Valeur',
|
|
301
|
-
|
|
302
|
-
err_403: `Vous n'avez pas les droits suffisants pour effectuer cette action`,
|
|
303
|
-
|
|
304
|
-
copy: 'Copier',
|
|
305
|
-
cut: 'Couper',
|
|
306
|
-
paste: 'Coller'
|
|
307
|
-
}
|
|
308
|
-
};
|
|
309
|
-
|
|
310
|
-
/** @ignore */
|
|
311
|
-
|
|
312
|
-
let en = {
|
|
313
|
-
global: {
|
|
314
|
-
ok: 'OK',
|
|
315
|
-
cancel: 'Cancel',
|
|
316
|
-
ignore: 'Ignore',
|
|
317
|
-
yes: 'Yes',
|
|
318
|
-
no: 'No',
|
|
319
|
-
abort: "Abort",
|
|
320
|
-
retry: "Retry",
|
|
321
|
-
|
|
322
|
-
error: "Error",
|
|
323
|
-
today: "Today",
|
|
324
|
-
|
|
325
|
-
open: 'Open',
|
|
326
|
-
new: 'New',
|
|
327
|
-
delete: 'Delete',
|
|
328
|
-
close: 'Close',
|
|
329
|
-
save: 'Save',
|
|
330
|
-
|
|
331
|
-
search: 'Search',
|
|
332
|
-
search_tip: 'Type in the text to search. <b>Enter</b> to start the search. <b>Esc</b> to cancel.',
|
|
333
|
-
|
|
334
|
-
required_field: "missing information",
|
|
335
|
-
invalid_format: "invalid format",
|
|
336
|
-
invalid_email: 'invalid email address',
|
|
337
|
-
invalid_number: 'bad numeric value',
|
|
338
|
-
|
|
339
|
-
diff_date_seconds: '{0} seconds',
|
|
340
|
-
diff_date_minutes: '{0} minutes',
|
|
341
|
-
diff_date_hours: '{0} hours',
|
|
342
|
-
|
|
343
|
-
invalid_date: 'Unrecognized date({0})',
|
|
344
|
-
empty_list: 'Empty list',
|
|
345
|
-
|
|
346
|
-
date_input_formats: 'm/d/y|m.d.y|m d y|m-d-y|mdy',
|
|
347
|
-
date_format: 'M/D/Y',
|
|
348
|
-
|
|
349
|
-
day_short: [ 'sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat' ],
|
|
350
|
-
day_long: [ 'sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday' ],
|
|
351
|
-
|
|
352
|
-
month_short: [ 'jan', 'feb', 'mar', 'apr', 'may', 'jun', 'jui', 'aug', 'sep', 'oct', 'nov', 'dec' ],
|
|
353
|
-
month_long: [ 'january', 'february', 'march', 'april', 'mau', 'june', 'jully', 'august', 'september', 'october', 'november', 'december' ],
|
|
354
|
-
|
|
355
|
-
property: 'Property',
|
|
356
|
-
value: 'Value',
|
|
357
|
-
|
|
358
|
-
err_403: `You do not have sufficient rights to do that action`,
|
|
359
|
-
|
|
360
|
-
copy: 'Copy',
|
|
361
|
-
cut: 'Cut',
|
|
362
|
-
paste: 'Paste'
|
|
363
|
-
}
|
|
364
|
-
};
|
|
365
|
-
|
|
366
|
-
createLanguage( 'fr', null );
|
|
367
|
-
addTranslation( 'fr', fr );
|
|
368
|
-
|
|
369
|
-
createLanguage( 'en', 'fr' );
|
|
370
|
-
addTranslation( 'en', en );
|
|
371
|
-
|
|
372
|
-
selectLanguage( 'fr' ); // by default
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
package/src/core/core_router.ts
DELETED
|
@@ -1,221 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* ___ ___ __
|
|
3
|
-
* \ \/ / / _
|
|
4
|
-
* \ / /_| |_
|
|
5
|
-
* / \____ _|
|
|
6
|
-
* /__/\__\ |_|
|
|
7
|
-
*
|
|
8
|
-
* @file core_router.ts
|
|
9
|
-
* @author Etienne Cochard
|
|
10
|
-
*
|
|
11
|
-
* @copyright (c) 2024 R-libre ingenierie
|
|
12
|
-
*
|
|
13
|
-
* Use of this source code is governed by an MIT-style license
|
|
14
|
-
* that can be found in the LICENSE file or at https://opensource.org/licenses/MIT.
|
|
15
|
-
**/
|
|
16
|
-
|
|
17
|
-
import { EvError } from './component.js';
|
|
18
|
-
import { EventMap, EventSource } from './core_events.js';
|
|
19
|
-
|
|
20
|
-
type RouteHandler = ( params: any, path: string ) => void;
|
|
21
|
-
|
|
22
|
-
interface Segment {
|
|
23
|
-
keys: string[],
|
|
24
|
-
pattern: RegExp;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
interface Route {
|
|
28
|
-
keys: string[],
|
|
29
|
-
pattern: RegExp;
|
|
30
|
-
handler: RouteHandler;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
function parseRoute(str: string | RegExp, loose = false): Segment {
|
|
34
|
-
|
|
35
|
-
if (str instanceof RegExp) {
|
|
36
|
-
return {
|
|
37
|
-
keys: null,
|
|
38
|
-
pattern: str
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
const arr = str.split('/');
|
|
43
|
-
|
|
44
|
-
let keys = [];
|
|
45
|
-
let pattern = '';
|
|
46
|
-
|
|
47
|
-
if( arr[0]=='' ) {
|
|
48
|
-
arr.shift();
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
for (const tmp of arr) {
|
|
52
|
-
const c = tmp[0];
|
|
53
|
-
|
|
54
|
-
if (c === '*') {
|
|
55
|
-
keys.push('wild');
|
|
56
|
-
pattern += '/(.*)';
|
|
57
|
-
}
|
|
58
|
-
else if (c === ':') {
|
|
59
|
-
const o = tmp.indexOf('?', 1);
|
|
60
|
-
const ext = tmp.indexOf('.', 1);
|
|
61
|
-
|
|
62
|
-
keys.push(tmp.substring(1, o >= 0 ? o : ext >= 0 ? ext : tmp.length));
|
|
63
|
-
pattern += o >= 0 && ext < 0 ? '(?:/([^\/]+?))?' : '/([^\/]+?)';
|
|
64
|
-
if (ext >= 0) {
|
|
65
|
-
pattern += (o >= 0 ? '?' : '') + '\\' + tmp.substring(ext);
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
else {
|
|
69
|
-
pattern += '/' + tmp;
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
return {
|
|
74
|
-
keys,
|
|
75
|
-
pattern: new RegExp( `^${pattern}${loose ? '(?=$|\/)' : '\/?$'}`, 'i' )
|
|
76
|
-
};
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
interface RouterEvents extends EventMap {
|
|
80
|
-
error: EvError;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
/**
|
|
85
|
-
* micro router
|
|
86
|
-
*
|
|
87
|
-
* ```
|
|
88
|
-
* const router = new Router( );
|
|
89
|
-
*
|
|
90
|
-
* router.get( "/detail/:id", ( params: any ) => {
|
|
91
|
-
* this._showDetail( detail );
|
|
92
|
-
* } );
|
|
93
|
-
*
|
|
94
|
-
* router.get( "/:id", ( params: any ) => {
|
|
95
|
-
* if( params.id==0 )
|
|
96
|
-
* router.navigate( '/home' );
|
|
97
|
-
* }
|
|
98
|
-
* });
|
|
99
|
-
*
|
|
100
|
-
* router.on( "error", ( ) => {
|
|
101
|
-
* router.navigate( '/home' );
|
|
102
|
-
* })
|
|
103
|
-
*
|
|
104
|
-
* router.init( );
|
|
105
|
-
* ```
|
|
106
|
-
*/
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
export class Router extends EventSource< RouterEvents > {
|
|
110
|
-
|
|
111
|
-
private m_routes: Route[];
|
|
112
|
-
private m_useHash: boolean;
|
|
113
|
-
|
|
114
|
-
constructor( useHash = true ) {
|
|
115
|
-
super( );
|
|
116
|
-
|
|
117
|
-
this.m_routes = [];
|
|
118
|
-
this.m_useHash = useHash;
|
|
119
|
-
|
|
120
|
-
window.addEventListener('popstate', (event) => {
|
|
121
|
-
const url = this._getLocation( );
|
|
122
|
-
const found = this._find(url);
|
|
123
|
-
|
|
124
|
-
found.handlers.forEach(h => {
|
|
125
|
-
h(found.params,url);
|
|
126
|
-
});
|
|
127
|
-
});
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
get(uri: string | RegExp, handler: RouteHandler ) {
|
|
131
|
-
let { keys, pattern } = parseRoute(uri);
|
|
132
|
-
this.m_routes.push({ keys, pattern, handler });
|
|
133
|
-
}
|
|
134
|
-
|
|
135
|
-
init() {
|
|
136
|
-
this.navigate( this._getLocation() );
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
private _getLocation( ) {
|
|
140
|
-
return this.m_useHash ? '/'+document.location.hash.substring(1) : document.location.pathname;
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
navigate( uri: string, notify = true, replace = false ) {
|
|
144
|
-
|
|
145
|
-
if( !uri.startsWith('/') ) {
|
|
146
|
-
uri = '/'+uri;
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
const found = this._find( uri );
|
|
150
|
-
|
|
151
|
-
if( !found || found.handlers.length==0 ) {
|
|
152
|
-
//window.history.pushState({}, '', 'error')
|
|
153
|
-
console.log( 'route not found: '+uri );
|
|
154
|
-
this.fire( "error", {code: 404, message: "route not found" } );
|
|
155
|
-
return;
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
if( this.m_useHash ) {
|
|
159
|
-
while( uri.at(0)=='/' ) {
|
|
160
|
-
uri = uri.substring( 1 );
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
uri = '#'+uri;
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
if( replace ) {
|
|
167
|
-
window.history.replaceState({}, '', uri );
|
|
168
|
-
}
|
|
169
|
-
else {
|
|
170
|
-
window.history.pushState({}, '', uri );
|
|
171
|
-
}
|
|
172
|
-
|
|
173
|
-
if( notify ) {
|
|
174
|
-
found.handlers.forEach( h => {
|
|
175
|
-
h( found.params, uri );
|
|
176
|
-
} );
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
private _find( url: string ): { params: Record<string,any>, handlers: RouteHandler[] } {
|
|
181
|
-
|
|
182
|
-
let matches = [];
|
|
183
|
-
let params: Record<string,any> = {};
|
|
184
|
-
let handlers: RouteHandler[] = [];
|
|
185
|
-
|
|
186
|
-
for (const tmp of this.m_routes ) {
|
|
187
|
-
if (!tmp.keys ) {
|
|
188
|
-
matches = tmp.pattern.exec(url);
|
|
189
|
-
if (!matches) {
|
|
190
|
-
continue;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
if (matches['groups']) {
|
|
194
|
-
for (const k in matches['groups']) {
|
|
195
|
-
params[k] = matches['groups'][k];
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
handlers = [...handlers, tmp.handler];
|
|
200
|
-
}
|
|
201
|
-
else if (tmp.keys.length > 0) {
|
|
202
|
-
matches = tmp.pattern.exec(url);
|
|
203
|
-
if (matches === null) {
|
|
204
|
-
continue;
|
|
205
|
-
}
|
|
206
|
-
|
|
207
|
-
for ( let j = 0; j < tmp.keys.length;) {
|
|
208
|
-
params[tmp.keys[j]] = matches[++j];
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
handlers = [...handlers, tmp.handler];
|
|
212
|
-
}
|
|
213
|
-
else if (tmp.pattern.test(url)) {
|
|
214
|
-
handlers = [...handlers, tmp.handler];
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
return { params, handlers };
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
|