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

Merge pull request #2737 from tugcekucukoglu/splitter 

Fixed #2513 - Splitter: mobile resize fails
pull/2739/head
Tuğçe Küçükoğlu 2022-06-30 11:29:29 +03:00 committed by GitHub
parent 47d9b6b38b 83af80d542
commit 7481e12279
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/components/splitter/Splitter.vue
View File

@ -40,6 +40,8 @@ export default {
dragging: false, dragging: false,
mouseMoveListener: null, mouseMoveListener: null,
mouseUpListener: null, mouseUpListener: null,
touchMoveListener: null,
touchEndListener: null,
size: null, size: null,
gutterElement: null, gutterElement: null,
startPos: null, startPos: null,
@ -83,7 +85,7 @@ export default {
this.gutterElement = event.currentTarget; this.gutterElement = event.currentTarget;
this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el); this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el);
this.dragging = true; this.dragging = true;
this.startPos = this.layout === 'horizontal' ? event.pageX : event.pageY; this.startPos = this.layout === 'horizontal' ? (event.pageX || event.changedTouches[0].pageX) : (event.pageY || event.changedTouches[0].pageY);
this.prevPanelElement = this.gutterElement.previousElementSibling; this.prevPanelElement = this.gutterElement.previousElementSibling;
this.nextPanelElement = this.gutterElement.nextElementSibling; this.nextPanelElement = this.gutterElement.nextElementSibling;
this.prevPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true): DomHandler.getOuterHeight(this.prevPanelElement, true)) / this.size; this.prevPanelSize = 100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true): DomHandler.getOuterHeight(this.prevPanelElement, true)) / this.size;
@ -125,6 +127,7 @@ export default {
}, },
onGutterTouchStart(event, index) { onGutterTouchStart(event, index) {
this.onResizeStart(event, index); this.onResizeStart(event, index);
this.bindTouchListeners();
event.preventDefault(); event.preventDefault();
}, },
onGutterTouchMove(event) { onGutterTouchMove(event) {
@ -133,6 +136,7 @@ export default {
}, },
onGutterTouchEnd(event) { onGutterTouchEnd(event) {
this.onResizeEnd(event); this.onResizeEnd(event);
this.unbindTouchListeners();
event.preventDefault(); event.preventDefault();
}, },
bindMouseListeners() { bindMouseListeners() {
@ -149,6 +153,20 @@ export default {
document.addEventListener('mouseup', this.mouseUpListener); document.addEventListener('mouseup', this.mouseUpListener);
} }
}, },
bindTouchListeners() {
if (!this.touchMoveListener) {
this.touchMoveListener = event => this.onResize(event.changedTouches[0])
document.addEventListener('touchmove', this.touchMoveListener);
}
if (!this.touchEndListener) {
this.touchEndListener = event => {
this.resizeEnd(event);
this.unbindTouchListeners();
}
document.addEventListener('touchend', this.touchEndListener);
}
},
validateResize(newPrevPanelSize, newNextPanelSize) { validateResize(newPrevPanelSize, newNextPanelSize) {
let prevPanelMinSize = ObjectUtils.getVNodeProp(this.panels[0], 'minSize'); let prevPanelMinSize = ObjectUtils.getVNodeProp(this.panels[0], 'minSize');
if (this.panels[0].props && prevPanelMinSize && prevPanelMinSize > newPrevPanelSize) { if (this.panels[0].props && prevPanelMinSize && prevPanelMinSize > newPrevPanelSize) {
@ -173,6 +191,17 @@ export default {
this.mouseUpListener = null; this.mouseUpListener = null;
} }
}, },
unbindTouchListeners() {
if (this.touchMoveListener) {
document.removeEventListener('touchmove', this.touchMoveListener);
this.touchMoveListener = null;
}
if (this.touchEndListener) {
document.removeEventListener('touchend', this.touchEndListener);
this.touchEndListener = null;
}
},
clear() { clear() {
this.dragging = false; this.dragging = false;
this.size = null; this.size = null;