@myissue/vue-website-page-builder 3.1.53 → 3.2.13

package/src/PageBuilder/PageBuilder.vue

@@ -9,7 +9,15 @@ import SearchComponents from '../Components/Search/SearchComponents.vue'
 import OptionsDropdown from '../Components/PageBuilder/DropdownsPlusToggles/OptionsDropdown.vue'
 import RightSidebarEditor from '../Components/PageBuilder/EditorMenu/RightSidebarEditor.vue'
 import { sharedPageBuilderPinia, sharedPageBuilderStore } from '../stores/shared-store'
-
+import {
+  isChildrenEmpty,
+  onlyUserIsValid,
+  onlyUpdateOrCreateIsValid,
+  onlyPageBuilderLogoIsValid,
+  onlyResourceDataIsValid,
+  onlyUserSettingsIsValid,
+  updateOrCreateIsFalsy,
+} from '../helpers/passedPageBuilderConfig'
 /**
  * Props for PageBuilder component
  * @typedef {Object} Props
@@ -28,8 +36,9 @@ const props = defineProps({
   },
 })
 
-// Use shared Pinia instance for PageBuilder package (THIS IS THE KEY CHANGE!)
+// Use shared Pinia instance for PageBuilder package
 const internalPinia = sharedPageBuilderPinia
+
 const pageBuilderStateStore = sharedPageBuilderStore
 
 // Initialize PageBuilder with store
@@ -81,7 +90,7 @@ const firstButtonTextSearchComponents = ref('')
 const firstModalButtonSearchComponentsFunction = ref(null)
 
 const handleAddComponent = function () {
-  pageBuilderStateStore.setComponent(null)
+  pageBuilderClass.clearHtmlSelection()
 
   //
   titleModalAddComponent.value = 'Add Components to Page'
@@ -143,11 +152,6 @@ const handleSelectComponent = function (componentObject) {
 
 const draggableZone = ref(null)
 
-const defaultUpdateOrCreate = {
-  formType: 'create',
-  createNewResourceFormName: 'post',
-}
-
 const defaultConfigValues = {
   updateOrCreate: {
     formType: 'create',
@@ -161,30 +165,89 @@ const defaultConfigValues = {
   },
 }
 
-onMounted(async () => {
-  pageBuilderClass.updateLocalStorageItemName()
-  await pageBuilderClass.setEventListenersForElements()
-
+const handleConfig = function (config) {
+  // Set config for page builder if not set by user
   if (
-    getConfigPageBuilder.value &&
-    getConfigPageBuilder.value.updateOrCreate &&
-    getConfigPageBuilder.value.updateOrCreate.formType === 'create'
+    config === null ||
+    config === undefined ||
+    (config && Object.keys(config).length === 0 && config.constructor === Object)
   ) {
-    pageBuilderClass.loadExistingContent()
+    console.log('1')
+    pageBuilderClass.setConfigPageBuilder(defaultConfigValues)
+    return
   }
 
+  if (config && Object.keys(config).length !== 0 && config.constructor === Object) {
+    //
+    // Check alone
+    // Returns true if all config fields are missing or empty
+    if (isChildrenEmpty(config)) {
+      console.log('1:')
+      return
+    }
+
+    if (onlyUserIsValid(config)) {
+      console.log('2:')
+      return
+    }
+
+    if (onlyUpdateOrCreateIsValid(config)) {
+      console.log('3:')
+      return
+    }
+
+    if (onlyPageBuilderLogoIsValid(config)) {
+      console.log('4:')
+      return
+    }
+
+    if (onlyResourceDataIsValid(config)) {
+      console.log('5:')
+      return
+    }
+
+    if (onlyUserSettingsIsValid(config)) {
+      console.log('6:')
+      return
+    }
+
+    if (onlyUserSettingsIsValid(config)) {
+      console.log('7:')
+      return
+    }
+
+    if (updateOrCreateIsFalsy(config)) {
+      console.log('8:')
+      return
+    }
+
+    // Check against eachoter in all combinations
+  }
+
+  // In the end make check if form type for update or create is set:
+}
+
+watch(
+  () => getConfigPageBuilder.value,
+  (config) => {
+    pageBuilderClass.updateLocalStorageItemName()
+
+    if (config && config.updateOrCreate && config.updateOrCreate.formType === 'create') {
+      pageBuilderClass.loadExistingContent()
+    }
+  },
+  { immediate: true },
+)
+
+onMounted(async () => {
+  const config = getConfigPageBuilder.value
+  handleConfig(config)
+
+  pageBuilderClass.updateLocalStorageItemName()
+
   pageBuilderClass.removeHoveredAndSelected()
 
-  // Set config if it's an empty object
-  if (
-    getConfigPageBuilder.value === null ||
-    getConfigPageBuilder.value === undefined ||
-    (getConfigPageBuilder.value &&
-      Object.keys(getConfigPageBuilder.value).length === 0 &&
-      getConfigPageBuilder.value.constructor === Object)
-  ) {
-    pageBuilderClass.setConfigPageBuilder(defaultConfigValues)
-  }
+  await pageBuilderClass.setEventListenersForElements()
 })
 </script>
 
@@ -193,6 +256,39 @@ onMounted(async () => {
     id="builder-container"
     class="font-sans max-w-full m-8 border-2 border-myPrimaryLinkColor inset-x-0 z-10 bg-white overflow-x-scroll pt-2 rounded-lg p-2"
   >
+    <div
+      @click="pageBuilderClass.clearHtmlSelection()"
+      id="pagebuilder-top-area"
+      class="px-4 pb-4 mx-4 my-4 rounded-xl"
+    >
+      <div class="flex justify-start items-center py-2 pl-2 mr-2 mb-6 h-full">
+        <div class="flex gap-2">
+          <span class="w-2 h-2 rounded-full bg-red-400"></span>
+          <span class="w-2 h-2 rounded-full bg-yellow-400"></span>
+          <span class="w-2 h-2 rounded-full bg-green-400"></span>
+        </div>
+      </div>
+      <!-- Logo # start -->
+      <div
+        v-if="
+          getConfigPageBuilder &&
+          getConfigPageBuilder.pageBuilderLogo &&
+          getConfigPageBuilder.pageBuilderLogo.src
+        "
+        class="flex items-center divide-x divide-gray-200"
+      >
+        <div class="pr-4">
+          <img class="h-6" :src="getConfigPageBuilder.pageBuilderLogo.src" alt="Logo" />
+        </div>
+        <span class="myPrimaryParagraph font-medium pl-4">Editing Page </span>
+      </div>
+      <div v-else>
+        <div class="pr-6">
+          <span class="myPrimaryParagraph font-medium">Editing Page </span>
+        </div>
+      </div>
+    </div>
+    <!-- Logo # end -->
     <SearchComponents
       v-if="showModalAddComponent"
       :show="showModalAddComponent"
@@ -211,7 +307,8 @@ onMounted(async () => {
     <div>
       <div class="relative h-full flex">
         <div
-          @click.self="pageBuilderStateStore.setComponent(null)"
+          @click.self="pageBuilderClass.clearHtmlSelection()"
+          id="pagebuilder-left-area"
           class="min-w-[3.5rem] pt-6 pb-2 my-2 mx-2 bg-myPrimaryLightGrayColor rounded-full shadow"
         >
           <div class="mx-2 flex flex-col myPrimaryGap">
@@ -229,49 +326,45 @@ onMounted(async () => {
                 <span class="myMediumIcon material-symbols-outlined"> interests </span>
               </button>
             </div>
-            <div @click.self="pageBuilderStateStore.setComponent(null)">
+            <div @click.self="pageBuilderClass.clearHtmlSelection()">
               <ComponentTopMenu v-if="getElement"></ComponentTopMenu>
             </div>
           </div>
         </div>
         <main class="flex flex-col h-full grow rounded-2xl duration-300 shadow-2xl">
           <div
-            class="flex items-center justify-between primary-gap rounded-t-2xl py-2 bg-myPrimaryLightGrayColor"
+            id="pagebuilder-toolbar-area"
+            class="flex items-center justify-between rounded-t-2xl bg-myPrimaryLightGrayColor"
           >
-            <div class="flex myPrimaryGap items-center mr-8 overflow-x-scroll w-96 pt-4">
-              <div
-                @click.self="pageBuilderStateStore.setComponent(null)"
-                class="w-4/12 flex justify-start items-center py-2 pl-2 h-full"
-              >
-                <div class="flex gap-2">
-                  <span class="w-2 h-2 rounded-full bg-red-400"></span>
-                  <span class="w-2 h-2 rounded-full bg-yellow-400"></span>
-                  <span class="w-2 h-2 rounded-full bg-green-400"></span>
-                </div>
-              </div>
-
+            <div
+              @click="pageBuilderClass.clearHtmlSelection()"
+              class="flex myPrimaryGap items-center overflow-x-scroll pt-4 pb-2 pl-2 h-24 w-full"
+            >
               <button
                 class="myPrimaryButton"
                 @click="pageBuilderClass.saveComponentsLocalStorage"
                 type="button"
               >
                 <span class="material-symbols-outlined text-[18px]"> save </span>
-                Save layout
+                Save
               </button>
             </div>
 
             <div
-              @click.self="pageBuilderStateStore.setComponent(null)"
-              class="w-4/12 flex justify-center py-2"
+              @click.self="pageBuilderClass.clearHtmlSelection()"
+              class="flex justify-center items-center h-24 w-full"
             >
               <OptionsDropdown @previewCurrentDesign="previewCurrentDesign"></OptionsDropdown>
             </div>
 
             <div
-              @click.self="pageBuilderStateStore.setComponent(null)"
-              class="w-4/12 flex justify-end py-2 pr-2"
+              @click.self="pageBuilderClass.clearHtmlSelection()"
+              class="flex justify-end py-2 pr-2 h-24 w-full"
             >
-              <div class="flex items-center justify-center gap-4">
+              <div
+                @click.self="pageBuilderClass.clearHtmlSelection()"
+                class="flex items-center justify-center gap-4"
+              >
                 <button
                   type="button"
                   @click="
@@ -299,7 +392,7 @@ onMounted(async () => {
                       () => {
                         pageBuilderStateStore.setMenuRight(false)
                         pageBuilderStateStore.setElement(null)
-                        pageBuilderStateStore.setComponent(null)
+                        pageBuilderClass.clearHtmlSelection()
                         handlePageBuilderPreview()
                       }
                     "
@@ -314,23 +407,33 @@ onMounted(async () => {
                       </span>
                     </div>
                   </button>
+                </div>
+              </div>
+            </div>
 
-                  <button
-                    type="button"
-                    v-if="getMenuRight === false"
-                    @click="pageBuilderStateStore.setMenuRight(true)"
-                  >
-                    <div class="flex items-center justify-center gap-2">
-                      <span class="lg:block hidden"> Styling </span>
+            <div
+              @click.self="pageBuilderClass.clearHtmlSelection()"
+              class="flex justify-end py-2 pr-2 w-full h-24"
+            >
+              <div
+                @click.self="pageBuilderClass.clearHtmlSelection()"
+                class="flex items-center justify-center gap-4"
+              >
+                <button
+                  type="button"
+                  v-if="getMenuRight === false"
+                  @click="pageBuilderStateStore.setMenuRight(true)"
+                >
+                  <div class="flex items-center justify-center gap-2">
+                    <span class="lg:block hidden"> Styling </span>
 
-                      <span
-                        class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
-                      >
-                        <span class="myMediumIcon material-symbols-outlined"> apps </span>
-                      </span>
-                    </div>
-                  </button>
-                </div>
+                    <span
+                      class="h-10 w-10 cursor-pointer rounded-full flex items-center border-none justify-center bg-gray-50 aspect-square hover:bg-myPrimaryLinkColor hover:text-white focus-visible:ring-0"
+                    >
+                      <span class="myMediumIcon material-symbols-outlined"> more_vert </span>
+                    </span>
+                  </div>
+                </button>
               </div>
             </div>
           </div>
@@ -361,6 +464,7 @@ onMounted(async () => {
                     handleAddComponent()
                   }
                 "
+                id="pagebuilder-bottom-components-area"
                 class="hover:bg-gray-100 rounded-full border-2 border-myPrimaryLinkColor pt-10 pb-14 text-center focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 my-12 mx-8 cursor-pointer"
               >
                 <div class="flex items-center justify-center gap-2 font-medium cursor-pointer">
@@ -387,6 +491,7 @@ onMounted(async () => {
 
         <aside
           aria-label="Menu"
+          id="pagebuilder-right-area"
           :class="{ 'w-0': !getMenuRight, 'w-80 ml-4': getMenuRight }"
           class="h-full duration-300 z-20 flex-shrink-0 overflow-hidden shadow-2xl rounded-l-2xl bg-white"
         >

package/src/composables/PageBuilderClass.ts

@@ -127,6 +127,12 @@ class PageBuilderClass {
     this.delay = delay()
   }
 
+  // Load existing content from HTML when in update mode
+  clearHtmlSelection(): void {
+    this.pageBuilderStateStore.setComponent(null)
+    this.pageBuilderStateStore.setElement(null)
+    this.removeHoveredAndSelected()
+  }
   // Load existing content from HTML when in update mode
   setConfigPageBuilder(data: PageBuilderConfig): void {
     this.pageBuilderStateStore.setConfigPageBuilder(data)
@@ -146,7 +152,6 @@ class PageBuilderClass {
     const currentHTMLElement = this.getElement.value
     if (!currentHTMLElement) return
 
-    // currentCSS array example: ["none","py-0", "py-2", ...] or ['none', 'rounded-sm', 'rounded', 'rounded-md', ...]
     const currentCSS = CSSArray.find((CSS) => {
       return currentHTMLElement.classList.contains(CSS)
     })
@@ -330,36 +335,40 @@ class PageBuilderClass {
       this.pageBuilderStateStore.setComponents([])
     }
 
-    const hoveredElement = document.querySelector('[hovered]')
-    if (hoveredElement) {
-      hoveredElement.removeAttribute('hovered')
-    }
-
-    this.getComponents.value?.forEach((component) => {
-      const section = document.querySelector(`section[data-componentid="${component.id}"]`)
+    const pagebuilder = document.querySelector('#pagebuilder')
 
-      if (section) {
-        component.html_code = section.outerHTML
+    if (pagebuilder) {
+      const hoveredElement = pagebuilder.querySelector('[hovered]')
+      if (hoveredElement) {
+        hoveredElement.removeAttribute('hovered')
       }
-    })
 
-    // Initialize the MutationObserver
-    this.observer = new MutationObserver((mutationsList, observer) => {
-      // Once we have seen a mutation, stop observing and resolve the promise
-      observer.disconnect()
-    })
+      this.getComponents.value?.forEach((component) => {
+        const section = pagebuilder.querySelector(`section[data-componentid="${component.id}"]`)
 
-    // Start observing the document with the configured parameters
-    this.observer.observe(document, {
-      attributes: true,
-      childList: true,
-      subtree: true,
-    })
+        if (section) {
+          component.html_code = section.outerHTML
+        }
+      })
 
-    // Use the MutationObserver to wait for the next DOM change
-    await new Promise<void>((resolve) => {
-      resolve()
-    })
+      // Initialize the MutationObserver
+      this.observer = new MutationObserver((mutationsList, observer) => {
+        // Once we have seen a mutation, stop observing and resolve the promise
+        observer.disconnect()
+      })
+
+      // Start observing the pagebuilder with the configured parameters
+      this.observer.observe(pagebuilder, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+      })
+
+      // Use the MutationObserver to wait for the next DOM change
+      await new Promise<void>((resolve) => {
+        resolve()
+      })
+    }
   }
 
   cloneCompObjForDOMInsertion(componentObject: ComponentObject): ComponentObject {
@@ -1104,8 +1113,10 @@ class PageBuilderClass {
   }
 
   updateLocalStorageItemName(): void {
-    const updateOrCreate =
-      this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.formType || 'create'
+    // const updateOrCreate =
+    //   this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.formType || 'create'
+
+    const updateOrCreate = this.pageBuilderStateStore.getConfigPageBuilder?.updateOrCreate?.formType
 
     const resourceData = this.pageBuilderStateStore.getConfigPageBuilder?.resourceData
 
@@ -1137,7 +1148,9 @@ class PageBuilderClass {
         if (resourceData && resourceData != null && !resourceData.title) {
           // Check if id is missing, null, undefined, or an empty string (after trimming)
           if (!resourceData.id || typeof resourceData.id === 'string') {
-            this.pageBuilderStateStore.setLocalStorageItemName(`page-builder-update-resource`)
+            this.pageBuilderStateStore.setLocalStorageItemName(
+              `page-builder-update-resource-${this.sanitizeForLocalStorage(resourceFormName)}`,
+            )
             return
           }
         }

package/src/css/app.css

@@ -509,14 +509,37 @@ h3 {
 }
 
 #page-builder-editor-editable-area #youtube-video::before {
-  content: 'Select video element';
-  font-family: 'Jost', sans-serif;
-  display: inline-block;
+  content: 'Select Video Element';
+  font-family: 'Jost';
+  background: #16a34a !important;
+  color: white;
+  text-decoration: none;
   margin-right: 8px;
   vertical-align: middle;
+  min-height: 3rem;
+  padding: 0.75rem 0.75rem;
+  white-space: nowrap;
+  word-break: keep-all;
+  font-weight: 500;
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  border: 1px solid transparent;
+  margin-bottom: 20px;
+  font-size: 0.8rem !important;
+}
+
+@media (min-width: 640px) {
+  #page-builder-editor-editable-area #youtube-video::before {
+    font-size: 0.9rem !important;
+    width: auto;
+  }
 }
+
 #page-builder-editor-editable-area #youtube-video:hover::before {
-  text-decoration: underline;
+  text-decoration: none;
   cursor: pointer;
 }
 

package/src/helpers/isEmptyObject.ts

@@ -0,0 +1,5 @@
+export const isEmptyObject = function (obj: Object) {
+  return (
+    !obj || (typeof obj === 'object' && obj.constructor === Object && Object.keys(obj).length === 0)
+  )
+}