@jswf/core
Version:
JavaScript Window Framework
748 lines • 28.3 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
/* eslint-disable @typescript-eslint/class-name-casing */
var BaseView_1 = require("./BaseView");
var WindowManager_1 = require("./WindowManager");
require("../scss/ListView.scss");
/**
*ListView用クラス
*
* @export
* @class ListView
* @extends {BaseView}
*/
var ListView = /** @class */ (function (_super) {
__extends(ListView, _super);
/**
*Creates an instance of ListView.
* @param {*} [params] ウインドウ作成パラメータ
* @memberof ListView
*/
function ListView(params) {
var _this = _super.call(this, params) || this;
_this.overIndex = -1;
_this.lastIndex = 0;
_this.selectIndexes = [];
_this.sortIndex = -1;
_this.sortVector = false;
_this.columnWidth = [];
_this.columnAutoIndex = -1;
_this.areaWidth = 0;
var that = _this;
var client = _this.getClient();
client.dataset.jwfStyle = "ListView";
var headerBack = document.createElement("div");
headerBack.dataset.kind = "ListHeaderBack";
client.appendChild(headerBack);
var headerArea = document.createElement("div");
headerArea.dataset.kind = "ListHeaderArea";
client.appendChild(headerArea);
var resizers = document.createElement("div");
_this.resizers = resizers;
resizers.dataset.kind = "ListResizers";
headerArea.appendChild(resizers);
var headers = document.createElement("div");
_this.headers = headers;
headers.dataset.kind = "ListHeaders";
headerArea.appendChild(headers);
var itemArea = document.createElement("div");
itemArea.dataset.kind = "ListItemArea";
_this.itemArea = itemArea;
client.appendChild(itemArea);
client.addEventListener("scroll", function () {
itemArea.style.left = this.scrollLeft + "px";
if (itemArea.childElementCount) {
var column = itemArea.childNodes[0];
column.style.marginLeft = -this.scrollLeft + "px";
headerBack.style.marginLeft = this.scrollLeft + "px";
}
});
client.addEventListener("dragover", function (e) {
e.preventDefault();
});
client.addEventListener("drop", function (e) {
that.callEvent("itemDrop", {
itemIndex: -1,
subItemIndex: -1,
event: e
});
e.preventDefault();
});
return _this;
}
/**
*カラムのサイズを設定
*
* @param {number} index
* @param {number} size
* @memberof ListView
*/
ListView.prototype.setColumnWidth = function (index, size) {
this.columnWidth[index] = size;
this.headers.children[index].style.width = size + "px";
this.resize();
};
/**
*カラムのスタイルを設定
*
* @param {number} col カラム番号
* @param {('left'|'right'|'center')} style スタイル
* @memberof ListView
*/
ListView.prototype.setColumnStyle = function (col, style) {
var columns = this.itemArea.childNodes;
var column = columns[col];
column.style.justifyContent = style;
};
/**
*カラムのスタイルを複数設定
*
* @param {(('left' | 'right' | 'center')[])} styles スタイル
* @memberof ListView
*/
ListView.prototype.setColumnStyles = function (styles) {
var columns = this.itemArea.childNodes;
for (var i = 0, l = styles.length; i < l; i++) {
var column = columns[i];
column.vector = styles[i];
}
};
/**
*ヘッダを追加
*配列にすると複数追加でき、さらに配列を含めるとサイズが指定できる
* @param {(string|(string|[string,number])[])} labels ラベル | [ラベル,ラベル,・・・] | [[ラベル,幅],[ラベル,幅],・・・]
* @param {number} [size] 幅
* @memberof ListView
*/
ListView.prototype.addHeader = function (label, size) {
var headers = this.headers;
var labels = [];
if (label instanceof Array)
labels = label;
else
labels = [label];
var _loop_1 = function (i, l) {
var label_1 = labels[i];
var text = void 0;
var width = size;
if (label_1 instanceof Array) {
text = label_1[0];
width = label_1[1];
}
else {
text = label_1;
}
index = headers.childElementCount;
header = document.createElement("div");
headers.appendChild(header);
header.textContent = text;
if (width != null) {
this_1.columnWidth[index] = width;
header.style.width = width + "px";
}
else {
this_1.columnWidth[index] = header.offsetWidth;
}
var that = this_1;
//ヘッダが押されたらソート処理
header.addEventListener("click", function () {
var j;
for (j = 0; j < headers.childElementCount; j++) {
if (headers.childNodes[j] === this)
break;
}
var sort = true;
if (that.sortIndex === j)
sort = !that.sortVector;
that.sortItem(j, sort);
});
itemArea = this_1.itemArea;
column = document.createElement("div");
column.dataset.kind = "ListColumn";
this_1.itemArea.appendChild(column);
//リサイズバーの設定
resizers = this_1.resizers;
var resize = document.createElement("div");
resize.dataset.index = index.toString();
resizers.appendChild(resize);
WindowManager_1.WindowManager.enableMove(resize);
resize.addEventListener("move", function (e) {
var index = this.dataset.index ? parseInt(this.dataset.index) : 0;
var p = e.params;
var x = p.nodePoint.x + p.nowPoint.x - p.basePoint.x;
var h = headers.childNodes[index];
var width = x - h.offsetLeft;
h.style.width = width + "px";
that.columnWidth[index] = width;
for (var i_1 = index, length_1 = resizers.childElementCount; i_1 < length_1; i_1++) {
var node = headers.children[i_1];
var r = resizers.childNodes[i_1];
r.style.left = node.offsetLeft + node.offsetWidth + "px";
var column_1 = itemArea.children[i_1];
column_1.style.width =
node.clientLeft + node.offsetWidth - column_1.clientLeft + "px";
}
});
};
var this_1 = this, index, header, itemArea, column, resizers;
for (var i = 0, l = labels.length; i < l; i++) {
_loop_1(i, l);
}
};
/**
*アイテムのソートを行う
*
* @param {number} [index] カラム番号
* @param {boolean} [order] 方向 true:昇順 false:降順
* @memberof ListView
*/
ListView.prototype.sortItem = function (index, order) {
this.clearSelectItem();
if (index != null) {
this.sortIndex = index;
order = order == null ? true : order;
this.sortVector = order;
var headers = this.headers;
for (var i = 0, length_2 = headers.childElementCount; i < length_2; i++) {
var node = headers.childNodes[i];
if (index === i)
node.dataset.sort = order ? "asc" : "desc";
else
node.dataset.sort = "";
// eslint-disable-next-line no-self-assign
node.className = node.className; //IE11対策
}
}
index = this.sortIndex;
order = this.sortVector;
var columns = this.itemArea.childNodes;
var column = columns[index];
var items = column.childNodes;
//ソートリストの作成
var sortList = [];
for (var i = 0, length_3 = items.length; i < length_3; i++) {
sortList.push(i);
}
sortList.sort(function (a, b) {
var v1 = typeof items[a].keyValue || items[a].textContent || "";
var v2 = typeof items[b].keyValue || items[b].textContent || "";
return (v1 > v2 ? 1 : -1) * (order ? 1 : -1);
});
//ソート処理
for (var i = 0, length_4 = columns.length; i < length_4; i++) {
var column_2 = columns[i];
//子ノードの保存と削除
var items_1 = [];
while (column_2.childElementCount) {
items_1.push(column_2.childNodes[0]);
column_2.removeChild(column_2.childNodes[0]);
}
//子ノードの再追加
for (var j = 0, length_5 = sortList.length; j < length_5; j++) {
column_2.appendChild(items_1[sortList[j]]);
}
}
};
/**
*アイテムを選択する
*すでにある選択は解除される
* @param {(number | number[])} index レコード番号
* @memberof ListView
*/
ListView.prototype.selectItem = function (index) {
this.clearSelectItem();
this.addSelectItem(index);
};
/**
*アイテムの選択を全て解除する
*
* @memberof ListView
*/
ListView.prototype.clearSelectItem = function () {
var columns = this.itemArea.childNodes;
for (var i = 0, length_6 = columns.length; i < length_6; i++) {
var column = columns[i];
for (var j = 0, l = this.selectIndexes.length; j < l; j++) {
var node = column.childNodes[this.selectIndexes[j]];
node.dataset.itemSelect = "false";
// eslint-disable-next-line no-self-assign
node.className = node.className; //IE11対策
}
}
this.selectIndexes = [];
};
/**
*アイテムの選択を追加する
*
* @param {(number | number[])} index レコード番号
* @memberof ListView
*/
ListView.prototype.addSelectItem = function (index) {
var indexes = (index instanceof Array ? index : [index]);
Array.prototype.push.apply(this.selectIndexes, indexes);
var columns = this.itemArea.childNodes;
for (var i = 0, length_7 = columns.length; i < length_7; i++) {
var column = columns[i];
for (var j = 0, l = this.selectIndexes.length; j < l; j++) {
var node = column.childNodes[this.selectIndexes[j]];
node.dataset.itemSelect = "true";
// eslint-disable-next-line no-self-assign
node.className = node.className; //IE11対策
}
}
};
/**
*アイテムの選択を解除する
*
* @param {(number | number[])} index レコード番号
* @memberof ListView
*/
ListView.prototype.delSelectItem = function (index) {
var indexes = (typeof index === "object" ? index : [index]);
var columns = this.itemArea.childNodes;
for (var i = 0, length_8 = columns.length; i < length_8; i++) {
var column = columns[i];
for (var j = 0, l = indexes.length; j < l; j++) {
var node = column.childNodes[indexes[j]];
node.dataset.itemSelect = "false";
// eslint-disable-next-line no-self-assign
node.className = node.className; //IE11対策
}
}
var newIndexes = [];
for (var j = 0, l = this.selectIndexes.length; j < l; j++) {
var index_1 = this.selectIndexes[j];
if (indexes.indexOf(index_1) < 0)
newIndexes.push(index_1);
}
this.selectIndexes = newIndexes;
};
/**
*アイテムの数を返す
*
* @returns {number} アイテム数
* @memberof ListView
*/
ListView.prototype.getItemCount = function () {
if (this.itemArea.childElementCount === 0)
return 0;
return this.itemArea.childNodes[0].childElementCount;
};
/**
*アイテムが選択されているか返す
*
* @param {number} index レコード番号
* @returns {boolean}
* @memberof ListView
*/
ListView.prototype.isSelectItem = function (index) {
return this.selectIndexes.indexOf(index) >= 0;
};
ListView.getIndexOfNode = function (node) {
if (node.parentNode)
return [].slice
.call(node.parentNode.childNodes)
.indexOf(node);
return -1;
};
/**
*アイテムを全て削除する
*
* @memberof ListView
*/
ListView.prototype.clearItem = function () {
this.selectIndexes = [];
var columns = this.itemArea.childNodes;
for (var i = 0, length_9 = columns.length; i < length_9; i++) {
var column = columns[i];
while (column.childElementCount)
column.removeChild(column.childNodes[0]);
}
};
/**
*対象セルのノードを取得
*
* @param {number} row
* @param {number} col
* @returns
* @memberof ListView
*/
ListView.prototype.getCell = function (row, col) {
var columns = this.itemArea.childNodes;
var column = columns[col];
if (column == null)
return null;
return column.childNodes[row];
};
/**
*アイテムに値を設定する
*
* @param {number} index レコード番号
* @param {*} value 値
* @memberof ListView
*/
ListView.prototype.setItemValue = function (index, value) {
var cell = this.getCell(index, 0);
if (cell)
cell.value = value;
};
/**
*アイテムの値を取得する
*
* @param {number} index レコード番号
* @returns 値
* @memberof ListView
* @returns {string} アイテムに設定されている値
*/
ListView.prototype.getItemValue = function (index) {
var cell = this.getCell(index, 0);
if (cell)
return cell.value;
return null;
};
/**
*全てのアイテムの値を取得する
*
* @returns {unknown[]}
* @memberof ListView
*/
ListView.prototype.getItemValues = function () {
var count = this.getItemCount();
var values = [];
for (var i = 0; i < count; i++) {
values.push(this.getCell(i, 0));
}
return values;
};
/**
*アイテムのテキスト内容を取得
*
* @param {number} row 行
* @param {number} col 列
* @returns {string} アイテムに設定されているテキスト
* @memberof ListView
*/
ListView.prototype.getItemText = function (row, col) {
var cell = this.getCell(row, col);
if (cell)
return cell.textContent;
return null;
};
/**
*最初に選択されているアイテムを返す
*
* @returns {number} 選択されているアイテム番号(見つからなかったら-1)
* @memberof ListView
*/
ListView.prototype.getSelectItem = function () {
for (var _i = 0, _a = this.selectIndexes; _i < _a.length; _i++) {
var index = _a[_i];
return index;
}
return -1;
};
/**
*選択されている値を全て取得する
*
* @returns {unknown[]} 選択されているアイテムの値
* @memberof ListView
*/
ListView.prototype.getSelectValues = function () {
var values = [];
for (var _i = 0, _a = this.selectIndexes; _i < _a.length; _i++) {
var index = _a[_i];
values.push(this.getItemValue(index));
}
return values;
};
/**
*指定行のセルノードを返す
*
* @param {number} row
* @returns
* @memberof ListView
*/
ListView.prototype.getLineCells = function (row) {
var cells = [];
var columns = this.itemArea.childNodes;
for (var i = 0, length_10 = columns.length; i < length_10; i++) {
var column = columns[i];
cells.push(column.childNodes[row]);
}
return cells;
};
/**
*アイテムを追加する
*アイテムはテキストかノードが指定できる
*配列を渡した場合は、複数追加となる
* @param {(string|(string|HTMLElement)[])} value テキストもしくはノード
* @returns
* @memberof ListView
*/
ListView.prototype.addItem = function (value, itemValue) {
var vector = {
left: "flex-start",
center: "center",
right: "flex-end"
};
var that = this;
var columns = this.itemArea.childNodes;
for (var i = 0, length_11 = columns.length; i < length_11; i++) {
var column = columns[i];
var cell = document.createElement("div");
cell.draggable = true;
cell.dataset.kind = "ListCell";
if (column.vector)
cell.style.justifyContent = vector[column.vector];
column.appendChild(cell);
cell.addEventListener("mouseover", function () {
var index = ListView.getIndexOfNode(this);
for (var i_2 = 0, length_12 = columns.length; i_2 < length_12; i_2++) {
var column_3 = columns[i_2];
if (that.overIndex != null &&
that.overIndex >= 0 &&
that.overIndex < column_3.childElementCount) {
var node = column_3.childNodes[that.overIndex];
node.dataset.itemHover = "false";
// eslint-disable-next-line no-self-assign
node.className = node.className; //IE対策
}
var node2 = column_3.childNodes[index];
node2.dataset.itemHover = "true";
// eslint-disable-next-line no-self-assign
node2.className = node2.className; //IE対策
}
that.overIndex = index;
});
cell.addEventListener("dragstart", function (e) {
var index = ListView.getIndexOfNode(this);
var index2 = ListView.getIndexOfNode(this.parentNode);
that.callEvent("itemDragStart", {
itemIndex: index,
subItemIndex: index2,
event: e
});
});
cell.addEventListener("dragleave", function () {
var index = ListView.getIndexOfNode(this);
var cells = that.getLineCells(index);
for (var _i = 0, cells_1 = cells; _i < cells_1.length; _i++) {
var cell_1 = cells_1[_i];
cell_1.dataset.drag = "";
// eslint-disable-next-line no-self-assign
cell_1.className = cell_1.className; //IE対策
}
});
cell.addEventListener("dragenter", function (e) {
var index = ListView.getIndexOfNode(this);
var cells = that.getLineCells(index);
for (var _i = 0, cells_2 = cells; _i < cells_2.length; _i++) {
var cell_2 = cells_2[_i];
cell_2.dataset.drag = "over";
// eslint-disable-next-line no-self-assign
cell_2.className = cell_2.className; //IE対策
}
e.preventDefault();
});
cell.addEventListener("dragover", function (e) {
e.preventDefault();
});
cell.addEventListener("drop", function (e) {
var index = ListView.getIndexOfNode(this);
var index2 = ListView.getIndexOfNode(this.parentNode);
var cells = that.getLineCells(index);
for (var _i = 0, cells_3 = cells; _i < cells_3.length; _i++) {
var cell_3 = cells_3[_i];
cell_3.dataset.drag = "over";
// eslint-disable-next-line no-self-assign
cell_3.className = cell_3.className; //IE対策
}
that.callEvent("itemDrop", {
itemIndex: index,
subItemIndex: index2,
event: e
});
e.preventDefault();
});
cell.addEventListener("dragstart", function (e) {
var index = ListView.getIndexOfNode(this);
var index2 = ListView.getIndexOfNode(this.parentNode);
that.callEvent("itemDragStart", {
itemIndex: index,
subItemIndex: index2,
event: e
});
});
cell.addEventListener("click", function (e) {
var index = ListView.getIndexOfNode(this);
var index2 = ListView.getIndexOfNode(this.parentNode);
if (e.ctrlKey) {
if (!that.isSelectItem(index))
that.addSelectItem(index);
else
that.delSelectItem(index);
}
else if (e.shiftKey) {
var indexes = [];
var s = Math.min(that.lastIndex, index);
var e_1 = Math.max(that.lastIndex, index);
for (var i_3 = s; i_3 <= e_1; i_3++)
indexes.push(i_3);
that.selectItem(indexes);
}
else
that.selectItem(index);
that.lastIndex = index;
that.callEvent("itemClick", {
itemIndex: index,
subItemIndex: index2,
event: e
});
});
cell.addEventListener("dblclick", function (e) {
var index = ListView.getIndexOfNode(this);
var index2 = ListView.getIndexOfNode(this.parentNode);
that.callEvent("itemDblClick", {
itemIndex: index,
subItemIndex: index2,
event: e
});
});
}
if (columns.length === 0)
return -1;
var index = columns[0].childNodes.length - 1;
if (value instanceof Array) {
for (var i = 0, l = value.length; i < l; i++) {
this.setItem(index, i, value[i]);
}
}
else
this.setItem(index, 0, value);
if (itemValue)
this.setItemValue(index, itemValue);
if (this.areaWidth !== this.itemArea.clientWidth) {
this.areaWidth = this.itemArea.clientWidth;
this.resize();
}
return index;
};
/**
*ソート用のキーを設定する
*
* @param {number} row レコード番号
* @param {number} column カラム番号
* @param {*} value キー
* @returns
* @memberof ListView
*/
ListView.prototype.setSortKey = function (row, column, value) {
var c = this.itemArea.childNodes[column];
if (c == null)
return false;
var r = c.childNodes[row];
if (r == null)
return false;
r.keyValue = value;
return true;
};
/**
*ソート用のキーをまとめて設定する
*
* @param {number} row レコード番号
* @param {unknown[]} values キー配列
* @memberof ListView
*/
ListView.prototype.setSortKeys = function (row, values) {
for (var i = 0, l = values.length; i < l; i++) {
var c = this.itemArea.childNodes[i];
if (c == null)
break;
var r = c.childNodes[row];
if (r == null)
break;
r.keyValue = values[i];
}
};
/**
*アイテムを書き換える
*
* @param {number} row レコード番号
* @param {number} column カラム番号
* @param {(string|HTMLElement)} value テキストもしくはノード
* @returns
* @memberof ListView
*/
ListView.prototype.setItem = function (row, column, value) {
var c = this.itemArea.childNodes[column];
if (c == null)
return false;
var r = c.childNodes[row];
if (r == null)
return false;
if (!(value instanceof HTMLElement)) {
var item = document.createElement("div");
if (value != null)
item.textContent = value.toString();
r.appendChild(item);
}
else {
r.appendChild(value);
}
return true;
};
/**
*ヘッダに合わせてカラムサイズを調整する
*基本的には直接呼び出さない
* @protected
* @memberof ListView
*/
ListView.prototype.resize = function () {
var headers = this.headers;
var resizers = this.resizers;
var itemArea = this.itemArea;
var lmitWidth = itemArea.clientWidth;
for (var i = 0, length_13 = headers.childNodes.length; i < length_13; i++) {
lmitWidth -= this.columnWidth[i];
}
var autoIndex = this.columnAutoIndex;
for (var i = 0, length_14 = headers.childNodes.length; i < length_14; i++) {
var node = headers.childNodes[i];
var resize = resizers.childNodes[i];
var column = itemArea.children[i];
var width = this.columnWidth[i];
if (autoIndex === i || (autoIndex === -1 && i === length_14 - 1))
width += lmitWidth;
node.style.width = width + "px";
resize.style.left =
node.offsetLeft + width - resize.offsetWidth / 2 + "px";
column.style.width = width + "px";
}
};
/**
*
*
* @param {boolean} flag
* @memberof ListView
*/
ListView.prototype.onLayout = function (flag) {
_super.prototype.onLayout.call(this, flag);
this.resize();
};
return ListView;
}(BaseView_1.BaseView));
exports.ListView = ListView;
//# sourceMappingURL=ListView.js.map