dany/antos-frontend
1
0
Fork 0
mirror of https://github.com/lxsang/antos-frontend.git synced 2025-07-19 15:29:51 +02:00
Code Issues 1 Actions Projects Releases Wiki Activity

Improve some tags + add features to codepad

Browse Source 
- Improve Resizer + TabContainer tag
- Add bottom bar to the CodePad editor
This commit is contained in:
lxsang
2020-12-16 00:57:29 +01:00
parent 9d5a0b404c
commit 6c935e88ee
8 changed files with 422 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -87,7 +87,7 @@ namespace OS {
* @param {*} [d]
* @memberof ResizerTag
*/
protected reload(d?: any): void {}
protected reload(d?: any): void { }
/**
* Setter:
*
@ -133,6 +133,23 @@ namespace OS {
return $(this).attr("dir");
}
/**
* Getter : Check whether the resizer should attach to its next or previous element
*
* Setter: if `v=true` select next element as attached element of the resizer, otherwise
* select the previous element
* @readonly
* @type {boolean}
* @memberof ResizerTag
*/
get attachnext(): boolean {
return this.hasattr("attachnext");
}
set attachnext(v: boolean) {
this.attsw(v, "attachnext");
}
/**
* Setter:
* - set the resize event callback
@ -158,10 +175,19 @@ namespace OS {
protected mount(): void {
$(this).css(" display", "block");
const tagname = $(this._parent).prop("tagName");
this._resizable_el =
$(this).prev().length === 1
? $(this).prev()[0]
: undefined;
if (this.attachnext) {
this._resizable_el =
$(this).next().length === 1
? $(this).next()[0]
: undefined;
}
else {
this._resizable_el =
$(this).prev().length === 1
? $(this).prev()[0]
: undefined;
}
if (tagname === "AFX-HBOX") {
this.dir = "hz";
} else if (tagname === "AFX-VBOX") {
@ -217,7 +243,13 @@ namespace OS {
return;
}
const offset = $(this._resizable_el).offset();
let w = Math.round(e.clientX - offset.left);
let w = 0;
if (this.attachnext) {
w = Math.round(offset.left + $(this._resizable_el).width() - e.clientX);
}
else {
w = Math.round(e.clientX - offset.left);
}
if (w < this._minsize) {
w = this._minsize;
}
@ -245,7 +277,13 @@ namespace OS {
return;
}
const offset = $(this._resizable_el).offset();
let h = Math.round(e.clientY - offset.top);
let h = 0;
if (this.attachnext) {
h = Math.round(offset.top + $(this._resizable_el).height() - e.clientY);
}
else {
h = Math.round(e.clientY - offset.top);
}
if (h < this._minsize) {
h = this._minsize;
}

57
src/core/tags/TabContainerTag.ts
View File

@ -57,7 +57,7 @@ namespace OS {
*/
constructor() {
super();
this._ontabselect = (e) => {};
this._ontabselect = (e) => { };
}
/**
@ -77,7 +77,7 @@ namespace OS {
* @param {*} [d]
* @memberof TabContainerTag
*/
protected reload(d?: any): void {}
protected reload(d?: any): void { }
/**
* Set the tab select event handle
@ -166,6 +166,50 @@ namespace OS {
(this.refs.wrapper as TileLayoutTag).calibrate();
}
/**
* Add a new tab with container to the container
*
* item should be in the following format:
*
* ```ts
* {
* text: string,
* icon?: string,
* iconclass?: string,
* container: HTMLElement
* }
* ```
*
* @param {GenericObject<any>} item tab descriptor
* @param {boolean} insert insert the tab content to the container ?
* @memberof TabContainerTag
*/
public addTab(item: GenericObject<any>, insert: boolean): void {
if (insert) {
$(this.refs.yield).append(item.container);
}
$(item.container)
.css("width", "100%")
.css("height", "100%")
.hide();
const el = (this.refs.bar as TabBarTag).push(
item
);
el.selected = true;
}
/**
* Remove a tab from the container
*
* @param {ListViewItemTag} tab the tab item to be removed
* @memberof TabContainerTag
*/
public removeTab(tab: ListViewItemTag): void {
if (tab.data.container) {
$(tab.data.container).remove();
}
(this.refs.bar as TabBarTag).delete(tab);
}
/**
* Mount the tag and bind basic events
*
@ -194,14 +238,7 @@ namespace OS {
item.iconclass = $(e).attr("iconclass");
}
item.container = e;
$(e)
.css("width", "100%")
.css("height", "100%")
.hide();
const el = (this.refs.bar as TabBarTag).push(
item
);
el.selected = true;
this.addTab(item, false);
});
});