Skip to content

Commit 8cae003

Browse files
gparantgparant
authored
Additional action bar menu from scripting (workadventure#2853)
# DONE - [x] Create event to add additional action bar from scripting, - [x] Create class and type, - [x] Create store for component action bar of Svelte, - [x] Update component action bar Svelte to create button(s) open-ended by a script - [x] Create map for test - [x] Create event for callback click button - [x] Create e2e test
1 parent 54bd03d commit 8cae003

File tree

23 files changed

+643
-66
lines changed

23 files changed

+643
-66
lines changed

‎docs/maps/api-ui.md‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -285,3 +285,138 @@ You can get all websites with the `WA.ui.website.getAll()` method. It returns an
285285
```ts
286286
WA.ui.website.getAll();
287287
```
288+
289+
## The modal iframe API
290+
### Open the modal iframe
291+
292+
```ts
293+
WA.ui.modal.openModal({
294+
title: string,// mandatory, title of the iframe modal.
295+
src: string, // mandatory, url of the iframe modal.
296+
allow?: string, // optional by default null.
297+
allowApi?: boolean, // optional by default false.
298+
position?: string, // optional by default right. Reference for position: center / left / right.
299+
closeCallback?: Function // optionall, function when the user close the modal.
300+
}): void
301+
```
302+
303+
304+
### Close the chat window
305+
306+
```ts
307+
WA.ui.modal.closeModal(): void
308+
```
309+
310+
### Example of mofal opened
311+
312+
```ts
313+
WA.ui.modal.openModal({
314+
title: "WorkAdventure website",
315+
src: 'https://workadventu.re',
316+
allow: "fullscreen",
317+
allowApi: true,
318+
position: "center",
319+
() => {
320+
console.info('The modal was closed');
321+
}
322+
});
323+
```
324+
325+
Open modal to the center position:
326+
327+
<div class="row">
328+
<div class="col text-center">
329+
<img src="images/modal/modal-center.png" class="figure-img img-fluid rounded" alt="" />
330+
</div>
331+
</div>
332+
333+
```ts
334+
WA.ui.modal.openModal({
335+
title: "WorkAdventure website",
336+
src: 'https://workadventu.re',
337+
allow: "fullscreen",
338+
position: "right"
339+
});
340+
```
341+
342+
Open modal to the right position:
343+
344+
<div class="row">
345+
<div class="col text-center">
346+
<img src="images/modal/modal-right.png" class="figure-img img-fluid rounded" alt="" />
347+
</div>
348+
</div>
349+
350+
Open modal to the left position:
351+
352+
```ts
353+
WA.ui.modal.openModal({
354+
title: "WorkAdventure website",
355+
src: 'https://workadventu.re',
356+
position: "left"
357+
});
358+
```
359+
360+
<div class="row">
361+
<div class="col text-center">
362+
<img src="images/modal/modal-left.png" class="figure-img img-fluid rounded" alt="" />
363+
</div>
364+
</div>
365+
366+
### Mobile example
367+
368+
If the user is in mobile definition, the modal will open in full screen:
369+
370+
<div class="row">
371+
<div class="col text-center">
372+
<img src="images/modal/modal-mobile.png" class="figure-img img-fluid rounded" alt="" />
373+
</div>
374+
</div>
375+
376+
## Action bar button API
377+
378+
### Add action bar
379+
380+
```ts
381+
WA.ui.actionBar.addButtonActionBar(id: sring, label: string, clickCallback: (buttonActionBar: AddButtonActionBar)): void
382+
```
383+
- id: the id of the button action bar defined.
384+
- label: the label to display in button action bar.
385+
- clickCallback: the callback when user click on the button. The callback have `AddButtonActionBar` class in parameter.
386+
387+
The `ButtonActionBar` is defined:
388+
```ts
389+
interface AddButtonActionBar{
390+
/*
391+
* the id of the button action bar defined.
392+
*/
393+
id: string,
394+
395+
/*
396+
* the label to display in button action bar.
397+
*/
398+
label: string
399+
}
400+
```
401+
402+
### Remove action bar
403+
```ts
404+
WA.ui.actionBar.removeButtonActionBar(id: string);
405+
```
406+
- id: the id of the button action bar previously defined.
407+
408+
### Example of action bar button
409+
```ts
410+
// Add action bar button 'Register'.
411+
WA.ui.actionBar.addButtonActionBar('register-btn', 'Regsiter', (event) => {
412+
console.log('Button registered triggered', event);
413+
// When user click on the action bar button 'Register', we remove it.
414+
WA.ui.actionBar.removeButtonActionBar('register-btn');
415+
});
416+
```
417+
418+
<div class="row">
419+
<div class="col text-center">
420+
<img src="images/action_bar/button_action_bar.png" class="figure-img img-fluid rounded" alt="" />
421+
</div>
422+
</div>

‎docs/maps/images/action_bar/button_action_bar.png‎

605 KB
Loading

‎docs/maps/images/modal/modal-center.png‎

1.03 MB
Loading

‎docs/maps/images/modal/modal-left.png‎

1.02 MB
Loading

‎docs/maps/images/modal/modal-mobile.png‎

451 KB
Loading

‎docs/maps/images/modal/modal-right.png‎

744 KB
Loading

‎maps/tests/MenuActionBar/addButtonActionBar.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
console.info('In ten seconds, the tuto modal will be launched')
2+
3+
function launchTuto(){
4+
console.info('Lunch tuto');
5+
WA.ui.actionBar.addButtonActionBar('register-btn', 'Regsiter', (event) => {
6+
console.log('Button registered triggered', event);
7+
WA.ui.actionBar.removeButtonActionBar('register-btn');
8+
});
9+
}
10+
11+
setTimeout(() => {
12+
launchTuto();
13+
}, 2000)

‎maps/tests/MenuActionBar/addButtonActionBar.json‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
{ "compressionlevel":-1,
2+
"height":10,
3+
"infinite":false,
4+
"layers":[
5+
{
6+
"data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
7+
1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
8+
1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
9+
1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
10+
1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
11+
1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
12+
1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
13+
1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
14+
1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
15+
1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
16+
"height":10,
17+
"id":1,
18+
"name":"floor",
19+
"opacity":1,
20+
"type":"tilelayer",
21+
"visible":true,
22+
"width":10,
23+
"x":0,
24+
"y":0
25+
},
26+
{
27+
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
28+
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
29+
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
30+
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
31+
12, 0, 0, 0, 0, 0, 0, 0, 0, 0,
32+
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
33+
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
34+
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
35+
0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
36+
0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
37+
"height":10,
38+
"id":2,
39+
"name":"start",
40+
"opacity":1,
41+
"type":"tilelayer",
42+
"visible":true,
43+
"width":10,
44+
"x":0,
45+
"y":0
46+
},
47+
{
48+
"draworder":"topdown",
49+
"id":3,
50+
"name":"floorLayer",
51+
"objects":[
52+
{
53+
"class":"",
54+
"height":304.037037037037,
55+
"id":3,
56+
"name":"",
57+
"rotation":0,
58+
"text":
59+
{
60+
"fontfamily":"Sans Serif",
61+
"pixelsize":11,
62+
"text":"Test:\n - New button \"register\" in menu action bar displayed,\n - Click on \"register\" button,\n - After click, the \"register\" button is hidden",
63+
"wrap":true
64+
},
65+
"visible":true,
66+
"width":252.4375,
67+
"x":2.78125,
68+
"y":2.5
69+
}],
70+
"opacity":1,
71+
"type":"objectgroup",
72+
"visible":true,
73+
"x":0,
74+
"y":0
75+
}],
76+
"nextlayerid":9,
77+
"nextobjectid":11,
78+
"orientation":"orthogonal",
79+
"properties":[
80+
{
81+
"name":"script",
82+
"type":"string",
83+
"value":"addButtonActionBar.js"
84+
}],
85+
"renderorder":"right-down",
86+
"tiledversion":"1.9.1",
87+
"tileheight":32,
88+
"tilesets":[
89+
{
90+
"columns":11,
91+
"firstgid":1,
92+
"image":"..\/tileset1.png",
93+
"imageheight":352,
94+
"imagewidth":352,
95+
"margin":0,
96+
"name":"tileset1",
97+
"spacing":0,
98+
"tilecount":121,
99+
"tileheight":32,
100+
"tilewidth":32
101+
}],
102+
"tilewidth":32,
103+
"type":"map",
104+
"version":"1.9",
105+
"width":10
106+
}

‎maps/tests/Modal/tuto.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ function launchTuto(){
66
src: 'http://extra.workadventure.localhost/tutorialv1.html',
77
allow: "fullscreen; clipboard-read; clipboard-write",
88
allowApi: true,
9+
},
10+
(event) => {
11+
console.log('Close modal triggered', event);
912
});
1013
}
1114

‎maps/tests/SendMessage/message.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
/// <reference types="@workadventure/iframe-api-typings/iframe_api" />
2+
console.info('In ten seconds, the tuto modal will be launched')
3+
4+
function launchMessageTest(){
5+
console.info('Lunch message test');
6+
WA.chat.sendChatMessage('Test message sent', 'Test machine');
7+
}
8+
9+
WA.onInit().then(() => {
10+
setTimeout(() => {
11+
launchMessageTest();
12+
}, 5000);
13+
});

0 commit comments

Comments
 (0)