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

Refactor #6826 - For Slider

pull/6787/head^2
Mert Sincan 2024-11-21 18:11:39 +00:00
parent 418d81a3c3
commit 312bf677ea
1 changed files with 7 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
packages/primevue/src/slider/Slider.vue
View File

@ -65,7 +65,7 @@
</template> </template>
<script> <script>
import { getAttribute, getWindowScrollLeft, getWindowScrollTop } from '@primeuix/utils/dom'; import { getAttribute, getWindowScrollLeft, getWindowScrollTop, isRTL } from '@primeuix/utils/dom';
import BaseSlider from './BaseSlider.vue'; import BaseSlider from './BaseSlider.vue';
export default { export default {
@ -81,22 +81,8 @@ export default {
barHeight: null, barHeight: null,
dragListener: null, dragListener: null,
dragEndListener: null, dragEndListener: null,
mutationObserver: null,
data() {
return {
isRTL: false
};
},
beforeUnmount() { beforeUnmount() {
this.unbindDragListeners(); this.unbindDragListeners();
if (this.mutationObserver) {
this.mutationObserver.disconnect();
}
},
mounted() {
this.updateDirection();
this.observeDirectionChanges();
}, },
methods: { methods: {
updateDomData() { updateDomData() {
@ -113,7 +99,8 @@ export default {
let pageY = event.touches ? event.touches[0].pageY : event.pageY; let pageY = event.touches ? event.touches[0].pageY : event.pageY;
if (this.orientation === 'horizontal') { if (this.orientation === 'horizontal') {
if (this.isRTL) { // @todo: Check this
if (isRTL(this.$el)) {
handleValue = ((this.initX + this.barWidth - pageX) * 100) / this.barWidth; handleValue = ((this.initX + this.barWidth - pageX) * 100) / this.barWidth;
} else { } else {
handleValue = ((pageX - this.initX) * 100) / this.barWidth; handleValue = ((pageX - this.initX) * 100) / this.barWidth;
@ -308,7 +295,7 @@ export default {
const rangeSliderPosition = this.rangeEndPosition > this.rangeStartPosition ? this.rangeStartPosition : this.rangeEndPosition; const rangeSliderPosition = this.rangeEndPosition > this.rangeStartPosition ? this.rangeStartPosition : this.rangeEndPosition;
if (this.horizontal) { if (this.horizontal) {
return this.isRTL ? { right: rangeSliderPosition + '%', width: rangeSliderWidth + '%' } : { left: rangeSliderPosition + '%', width: rangeSliderWidth + '%' }; return { 'inset-inline-start': rangeSliderPosition + '%', width: rangeSliderWidth + '%' };
} else { } else {
return { bottom: rangeSliderPosition + '%', height: rangeSliderWidth + '%' }; return { bottom: rangeSliderPosition + '%', height: rangeSliderWidth + '%' };
} }
@ -322,37 +309,24 @@ export default {
}, },
handleStyle() { handleStyle() {
if (this.horizontal) { if (this.horizontal) {
return this.isRTL ? { right: this.handlePosition + '%' } : { left: this.handlePosition + '%' }; return { 'inset-inline-start': this.handlePosition + '%' };
} else { } else {
return { bottom: this.handlePosition + '%' }; return { bottom: this.handlePosition + '%' };
} }
}, },
rangeStartHandleStyle() { rangeStartHandleStyle() {
if (this.horizontal) { if (this.horizontal) {
return this.isRTL ? { right: this.rangeStartPosition + '%' } : { left: this.rangeStartPosition + '%' }; return { 'inset-inline-start': this.rangeStartPosition + '%' };
} else { } else {
return { bottom: this.rangeStartPosition + '%' }; return { bottom: this.rangeStartPosition + '%' };
} }
}, },
rangeEndHandleStyle() { rangeEndHandleStyle() {
if (this.horizontal) { if (this.horizontal) {
return this.isRTL ? { right: this.rangeEndPosition + '%' } : { left: this.rangeEndPosition + '%' }; return { 'inset-inline-start': this.rangeEndPosition + '%' };
} else { } else {
return { bottom: this.rangeEndPosition + '%' }; return { bottom: this.rangeEndPosition + '%' };
} }
},
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);
} }
}, },
computed: { computed: {