2018-09-24 18:07:42 +03:00
|
|
|
class FixedDistributor {
|
2018-10-16 17:25:00 +03:00
|
|
|
constructor(sizer, item) {
|
2018-09-24 18:07:42 +03:00
|
|
|
this.sizer = sizer;
|
2018-10-16 17:25:00 +03:00
|
|
|
this.item = item;
|
|
|
|
this.beforeOffset = sizer.getItemOffset(this.item);
|
2018-09-24 18:07:42 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
resize(offset) {
|
|
|
|
const itemSize = offset - this.beforeOffset;
|
|
|
|
this.sizer.setItemSize(this.item, itemSize);
|
|
|
|
return itemSize;
|
|
|
|
}
|
|
|
|
|
2018-10-16 18:22:12 +03:00
|
|
|
sizeFromOffset(offset) {
|
|
|
|
return offset - this.beforeOffset;
|
2018-09-24 18:07:42 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
class CollapseDistributor extends FixedDistributor {
|
2018-10-16 17:25:00 +03:00
|
|
|
constructor(sizer, item, config) {
|
|
|
|
super(sizer, item);
|
2018-10-16 15:56:49 +03:00
|
|
|
this.toggleSize = config && config.toggleSize;
|
|
|
|
this.onCollapsed = config && config.onCollapsed;
|
2018-09-24 18:07:42 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
resize(offset) {
|
2018-10-16 18:22:12 +03:00
|
|
|
let newSize = this.sizeFromOffset(offset);
|
2018-10-16 13:26:08 +03:00
|
|
|
if (newSize < this.toggleSize) {
|
|
|
|
this.item.classList.add("collapsed");
|
2018-10-16 15:56:49 +03:00
|
|
|
if (this.onCollapsed) {
|
|
|
|
this.onCollapsed(true, this.item);
|
|
|
|
}
|
2018-10-16 13:26:08 +03:00
|
|
|
}
|
|
|
|
else {
|
|
|
|
this.item.classList.remove("collapsed");
|
2018-10-16 15:56:49 +03:00
|
|
|
if (this.onCollapsed) {
|
|
|
|
this.onCollapsed(false, this.item);
|
|
|
|
}
|
2018-09-24 18:07:42 +03:00
|
|
|
}
|
2018-10-16 18:22:12 +03:00
|
|
|
super.resize(offset);
|
2018-09-24 18:07:42 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
class PercentageDistributor {
|
|
|
|
|
2018-10-16 17:25:00 +03:00
|
|
|
constructor(sizer, item, _config, items, container) {
|
2018-09-24 18:07:42 +03:00
|
|
|
this.container = container;
|
|
|
|
this.totalSize = sizer.getTotalSize();
|
|
|
|
this.sizer = sizer;
|
|
|
|
|
2018-10-16 17:25:00 +03:00
|
|
|
const itemIndex = items.indexOf(item);
|
|
|
|
this.beforeItems = items.slice(0, itemIndex);
|
|
|
|
this.afterItems = items.slice(itemIndex);
|
2018-09-24 18:07:42 +03:00
|
|
|
const percentages = PercentageDistributor._getPercentages(sizer, items);
|
2018-10-16 17:25:00 +03:00
|
|
|
this.beforePercentages = percentages.slice(0, itemIndex);
|
|
|
|
this.afterPercentages = percentages.slice(itemIndex);
|
2018-09-24 18:07:42 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
resize(offset) {
|
|
|
|
const percent = offset / this.totalSize;
|
|
|
|
const beforeSum =
|
|
|
|
this.beforePercentages.reduce((total, p) => total + p, 0);
|
|
|
|
const beforePercentages =
|
|
|
|
this.beforePercentages.map(p => (p / beforeSum) * percent);
|
|
|
|
const afterSum =
|
|
|
|
this.afterPercentages.reduce((total, p) => total + p, 0);
|
|
|
|
const afterPercentages =
|
|
|
|
this.afterPercentages.map(p => (p / afterSum) * (1 - percent));
|
|
|
|
|
|
|
|
this.beforeItems.forEach((item, index) => {
|
|
|
|
this.sizer.setItemPercentage(item, beforePercentages[index]);
|
|
|
|
});
|
|
|
|
this.afterItems.forEach((item, index) => {
|
|
|
|
this.sizer.setItemPercentage(item, afterPercentages[index]);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
static _getPercentages(sizer, items) {
|
|
|
|
const percentages = items.map(i => sizer.getItemPercentage(i));
|
|
|
|
const setPercentages = percentages.filter(p => p !== null);
|
|
|
|
const unsetCount = percentages.length - setPercentages.length;
|
|
|
|
const setTotal = setPercentages.reduce((total, p) => total + p, 0);
|
|
|
|
const implicitPercentage = (1 - setTotal) / unsetCount;
|
|
|
|
return percentages.map(p => p === null ? implicitPercentage : p);
|
|
|
|
}
|
|
|
|
|
|
|
|
static setPercentage(el, percent) {
|
|
|
|
el.style.flexGrow = Math.round(percent * 1000);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
FixedDistributor,
|
|
|
|
CollapseDistributor,
|
|
|
|
PercentageDistributor,
|
|
|
|
};
|