comand-component-library 3.3.84 → 3.3.86

package/src/components/CmdSocialNetworks.vue

@@ -1,7 +1,10 @@
 <template>
-    <div :class="['cmd-social-networks', {'stretch': stretchButtons, 'align-right': align === 'right'}]">
+    <div :class="['cmd-social-networks', {'stretch': stretchButtons}, alignment]">
         <!-- begin CmdHeadline -->
-        <CmdHeadline v-if="cmdHeadline" v-bind="cmdHeadline"/>
+        <CmdHeadline
+            v-if="cmdHeadline?.headlineText || editModeContext?.editing"
+            v-bind="cmdHeadline || {}"
+        />
         <!-- end CmdHeadline -->
 
         <!-- begin CmdFormElement -->
@@ -17,34 +20,49 @@
         <!-- end CmdFormElement -->
 
         <!-- begin list of networks -->
-        <ul :class="['button-wrapper no-flex', {'no-gap': !useGap}]">
-            <li v-for="network in validNetworks">
-                <a
-                    :key="network.path"
-                    :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}, {'text-align-left': textAlign === 'left'}]"
-                    :id="network.id"
-                    :href="getUrl(network)"
-                    @click="preventOnDisabled"
-                    target="_blank"
-                    :title="tooltip(network.tooltip)">
-                    <!-- begin CmdIcon -->
-                    <CmdIcon
-                        v-if="network.iconClass"
-                        :iconClass="network.iconClass"
-                        :type="network.iconType"
+        <ul v-if="validNetworks.length > 0" :class="['button-wrapper', {'no-gap': !useGap}]">
+            <CmdSocialNetworksItem
+                v-if="!editModeContext"
+                v-for="(entry, index) in validNetworks"
+                :key="index"
+                :network="entry"
                     />
-                    <!-- end CmdIcon -->
-                    <span v-if="network.linkText">{{ network.linkText }}</span>
-                </a>
-            </li>
+
+            <!-- begin edit-mode -->
+            <EditComponentWrapper
+                v-else
+                v-for="(entry, index) in validNetworks"
+                :key="'x' + index"
+                class="edit-items"
+                componentName="CmdSocialNetworksItem"
+                :componentProps="entry"
+                :componentPath="['props', 'networks', index]"
+                :showComponentName="false"
+            >
+                <CmdSocialNetworksItem
+                    :network="entry"
+                    :userMustAcceptDataPrivacy="userMustAcceptDataPrivacy"
+                    :buttonTextAlign="buttonTextAlign"
+                    :dataPrivacyAccepted="dataPrivacyAccepted"
+                />
+            </EditComponentWrapper>
+            <!-- end edit-mode -->
         </ul>
+
+        <button v-else class="button small" title="Add new item" @click="onAddItem">
+            <span class="icon-plus"></span>
+        </button>
         <!-- end list of networks -->
     </div>
 </template>
 
 <script>
+import {buildComponentPath} from "../utils/editmode.js"
+import EditMode from "../mixins/EditMode.vue"
+
 export default {
     name: "CmdSocialNetworks",
+    mixins: [EditMode],
     data() {
         return {
             dataPrivacyAccepted: false
@@ -61,11 +79,11 @@ export default {
         /**
          * set horizontal alignment
          *
-         * @allowedValues: left, right
+         * @allowedValues: left, center, right
          */
         align: {
             type: String,
-            required: false
+            default: "left"
         },
         /**
          * activate if gap between buttons should appear
@@ -121,11 +139,13 @@ export default {
             default: "You must accept data privacy conditions!"
         },
         /**
-         * text-alignment for buttons
+         * alignment for buttons
+         *
+         * @allowedValues: "left", "right"
          */
-        textAlign: {
+        buttonTextAlign: {
             type: String,
-            default: "right"
+            default: "left"
         },
         /**
          * properties for cmdFormElement
@@ -153,6 +173,9 @@ export default {
     computed: {
         validNetworks() {
             return this.networks.filter(item => item.path)
+        },
+        alignment() {
+            return "align-" + this.align
         }
     },
     methods: {
@@ -174,6 +197,20 @@ export default {
             }
             return "#"
         },
+        onAddItem() {
+            this.editModeContext.content.addContent(
+                buildComponentPath(this, 'props', 'networks', -1),
+                this.itemProvider)
+        },
+        itemProvider() {
+            return                 {
+                "id": "social-network-facebook",
+                "path": "https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdevelopment.comand-cms.com%2Fmodule%2Fteam.html",
+                "tooltip": "Share this page on facebook",
+                "iconClass": "icon-facebook",
+                "linkText": "Share"
+            }
+        },
         preventOnDisabled(event) {
             let clickedElement = event.target
 
@@ -195,6 +232,21 @@ export default {
                 return this.tooltipAcceptDataPrivacy
             }
             return tooltip
+        },
+        onPersist(data) {
+            return {
+                editModeContextData: {
+                    ...(this.editModeContextData || {})
+                },
+                update(props) {
+                    props.cmdHeadline = {
+                        ...(props.cmdHeadline || {}),
+                    }
+                    if (Array.isArray(data) && data.length > 0) {
+                        props.cmdHeadline.headlineText = data[0].headlineText
+                    }
+                }
+            }
         }
     }
 }
@@ -216,6 +268,7 @@ export default {
 
     .button-wrapper {
         flex-direction: row;
+        flex: none;
         margin: 0;
         gap: calc(var(--default-gap) / 2);
 
@@ -232,7 +285,7 @@ export default {
                 margin: 0;
             }
 
-            &.text-align-left {
+          &.text-align-right {
                 flex-direction: row-reverse;
             }
         }
@@ -271,9 +324,43 @@ export default {
         }
     }
 
+    &.align-center {
+        .cmd-headline > * {
+            text-align: center;
+        }
+
+        .toggle-switch {
+            margin: auto;
+        }
+
+        .share-button-wrapper {
+            justify-content: center;
+        }
+    }
+
+    &.align-right {
+        .cmd-headline > * {
+            text-align: right;
+        }
+
+        .toggle-switch {
+            margin-left: auto;
+        }
+
+        .button-wrapper {
+            justify-content: flex-end;
+        }
+    }
+
     &.stretch {
+        .button-wrapper {
+            li {
+                flex: 1;
+
         .button {
-            flex: 1;
+                display: flex;
+            }
+            }
         }
     }
 

package/src/components/CmdSocialNetworksItem.vue

@@ -0,0 +1,184 @@
+<template>
+    <li class="cmd-social-networks-item">
+        <a
+            :key="network.path"
+            :class="['button', {disabled: userMustAcceptDataPrivacy && !dataPrivacyAccepted}, {'text-align-right': buttonTextAlign === 'right'}]"
+            :id="network.id"
+            :href="getUrl(network)"
+            @click="preventOnDisabled"
+            target="_blank"
+            :title="tooltip(network.tooltip)">
+
+            <!-- begin CmdIcon -->
+            <CmdIcon
+                v-if="network.iconClass"
+                :iconClass="network.iconClass"
+                :type="network.iconType"
+            />
+            <!-- end CmdIcon -->
+
+            <span v-if="network.linkText">{{ network.linkText }}</span>
+        </a>
+    </li>
+</template>
+
+<script>
+import {createUuid} from "../utils/common.js"
+import {updateHandlerProvider} from "../utils/editmode.js"
+import EditMode from "../mixins/EditMode.vue"
+
+export default {
+    name: "CmdSocialNetworksItem",
+    data() {
+        return {
+            editablePath: null,
+            editableTooltip: null,
+            editableLinktext: null
+        }
+    },
+    mixins: [EditMode],
+    props: {
+        network: {
+            type: Object,
+            required: true
+        },
+        /**
+         * toggle if user has to accept that anonymous data will be send while sharing
+         */
+        userMustAcceptDataPrivacy: {
+            type: Boolean,
+            default: true
+        },
+        /**
+         * alignment for buttons
+         *
+         * @allowedValues: "left", "right"
+         */
+        buttonTextAlign: {
+            type: String,
+            default: "left"
+        },
+        /**
+         * information if the user has accepted the data privacy (by checking the checkbox)
+         */
+        dataPrivacyAccepted: {
+            type: Boolean
+        },
+        /**
+         * tooltip shown on hovering disabled buttons
+         *
+         * userMustAcceptDataPrivacy-property must be activated
+         */
+        tooltipAcceptDataPrivacy: {
+            type: String,
+            default: "You must accept data privacy conditions!"
+        }
+    },
+    methods: {
+        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 network.path + encodeURIComponent(this.page)
+                    }
+
+                    // if current page should be appended to url
+                    return network.path + encodeURIComponent(location.href)
+                }
+
+                // if path is given completely by json-data
+                return network.path
+            }
+            return "#"
+        },
+        preventOnDisabled(event) {
+            let clickedElement = event.target
+
+            if (clickedElement.tagName !== "A") {
+                // get surrounding <a> if inner <span> is clicked
+                clickedElement = clickedElement.closest("a")
+            }
+
+            // href must be set due to html-validity, so click must be prevented if href contains "#" only (equals button is styled as disabled)
+            if (clickedElement.getAttribute("href") === "#") {
+                event.preventDefault()
+            }
+        },
+        tooltip(tooltip) {
+            if (this.userMustAcceptDataPrivacy) {
+                if (this.dataPrivacyAccepted) {
+                    return tooltip
+                }
+                return this.tooltipAcceptDataPrivacy
+            }
+            return tooltip
+        },
+        addHandlerProvider() {
+            const itemStructure = {
+                "id": "social-network-facebook",
+                "path": "https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdevelopment.comand-cms.com%2Fmodule%2Fteam.html",
+                "tooltip": "Share this page on facebook",
+                "iconClass": "icon-facebook",
+                "linkText": "Share"
+            }
+            return updateHandlerProvider(this, {
+                item() {
+                    return itemStructure
+                }
+            })
+        },
+        updateHandlerProvider() {
+            const id = createUuid()
+            const path = this.editablePath
+            const tooltip = this.editableTooltip
+            const linkText = this.editableLinktext
+            return updateHandlerProvider(this, {
+                update(props) {
+                    props.id = id
+                    props.path = path
+                    props.tooltip = tooltip
+                    props.linkText = linkText
+                }
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+
+[id^="social-network"] {
+    background: var(--social-network-color);
+    border-color: var(--social-network-color);
+
+    > span {
+        color: var(--pure-white);
+    }
+
+    &:hover, &:active, &:focus {
+        color: var(--pure-white);
+
+        > span {
+            color: var(--social-network-color);
+        }
+    }
+}
+
+#social-network-facebook {
+    --social-network-color: #3c5a99;
+}
+
+#social-network-twitter {
+    --social-network-color: #6bacde;
+}
+
+#social-network-xing {
+    --social-network-color: #007575;
+}
+
+#social-network-linkedin {
+    --social-network-color: #0077b5;
+}
+</style>

package/src/components/CmdTable.vue

@@ -255,7 +255,6 @@ export default {
         overflow-x: auto;
         width: 100%;
         padding: 0 4rem;
-        border: 1px solid red;
 
         .cmd-slide-button {
             left: 0;

package/src/components/CmdTextImageBlock.vue

@@ -0,0 +1,158 @@
+<template>
+    <div class="cmd-text-image-block flex-container vertical">
+        <!-- begin cmdHeadline -->
+        <CmdHeadline
+            v-if="(cmdHeadline?.headlineText || editModeContext) && headlinePosition === 'aboveImage'"
+            v-bind="cmdHeadline"
+        />
+        <!-- end cmdHeadline -->
+
+        <!-- begin cmdImage -->
+        <CmdImage
+            v-if="cmdImage"
+            :image="cmdImage?.image"
+            :figcaption="cmdImage?.figcaption"
+            :editModeConfig="{allowAddItem: false}"
+        />
+        <!-- end cmdImage -->
+
+        <!-- begin cmdHeadline -->
+        <CmdHeadline
+            v-if="(cmdHeadline?.headlineText || editModeContext) && headlinePosition === 'belowImage'"
+            v-bind="cmdHeadline"
+        />
+        <!-- end cmdHeadline -->
+
+        <!-- begin continuous text -->
+        <!-- begin edit-mode -->
+        <EditComponentWrapper
+            v-if="editModeContext"
+            ref="editComponentWrapper"
+            class="edit-items"
+            :showComponentName="false"
+            :allowedComponentTypes="[]"
+            :componentProps="{htmlContent, textAlign}"
+            :componentPath="paragraphComponentPath"
+            :allowDeleteComponent="!!htmlContent"
+        >
+            <template v-slot="slotProps">
+                <textarea v-if="slotProps.editing" :class="['edit-mode', textAlign]" v-model="editableHtmlContent" placeholder="Paragraph"></textarea>
+                <div v-else-if="htmlContent" v-html="htmlContent" :class="textAlign"></div>
+                <!-- begin show placeholder if no image exists (and component is not edited) -->
+                <button v-else type="button" class="button confirm" @click="onAddItem">
+                    <span class="icon-plus"></span>
+                    <span>Add new paragraph</span>
+                </button>
+                <!-- end show placeholder if no image exists (and component is not edited) -->
+            </template>
+        </EditComponentWrapper>
+        <!-- end edit-mode -->
+
+        <div v-else-if="htmlContent" v-html="htmlContent" :class="textAlign"></div>
+        <!-- end continuous text -->
+    </div>
+</template>
+
+<script>
+import EditMode from "../mixins/EditMode.vue"
+import {updateHandlerProvider} from "../utils/editmode.js"
+
+export default {
+    name: "CmdTextImageBlock",
+    mixins: [EditMode],
+    data() {
+        return {
+            editableHtmlContent: null
+        }
+    },
+    props: {
+        editModeContextData: {
+            type: Object
+        },
+        /**
+         * content for continuous text (can contain html-tags)
+         */
+        htmlContent: {
+            type: String,
+            required: true
+        },
+        /**
+         * text-alignment for paragraph/continuous text
+         */
+        paragraphTextAlign: {
+            type: String,
+            required: false
+        },
+        /**
+         * position for headline
+         *
+         * @allowedValues: "aboveImage", "belowImage"
+         */
+        headlinePosition: {
+            type: String,
+            default: "aboveImage"
+        },
+        /**
+         * properties for CmdHeadline-component
+         */
+        cmdHeadline: {
+            type: Object,
+            required: false
+        },
+        /**
+         * property for CmdImage-component
+         */
+        cmdImage: {
+            type: Object,
+            required: false
+        }
+    },
+    computed: {
+        paragraphComponentPath() {
+            /*  because paragraph is no component on its own, besides the componentPath (for the property),
+             an additional flag (here $isComponent-key) is used to let the store identify this edge case.
+             the '$'-prefix is set to ensure that the flag is not a generic name, that potentially is used as a property-name in any component */
+            return  [{componentPath: ["props", "htmlContent"], $isComponent: false}]
+        },
+        textAlign() {
+            if (this.paragraphTextAlign) {
+                return "text-align-" + this.paragraphTextAlign
+            }
+            return ""
+        }
+    },
+    methods: {
+        onAddItem() {
+            // execute editComponent-function from editComponentWrapper to enter editMode directly on "add"
+            this.$refs.editComponentWrapper.editComponent()
+        },
+        addHandlerProvider() {
+            return ""
+        },
+        updateHandlerProvider() {
+            const htmlContent = this.editableHtmlContent
+            this.editableHtmlContent = null // reset data-property
+
+            return updateHandlerProvider(this, {
+                update(props) {
+                    props.htmlContent = htmlContent
+                }
+            })
+        }
+    },
+    watch: {
+        htmlContent: {
+            handler() {
+                this.editableHtmlContent = this.htmlContent
+            },
+            immediate: true
+        }
+    }
+}
+</script>
+
+<style lang="scss">
+.edit-mode .cmd-text-image-block textarea {
+    width: 100%;
+}
+</style>