vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Update #3965 - For Galleria

pull/4011/head
Bahadır Sofuoğlu 2023-06-01 02:19:04 +03:00
parent 4f96e9f68c
commit 511db538de
2 changed files with 17 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/lib/galleria/Galleria.vue
View File

@ -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) {

24
components/lib/galleria/GalleriaThumbnails.vue
View File

@ -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 = '';
}
},