comand-component-library 3.3.17 → 3.3.19
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/dist/comand-component-library.js +1489 -1474
- package/dist/comand-component-library.umd.cjs +4 -4
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/App.vue +12 -2
- package/src/assets/data/box-product.json +5 -5
- package/src/assets/data/image.json +6 -2
- package/src/assets/data/slideshow.json +24 -16
- package/src/assets/styles/global-styles.scss +6 -0
- package/src/components/CmdAddressData.vue +1 -1
- package/src/components/CmdCompanyLogo.vue +2 -2
- package/src/components/CmdImage.vue +46 -1
- package/src/components/CmdSlideshow.vue +1 -56
- package/src/components/{CmdShareButtons.vue → CmdSocialNetworks.vue} +51 -33
- package/src/index.js +1 -1
@@ -52,9 +52,6 @@
|
|
52
52
|
</template>
|
53
53
|
|
54
54
|
<script>
|
55
|
-
const NOT_YET_PRELOADED_IMAGE = image => !image.loaded
|
56
|
-
const NOT_YET_PRELOADED_IMAGES = item => item.images && item.images.find(NOT_YET_PRELOADED_IMAGE)
|
57
|
-
|
58
55
|
export default {
|
59
56
|
name: "CmdSlideshow",
|
60
57
|
data() {
|
@@ -62,7 +59,6 @@ export default {
|
|
62
59
|
index: 0,
|
63
60
|
pause: false,
|
64
61
|
hnd: null,
|
65
|
-
preloadComplete: false,
|
66
62
|
fullWidth: false,
|
67
63
|
currentSlotItem: 0
|
68
64
|
}
|
@@ -156,12 +152,10 @@ export default {
|
|
156
152
|
} else {
|
157
153
|
this.index = this.slideshowItems.length - 1
|
158
154
|
}
|
159
|
-
this.preload(this.index)
|
160
155
|
},
|
161
156
|
showItem(i) {
|
162
157
|
if (i >= 0 && i < this.slideshowItems.length) {
|
163
158
|
this.index = i;
|
164
|
-
this.preload(this.index);
|
165
159
|
}
|
166
160
|
},
|
167
161
|
showNextItem() {
|
@@ -178,59 +172,11 @@ export default {
|
|
178
172
|
} else {
|
179
173
|
this.index = 0
|
180
174
|
}
|
181
|
-
this.preload(this.index)
|
182
175
|
},
|
183
176
|
setupSlider() {
|
184
|
-
this.preload();
|
185
177
|
if (this.autoplay && this.hnd === null) {
|
186
178
|
this.hnd = window.setInterval(() => this.pause || this.showNextItem(), this.autoplayInterval);
|
187
179
|
}
|
188
|
-
},
|
189
|
-
preload(index = 0, num = 2) {
|
190
|
-
if (!this.preloadComplete) {
|
191
|
-
for (let i = index, n = index + num, c = this.slideshowItems.length; i < n && i < c; i++) {
|
192
|
-
const image = this.getDeviceImage(this.slideshowItems[i]);
|
193
|
-
if (image && !image.loaded) {
|
194
|
-
image.loaded = true;
|
195
|
-
new Image().src = image.imgPath;
|
196
|
-
}
|
197
|
-
}
|
198
|
-
this.preloadComplete = !this.slideshowItems.find(NOT_YET_PRELOADED_IMAGES);
|
199
|
-
}
|
200
|
-
},
|
201
|
-
getDeviceImage(item) {
|
202
|
-
if (item === undefined || item.image === undefined) {
|
203
|
-
return null;
|
204
|
-
}
|
205
|
-
const deviceWidth = window.innerWidth;
|
206
|
-
const currentImage = {};
|
207
|
-
|
208
|
-
for (let i = 0, c = item.image.length; i < c; i++) {
|
209
|
-
const deviceImage = item.image[i];
|
210
|
-
|
211
|
-
if (!deviceImage.image.maxWidth || deviceWidth <= deviceImage.image.maxWidth) {
|
212
|
-
currentImage.image.srcSmall = deviceImage.image.srcSmall
|
213
|
-
currentImage.image.alt = item.image.alt
|
214
|
-
currentImage.image.tooltip = item.image.tooltip
|
215
|
-
currentImage.figcaption.text = item.figcaption.text
|
216
|
-
currentImage.figcaption.position = item.figcaption.position
|
217
|
-
currentImage.figcaption.textAlign = item.figcaption.textAlign
|
218
|
-
currentImage.figcaption.show = item.figcaption.show
|
219
|
-
return currentImage;
|
220
|
-
}
|
221
|
-
}
|
222
|
-
|
223
|
-
if (item.image.length) {
|
224
|
-
currentImage.image.srcSmall = item.image.srcSmall
|
225
|
-
currentImage.image.alt = item.image.alt
|
226
|
-
currentImage.image.tooltip = item.image.tooltip
|
227
|
-
currentImage.figcaption.text = item.figcaption.text
|
228
|
-
currentImage.figcaption.position = item.figcaption.position
|
229
|
-
currentImage.figcaption.textAlign = item.figcaption.textAlign
|
230
|
-
currentImage.figcaption.show = item.figcaption.show
|
231
|
-
return currentImage;
|
232
|
-
}
|
233
|
-
return null;
|
234
180
|
}
|
235
181
|
},
|
236
182
|
|
@@ -240,14 +186,13 @@ export default {
|
|
240
186
|
if(this.slideshowItems.length <= this.index) {
|
241
187
|
return null
|
242
188
|
}
|
243
|
-
return this.
|
189
|
+
return this.slideshowItems[this.index]
|
244
190
|
}
|
245
191
|
},
|
246
192
|
watch: {
|
247
193
|
slideshowItems: {
|
248
194
|
handler() {
|
249
195
|
this.index = 0
|
250
|
-
this.preloadComplete = false
|
251
196
|
this.setupSlider()
|
252
197
|
},
|
253
198
|
immediate: true
|
@@ -1,5 +1,5 @@
|
|
1
1
|
<template>
|
2
|
-
<div :class="['cmd-
|
2
|
+
<div :class="['cmd-social-networks', {'stretch': stretchButtons, 'align-right': align === 'right'}]">
|
3
3
|
<!-- begin CmdHeadline -->
|
4
4
|
<CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
|
5
5
|
<!-- end CmdHeadline -->
|
@@ -16,31 +16,33 @@
|
|
16
16
|
/>
|
17
17
|
<!-- end CmdFormElement -->
|
18
18
|
|
19
|
-
<!-- begin
|
20
|
-
<
|
21
|
-
<
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
19
|
+
<!-- begin list of networks -->
|
20
|
+
<ul :class="['flex-container no-flex', {'no-gap': useGap}]">
|
21
|
+
<li v-for="network in validNetworks">
|
22
|
+
<a
|
23
|
+
:key="network.path" :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}]"
|
24
|
+
:id="network.id"
|
25
|
+
:href="getUrl(network)"
|
26
|
+
@click="preventOnDisabled"
|
27
|
+
target="_blank"
|
28
|
+
:title="tooltip(network.tooltip)">
|
29
|
+
<!-- begin CmdIcon -->
|
30
|
+
<CmdIcon v-if="network.iconClass && network.iconPosition !== 'right'" :iconClass="network.iconClass" :type="network.iconType" />
|
31
|
+
<!-- end CmdIcon -->
|
32
|
+
<span v-if="network.linkText">{{ network.linkText }}</span>
|
33
|
+
<!-- begin CmdIcon -->
|
34
|
+
<CmdIcon v-if="network.iconClass && network.iconPosition === 'right'" :iconClass="network.iconClass" :type="network.iconType" />
|
35
|
+
<!-- end CmdIcon -->
|
36
|
+
</a>
|
37
|
+
</li>
|
38
|
+
</ul>
|
39
|
+
<!-- end list of networks -->
|
38
40
|
</div>
|
39
41
|
</template>
|
40
42
|
|
41
43
|
<script>
|
42
44
|
export default {
|
43
|
-
name: "
|
45
|
+
name: "CmdSocialNetworks",
|
44
46
|
data() {
|
45
47
|
return {
|
46
48
|
dataPrivacyAccepted: false
|
@@ -63,6 +65,13 @@ export default {
|
|
63
65
|
type: String,
|
64
66
|
required: false
|
65
67
|
},
|
68
|
+
/**
|
69
|
+
* activate if gap between buttons should appear
|
70
|
+
*/
|
71
|
+
useGap: {
|
72
|
+
type: Boolean,
|
73
|
+
default: true
|
74
|
+
},
|
66
75
|
/**
|
67
76
|
* stretch-buttons to share horizontal space vertically
|
68
77
|
*/
|
@@ -71,9 +80,9 @@ export default {
|
|
71
80
|
default: false
|
72
81
|
},
|
73
82
|
/**
|
74
|
-
* list of
|
83
|
+
* list of networks (i.e. facebook, twitter etc.)
|
75
84
|
*/
|
76
|
-
|
85
|
+
networks: {
|
77
86
|
type: Array,
|
78
87
|
required: true
|
79
88
|
},
|
@@ -133,26 +142,26 @@ export default {
|
|
133
142
|
}
|
134
143
|
},
|
135
144
|
computed: {
|
136
|
-
|
137
|
-
return this.
|
145
|
+
validNetworks() {
|
146
|
+
return this.networks.filter(item => item.path)
|
138
147
|
}
|
139
148
|
},
|
140
149
|
methods: {
|
141
|
-
getUrl(
|
150
|
+
getUrl(network) {
|
142
151
|
if(this.userMustAcceptDataPrivacy && this.dataPrivacyAccepted) {
|
143
152
|
// if path is not given completely by json-data
|
144
153
|
if (this.appendPage) {
|
145
154
|
// if page to share is given by property
|
146
155
|
if (this.page) {
|
147
|
-
return
|
156
|
+
return network.path + encodeURIComponent(this.page)
|
148
157
|
}
|
149
158
|
|
150
159
|
// if current page should be append to url
|
151
|
-
return
|
160
|
+
return network.path + encodeURIComponent(location.href)
|
152
161
|
}
|
153
162
|
|
154
163
|
// if path is given completely by json-data
|
155
|
-
return
|
164
|
+
return network.path
|
156
165
|
}
|
157
166
|
return "#"
|
158
167
|
},
|
@@ -180,14 +189,23 @@ export default {
|
|
180
189
|
</script>
|
181
190
|
|
182
191
|
<style lang="scss">
|
183
|
-
/* begin cmd-
|
192
|
+
/* begin cmd-social-networks -------------------------------------------------------------------------------------------- */
|
184
193
|
@import '../assets/styles/variables';
|
185
194
|
|
186
|
-
.cmd-
|
195
|
+
.cmd-social-networks {
|
187
196
|
display: flex;
|
188
197
|
flex-direction: column;
|
189
198
|
gap: var(--default-gap);
|
190
199
|
|
200
|
+
.cmd-headline {
|
201
|
+
margin: 0;
|
202
|
+
}
|
203
|
+
|
204
|
+
li {
|
205
|
+
list-style-type: none;
|
206
|
+
margin: 0;
|
207
|
+
}
|
208
|
+
|
191
209
|
&.align-right {
|
192
210
|
.share-button-wrapper {
|
193
211
|
justify-content: flex-end;
|
@@ -272,7 +290,7 @@ export default {
|
|
272
290
|
}
|
273
291
|
|
274
292
|
@media only screen and (max-width: $small-max-width) {
|
275
|
-
.cmd-
|
293
|
+
.cmd-social-networks {
|
276
294
|
justify-content: center;
|
277
295
|
|
278
296
|
.button {
|
@@ -288,5 +306,5 @@ export default {
|
|
288
306
|
}
|
289
307
|
}
|
290
308
|
|
291
|
-
/* end cmd-
|
309
|
+
/* end cmd-social-networks ------------------------------------------------------------------------------------------ */
|
292
310
|
</style>
|
package/src/index.js
CHANGED
@@ -29,7 +29,7 @@ export { default as CmdMultistepFormProgressBar } from '@/components/CmdMultiste
|
|
29
29
|
export { default as CmdOpeningHours } from '@/components/CmdOpeningHours.vue'
|
30
30
|
export { default as CmdPager } from '@/components/CmdPager.vue'
|
31
31
|
export { default as CmdProgressBar } from '@/components/CmdProgressBar.vue'
|
32
|
-
export { default as
|
32
|
+
export { default as CmdSocialNetworks } from '@/components/CmdSocialNetworks.vue'
|
33
33
|
export { default as CmdSiteFooter } from '@/components/CmdSiteFooter.vue'
|
34
34
|
export { default as CmdSiteHeader } from '@/components/CmdSiteHeader.vue'
|
35
35
|
export { default as CmdSiteSearch } from '@/components/CmdSiteSearch.vue'
|