fix safari compatibility

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

View File

@ -11,38 +11,119 @@ interface Array<T> {
namespace OS {
export namespace GUI {
export namespace tag {
/**
*
*
* @export
* @class GridRowTag
* @extends {AFXTag}
*/
export class GridRowTag extends AFXTag {
data: GenericObject<any>[];
/**
*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<GridCellPrototype>;
/**
*
*
* @export
* @abstract
* @class GridCellPrototype
* @extends {AFXTag}
*/
export abstract class GridCellPrototype extends AFXTag {
private _oncellselect: TagEventCallback<CellEventData>;
private _oncelldbclick: TagEventCallback<CellEventData>;
private _data: GenericObject<any>;
/**
*Creates an instance of GridCellPrototype.
* @memberof GridCellPrototype
*/
constructor() {
super();
}
/**
*
*
* @memberof GridCellPrototype
*/
set oncellselect(v: TagEventCallback<CellEventData>) {
this._oncellselect = v;
}
/**
*
*
* @memberof GridCellPrototype
*/
set oncelldbclick(v: TagEventCallback<CellEventData>) {
this._oncelldbclick = v;
}
/**
*
*
* @memberof GridCellPrototype
*/
set data(v: GenericObject<any>) {
if (!v) return;
this._data = v;
@ -53,27 +134,57 @@ namespace OS {
this.selected = v.selected;
}
/**
*
*
* @type {GenericObject<any>}
* @memberof GridCellPrototype
*/
get data(): GenericObject<any> {
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<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 } };
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<any>[];
private _rows: GenericObject<any>[][];
@ -131,9 +306,21 @@ namespace OS {
private _oncellselect: TagEventCallback<CellEventData>;
private _onrowselect: TagEventCallback<CellEventData>;
private _oncelldbclick: TagEventCallback<CellEventData>;
/**
*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<CellEventData>
): void => {};
}
/**
*
*
* @protected
* @param {*} [d]
* @memberof GridViewTag
*/
protected reload(d?: any): void {}
/**
*
*
* @memberof GridViewTag
*/
set oncellselect(v: TagEventCallback<CellEventData>) {
this._oncellselect = v;
}
/**
*
*
* @memberof GridViewTag
*/
set onrowselect(v: TagEventCallback<CellEventData>) {
this._onrowselect = v;
}
/**
*
*
* @memberof GridViewTag
*/
set oncelldbclick(v: TagEventCallback<CellEventData>) {
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<any>[]}
* @memberof GridViewTag
*/
get header(): GenericObject<any>[] {
return this._header;
}
/**
*
*
* @memberof GridViewTag
*/
set header(v: GenericObject<any>[]) {
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<any>[][]) {
$(this.refs.grid).empty();
this._rows = rows;
rows.map((row) => this.push(row, false));
}
/**
*
*
* @type {GenericObject<any>[][]}
* @memberof GridViewTag
*/
get rows(): GenericObject<any>[][] {
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,22 +545,26 @@ namespace OS {
$(row).remove();
}
/**
*
*
* @param {GenericObject<any>[]} row
* @param {boolean} flag
* @memberof GridViewTag
*/
push(row: GenericObject<any>[], flag: boolean): void {
const rowel = $("<afx-grid-row>").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);
}
}
@ -278,11 +589,28 @@ namespace OS {
}
}
/**
*
*
* @param {GenericObject<any>[]} row
* @memberof GridViewTag
*/
unshift(row: GenericObject<any>[]): void {
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;
// return if e.data.item is selectedCell and not flag
if (this.selectedCell) {
@ -300,6 +628,13 @@ namespace OS {
}
}
/**
*
*
* @param {TagEventType<CellEventData>} e
* @returns {void}
* @memberof GridViewTag
*/
rowselect(e: TagEventType<CellEventData>): 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" },

View File

@ -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) {

View File

@ -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",

View File

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

View File

@ -75,3 +75,10 @@ textarea {
border: 1px solid #262626;
box-sizing: border-box;
}
a:link,
a:visited,
a:hover
{
color:#df3154;
}

View File

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