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

Refactor #6826 - For ScrollPanel

pull/6767/merge
Mert Sincan 2024-11-21 14:39:42 +00:00
parent 7246898598
commit 1926c2b3d2
1 changed files with 4 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
packages/primevue/src/scrollpanel/ScrollPanel.vue
View File

@ -61,14 +61,12 @@ export default {
lastPageY: null, lastPageY: null,
timer: null, timer: null,
outsideClickListener: null, outsideClickListener: null,
mutationObserver: null,
data() { data() {
return { return {
id: this.$attrs.id, id: this.$attrs.id,
orientation: 'vertical', orientation: 'vertical',
lastScrollTop: 0, lastScrollTop: 0,
lastScrollLeft: 0, lastScrollLeft: 0
isRTL: false
}; };
}, },
watch: { watch: {
@ -82,9 +80,6 @@ export default {
if (this.$el.offsetParent) { if (this.$el.offsetParent) {
this.initialize(); this.initialize();
} }
this.updateDirection();
this.observeDirectionChanges();
}, },
updated() { updated() {
if (!this.initialized && this.$el.offsetParent) { if (!this.initialized && this.$el.offsetParent) {
@ -97,25 +92,8 @@ export default {
if (this.frame) { if (this.frame) {
window.cancelAnimationFrame(this.frame); window.cancelAnimationFrame(this.frame);
} }
if (this.mutationObserver) {
this.mutationObserver.disconnect();
}
}, },
methods: { methods: {
updateDirection() {
this.isRTL = !!this.$el.closest('[dir="rtl"]');
},
observeDirectionChanges() {
const targetNode = document.documentElement;
const config = { attributes: true, attributeFilter: ['dir'] };
this.mutationObserver = new MutationObserver(() => {
this.updateDirection();
});
this.mutationObserver.observe(targetNode, config);
},
initialize() { initialize() {
this.moveBar(); this.moveBar();
this.bindDocumentResizeListener(); this.bindDocumentResizeListener();
@ -160,11 +138,7 @@ export default {
this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false'); this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
!this.isUnstyled && removeClass(this.$refs.xBar, 'p-scrollpanel-hidden'); !this.isUnstyled && removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
if (this.isRTL) { this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; inset-inline-start:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; right:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
} else {
this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
}
} }
} }
@ -176,13 +150,8 @@ export default {
this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false'); this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
!this.isUnstyled && removeClass(this.$refs.yBar, 'p-scrollpanel-hidden'); !this.isUnstyled && removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
if (this.isRTL) { this.$refs.yBar.style.cssText =
this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px); inset-inline-end:' + right + 'px;';
'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);left:' + right + 'px;';
} else {
this.$refs.yBar.style.cssText =
'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
}
} }
} }
}); });