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() { beforeUnmount() {
if (this.fullScreen) { if (this.fullScreen) {
DomHandler.removeClass(document.body, 'p-overflow-hidden'); !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
} }
this.mask = null; this.mask = null;
@ -161,16 +161,16 @@ export default {
}, },
onEnter(el) { onEnter(el) {
this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1); 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(); this.focus();
}, },
onBeforeLeave() { onBeforeLeave() {
DomHandler.addClass(this.mask, 'p-component-overlay-leave'); !this.isUnstyled && DomHandler.addClass(this.mask, 'p-component-overlay-leave');
}, },
onAfterLeave(el) { onAfterLeave(el) {
ZIndexUtils.clear(el); ZIndexUtils.clear(el);
this.containerVisible = false; this.containerVisible = false;
DomHandler.removeClass(document.body, 'p-overflow-hidden'); !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
}, },
onActiveItemChange(index) { onActiveItemChange(index) {
if (this.activeIndex !== index) { if (this.activeIndex !== index) {

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

@ -27,6 +27,7 @@
}) })
" "
role="tab" role="tab"
:data-p-active="activeIndex === index"
:aria-selected="activeIndex === index" :aria-selected="activeIndex === index"
:aria-controls="containerId + '_item_' + index" :aria-controls="containerId + '_item_' + index"
@keydown="onThumbnailKeydown($event, 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)`; 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) { 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'; this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
} }
@ -216,7 +217,7 @@ export default {
} }
if (this.$refs.itemsContainer) { 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.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'; this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
} }
@ -333,7 +334,7 @@ export default {
} }
}, },
onRightKey() { 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(); const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1); this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);
@ -349,29 +350,30 @@ export default {
this.changedFocusedIndicator(activeIndex, 0); this.changedFocusedIndicator(activeIndex, 0);
}, },
onEndKey() { 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(); const activeIndex = this.findFocusedIndicatorIndex();
this.changedFocusedIndicator(activeIndex, indicators.length - 1); this.changedFocusedIndicator(activeIndex, indicators.length - 1);
}, },
onTabKey() { onTabKey() {
const indicators = [...DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item')]; const indicators = [...DomHandler.find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]')];
const highlightedIndex = indicators.findIndex((ind) => DomHandler.hasClass(ind, 'p-galleria-thumbnail-item-current')); 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); const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
indicators[activeIndex].children[0].tabIndex = '-1'; indicators[activeIndex].children[0].tabIndex = '-1';
indicators[highlightedIndex].children[0].tabIndex = '0'; indicators[highlightedIndex].children[0].tabIndex = '0';
}, },
findFocusedIndicatorIndex() { findFocusedIndicatorIndex() {
const indicators = [...DomHandler.find(this.$refs.itemsContainer, '.p-galleria-thumbnail-item')]; const indicators = [...DomHandler.find(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"]')];
const activeIndicator = DomHandler.findSingle(this.$refs.itemsContainer, '.p-galleria-thumbnail-item > [tabindex="0"]'); const activeIndicator = DomHandler.findSingle(this.$refs.itemsContainer, '[data-pc-section="thumbnailitem"] > [tabindex="0"]');
return indicators.findIndex((ind) => ind === activeIndicator.parentElement); return indicators.findIndex((ind) => ind === activeIndicator.parentElement);
}, },
changedFocusedIndicator(prevInd, nextInd) { 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[prevInd].children[0].tabIndex = '-1';
indicators[nextInd].children[0].tabIndex = '0'; indicators[nextInd].children[0].tabIndex = '0';
@ -379,7 +381,7 @@ export default {
}, },
onTransitionEnd() { onTransitionEnd() {
if (this.$refs.itemsContainer) { 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 = ''; this.$refs.itemsContainer.style.transition = '';
} }
}, },