dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-07-01 11:09:49 +02:00
Code Issues Projects Releases Wiki Activity

add resizer to grid view

Browse Source
This commit is contained in:
lxsang 2020-09-24 18:22:16 +02:00
parent 99a029bdd3
commit 45d425d5db
4 changed files with 103 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -194,7 +194,7 @@ release: main uglify
doc:
./node_modules/.bin/typedoc --mode file --excludeNotExported --hideGenerator --name "AntOS API" --out $(DOCDIR)
test:
test: build_javascripts
jest
clean:

4
src/core/tags/FileViewTag.ts
View File

@ -94,8 +94,8 @@ namespace OS {
this._onfileopen = this._onfileselect = (e) => {};
this._header = [
{ text: "__(File name)" },
{ text: "__(Type)", width: 150 },
{ text: "__(Size)", width: 70 },
{ text: "__(Type)" },
{ text: "__(Size)" },
];
}

36
src/core/tags/GridViewTag.ts
View File

@ -530,14 +530,32 @@ namespace OS {
return;
}
$(this.refs.header).empty();
let i = 0;
for (let item of v) {
const el = $(`<${this.headeritem}>`).appendTo(
const element = $(`<${this.headeritem}>`).appendTo(
this.refs.header
);
const element = el[0] as GridCellPrototype;
)[0] as GridCellPrototype;
element.uify(this.observable);
element.data = item;
item.domel = element;
i++;
if (i != v.length) {
const rz = $(`<afx-resizer>`).appendTo(
this.refs.header
)[0] as ResizerTag;
$(rz).css("width", "3px");
let next_item = undefined;
if (i < v.length) {
next_item = v[i];
}
rz.onelresize = (e) => {
item.width = e.data.w + 3;
if (next_item) {
delete next_item.width;
}
};
rz.uify(this.observable);
}
}
this.calibrate();
}
@ -843,11 +861,21 @@ namespace OS {
});
}
let template = "";
let template_header = "";
let i = 0;
for (let v of colssize) {
template += `${v}px `;
i++;
template_header += `${v}px `;
if (i < colssize.length) {
template_header += "3px ";
}
}
$(this.refs.grid).css("grid-template-columns", template);
$(this.refs.header).css("grid-template-columns", template);
$(this.refs.header).css(
"grid-template-columns",
template_header
);
}
/**

98
src/core/tags/ResizerTag.ts
View File

@ -30,6 +30,15 @@ namespace OS {
*/
private _resizable_el: any;
/**
* Reference to the resize event callback
*
* @private
* @type {TagEventCallback<any>}
* @memberof ResizerTag
*/
private _onresize: TagEventCallback<any>;
/**
* Reference to the parent tag of the current tag.
* The parent tag should be an instance of a [[TileLayoutTag]]
@ -66,7 +75,6 @@ namespace OS {
* @memberof ResizerTag
*/
protected init(): void {
this.dir = "hz";
this._resizable_el = undefined;
this._parent = $(this).parent().parent()[0];
this._minsize = 0;
@ -82,24 +90,64 @@ namespace OS {
protected reload(d?: any): void {}
/**
* Setter:
*
*
* Set resize direction, two possible values:
* - `hz` - horizontal direction, resize by width
* - `ve` - vertical direction, resize by height
*
*
* Getter:
*
*
* Get the resize direction
*
* @memberof ResizerTag
*/
set dir(v: string) {
let att: string;
$(this).attr("dir", v);
$(this).unbind("mousedown", null);
if (v === "hz") {
$(this).css("cursor", "col-resize");
$(this).addClass("horizontal");
if (this._resizable_el) {
att = $(this._resizable_el).attr("min-width");
if (att) {
this._minsize = parseInt(att);
}
}
} else if (v === "ve") {
$(this).css("cursor", "row-resize");
$(this).addClass("vertical");
if (this._resizable_el) {
att = $(this._resizable_el).attr("min-height");
if (att) {
this._minsize = parseInt(att);
}
}
}
if (this._minsize === 0) {
this._minsize = 10;
}
this.make_draggable();
}
get dir(): string {
return $(this).attr("dir");
}
/**
* Setter:
* - set the resize event callback
*
* Getter:
* - get the resize event callback
* @memberof GridViewTag
*/
set onelresize(v: TagEventCallback<any>) {
this._onresize = v;
}
get onelresize(): TagEventCallback<any> {
return this._onresize;
}
/**
* Mount the tag to the DOM tree
*
@ -107,7 +155,6 @@ namespace OS {
* @memberof ResizerTag
*/
protected mount(): void {
let att: string;
$(this).css(" display", "block");
const tagname = $(this._parent).prop("tagName");
this._resizable_el =
@ -116,31 +163,11 @@ namespace OS {
: undefined;
if (tagname === "AFX-HBOX") {
this.dir = "hz";
$(this).css("cursor", "col-resize");
$(this).addClass("horizontal");
if (this._resizable_el) {
att = $(this._resizable_el).attr("min-width");
if (att) {
this._minsize = parseInt(att);
}
}
} else if (tagname === "AFX-VBOX") {
this.dir = "ve";
$(this).css("cursor", "row-resize");
$(this).addClass("vertical");
if (this._resizable_el) {
att = $(this._resizable_el).attr("min-height");
if (att) {
this._minsize = parseInt(att);
}
}
} else {
this.dir = "none";
this.dir = "hz";
}
if (this._minsize === 0) {
this._minsize = 10;
}
this.make_draggable();
}
/**
@ -151,6 +178,9 @@ namespace OS {
*/
private make_draggable(): void {
$(this).css("user-select", "none");
if (!this.dir || this.dir == "none") {
return;
}
$(this).on("mousedown", (e) => {
e.preventDefault();
$(window).on("mousemove", (evt) => {
@ -191,10 +221,14 @@ namespace OS {
w = this._minsize;
}
$(this._resizable_el).attr("data-width", w.toString());
this.observable.trigger("resize", {
let evt = {
id: this.aid,
data: { w },
});
};
if (this.onelresize) {
this.onelresize(evt);
}
this.observable.trigger("resize", evt);
}
/**
@ -215,10 +249,14 @@ namespace OS {
h = this._minsize;
}
$(this._resizable_el).attr("data-height", h.toString());
return this.observable.trigger("resize", {
let evt = {
id: this.aid,
data: { h },
});
};
if (this.onelresize) {
this.onelresize(evt);
}
return this.observable.trigger("resize", evt);
}
/**