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.
@@ -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.getDeviceImage(this.slideshowItems[this.index])
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-share-buttons', {'stretch': stretchButtons, 'align-right': align === 'right'}]">
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 share buttons -->
20
- <div class="share-button-wrapper">
21
- <a v-for="shareButton in validShareButtons"
22
- :key="shareButton.path" :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}]"
23
- :id="shareButton.id"
24
- :href="getUrl(shareButton)"
25
- @click="preventOnDisabled"
26
- target="_blank"
27
- :title="tooltip(shareButton.tooltip)">
28
- <!-- begin CmdIcon -->
29
- <CmdIcon v-if="shareButton.iconClass && shareButton.iconPosition !== 'right'" :iconClass="shareButton.iconClass" :type="shareButton.iconType" />
30
- <!-- end CmdIcon -->
31
- <span v-if="shareButton.linkText">{{ shareButton.linkText }}</span>
32
- <!-- begin CmdIcon -->
33
- <CmdIcon v-if="shareButton.iconClass && shareButton.iconPosition === 'right'" :iconClass="shareButton.iconClass" :type="shareButton.iconType" />
34
- <!-- end CmdIcon -->
35
- </a>
36
- </div>
37
- <!-- end share buttons -->
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: "CmdShareButtons",
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 share-buttons (i.e. facebook, twitter etc.)
83
+ * list of networks (i.e. facebook, twitter etc.)
75
84
  */
76
- shareButtons: {
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
- validShareButtons() {
137
- return this.shareButtons.filter(item => item.path)
145
+ validNetworks() {
146
+ return this.networks.filter(item => item.path)
138
147
  }
139
148
  },
140
149
  methods: {
141
- getUrl(shareButton) {
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 shareButton.path + encodeURIComponent(this.page)
156
+ return network.path + encodeURIComponent(this.page)
148
157
  }
149
158
 
150
159
  // if current page should be append to url
151
- return shareButton.path + encodeURIComponent(location.href)
160
+ return network.path + encodeURIComponent(location.href)
152
161
  }
153
162
 
154
163
  // if path is given completely by json-data
155
- return shareButton.path
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-share-buttons -------------------------------------------------------------------------------------------- */
192
+ /* begin cmd-social-networks -------------------------------------------------------------------------------------------- */
184
193
  @import '../assets/styles/variables';
185
194
 
186
- .cmd-share-buttons {
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-share-buttons {
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-share-buttons ------------------------------------------------------------------------------------------ */
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 CmdShareButtons } from '@/components/CmdShareButtons.vue'
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'