From 511db538de02f77abc916110a6134012b24708f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= Date: Thu, 1 Jun 2023 02:19:04 +0300 Subject: [PATCH] Update #3965 - For Galleria --- components/lib/galleria/Galleria.vue | 8 +++---- .../lib/galleria/GalleriaThumbnails.vue | 24 ++++++++++--------- 2 files changed, 17 insertions(+), 15 deletions(-) diff --git a/components/lib/galleria/Galleria.vue b/components/lib/galleria/Galleria.vue index 04077e79b..652eed6d6 100755 --- a/components/lib/galleria/Galleria.vue +++ b/components/lib/galleria/Galleria.vue @@ -145,7 +145,7 @@ export default { }, beforeUnmount() { if (this.fullScreen) { - DomHandler.removeClass(document.body, 'p-overflow-hidden'); + !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden'); } this.mask = null; @@ -161,16 +161,16 @@ export default { }, onEnter(el) { this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1); - DomHandler.addClass(document.body, 'p-overflow-hidden'); + !this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden'); this.focus(); }, onBeforeLeave() { - DomHandler.addClass(this.mask, 'p-component-overlay-leave'); + !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave'); }, onAfterLeave(el) { ZIndexUtils.clear(el); this.containerVisible = false; - DomHandler.removeClass(document.body, 'p-overflow-hidden'); + !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden'); }, onActiveItemChange(index) { if (this.activeIndex !== index) { diff --git a/components/lib/galleria/GalleriaThumbnails.vue b/components/lib/galleria/GalleriaThumbnails.vue index 3ee30f0c2..2c97f4f5a 100755 --- a/components/lib/galleria/GalleriaThumbnails.vue +++ b/components/lib/galleria/GalleriaThumbnails.vue @@ -27,6 +27,7 @@ }) " role="tab" + :data-p-active="activeIndex === index" :aria-selected="activeIndex === index" :aria-controls="containerId + '_item_' + index" @keydown="onThumbnailKeydown($event, index)" @@ -180,7 +181,7 @@ export default { 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'); + !this.isUnstyled && DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden'); this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s'; } @@ -216,7 +217,7 @@ export default { } if (this.$refs.itemsContainer) { - DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden'); + !this.isUnstyled && 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.transition = 'transform 500ms ease 0s'; } @@ -333,7 +334,7 @@ export default { } }, onRightKey() { - const indicators = DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item'); + const indicators = DomHandler.find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]'); const activeIndex = this.findFocusedIndicatorIndex(); this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1); @@ -349,29 +350,30 @@ export default { this.changedFocusedIndicator(activeIndex, 0); }, onEndKey() { - const indicators = DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item'); + const indicators = DomHandler.find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]'); const activeIndex = this.findFocusedIndicatorIndex(); this.changedFocusedIndicator(activeIndex, indicators.length - 1); }, onTabKey() { - const indicators = [...DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item')]; - const highlightedIndex = indicators.findIndex((ind) => DomHandler.hasClass(ind, 'p-galleria-thumbnail-item-current')); + const indicators = [...DomHandler.find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]')]; + const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-active') === true); + + const activeIndicator = DomHandler.findSingle(this.$refs.itemsContainer, '[tabindex="0"]'); - const activeIndicator = DomHandler.findSingle(this.$refs.itemsContainer, '.p-galleria-thumbnail-item > [tabindex="0"'); const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement); indicators[activeIndex].children[0].tabIndex = '-1'; indicators[highlightedIndex].children[0].tabIndex = '0'; }, findFocusedIndicatorIndex() { - const indicators = [...DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item')]; - const activeIndicator = DomHandler.findSingle(this.$refs.itemsContainer, '.p-galleria-thumbnail-item > [tabindex="0"]'); + const indicators = [...DomHandler.find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]')]; + const activeIndicator = DomHandler.findSingle(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"] > [tabindex="0"]'); return indicators.findIndex((ind) => ind === activeIndicator.parentElement); }, changedFocusedIndicator(prevInd, nextInd) { - const indicators = DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item'); + const indicators = DomHandler.find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]'); indicators[prevInd].children[0].tabIndex = '-1'; indicators[nextInd].children[0].tabIndex = '0'; @@ -379,7 +381,7 @@ export default { }, onTransitionEnd() { if (this.$refs.itemsContainer) { - DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden'); + !this.isUnstyled && DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden'); this.$refs.itemsContainer.style.transition = ''; } },