1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
<template>
<component :is="isCurrentUnit ? 'p' : 'a'" v-if="element" class="cw-tools-units-item-header" :href="isCurrentUnit ? '' : url">
<studip-ident-image v-model="identimage" :baseColor="headerColor.hex" :pattern="element.attributes.title" />
<div class="cw-tools-units-item-header-image" :style="headerImageStyle"></div>
<div class="cw-tools-units-item-header-details">
<header :class="{'current' : isCurrentUnit }">{{ element.attributes.title }}</header>
<p>{{ element.attributes.payload.description }}</p>
</div>
</component>
</template>
<script>
import StudipIdentImage from '../../StudipIdentImage.vue';
import colorMixin from '@/vue/mixins/courseware/colors.js';
import { mapGetters } from 'vuex';
export default {
name: 'CoursewareToolsUnitsItem',
mixins: [colorMixin],
components: {
StudipIdentImage,
},
props: {
unit: Object,
element: Object,
},
data() {
return {
identimage: '',
};
},
computed: {
...mapGetters({
context: 'context',
currentUnit: 'currentUnit',
}),
isCurrentUnit() {
return this.currentUnit.id === this.unit.id;
},
headerImageUrl() {
return this.element.relationships?.image?.meta?.['download-url'];
},
headerImageStyle() {
if (this.headerImageUrl) {
return { 'background-image': 'url(' + this.headerImageUrl + ')' };
}
return { 'background-image': 'url(' + this.identimage + ')' };
},
headerColor() {
const rootColor = this.element?.attributes?.payload?.color ?? 'studip-blue';
return this.mixinColors.find((color) => color.class === rootColor);
},
inCourseContext() {
return this.context.type === 'courses';
},
url() {
if (this.inCourseContext) {
return STUDIP.URLHelper.getURL('dispatch.php/course/courseware/courseware/' + this.unit.id, {
cid: this.context.id,
});
} else {
return STUDIP.URLHelper.getURL('dispatch.php/contents/courseware/courseware/' + this.unit.id);
}
},
}
};
</script>
<style lang="scss">
.cw-tools-units-item-header {
display: flex;
flex-direction: row;
height: 100px;
margin-top: 8px;
.cw-tools-units-item-header-image {
height: 100px;
width: 150px;
min-width: 150px;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center;
background-color: var(--color--courseware-background-highlight);
}
.cw-tools-units-item-header-details {
margin: 0 8px;
display: -webkit-box;
overflow: hidden;
height: 100px;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
header {
margin: 0 0 6px 0;
font-size: 16px;
line-height: 16px;
&.current {
font-weight: 700;
color: var(--color--font-primary);
}
}
p {
margin: 0;
color: var(--color--font-primary);
}
}
}
</style>
|
