From f2bddfa1115b69665155e9556f44934987898017 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 24 Sep 2020 17:47:01 +0300
Subject: [PATCH] Migrated Galleria to V3

---
 src/components/galleria/Galleria.vue          | 65 +++++++------------
 src/components/galleria/GalleriaContent.vue   |  4 +-
 src/components/galleria/GalleriaItem.vue      | 10 +--
 .../galleria/GalleriaThumbnails.vue           |  6 +-
 src/views/galleria/GalleriaAdvancedDemo.vue   |  4 +-
 5 files changed, 32 insertions(+), 57 deletions(-)

diff --git a/src/components/galleria/Galleria.vue b/src/components/galleria/Galleria.vue
index 91ee33023..2db4e7ae8 100755
--- a/src/components/galleria/Galleria.vue
+++ b/src/components/galleria/Galleria.vue
@@ -1,7 +1,7 @@
 <template>
-    <div v-if="fullScreen && (maskVisible || visible)" ref="mask" :class="maskContentClass">
-        <transition name="p-galleria" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" @appear="onAppear">
-            <GalleriaContent v-if="visible" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
+    <div v-if="fullScreen && containerVisible" :ref="maskRef" :class="maskContentClass">
+        <transition name="p-galleria" @before-enter="onBeforeEnter" @enter="onEnter" @before-leave="onBeforeLeave" @after-leave="onAfterLeave" appear>
+            <GalleriaContent :ref="containerRef" v-if="visible" v-bind="$props" @mask-hide="maskHide" :templates="$slots" @activeitem-change="onActiveItemChange" />
         </transition>
     </div>
 
@@ -112,47 +112,41 @@ export default {
             default: null
         }
     },
+    container: null,
+    mask: null,
     data() {
         return {
-            maskVisible: this.visible
+            containerVisible: this.visible
         }
     },
     updated() {
-        this.removeStylesFromMask();
-
-        if (this.fullScreen && this.visible && !this.maskVisible) {
-            this.maskVisible = true;
+        if (this.fullScreen && this.visible) {
+            this.containerVisible = this.visible;
         }
     },
-    mounted() {
-        this.removeStylesFromMask();
-    },
     beforeUnmount() {
         if (this.fullScreen) {
             DomHandler.removeClass(document.body, 'p-overflow-hidden');
         }
+
+        this.container = null;
+        this.mask = null;
     },
     methods: {
+        onBeforeEnter(el) {
+            el.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+        },
         onEnter() {
-            this.$refs.mask.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
+            this.mask.style.zIndex = String(this.baseZIndex + DomHandler.generateZIndex());
             DomHandler.addClass(document.body, 'p-overflow-hidden');
         },
         onBeforeLeave() {
-            DomHandler.addClass(this.$refs.mask, 'p-galleria-mask-leave');
+            DomHandler.addClass(this.mask, 'p-galleria-mask-leave');
         },
         onAfterLeave() {
-            this.maskVisible = false;
+            this.containerVisible = false;
             DomHandler.removeClass(document.body, 'p-overflow-hidden');
         },
-        onAppear() {
-            if (this.visible) {
-                this.onEnter();
-
-                setTimeout(() => {
-                    DomHandler.addClass(this.$refs.mask, 'p-component-overlay');
-                }, 1);
-            }
-        },
         onActiveItemChange(index) {
             if (this.activeIndex !== index) {
                 this.$emit('update:activeIndex', index);
@@ -161,27 +155,16 @@ export default {
         maskHide() {
             this.$emit('update:visible', false);
         },
-        removeStylesFromMask() {
-            if (this.$refs.mask) {
-                this.galleriaStyles = this.$vnode.data.style || this.$vnode.data.staticStyle;
-                if (this.galleriaStyles) {
-                    Object.keys(this.galleriaStyles).forEach((key) => {
-                        this.$refs.mask.style[key] = '';
-                    });
-                }
-
-                this.galleriaClasses = this.$vnode.data.class || this.$vnode.data.staticClass;
-                if (this.galleriaClasses) {
-                    this.$refs.mask.classList = 'p-galleria-mask' + (this.visible && ' p-galleria-visible');
-                }
-            }
+        containerRef(el) {
+            this.container = el;
+        },
+        maskRef(el) {
+            this.mask = el;
         }
     },
     computed: {
         maskContentClass() {
-            return ['p-galleria-mask', {
-                'p-galleria-visible': this.visible
-            }, this.maskClass];
+            return ['p-galleria-mask p-component-overlay', this.maskClass];
         }
     },
     components: {
@@ -456,7 +439,7 @@ export default {
     transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);
 }
 
-.p-galleria-enter,
+.p-galleria-enter-from,
 .p-galleria-leave-to {
     opacity: 0;
     transform: scale(0.7);
diff --git a/src/components/galleria/GalleriaContent.vue b/src/components/galleria/GalleriaContent.vue
index 5c81920d2..b0d2de7ae 100755
--- a/src/components/galleria/GalleriaContent.vue
+++ b/src/components/galleria/GalleriaContent.vue
@@ -4,7 +4,7 @@
             <span class="p-galleria-close-icon pi pi-times"></span>
         </button>
         <div v-if="$attrs.templates && $attrs.templates['header']" class="p-galleria-header">
-            <GalleriaItemSlot type="header" :templates="$attrs.templates"/>
+            <component :is="$attrs.templates['header']" />
         </div>
         <div class="p-galleria-content">
             <GalleriaItem :value="$attrs.value" v-model:activeIndex="activeIndex" :circular="$attrs.circular" :templates="$attrs.templates"
@@ -18,7 +18,7 @@
                 v-model:slideShowActive="slideShowActive" @stop-slideshow="stopSlideShow" />
         </div>
         <div v-if="$attrs.templates && $attrs.templates['footer']" class="p-galleria-footer">
-            <GalleriaItemSlot type="footer" :templates="$attrs.templates"/>
+            <component :is="$attrs.templates['footer']" />
         </div>
     </div>
 </template>
diff --git a/src/components/galleria/GalleriaItem.vue b/src/components/galleria/GalleriaItem.vue
index 280e3ec89..a1fdf47e7 100755
--- a/src/components/galleria/GalleriaItem.vue
+++ b/src/components/galleria/GalleriaItem.vue
@@ -5,13 +5,13 @@
             <span class="p-galleria-item-prev-icon pi pi-chevron-left"></span>
         </button>
         <div class="p-galleria-item">
-            <GalleriaItemSlot type="item" :item="activeItem" :templates="templates" />
+            <component :is="templates.item" :item="activeItem" v-if="templates.item" />
         </div>
         <button v-if="showItemNavigators" type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" v-ripple>
             <span class="p-galleria-item-next-icon pi pi-chevron-right"></span>
         </button>
         <div class="p-galleria-caption" v-if="templates['caption']">
-            <GalleriaItemSlot type="caption" :item="activeItem" :templates="templates" />
+            <component :is="templates.caption" :item="activeItem" v-if="templates.caption" />
         </div>
     </div>
     <ul v-if="showIndicators" class="p-galleria-indicators p-reset">
@@ -19,14 +19,13 @@
             @click="onIndicatorClick(index)" @mouseenter="onIndicatorMouseEnter(index)" @keydown.enter="onIndicatorKeyDown(index)"
             :class="['p-galleria-indicator', {'p-highlight': isIndicatorItemActive(index)}]">
             <button type="button" tabindex="-1" class="p-link" v-if="!templates['indicator']"></button>
-            <GalleriaItemSlot type="indicator" :index="index" :templates="templates" />
+            <component :is="templates.indicator" :index="index" v-if="templates.indicator" />
         </li>
     </ul>
   </div>
 </template>
 
 <script>
-import GalleriaItemSlot from './GalleriaItemSlot';
 import Ripple from '../ripple/Ripple';
 
 export default {
@@ -152,9 +151,6 @@ export default {
             }];
         }
     },
-    components: {
-        'GalleriaItemSlot': GalleriaItemSlot
-    },
     directives: {
         'ripple': Ripple
     }
diff --git a/src/components/galleria/GalleriaThumbnails.vue b/src/components/galleria/GalleriaThumbnails.vue
index f5a9dd2e3..213a999f0 100755
--- a/src/components/galleria/GalleriaThumbnails.vue
+++ b/src/components/galleria/GalleriaThumbnails.vue
@@ -13,7 +13,7 @@
                         'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
                         'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }]">
                         <div class="p-galleria-thumbnail-item-content" :tabindex="isItemActive(index) ? 0 : null" @click="onItemClick(index)" @keydown.enter="onItemClick(index)">
-                            <GalleriaItemSlot type="thumbnail" :item="item" :templates="templates" />
+                             <component :is="templates.thumbnail" :item="item" v-if="templates.thumbnail" />
                         </div>
                     </div>
                 </div>
@@ -26,7 +26,6 @@
 </template>
 
 <script>
-import GalleriaItemSlot from './GalleriaItemSlot';
 import DomHandler from '../utils/DomHandler';
 import Ripple from '../ripple/Ripple';
 
@@ -405,9 +404,6 @@ export default {
             }];
         }
     },
-    components: {
-        'GalleriaItemSlot': GalleriaItemSlot
-    },
     directives: {
         'ripple': Ripple
     }
diff --git a/src/views/galleria/GalleriaAdvancedDemo.vue b/src/views/galleria/GalleriaAdvancedDemo.vue
index c8e86e622..d00eaf133 100644
--- a/src/views/galleria/GalleriaAdvancedDemo.vue
+++ b/src/views/galleria/GalleriaAdvancedDemo.vue
@@ -9,7 +9,7 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
+                <Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" style="max-width: 640px;" :containerClass="galleriaClass"
                     :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
                     :circular="true" :autoPlay="true" :transitionInterval="3000">
                     <template #item="slotProps">
@@ -40,7 +40,7 @@
                 <TabPanel header="Source">
 <pre v-code>
 <code><template v-pre>
-&lt;Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" style="max-width: 640px;" :class="galleriaClass"
+&lt;Galleria ref="galleria" :value="images" v-model:activeIndex="activeIndex" :numVisible="5" style="max-width: 640px;" :containerClass="galleriaClass"
     :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true"
     :circular="true" :autoPlay="true" :transitionInterval="3000"&gt;
     &lt;template #item="slotProps"&gt;