comand-component-library 3.3.84 → 3.3.86

package/src/components/CmdOpeningHoursItem.vue

@@ -0,0 +1,264 @@
+<template>
+    <!-- begin opening-days and -hours -->
+    <template v-if="!editing">
+        <dt class="cmd-opening-hours-item">{{ day.day }}</dt>
+        <dd>
+            <span v-if="day.am" class="am">
+                <template v-if="day.am.displayText">{{ day.am.displayText }}</template>
+                <template
+                    v-else>{{ getTime(day.am.fromTime) }} {{ separator }} {{
+                        getTime(day.am.tillTime)
+                    }}</template>
+            </span>
+            <span v-if="day.pm" class="pm">
+                <template v-if="day.pm.displayText">{{ day.pm.displayText }}</template>
+                <template
+                    v-else>{{ getTime(day.pm.fromTime) }} {{ separator }} {{
+                        getTime(day.pm.tillTime)
+                    }}</template>
+            </span>
+        </dd>
+    </template>
+    <!-- end opening-days and -hours -->
+
+    <!-- begin edit-mode -->
+    <template v-else>
+        <!-- begin day -->
+        <dt>
+            <CmdFormElement
+                element="input"
+                type="text"
+                class="edit-mode"
+                :showLabel="false"
+                labelText="Text for weekday"
+                placeholder="Text for weekday"
+                v-model="editableDay.day"
+            />
+        </dt>
+        <!-- end day -->
+
+        <!-- begin hours -->
+        <dd class="flex-container no-flex">
+            <!-- begin AM -->
+            <div class="flex-container no-flex am-wrapper">
+            <template v-if="editableDay.amClosed">
+                <CmdFormElement
+                    element="input"
+                    type="text"
+                    class="edit-mode"
+                    :showLabel="false"
+                    labelText="Text for 'closed'"
+                    placeholder="Text for 'closed'"
+                    v-model="editableDay.amDisplayText"
+                />
+            </template>
+            <div v-if="!editableDay.amClosed" class="input-wrapper">
+                <CmdFormElement
+                    element="input"
+                    type="time"
+                    class="edit-mode"
+                    :showLabel="false"
+                    labelText="Text for AM from"
+                    placeholder="Text for AM from"
+                    v-model="editableDay.amFrom"
+                />
+                <CmdFormElement
+                    element="input"
+                    type="time"
+                    :showLabel="false"
+                    class="edit-mode"
+                    :min="editableDay.amFrom"
+                    labelText="Text for AM till"
+                    placeholder="Text for AM till"
+                    v-model="editableDay.amTill"
+                />
+            </div>
+            <a href="#"
+               @click.prevent="toggleClosedStatus('am')"
+               :title="editableDay.amClosed ? 'Set to open' : 'Set to closed'"
+               :class="editableDay.amClosed ? 'icon-clock' : 'icon-blocked'"
+            ></a>
+            </div>
+            <!-- end AM -->
+
+            <!-- begin PM -->
+            <div class="flex-container no-flex pm-wrapper">
+                <template v-if="editableDay.pmClosed">
+                    <CmdFormElement
+                        element="input"
+                        type="text"
+                        class="edit-mode"
+                        :showLabel="false"
+                        labelText="Text for 'closed'"
+                        placeholder="Text for 'closed'"
+                        v-model="editableDay.pmDisplayText"
+                    />
+                </template>
+                <div v-if="!editableDay.pmClosed" class="input-wrapper">
+                    <CmdFormElement
+                        element="input"
+                        type="time"
+                        :showLabel="false"
+                        class="edit-mode"
+                        labelText="Text for PM from"
+                        placeholder="Text for PM from"
+                        v-model="editableDay.pmFrom"
+                    />
+                    <CmdFormElement
+                        element="input"
+                        type="time"
+                        :showLabel="false"
+                        class="edit-mode"
+                        :min="editableDay.pmFrom"
+                        labelText="Text for PM till"
+                        placeholder="Text for PM till"
+                        v-model="editableDay.pmTill"
+                    />
+                </div>
+                <a href="#"
+                   @click.prevent="toggleClosedStatus('pm')"
+                   :title="editableDay.pmClosed ? 'Set to open' : 'Set to closed'"
+                   :class="editableDay.pmClosed ? 'icon-clock' : 'icon-blocked'"
+                ></a>
+            </div>
+            <!-- end PM -->
+        </dd>
+        <!-- end hours -->
+    </template>
+    <!-- end edit-mode -->
+</template>
+
+<script>
+import EditMode from "../mixins/EditMode.vue"
+import {updateHandlerProvider} from "../utils/editmode.js"
+
+function timeFormatting(separator, suffix1, suffix2, hoursLeadingZero = true) {
+    function addLeadingZero(time, addLeadingZero) {
+        if (addLeadingZero && time < 10) {
+            return "0" + time
+        }
+        return time
+    }
+
+    return (hour, minute) => {
+        if (suffix2) {
+            let hour12 = hour
+            let currentSuffix = suffix1
+            if (hour12 > 12) {
+                hour12 -= 12
+                currentSuffix = suffix2
+            }
+            return addLeadingZero(hour12, hoursLeadingZero) + separator + addLeadingZero(minute, true) + currentSuffix
+        }
+        return addLeadingZero(hour, hoursLeadingZero) + separator + addLeadingZero(minute, true) + suffix1
+    }
+}
+
+export default {
+    name: "CmdOpeningHoursItem",
+    mixins: [EditMode],
+    data() {
+        return {
+            editableDay: {}
+        }
+    },
+    props: {
+        /**
+         * list of opening-hours
+         */
+        day: {
+            type: Object,
+            required: true
+        },
+        /**
+         * separator for time-spans
+         */
+        separator: {
+            type: String,
+            default: "–"
+        },
+        /**
+         *  abbreviation text for 'hours' (as a unit after displayed times)
+         */
+        abbreviationText: {
+            type: String,
+            default: "h"
+        },
+        /**
+         * option to set custom time format by function
+         */
+        timeFormatter: {
+            type: Function,
+            required: false
+        }
+    },
+    methods: {
+        toggleClosedStatus(period) {
+            period  === 'am' ? this.editableDay.amClosed = !this.editableDay.amClosed : this.editableDay.pmClosed = !this.editableDay.pmClosed
+        },
+        getTime(time) {
+            if (this.timeFormatter) {
+                return this.timeFormatter(time.hours, time.mins)
+            }
+            return timeFormatting(":", " " + this.abbreviationText, "", false)(time.hours, time.mins)
+        },
+        updateHandlerProvider() {
+            const data = this.editableDay
+            return updateHandlerProvider(this, {
+                update(props) {
+                    props.day = data.day
+                    if (!props.am) {
+                        props.am = {}
+                    }
+                    props.am.fromTime = data.amFrom
+                    props.am.tillTime = data.amTill
+                    props.am.displayText = data.amClosed ? data.amDisplayText : ""
+                    if (!props.pm) {
+                        props.pm = {}
+                    }
+                    props.pm.fromTime = data.pmFrom
+                    props.pm.tillTime = data.pmTill
+                    props.pm.displayText = data.pmClosed ? data.pmDisplayText : ""
+                }
+            })
+        }
+    },
+    watch: {
+        day: {
+            handler() {
+                const timeFormatter = timeFormatting(":", "", "", true)
+                this.editableDay = {
+                    day: this.day.day,
+                    amFrom: timeFormatter(this.day.am.fromTime.hours, this.day.am.fromTime.mins),
+                    amTill: timeFormatter(this.day.am.tillTime.hours, this.day.am.tillTime.mins),
+                    amDisplayText: this.day.am.displayText,
+                    amClosed: !!this.day.am.displayText,
+                    pmFrom: timeFormatter(this.day.pm.fromTime.hours, this.day.pm.fromTime.mins),
+                    pmTill: timeFormatter(this.day.pm.tillTime.hours, this.day.pm.tillTime.mins),
+                    pmClosed: !!this.day.pm.displayText,
+                    pmDisplayText: this.day.pm.displayText
+                }
+            },
+            immediate: true,
+            deep: true
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.edit-mode-opening-hours-item {
+    .am-wrapper, .pm-wrapper {
+        align-items: center;
+        gap: calc(var(--default-gap) / 2);
+    }
+
+    label {
+        max-width: 11rem;
+    }
+
+    .input-wrapper {
+        width: 11rem;
+    }
+}
+</style>

package/src/components/{CmdPager.vue → CmdPagination.vue}

@@ -166,7 +166,7 @@ export default {
 </script>
 
 <style lang="scss">
-/* begin cmd-pager ---------------------------------------------------------------------------------------- */
+/* begin cmd-pagination ---------------------------------------------------------------------------------------- */
 @import '../assets/styles/variables';
 
 .cmd-pager {
@@ -233,5 +233,5 @@ export default {
     }
 }
 
-/* end cmd-pager ------------------------------------------------------------------------------------------ */
+/* end cmd-pagination ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdSlideshow.vue

@@ -3,8 +3,11 @@
         <div class="inner-slideshow-wrapper" @mouseenter="pause = true" @mouseleave="pause = false">
             <!-- begin CmdSlideButton -->
             <CmdSlideButton
+                v-if="showSlideButtons"
                 @click.prevent="showPrevItem"
                 slideButtonType="prev"
+                :class="{'disabled': slideshowItemEditing}"
+                v-bind="tooltipForSlidebuttons"
             />
             <!-- end CmdSlideButton -->
 
@@ -12,19 +15,34 @@
             <transition-group name="fade">
                 <template v-if="currentItem">
                     <template v-if="!useSlot">
-                        <a v-if="currentItem?.link?.href" :href="currentItem?.link?.href" :title="currentItem?.link?.tooltip" :key="index">
+                        <template v-if="!editModeContext">
+                            <a v-if="currentItem?.link?.href" :href="currentItem?.link?.href"
+                               :title="currentItem?.link?.tooltip">
                             <!-- begin CmdImage -->
                             <CmdImage :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
                             <!-- begin CmdImage -->
                         </a>
 
                        <!-- begin CmdImage -->
-                        <CmdImage v-else :image="currentItem?.image" :figcaption="currentItem?.figcaption" :key="index"/>
+                            <CmdImage v-else :image="currentItem?.image" :figcaption="currentItem?.figcaption"/>
+                            <!-- begin CmdImage -->
+                        </template>
+
+                        <!-- begin edit-mode view -->
                         <!-- begin CmdImage -->
+                        <CmdImage
+                            v-else-if="slideshowItems.length"
+                            :image="currentItem?.image"
+                            :figcaption="currentItem?.figcaption"
+                            :componentPath="['props', 'slideshowItems', index]"
+                            :editModeConfig="imageStructure()"
+                        />
+                        <!-- end CmdImage -->
+                        <!-- end edit-mode view -->
                     </template>
                     <div
                         v-else
-                        class="image-wrapper"
+                        class="slot-wrapper"
                         :key="index"
                         :style="'background-image: url(' + currentItem.image.srcLarge + ')'"
                     >
@@ -33,35 +51,54 @@
                         <!-- end slot -->
                     </div>
                 </template>
+                <button v-else-if="editModeContext" type="button" class="button confirm"  @click="onAddItem">
+                    <span class="icon-plus"></span>
+                    <span>Add new slideshow-image</span>
+                </button>
             </transition-group>
             <!-- end area to slide -->
 
             <!-- begin CmdSlideButton -->
             <CmdSlideButton
+                v-if="showSlideButtons"
                 @click.prevent="showNextItem"
+                :class="{'disabled': slideshowItemEditing}"
+                v-bind="tooltipForSlidebuttons"
             />
             <!-- end CmdSlideButton -->
 
             <ol v-if="showQuickLinkIcons">
                 <li v-for="(item, i) in slideshowItems" :key="i" :class="{active: i === index }">
-                    <a href="#" @click.prevent="index = i" :aria-label="index"></a>
+                    <a href="#"
+                       :class="{'disabled': slideshowItemEditing}"
+                       @click.prevent="showItem(i)"
+                       :aria-label="index"
+                       :title="slideshowItemEditing ? 'Not allowed while editing!' : 'Switch to image #' + (i + 1)"
+                    >
+                    </a>
                 </li>
             </ol>
-            <span v-if="showCounter">{{ index + 1 }}/{{ slideshowItems.length }}</span>
+            <span class="item-counter" v-if="showCounter">{{ index + 1 }}/{{ slideshowItems.length }}</span>
         </div>
     </div>
 </template>
 
 <script>
+// import mixins
+import EditMode from "../mixins/EditMode.vue"
+import {buildComponentPath, updateHandlerProvider} from "../utils/editmode.js"
+import {createUuid} from "../utils/common.js"
 export default {
     name: "CmdSlideshow",
+    mixins: [EditMode],
     data() {
         return {
             index: 0,
             pause: false,
             hnd: null,
             fullWidth: false,
-            currentSlotItem: 0
+            currentSlotItem: 0,
+            slideshowItemEditing: false
         }
     },
     props: {
@@ -107,9 +144,18 @@ export default {
             type: Array,
             required: true
         },
+        /**
+         * toggle slide-buttons-visibility
+         */
+        showSlideButtons: {
+            type: Boolean,
+            default: false
+        },
         /**
          * properties for CmdSlideButtons-component
          *
+         * showSlideButtons-property must be activated
+         *
          * @requiredForAccessibility: partial
          */
         cmdSlideButtons: {
@@ -140,7 +186,50 @@ export default {
         }
     },
     methods: {
+        itemProvider() {
+            return {
+                "image": {
+                    "src": {
+                        "large": "/media/images/slideshow-images/large/slide1.jpg",
+                        "medium": "/media/images/slideshow-images/medium/slide1.jpg",
+                        "small": "/media/images/slideshow-images/small/slide1.jpg"
+                    },
+                    "alt": "Alternative Text",
+                    "tooltip": "Tooltip DE"
+                },
+                "figcaption": {
+                    "text": "Figcaption DE",
+                    "position": "bottom",
+                    "textAlign": "center",
+                    "show": true
+                }
+            }
+        },
+        onAddItem() {
+            this.editModeContext.content.addContent(
+                buildComponentPath(this, 'props', 'slideshowItems', -1),
+                this.itemProvider)
+        },
+        imageStructure() {
+            return {
+                itemProviderOverwrite: () => ({
+                    "image": {
+                        "src": {
+                            "large": "/media/images/slideshow-images/large/slide1.jpg",
+                            "medium": "/media/images/slideshow-images/medium/slide1.jpg",
+                            "small": "/media/images/slideshow-images/small/slide1.jpg"
+                        },
+                        "tooltip": "Tooltip DE"
+                    }
+                })
+            }
+        },
         showPrevItem() {
+            // avoids slide-button to be clicked in edit-mode
+            if (this.slideshowItemEditing) {
+                return
+            }
+
             if (this.useSlot) {
                 if (this.currentSlotItem > 0) {
                     this.currentSlotItem--
@@ -155,11 +244,16 @@ export default {
             }
         },
         showItem(i) {
-            if (i >= 0 && i < this.slideshowItems.length) {
+            if (!this.slideshowItemEditing && i >= 0 && i < this.slideshowItems.length) {
                 this.index = i;
             }
         },
         showNextItem() {
+            // avoids slide-button to be clicked in edit-mode
+            if (this.slideshowItemEditing) {
+                return
+            }
+
             if (this.useSlot) {
                 if (this.currentSlotItem < Object.keys(this.$slots).length - 1) {
                     this.currentSlotItem++
@@ -183,6 +277,15 @@ export default {
 
     /* computed property to get current slide */
     computed: {
+        tooltipForSlidebuttons() {
+            if (this.slideshowItemEditing) {
+                return {
+                    title: "Not allowed while editing!"
+                }
+            }
+            return {}
+        },
+        /* computed property to get current slide */
         currentItem() {
             if (this.slideshowItems.length <= this.index) {
                 return null
@@ -196,7 +299,15 @@ export default {
                 this.index = 0
                 this.setupSlider()
             },
-            immediate: true
+            immediate: true,
+            deep: true
+        },
+        currentItem() {
+            // wait to nextTick to ensure ref is available
+            this.$nextTick(() => {
+                this.$refs.slideshowItemComponentWrapper?.addEditStateListener(editing => this.slideshowItemEditing = editing)
+            })
+
         }
     }
 }
@@ -247,7 +358,7 @@ export default {
             margin: 0;
         }
 
-        .image-wrapper {
+        .slot-wrapper {
             padding: calc(var(--default-padding) * 5);
             width: 100%;
             min-height: 50rem;
@@ -262,6 +373,12 @@ export default {
             }
         }
 
+        .image-wrapper {
+            width: 100%;
+            min-width: 11.1rem; // assure to be as wide as action-buttons in edit-mode
+            min-height: 50rem;
+        }
+
         > ol {
             display: -webkit-flex; /* Safari 6-8 */
             display: flex;
@@ -277,6 +394,7 @@ export default {
                 margin: 0;
                 border: var(--default-border-reduced-opacity);
                 border-radius: var(--full-circle);
+                background: var(--light-gray);
 
                 a {
                     display: block;
@@ -321,7 +439,7 @@ export default {
             }
         }
 
-        > span {
+        > .item-counter {
             position: absolute;
             top: .5rem;
             right: 5.5rem;
@@ -338,5 +456,14 @@ export default {
     }
 }
 
+.edit-mode .cmd-slideshow .image-wrapper.edit-items {
+    padding: 0;
+    margin-top: 2rem;
+
+    label.edit-mode input {
+        font-size: 3rem;
+    }
+}
+
 /* end cmd-slideshow ------------------------------------------------------------------------------------------ */
 </style>