cyber-elx 1.2.1 → 1.2.3
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.
|
@@ -61,6 +61,7 @@ The Student Course Player is rendered when a student opens a course they are enr
|
|
|
61
61
|
|------|------|-------------|
|
|
62
62
|
| `user` | Object | The current logged-in user object (see structure below) |
|
|
63
63
|
| `course` | Object | The course object with chapters, elements, files, and progress (see structure below) |
|
|
64
|
+
| `dynamicElementsMetaData` | Array | Metadata for dynamic/custom element types (icon, label, key) |
|
|
64
65
|
|
|
65
66
|
### The `user` Object
|
|
66
67
|
|
|
@@ -118,7 +119,32 @@ The Student Course Player is rendered when a student opens a course they are enr
|
|
|
118
119
|
| `quiz` | `mdi-help-box-multiple` | Quiz/assessment (rendered by parent via slot) |
|
|
119
120
|
| `pdf` | `mdi-note` | PDF document (rendered by parent via slot) |
|
|
120
121
|
| `iframe` | `mdi-text-box` | Embedded iframe content (rendered by parent via slot) |
|
|
121
|
-
|
|
|
122
|
+
| *dynamic* | From `dynamicElementsMetaData` | Custom element types defined in metadata |
|
|
123
|
+
| *unknown* | `mdi-play-box` | Default fallback icon for unrecognized types |
|
|
124
|
+
|
|
125
|
+
### The `dynamicElementsMetaData` Array
|
|
126
|
+
|
|
127
|
+
This prop contains metadata for custom/dynamic element types. When rendering the element list, the component checks if the element type matches any entry in this array. If found, it uses the corresponding icon and label.
|
|
128
|
+
|
|
129
|
+
```js
|
|
130
|
+
[
|
|
131
|
+
{
|
|
132
|
+
key: "custom-quiz", // String - Element type identifier (matches element.type)
|
|
133
|
+
icon: "mdi-puzzle", // String - MDI icon name to display
|
|
134
|
+
label: "Custom Quiz" // String - Display label for the element
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
key: "interactive",
|
|
138
|
+
icon: "mdi-gesture-tap",
|
|
139
|
+
label: "Interactive"
|
|
140
|
+
}
|
|
141
|
+
]
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
**Element Icon Resolution Order:**
|
|
145
|
+
1. Check for known types (`video`, `youtube`, `video-iframe`, `quiz`, `pdf`, `iframe`)
|
|
146
|
+
2. Check if `element.type` matches any `dynamicElementsMetaData[].key`
|
|
147
|
+
3. Fallback to default `mdi-play-box` icon
|
|
122
148
|
|
|
123
149
|
### Local State (data)
|
|
124
150
|
|
|
@@ -239,6 +265,7 @@ module.exports = {
|
|
|
239
265
|
props: [
|
|
240
266
|
'user',
|
|
241
267
|
'course',
|
|
268
|
+
'dynamicElementsMetaData',
|
|
242
269
|
],
|
|
243
270
|
template: /* html */`
|
|
244
271
|
<div class="course-player" :style="coursePageStyle">
|
|
@@ -348,8 +375,12 @@ module.exports = {
|
|
|
348
375
|
</svg>
|
|
349
376
|
<span style="padding-left: 17px;">{{ capitalizeText(element.title) }}</span>
|
|
350
377
|
</v-list-item-content>
|
|
378
|
+
<v-list-item-content v-else-if="dynamicElementsMetaData.find(de => de.key == element.type)" style="font-size: 12px; color: white;">
|
|
379
|
+
<v-icon :style="(course.progressData[element.id]) ? 'color: #00dd04;' : ''" style="width: 19px; position: absolute; left: 7px; color: white;font-size:18px ;" >{{ dynamicElementsMetaData.find(de => de.key == element.type).icon }}</v-icon>
|
|
380
|
+
<span style="padding-left: 17px;">{{ dynamicElementsMetaData.find(de => de.key == element.type).label }}</span>
|
|
381
|
+
</v-list-item-content>
|
|
351
382
|
<v-list-item-content v-else style="font-size: 12px; color: white;" >
|
|
352
|
-
<v-icon :style="(course.progressData[element.id]) ? 'color: #00dd04;' : ''" style="width: 19px; position: absolute; left: 7px; color: white;font-size:18px ;" >mdi-
|
|
383
|
+
<v-icon :style="(course.progressData[element.id]) ? 'color: #00dd04;' : ''" style="width: 19px; position: absolute; left: 7px; color: white;font-size:18px ;" >mdi-play-box</v-icon>
|
|
353
384
|
<span style="padding-left: 17px;">{{ capitalizeText(element.title) }}</span>
|
|
354
385
|
</v-list-item-content>
|
|
355
386
|
</v-list-item>
|
|
@@ -488,9 +519,10 @@ module.exports = {
|
|
|
488
519
|
`,
|
|
489
520
|
style: /* css */`
|
|
490
521
|
.course-player {
|
|
491
|
-
|
|
522
|
+
margin-left: -40px; /* To use all the width */
|
|
523
|
+
margin-right: -40px; /* To use all the width */
|
|
492
524
|
margin-top: -12px;
|
|
493
|
-
height: calc(100vh -
|
|
525
|
+
height: calc(100vh - 64px);
|
|
494
526
|
}
|
|
495
527
|
|
|
496
528
|
.course-player .v-overlay--active {
|