From ab402a32f1634dbcef05136c4a9c819dc61889a2 Mon Sep 17 00:00:00 2001
From: szymon <szymon@magico.pl>
Date: Mon, 17 Jun 2024 09:03:08 +0200
Subject: [PATCH] section image lightbox

---
 src/components/plugin/SectionImage.vue | 404 +++++++++++++------------
 1 file changed, 216 insertions(+), 188 deletions(-)

diff --git a/src/components/plugin/SectionImage.vue b/src/components/plugin/SectionImage.vue
index f444598..f6063e1 100644
--- a/src/components/plugin/SectionImage.vue
+++ b/src/components/plugin/SectionImage.vue
@@ -1,200 +1,228 @@
-
 <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" style="cursor:move;">open_with</span><span
-                class="font-weight-bold text-primary">{{ langs.label }}</span>
-        </div>
-
-        <div class="col-sm-12 col-md-6 p-0 text-end">
-            <a href="#" @click.prevent="modalOpen" title="Edytuj" class="text-primary me-2"><i
-                    class="material-icons-outlined">create</i></a>
-            <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"><i
-                    class="material-icons-outlined">delete</i></a>
-        </div>
-        <b-modal v-model="modalBox" v-on:close="onCloseModal" :title="langs.label">
-            <div>
-                <div class="p-0 m-0">
-                    <div class="form-group ">
-                        <label class="w-100 col-form-label">{{ langs.label }}</label>
-                        <div class="input-group mb-3">
-                            <input class="form-control" type="text" v-model="text" />
-                            <button @click="chooseImage" class="btn btn-outline-secondary" type="button" id="button-addon2">Wybierz</button>
-                        </div>
-                    </div>
-
-                    <div class="form-group ">
-                        <label class="w-100 col-form-label">{{ langs.title }}</label>
-                        <input class="form-control" type="text" v-model="title" />
-                    </div>
-                    <div class="form-group ">
-                        <label class="w-100 col-form-label">{{ langs.alt }}</label>
-                        <input class="form-control" type="text" v-model="alt" />
-                    </div>
-                    <div class="form-group ">
-                        <label class="w-100 col-form-label">Legenda obrazka</label>
-                        <input class="form-control" type="text" v-model="figcaption" />
-                    </div>
-                    <div class="form-group ">
-                        <label class="w-100 col-form-label">{{ langs.scaling }}</label>
-                        <select v-model="scale" class="form-select">
-                            <option v-for="item, ii  in scales" :key="ii" :value="item.key">{{ item.modelValue }}
-                            </option>
-                        </select>
-                    </div>
-                    <div class="form-group">
-                        <label class="w-100 col-form-label">{{ langs.href }}</label>
-                        <input class="form-control" type="text" v-model="href" />
-                    </div>
-
-                    <fieldset class="mt-3" v-show="scale == 'tak'">
-                        <legend>{{ langs.proportions }}</legend>
-                        Brak możliwości skalowania obrazków z zewnętrznego serwera.
-                        <div class="form-group"><label class="w-100 col-form-label">{{ langs.width
-                        }}</label><input class="form-control" v-model="width"></div>
-                        <div class="form-group"><label class="w-100 col-form-label">{{ langs.height
-                        }}</label><input class="form-control" v-model="height"></div>
-                        <div class="form-group"><label class="w-100 col-form-label">{{ langs.ratio
-                        }}</label><select class="form-select" v-model="ratio">
-                                <option v-for="item, ri in ratios" :key="ri">{{ item }}</option>
-                            </select></div>
-
-                    </fieldset>
-
-                    <img v-if="text" :src="text" style="max-width: 100%;" class="my-2">
-                </div>
-
-            </div>
-            <div class="text-center mt-4"><button class="btn btn-outline-secondary mr-1"
-                    @click.prevent="onCloseModal">{{
-                            langs.saveclose
-                    }}</button></div>
-        </b-modal>
-
-        <div v-if="text">
-            <img :src="text" style="width:100px;" />
-        </div>
+  <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" style="cursor: move">open_with</span
+      ><span class="font-weight-bold text-primary">{{ langs.label }}</span>
     </div>
+
+    <div class="col-sm-12 col-md-6 p-0 text-end">
+      <a href="#" @click.prevent="modalOpen" title="Edytuj" class="text-primary me-2"
+        ><i class="material-icons-outlined">create</i></a
+      >
+      <a href="#" title="Usuń" @click.prevent="removeItem()" class="text-danger"
+        ><i class="material-icons-outlined">delete</i></a
+      >
+    </div>
+    <b-modal v-model="modalBox" v-on:close="onCloseModal" :title="langs.label">
+      <div>
+        <div class="p-0 m-0">
+          <div class="form-group">
+            <label class="w-100 col-form-label">{{ langs.label }}</label>
+            <div class="input-group mb-3">
+              <input class="form-control" type="text" v-model="text" />
+              <button
+                @click="chooseImage"
+                class="btn btn-outline-secondary"
+                type="button"
+                id="button-addon2"
+              >
+                Wybierz
+              </button>
+            </div>
+          </div>
+
+          <div class="form-group">
+            <label class="w-100 col-form-label">{{ langs.title }}</label>
+            <input class="form-control" type="text" v-model="title" />
+          </div>
+          <div class="form-group">
+            <label class="w-100 col-form-label">{{ langs.alt }}</label>
+            <input class="form-control" type="text" v-model="alt" />
+          </div>
+          <div class="form-group">
+            <label class="w-100 col-form-label">Legenda obrazka</label>
+            <input class="form-control" type="text" v-model="figcaption" />
+          </div>
+          <div class="form-group">
+            <label class="w-100 col-form-label">{{ langs.scaling }}</label>
+            <select v-model="scale" class="form-select">
+              <option v-for="(item, ii) in scales" :key="ii" :value="item.key">
+                {{ item.modelValue }}
+              </option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label class="w-100 col-form-label">{{ langs.href }}</label>
+            <input class="form-control" type="text" v-model="href" />
+          </div>
+
+          <fieldset class="mt-3" v-show="scale == 'tak'">
+            <legend>{{ langs.proportions }}</legend>
+            Brak możliwości skalowania obrazków z zewnętrznego serwera.
+            <div class="form-group">
+              <label class="w-100 col-form-label">{{ langs.width }}</label
+              ><input class="form-control" v-model="width" />
+            </div>
+            <div class="form-group">
+              <label class="w-100 col-form-label">{{ langs.height }}</label
+              ><input class="form-control" v-model="height" />
+            </div>
+            <div class="form-group">
+              <label class="w-100 col-form-label">{{ langs.ratio }}</label
+              ><select class="form-select" v-model="ratio">
+                <option v-for="(item, ri) in ratios" :key="ri">{{ item }}</option>
+              </select>
+            </div>
+          </fieldset>
+          <div class="form-group">
+            <label class="w-100 col-form-label">Używaj lightbox</label>
+
+            <select v-model="img_lightbox" class="form-select">
+              <option :value="false">NIE</option>
+              <option :value="true">TAK</option>
+            </select>
+          </div>
+          <img v-if="text" :src="text" style="max-width: 100%; max-height: 30vh; width: 100%;object-fit:contain;" class="my-2" />
+        </div>
+      </div>
+      <div class="text-center mt-4">
+        <button class="btn btn-outline-secondary mr-1" @click.prevent="onCloseModal">
+          {{ langs.saveclose }}
+        </button>
+      </div>
+    </b-modal>
+
+    <div v-if="text">
+      <img :src="text" style="width: 100px" />
+    </div>
+  </div>
 </template>
 <script>
 import MagicoModal from './../MagicoModal.vue'
 
 export default {
-    props: {
-        modelValue: Object,
-    },
-    data: function () {
-        return {
-            langs: {
-                saveclose: "Zapisz",
-                label: "Obrazek",
-                close: "Zamknij",
-                removefile: "<?=lang('pagebuilder_core_section_image_removefile')?>",
-                fileupload: "<?=lang('pagebuilder_core_section_image_fileupload')?>",
-                scaling: "Skalowanie",
-                scalingyes: "Tak",
-                scalingno: "Nie",
-                proportions: "Proporcje",
-                height: "Wysokość",
-                width: "Szerokość",
-                ratio: "Radio",
-                href: "Adres URL",
-                alt: "Tekst alternatywny",
-                title: "Tytuł",
-            },
-            modalBox: false,
-            items: [],
-            text: '',
-            name: '',
-            alt: '',
-            href: '',
-            title: '',
-            width: 1800,
-            height: 600,
-            ratio: 'crop',
-            figcaption: '',
-            ratios: ['crop', 'auto', 'width', 'height'],
-            scales: [{
-                "key": "nie",
-                "value": "Nie"
-            }, {
-                "key": "tak",
-                "value": "Tak"
-            }],
-            scale: "Nie"
+  props: {
+    modelValue: Object
+  },
+  data: function () {
+    return {
+      langs: {
+        saveclose: 'Zapisz',
+        label: 'Obrazek',
+        close: 'Zamknij',
+        removefile: "<?=lang('pagebuilder_core_section_image_removefile')?>",
+        fileupload: "<?=lang('pagebuilder_core_section_image_fileupload')?>",
+        scaling: 'Skalowanie',
+        scalingyes: 'Tak',
+        scalingno: 'Nie',
+        proportions: 'Proporcje',
+        height: 'Wysokość',
+        width: 'Szerokość',
+        ratio: 'Radio',
+        href: 'Adres URL',
+        alt: 'Tekst alternatywny',
+        title: 'Tytuł'
+      },
+      modalBox: false,
+      items: [],
+      text: '',
+      name: '',
+      alt: '',
+      href: '',
+      title: '',
+      width: 1800,
+      height: 600,
+      ratio: 'crop',
+      figcaption: '',
+      img_lightbox: true,
+      ratios: ['crop', 'auto', 'width', 'height'],
+      scales: [
+        {
+          key: 'nie',
+          value: 'Nie'
+        },
+        {
+          key: 'tak',
+          value: 'Tak'
         }
+      ],
+      scale: 'Nie'
+    }
+  },
+  mounted: function () {
+    console.log('mount image', this.modelValue)
+    this.alt = this.modelValue && this.modelValue.alt ? this.modelValue.alt : this.alt
+    this.title = this.modelValue && this.modelValue.title ? this.modelValue.title : this.title
+    this.name = this.modelValue && this.modelValue.name ? this.modelValue.name : this.name
+    this.text = this.modelValue && this.modelValue.text ? this.modelValue.text : this.text
+    this.width = this.modelValue && this.modelValue.width ? this.modelValue.width : this.width
+    this.height = this.modelValue && this.modelValue.height ? this.modelValue.height : this.height
+    this.ratio = this.modelValue && this.modelValue.ratio ? this.modelValue.ratio : this.ratio
+    this.scale = this.modelValue && this.modelValue.scale ? this.modelValue.scale : this.scale
+    this.href = this.modelValue && this.modelValue.href ? this.modelValue.href : this.href
+    this.figcaption =
+      this.modelValue && this.modelValue.figcaption ? this.modelValue.figcaption : this.figcaption
+    this.img_lightbox =
+      this.modelValue && this.modelValue.img_lightbox
+        ? this.modelValue.img_lightbox
+        : this.img_lightbox
+    if (this.modelValue.open) this.modalBox = true
+  },
+  components: {
+    'b-modal': MagicoModal
+  },
+  methods: {
+    removeItem: function () {
+      this.$emit('itemRemoved', this.modelValue)
     },
-    mounted: function () {
-        console.log('mount image', this.modelValue);
-        this.alt = (this.modelValue && this.modelValue.alt) ? this.modelValue.alt : this.alt;
-        this.title = (this.modelValue && this.modelValue.title) ? this.modelValue.title : this.title;
-        this.name = (this.modelValue && this.modelValue.name) ? this.modelValue.name : this.name;
-        this.text = (this.modelValue && this.modelValue.text) ? this.modelValue.text : this.text;
-        this.width = (this.modelValue && this.modelValue.width) ? this.modelValue.width : this.width;
-        this.height = (this.modelValue && this.modelValue.height) ? this.modelValue.height : this.height;
-        this.ratio = (this.modelValue && this.modelValue.ratio) ? this.modelValue.ratio : this.ratio;
-        this.scale = (this.modelValue && this.modelValue.scale) ? this.modelValue.scale : this.scale;
-        this.href = (this.modelValue && this.modelValue.href) ? this.modelValue.href : this.href;
-        this.figcaption = (this.modelValue && this.modelValue.figcaption) ? this.modelValue.figcaption : this.figcaption;
-
-        if (this.modelValue.open) this.modalBox = true;
+    chooseImage: function () {
+      if (this.$filechooser) {
+        let vm = this
+        this.$filechooser.open({
+          chooseCallback: function (ev) {
+            vm.text = ev.publicUrl
+          }
+        })
+      } else {
+        alert('No FileChooser implemented')
+      }
     },
-    components: {
-        'b-modal': MagicoModal,
+    onCloseModal: function () {
+      this.modalBox = false
+      this.$emit('update:modelValue', {
+        name: this.name,
+        text: this.text,
+        height: this.height,
+        width: this.width,
+        ratio: this.ratio,
+        scale: this.scale,
+        alt: this.alt,
+        href: this.href,
+        title: this.title,
+        figcaption: this.figcaption,
+        img_lightbox: this.img_lightbox
+      })
     },
-    methods: {
-        removeItem: function () {
-            this.$emit('itemRemoved', this.modelValue);
-        },
-        chooseImage: function () {
-            if (this.$filechooser) {
-                let vm = this;
-                this.$filechooser.open({
-                    chooseCallback: function (ev) {
-                        vm.text = ev.publicUrl
-                    }
-                })
-            }else{
-                alert('No FileChooser implemented')
-            }
-        },
-        onCloseModal: function () {
-            this.modalBox = false;
-            this.$emit('update:modelValue', {
-                name: this.name,
-                text: this.text,
-                height: this.height,
-                width: this.width,
-                ratio: this.ratio,
-                scale: this.scale,
-                alt: this.alt,
-                href: this.href,
-                title: this.title,
-                figcaption: this.figcaption,
-            })
-        },
-        setText: function (item) {
-            this.text = 'files/images/' + item;
-            this.$emit('update:modelValue', {
-                name: this.name,
-                text: this.text,
-                height: this.height,
-                width: this.width,
-                ratio: this.ratio,
-                scale: this.scale,
-                alt: this.alt,
-                href: this.href,
-                title: this.title,
-                figcaption: this.figcaption,
-            })
-        },
-        modalOpen: function () {
-            this.modalBox = !this.modalBox;
-            //this.getItems();
-        },
-
+    setText: function (item) {
+      this.text = 'files/images/' + item
+      this.$emit('update:modelValue', {
+        name: this.name,
+        text: this.text,
+        height: this.height,
+        width: this.width,
+        ratio: this.ratio,
+        scale: this.scale,
+        alt: this.alt,
+        href: this.href,
+        title: this.title,
+        figcaption: this.figcaption,
+        img_lightbox: this.img_lightbox
+      })
     },
-
-};
-</script>
\ No newline at end of file
+    modalOpen: function () {
+      this.modalBox = !this.modalBox
+      //this.getItems();
+    }
+  }
+}
+</script>