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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/components/splitter/Splitter.vue
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,42 +91,61 @@ 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) {
let newPos;
if (this.horizontal)
newPos = (event.pageX * 100 / this.size) - (this.startPos * 100 / this.size);
else
newPos = (event.pageY * 100 / this.size) - (this.startPos * 100 / this.size);
let newPrevPanelSize = this.prevPanelSize + newPos;
let newNextPanelSize = this.nextPanelSize - newPos;
if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
this.nextPanelElement.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
this.panelSizes[this.prevPanelIndex] = newPrevPanelSize;
this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
}
},
onResizeEnd(event) {
if (this.isStateful()) {
this.saveState();
}
this.$emit('resizeend', {originalEvent: event, sizes: this.panelSizes});
DomHandler.removeClass(this.gutterElement, 'p-splitter-gutter-resizing');
DomHandler.removeClass(this.$el, 'p-splitter-resizing');
this.clear();
},
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) { if (!this.mouseMoveListener) {
this.mouseMoveListener = event => { this.mouseMoveListener = event => this.onResize(event)
let newPos;
if (this.horizontal)
newPos = (event.pageX * 100 / this.size) - (this.startPos * 100 / this.size);
else
newPos = (event.pageY * 100 / this.size) - (this.startPos * 100 / this.size);
let newPrevPanelSize = this.prevPanelSize + newPos;
let newNextPanelSize = this.nextPanelSize - newPos;
if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
this.prevPanelElement.style.flexBasis = 'calc(' + newPrevPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
this.nextPanelElement.style.flexBasis = 'calc(' + newNextPanelSize + '% - ' + ((this.panels.length - 1) * this.gutterSize) + 'px)';
this.panelSizes[this.prevPanelIndex] = newPrevPanelSize;
this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
}
};
document.addEventListener('mousemove', this.mouseMoveListener); document.addEventListener('mousemove', this.mouseMoveListener);
} }
if (!this.mouseUpListener) { if (!this.mouseUpListener) {
this.mouseUpListener = (event) => { this.mouseUpListener = event => {
if (this.isStateful()) { this.onResizeEnd(event);
this.saveState(); this.unbindMouseListeners();
} }
this.$emit('resizeend', {originalEvent: event, sizes: this.panelSizes});
DomHandler.removeClass(this.gutterElement, 'p-splitter-gutter-resizing');
DomHandler.removeClass(this.$el, 'p-splitter-resizing');
this.clear();
this.unbindListeners();
};
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;