pagebuilder section video

src/components/MagicoPagebuilderPlugin.js

@@ -1,36 +1,40 @@
-import MagicoPagebuilder from "./MagicoPagebuilder.vue";
+import MagicoPagebuilder from './MagicoPagebuilder.vue'
 
 export default {
   install: (app) => {
-    app.component("MagicoPagebuilder", MagicoPagebuilder);
+    app.component('MagicoPagebuilder', MagicoPagebuilder)
 
-    console.log(app);
+    console.log(app)
     app.config.globalProperties.$pagebuilder = {
       items: {
         core_section_text: {
-          label: "Pole nagłowek",
+          label: 'Pole nagłowek',
-          svg_off: "",
+          svg_off: ''
         },
         core_section_textarea: {
-          label: "Pole tekstowe",
+          label: 'Pole tekstowe',
-          svg_off: "",
+          svg_off: ''
         },
         core_section_html: {
-          label: "Pole HTML",
+          label: 'Pole HTML',
-          svg_off: "",
+          svg_off: ''
         },
         core_section_image: {
-          label: "Obrazek",
+          label: 'Obrazek',
-          svg_off: "",
+          svg_off: ''
         },
+        core_section_video: {
+          label: 'Wideo',
+          svg_off: ''
+        }
       },
       axios: null,
       registerPlugin(name, item, component) {
-        this.items[name] = item;
+        this.items[name] = item
-        if(component){
+        if (component) {
-          app.component(name, component);
+          app.component(name, component)
         }
-      },
+      }
-    };
+    }
-  },
+  }
-};
+}

src/components/PagebuilderContent.vue

@@ -94,6 +94,8 @@ import draggable from 'vuedraggable'
 import MagicoModal from './MagicoModal.vue'
 import SectionText from './plugin/SectionText.vue'
 import SectionTextarea from './plugin/SectionTextarea.vue'
+import SectionVideo from './plugin/SectionVideo.vue'
+
 import SectionHtml from './plugin/SectionHtml.vue'
 import SectionImage from './plugin/SectionImage.vue'
 
@@ -120,7 +122,7 @@ export default {
     core_section_text: SectionText,
     core_section_html: SectionHtml,
     core_section_image: SectionImage,
-
+    core_section_video: SectionVideo,
     DropdownSectionSection
   },
   methods: {

src/components/plugin/SectionVideo.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="row m-0 p-0 align-items-center">
+    <div class="col-sm-12 col-md-6 p-0">
+      <span class="material-icons-outlined box-move me-2 my-1" style="cursor: move">open_with</span>
+      <span class="font-weight-bold text-primary">{{
+        t('pagebuilder.core_section_video')
+      }}</span>
+    </div>
+
+    <div class="col-sm-12 col-md-6 p-0 text-end">
+      <a href="#" @click.prevent="toggleModal" title="Edytuj" class="text-primary me-2 my-1">
+        <i class="material-icons-outlined">create</i>
+      </a>
+      <MagicoModal
+        v-model="modalBox"
+        v-on:close="onCloseModal"
+        size="xl"
+        :title="t('pagebuilder.core_section_video')"
+      >
+        <div>
+          <button
+            @click.prevent="changeView('youtube')"
+            :class="type == 'youtube' ? 'btn-secondary' : 'btn-outline-secondary'"
+            class="btn me-1 my-1"
+          >
+            Youtube
+          </button>
+          <button
+            @click.prevent="changeView('vimeo')"
+            :class="type == 'vimeo' ? 'btn-secondary' : 'btn-outline-secondary'"
+            class="btn me-1 my-1"
+          >
+            Vimeo
+          </button>
+          <button
+            @click.prevent="changeView('file')"
+            :class="type == 'file' ? 'btn-secondary' : 'btn-outline-secondary'"
+            class="btn me-1 my-1"
+          >
+            {{ t('pagebuilder.core_section_video_file') }}
+          </button>
+          <div v-if="type === 'youtube'">
+            <div class="form-group">
+              <label class="w-100 col-form-label">{{
+                t('pagebuilder.core_section_video_ytlink')
+              }}</label>
+              <input
+                @change="generateYouTubeEmbedCode"
+                type="text"
+                class="form-control"
+                v-model="link"
+              />
+            </div>
+            <div class="form-group">
+              <label class="w-100 col-form-label">{{
+                t('pagebuilder.core_section_video_ytcode')
+              }}</label>
+              <textarea class="form-control" v-model="text"></textarea>
+            </div>
+          </div>
+          <div v-if="type === 'vimeo'">
+            <div class="form-group">
+              <label class="w-100 col-form-label">{{
+                t('pagebuilder.core_section_video_vimeocode')
+              }}</label>
+              <textarea class="form-control" v-model="text"></textarea>
+            </div>
+          </div>
+          <div v-if="type === 'file'">
+            <!-- <div>
+              <button
+                class="btn btn-outline-secondary me-1 my-1"
+                v-for="item in items"
+                :key="item"
+                @click.prevent="setText(item)"
+                @dblclick="deleteItem(item)"
+              >
+                {{ item }}
+              </button>
+
+            </div> -->
+            <div>
+              <div class="form-group">
+                <label class="w-100 col-form-label">{{
+                  t('pagebuilder.core_section_video_title')
+                }}</label>
+                <input class="form-control" type="text" v-model="text" />
+                
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="text-end mt-4">
+          <button class="btn btn-outline-secondary me-1 my-1" @click.prevent="onCloseModal">
+            {{ t('pagebuilder.save') }}
+          </button>
+        </div>
+      </MagicoModal>
+      <a href="#" title="Usuń" @click.prevent="removeItem" class="text-danger">
+        <i class="material-icons-outlined">delete</i>
+      </a>
+    </div>
+    <div>
+      <strong class="font-weight-bold">{{ t('pagebuilder.core_section_video_title') }}:</strong>
+      {{ text || ' ' }}<br />
+      <strong class="font-weight-bold">{{ t('pagebuilder.core_section_video_type') }}:</strong>
+      {{ type }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, watch } from 'vue'
+import axios from 'axios'
+import MagicoModal from '../MagicoModal.vue'
+import { useI18n } from 'vue-i18n'
+export default {
+  name: 'CoreSectionVideo',
+  components: {
+    MagicoModal
+  },
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, { emit }) {
+    const { t } = useI18n()
+
+    const modalBox = ref(false)
+    const items = ref([])
+    const type = ref('file')
+    const text = ref('')
+    const link = ref('')
+    const name = ref('')
+
+    watch(
+      () => props.modelValue,
+      (newValue) => {
+        name.value = newValue?.name || ''
+        text.value = newValue?.text || ''
+        type.value = newValue?.type || 'file'
+        if (newValue?.open) modalBox.value = true
+      },
+      { immediate: true }
+    )
+
+    const toggleModal = () => {
+      modalBox.value = !modalBox.value
+      getItems()
+    }
+
+    const onCloseModal = () => {
+      modalBox.value = false
+      emit('update:modelValue', { name: name.value, text: text.value, type: type.value })
+    }
+
+    const changeView = (viewType) => {
+      type.value = viewType
+    }
+
+    const setText = (item) => {
+      type.value = 'file'
+    }
+
+    const deleteItem = (item) => {
+ 
+    }
+
+    const generateYouTubeEmbedCode = () => {
+      const urlParams = new URLSearchParams(new URL(link.value).search)
+      const videoId = urlParams.get('v')
+      text.value = videoId
+        ? `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`
+        : t('Nieprawidłowy link do YouTube.')
+    }
+
+    const getItems = () => {
+     
+    }
+
+    const finishUpload = (e) => {
+     
+    }
+
+    const removeItem = () => {
+      emit('itemRemoved', props.value)
+    }
+
+    return {
+      t,
+      modalBox,
+      items,
+      type,
+      text,
+      link,
+      name,
+      toggleModal,
+      onCloseModal,
+      changeView,
+      setText,
+      deleteItem,
+      generateYouTubeEmbedCode,
+      getItems,
+      finishUpload,
+      removeItem
+    }
+  }
+}
+</script>

src/locale/en.js

@@ -15,5 +15,12 @@ export default {
   section_type: 'Section type',
   container: 'Container',
   full_width: '100% width',
-  section_settings: 'Section settings'
+  section_settings: 'Section settings',
+  core_section_video: 'Video',
+  core_section_video_title: 'Video URL',
+  core_section_video_file: 'File',
+  core_section_video_ytlink: 'Youtube address of the video',
+  core_section_video_ytcode: 'Youtube IFRAME Code',
+  core_section_video_vimeocode: 'Vimeo IFRAME code',
+  core_section_video_type: 'Video type'
 }

src/locale/pl.js

@@ -15,5 +15,12 @@ export default {
   section_type: 'Typ sekcji',
   container: 'Kontener',
   full_width: '100% szerokości',
-  section_settings: 'Ustawienia sekcji'
+  section_settings: 'Ustawienia sekcji',
+  core_section_video: 'Wideo',
+  core_section_video_title: 'Adres URL filmu',
+  core_section_video_file: 'Plik',
+  core_section_video_ytlink: 'Adres Youtube filmu',
+  core_section_video_ytcode: 'Kod IFRAME Youtube',
+  core_section_video_vimeocode: 'Kod IFRAME Vimeo',
+  core_section_video_type: 'Typ filmu'
 }