fcad-core-dragon 2.1.0 → 2.1.2
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/.editorconfig +7 -7
- package/.gitlab-ci.yml +124 -0
- package/.prettierrc +11 -11
- package/.vscode/extensions.json +8 -8
- package/.vscode/settings.json +46 -16
- package/CHANGELOG +520 -520
- package/README.md +57 -57
- package/documentation/.vitepress/config.js +114 -114
- package/documentation/api-examples.md +49 -49
- package/documentation/composants/app-base-button.md +58 -58
- package/documentation/composants/app-base-error-display.md +59 -59
- package/documentation/composants/app-base-popover.md +68 -68
- package/documentation/composants/app-comp-audio.md +75 -75
- package/documentation/composants/app-comp-branch-buttons.md +111 -111
- package/documentation/composants/app-comp-button-progress.md +53 -53
- package/documentation/composants/app-comp-carousel.md +53 -53
- package/documentation/composants/app-comp-container.md +53 -53
- package/documentation/composants/app-comp-input-checkbox-next.md +42 -42
- package/documentation/composants/app-comp-input-dropdown-next.md +34 -34
- package/documentation/composants/app-comp-input-radio-next.md +39 -39
- package/documentation/composants/app-comp-input-text-next.md +35 -35
- package/documentation/composants/app-comp-input-text-table-next.md +34 -34
- package/documentation/composants/app-comp-input-text-to-fill-dropdown-next.md +53 -53
- package/documentation/composants/app-comp-input-text-to-fill-next.md +31 -31
- package/documentation/composants/app-comp-jauge.md +31 -31
- package/documentation/composants/app-comp-menu-item.md +55 -55
- package/documentation/composants/app-comp-menu.md +29 -29
- package/documentation/composants/app-comp-navigation.md +41 -41
- package/documentation/composants/app-comp-note-call.md +53 -53
- package/documentation/composants/app-comp-note-credit.md +53 -53
- package/documentation/composants/app-comp-play-bar-next.md +53 -53
- package/documentation/composants/app-comp-pop-up-next.md +93 -93
- package/documentation/composants/app-comp-quiz-next.md +235 -235
- package/documentation/composants/app-comp-quiz-recall.md +53 -53
- package/documentation/composants/app-comp-svg-next.md +53 -53
- package/documentation/composants/app-comp-table-of-content.md +50 -50
- package/documentation/composants/app-comp-video-player.md +82 -82
- package/documentation/composants.md +46 -46
- package/documentation/composants_critiques/ModelPageComposant.md +53 -53
- package/documentation/composants_critiques/app-base-module.md +43 -43
- package/documentation/composants_critiques/app-base-page.md +48 -48
- package/documentation/composants_critiques/app-base.md +311 -311
- package/documentation/composants_critiques/main.md +15 -15
- package/documentation/demarrage.md +50 -50
- package/documentation/deploiement.md +57 -57
- package/documentation/index.md +33 -33
- package/documentation/markdown-examples.md +85 -85
- package/documentation/public/vite.svg +14 -14
- package/documentation/public/vuejs.svg +1 -1
- package/documentation/public/vuetify.svg +5 -5
- package/eslint.config.js +60 -60
- package/junit-report.xml +182 -0
- package/package.json +66 -59
- package/playwright/index.html +12 -0
- package/playwright/index.js +21 -0
- package/playwright-ct.config.js +95 -0
- package/src/$locales/en.json +157 -157
- package/src/$locales/fr.json +120 -120
- package/src/assets/data/onboardingMessages.json +47 -47
- package/src/components/AppBase.vue +1171 -1169
- package/src/components/AppBaseButton.vue +90 -95
- package/src/components/AppBaseErrorDisplay.vue +438 -438
- package/src/components/AppBaseFlipCard.vue +84 -84
- package/src/components/AppBaseModule.vue +1639 -1634
- package/src/components/AppBasePage.vue +3 -2
- package/src/components/AppBasePopover.vue +41 -41
- package/src/components/AppBaseSkeleton.vue +66 -66
- package/src/components/AppCompAudio.vue +261 -256
- package/src/components/AppCompBranchButtons.vue +508 -508
- package/src/components/AppCompButtonProgress.vue +137 -132
- package/src/components/AppCompCarousel.vue +342 -336
- package/src/components/AppCompContainer.vue +29 -29
- package/src/components/AppCompInputCheckBoxNx.vue +325 -323
- package/src/components/AppCompInputDropdownNx.vue +302 -299
- package/src/components/AppCompInputRadioNx.vue +287 -284
- package/src/components/AppCompInputTextNx.vue +156 -153
- package/src/components/AppCompInputTextTableNx.vue +205 -202
- package/src/components/AppCompInputTextToFillDropdownNx.vue +343 -340
- package/src/components/AppCompInputTextToFillNx.vue +316 -313
- package/src/components/AppCompJauge.vue +81 -81
- package/src/components/AppCompMenu.vue +6 -2
- package/src/components/AppCompMenuItem.vue +246 -240
- package/src/components/AppCompNavigation.vue +977 -972
- package/src/components/AppCompNoteCall.vue +167 -161
- package/src/components/AppCompNoteCredit.vue +496 -491
- package/src/components/AppCompPlayBarNext.vue +2290 -2288
- package/src/components/AppCompPopUpNext.vue +508 -504
- package/src/components/AppCompQuizNext.vue +515 -510
- package/src/components/AppCompQuizRecall.vue +355 -350
- package/src/components/AppCompSVGNext.vue +346 -346
- package/src/components/AppCompSettingsMenu.vue +177 -172
- package/src/components/AppCompTableOfContent.vue +433 -427
- package/src/components/AppCompVideoPlayer.vue +377 -377
- package/src/components/AppCompViewDisplay.vue +6 -6
- package/src/components/BaseModule.vue +55 -55
- package/src/composables/useIdleDetector.js +56 -56
- package/src/composables/useQuiz.js +89 -89
- package/src/composables/useTimer.js +172 -172
- package/src/directives/nvdaFix.js +53 -53
- package/src/externalComps/ModuleView.vue +22 -22
- package/src/externalComps/SummaryView.vue +91 -91
- package/src/main.js +493 -476
- package/src/module/stores/appStore.js +960 -947
- package/src/module/xapi/ADL.js +520 -520
- package/src/module/xapi/Crypto/Hasher.js +241 -241
- package/src/module/xapi/Crypto/WordArray.js +278 -278
- package/src/module/xapi/Crypto/algorithms/BufferedBlockAlgorithm.js +103 -103
- package/src/module/xapi/Crypto/algorithms/C_algo.js +315 -315
- package/src/module/xapi/Crypto/algorithms/HMAC.js +9 -9
- package/src/module/xapi/Crypto/algorithms/SHA1.js +9 -9
- package/src/module/xapi/Crypto/encoders/Base.js +105 -105
- package/src/module/xapi/Crypto/encoders/Base64.js +99 -99
- package/src/module/xapi/Crypto/encoders/Hex.js +61 -61
- package/src/module/xapi/Crypto/encoders/Latin1.js +61 -61
- package/src/module/xapi/Crypto/encoders/Utf8.js +45 -45
- package/src/module/xapi/Crypto/index.js +53 -53
- package/src/module/xapi/Statement/activity.js +47 -47
- package/src/module/xapi/Statement/agent.js +55 -55
- package/src/module/xapi/Statement/group.js +26 -26
- package/src/module/xapi/Statement/index.js +259 -259
- package/src/module/xapi/Statement/statement.js +253 -253
- package/src/module/xapi/Statement/statementRef.js +23 -23
- package/src/module/xapi/Statement/substatement.js +22 -22
- package/src/module/xapi/Statement/verb.js +36 -36
- package/src/module/xapi/activitytypes.js +17 -17
- package/src/module/xapi/launch.js +157 -157
- package/src/module/xapi/utils.js +167 -167
- package/src/module/xapi/verbs.js +294 -294
- package/src/module/xapi/wrapper.js +1895 -1895
- package/src/module/xapi/xapiStatement.js +444 -444
- package/src/plugins/analytics.js +34 -34
- package/src/plugins/bus.js +12 -8
- package/src/plugins/gsap.js +17 -15
- package/src/plugins/helper.js +355 -358
- package/src/plugins/i18n.js +27 -26
- package/src/plugins/idb.js +227 -227
- package/src/plugins/save.js +37 -37
- package/src/plugins/scorm.js +287 -287
- package/src/plugins/xapi.js +11 -11
- package/src/public/index.html +33 -33
- package/src/router/index.js +57 -57
- package/src/router/routes.js +312 -312
- package/src/shared/generalfuncs.js +344 -344
- package/src/shared/validators.js +1018 -1018
- package/tests/component/AppBaseButton.spec.js +53 -0
- package/tests/component/pinia.spec.js +24 -0
- package/{src/components/tests__ → tests/unit}/AppBaseButton.spec.js +53 -53
- package/tests/unit/AppCompInputCheckBoxNx.spec.js +59 -0
- package/tests/unit/AppCompInputDropdownNx.spec.js +51 -0
- package/tests/unit/AppCompInputRadioNx.spec.js +59 -0
- package/tests/unit/AppCompInputTextNx.spec.js +44 -0
- package/tests/unit/AppCompInputTextTableNx.spec.js +77 -0
- package/tests/unit/AppCompInputTextToFillDropdownNx.spec.js +60 -0
- package/tests/unit/AppCompInputTextToFillNx.spec.js +45 -0
- package/tests/unit/AppCompQuizNext.spec.js +114 -0
- package/tests/unit/AppCompVideoPlayer.spec.js +177 -0
- package/{src/components/tests__ → tests/unit}/useTimer.spec.js +91 -91
- package/vitest.config.js +28 -19
- package/vitest.setup.js +28 -0
- package/src/components/AppBaseButton.test.js +0 -21
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Model de page
|
|
3
|
-
|
|
4
|
-
---
|
|
5
|
-
::: warning 🚩 Important
|
|
6
|
-
Utilisez ce model comme depart pour écrire la page de votre composant:
|
|
7
|
-
|
|
8
|
-
1) Copiez /dubliquez cette page
|
|
9
|
-
2) Renommez votre copie avec le nom de votre composant
|
|
10
|
-
3) Édtitez la page en rempliçant les sections qui conserne votre composant.
|
|
11
|
-
:::
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
Composant pour ....
|
|
15
|
-
|
|
16
|
-
## Aperçu
|
|
17
|
-
|
|
18
|
-
Le composant permet de...
|
|
19
|
-
Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
|
|
20
|
-
|
|
21
|
-
## Comportement
|
|
22
|
-
|
|
23
|
-
Lorem ipsum dolor sit amet. At quas quis qui velit tenetur aut suscipit error id iure doloremque ad velit explicabo. Sit repellat praesentium aut perferendis illum qui omnis recusandae est explicabo dolores in quia tempore qui totam velit.
|
|
24
|
-
|
|
25
|
-
## Référence du composant
|
|
26
|
-
|
|
27
|
-
**ModelComposantPage** `<model-composant/>`
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
## Paramètre
|
|
31
|
-
|
|
32
|
-
Aucun paramètre n'est nécessaire pour ce composant.
|
|
33
|
-
|
|
34
|
-
### Props
|
|
35
|
-
|
|
36
|
-
| Propriété | Type | Description | valeur par défaut |
|
|
37
|
-
|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
|
|
38
|
-
| page | Object | données brutes de la page à créer | Doit contenir au minimum les valeurs suivantes: `{id, type, activityRef }`. Référez-vous à la section sur la [création de page](/guide/pageType.html#qu-est-ce-qu-une-page) pour une liste exhaustive des valeurs de la propriété. |
|
|
39
|
-
|
|
40
|
-
### Slots
|
|
41
|
-
`content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
## Style
|
|
45
|
-
|
|
46
|
-
`nomde class`[class]
|
|
47
|
-
|
|
48
|
-
Aucune manipulation requise.
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
## Accessibilité
|
|
52
|
-
Aucune manipulation requise.
|
|
53
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Model de page
|
|
3
|
+
|
|
4
|
+
---
|
|
5
|
+
::: warning 🚩 Important
|
|
6
|
+
Utilisez ce model comme depart pour écrire la page de votre composant:
|
|
7
|
+
|
|
8
|
+
1) Copiez /dubliquez cette page
|
|
9
|
+
2) Renommez votre copie avec le nom de votre composant
|
|
10
|
+
3) Édtitez la page en rempliçant les sections qui conserne votre composant.
|
|
11
|
+
:::
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
Composant pour ....
|
|
15
|
+
|
|
16
|
+
## Aperçu
|
|
17
|
+
|
|
18
|
+
Le composant permet de...
|
|
19
|
+
Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
|
|
20
|
+
|
|
21
|
+
## Comportement
|
|
22
|
+
|
|
23
|
+
Lorem ipsum dolor sit amet. At quas quis qui velit tenetur aut suscipit error id iure doloremque ad velit explicabo. Sit repellat praesentium aut perferendis illum qui omnis recusandae est explicabo dolores in quia tempore qui totam velit.
|
|
24
|
+
|
|
25
|
+
## Référence du composant
|
|
26
|
+
|
|
27
|
+
**ModelComposantPage** `<model-composant/>`
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## Paramètre
|
|
31
|
+
|
|
32
|
+
Aucun paramètre n'est nécessaire pour ce composant.
|
|
33
|
+
|
|
34
|
+
### Props
|
|
35
|
+
|
|
36
|
+
| Propriété | Type | Description | valeur par défaut |
|
|
37
|
+
|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
|
|
38
|
+
| page | Object | données brutes de la page à créer | Doit contenir au minimum les valeurs suivantes: `{id, type, activityRef }`. Référez-vous à la section sur la [création de page](/guide/pageType.html#qu-est-ce-qu-une-page) pour une liste exhaustive des valeurs de la propriété. |
|
|
39
|
+
|
|
40
|
+
### Slots
|
|
41
|
+
`content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
## Style
|
|
45
|
+
|
|
46
|
+
`nomde class`[class]
|
|
47
|
+
|
|
48
|
+
Aucune manipulation requise.
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
## Accessibilité
|
|
52
|
+
Aucune manipulation requise.
|
|
53
|
+
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
# TOC / Table des matières
|
|
2
|
-
|
|
3
|
-
TOC ou table des matières est disponible dans la barre de navigation.
|
|
4
|
-
|
|
5
|
-
## Aperçu
|
|
6
|
-
|
|
7
|
-
La table des matières contient toute les liens vers les sections déclarer dans `menu.setting.js`. Elle affiche aussi les informations sur l'activité déclarer dans le même fichier.
|
|
8
|
-
|
|
9
|
-
Il affiche aussi le pourcentage de visionnement de l'activité. Les sections lorsqu'elles sont visitées le mot terminer apparait sous le titre.
|
|
10
|
-
|
|
11
|
-
## Paramètre
|
|
12
|
-
|
|
13
|
-
Si vous désirez avoir des ancres dans les pages. Créez un fichier nommé ``menu.setting.js` et déposer le à la racine de votre dossier `src`.
|
|
14
|
-
|
|
15
|
-
Voici la structure de celui-ci :
|
|
16
|
-
|
|
17
|
-
```vue
|
|
18
|
-
<script>
|
|
19
|
-
A00: {
|
|
20
|
-
title: 'Introduction',
|
|
21
|
-
subTitle: 'ceci est un sous-titre',
|
|
22
|
-
time: '00:00',
|
|
23
|
-
anchors: [
|
|
24
|
-
{
|
|
25
|
-
anchorName: 'Moxxi',
|
|
26
|
-
pageRef: 'P01',
|
|
27
|
-
page: 'page_1'
|
|
28
|
-
}
|
|
29
|
-
]
|
|
30
|
-
},
|
|
31
|
-
</script>
|
|
32
|
-
```
|
|
33
|
-
|
|
34
|
-
#### Voici certaine spécification
|
|
35
|
-
|
|
36
|
-
Propriété | Type | Description |
|
|
37
|
-
|:----------|:-----------------|:------------------------------------------|
|
|
38
|
-
| id | String | Doit être unique dans tout le fichier |
|
|
39
|
-
| anchorName | String | Nom affiché dans la table des matières |
|
|
40
|
-
| pageRef | String | Référence de la page où il se trouve.
|
|
41
|
-
| page | String | Référence du name de la page pour créer la route |
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
## Style
|
|
45
|
-
|
|
46
|
-
Vous ne pouvez pas ajouter de classe au élément de la table des matières.
|
|
47
|
-
|
|
48
|
-
## Accessibilité
|
|
49
|
-
|
|
50
|
-
Pour l'instant aucune action n'a été fait pour l'accessibilité.
|
|
1
|
+
# TOC / Table des matières
|
|
2
|
+
|
|
3
|
+
TOC ou table des matières est disponible dans la barre de navigation.
|
|
4
|
+
|
|
5
|
+
## Aperçu
|
|
6
|
+
|
|
7
|
+
La table des matières contient toute les liens vers les sections déclarer dans `menu.setting.js`. Elle affiche aussi les informations sur l'activité déclarer dans le même fichier.
|
|
8
|
+
|
|
9
|
+
Il affiche aussi le pourcentage de visionnement de l'activité. Les sections lorsqu'elles sont visitées le mot terminer apparait sous le titre.
|
|
10
|
+
|
|
11
|
+
## Paramètre
|
|
12
|
+
|
|
13
|
+
Si vous désirez avoir des ancres dans les pages. Créez un fichier nommé ``menu.setting.js` et déposer le à la racine de votre dossier `src`.
|
|
14
|
+
|
|
15
|
+
Voici la structure de celui-ci :
|
|
16
|
+
|
|
17
|
+
```vue
|
|
18
|
+
<script>
|
|
19
|
+
A00: {
|
|
20
|
+
title: 'Introduction',
|
|
21
|
+
subTitle: 'ceci est un sous-titre',
|
|
22
|
+
time: '00:00',
|
|
23
|
+
anchors: [
|
|
24
|
+
{
|
|
25
|
+
anchorName: 'Moxxi',
|
|
26
|
+
pageRef: 'P01',
|
|
27
|
+
page: 'page_1'
|
|
28
|
+
}
|
|
29
|
+
]
|
|
30
|
+
},
|
|
31
|
+
</script>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
#### Voici certaine spécification
|
|
35
|
+
|
|
36
|
+
Propriété | Type | Description |
|
|
37
|
+
|:----------|:-----------------|:------------------------------------------|
|
|
38
|
+
| id | String | Doit être unique dans tout le fichier |
|
|
39
|
+
| anchorName | String | Nom affiché dans la table des matières |
|
|
40
|
+
| pageRef | String | Référence de la page où il se trouve.
|
|
41
|
+
| page | String | Référence du name de la page pour créer la route |
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
## Style
|
|
45
|
+
|
|
46
|
+
Vous ne pouvez pas ajouter de classe au élément de la table des matières.
|
|
47
|
+
|
|
48
|
+
## Accessibilité
|
|
49
|
+
|
|
50
|
+
Pour l'instant aucune action n'a été fait pour l'accessibilité.
|
|
@@ -1,82 +1,82 @@
|
|
|
1
|
-
# Media player
|
|
2
|
-
|
|
3
|
-
Ce composant affiche et gère le vidéo dans la page.
|
|
4
|
-
|
|
5
|
-
## Aperçu
|
|
6
|
-
|
|
7
|
-
Ce composant affiche et gère les vidéo afficher dans une page.
|
|
8
|
-
|
|
9
|
-
## Comportement
|
|
10
|
-
|
|
11
|
-
Affiche la vidéo qui est appelé et offre tout les conrole pour jouer la vidéo.
|
|
12
|
-
|
|
13
|
-
- Appelle la play bar pour les fonctionlité suivant : Play, pause, rejouer et le controle du volume
|
|
14
|
-
- Affichage des sous-titres
|
|
15
|
-
- Afficher les transcriptions
|
|
16
|
-
|
|
17
|
-
Les transcripts ouvrent dans une fenêtre latérale. Une seule fenêtre peux être ouvert à la fois.
|
|
18
|
-
|
|
19
|
-
## Référence du composant
|
|
20
|
-
|
|
21
|
-
`<app-comp-video-player :vid-data="videoData" />`
|
|
22
|
-
|
|
23
|
-
## Structure de données
|
|
24
|
-
|
|
25
|
-
Voici la structure à utiliser pour les données d'une vidéo
|
|
26
|
-
> [!IMPORTANT]
|
|
27
|
-
> videosData doit être un tableau (array)
|
|
28
|
-
|
|
29
|
-
```js
|
|
30
|
-
import videoExemple from '@/assets/medias/exemple_video.mp4'
|
|
31
|
-
import posterDandurand from '@/assets/img/video_poster.jpg'
|
|
32
|
-
import vttVid1FR from '@/assets/medias/exemple_soustitres.vtt'
|
|
33
|
-
|
|
34
|
-
export default {
|
|
35
|
-
data() {
|
|
36
|
-
return {
|
|
37
|
-
id: 'P01',
|
|
38
|
-
activityRef: 'A03',
|
|
39
|
-
title: 'Lecteurs médias',
|
|
40
|
-
type: 'pg_normal',
|
|
41
|
-
videosData: [
|
|
42
|
-
{
|
|
43
|
-
id: 'vid1',
|
|
44
|
-
mSources: [
|
|
45
|
-
{
|
|
46
|
-
type: 'mp4',
|
|
47
|
-
src: videoExemple
|
|
48
|
-
}
|
|
49
|
-
],
|
|
50
|
-
mSubtitles: [
|
|
51
|
-
{
|
|
52
|
-
label: 'Français',
|
|
53
|
-
src: vttVid1FR,
|
|
54
|
-
srclang: 'fr'
|
|
55
|
-
}
|
|
56
|
-
],
|
|
57
|
-
mPoster: posterDandurand,
|
|
58
|
-
mTranscript: 'exemple_transcript.html' // The file MUST be in the public folder of the project
|
|
59
|
-
}
|
|
60
|
-
]
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
}
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
### Props
|
|
67
|
-
|
|
68
|
-
| Propriété | Type | Description | valeur par défaut |
|
|
69
|
-
|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
|
|
70
|
-
| id | string | identification unique | N/A |
|
|
71
|
-
| mSources | Objet | deux valeur `type` qui doit être déplacé comme `mp4` et `src` doit être la source du mp4 | N/A |
|
|
72
|
-
| mSubtitles | Objet | trois valeur: `label` qui doit être la langue dont les soustitres seront. `src` doit être la source du mp4 `srclang` doit être le diminutif de la langue des sous-titres | N/A |
|
|
73
|
-
| mPoster | n/a | Doit être le lien vers l'affiche de la vidéo (image qui seras visible si le vidéo ne load pas) | N/A |
|
|
74
|
-
| mTranscript | string | nom du fichier html où le transcript se trouve | N/A |
|
|
75
|
-
|
|
76
|
-
## Style
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
## Accessibilité
|
|
81
|
-
|
|
82
|
-
|
|
1
|
+
# Media player
|
|
2
|
+
|
|
3
|
+
Ce composant affiche et gère le vidéo dans la page.
|
|
4
|
+
|
|
5
|
+
## Aperçu
|
|
6
|
+
|
|
7
|
+
Ce composant affiche et gère les vidéo afficher dans une page.
|
|
8
|
+
|
|
9
|
+
## Comportement
|
|
10
|
+
|
|
11
|
+
Affiche la vidéo qui est appelé et offre tout les conrole pour jouer la vidéo.
|
|
12
|
+
|
|
13
|
+
- Appelle la play bar pour les fonctionlité suivant : Play, pause, rejouer et le controle du volume
|
|
14
|
+
- Affichage des sous-titres
|
|
15
|
+
- Afficher les transcriptions
|
|
16
|
+
|
|
17
|
+
Les transcripts ouvrent dans une fenêtre latérale. Une seule fenêtre peux être ouvert à la fois.
|
|
18
|
+
|
|
19
|
+
## Référence du composant
|
|
20
|
+
|
|
21
|
+
`<app-comp-video-player :vid-data="videoData" />`
|
|
22
|
+
|
|
23
|
+
## Structure de données
|
|
24
|
+
|
|
25
|
+
Voici la structure à utiliser pour les données d'une vidéo
|
|
26
|
+
> [!IMPORTANT]
|
|
27
|
+
> videosData doit être un tableau (array)
|
|
28
|
+
|
|
29
|
+
```js
|
|
30
|
+
import videoExemple from '@/assets/medias/exemple_video.mp4'
|
|
31
|
+
import posterDandurand from '@/assets/img/video_poster.jpg'
|
|
32
|
+
import vttVid1FR from '@/assets/medias/exemple_soustitres.vtt'
|
|
33
|
+
|
|
34
|
+
export default {
|
|
35
|
+
data() {
|
|
36
|
+
return {
|
|
37
|
+
id: 'P01',
|
|
38
|
+
activityRef: 'A03',
|
|
39
|
+
title: 'Lecteurs médias',
|
|
40
|
+
type: 'pg_normal',
|
|
41
|
+
videosData: [
|
|
42
|
+
{
|
|
43
|
+
id: 'vid1',
|
|
44
|
+
mSources: [
|
|
45
|
+
{
|
|
46
|
+
type: 'mp4',
|
|
47
|
+
src: videoExemple
|
|
48
|
+
}
|
|
49
|
+
],
|
|
50
|
+
mSubtitles: [
|
|
51
|
+
{
|
|
52
|
+
label: 'Français',
|
|
53
|
+
src: vttVid1FR,
|
|
54
|
+
srclang: 'fr'
|
|
55
|
+
}
|
|
56
|
+
],
|
|
57
|
+
mPoster: posterDandurand,
|
|
58
|
+
mTranscript: 'exemple_transcript.html' // The file MUST be in the public folder of the project
|
|
59
|
+
}
|
|
60
|
+
]
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
### Props
|
|
67
|
+
|
|
68
|
+
| Propriété | Type | Description | valeur par défaut |
|
|
69
|
+
|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
|
|
70
|
+
| id | string | identification unique | N/A |
|
|
71
|
+
| mSources | Objet | deux valeur `type` qui doit être déplacé comme `mp4` et `src` doit être la source du mp4 | N/A |
|
|
72
|
+
| mSubtitles | Objet | trois valeur: `label` qui doit être la langue dont les soustitres seront. `src` doit être la source du mp4 `srclang` doit être le diminutif de la langue des sous-titres | N/A |
|
|
73
|
+
| mPoster | n/a | Doit être le lien vers l'affiche de la vidéo (image qui seras visible si le vidéo ne load pas) | N/A |
|
|
74
|
+
| mTranscript | string | nom du fichier html où le transcript se trouve | N/A |
|
|
75
|
+
|
|
76
|
+
## Style
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
## Accessibilité
|
|
81
|
+
|
|
82
|
+
|
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
# Les composants du FCAD
|
|
2
|
-
|
|
3
|
-
## Composants critiques
|
|
4
|
-
|
|
5
|
-
| Nom | Description |
|
|
6
|
-
| ------------- | ----------- |
|
|
7
|
-
|[app-base](/composants_critiques/app-base)|Composant racine pour l'utilisation de la librairie.|
|
|
8
|
-
|[app-base-module](/composants_critiques/app-base-module)|Composant racine du module.|
|
|
9
|
-
|[app-base-page](/composants_critiques/app-base-page)|Composant racine des pages d'activité.|
|
|
10
|
-
|[main](/composants_critiques/main)|Point d'entrée principal du FCAD|
|
|
11
|
-
|
|
12
|
-
## Autres composants
|
|
13
|
-
|Nom|Description|
|
|
14
|
-
|-------------|-----------|
|
|
15
|
-
|[app-base-button](/composants/app-base-button)|Bouton de base géré par le FCAD|
|
|
16
|
-
|[app-base-error-display](/composants/app-base-error-display)|Affichage des erreurs de développement/intégration|
|
|
17
|
-
|[app-base-flip-card](/composants/app-base-flip-card)|Élément interactif sous la forme d'une carte pivotante|
|
|
18
|
-
|[app-base-popover](/composants/app-base-popover)|Affichage de contenu dans une infobulle|
|
|
19
|
-
|[app-comp-audio](/composants/app-comp-audio)|Lecteur audio|
|
|
20
|
-
|[app-comp-branch-buttons](/composants/app-comp-branch-buttons)|Bouton qui ouvre une fenêtre latérale|
|
|
21
|
-
|[app-comp-button-progress](/composants/app-comp-button-progress)|Affichage de la progression d'une fenêtre latérale|
|
|
22
|
-
|[app-comp-carousel](/composants/app-comp-carousel)|Galerie d'images sous la forme d'un carrousel|
|
|
23
|
-
|[app-comp-container](/composants/app-comp-container)|Contenant de la fenêtre latérale|
|
|
24
|
-
|[app-comp-input-checkbox-next](/composants/app-comp-input-checkbox-next)|Exercice à réponses multiples (cases à cocher)|
|
|
25
|
-
|[app-comp-input-dropdown-next](/composants/app-comp-input-dropdown-next)|Exercice à listes déroulantes |
|
|
26
|
-
|[app-comp-input-radio-next](/composants/app-comp-input-radio-next)|Exercice à réponse unique (bouton radio)|
|
|
27
|
-
|[app-comp-input-text-next](/composants/app-comp-input-text-next)|Exercice à réponse ouverte (boîte de texte)|
|
|
28
|
-
|[app-comp-input-text-table-next](/composants/app-comp-input-text-table-next)|Exercice à saisie de textes multiples|
|
|
29
|
-
|[app-comp-input-text-to-fill-dropdown-next](/composants/app-comp-input-text-to-fill-dropdown-next)|Exercice texte à trous avec listes déroulantes|
|
|
30
|
-
|[app-comp-input-text-to-fill-next](/composants/app-comp-input-text-to-fill-next)|Exercice texte à trous avec saisie de texte|
|
|
31
|
-
|[app-comp-jauge](/composants/app-comp-jauge)|Marqueur de progression|
|
|
32
|
-
|[app-comp-menu](/composants/app-comp-menu)|Affichage du sommaire des activités|
|
|
33
|
-
|[app-comp-menu-item](/composants/app-comp-menu-item)|Bouton contenant les informations d'une activité|
|
|
34
|
-
|[app-comp-navigation](/composants/app-comp-navigation)|Navigation principale de l'application|
|
|
35
|
-
|[app-comp-note-call](/composants/app-comp-note-call)|xxxxxxxxx|
|
|
36
|
-
|[app-comp-note-credit](/composants/app-comp-note-credit)|xxxxxxxxx|
|
|
37
|
-
|[app-comp-play-bar-next](/composants/app-comp-play-bar-next)|Barre d'outils des lecteurs vidéo/audio|
|
|
38
|
-
|[app-comp-pop-up-next](/composants/app-comp-pop-up-next)|Fenêtre modale|
|
|
39
|
-
|[app-comp-quiz-next](/composants/app-comp-quiz-next)|Composant de base pour les exercices|
|
|
40
|
-
|[app-comp-quiz-recall](/composants/app-comp-quiz-recall)|Rappel de réponse|
|
|
41
|
-
|[app-comp-svg-next](/composants/app-comp-svg-next)|Gestion des SVG dans l'application|
|
|
42
|
-
|[app-comp-table-of-content](/composants/app-comp-table-of-content)|Composant progression de la navigation principale|
|
|
43
|
-
|[app-comp-video-player](/composants/app-comp-video-player)|Lecteur vidéo|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
1
|
+
# Les composants du FCAD
|
|
2
|
+
|
|
3
|
+
## Composants critiques
|
|
4
|
+
|
|
5
|
+
| Nom | Description |
|
|
6
|
+
| ------------- | ----------- |
|
|
7
|
+
|[app-base](/composants_critiques/app-base)|Composant racine pour l'utilisation de la librairie.|
|
|
8
|
+
|[app-base-module](/composants_critiques/app-base-module)|Composant racine du module.|
|
|
9
|
+
|[app-base-page](/composants_critiques/app-base-page)|Composant racine des pages d'activité.|
|
|
10
|
+
|[main](/composants_critiques/main)|Point d'entrée principal du FCAD|
|
|
11
|
+
|
|
12
|
+
## Autres composants
|
|
13
|
+
|Nom|Description|
|
|
14
|
+
|-------------|-----------|
|
|
15
|
+
|[app-base-button](/composants/app-base-button)|Bouton de base géré par le FCAD|
|
|
16
|
+
|[app-base-error-display](/composants/app-base-error-display)|Affichage des erreurs de développement/intégration|
|
|
17
|
+
|[app-base-flip-card](/composants/app-base-flip-card)|Élément interactif sous la forme d'une carte pivotante|
|
|
18
|
+
|[app-base-popover](/composants/app-base-popover)|Affichage de contenu dans une infobulle|
|
|
19
|
+
|[app-comp-audio](/composants/app-comp-audio)|Lecteur audio|
|
|
20
|
+
|[app-comp-branch-buttons](/composants/app-comp-branch-buttons)|Bouton qui ouvre une fenêtre latérale|
|
|
21
|
+
|[app-comp-button-progress](/composants/app-comp-button-progress)|Affichage de la progression d'une fenêtre latérale|
|
|
22
|
+
|[app-comp-carousel](/composants/app-comp-carousel)|Galerie d'images sous la forme d'un carrousel|
|
|
23
|
+
|[app-comp-container](/composants/app-comp-container)|Contenant de la fenêtre latérale|
|
|
24
|
+
|[app-comp-input-checkbox-next](/composants/app-comp-input-checkbox-next)|Exercice à réponses multiples (cases à cocher)|
|
|
25
|
+
|[app-comp-input-dropdown-next](/composants/app-comp-input-dropdown-next)|Exercice à listes déroulantes |
|
|
26
|
+
|[app-comp-input-radio-next](/composants/app-comp-input-radio-next)|Exercice à réponse unique (bouton radio)|
|
|
27
|
+
|[app-comp-input-text-next](/composants/app-comp-input-text-next)|Exercice à réponse ouverte (boîte de texte)|
|
|
28
|
+
|[app-comp-input-text-table-next](/composants/app-comp-input-text-table-next)|Exercice à saisie de textes multiples|
|
|
29
|
+
|[app-comp-input-text-to-fill-dropdown-next](/composants/app-comp-input-text-to-fill-dropdown-next)|Exercice texte à trous avec listes déroulantes|
|
|
30
|
+
|[app-comp-input-text-to-fill-next](/composants/app-comp-input-text-to-fill-next)|Exercice texte à trous avec saisie de texte|
|
|
31
|
+
|[app-comp-jauge](/composants/app-comp-jauge)|Marqueur de progression|
|
|
32
|
+
|[app-comp-menu](/composants/app-comp-menu)|Affichage du sommaire des activités|
|
|
33
|
+
|[app-comp-menu-item](/composants/app-comp-menu-item)|Bouton contenant les informations d'une activité|
|
|
34
|
+
|[app-comp-navigation](/composants/app-comp-navigation)|Navigation principale de l'application|
|
|
35
|
+
|[app-comp-note-call](/composants/app-comp-note-call)|xxxxxxxxx|
|
|
36
|
+
|[app-comp-note-credit](/composants/app-comp-note-credit)|xxxxxxxxx|
|
|
37
|
+
|[app-comp-play-bar-next](/composants/app-comp-play-bar-next)|Barre d'outils des lecteurs vidéo/audio|
|
|
38
|
+
|[app-comp-pop-up-next](/composants/app-comp-pop-up-next)|Fenêtre modale|
|
|
39
|
+
|[app-comp-quiz-next](/composants/app-comp-quiz-next)|Composant de base pour les exercices|
|
|
40
|
+
|[app-comp-quiz-recall](/composants/app-comp-quiz-recall)|Rappel de réponse|
|
|
41
|
+
|[app-comp-svg-next](/composants/app-comp-svg-next)|Gestion des SVG dans l'application|
|
|
42
|
+
|[app-comp-table-of-content](/composants/app-comp-table-of-content)|Composant progression de la navigation principale|
|
|
43
|
+
|[app-comp-video-player](/composants/app-comp-video-player)|Lecteur vidéo|
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Model de page
|
|
3
|
-
|
|
4
|
-
---
|
|
5
|
-
::: warning 🚩 Important
|
|
6
|
-
Utilisez ce model comme depart pour écrire la page de votre composant:
|
|
7
|
-
|
|
8
|
-
1) Copiez /dubliquez cette page
|
|
9
|
-
2) Renommez votre copie avec le nom de votre composant
|
|
10
|
-
3) Édtitez la page en rempliçant les sections qui conserne votre composant.
|
|
11
|
-
:::
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
Composant pour ....
|
|
15
|
-
|
|
16
|
-
## Aperçu
|
|
17
|
-
|
|
18
|
-
Le composant permet de...
|
|
19
|
-
Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
|
|
20
|
-
|
|
21
|
-
## Comportement
|
|
22
|
-
|
|
23
|
-
Lorem ipsum dolor sit amet. At quas quis qui velit tenetur aut suscipit error id iure doloremque ad velit explicabo. Sit repellat praesentium aut perferendis illum qui omnis recusandae est explicabo dolores in quia tempore qui totam velit.
|
|
24
|
-
|
|
25
|
-
## Référence du composant
|
|
26
|
-
|
|
27
|
-
**ModelComposantPage** `<model-composant/>`
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
## Paramètre
|
|
31
|
-
|
|
32
|
-
Aucun paramètre n'est nécessaire pour ce composant.
|
|
33
|
-
|
|
34
|
-
### Props
|
|
35
|
-
|
|
36
|
-
| Propriété | Type | Description | valeur par défaut |
|
|
37
|
-
|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
|
|
38
|
-
| page | Object | données brutes de la page à créer | Doit contenir au minimum les valeurs suivantes: `{id, type, activityRef }`. Référez-vous à la section sur la [création de page](/guide/pageType.html#qu-est-ce-qu-une-page) pour une liste exhaustive des valeurs de la propriété. |
|
|
39
|
-
|
|
40
|
-
### Slots
|
|
41
|
-
`content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
## Style
|
|
45
|
-
|
|
46
|
-
`nomde class`[class]
|
|
47
|
-
|
|
48
|
-
Aucune manipulation requise.
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
## Accessibilité
|
|
52
|
-
Aucune manipulation requise.
|
|
53
|
-
|
|
1
|
+
---
|
|
2
|
+
title: Model de page
|
|
3
|
+
|
|
4
|
+
---
|
|
5
|
+
::: warning 🚩 Important
|
|
6
|
+
Utilisez ce model comme depart pour écrire la page de votre composant:
|
|
7
|
+
|
|
8
|
+
1) Copiez /dubliquez cette page
|
|
9
|
+
2) Renommez votre copie avec le nom de votre composant
|
|
10
|
+
3) Édtitez la page en rempliçant les sections qui conserne votre composant.
|
|
11
|
+
:::
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
Composant pour ....
|
|
15
|
+
|
|
16
|
+
## Aperçu
|
|
17
|
+
|
|
18
|
+
Le composant permet de...
|
|
19
|
+
Et culpa explicabo est amet voluptas qui fuga deleniti. Sed consectetur minus aut animi modi sed natus pariatur.
|
|
20
|
+
|
|
21
|
+
## Comportement
|
|
22
|
+
|
|
23
|
+
Lorem ipsum dolor sit amet. At quas quis qui velit tenetur aut suscipit error id iure doloremque ad velit explicabo. Sit repellat praesentium aut perferendis illum qui omnis recusandae est explicabo dolores in quia tempore qui totam velit.
|
|
24
|
+
|
|
25
|
+
## Référence du composant
|
|
26
|
+
|
|
27
|
+
**ModelComposantPage** `<model-composant/>`
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
## Paramètre
|
|
31
|
+
|
|
32
|
+
Aucun paramètre n'est nécessaire pour ce composant.
|
|
33
|
+
|
|
34
|
+
### Props
|
|
35
|
+
|
|
36
|
+
| Propriété | Type | Description | valeur par défaut |
|
|
37
|
+
|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
|
|
38
|
+
| page | Object | données brutes de la page à créer | Doit contenir au minimum les valeurs suivantes: `{id, type, activityRef }`. Référez-vous à la section sur la [création de page](/guide/pageType.html#qu-est-ce-qu-une-page) pour une liste exhaustive des valeurs de la propriété. |
|
|
39
|
+
|
|
40
|
+
### Slots
|
|
41
|
+
`content`[named-slot] - Eos nemo officiis a ducimus officiis aut delectus obcaecati qui dolor consequatur.
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
## Style
|
|
45
|
+
|
|
46
|
+
`nomde class`[class]
|
|
47
|
+
|
|
48
|
+
Aucune manipulation requise.
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
## Accessibilité
|
|
52
|
+
Aucune manipulation requise.
|
|
53
|
+
|
|
@@ -1,43 +1,43 @@
|
|
|
1
|
-
# Base module
|
|
2
|
-
|
|
3
|
-
Composant racine, essentiel à l'application.
|
|
4
|
-
|
|
5
|
-
## Aperçu
|
|
6
|
-
|
|
7
|
-
Composant racine utilisé pour étendre les fonctionnalités du **Module**.
|
|
8
|
-
|
|
9
|
-
## Référence du composant
|
|
10
|
-
|
|
11
|
-
**BaseModule**
|
|
12
|
-
|
|
13
|
-
## Comportement
|
|
14
|
-
|
|
15
|
-
Le composant agi comme le point d’entré de certaines données de **appBaseModule** dans l'application. Il gère entre autres:
|
|
16
|
-
|
|
17
|
-
- La récupération de la progression: récupérer les données de progression existantes dans le serveurs `LRS`, `LMS` ou l'espace local `indexedDB`
|
|
18
|
-
- Mise à jour de données: fait la mise à jour des valeurs `userMetaData` et `routeHistory` du `store` à partir des données récuperées
|
|
19
|
-
|
|
20
|
-
## Paramètre
|
|
21
|
-
|
|
22
|
-
Aucun paramètre disponible pour ce composant
|
|
23
|
-
|
|
24
|
-
### Props
|
|
25
|
-
|
|
26
|
-
| Propriété | Type | Description | valeur par défaut |
|
|
27
|
-
|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
|
|
28
|
-
| mData | Object | Données initiales passées au composant **Module** | |
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
:::warning 🚩 Important
|
|
32
|
-
|
|
33
|
-
Si certaines routines utiles au Module (comme la récupération de données existantes pour utilisateur) ont besoin d'être exécutées avant le lancement de ce dernier, utilisez ce composant pour les réaliser.
|
|
34
|
-
|
|
35
|
-
:::
|
|
36
|
-
|
|
37
|
-
## Style
|
|
38
|
-
|
|
39
|
-
## Accessibilité
|
|
40
|
-
|
|
41
|
-
Aucune manipulation requise.
|
|
42
|
-
|
|
43
|
-
|
|
1
|
+
# Base module
|
|
2
|
+
|
|
3
|
+
Composant racine, essentiel à l'application.
|
|
4
|
+
|
|
5
|
+
## Aperçu
|
|
6
|
+
|
|
7
|
+
Composant racine utilisé pour étendre les fonctionnalités du **Module**.
|
|
8
|
+
|
|
9
|
+
## Référence du composant
|
|
10
|
+
|
|
11
|
+
**BaseModule**
|
|
12
|
+
|
|
13
|
+
## Comportement
|
|
14
|
+
|
|
15
|
+
Le composant agi comme le point d’entré de certaines données de **appBaseModule** dans l'application. Il gère entre autres:
|
|
16
|
+
|
|
17
|
+
- La récupération de la progression: récupérer les données de progression existantes dans le serveurs `LRS`, `LMS` ou l'espace local `indexedDB`
|
|
18
|
+
- Mise à jour de données: fait la mise à jour des valeurs `userMetaData` et `routeHistory` du `store` à partir des données récuperées
|
|
19
|
+
|
|
20
|
+
## Paramètre
|
|
21
|
+
|
|
22
|
+
Aucun paramètre disponible pour ce composant
|
|
23
|
+
|
|
24
|
+
### Props
|
|
25
|
+
|
|
26
|
+
| Propriété | Type | Description | valeur par défaut |
|
|
27
|
+
|:----------|:-----------------|:-----------------------------------------------------------------------------------------------------------------------------------|:-------|
|
|
28
|
+
| mData | Object | Données initiales passées au composant **Module** | |
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
:::warning 🚩 Important
|
|
32
|
+
|
|
33
|
+
Si certaines routines utiles au Module (comme la récupération de données existantes pour utilisateur) ont besoin d'être exécutées avant le lancement de ce dernier, utilisez ce composant pour les réaliser.
|
|
34
|
+
|
|
35
|
+
:::
|
|
36
|
+
|
|
37
|
+
## Style
|
|
38
|
+
|
|
39
|
+
## Accessibilité
|
|
40
|
+
|
|
41
|
+
Aucune manipulation requise.
|
|
42
|
+
|
|
43
|
+
|