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

fix safari compatibility

Browse Source
This commit is contained in:
Xuan Sang LE 2020-06-05 23:42:15 +02:00
parent f84da77825
commit 473d9c6575
6 changed files with 403 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,40 +11,121 @@ interface Array<T> {
namespace OS { namespace OS {
export namespace GUI { export namespace GUI {
export namespace tag { export namespace tag {
/**
*
*
* @export
* @class GridRowTag
* @extends {AFXTag}
*/
export class GridRowTag extends AFXTag { export class GridRowTag extends AFXTag {
data: GenericObject<any>[]; data: GenericObject<any>[];
/**
*Creates an instance of GridRowTag.
* @memberof GridRowTag
*/
constructor() { constructor() {
super(); super();
this.refs.yield = this; this.refs.yield = this;
} }
/**
*
*
* @protected
* @memberof GridRowTag
*/
protected mount(): void {} protected mount(): void {}
protected init(): void {this.data = [];}
/**
*
*
* @protected
* @memberof GridRowTag
*/
protected init(): void {
this.data = [];
}
/**
*
*
* @protected
* @returns {TagLayoutType[]}
* @memberof GridRowTag
*/
protected layout(): TagLayoutType[] { protected layout(): TagLayoutType[] {
return []; return [];
} }
/**
*
*
* @protected
* @memberof GridRowTag
*/
protected calibrate(): void {} protected calibrate(): void {}
/**
*
*
* @protected
* @param {*} [d]
* @memberof GridRowTag
*/
protected reload(d?: any): void {} protected reload(d?: any): void {}
} }
export type CellEventData = TagEventDataType<GridCellPrototype>; export type CellEventData = TagEventDataType<GridCellPrototype>;
/**
*
*
* @export
* @abstract
* @class GridCellPrototype
* @extends {AFXTag}
*/
export abstract class GridCellPrototype extends AFXTag { export abstract class GridCellPrototype extends AFXTag {
private _oncellselect: TagEventCallback<CellEventData>; private _oncellselect: TagEventCallback<CellEventData>;
private _oncelldbclick: TagEventCallback<CellEventData>; private _oncelldbclick: TagEventCallback<CellEventData>;
private _data: GenericObject<any>; private _data: GenericObject<any>;
/**
*Creates an instance of GridCellPrototype.
* @memberof GridCellPrototype
*/
constructor() { constructor() {
super(); super();
} }
/**
*
*
* @memberof GridCellPrototype
*/
set oncellselect(v: TagEventCallback<CellEventData>) { set oncellselect(v: TagEventCallback<CellEventData>) {
this._oncellselect = v; this._oncellselect = v;
} }
/**
*
*
* @memberof GridCellPrototype
*/
set oncelldbclick(v: TagEventCallback<CellEventData>) { set oncelldbclick(v: TagEventCallback<CellEventData>) {
this._oncelldbclick = v; this._oncelldbclick = v;
} }
/**
*
*
* @memberof GridCellPrototype
*/
set data(v: GenericObject<any>) { set data(v: GenericObject<any>) {
if(!v) return; if (!v) return;
this._data = v; this._data = v;
this.ondatachange(); this.ondatachange();
if (!v.selected) { if (!v.selected) {
@ -53,27 +134,57 @@ namespace OS {
this.selected = v.selected; this.selected = v.selected;
} }
/**
*
*
* @type {GenericObject<any>}
* @memberof GridCellPrototype
*/
get data(): GenericObject<any> { get data(): GenericObject<any> {
return this._data; return this._data;
} }
/**
*
*
* @memberof GridCellPrototype
*/
set selected(v: boolean) { set selected(v: boolean) {
this.attsw(v, "selected"); this.attsw(v, "selected");
if(this._data) if (this._data) this._data.selected = v;
this._data.selected = v;
if (!v) { if (!v) {
return; return;
} }
this.cellselect({ id: this.aid, data: this }, false); this.cellselect({ id: this.aid, data: this }, false);
} }
/**
*
*
* @type {boolean}
* @memberof GridCellPrototype
*/
get selected(): boolean { get selected(): boolean {
return this.hasattr("selected"); return this.hasattr("selected");
} }
/**
*
*
* @protected
* @param {*} d
* @memberof GridCellPrototype
*/
protected reload(d: any): void { protected reload(d: any): void {
this.data = this.data; this.data = this.data;
} }
/**
*
*
* @protected
* @memberof GridCellPrototype
*/
protected mount(): void { protected mount(): void {
$(this).attr("class", "afx-grid-cell"); $(this).attr("class", "afx-grid-cell");
this.oncelldbclick = this.oncellselect = ( this.oncelldbclick = this.oncellselect = (
@ -91,7 +202,19 @@ namespace OS {
}); });
} }
private cellselect(e: TagEventType<GridCellPrototype>, flag: boolean): void { /**
*
*
* @private
* @param {TagEventType<GridCellPrototype>} e
* @param {boolean} flag
* @returns {void}
* @memberof GridCellPrototype
*/
private cellselect(
e: TagEventType<GridCellPrototype>,
flag: boolean
): void {
const evt = { id: this.aid, data: { item: e.data } }; const evt = { id: this.aid, data: { item: e.data } };
if (!flag) { if (!flag) {
return this._oncellselect(evt); return this._oncellselect(evt);
@ -99,19 +222,64 @@ namespace OS {
return this._oncelldbclick(evt); return this._oncelldbclick(evt);
} }
/**
*
*
* @protected
* @abstract
* @memberof GridCellPrototype
*/
protected abstract ondatachange(): void; protected abstract ondatachange(): void;
} }
/**
*
*
* @export
* @class SimpleGridCellTag
* @extends {GridCellPrototype}
*/
export class SimpleGridCellTag extends GridCellPrototype { export class SimpleGridCellTag extends GridCellPrototype {
/**
*Creates an instance of SimpleGridCellTag.
* @memberof SimpleGridCellTag
*/
constructor() { constructor() {
super(); super();
} }
/**
*
*
* @protected
* @memberof SimpleGridCellTag
*/
protected ondatachange(): void { protected ondatachange(): void {
(this.refs.cell as LabelTag).set(this.data); (this.refs.cell as LabelTag).set(this.data);
} }
/**
*
*
* @protected
* @memberof SimpleGridCellTag
*/
protected init(): void {} protected init(): void {}
/**
*
*
* @protected
* @memberof SimpleGridCellTag
*/
protected calibrate(): void {} protected calibrate(): void {}
/**
*
*
* @returns
* @memberof SimpleGridCellTag
*/
layout() { layout() {
return [ return [
{ {
@ -122,6 +290,13 @@ namespace OS {
} }
} }
/**
*
*
* @export
* @class GridViewTag
* @extends {AFXTag}
*/
export class GridViewTag extends AFXTag { export class GridViewTag extends AFXTag {
private _header: GenericObject<any>[]; private _header: GenericObject<any>[];
private _rows: GenericObject<any>[][]; private _rows: GenericObject<any>[][];
@ -131,9 +306,21 @@ namespace OS {
private _oncellselect: TagEventCallback<CellEventData>; private _oncellselect: TagEventCallback<CellEventData>;
private _onrowselect: TagEventCallback<CellEventData>; private _onrowselect: TagEventCallback<CellEventData>;
private _oncelldbclick: TagEventCallback<CellEventData>; private _oncelldbclick: TagEventCallback<CellEventData>;
/**
*Creates an instance of GridViewTag.
* @memberof GridViewTag
*/
constructor() { constructor() {
super(); super();
} }
/**
*
*
* @protected
* @memberof GridViewTag
*/
protected init(): void { protected init(): void {
this._header = []; this._header = [];
this.headeritem = "afx-grid-cell"; this.headeritem = "afx-grid-cell";
@ -146,34 +333,96 @@ namespace OS {
e: TagEventType<CellEventData> e: TagEventType<CellEventData>
): void => {}; ): void => {};
} }
/**
*
*
* @protected
* @param {*} [d]
* @memberof GridViewTag
*/
protected reload(d?: any): void {} protected reload(d?: any): void {}
/**
*
*
* @memberof GridViewTag
*/
set oncellselect(v: TagEventCallback<CellEventData>) { set oncellselect(v: TagEventCallback<CellEventData>) {
this._oncellselect = v; this._oncellselect = v;
} }
/**
*
*
* @memberof GridViewTag
*/
set onrowselect(v: TagEventCallback<CellEventData>) { set onrowselect(v: TagEventCallback<CellEventData>) {
this._onrowselect = v; this._onrowselect = v;
} }
/**
*
*
* @memberof GridViewTag
*/
set oncelldbclick(v: TagEventCallback<CellEventData>) { set oncelldbclick(v: TagEventCallback<CellEventData>) {
this._oncelldbclick = v; this._oncelldbclick = v;
} }
/**
*
*
* @memberof GridViewTag
*/
set headeritem(v: string) { set headeritem(v: string) {
$(this).attr("headeritem", v); $(this).attr("headeritem", v);
} }
/**
*
*
* @type {string}
* @memberof GridViewTag
*/
get headeritem(): string { get headeritem(): string {
return $(this).attr("headeritem"); return $(this).attr("headeritem");
} }
/**
*
*
* @memberof GridViewTag
*/
set cellitem(v: string) { set cellitem(v: string) {
$(this).attr("cellitem", v); $(this).attr("cellitem", v);
} }
/**
*
*
* @type {string}
* @memberof GridViewTag
*/
get cellitem(): string { get cellitem(): string {
return $(this).attr("cellitem"); return $(this).attr("cellitem");
} }
/**
*
*
* @type {GenericObject<any>[]}
* @memberof GridViewTag
*/
get header(): GenericObject<any>[] { get header(): GenericObject<any>[] {
return this._header; return this._header;
} }
/**
*
*
* @memberof GridViewTag
*/
set header(v: GenericObject<any>[]) { set header(v: GenericObject<any>[]) {
this._header = v; this._header = v;
if (!v || v.length === 0) { if (!v || v.length === 0) {
@ -192,29 +441,87 @@ namespace OS {
} }
this.calibrate(); this.calibrate();
} }
/**
*
*
* @readonly
* @type {GridRowTag[]}
* @memberof GridViewTag
*/
get selectedRows(): GridRowTag[] { get selectedRows(): GridRowTag[] {
return this._selectedRows; return this._selectedRows;
} }
/**
*
*
* @readonly
* @type {GridRowTag}
* @memberof GridViewTag
*/
get selectedRow(): GridRowTag { get selectedRow(): GridRowTag {
return this._selectedRow; return this._selectedRow;
} }
/**
*
*
* @readonly
* @type {GridCellPrototype}
* @memberof GridViewTag
*/
get selectedCell(): GridCellPrototype { get selectedCell(): GridCellPrototype {
return this._selectedCell; return this._selectedCell;
} }
/**
*
*
* @memberof GridViewTag
*/
set rows(rows: GenericObject<any>[][]) { set rows(rows: GenericObject<any>[][]) {
$(this.refs.grid).empty(); $(this.refs.grid).empty();
this._rows = rows; this._rows = rows;
rows.map((row) => this.push(row, false)); rows.map((row) => this.push(row, false));
} }
/**
*
*
* @type {GenericObject<any>[][]}
* @memberof GridViewTag
*/
get rows(): GenericObject<any>[][] { get rows(): GenericObject<any>[][] {
return this._rows; return this._rows;
} }
/**
*
*
* @memberof GridViewTag
*/
set multiselect(v: boolean) { set multiselect(v: boolean) {
this.attsw(v, "multiselect"); this.attsw(v, "multiselect");
} }
/**
*
*
* @type {boolean}
* @memberof GridViewTag
*/
get multiselect(): boolean { get multiselect(): boolean {
return this.hasattr("multiselect"); return this.hasattr("multiselect");
} }
/**
*
*
* @param {GridRowTag} row
* @returns {void}
* @memberof GridViewTag
*/
delete(row: GridRowTag): void { delete(row: GridRowTag): void {
if (!row) { if (!row) {
return; return;
@ -238,26 +545,30 @@ namespace OS {
$(row).remove(); $(row).remove();
} }
/**
*
*
* @param {GenericObject<any>[]} row
* @param {boolean} flag
* @memberof GridViewTag
*/
push(row: GenericObject<any>[], flag: boolean): void { push(row: GenericObject<any>[], flag: boolean): void {
const rowel = $("<afx-grid-row>").css( const rowel = $("<afx-grid-row>").css(
"display", "display",
"contents" "contents"
); );
if (flag) { if (flag) {
$(this.refs.grid).prepend(rowel[0]); $(this.refs.grid).prepend(rowel[0]);
if(!this.rows.includes(row)) if (!this.rows.includes(row)) {
{
this.rows.unshift(row); this.rows.unshift(row);
} }
} else { } else {
rowel.appendTo(this.refs.grid); rowel.appendTo(this.refs.grid);
if(!this.rows.includes(row)) if (!this.rows.includes(row)) {
{
this.rows.push(row); this.rows.push(row);
} }
} }
const el = rowel[0] as GridRowTag; const el = rowel[0] as GridRowTag;
rowel[0].uify(this.observable); rowel[0].uify(this.observable);
el.data = row; el.data = row;
@ -278,11 +589,28 @@ namespace OS {
} }
} }
/**
*
*
* @param {GenericObject<any>[]} row
* @memberof GridViewTag
*/
unshift(row: GenericObject<any>[]): void { unshift(row: GenericObject<any>[]): void {
this.push(row, true); this.push(row, true);
} }
cellselect(e: TagEventType<CellEventData>, flag: boolean): void { /**
*
*
* @param {TagEventType<CellEventData>} e
* @param {boolean} flag
* @returns {void}
* @memberof GridViewTag
*/
cellselect(
e: TagEventType<CellEventData>,
flag: boolean
): void {
e.id = this.aid; e.id = this.aid;
// return if e.data.item is selectedCell and not flag // return if e.data.item is selectedCell and not flag
if (this.selectedCell) { if (this.selectedCell) {
@ -300,6 +628,13 @@ namespace OS {
} }
} }
/**
*
*
* @param {TagEventType<CellEventData>} e
* @returns {void}
* @memberof GridViewTag
*/
rowselect(e: TagEventType<CellEventData>): void { rowselect(e: TagEventType<CellEventData>): void {
if (!e.data.item) { if (!e.data.item) {
return; return;
@ -311,7 +646,9 @@ namespace OS {
items: [], items: [],
}, },
}; };
const row = $(e.data.item).parent()[0] as any as GridRowTag; const row = ($(
e.data.item
).parent()[0] as any) as GridRowTag;
if (this.multiselect) { if (this.multiselect) {
if (this.selectedRows.includes(row)) { if (this.selectedRows.includes(row)) {
this.selectedRows.splice( this.selectedRows.splice(
@ -342,10 +679,24 @@ namespace OS {
return this.observable.trigger("rowselect", evt); return this.observable.trigger("rowselect", evt);
} }
/**
*
*
* @private
* @returns {boolean}
* @memberof GridViewTag
*/
private has_header(): boolean { private has_header(): boolean {
const h = this._header; const h = this._header;
return h && h.length > 0; return h && h.length > 0;
} }
/**
*
*
* @protected
* @memberof GridViewTag
*/
protected calibrate(): void { protected calibrate(): void {
this.calibrate_header(); this.calibrate_header();
if (this.has_header()) { if (this.has_header()) {
@ -363,6 +714,13 @@ namespace OS {
} }
} }
/**
*
*
* @private
* @returns {void}
* @memberof GridViewTag
*/
private calibrate_header(): void { private calibrate_header(): void {
if (!this.has_header()) { if (!this.has_header()) {
return; return;
@ -397,6 +755,13 @@ namespace OS {
$(this.refs.header).css("grid-template-columns", template); $(this.refs.header).css("grid-template-columns", template);
} }
/**
*
*
* @protected
* @returns {void}
* @memberof GridViewTag
*/
protected mount(): void { protected mount(): void {
$(this).css("overflow", "hidden"); $(this).css("overflow", "hidden");
@ -410,6 +775,13 @@ namespace OS {
return this.calibrate(); return this.calibrate();
} }
/**
*
*
* @protected
* @returns {TagLayoutType[]}
* @memberof GridViewTag
*/
protected layout(): TagLayoutType[] { protected layout(): TagLayoutType[] {
return [ return [
{ el: "div", ref: "header", class: "grid_row_header" }, { el: "div", ref: "header", class: "grid_row_header" },

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

@ -64,7 +64,7 @@ namespace OS {
let ocwidth = 0; let ocwidth = 0;
const avaiheight = $(this).height(); const avaiheight = $(this).height();
const avaiWidth = $(this).width(); const avaiWidth = $(this).width();
$(this.refs.yield).css("height", `${avaiheight}px`); //$(this.refs.yield).css("height", `${avaiheight}px`);
$(this.refs.yield) $(this.refs.yield)
.children() .children()
.each(function (e) { .each(function (e) {
@ -105,7 +105,7 @@ namespace OS {
let ocheight = 0; let ocheight = 0;
const avaiheight = $(this).height(); const avaiheight = $(this).height();
const avaiwidth = $(this).width(); const avaiwidth = $(this).width();
$(this.refs.yield).css("height", `${avaiheight}px`); //$(this.refs.yield).css("height", `${avaiheight}px`);
$(this.refs.yield) $(this.refs.yield)
.children() .children()
.each(function (e) { .each(function (e) {

2
src/core/tags/WindowTag.ts
View File

@ -189,6 +189,7 @@ namespace OS {
this._width = o.w; this._width = o.w;
this._height = o.h; this._height = o.h;
$(this).css("width", `${o.w}px`).css("height", `${o.h}px`); $(this).css("width", `${o.w}px`).css("height", `${o.h}px`);
$(this.refs.winwrapper).css("height", `${o.h}px`);
this.observable.trigger("resize", { this.observable.trigger("resize", {
id: this.aid, id: this.aid,
data: o, data: o,
@ -302,6 +303,7 @@ namespace OS {
{ {
el: "div", el: "div",
class: "afx-window-wrapper", class: "afx-window-wrapper",
ref: "winwrapper",
children: [ children: [
{ {
el: "ul", el: "ul",

1
src/packages/CodePad/assets/scheme.html
View File

@ -13,6 +13,7 @@
</afx-vbox> </afx-vbox>
</afx-hbox> </afx-hbox>
<div data-height="20" data-id="statctn"> <div data-height="20" data-id="statctn">
<afx-label text=" " ></afx-label>
<afx-label data-id="langstat" ></afx-label> <afx-label data-id="langstat" ></afx-label>
<afx-label data-id="editorstat" ></afx-label> <afx-label data-id="editorstat" ></afx-label>
</div> </div>

7
src/themes/antos_dark/antos.css
View File

@ -74,4 +74,11 @@ textarea {
outline: none; outline: none;
border: 1px solid #262626; border: 1px solid #262626;
box-sizing: border-box; box-sizing: border-box;
}
a:link,
a:visited,
a:hover
{
color:#df3154;
} }

4
src/themes/system/afx-grid-view.css
View File

@ -10,3 +10,7 @@ afx-grid-view .grid_row_header afx-grid-cell{
cursor:default; cursor:default;
font-weight: bold; font-weight: bold;
} }
afx-grid-view {
display: block;
}