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,
mouseMoveListener: null,
mouseUpListener: null,
touchMoveListener: null,
touchEndListener: null,
size: null,
gutterElement: null,
startPos: null,
@ -83,7 +85,7 @@ export default {
this.gutterElement = event.currentTarget;
this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el);
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.nextPanelElement = this.gutterElement.nextElementSibling;
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) {
this.onResizeStart(event, index);
this.bindTouchListeners();
event.preventDefault();
},
onGutterTouchMove(event) {
@ -133,6 +136,7 @@ export default {
},
onGutterTouchEnd(event) {
this.onResizeEnd(event);
this.unbindTouchListeners();
event.preventDefault();
},
bindMouseListeners() {
@ -149,6 +153,20 @@ export default {
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) {
let prevPanelMinSize = ObjectUtils.getVNodeProp(this.panels[0], 'minSize');
if (this.panels[0].props && prevPanelMinSize && prevPanelMinSize > newPrevPanelSize) {
@ -173,6 +191,17 @@ export default {
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() {
this.dragging = false;
this.size = null;