dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2024-12-26 09:28:21 +01:00
Code Issues 1 Actions 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: doc:
./node_modules/.bin/typedoc --mode file --excludeNotExported --hideGenerator --name "AntOS API" --out $(DOCDIR) ./node_modules/.bin/typedoc --mode file --excludeNotExported --hideGenerator --name "AntOS API" --out $(DOCDIR)
test: test: build_javascripts
jest jest
clean: clean:

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

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

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

@ -530,14 +530,32 @@ namespace OS {
return; return;
} }
$(this.refs.header).empty(); $(this.refs.header).empty();
let i = 0;
for (let item of v) { for (let item of v) {
const el = $(`<${this.headeritem}>`).appendTo( const element = $(`<${this.headeritem}>`).appendTo(
this.refs.header this.refs.header
); )[0] as GridCellPrototype;
const element = el[0] as GridCellPrototype;
element.uify(this.observable); element.uify(this.observable);
element.data = item; element.data = item;
item.domel = element; 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(); this.calibrate();
} }
@ -843,11 +861,21 @@ namespace OS {
}); });
} }
let template = ""; let template = "";
let template_header = "";
let i = 0;
for (let v of colssize) { for (let v of colssize) {
template += `${v}px `; 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.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; 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. * Reference to the parent tag of the current tag.
* The parent tag should be an instance of a [[TileLayoutTag]] * The parent tag should be an instance of a [[TileLayoutTag]]
@ -66,7 +75,6 @@ namespace OS {
* @memberof ResizerTag * @memberof ResizerTag
*/ */
protected init(): void { protected init(): void {
this.dir = "hz";
this._resizable_el = undefined; this._resizable_el = undefined;
this._parent = $(this).parent().parent()[0]; this._parent = $(this).parent().parent()[0];
this._minsize = 0; this._minsize = 0;
@ -82,24 +90,64 @@ namespace OS {
protected reload(d?: any): void {} protected reload(d?: any): void {}
/** /**
* Setter: * Setter:
* *
* Set resize direction, two possible values: * Set resize direction, two possible values:
* - `hz` - horizontal direction, resize by width * - `hz` - horizontal direction, resize by width
* - `ve` - vertical direction, resize by height * - `ve` - vertical direction, resize by height
* *
* Getter: * Getter:
* *
* Get the resize direction * Get the resize direction
* *
* @memberof ResizerTag * @memberof ResizerTag
*/ */
set dir(v: string) { set dir(v: string) {
let att: string;
$(this).attr("dir", v); $(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 { get dir(): string {
return $(this).attr("dir"); 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 * Mount the tag to the DOM tree
* *
@ -107,7 +155,6 @@ namespace OS {
* @memberof ResizerTag * @memberof ResizerTag
*/ */
protected mount(): void { protected mount(): void {
let att: string;
$(this).css(" display", "block"); $(this).css(" display", "block");
const tagname = $(this._parent).prop("tagName"); const tagname = $(this._parent).prop("tagName");
this._resizable_el = this._resizable_el =
@ -116,31 +163,11 @@ namespace OS {
: undefined; : undefined;
if (tagname === "AFX-HBOX") { if (tagname === "AFX-HBOX") {
this.dir = "hz"; 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") { } else if (tagname === "AFX-VBOX") {
this.dir = "ve"; 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 { } 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 { private make_draggable(): void {
$(this).css("user-select", "none"); $(this).css("user-select", "none");
if (!this.dir || this.dir == "none") {
return;
}
$(this).on("mousedown", (e) => { $(this).on("mousedown", (e) => {
e.preventDefault(); e.preventDefault();
$(window).on("mousemove", (evt) => { $(window).on("mousemove", (evt) => {
@ -191,10 +221,14 @@ namespace OS {
w = this._minsize; w = this._minsize;
} }
$(this._resizable_el).attr("data-width", w.toString()); $(this._resizable_el).attr("data-width", w.toString());
this.observable.trigger("resize", { let evt = {
id: this.aid, id: this.aid,
data: { w }, data: { w },
}); };
if (this.onelresize) {
this.onelresize(evt);
}
this.observable.trigger("resize", evt);
} }
/** /**
@ -215,10 +249,14 @@ namespace OS {
h = this._minsize; h = this._minsize;
} }
$(this._resizable_el).attr("data-height", h.toString()); $(this._resizable_el).attr("data-height", h.toString());
return this.observable.trigger("resize", { let evt = {
id: this.aid, id: this.aid,
data: { h }, data: { h },
}); };
if (this.onelresize) {
this.onelresize(evt);
}
return this.observable.trigger("resize", evt);
} }
/** /**