comand-component-library 3.3.77 → 3.3.78

package/src/components/CmdImage.vue

@@ -1,74 +1,32 @@
 <template>
     <!-- begin edit-mode -->
-    <figure v-if="editModeContext?.editing" :class="['cmd-image flex-container vertical', getTextAlign]">
-        <CmdFormElement
-                element="input"
-                type="checkbox"
-                :toggleSwitch="true"
-                labelText="Show figcaption"
-                v-model="editableShowFigcaption"
-        />
-        <CmdFormElement
-                element="select"
-                labelText="Figcaption Position"
-                :selectOptions="positionOptions"
-                :disabled="!showFigcaption"
-                v-model="editableFigcaptionPosition"
-        />
-        <CmdFormElement
-                element="select"
-                labelText="Figcaption text alignment"
-                :selectOptions="textAlignOptions"
-                :disabled="!showFigcaption"
-                v-model="editableFigcaptionTextAlign"
-        />
-        <CmdFormElement element="input" type="text" :required="true" labelText="Alternative Text"
-                        v-model="editableAlternativeText"/>
-        <CmdFormElement element="input" type="text" :required="false" labelText="Tooltip" v-model="editableTooltip"/>
-
+    <figure v-if="editing" :class="['cmd-image flex-container vertical', getTextAlign]">
         <template v-if="figcaption?.position === 'top'">
-            <CmdFormElement element="input" type="text" :required="true" labelText="Text figcaption"
-                            v-model="editableFigcaptionText"/>
+            <CmdFormElement
+                element="input"
+                type="text"
+                :required="true"
+                labelText="Text figcaption"
+                v-model="editableFigcaptionText"
+            />
         </template>
         <div :class="['box drop-area flex-container vertical', { 'allow-drop': allowDrop }]" v-on="dragAndDropHandler" title="Drag new image to this area to replace old one!">
             <span class="icon-image"></span>
-            <img ref="contentImage" :src="image.src" :alt="image.alt" :title="image.tooltip"/>
+            <img :src="imageSource" :alt="image.alt" :title="image.tooltip"/>
         </div>
-        <button
-                type="button"
-                :class="['button upload primary', { disabled: uploadInitiated }]"
-                :disabled="uploadInitiated"
-                @click="selectFiles()"
-        >
-            <!-- begin CmdIcon -->
-            <CmdIcon iconClass="icon-loop"/>
-            <!-- end CmdIcon -->
-            <span>Select image</span>
-        </button>
+
         <template v-if="figcaption?.position !== 'top'">
             <CmdFormElement
-                    element="input"
-                    type="text"
-                    :class="getTextAlign"
-                    :required="true"
-                    labelText="Text figcaption"
-                    v-model="editableFigcaptionText"
+                element="input"
+                type="text"
+                :class="getTextAlign"
+                :required="true"
+                labelText="Text figcaption"
+                :showLabel="false"
+                v-model="editableFigcaptionText"
             />
         </template>
     </figure>
-
-    <!-- begin CmdFormElement -->
-    <CmdFormElement
-            v-if="editModeContext?.editing"
-            class="hidden"
-            element="input"
-            type="file"
-            labelText="Select file"
-            :disabled="uploadInitiated"
-            @change="fileSelected"
-            ref="formElement"
-    />
-    <!-- end CmdFormElement -->
     <!-- end edit-mode -->
 
     <figure v-else :class="['cmd-image', getTextAlign]">
@@ -79,21 +37,19 @@
 </template>
 
 <script>
-import {getFileExtension} from "../utils/getFileExtension"
+import {checkAndUploadFile} from "../utils/checkAndUploadFile"
+import EditMode from "../mixins/EditMode.vue"
+import {updateHandlerProvider} from "../utils/editmode.js"
 
 export default {
     name: "CmdImage",
-    inject: {
-        editModeContext: {
-            default: null
-        }
-    },
+    mixins: [EditMode],
     data() {
         return {
             mediumMaxWidth: 1023,
             smallMaxWidth: 600,
             currentWindowWidth: window.innerWidth,
-            allowedFileExtensions: ["jpg", "jpeg", "png"],
+            allowedFileExtensions: ["jpg", "jpeg", "png", "webp"],
             uploadInitiated: false,
             allowDrop: false,
             showFigcaption: true,
@@ -101,6 +57,7 @@ export default {
             figcaptionTextAlign: null,
             tooltip: null,
             alternativeText: null,
+            newImageSource: null,
             positionOptions: [
                 {
                     text: "Above image",
@@ -128,13 +85,7 @@ export default {
             figcaptionText: null
         }
     },
-    mounted() {
-        this.editModeContext?.addSaveHandler(this.onSave)
-    },
     props: {
-        editModeContextData: {
-            type: Object
-        },
         /**
          * image-object including source, alternative text, tooltip (not required)
          */
@@ -158,7 +109,7 @@ export default {
         },
         minImageWidth: {
             type: Number,
-            default: 1025
+            default: 600
         }
     },
     created() {
@@ -175,6 +126,11 @@ export default {
     },
     computed: {
         imageSource() {
+            // check if a new image is provided
+            if(this.newImageSource) {
+                return this.newImageSource
+            }
+
             // if only one src exists
             const imgSrc = this.image.src
 
@@ -194,6 +150,12 @@ export default {
             // else return large (will be used if images for small-and -medium-devices do not exist or if screen resolution is larger than mediumMaxWidth)
             return imgSrc.large
         },
+        getTextAlign() {
+            if (this.figcaption?.textAlign) {
+                return "text-" + this.figcaption.textAlign
+            }
+            return ''
+        },
         dragAndDropHandler() {
             // register handlers only if drag-and-drop is enabled
             return {
@@ -203,55 +165,9 @@ export default {
                 drop: this.drop
             }
         },
-        getTextAlign() {
-            if (this.figcaption?.textAlign) {
-                return "text-" + this.figcaption.textAlign
-            }
-            return ''
-        },
-        editableAlternativeText: {
-            get() {
-                return this.alternativeText == null ? this.image.alt : this.alternativeText
-            },
-            set(value) {
-                this.alternativeText = value
-            }
-        },
-        editableTooltip: {
-            get() {
-                return this.tooltip == null ? this.image.tooltip : this.tooltip
-            },
-            set(value) {
-                this.tooltip = value
-            }
-        },
-        editableShowFigcaption: {
-            get() {
-                return this.showFigcaption == null ? this.figcaption.show : this.showFigcaption
-            },
-            set(value) {
-                this.showFigcaption = value
-            }
-        },
-        editableFigcaptionPosition: {
-            get() {
-                return this.figcaptionPosition == null ? this.figcaption.position : this.figcaptionPosition
-            },
-            set(value) {
-                this.figcaptionPosition = value
-            }
-        },
-        editableFigcaptionTextAlign: {
-            get() {
-                return this.figcaptionTextAlign || this.figcaption.textAlign
-            },
-            set(value) {
-                this.figcaptionTextAlign = value
-            }
-        },
         editableFigcaptionText: {
             get() {
-                return this.figcaptionText || this.figcaption.text
+                return this.figcaptionText == null ? this.figcaption.text : this.figcaptionText
             },
             set(value) {
                 this.figcaptionText = value
@@ -273,15 +189,6 @@ export default {
                 }
             }
         },
-        fileSelected(event) {
-            if (event.target.files.length > 0) {
-                this.checkAndUploadFile(event.target.files[0])
-            }
-        },
-        selectFiles() {
-            let inputFile = this.$refs.formElement.getDomElement().querySelector("input[type='file']")
-            inputFile.click()
-        },
         dragEnter(event) {
             this.dragOver(event)
         },
@@ -306,80 +213,40 @@ export default {
             this.allowDrop = false
             if (event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length > 0) {
                 event.preventDefault()
-                this.checkAndUploadFile(event.dataTransfer.files[0])
+                checkAndUploadFile(event.dataTransfer.files[0], this.allowedFileExtensions, this.minImageWidth, this.maxFileUploadSize, (imageSource) => this.newImageSource = imageSource)
             }
         },
-        onSave() {
-            const data = {
-                image: {
-                    alt: this.editableAlternativeText,
-                    tooltip: this.editableTooltip
+        addHandlerProvider() {
+            const itemStructure = {
+                "image": {
+                    "id": createUuid(),
+                    "src": "media/images/demo-images/large/landscape-06.jpg",
+                    "srcImageLarge": "media/images/demo-images/large/landscape-06.jpg",
+                    "alt": "Alternative Text"
                 },
-                figcaption: {
-                    position: this.editableFigcaptionPosition,
-                    textAlign: this.editableFigcaptionTextAlign,
-                    text: this.editableFigcaptionText,
-                    show: this.editableShowFigcaption
+                "figcaption": {
+                    "show": true,
+                    "position": "bottom",
+                    "text": "Figcaption",
+                    "textAlign": "center"
                 }
             }
-            return {
-                editModeContextData: this.editModeContextData,
-                ...data,
+            return updateHandlerProvider(this, {
+                item() {
+                    return itemStructure
+                }
+            })
+        },
+        updateHandlerProvider() {
+            const figcaptionText = this.editableFigcaptionText
+            return updateHandlerProvider(this, {
                 update(props) {
-                    console.log("CmdImage.update", props)
-                    if (!props.image) {
-                        props.image = {}
-                    }
-                    props.image.alt = data.image.alt
-                    props.image.tooltip = data.image.tooltip
                     if (!props.figcaption) {
                         props.figcaption = {}
                     }
-                    props.figcaption.position = data.figcaption.position
-                    props.figcaption.textAlign = data.figcaption.textAlign
-                    props.figcaption.text = data.figcaption.text
-                    props.figcaption.show = data.figcaption.show
+                    props.figcaption.text = figcaptionText
                 }
-            }
-        },
-        checkAndUploadFile(file) {
-            const errorMessages = []
-
-            // check size for current file
-            if (file.size > this.maxFileUploadSize) {
-                errorMessages.push("file too large")
-            }
-
-            // check if current file has allowed file-type
-            if (!this.allowedFileExtensions.includes(getFileExtension(file.name))) {
-                errorMessages.push("disallowed file extension")
-            }
-
-            if (errorMessages.length) {
-                alert(errorMessages)
-                return
-            }
-
-            // check for min dimensions
-            const image = new Image()
-
-            image.onload = () => {
-                if (image.width < this.minImageWidth) {
-                    // errorMessages.push("width (" + image.width + " px) too small - at least " + this.minImageWidth + " px required!")
-                    const confirmUpload = confirm("width (" + image.width + " px) too small - at least " + this.minImageWidth + " px required! Use trotzdem!")
-                    if (!confirmUpload) {
-                        alert("Abbruch")
-                        return
-                    }
-                }
-                // revoke URL to clean memory
-                URL.revokeObjectURL(image.src)
-
-                // show preview-image by assigning image.src (containing image date (not its path) to do existing contentImage source
-                this.$refs.contentImage.src = image.src
-            }
-            // create data-url (contains content of a file (not its path))
-            image.src = URL.createObjectURL(file)
+            })
         }
     }
 }
@@ -388,6 +255,10 @@ export default {
 <style lang="scss">
 /* begin cmd-image ------------------------------------------------------------------------------------------ */
 .cmd-image {
+  img {
+      display: block;
+  }
+
   &.text-center {
     figcaption {
       text-align: center;
@@ -430,4 +301,4 @@ export default {
 }
 
 /* end cmd-image ------------------------------------------------------------------------------------------ */
-</style>
+</style>

package/src/mixins/EditMode.vue

@@ -0,0 +1,29 @@
+<script>
+import {findEditComponentWrapper} from "../utils/editmode.js"
+
+export default {
+    inject: {
+        editModeContext: {
+            default: null
+        }
+    },
+    data() {
+        return {
+            editing: false
+        }
+    },
+    created() {
+        const editComponentWrapper = findEditComponentWrapper(this.$parent)
+        if (editComponentWrapper) {
+            editComponentWrapper.addEditStateListener(editing => this.editing = editing)
+            editComponentWrapper.addUpdateHandlerProvider(this.updateHandlerProvider)
+            editComponentWrapper.setAddHandlerProvider(this.addHandlerProvider)
+        }
+    },
+    methods: {
+        updateHandlerProvider() {
+            return {}
+        }
+    }
+}
+</script>

package/src/utils/checkAndUploadFile.js

@@ -0,0 +1,48 @@
+import {getFileExtension} from "./getFileExtension.js"
+
+function checkAndUploadFile(file, allowedFileExtensions, minImageWidth, maxFileUploadSize, imagePreview) {
+    const errorMessages = []
+
+    // check size for current file
+    if (file.size > maxFileUploadSize) {
+        errorMessages.push("file too large")
+    }
+
+    // check if current file has allowed file-type
+    if (!allowedFileExtensions.includes(getFileExtension(file.name))) {
+        errorMessages.push("disallowed file extension")
+    }
+
+    if (errorMessages.length) {
+        alert(errorMessages)
+        return
+    }
+
+    // check for min dimensions
+    const image = new Image()
+
+    image.onload = () => {
+        if (image.width < minImageWidth) {
+            // errorMessages.push("width (" + image.width + " px) too small - at least " + this.minImageWidth + " px required!")
+            const confirmUpload = confirm("width (" + image.width + " px) too small - at least " + minImageWidth + " px required! Use trotzdem!")
+            if (!confirmUpload) {
+                alert("Cancel")
+                return
+            }
+        }
+        // revoke URL to clean memory
+        URL.revokeObjectURL(image.src)
+
+        // show preview-image by assigning image.src (containing image date (not its path) to do existing contentImage source
+        if(typeof imagePreview === "function") {
+            imagePreview(image.src)
+        } else {
+            imagePreview.src = image.src
+        }
+
+    }
+    // create data-url (contains content of a file (not its path))
+    image.src = URL.createObjectURL(file)
+}
+
+export { checkAndUploadFile }

package/src/utils/editmode.js

@@ -0,0 +1,42 @@
+function findEditComponentWrapper(component) {
+    if (component?.$options?.name === "EditComponentWrapper") {
+        return component
+    }
+    if (component?.$parent) {
+        return findEditComponentWrapper(component.$parent)
+    }
+    return null
+}
+
+function buildComponentPath(component, ...extraPathElements) {
+    const path = []
+    for (let parent = findEditComponentWrapper(component); parent; parent = findEditComponentWrapper(parent.$parent)) {
+        path.unshift(...parent.componentPath)
+    }
+    path.push(...extraPathElements)
+    return path
+}
+
+function componentPathAsString(componentPath) {
+    if (Array.isArray(componentPath) && componentPath.length > 0) {
+        return JSON.stringify(componentPath)
+    }
+    return ""
+}
+
+function updateHandlerProvider(component, options) {
+    if (component?.$options?.name) {
+        return {
+            name: component.$options.name,
+            ...options
+        }
+    }
+    return options
+}
+
+export {
+    findEditComponentWrapper,
+    buildComponentPath,
+    componentPathAsString,
+    updateHandlerProvider
+}