primevue-mirror/components/lib/splitter/Splitter.vue

393 lines
14 KiB
Vue
Raw Normal View History

2022-09-06 12:03:37 +00:00
<template>
<div :class="cx('root')" :style="sx('root')" :data-p-resizing="false" v-bind="ptmi('root', getPTOptions)">
2022-12-22 13:20:07 +00:00
<template v-for="(panel, i) of panels" :key="i">
2022-09-14 11:26:01 +00:00
<component :is="panel" tabindex="-1"></component>
2023-03-27 07:13:31 +00:00
<div
v-if="i !== panels.length - 1"
2023-05-24 08:54:19 +00:00
ref="gutter"
:class="cx('gutter')"
2023-03-27 07:13:31 +00:00
role="separator"
tabindex="-1"
@mousedown="onGutterMouseDown($event, i)"
@touchstart="onGutterTouchStart($event, i)"
@touchmove="onGutterTouchMove($event, i)"
@touchend="onGutterTouchEnd($event, i)"
2023-05-24 08:54:19 +00:00
:data-p-gutter-resizing="false"
2023-03-27 07:13:31 +00:00
v-bind="ptm('gutter')"
>
2023-05-24 08:54:19 +00:00
<div :class="cx('gutterHandler')" tabindex="0" :style="[gutterStyle]" :aria-orientation="layout" :aria-valuenow="prevSize" @keyup="onGutterKeyUp" @keydown="onGutterKeyDown($event, i)" v-bind="ptm('gutterHandler')"></div>
2022-09-06 12:03:37 +00:00
</div>
</template>
</div>
</template>
<script>
2022-09-14 11:26:01 +00:00
import { DomHandler, ObjectUtils } from 'primevue/utils';
2023-05-24 08:54:19 +00:00
import BaseSplitter from './BaseSplitter.vue';
2022-09-06 12:03:37 +00:00
export default {
name: 'Splitter',
2023-05-24 08:54:19 +00:00
extends: BaseSplitter,
2024-02-11 23:48:31 +00:00
inheritAttrs: false,
emits: ['resizestart', 'resizeend', 'resize'],
2022-09-06 12:03:37 +00:00
dragging: false,
mouseMoveListener: null,
mouseUpListener: null,
touchMoveListener: null,
touchEndListener: null,
size: null,
gutterElement: null,
startPos: null,
prevPanelElement: null,
nextPanelElement: null,
nextPanelSize: null,
prevPanelSize: null,
panelSizes: null,
prevPanelIndex: null,
2022-09-14 11:26:01 +00:00
timer: null,
data() {
return {
prevSize: null
};
},
2022-09-06 12:03:37 +00:00
mounted() {
this.initializePanels();
},
updated() {
this.initializePanels();
2022-09-06 12:03:37 +00:00
},
beforeUnmount() {
this.clear();
this.unbindMouseListeners();
},
methods: {
isSplitterPanel(child) {
return child.type.name === 'SplitterPanel';
},
initializePanels() {
if (this.panels && this.panels.length) {
let initialized = false;
if (this.isStateful()) {
initialized = this.restoreState();
}
if (!initialized) {
let children = [...this.$el.children].filter((child) => child.getAttribute('data-pc-name') === 'splitterpanel');
let _panelSizes = [];
this.panels.map((panel, i) => {
let panelInitialSize = panel.props && panel.props.size ? panel.props.size : null;
let panelSize = panelInitialSize || 100 / this.panels.length;
_panelSizes[i] = panelSize;
children[i].style.flexBasis = 'calc(' + panelSize + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
});
this.panelSizes = _panelSizes;
this.prevSize = parseFloat(_panelSizes[0]).toFixed(4);
}
}
},
2022-09-14 11:26:01 +00:00
onResizeStart(event, index, isKeyDown) {
this.gutterElement = event.currentTarget || event.target.parentElement;
2022-09-06 12:03:37 +00:00
this.size = this.horizontal ? DomHandler.getWidth(this.$el) : DomHandler.getHeight(this.$el);
2022-09-14 11:26:01 +00:00
if (!isKeyDown) {
this.dragging = true;
this.startPos = this.layout === 'horizontal' ? event.pageX || event.changedTouches[0].pageX : event.pageY || event.changedTouches[0].pageY;
}
2022-09-06 12:03:37 +00:00
this.prevPanelElement = this.gutterElement.previousElementSibling;
this.nextPanelElement = this.gutterElement.nextElementSibling;
2022-09-14 11:26:01 +00:00
if (isKeyDown) {
this.prevPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true);
this.nextPanelSize = this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true);
} else {
this.prevPanelSize = (100 * (this.horizontal ? DomHandler.getOuterWidth(this.prevPanelElement, true) : DomHandler.getOuterHeight(this.prevPanelElement, true))) / this.size;
this.nextPanelSize = (100 * (this.horizontal ? DomHandler.getOuterWidth(this.nextPanelElement, true) : DomHandler.getOuterHeight(this.nextPanelElement, true))) / this.size;
}
2022-09-06 12:03:37 +00:00
this.prevPanelIndex = index;
2022-12-08 11:04:25 +00:00
this.$emit('resizestart', { originalEvent: event, sizes: this.panelSizes });
2023-05-24 08:54:19 +00:00
this.$refs.gutter[index].setAttribute('data-p-gutter-resizing', true);
this.$el.setAttribute('data-p-resizing', true);
2022-09-06 12:03:37 +00:00
},
2022-09-14 11:26:01 +00:00
onResize(event, step, isKeyDown) {
let newPos, newPrevPanelSize, newNextPanelSize;
if (isKeyDown) {
if (this.horizontal) {
newPrevPanelSize = (100 * (this.prevPanelSize + step)) / this.size;
newNextPanelSize = (100 * (this.nextPanelSize - step)) / this.size;
} else {
newPrevPanelSize = (100 * (this.prevPanelSize - step)) / this.size;
newNextPanelSize = (100 * (this.nextPanelSize + step)) / this.size;
}
} else {
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;
2022-09-06 12:03:37 +00:00
2022-09-14 11:26:01 +00:00
newPrevPanelSize = this.prevPanelSize + newPos;
newNextPanelSize = this.nextPanelSize - newPos;
}
2022-09-06 12:03:37 +00:00
if (this.validateResize(newPrevPanelSize, newNextPanelSize)) {
2022-09-14 11:26:01 +00:00
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)';
2022-09-06 12:03:37 +00:00
this.panelSizes[this.prevPanelIndex] = newPrevPanelSize;
this.panelSizes[this.prevPanelIndex + 1] = newNextPanelSize;
this.prevSize = parseFloat(newPrevPanelSize).toFixed(4);
2022-09-06 12:03:37 +00:00
}
this.$emit('resize', { originalEvent: event, sizes: this.panelSizes });
2022-09-06 12:03:37 +00:00
},
onResizeEnd(event) {
if (this.isStateful()) {
this.saveState();
}
2022-09-14 11:26:01 +00:00
this.$emit('resizeend', { originalEvent: event, sizes: this.panelSizes });
2023-05-24 08:54:19 +00:00
this.$refs.gutter.forEach((gutter) => gutter.setAttribute('data-p-gutter-resizing', false));
this.$el.setAttribute('data-p-resizing', false);
2022-09-06 12:03:37 +00:00
this.clear();
},
2022-09-14 11:26:01 +00:00
repeat(event, index, step) {
this.onResizeStart(event, index, true);
this.onResize(event, step, true);
},
setTimer(event, index, step) {
2024-02-04 17:31:14 +00:00
if (!this.timer) {
this.timer = setInterval(() => {
this.repeat(event, index, step);
}, 40);
}
2022-09-14 11:26:01 +00:00
},
clearTimer() {
if (this.timer) {
2024-02-04 17:31:14 +00:00
clearInterval(this.timer);
this.timer = null;
2022-09-14 11:26:01 +00:00
}
},
onGutterKeyUp() {
this.clearTimer();
this.onResizeEnd();
},
onGutterKeyDown(event, index) {
switch (event.code) {
case 'ArrowLeft': {
if (this.layout === 'horizontal') {
this.setTimer(event, index, this.step * -1);
}
event.preventDefault();
break;
}
case 'ArrowRight': {
if (this.layout === 'horizontal') {
this.setTimer(event, index, this.step);
}
event.preventDefault();
break;
}
case 'ArrowDown': {
if (this.layout === 'vertical') {
this.setTimer(event, index, this.step * -1);
}
event.preventDefault();
break;
}
case 'ArrowUp': {
if (this.layout === 'vertical') {
this.setTimer(event, index, this.step);
}
event.preventDefault();
break;
}
default:
//no op
break;
}
},
2022-09-06 12:03:37 +00:00
onGutterMouseDown(event, index) {
this.onResizeStart(event, index);
this.bindMouseListeners();
},
onGutterTouchStart(event, index) {
this.onResizeStart(event, index);
this.bindTouchListeners();
event.preventDefault();
},
onGutterTouchMove(event) {
this.onResize(event);
event.preventDefault();
},
onGutterTouchEnd(event) {
this.onResizeEnd(event);
this.unbindTouchListeners();
event.preventDefault();
},
bindMouseListeners() {
if (!this.mouseMoveListener) {
2022-09-14 11:26:01 +00:00
this.mouseMoveListener = (event) => this.onResize(event);
2022-09-06 12:03:37 +00:00
document.addEventListener('mousemove', this.mouseMoveListener);
}
if (!this.mouseUpListener) {
2022-09-14 11:26:01 +00:00
this.mouseUpListener = (event) => {
2022-09-06 12:03:37 +00:00
this.onResizeEnd(event);
this.unbindMouseListeners();
2022-09-14 11:26:01 +00:00
};
2022-09-06 12:03:37 +00:00
document.addEventListener('mouseup', this.mouseUpListener);
}
},
bindTouchListeners() {
if (!this.touchMoveListener) {
2022-09-14 11:26:01 +00:00
this.touchMoveListener = (event) => this.onResize(event.changedTouches[0]);
2022-09-06 12:03:37 +00:00
document.addEventListener('touchmove', this.touchMoveListener);
}
if (!this.touchEndListener) {
2022-09-14 11:26:01 +00:00
this.touchEndListener = (event) => {
2022-09-06 12:03:37 +00:00
this.resizeEnd(event);
this.unbindTouchListeners();
2022-09-14 11:26:01 +00:00
};
2022-09-06 12:03:37 +00:00
document.addEventListener('touchend', this.touchEndListener);
}
},
validateResize(newPrevPanelSize, newNextPanelSize) {
2023-10-19 18:39:39 +00:00
if (newPrevPanelSize > 100 || newPrevPanelSize < 0) return false;
if (newNextPanelSize > 100 || newNextPanelSize < 0) return false;
2022-09-14 11:26:01 +00:00
2023-10-20 07:17:49 +00:00
let prevPanelMinSize = ObjectUtils.getVNodeProp(this.panels[this.prevPanelIndex], 'minSize');
2023-10-19 18:39:39 +00:00
2023-10-20 07:17:49 +00:00
if (this.panels[this.prevPanelIndex].props && prevPanelMinSize && prevPanelMinSize > newPrevPanelSize) {
2022-09-06 12:03:37 +00:00
return false;
}
2023-10-20 07:17:49 +00:00
let newPanelMinSize = ObjectUtils.getVNodeProp(this.panels[this.prevPanelIndex + 1], 'minSize');
2022-09-14 11:26:01 +00:00
2023-10-20 07:17:49 +00:00
if (this.panels[this.prevPanelIndex + 1].props && newPanelMinSize && newPanelMinSize > newNextPanelSize) {
2022-09-06 12:03:37 +00:00
return false;
}
return true;
},
unbindMouseListeners() {
if (this.mouseMoveListener) {
document.removeEventListener('mousemove', this.mouseMoveListener);
this.mouseMoveListener = null;
}
if (this.mouseUpListener) {
document.removeEventListener('mouseup', this.mouseUpListener);
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;
this.startPos = null;
this.prevPanelElement = null;
this.nextPanelElement = null;
this.prevPanelSize = null;
this.nextPanelSize = null;
this.gutterElement = null;
this.prevPanelIndex = null;
},
isStateful() {
return this.stateKey != null;
},
getStorage() {
2022-09-14 11:26:01 +00:00
switch (this.stateStorage) {
2022-09-06 12:03:37 +00:00
case 'local':
return window.localStorage;
case 'session':
return window.sessionStorage;
default:
throw new Error(this.stateStorage + ' is not a valid value for the state storage, supported values are "local" and "session".');
}
},
saveState() {
2023-11-15 08:33:28 +00:00
if (ObjectUtils.isArray(this.panelSizes)) {
this.getStorage().setItem(this.stateKey, JSON.stringify(this.panelSizes));
}
2022-09-06 12:03:37 +00:00
},
restoreState() {
const storage = this.getStorage();
const stateString = storage.getItem(this.stateKey);
if (stateString) {
this.panelSizes = JSON.parse(stateString);
2023-05-24 08:54:19 +00:00
let children = [...this.$el.children].filter((child) => child.getAttribute('data-pc-name') === 'splitterpanel');
2022-09-14 11:26:01 +00:00
2022-09-06 12:03:37 +00:00
children.forEach((child, i) => {
2022-09-14 11:26:01 +00:00
child.style.flexBasis = 'calc(' + this.panelSizes[i] + '% - ' + (this.panels.length - 1) * this.gutterSize + 'px)';
2022-09-06 12:03:37 +00:00
});
return true;
}
return false;
}
},
computed: {
panels() {
const panels = [];
2022-09-14 11:26:01 +00:00
this.$slots.default().forEach((child) => {
if (this.isSplitterPanel(child)) {
panels.push(child);
} else if (child.children instanceof Array) {
child.children.forEach((nestedChild) => {
if (this.isSplitterPanel(nestedChild)) {
panels.push(nestedChild);
}
});
2022-09-06 12:03:37 +00:00
}
2022-09-14 11:26:01 +00:00
});
2022-09-06 12:03:37 +00:00
return panels;
},
gutterStyle() {
2022-09-14 11:26:01 +00:00
if (this.horizontal) return { width: this.gutterSize + 'px' };
else return { height: this.gutterSize + 'px' };
2022-09-06 12:03:37 +00:00
},
horizontal() {
return this.layout === 'horizontal';
},
getPTOptions() {
return {
context: {
nested: this.$parentInstance?.nestedState
}
};
2022-09-06 12:03:37 +00:00
}
}
2022-09-14 11:26:01 +00:00
};
2022-09-06 12:03:37 +00:00
</script>