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

Refactor #6647 - For ScrollPanel

pull/6674/head
tugcekucukoglu 2024-10-28 12:59:00 +03:00
parent 1578dc4bb0
commit 7cfe3d852e
2 changed files with 40 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -40,8 +40,8 @@
</template>
<script>
import { addClass, getHeight, removeClass } from '@primeuix/utils/dom';
import { UniqueComponentId } from '@primevue/core/utils';
import { getHeight, addClass, removeClass } from '@primeuix/utils/dom';
import BaseScrollPanel from './BaseScrollPanel.vue';
export default {
@ -61,12 +61,14 @@ export default {
lastPageY: null,
timer: null,
outsideClickListener: null,
mutationObserver: null,
data() {
return {
id: this.$attrs.id,
orientation: 'vertical',
lastScrollTop: 0,
lastScrollLeft: 0
lastScrollLeft: 0,
isRTL: false
};
},
watch: {
@ -80,6 +82,9 @@ export default {
if (this.$el.offsetParent) {
this.initialize();
}
this.updateDirection();
this.observeDirectionChanges();
},
updated() {
if (!this.initialized && this.$el.offsetParent) {
@ -92,8 +97,25 @@ export default {
if (this.frame) {
window.cancelAnimationFrame(this.frame);
}
if (this.mutationObserver) {
this.mutationObserver.disconnect();
}
},
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() {
this.moveBar();
this.bindDocumentResizeListener();
@ -137,7 +159,12 @@ export default {
} else {
this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
!this.isUnstyled && removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
if (this.isRTL) {
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;';
}
}
}
@ -148,8 +175,14 @@ export default {
} else {
this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
!this.isUnstyled && removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
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;';
if (this.isRTL) {
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);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;';
}
}
}
});

5
packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js
View File

@ -31,7 +31,6 @@ const theme = ({ dt }) => `
cursor: pointer;
opacity: 0;
outline-color: transparent;
transition: outline-color ${dt('scrollpanel.transition.duration')};
background: ${dt('scrollpanel.bar.background')};
border: 0 none;
transition: outline-color ${dt('scrollpanel.transition.duration')}, opacity ${dt('scrollpanel.transition.duration')};
@ -45,12 +44,12 @@ const theme = ({ dt }) => `
.p-scrollpanel-bar-y {
width: ${dt('scrollpanel.bar.size')};
top: 0;
inset-block-start: 0;
}
.p-scrollpanel-bar-x {
height: ${dt('scrollpanel.bar.size')};
bottom: 0;
inset-block-end: 0;
}
.p-scrollpanel-hidden {