From 473d9c6575de8431a7b91db78ae32e559bb745aa Mon Sep 17 00:00:00 2001 From: Xuan Sang LE Date: Fri, 5 Jun 2020 23:42:15 +0200 Subject: [PATCH] fix safari compatibility --- src/core/tags/GridViewTag.ts | 402 +++++++++++++++++++++++- src/core/tags/TileLayoutTags.ts | 4 +- src/core/tags/WindowTag.ts | 2 + src/packages/CodePad/assets/scheme.html | 1 + src/themes/antos_dark/antos.css | 7 + src/themes/system/afx-grid-view.css | 4 + 6 files changed, 403 insertions(+), 17 deletions(-) diff --git a/src/core/tags/GridViewTag.ts b/src/core/tags/GridViewTag.ts index fb44934..a4bee39 100644 --- a/src/core/tags/GridViewTag.ts +++ b/src/core/tags/GridViewTag.ts @@ -11,40 +11,121 @@ interface Array { namespace OS { export namespace GUI { export namespace tag { + /** + * + * + * @export + * @class GridRowTag + * @extends {AFXTag} + */ export class GridRowTag extends AFXTag { data: GenericObject[]; + + /** + *Creates an instance of GridRowTag. + * @memberof GridRowTag + */ constructor() { super(); - + this.refs.yield = this; } + /** + * + * + * @protected + * @memberof GridRowTag + */ protected mount(): void {} - protected init(): void {this.data = [];} + + /** + * + * + * @protected + * @memberof GridRowTag + */ + protected init(): void { + this.data = []; + } + + /** + * + * + * @protected + * @returns {TagLayoutType[]} + * @memberof GridRowTag + */ protected layout(): TagLayoutType[] { return []; } + + /** + * + * + * @protected + * @memberof GridRowTag + */ protected calibrate(): void {} + + /** + * + * + * @protected + * @param {*} [d] + * @memberof GridRowTag + */ protected reload(d?: any): void {} } + export type CellEventData = TagEventDataType; + + /** + * + * + * @export + * @abstract + * @class GridCellPrototype + * @extends {AFXTag} + */ export abstract class GridCellPrototype extends AFXTag { private _oncellselect: TagEventCallback; private _oncelldbclick: TagEventCallback; private _data: GenericObject; + + /** + *Creates an instance of GridCellPrototype. + * @memberof GridCellPrototype + */ constructor() { super(); - } + /** + * + * + * @memberof GridCellPrototype + */ set oncellselect(v: TagEventCallback) { this._oncellselect = v; } + + /** + * + * + * @memberof GridCellPrototype + */ set oncelldbclick(v: TagEventCallback) { this._oncelldbclick = v; } + + /** + * + * + * @memberof GridCellPrototype + */ set data(v: GenericObject) { - if(!v) return; + if (!v) return; this._data = v; this.ondatachange(); if (!v.selected) { @@ -53,27 +134,57 @@ namespace OS { this.selected = v.selected; } + /** + * + * + * @type {GenericObject} + * @memberof GridCellPrototype + */ get data(): GenericObject { return this._data; } + /** + * + * + * @memberof GridCellPrototype + */ set selected(v: boolean) { this.attsw(v, "selected"); - if(this._data) - this._data.selected = v; + if (this._data) this._data.selected = v; if (!v) { return; } this.cellselect({ id: this.aid, data: this }, false); } + /** + * + * + * @type {boolean} + * @memberof GridCellPrototype + */ get selected(): boolean { return this.hasattr("selected"); } + + /** + * + * + * @protected + * @param {*} d + * @memberof GridCellPrototype + */ protected reload(d: any): void { this.data = this.data; } + /** + * + * + * @protected + * @memberof GridCellPrototype + */ protected mount(): void { $(this).attr("class", "afx-grid-cell"); this.oncelldbclick = this.oncellselect = ( @@ -91,7 +202,19 @@ namespace OS { }); } - private cellselect(e: TagEventType, flag: boolean): void { + /** + * + * + * @private + * @param {TagEventType} e + * @param {boolean} flag + * @returns {void} + * @memberof GridCellPrototype + */ + private cellselect( + e: TagEventType, + flag: boolean + ): void { const evt = { id: this.aid, data: { item: e.data } }; if (!flag) { return this._oncellselect(evt); @@ -99,19 +222,64 @@ namespace OS { return this._oncelldbclick(evt); } + /** + * + * + * @protected + * @abstract + * @memberof GridCellPrototype + */ protected abstract ondatachange(): void; } + /** + * + * + * @export + * @class SimpleGridCellTag + * @extends {GridCellPrototype} + */ export class SimpleGridCellTag extends GridCellPrototype { + /** + *Creates an instance of SimpleGridCellTag. + * @memberof SimpleGridCellTag + */ constructor() { super(); } + /** + * + * + * @protected + * @memberof SimpleGridCellTag + */ protected ondatachange(): void { (this.refs.cell as LabelTag).set(this.data); } + + /** + * + * + * @protected + * @memberof SimpleGridCellTag + */ protected init(): void {} + + /** + * + * + * @protected + * @memberof SimpleGridCellTag + */ protected calibrate(): void {} + + /** + * + * + * @returns + * @memberof SimpleGridCellTag + */ layout() { return [ { @@ -122,6 +290,13 @@ namespace OS { } } + /** + * + * + * @export + * @class GridViewTag + * @extends {AFXTag} + */ export class GridViewTag extends AFXTag { private _header: GenericObject[]; private _rows: GenericObject[][]; @@ -131,9 +306,21 @@ namespace OS { private _oncellselect: TagEventCallback; private _onrowselect: TagEventCallback; private _oncelldbclick: TagEventCallback; + + /** + *Creates an instance of GridViewTag. + * @memberof GridViewTag + */ constructor() { super(); } + + /** + * + * + * @protected + * @memberof GridViewTag + */ protected init(): void { this._header = []; this.headeritem = "afx-grid-cell"; @@ -146,34 +333,96 @@ namespace OS { e: TagEventType ): void => {}; } + + /** + * + * + * @protected + * @param {*} [d] + * @memberof GridViewTag + */ protected reload(d?: any): void {} + + /** + * + * + * @memberof GridViewTag + */ set oncellselect(v: TagEventCallback) { this._oncellselect = v; } + + /** + * + * + * @memberof GridViewTag + */ set onrowselect(v: TagEventCallback) { this._onrowselect = v; } + + /** + * + * + * @memberof GridViewTag + */ set oncelldbclick(v: TagEventCallback) { this._oncelldbclick = v; } + + /** + * + * + * @memberof GridViewTag + */ set headeritem(v: string) { $(this).attr("headeritem", v); } + /** + * + * + * @type {string} + * @memberof GridViewTag + */ get headeritem(): string { return $(this).attr("headeritem"); } + /** + * + * + * @memberof GridViewTag + */ set cellitem(v: string) { $(this).attr("cellitem", v); } + /** + * + * + * @type {string} + * @memberof GridViewTag + */ get cellitem(): string { return $(this).attr("cellitem"); } + + /** + * + * + * @type {GenericObject[]} + * @memberof GridViewTag + */ get header(): GenericObject[] { return this._header; } + + /** + * + * + * @memberof GridViewTag + */ set header(v: GenericObject[]) { this._header = v; if (!v || v.length === 0) { @@ -192,29 +441,87 @@ namespace OS { } this.calibrate(); } + + /** + * + * + * @readonly + * @type {GridRowTag[]} + * @memberof GridViewTag + */ get selectedRows(): GridRowTag[] { return this._selectedRows; } + + /** + * + * + * @readonly + * @type {GridRowTag} + * @memberof GridViewTag + */ get selectedRow(): GridRowTag { return this._selectedRow; } + + /** + * + * + * @readonly + * @type {GridCellPrototype} + * @memberof GridViewTag + */ get selectedCell(): GridCellPrototype { return this._selectedCell; } + + /** + * + * + * @memberof GridViewTag + */ set rows(rows: GenericObject[][]) { $(this.refs.grid).empty(); this._rows = rows; rows.map((row) => this.push(row, false)); } + + /** + * + * + * @type {GenericObject[][]} + * @memberof GridViewTag + */ get rows(): GenericObject[][] { return this._rows; } + + /** + * + * + * @memberof GridViewTag + */ set multiselect(v: boolean) { this.attsw(v, "multiselect"); } + + /** + * + * + * @type {boolean} + * @memberof GridViewTag + */ get multiselect(): boolean { return this.hasattr("multiselect"); } + + /** + * + * + * @param {GridRowTag} row + * @returns {void} + * @memberof GridViewTag + */ delete(row: GridRowTag): void { if (!row) { return; @@ -238,26 +545,30 @@ namespace OS { $(row).remove(); } + /** + * + * + * @param {GenericObject[]} row + * @param {boolean} flag + * @memberof GridViewTag + */ push(row: GenericObject[], flag: boolean): void { - const rowel = $("").css( "display", "contents" ); if (flag) { $(this.refs.grid).prepend(rowel[0]); - if(!this.rows.includes(row)) - { + if (!this.rows.includes(row)) { this.rows.unshift(row); } } else { rowel.appendTo(this.refs.grid); - if(!this.rows.includes(row)) - { + if (!this.rows.includes(row)) { this.rows.push(row); } } - + const el = rowel[0] as GridRowTag; rowel[0].uify(this.observable); el.data = row; @@ -278,11 +589,28 @@ namespace OS { } } + /** + * + * + * @param {GenericObject[]} row + * @memberof GridViewTag + */ unshift(row: GenericObject[]): void { this.push(row, true); } - cellselect(e: TagEventType, flag: boolean): void { + /** + * + * + * @param {TagEventType} e + * @param {boolean} flag + * @returns {void} + * @memberof GridViewTag + */ + cellselect( + e: TagEventType, + flag: boolean + ): void { e.id = this.aid; // return if e.data.item is selectedCell and not flag if (this.selectedCell) { @@ -300,6 +628,13 @@ namespace OS { } } + /** + * + * + * @param {TagEventType} e + * @returns {void} + * @memberof GridViewTag + */ rowselect(e: TagEventType): void { if (!e.data.item) { return; @@ -311,7 +646,9 @@ namespace OS { 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.selectedRows.includes(row)) { this.selectedRows.splice( @@ -342,10 +679,24 @@ namespace OS { return this.observable.trigger("rowselect", evt); } + /** + * + * + * @private + * @returns {boolean} + * @memberof GridViewTag + */ private has_header(): boolean { const h = this._header; return h && h.length > 0; } + + /** + * + * + * @protected + * @memberof GridViewTag + */ protected calibrate(): void { this.calibrate_header(); if (this.has_header()) { @@ -363,6 +714,13 @@ namespace OS { } } + /** + * + * + * @private + * @returns {void} + * @memberof GridViewTag + */ private calibrate_header(): void { if (!this.has_header()) { return; @@ -397,6 +755,13 @@ namespace OS { $(this.refs.header).css("grid-template-columns", template); } + /** + * + * + * @protected + * @returns {void} + * @memberof GridViewTag + */ protected mount(): void { $(this).css("overflow", "hidden"); @@ -410,6 +775,13 @@ namespace OS { return this.calibrate(); } + /** + * + * + * @protected + * @returns {TagLayoutType[]} + * @memberof GridViewTag + */ protected layout(): TagLayoutType[] { return [ { el: "div", ref: "header", class: "grid_row_header" }, diff --git a/src/core/tags/TileLayoutTags.ts b/src/core/tags/TileLayoutTags.ts index 45c5e3d..4d0f713 100644 --- a/src/core/tags/TileLayoutTags.ts +++ b/src/core/tags/TileLayoutTags.ts @@ -64,7 +64,7 @@ namespace OS { let ocwidth = 0; const avaiheight = $(this).height(); const avaiWidth = $(this).width(); - $(this.refs.yield).css("height", `${avaiheight}px`); + //$(this.refs.yield).css("height", `${avaiheight}px`); $(this.refs.yield) .children() .each(function (e) { @@ -105,7 +105,7 @@ namespace OS { let ocheight = 0; const avaiheight = $(this).height(); const avaiwidth = $(this).width(); - $(this.refs.yield).css("height", `${avaiheight}px`); + //$(this.refs.yield).css("height", `${avaiheight}px`); $(this.refs.yield) .children() .each(function (e) { diff --git a/src/core/tags/WindowTag.ts b/src/core/tags/WindowTag.ts index 64bc9b5..0fa05d3 100644 --- a/src/core/tags/WindowTag.ts +++ b/src/core/tags/WindowTag.ts @@ -189,6 +189,7 @@ namespace OS { this._width = o.w; this._height = o.h; $(this).css("width", `${o.w}px`).css("height", `${o.h}px`); + $(this.refs.winwrapper).css("height", `${o.h}px`); this.observable.trigger("resize", { id: this.aid, data: o, @@ -302,6 +303,7 @@ namespace OS { { el: "div", class: "afx-window-wrapper", + ref: "winwrapper", children: [ { el: "ul", diff --git a/src/packages/CodePad/assets/scheme.html b/src/packages/CodePad/assets/scheme.html index f7dd949..fd60171 100644 --- a/src/packages/CodePad/assets/scheme.html +++ b/src/packages/CodePad/assets/scheme.html @@ -13,6 +13,7 @@
+
diff --git a/src/themes/antos_dark/antos.css b/src/themes/antos_dark/antos.css index 8512130..069d45f 100644 --- a/src/themes/antos_dark/antos.css +++ b/src/themes/antos_dark/antos.css @@ -74,4 +74,11 @@ textarea { outline: none; border: 1px solid #262626; box-sizing: border-box; +} + +a:link, +a:visited, +a:hover +{ + color:#df3154; } \ No newline at end of file diff --git a/src/themes/system/afx-grid-view.css b/src/themes/system/afx-grid-view.css index 687471e..0ef0b37 100644 --- a/src/themes/system/afx-grid-view.css +++ b/src/themes/system/afx-grid-view.css @@ -10,3 +10,7 @@ afx-grid-view .grid_row_header afx-grid-cell{ cursor:default; font-weight: bold; } + +afx-grid-view { + display: block; +} \ No newline at end of file