comand-component-library 3.3.17 → 3.3.19

package/src/components/CmdSlideshow.vue

@@ -52,9 +52,6 @@
 </template>
 
 <script>
-const NOT_YET_PRELOADED_IMAGE = image => !image.loaded
-const NOT_YET_PRELOADED_IMAGES = item => item.images && item.images.find(NOT_YET_PRELOADED_IMAGE)
-
 export default {
     name: "CmdSlideshow",
     data() {
@@ -62,7 +59,6 @@ export default {
             index: 0,
             pause: false,
             hnd: null,
-            preloadComplete: false,
             fullWidth: false,
             currentSlotItem: 0
         }
@@ -156,12 +152,10 @@ export default {
             } else {
                 this.index = this.slideshowItems.length - 1
             }
-            this.preload(this.index)
         },
         showItem(i) {
             if (i >= 0 && i < this.slideshowItems.length) {
                 this.index = i;
-                this.preload(this.index);
             }
         },
         showNextItem() {
@@ -178,59 +172,11 @@ export default {
             } else {
                 this.index = 0
             }
-            this.preload(this.index)
         },
         setupSlider() {
-            this.preload();
             if (this.autoplay && this.hnd === null) {
                 this.hnd = window.setInterval(() => this.pause || this.showNextItem(), this.autoplayInterval);
             }
-        },
-        preload(index = 0, num = 2) {
-            if (!this.preloadComplete) {
-                for (let i = index, n = index + num, c = this.slideshowItems.length; i < n && i < c; i++) {
-                    const image = this.getDeviceImage(this.slideshowItems[i]);
-                    if (image && !image.loaded) {
-                        image.loaded = true;
-                        new Image().src = image.imgPath;
-                    }
-                }
-                this.preloadComplete = !this.slideshowItems.find(NOT_YET_PRELOADED_IMAGES);
-            }
-        },
-        getDeviceImage(item) {
-            if (item === undefined || item.image === undefined) {
-                return null;
-            }
-            const deviceWidth = window.innerWidth;
-            const currentImage = {};
-
-            for (let i = 0, c = item.image.length; i < c; i++) {
-                const deviceImage = item.image[i];
-
-                if (!deviceImage.image.maxWidth || deviceWidth <= deviceImage.image.maxWidth) {
-                    currentImage.image.srcSmall = deviceImage.image.srcSmall
-                    currentImage.image.alt = item.image.alt
-                    currentImage.image.tooltip = item.image.tooltip
-                    currentImage.figcaption.text = item.figcaption.text
-                    currentImage.figcaption.position = item.figcaption.position
-                    currentImage.figcaption.textAlign = item.figcaption.textAlign
-                    currentImage.figcaption.show = item.figcaption.show
-                    return currentImage;
-                }
-            }
-
-            if (item.image.length) {
-                currentImage.image.srcSmall = item.image.srcSmall
-                currentImage.image.alt = item.image.alt
-                currentImage.image.tooltip = item.image.tooltip
-                currentImage.figcaption.text = item.figcaption.text
-                currentImage.figcaption.position = item.figcaption.position
-                currentImage.figcaption.textAlign = item.figcaption.textAlign
-                currentImage.figcaption.show = item.figcaption.show
-                return currentImage;
-            }
-            return null;
         }
     },
 
@@ -240,14 +186,13 @@ export default {
             if(this.slideshowItems.length <= this.index) {
                 return null
             }
-            return this.getDeviceImage(this.slideshowItems[this.index])
+            return this.slideshowItems[this.index]
         }
     },
     watch: {
         slideshowItems: {
             handler() {
                 this.index = 0
-                this.preloadComplete = false
                 this.setupSlider()
             },
             immediate: true

package/src/components/{CmdShareButtons.vue → CmdSocialNetworks.vue}

@@ -1,5 +1,5 @@
 <template>
-    <div :class="['cmd-share-buttons', {'stretch': stretchButtons, 'align-right': align === 'right'}]">
+    <div :class="['cmd-social-networks', {'stretch': stretchButtons, 'align-right': align === 'right'}]">
         <!-- begin CmdHeadline -->
         <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline" />
         <!-- end CmdHeadline -->
@@ -16,31 +16,33 @@
         />
         <!-- end CmdFormElement -->
 
-        <!-- begin share buttons -->
-        <div class="share-button-wrapper">
-            <a v-for="shareButton in validShareButtons"
-               :key="shareButton.path" :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}]"
-               :id="shareButton.id"
-               :href="getUrl(shareButton)"
-               @click="preventOnDisabled"
-               target="_blank"
-               :title="tooltip(shareButton.tooltip)">
-                <!-- begin CmdIcon -->
-                <CmdIcon v-if="shareButton.iconClass && shareButton.iconPosition !== 'right'" :iconClass="shareButton.iconClass" :type="shareButton.iconType" />
-                <!-- end CmdIcon -->
-                <span v-if="shareButton.linkText">{{ shareButton.linkText }}</span>
-                <!-- begin CmdIcon -->
-                <CmdIcon v-if="shareButton.iconClass && shareButton.iconPosition === 'right'" :iconClass="shareButton.iconClass" :type="shareButton.iconType" />
-                <!-- end CmdIcon -->
-            </a>
-        </div>
-        <!-- end share buttons -->
+        <!-- begin list of networks -->
+        <ul :class="['flex-container no-flex', {'no-gap': useGap}]">
+            <li v-for="network in validNetworks">
+                <a
+                   :key="network.path" :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}]"
+                   :id="network.id"
+                   :href="getUrl(network)"
+                   @click="preventOnDisabled"
+                   target="_blank"
+                   :title="tooltip(network.tooltip)">
+                        <!-- begin CmdIcon -->
+                        <CmdIcon v-if="network.iconClass && network.iconPosition !== 'right'" :iconClass="network.iconClass" :type="network.iconType" />
+                        <!-- end CmdIcon -->
+                        <span v-if="network.linkText">{{ network.linkText }}</span>
+                        <!-- begin CmdIcon -->
+                        <CmdIcon v-if="network.iconClass && network.iconPosition === 'right'" :iconClass="network.iconClass" :type="network.iconType" />
+                        <!-- end CmdIcon -->
+                </a>
+            </li>
+        </ul>
+        <!-- end list of networks -->
     </div>
 </template>
 
 <script>
 export default {
-    name: "CmdShareButtons",
+    name: "CmdSocialNetworks",
     data() {
         return {
             dataPrivacyAccepted: false
@@ -63,6 +65,13 @@ export default {
             type: String,
             required: false
         },
+        /**
+         * activate if gap between buttons should appear
+         */
+        useGap: {
+            type: Boolean,
+            default: true
+        },
         /**
          * stretch-buttons to share horizontal space vertically
          */
@@ -71,9 +80,9 @@ export default {
             default: false
         },
         /**
-         * list of share-buttons (i.e. facebook, twitter etc.)
+         * list of networks (i.e. facebook, twitter etc.)
          */
-        shareButtons: {
+        networks: {
             type: Array,
             required: true
         },
@@ -133,26 +142,26 @@ export default {
         }
     },
     computed: {
-        validShareButtons() {
-            return this.shareButtons.filter(item => item.path)
+        validNetworks() {
+            return this.networks.filter(item => item.path)
         }
     },
     methods: {
-        getUrl(shareButton) {
+        getUrl(network) {
             if(this.userMustAcceptDataPrivacy && this.dataPrivacyAccepted) {
                 // if path is not given completely by json-data
                 if (this.appendPage) {
                     // if page to share is given by property
                     if (this.page) {
-                        return shareButton.path + encodeURIComponent(this.page)
+                        return network.path + encodeURIComponent(this.page)
                     }
 
                     // if current page should be append to url
-                    return shareButton.path + encodeURIComponent(location.href)
+                    return network.path + encodeURIComponent(location.href)
                 }
 
                 // if path is given completely by json-data
-                return shareButton.path
+                return network.path
             }
             return "#"
         },
@@ -180,14 +189,23 @@ export default {
 </script>
 
 <style lang="scss">
-/* begin cmd-share-buttons -------------------------------------------------------------------------------------------- */
+/* begin cmd-social-networks -------------------------------------------------------------------------------------------- */
 @import '../assets/styles/variables';
 
-.cmd-share-buttons {
+.cmd-social-networks {
     display: flex;
     flex-direction: column;
     gap: var(--default-gap);
 
+    .cmd-headline {
+        margin: 0;
+    }
+
+    li {
+        list-style-type: none;
+        margin: 0;
+    }
+
     &.align-right {
         .share-button-wrapper {
             justify-content: flex-end;
@@ -272,7 +290,7 @@ export default {
 }
 
 @media only screen and (max-width: $small-max-width) {
-    .cmd-share-buttons {
+    .cmd-social-networks {
         justify-content: center;
 
         .button {
@@ -288,5 +306,5 @@ export default {
     }
 }
 
-/* end cmd-share-buttons ------------------------------------------------------------------------------------------ */
+/* end cmd-social-networks ------------------------------------------------------------------------------------------ */
 </style>

package/src/index.js

@@ -29,7 +29,7 @@ export { default as CmdMultistepFormProgressBar } from '@/components/CmdMultiste
 export { default as CmdOpeningHours } from '@/components/CmdOpeningHours.vue'
 export { default as CmdPager } from '@/components/CmdPager.vue'
 export { default as CmdProgressBar } from '@/components/CmdProgressBar.vue'
-export { default as CmdShareButtons } from '@/components/CmdShareButtons.vue'
+export { default as CmdSocialNetworks } from '@/components/CmdSocialNetworks.vue'
 export { default as CmdSiteFooter } from '@/components/CmdSiteFooter.vue'
 export { default as CmdSiteHeader } from '@/components/CmdSiteHeader.vue'
 export { default as CmdSiteSearch } from '@/components/CmdSiteSearch.vue'