OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

support programmatic access to a distributor (to set size from storage)

pull/21833/head
Bruno Windels 2018-10-16 17:22:12 +02:00
parent 650e19ff77
commit bb184a4ae0
2 changed files with 35 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/resizer/distributors.js
View File

@ -11,7 +11,8 @@ class FixedDistributor {
return itemSize;
}
finish(_offset) {
sizeFromOffset(offset) {
return offset - this.beforeOffset;
}
}
@ -24,7 +25,7 @@ class CollapseDistributor extends FixedDistributor {
}
resize(offset) {
let newSize = offset - this.sizer.getItemOffset(this.item);
let newSize = this.sizeFromOffset(offset);
if (newSize < this.toggleSize) {
this.item.classList.add("collapsed");
if (this.onCollapsed) {
@ -37,7 +38,7 @@ class CollapseDistributor extends FixedDistributor {
this.onCollapsed(false, this.item);
}
}
super.resize(newSize);
super.resize(offset);
}
}
@ -75,10 +76,6 @@ class PercentageDistributor {
});
}
finish(_offset) {
}
static _getPercentages(sizer, items) {
const percentages = items.map(i => sizer.getItemPercentage(i));
const setPercentages = percentages.filter(p => p !== null);

47
src/resizer/resizer.js
View File

@ -39,6 +39,13 @@ export class Resizer {
this.container.removeEventListener("mousedown", this.mouseDownHandler, false);
}
forHandleAt(handleIndex) {
const handles = this._getResizeHandles();
const handle = handles[handleIndex];
const {distributor} = this._createSizerAndDistributor(handle);
return distributor;
}
_isResizeHandle(el) {
return el && el.classList.contains(this.classNames.handle);
}
@ -55,20 +62,7 @@ export class Resizer {
this.container.classList.add(this.classNames.resizing);
}
const resizeHandle = event.target;
const vertical = resizeHandle.classList.contains(this.classNames.vertical);
const reverse = resizeHandle.classList.contains(this.classNames.reverse);
const sizer = new this.sizerCtor(this.container, vertical, reverse);
const items = this._getResizableItems();
const prevItem = resizeHandle.previousElementSibling;
// 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(
sizer, item, this.distributorCfg,
items, this.container);
const {sizer, distributor} = this._createSizerAndDistributor(target);
const onMouseMove = (event) => {
const offset = sizer.offsetFromEvent(event);
@ -80,8 +74,6 @@ export class Resizer {
if (this.classNames.resizing) {
this.container.classList.remove(this.classNames.resizing);
}
const offset = sizer.offsetFromEvent(event);
distributor.finish(offset);
body.removeEventListener("mouseup", onMouseUp, false);
body.removeEventListener("mousemove", onMouseMove, false);
};
@ -89,6 +81,23 @@ export class Resizer {
body.addEventListener("mousemove", onMouseMove, false);
}
_createSizerAndDistributor(resizeHandle) {
const vertical = resizeHandle.classList.contains(this.classNames.vertical);
const reverse = resizeHandle.classList.contains(this.classNames.reverse);
const sizer = new this.sizerCtor(this.container, vertical, reverse);
const items = this._getResizableItems();
const prevItem = resizeHandle.previousElementSibling;
// if reverse, resize the item after the handle instead of before, so + 1
const itemIndex = items.indexOf(prevItem) + (reverse ? 1 : 0);
const item = items[itemIndex];
const distributor = new this.distributorCtor(
sizer, item, this.distributorCfg,
items, this.container);
return {sizer, distributor};
}
_getResizableItems() {
return Array.from(this.container.children).filter(el => {
return !this._isResizeHandle(el) && (
@ -96,4 +105,10 @@ export class Resizer {
this._isResizeHandle(el.nextElementSibling));
});
}
_getResizeHandles() {
return Array.from(this.container.children).filter(el => {
return this._isResizeHandle(el);
});
}
}