imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix resizer on left panel

Browse source
This commit is contained in:
Dariusz Niemczyk 2021-08-24 13:05:46 +02:00
parent 290ab894aa
commit a5c005756e
No known key found for this signature in database
GPG key ID: 3E8DC619E3C59A05
6 changed files with 47 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/resizer/resizer.ts
View file

@ -35,6 +35,7 @@ export interface IConfig {
onResizeStart?(): void;
onResizeStop?(): void;
onResized?(size: number, id: string, element: HTMLElement): void;
handler?: HTMLDivElement;
}
export default class Resizer<C extends IConfig = IConfig> {
@ -46,7 +47,7 @@ export default class Resizer<C extends IConfig = IConfig> {
public container: HTMLElement,
private readonly distributorCtor: {
new(item: ResizeItem): FixedDistributor<C, any>;
createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer): ResizeItem;
createItem(resizeHandle: HTMLDivElement, resizer: Resizer, sizer: Sizer, container: HTMLElement): ResizeItem;
createSizer(containerElement: HTMLElement, vertical: boolean, reverse: boolean): Sizer;
},
public readonly config?: C,
@ -68,12 +69,14 @@ export default class Resizer<C extends IConfig = IConfig> {
}
public attach() {
this.container.addEventListener("mousedown", this.onMouseDown, false);
const attachment = this?.config?.handler.parentElement ?? this.container;
attachment.addEventListener("mousedown", this.onMouseDown, false);
window.addEventListener("resize", this.onResize);
}
public detach() {
this.container.removeEventListener("mousedown", this.onMouseDown, false);
const attachment = this?.config?.handler.parentElement ?? this.container;
attachment.removeEventListener("mousedown", this.onMouseDown, false);
window.removeEventListener("resize", this.onResize);
}
@ -113,7 +116,8 @@ export default class Resizer<C extends IConfig = IConfig> {
// use closest in case the resize handle contains
// child dom nodes that can be the target
const resizeHandle = event.target && (<HTMLDivElement>event.target).closest(`.${this.classNames.handle}`);
if (!resizeHandle || resizeHandle.parentElement !== this.container) {
const hasHandler = this?.config?.handler;
if (!resizeHandle || (!hasHandler && resizeHandle.parentElement !== this.container)) {
return;
}
// prevent starting a drag operation
@ -175,12 +179,15 @@ export default class Resizer<C extends IConfig = IConfig> {
const reverse = this.isReverseResizeHandle(resizeHandle);
const Distributor = this.distributorCtor;
const sizer = Distributor.createSizer(this.container, vertical, reverse);
const item = Distributor.createItem(resizeHandle, this, sizer);
const item = Distributor.createItem(resizeHandle, this, sizer, this.container);
const distributor = new Distributor(item);
return { sizer, distributor };
}
private getResizeHandles() {
if (this?.config?.handler) {
return [this.config.handler];
}
if (!this.container.children) return [];
return Array.from(this.container.querySelectorAll(`.${this.classNames.handle}`)) as HTMLElement[];
}