comand-component-library 4.3.25 → 4.3.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comand-component-library",
-  "version": "4.3.25",
+  "version": "4.3.26",
   "license": "GPL-3.0-only",
   "author": "CoManD-UI",
   "private": false,

package/src/components/CmdPageFooter.vue

@@ -66,18 +66,13 @@ export default {
          */
         cmdFancyBox: {
             type: Object,
-            default() {
-                return {
-                    showPrintButtons: false,
-                    defaultAriaLabelText: "print-preview"
-                }
-            }
+            required: false
         }
     },
     computed: {
         cmdLinkPrintViewProperties() {
             return {
-                show: true,
+                show: false,
                 linkType: "button",
                 highlightLevel: null,
                 icon: {
@@ -93,22 +88,18 @@ export default {
     methods: {
         showFancyBox() {
             let elements = []
-            if(typeof this.cmdFancyBox.elements === "function") {
+            if(typeof this.cmdFancyBox?.elements === "function") {
                 elements = this.cmdFancyBox.elements()
             } else {
                 elements = [document.querySelector(this.containerToPrint)]
             }
 
             openFancyBox({
-                elements: elements,
-                fancyBoxOptions: this.cmdFancyBox.fancyBoxOptions,
-                showPrintButtons: this.cmdFancyBox.showPrintButtons,
-                defaultAriaLabelText: this.cmdFancyBox.defaultAriaLabelText,
-                cmdHeadline: this.cmdFancyBox.cmdHeadline,
-                showOverlay: this.cmdFancyBox.showOverlay,
-                showSubmitButtons: this.cmdFancyBox.showSubmitButtons,
-                allowEscapeKey: this.cmdFancyBox.allowEscapeKey,
-                id: this.cmdFancyBox.id || "print-preview"
+                showPrintButtons: true,
+                id: "print-preview",
+                defaultAriaLabelText: "print-preview",
+                ...this.cmdFancyBox,
+                elements: elements
             })
         }
     }

package/src/components/CmdSiteWrapper.vue

@@ -37,7 +37,7 @@
             <CmdWidthLimitationWrapper :useFullDeviceWidth="useFullWidthForMainContent"
                 :contentOrientation="contentOrientation">
                 <!-- begin left column -->
-                <aside v-if="aside?.leftColumn?.show || $slots['left-column']" class="left-column">
+                <aside v-if="aside?.leftColumn?.show" class="left-column">
                     <!-- begin slot left column -->
                     <slot name="left-column"></slot>
                     <!-- end slot left column -->
@@ -59,7 +59,7 @@
                 <!-- end (center column for) page-content -->
 
                 <!-- begin right column -->
-                <aside v-if="aside?.rightColumn?.show || $slots['right-column']" class="right-column">
+                <aside v-if="aside?.rightColumn?.show" class="right-column">
                     <!-- begin slot right column -->
                     <slot name="right-column"></slot>
                     <!-- end slot right column -->
@@ -70,7 +70,34 @@
 
         <CmdSiteFooter v-if="cmdSiteFooterProperties.show" v-bind="cmdSiteFooterProperties">
             <!-- begin site-footer-slot-->
-            <slot name="site-footer"></slot>
+            <slot name="site-footer">
+                <!-- begin parent-component -->
+                <template v-if="editMode">
+                    <EditComponentWrapper v-for="(component, componentIndex) in cmdSiteFooter.components || []"
+                        :key="componentIndex" :allow-add-component="component.allowAddComponent"
+                        :componentName="component.name" :componentProps="component.props"
+                        :componentPath="componentPath(componentIndex)">
+                        <component :is="component.name" v-bind="component.props">
+                            <!-- begin child-component -->
+                            <component v-for="(childComponent, childComponentIndex) in component.components || []"
+                                :key="childComponentIndex" :is="childComponent.name" v-bind="childComponent.props"
+                                :editContent="childComponent.editContent" />
+                            <!-- end child-component -->
+                        </component>
+                    </EditComponentWrapper>
+                </template>
+                <template v-else>
+                    <component v-for="(component, index) in cmdSiteFooter.components || []" :key="index"
+                        :is="component.name" v-bind="component.props">
+                        <!-- begin child-component -->
+                        <component v-for="(childComponent, childComponentIndex) in component.components || []"
+                            :key="childComponentIndex" :is="childComponent.name" v-bind="childComponent.props"
+                            :editContent="childComponent.editContent" />
+                        <!-- end child-component -->
+                    </component>
+                </template>
+                <!-- end parent-component -->
+            </slot>
             <!-- end site-footer-slot-->
         </CmdSiteFooter>
 
@@ -106,6 +133,16 @@ export default {
         }
     },
     props: {
+        activeSections: {
+            type: Array
+        },
+        heroSectionActiveSections: {
+            type: Array
+        },
+        editMdoe: {
+            type: Boolean,
+            default: false
+        },
         /**
          * set aside (left-/right-column) in main-content-wrapper
          */
@@ -132,7 +169,7 @@ export default {
         */
         useFullWidthForMainContent: {
             type: Boolean,
-            default: true
+            default: false
         },
         /**
          * properties for CmdSiteHeader-component
@@ -215,11 +252,50 @@ export default {
                 return "horizontal"
             }
             return "vertical"
-        }
+        },
     },
     methods: {
         offcanvasToggled(event) {
             this.offCanvasOpen = event.open
+        },
+        setupIntersectionObserver() {
+            this.$nextTick(() => {
+                const sectionProvider = () => document.querySelectorAll(".main-content-wrapper .cmd-width-limitation-wrapper > section:not(:has(.cmd-page-header))")
+                if (this.$_intersectionObserver) {
+                    this.$_intersectionObserver.disconnect()
+                    this.$_intersectionObserver = null
+                }
+                const options = {
+                    root: document.getElementById("site-wrapper"),
+                    threshold: 0.1
+                }
+                this.$_intersectionObserver = new IntersectionObserver(entries => {
+                    entries.filter(entry => entry.isIntersecting).forEach(entry => {
+                        entry.target.classList.add("visible")
+                    })
+                }, options)
+                setTimeout(() => sectionProvider().forEach(element => this.$_intersectionObserver.observe(element)), 500)
+            })
+        },
+        openFancybox(event) {
+            openFancyBox({ url: event.target.href })
+        },
+        closeCookieDisclaimer() {
+            this.fancyBoxCookieDisclaimer = false
+            localStorage.setItem("onepagerPrivacySettingsAccepted", "true")
+        },
+        componentPath(componentIndex) {
+            return [
+                "siteFooter",
+                "components",
+                componentIndex
+            ]
+        },
+        childComponentPath(componentIndex) {
+            return [
+                "components",
+                componentIndex
+            ]
         }
     },
     mounted() {
@@ -232,6 +308,17 @@ export default {
             })
             resizeObserver.observe(siteHeader[0])
         }
+    },
+    updated() {
+        this.setupIntersectionObserver()
+    },
+    watch: {
+        activeSections: {
+            handler() {
+                this.setupIntersectionObserver()
+            },
+            immediate: true
+        }
     }
 }
 </script>
@@ -288,6 +375,7 @@ export default {
 }
 </style>
 <style lang="scss">
+/*
 @import '../assets/styles/variables';
 
 @media only screen and (width <=$medium-max-width) {
@@ -335,5 +423,5 @@ export default {
             }
         }
     }
-}
+}*/
 </style>