don't expose direction, handleIndex to distributor ctor

pull/21833/head
Bruno Windels 2018-10-16 16:25:00 +02:00
parent 30003d8f91
commit 650e19ff77
2 changed files with 25 additions and 19 deletions

View File

@ -1,8 +1,8 @@
class FixedDistributor { class FixedDistributor {
constructor(container, items, handleIndex, direction, sizer) { constructor(sizer, item) {
this.item = items[handleIndex + direction];
this.beforeOffset = sizer.getItemOffset(this.item);
this.sizer = sizer; this.sizer = sizer;
this.item = item;
this.beforeOffset = sizer.getItemOffset(this.item);
} }
resize(offset) { resize(offset) {
@ -17,8 +17,8 @@ class FixedDistributor {
class CollapseDistributor extends FixedDistributor { class CollapseDistributor extends FixedDistributor {
constructor(container, items, handleIndex, direction, sizer, config) { constructor(sizer, item, config) {
super(container, items, handleIndex, direction, sizer); super(sizer, item);
this.toggleSize = config && config.toggleSize; this.toggleSize = config && config.toggleSize;
this.onCollapsed = config && config.onCollapsed; this.onCollapsed = config && config.onCollapsed;
} }
@ -43,16 +43,17 @@ class CollapseDistributor extends FixedDistributor {
class PercentageDistributor { class PercentageDistributor {
constructor(container, items, handleIndex, direction, sizer) { constructor(sizer, item, _config, items, container) {
this.container = container; this.container = container;
this.totalSize = sizer.getTotalSize(); this.totalSize = sizer.getTotalSize();
this.sizer = sizer; this.sizer = sizer;
this.beforeItems = items.slice(0, handleIndex); const itemIndex = items.indexOf(item);
this.afterItems = items.slice(handleIndex); this.beforeItems = items.slice(0, itemIndex);
this.afterItems = items.slice(itemIndex);
const percentages = PercentageDistributor._getPercentages(sizer, items); const percentages = PercentageDistributor._getPercentages(sizer, items);
this.beforePercentages = percentages.slice(0, handleIndex); this.beforePercentages = percentages.slice(0, itemIndex);
this.afterPercentages = percentages.slice(handleIndex); this.afterPercentages = percentages.slice(itemIndex);
} }
resize(offset) { resize(offset) {

View File

@ -58,20 +58,17 @@ export class Resizer {
const resizeHandle = event.target; const resizeHandle = event.target;
const vertical = resizeHandle.classList.contains(this.classNames.vertical); const vertical = resizeHandle.classList.contains(this.classNames.vertical);
const reverse = resizeHandle.classList.contains(this.classNames.reverse); const reverse = resizeHandle.classList.contains(this.classNames.reverse);
const direction = reverse ? 0 : -1;
const sizer = new this.sizerCtor(this.container, vertical, reverse); const sizer = new this.sizerCtor(this.container, vertical, reverse);
const items = Array.from(this.container.children).filter(el => { const items = this._getResizableItems();
return !this._isResizeHandle(el) && (
this._isResizeHandle(el.previousElementSibling) ||
this._isResizeHandle(el.nextElementSibling));
});
const prevItem = resizeHandle.previousElementSibling; const prevItem = resizeHandle.previousElementSibling;
const handleIndex = items.indexOf(prevItem) + 1; // if reverse, resize the item after the handle, so + 1
const itemIndex = items.indexOf(prevItem) + (reverse ? 1 : 0);
const item = items[itemIndex];
const distributor = new this.distributorCtor( const distributor = new this.distributorCtor(
this.container, items, handleIndex, sizer, item, this.distributorCfg,
direction, sizer, this.distributorCfg); items, this.container);
const onMouseMove = (event) => { const onMouseMove = (event) => {
const offset = sizer.offsetFromEvent(event); const offset = sizer.offsetFromEvent(event);
@ -91,4 +88,12 @@ export class Resizer {
body.addEventListener("mouseup", onMouseUp, false); body.addEventListener("mouseup", onMouseUp, false);
body.addEventListener("mousemove", onMouseMove, false); body.addEventListener("mousemove", onMouseMove, false);
} }
_getResizableItems() {
return Array.from(this.container.children).filter(el => {
return !this._isResizeHandle(el) && (
this._isResizeHandle(el.previousElementSibling) ||
this._isResizeHandle(el.nextElementSibling));
});
}
} }