Skip to content

Commit 02b109e

Browse files
yansernyansern
committed
Revert "Listen directly to resizer mousedown eent. Added paneResizeBeforeStart event."
This reverts commit d6ffa00.
1 parent e8f20d1 commit 02b109e

File tree

4 files changed

+79
-97
lines changed

4 files changed

+79
-97
lines changed

‎README.md

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -112,10 +112,9 @@ You can also add resize handle only specific panes by just adding `<multipane-re
112112

113113
| Event | Description | Returns |
114114
| ------------------ | ---------------- | :--------: |
115-
| paneResizeBeforeStart | When user press (mousedown) on the resize handle. | pane, resizer, pageX, pageY |
116-
| paneResizeStart | When is-resizing class is added to the container and mousemove and mouseup event listeners are attached to window. | pane, resizer, size, pageX, pageY |
117-
| paneResize | When user is resizing a pane. | pane, resizer, size, pageX, pageY |
118-
| paneResizeStop | When user release (mouseout) the resize handle to stop resizing a pane. | pane, resizer, size, pageX, pageY |
115+
| paneresizestart | When user clicks on the resize handle to start resizing a pane. | pane, container, size |
116+
| paneresize | When user is resizing a pane. | pane, container, size |
117+
| paneresizestop | When user release the resize handle to stop resizing a pane. | pane, container, size |
119118

120119
## License
121120
**[vue-multipane](https://github.com/yansern/vue-multipane)** by [Yan Sern](https://twitter.com/yansernio) licensed under [MIT](LICENSE).

‎src/multipane-resizer.vue

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,3 @@
11
<template>
2-
<div class="multipane-resizer" @mousedown="onMouseDown"><slot></slot></div>
3-
</template>
4-
<script>
5-
export default {
6-
name: 'multipane-resizer',
7-
methods: {
8-
onMouseDown({ pageX: initialPageX, pageY: initialPageY }) {
9-
let resizer = this.$el;
10-
let pane = resizer.previousElementSibling;
11-
this.$emit('paneResizeBeforeStart', pane, resizer, pageX, pageY);
12-
}
13-
}
14-
}
15-
</script>
16-
2+
<div class="multipane-resizer"><slot></slot></div>
3+
</template>

‎src/multipane.js

Lines changed: 73 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -35,83 +35,79 @@ export default {
3535
},
3636
},
3737

38-
events: {
39-
paneResizeBeforeStart(pane, resizer, initialPageX, initialPageY) {
40-
let self = this;
41-
let { $el: container, layout } = self;
42-
43-
let {
44-
offsetWidth: initialPaneWidth,
45-
offsetHeight: initialPaneHeight,
46-
} = pane;
47-
48-
let usePercentage = !!(pane.style.width + '').match('%');
49-
50-
const { addEventListener, removeEventListener } = window;
51-
52-
const resize = (initialSize, offset = 0) => {
53-
if (layout == LAYOUT_VERTICAL) {
54-
let containerWidth = container.clientWidth;
55-
let paneWidth = initialSize + offset;
56-
57-
return (pane.style.width = usePercentage
58-
? paneWidth / containerWidth * 100 + '%'
59-
: paneWidth + 'px');
60-
}
61-
62-
if (layout == LAYOUT_HORIZONTAL) {
63-
let containerHeight = container.clientHeight;
64-
let paneHeight = initialSize + offset;
65-
66-
return (pane.style.height = usePercentage
67-
? paneHeight / containerHeight * 100 + '%'
68-
: paneHeight + 'px');
69-
}
70-
};
71-
72-
const onMouseMove = function({ pageX, pageY }) {
73-
let size =
74-
layout == LAYOUT_VERTICAL
75-
? resize(initialPaneWidth, pageX - initialPageX)
76-
: resize(initialPaneHeight, pageY - initialPageY);
77-
78-
self.$emit('paneResize', pane, resizer, size, pageX, pageY);
79-
};
80-
81-
const onMouseUp = function({ pageX, pageY }) {
82-
// Run resize one more time to set computed width/height.
83-
let size =
84-
layout == LAYOUT_VERTICAL
85-
? resize(pane.clientWidth)
86-
: resize(pane.clientHeight);
87-
88-
// This removes is-resizing class to container
89-
self.isResizing = false;
90-
91-
removeEventListener('mousemove', onMouseMove);
92-
removeEventListener('mouseup', onMouseUp);
93-
94-
self.$emit('paneResizeStop', pane, resizer, size, pageX, pageY);
95-
};
96-
97-
addEventListener('mousemove', onMouseMove);
98-
addEventListener('mouseup', onMouseUp);
99-
100-
// This adds is-resizing class to container
101-
self.isResizing = true;
102-
103-
// Resize once to get current computed size
104-
let size = resize();
105-
106-
// Trigger paneResizeStart event
107-
self.$emit(
108-
'paneResizeStart',
109-
pane,
110-
resizer,
111-
size,
112-
initialPageX,
113-
initialPageY
114-
);
38+
methods: {
39+
onMouseDown({ target: resizer, pageX: initialPageX, pageY: initialPageY }) {
40+
if (resizer.className.match('multipane-resizer')) {
41+
let self = this;
42+
let { $el: container, layout } = self;
43+
44+
let pane = resizer.previousElementSibling;
45+
let {
46+
offsetWidth: initialPaneWidth,
47+
offsetHeight: initialPaneHeight,
48+
} = pane;
49+
50+
let usePercentage = !!(pane.style.width + '').match('%');
51+
52+
const { addEventListener, removeEventListener } = window;
53+
54+
const resize = (initialSize, offset = 0) => {
55+
if (layout == LAYOUT_VERTICAL) {
56+
let containerWidth = container.clientWidth;
57+
let paneWidth = initialSize + offset;
58+
59+
return (pane.style.width = usePercentage
60+
? paneWidth / containerWidth * 100 + '%'
61+
: paneWidth + 'px');
62+
}
63+
64+
if (layout == LAYOUT_HORIZONTAL) {
65+
let containerHeight = container.clientHeight;
66+
let paneHeight = initialSize + offset;
67+
68+
return (pane.style.height = usePercentage
69+
? paneHeight / containerHeight * 100 + '%'
70+
: paneHeight + 'px');
71+
}
72+
};
73+
74+
// This adds is-resizing class to container
75+
self.isResizing = true;
76+
77+
// Resize once to get current computed size
78+
let size = resize();
79+
80+
// Trigger paneResizeStart event
81+
self.$emit('paneResizeStart', pane, resizer, size);
82+
83+
const onMouseMove = function({ pageX, pageY }) {
84+
size =
85+
layout == LAYOUT_VERTICAL
86+
? resize(initialPaneWidth, pageX - initialPageX)
87+
: resize(initialPaneHeight, pageY - initialPageY);
88+
89+
self.$emit('paneResize', pane, resizer, size);
90+
};
91+
92+
const onMouseUp = function() {
93+
// Run resize one more time to set computed width/height.
94+
size =
95+
layout == LAYOUT_VERTICAL
96+
? resize(pane.clientWidth)
97+
: resize(pane.clientHeight);
98+
99+
// This removes is-resizing class to container
100+
self.isResizing = false;
101+
102+
removeEventListener('mousemove', onMouseMove);
103+
removeEventListener('mouseup', onMouseUp);
104+
105+
self.$emit('paneResizeStop', pane, resizer, size);
106+
};
107+
108+
addEventListener('mousemove', onMouseMove);
109+
addEventListener('mouseup', onMouseUp);
110+
}
115111
},
116112
},
117113
};

‎src/multipane.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<div :class="classnames" :style="{ cursor, userSelect }">
2+
<div :class="classnames" :style="{ cursor, userSelect }" @mousedown="onMouseDown">
33
<slot></slot>
44
</div>
55
</template>

0 commit comments

Comments
 (0)