Touch support for splitter

pull/744/head
Cagatay Civici 2020-12-04 12:54:02 +03:00
parent 8f0db108ce
commit a6f9e7e837
1 changed files with 57 additions and 34 deletions

View File

@ -2,7 +2,11 @@
<div :class="containerClass"> <div :class="containerClass">
<template v-for="(panel,i) of panels" :key="i" class="p-splitter-panel"> <template v-for="(panel,i) of panels" :key="i" class="p-splitter-panel">
<component :is="panel"></component> <component :is="panel"></component>
<div class="p-splitter-gutter" v-if="i !== (panels.length -1)" :style="gutterStyle" @mousedown="onGutterMouseDown($event, i)"> <div class="p-splitter-gutter" v-if="i !== (panels.length -1)" :style="gutterStyle"
@mousedown="onGutterMouseDown($event, i)"
@touchstart="onGutterTouchStart($event, i)"
@touchmove="onGutterTouchMove($event, i)"
@touchend="onGutterTouchEnd($event, i)">
<div class="p-splitter-gutter-handle"></div> <div class="p-splitter-gutter-handle"></div>
</div> </div>
</template> </template>
@ -69,13 +73,13 @@ export default {
}, },
beforeUnmount() { beforeUnmount() {
this.clear(); this.clear();
this.unbindListeners(); this.unbindMouseListeners();
}, },
methods: { methods: {
isSplitterPanel(child) { isSplitterPanel(child) {
return child.type.name === 'splitterpanel'; return child.type.name === 'splitterpanel';
}, },
onGutterMouseDown(event, index) { onResizeStart(event, index) {
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;
@ -87,11 +91,8 @@ export default {
this.prevPanelIndex = index; this.prevPanelIndex = index;
DomHandler.addClass(this.gutterElement, 'p-splitter-gutter-resizing'); DomHandler.addClass(this.gutterElement, 'p-splitter-gutter-resizing');
DomHandler.addClass(this.$el, 'p-splitter-resizing'); DomHandler.addClass(this.$el, 'p-splitter-resizing');
this.bindListeners();
}, },
bindListeners() { onResize(event) {
if (!this.mouseMoveListener) {
this.mouseMoveListener = event => {
let newPos; let newPos;
if (this.horizontal) if (this.horizontal)
newPos = (event.pageX * 100 / this.size) - (this.startPos * 100 / this.size); newPos = (event.pageX * 100 / this.size) - (this.startPos * 100 / this.size);
@ -107,12 +108,8 @@ export default {
this.panelSizes[this.prevPanelIndex] = newPrevPanelSize; this.panelSizes[this.prevPanelIndex] = newPrevPanelSize;
this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize; this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
} }
}; },
document.addEventListener('mousemove', this.mouseMoveListener); onResizeEnd(event) {
}
if (!this.mouseUpListener) {
this.mouseUpListener = (event) => {
if (this.isStateful()) { if (this.isStateful()) {
this.saveState(); this.saveState();
} }
@ -121,8 +118,34 @@ export default {
DomHandler.removeClass(this.gutterElement, 'p-splitter-gutter-resizing'); DomHandler.removeClass(this.gutterElement, 'p-splitter-gutter-resizing');
DomHandler.removeClass(this.$el, 'p-splitter-resizing'); DomHandler.removeClass(this.$el, 'p-splitter-resizing');
this.clear(); this.clear();
this.unbindListeners(); },
}; onGutterMouseDown(event, index) {
this.onResizeStart(event, index);
this.bindMouseListeners();
},
onGutterTouchStart(event, index) {
this.onResizeStart(event, index);
event.preventDefault();
},
onGutterTouchMove(event) {
this.onResize(event);
event.preventDefault();
},
onGutterTouchEnd(event) {
this.onResizeEnd(event);
event.preventDefault();
},
bindMouseListeners() {
if (!this.mouseMoveListener) {
this.mouseMoveListener = event => this.onResize(event)
document.addEventListener('mousemove', this.mouseMoveListener);
}
if (!this.mouseUpListener) {
this.mouseUpListener = event => {
this.onResizeEnd(event);
this.unbindMouseListeners();
}
document.addEventListener('mouseup', this.mouseUpListener); document.addEventListener('mouseup', this.mouseUpListener);
} }
}, },
@ -137,7 +160,7 @@ export default {
return true; return true;
}, },
unbindListeners() { unbindMouseListeners() {
if (this.mouseMoveListener) { if (this.mouseMoveListener) {
document.removeEventListener('mousemove', this.mouseMoveListener); document.removeEventListener('mousemove', this.mouseMoveListener);
this.mouseMoveListener = null; this.mouseMoveListener = null;