2018-10-17 12:38:25 +03:00
|
|
|
/*
|
|
|
|
Copyright 2018 New Vector Ltd
|
2019-10-08 17:43:57 +03:00
|
|
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
2018-10-17 12:38:25 +03:00
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
limitations under the License.
|
|
|
|
*/
|
|
|
|
|
2018-10-16 16:16:10 +03:00
|
|
|
/*
|
|
|
|
classNames:
|
|
|
|
// class on resize-handle
|
|
|
|
handle: string
|
|
|
|
// class on resize-handle
|
|
|
|
reverse: string
|
|
|
|
// class on resize-handle
|
|
|
|
vertical: string
|
|
|
|
// class on container
|
|
|
|
resizing: string
|
|
|
|
*/
|
|
|
|
|
2018-12-20 01:51:19 +03:00
|
|
|
|
2019-01-14 22:24:54 +03:00
|
|
|
export default class Resizer {
|
2018-12-20 01:51:19 +03:00
|
|
|
// TODO move vertical/horizontal to config option/container class
|
|
|
|
// as it doesn't make sense to mix them within one container/Resizer
|
2019-01-14 22:24:54 +03:00
|
|
|
constructor(container, distributorCtor, config) {
|
2019-10-08 17:43:57 +03:00
|
|
|
if (!container) {
|
|
|
|
throw new Error("Resizer requires a non-null `container` arg");
|
|
|
|
}
|
2018-10-16 16:16:10 +03:00
|
|
|
this.container = container;
|
|
|
|
this.distributorCtor = distributorCtor;
|
2019-01-14 22:24:54 +03:00
|
|
|
this.config = config;
|
2018-10-16 16:16:10 +03:00
|
|
|
this.classNames = {
|
|
|
|
handle: "resizer-handle",
|
|
|
|
reverse: "resizer-reverse",
|
|
|
|
vertical: "resizer-vertical",
|
|
|
|
resizing: "resizer-resizing",
|
|
|
|
};
|
2018-10-19 16:15:49 +03:00
|
|
|
this._onMouseDown = this._onMouseDown.bind(this);
|
2018-10-16 16:16:10 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
setClassNames(classNames) {
|
|
|
|
this.classNames = classNames;
|
|
|
|
}
|
|
|
|
|
|
|
|
attach() {
|
2018-10-19 16:15:49 +03:00
|
|
|
this.container.addEventListener("mousedown", this._onMouseDown, false);
|
2018-10-16 16:16:10 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
detach() {
|
2018-10-19 16:15:49 +03:00
|
|
|
this.container.removeEventListener("mousedown", this._onMouseDown, false);
|
2018-10-16 16:16:10 +03:00
|
|
|
}
|
|
|
|
|
2018-10-17 14:45:56 +03:00
|
|
|
/**
|
|
|
|
Gives the distributor for a specific resize handle, as if you would have started
|
|
|
|
to drag that handle. Can be used to manipulate the size of an item programmatically.
|
|
|
|
@param {number} handleIndex the index of the resize handle in the container
|
|
|
|
@return {Distributor} a new distributor for the given handle
|
|
|
|
*/
|
2018-10-16 18:22:12 +03:00
|
|
|
forHandleAt(handleIndex) {
|
|
|
|
const handles = this._getResizeHandles();
|
|
|
|
const handle = handles[handleIndex];
|
2018-11-26 18:46:27 +03:00
|
|
|
if (handle) {
|
|
|
|
const {distributor} = this._createSizerAndDistributor(handle);
|
|
|
|
return distributor;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
forHandleWithId(id) {
|
|
|
|
const handles = this._getResizeHandles();
|
|
|
|
const handle = handles.find((h) => h.getAttribute("data-id") === id);
|
|
|
|
if (handle) {
|
|
|
|
const {distributor} = this._createSizerAndDistributor(handle);
|
|
|
|
return distributor;
|
|
|
|
}
|
2018-10-16 18:22:12 +03:00
|
|
|
}
|
|
|
|
|
2018-12-20 01:51:19 +03:00
|
|
|
isReverseResizeHandle(el) {
|
|
|
|
return el && el.classList.contains(this.classNames.reverse);
|
|
|
|
}
|
|
|
|
|
|
|
|
isResizeHandle(el) {
|
2018-10-16 16:16:10 +03:00
|
|
|
return el && el.classList.contains(this.classNames.handle);
|
|
|
|
}
|
|
|
|
|
|
|
|
_onMouseDown(event) {
|
2018-12-18 16:27:10 +03:00
|
|
|
// use closest in case the resize handle contains
|
|
|
|
// child dom nodes that can be the target
|
|
|
|
const resizeHandle = event.target && event.target.closest(`.${this.classNames.handle}`);
|
|
|
|
if (!resizeHandle || resizeHandle.parentElement !== this.container) {
|
2018-10-16 16:16:10 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
// prevent starting a drag operation
|
|
|
|
event.preventDefault();
|
2018-11-26 18:46:27 +03:00
|
|
|
|
2018-10-16 16:16:10 +03:00
|
|
|
// mark as currently resizing
|
|
|
|
if (this.classNames.resizing) {
|
|
|
|
this.container.classList.add(this.classNames.resizing);
|
|
|
|
}
|
|
|
|
|
2018-12-18 16:27:10 +03:00
|
|
|
const {sizer, distributor} = this._createSizerAndDistributor(resizeHandle);
|
2019-01-11 19:17:58 +03:00
|
|
|
distributor.start();
|
2018-10-16 16:16:10 +03:00
|
|
|
|
|
|
|
const onMouseMove = (event) => {
|
|
|
|
const offset = sizer.offsetFromEvent(event);
|
2018-11-26 18:42:58 +03:00
|
|
|
distributor.resizeFromContainerOffset(offset);
|
2018-10-16 16:16:10 +03:00
|
|
|
};
|
|
|
|
|
|
|
|
const body = document.body;
|
2019-01-11 20:20:34 +03:00
|
|
|
const finishResize = () => {
|
2018-10-16 16:16:10 +03:00
|
|
|
if (this.classNames.resizing) {
|
|
|
|
this.container.classList.remove(this.classNames.resizing);
|
|
|
|
}
|
2019-01-11 19:17:58 +03:00
|
|
|
distributor.finish();
|
2019-01-11 20:20:34 +03:00
|
|
|
body.removeEventListener("mouseup", finishResize, false);
|
|
|
|
document.removeEventListener("mouseleave", finishResize, false);
|
2018-10-16 16:16:10 +03:00
|
|
|
body.removeEventListener("mousemove", onMouseMove, false);
|
|
|
|
};
|
2019-01-11 20:20:34 +03:00
|
|
|
body.addEventListener("mouseup", finishResize, false);
|
|
|
|
document.addEventListener("mouseleave", finishResize, false);
|
2018-10-16 16:16:10 +03:00
|
|
|
body.addEventListener("mousemove", onMouseMove, false);
|
|
|
|
}
|
2018-10-16 17:25:00 +03:00
|
|
|
|
2018-10-16 18:22:12 +03:00
|
|
|
_createSizerAndDistributor(resizeHandle) {
|
|
|
|
const vertical = resizeHandle.classList.contains(this.classNames.vertical);
|
2018-12-20 01:51:19 +03:00
|
|
|
const reverse = this.isReverseResizeHandle(resizeHandle);
|
2019-01-14 22:24:54 +03:00
|
|
|
const Distributor = this.distributorCtor;
|
|
|
|
const sizer = Distributor.createSizer(this.container, vertical, reverse);
|
|
|
|
const item = Distributor.createItem(resizeHandle, this, sizer);
|
|
|
|
const distributor = new Distributor(item, this.config);
|
2018-10-16 18:22:12 +03:00
|
|
|
return {sizer, distributor};
|
|
|
|
}
|
|
|
|
|
|
|
|
_getResizeHandles() {
|
|
|
|
return Array.from(this.container.children).filter(el => {
|
2018-12-20 01:51:19 +03:00
|
|
|
return this.isResizeHandle(el);
|
2018-10-16 18:22:12 +03:00
|
|
|
});
|
|
|
|
}
|
2018-10-16 16:16:10 +03:00
|
|
|
}
|