primevue 3.16.2 → 3.17.0

package/galleria/GalleriaThumbnails.vue

@@ -1,24 +1,31 @@
 <template>
     <div class="p-galleria-thumbnail-wrapper">
         <div class="p-galleria-thumbnail-container">
-            <button v-if="showThumbnailNavigators" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" type="button" v-ripple>
+            <button v-if="showThumbnailNavigators" v-ripple :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()" type="button">
                 <span :class="navBackwardIconClass"></span>
             </button>
-            <div class="p-galleria-thumbnail-items-container" :style="{'height': isVertical ? contentHeight : ''}">
-                <div ref="itemsContainer" class="p-galleria-thumbnail-items" @transitionend="onTransitionEnd"
-                    @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
-                    <div v-for="(item, index) of value" :key="`p-galleria-thumbnail-item-${index}`" :class="['p-galleria-thumbnail-item', {
-                        'p-galleria-thumbnail-item-current': activeIndex === index,
-                        'p-galleria-thumbnail-item-active': isItemActive(index),
-                        'p-galleria-thumbnail-item-start': firstItemAciveIndex() === index,
-                        'p-galleria-thumbnail-item-end': lastItemActiveIndex() === index }]">
+            <div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }">
+                <div ref="itemsContainer" class="p-galleria-thumbnail-items" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">
+                    <div
+                        v-for="(item, index) of value"
+                        :key="`p-galleria-thumbnail-item-${index}`"
+                        :class="[
+                            'p-galleria-thumbnail-item',
+                            {
+                                'p-galleria-thumbnail-item-current': activeIndex === index,
+                                'p-galleria-thumbnail-item-active': isItemActive(index),
+                                '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)">
-                             <component :is="templates.thumbnail" :item="item" v-if="templates.thumbnail" />
+                            <component v-if="templates.thumbnail" :is="templates.thumbnail" :item="item" />
                         </div>
                     </div>
                 </div>
             </div>
-            <button v-if="showThumbnailNavigators" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" type="button" v-ripple>
+            <button v-if="showThumbnailNavigators" v-ripple :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()" type="button">
                 <span :class="navForwardIconClass"></span>
             </button>
         </div>
@@ -26,7 +33,7 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import { DomHandler } from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -35,7 +42,7 @@ export default {
     props: {
         containerId: {
             type: String,
-            default: null,
+            default: null
         },
         value: {
             type: Array,
@@ -67,7 +74,7 @@ export default {
         },
         contentHeight: {
             type: String,
-            default: "300px"
+            default: '300px'
         },
         showThumbnailNavigators: {
             type: Boolean,
@@ -89,25 +96,25 @@ export default {
             d_oldActiveItemIndex: this.activeIndex,
             totalShiftedItems: 0,
             page: 0
-        }
+        };
     },
     watch: {
         numVisible(newValue, oldValue) {
-			this.d_numVisible = newValue;
-			this.d_oldNumVisible = oldValue;
+            this.d_numVisible = newValue;
+            this.d_oldNumVisible = oldValue;
         },
         activeIndex(newValue, oldValue) {
-			this.d_activeIndex = newValue;
-			this.d_oldActiveItemIndex = oldValue;
+            this.d_activeIndex = newValue;
+            this.d_oldActiveItemIndex = oldValue;
         }
     },
     mounted() {
-		this.createStyle();
-		this.calculatePosition();
+        this.createStyle();
+        this.calculatePosition();
 
-		if (this.responsiveOptions) {
-			this.bindDocumentListeners();
-		}
+        if (this.responsiveOptions) {
+            this.bindDocumentListeners();
+        }
     },
     updated() {
         let totalShiftedItems = this.totalShiftedItems;
@@ -115,22 +122,19 @@ export default {
         if (this.d_oldNumVisible !== this.d_numVisible || this.d_oldActiveItemIndex !== this.d_activeIndex) {
             if (this.d_activeIndex <= this.getMedianItemIndex()) {
                 totalShiftedItems = 0;
-            }
-            else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this.d_activeIndex) {
+            } else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this.d_activeIndex) {
                 totalShiftedItems = this.d_numVisible - this.value.length;
-            }
-            else if (this.value.length - this.d_numVisible < this.d_activeIndex && this.d_numVisible % 2 === 0) {
-                totalShiftedItems = (this.d_activeIndex * -1) + this.getMedianItemIndex() + 1;
-            }
-            else {
-                totalShiftedItems = (this.d_activeIndex * -1) + this.getMedianItemIndex();
+            } else if (this.value.length - this.d_numVisible < this.d_activeIndex && this.d_numVisible % 2 === 0) {
+                totalShiftedItems = this.d_activeIndex * -1 + this.getMedianItemIndex() + 1;
+            } else {
+                totalShiftedItems = this.d_activeIndex * -1 + this.getMedianItemIndex();
             }
 
             if (totalShiftedItems !== this.totalShiftedItems) {
                 this.totalShiftedItems = totalShiftedItems;
             }
 
-            this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
+            this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
 
             if (this.d_oldActiveItemIndex !== this.d_activeIndex) {
                 DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
@@ -142,37 +146,35 @@ export default {
         }
     },
     beforeUnmount() {
-		if (this.responsiveOptions) {
-			this.unbindDocumentListeners();
+        if (this.responsiveOptions) {
+            this.unbindDocumentListeners();
         }
 
         if (this.thumbnailsStyle) {
             this.thumbnailsStyle.parentNode.removeChild(this.thumbnailsStyle);
         }
-	},
+    },
     methods: {
         step(dir) {
             let totalShiftedItems = this.totalShiftedItems + dir;
 
-            if (dir < 0 && (-1 * totalShiftedItems) + this.d_numVisible > (this.value.length - 1)) {
+            if (dir < 0 && -1 * totalShiftedItems + this.d_numVisible > this.value.length - 1) {
                 totalShiftedItems = this.d_numVisible - this.value.length;
-            }
-            else if (dir > 0 && totalShiftedItems > 0) {
+            } else if (dir > 0 && totalShiftedItems > 0) {
                 totalShiftedItems = 0;
             }
 
             if (this.circular) {
                 if (dir < 0 && this.value.length - 1 === this.d_activeIndex) {
                     totalShiftedItems = 0;
-                }
-                else if (dir > 0 && this.d_activeIndex === 0) {
+                } else if (dir > 0 && this.d_activeIndex === 0) {
                     totalShiftedItems = this.d_numVisible - this.value.length;
                 }
             }
 
             if (this.$refs.itemsContainer) {
                 DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
-                this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
+                this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;
                 this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
             }
 
@@ -186,18 +188,20 @@ export default {
         getMedianItemIndex() {
             let index = Math.floor(this.d_numVisible / 2);
 
-            return (this.d_numVisible % 2) ? index : index - 1;
+            return this.d_numVisible % 2 ? index : index - 1;
         },
         navBackward(e) {
             this.stopSlideShow();
 
             let prevItemIndex = this.d_activeIndex !== 0 ? this.d_activeIndex - 1 : 0;
             let diff = prevItemIndex + this.totalShiftedItems;
-            if ((this.d_numVisible - diff - 1) > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) !== 0 || this.circular)) {
+
+            if (this.d_numVisible - diff - 1 > this.getMedianItemIndex() && (-1 * this.totalShiftedItems !== 0 || this.circular)) {
                 this.step(1);
             }
 
             let activeIndex = this.circular && this.d_activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
+
             this.$emit('update:activeIndex', activeIndex);
 
             if (e.cancelable) {
@@ -208,11 +212,13 @@ export default {
             this.stopSlideShow();
 
             let nextItemIndex = this.d_activeIndex + 1;
-            if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1 || this.circular)) {
+
+            if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && (-1 * this.totalShiftedItems < this.getTotalPageNumber() - 1 || this.circular)) {
                 this.step(-1);
             }
 
-            let activeIndex = this.circular && (this.value.length - 1) === this.d_activeIndex ? 0 : nextItemIndex;
+            let activeIndex = this.circular && this.value.length - 1 === this.d_activeIndex ? 0 : nextItemIndex;
+
             this.$emit('update:activeIndex', activeIndex);
 
             if (e.cancelable) {
@@ -223,18 +229,21 @@ export default {
             this.stopSlideShow();
 
             let selectedItemIndex = index;
+
             if (selectedItemIndex !== this.d_activeIndex) {
                 const diff = selectedItemIndex + this.totalShiftedItems;
                 let dir = 0;
+
                 if (selectedItemIndex < this.d_activeIndex) {
-                    dir = (this.d_numVisible - diff - 1) - this.getMedianItemIndex();
-                    if (dir > 0 && (-1 * this.totalShiftedItems) !== 0) {
+                    dir = this.d_numVisible - diff - 1 - this.getMedianItemIndex();
+
+                    if (dir > 0 && -1 * this.totalShiftedItems !== 0) {
                         this.step(dir);
                     }
-                }
-                else {
+                } else {
                     dir = this.getMedianItemIndex() - diff;
-                    if (dir < 0 && (-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1) {
+
+                    if (dir < 0 && -1 * this.totalShiftedItems < this.getTotalPageNumber() - 1) {
                         this.step(dir);
                     }
                 }
@@ -265,22 +274,22 @@ export default {
             let touchobj = e.changedTouches[0];
 
             if (this.isVertical) {
-                this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
-            }
-            else {
-                this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
+                this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);
+            } else {
+                this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);
             }
         },
         changePageOnTouch(e, diff) {
-            if (diff < 0) {           // left
+            if (diff < 0) {
+                // left
                 this.navForward(e);
-            }
-            else {                    // right
+            } else {
+                // right
                 this.navBackward(e);
             }
         },
         getTotalPageNumber() {
-            return this.value.length > this.d_numVisible ? (this.value.length - this.d_numVisible) + 1 : 0;
+            return this.value.length > this.d_numVisible ? this.value.length - this.d_numVisible + 1 : 0;
         },
         createStyle() {
             if (!this.thumbnailsStyle) {
@@ -291,7 +300,7 @@ export default {
 
             let innerHTML = `
                 #${this.containerId} .p-galleria-thumbnail-item {
-                    flex: 1 0 ${ (100/ this.d_numVisible) }%
+                    flex: 1 0 ${100 / this.d_numVisible}%
                 }
             `;
 
@@ -302,16 +311,11 @@ export default {
                     const value2 = data2.breakpoint;
                     let result = null;
 
-                    if (value1 == null && value2 != null)
-                        result = -1;
-                    else if (value1 != null && value2 == null)
-                        result = 1;
-                    else if (value1 == null && value2 == null)
-                        result = 0;
-                    else if (typeof value1 === 'string' && typeof value2 === 'string')
-                        result = value1.localeCompare(value2, undefined, { numeric: true });
-                    else
-                        result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
+                    if (value1 == null && value2 != null) result = -1;
+                    else if (value1 != null && value2 == null) result = 1;
+                    else if (value1 == null && value2 == null) result = 0;
+                    else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, undefined, { numeric: true });
+                    else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
 
                     return -1 * result;
                 });
@@ -322,10 +326,10 @@ export default {
                     innerHTML += `
                         @media screen and (max-width: ${res.breakpoint}) {
                             #${this.containerId} .p-galleria-thumbnail-item {
-                                flex: 1 0 ${ (100/ res.numVisible) }%
+                                flex: 1 0 ${100 / res.numVisible}%
                             }
                         }
-                    `
+                    `;
                 }
             }
 
@@ -361,16 +365,16 @@ export default {
             }
         },
         unbindDocumentListeners() {
-            if(this.documentResizeListener) {
+            if (this.documentResizeListener) {
                 window.removeEventListener('resize', this.documentResizeListener);
                 this.documentResizeListener = null;
             }
         },
         isNavBackwardDisabled() {
-            return (!this.circular && this.d_activeIndex === 0) || (this.value.length <= this.d_numVisible);
+            return (!this.circular && this.d_activeIndex === 0) || this.value.length <= this.d_numVisible;
         },
         isNavForwardDisabled() {
-            return (!this.circular && this.d_activeIndex === (this.value.length - 1)) || (this.value.length <= this.d_numVisible);
+            return (!this.circular && this.d_activeIndex === this.value.length - 1) || this.value.length <= this.d_numVisible;
         },
         firstItemAciveIndex() {
             return this.totalShiftedItems * -1;
@@ -384,30 +388,42 @@ export default {
     },
     computed: {
         navBackwardClass() {
-            return ['p-galleria-thumbnail-prev p-link', {
-                'p-disabled': this.isNavBackwardDisabled()
-            }];
+            return [
+                'p-galleria-thumbnail-prev p-link',
+                {
+                    'p-disabled': this.isNavBackwardDisabled()
+                }
+            ];
         },
         navForwardClass() {
-            return ['p-galleria-thumbnail-next p-link', {
-                'p-disabled': this.isNavForwardDisabled()
-            }];
+            return [
+                'p-galleria-thumbnail-next p-link',
+                {
+                    'p-disabled': this.isNavForwardDisabled()
+                }
+            ];
         },
         navBackwardIconClass() {
-            return ['p-galleria-thumbnail-prev-icon pi', {
-                'pi-chevron-left': !this.isVertical,
-                'pi-chevron-up': this.isVertical
-            }];
+            return [
+                'p-galleria-thumbnail-prev-icon pi',
+                {
+                    'pi-chevron-left': !this.isVertical,
+                    'pi-chevron-up': this.isVertical
+                }
+            ];
         },
         navForwardIconClass() {
-            return ['p-galleria-thumbnail-next-icon pi', {
-                'pi-chevron-right': !this.isVertical,
-                'pi-chevron-down': this.isVertical
-            }];
+            return [
+                'p-galleria-thumbnail-next-icon pi',
+                {
+                    'pi-chevron-right': !this.isVertical,
+                    'pi-chevron-down': this.isVertical
+                }
+            ];
         }
     },
     directives: {
-        'ripple': Ripple
+        ripple: Ripple
     }
-}
+};
 </script>