@visactor/vtable
Version:
canvas table width high performance
85 lines (80 loc) • 4.73 kB
JavaScript
import { isFunction } from "@visactor/vutils";
import { TABLE_EVENT_TYPE } from "../core/TABLE_EVENT_TYPE";
import { Env } from "../tools/env";
import { regUrl } from "../tools/global";
import { getOrApply } from "../tools/helper";
export function bindMediaClick(table) {
"browser" === Env.mode && table.on(TABLE_EVENT_TYPE.CLICK_CELL, (e => {
const {col: col, row: row} = e;
if ("image" === e.target.type && e.target.role && e.target.role.startsWith("icon")) return;
const cellType = table.getCellType(col, row), columnDefine = table.isHeader(col, row) ? table.getHeaderDefine(col, row) : table.getBodyColumnDefine(col, row), cellValue = table.getCellValue(col, row), cellOriginValue = table.getCellOriginValue(col, row);
if ("link" === cellType) {
let linkJump = getOrApply(columnDefine.linkJump, {
col: col,
row: row,
table: table,
value: cellValue,
dataValue: cellOriginValue,
cellHeaderPaths: void 0
});
if (linkJump = !1 !== linkJump, !linkJump) return;
const templateLink = columnDefine.templateLink;
let url, linkDetect = getOrApply(columnDefine.linkDetect, {
col: col,
row: row,
table: table,
value: cellValue,
dataValue: cellOriginValue,
cellHeaderPaths: void 0
});
if (linkDetect = !1 !== linkDetect, templateLink) {
const rowData = table.getCellOriginRecord(col, row);
if (rowData && rowData.vtableMerge) return;
const data = Object.assign({
__value: cellValue,
__dataValue: cellOriginValue,
value: cellValue,
dataValue: cellOriginValue
}, rowData);
if (isFunction(templateLink)) url = templateLink(data, col, row, table); else {
const re = /\{\s*(\S+?)\s*\}/g;
url = templateLink.replace(re, ((matchs, key) => data[key]));
}
} else if (linkDetect) {
if (!regUrl.test(cellValue)) return;
url = cellValue;
} else url = cellValue;
if (!url) return;
const linkTarget = columnDefine.linkTarget, linkWindowFeatures = columnDefine.linkWindowFeatures;
window.open(url, linkTarget, linkWindowFeatures);
} else if ("image" === cellType) {
const {clickToPreview: clickToPreview} = columnDefine;
if (!1 === clickToPreview) return;
const overlay = document.createElement("div");
overlay.style.width = "100%", overlay.style.height = "100%", overlay.style.position = "fixed",
overlay.style.top = "0", overlay.style.left = "0", overlay.style.backgroundColor = "rgba(30, 30, 30, 0.4)",
overlay.style.display = "flex", overlay.style.justifyContent = "center", overlay.style.alignItems = "center",
overlay.style.overflow = "hidden", overlay.style.zIndex = "9999", overlay.addEventListener("click", (e => {
e.target === overlay && document.body.removeChild(overlay);
}));
const image = new Image;
image.src = cellValue, image.style.maxWidth = "80%", image.style.maxHeight = "80%",
image.style.backgroundColor = "#FFF", overlay.appendChild(image), document.body.appendChild(overlay);
} else if ("video" === cellType) {
const {clickToPreview: clickToPreview} = columnDefine;
if (!1 === clickToPreview) return;
const overlay = document.createElement("div");
overlay.style.width = "100%", overlay.style.height = "100%", overlay.style.position = "fixed",
overlay.style.top = "0", overlay.style.left = "0", overlay.style.backgroundColor = "rgba(30, 30, 30, 0.4)",
overlay.style.display = "flex", overlay.style.justifyContent = "center", overlay.style.alignItems = "center",
overlay.style.overflow = "hidden", overlay.style.zIndex = "9999", overlay.addEventListener("click", (e => {
e.target === overlay && document.body.removeChild(overlay);
}));
const video = document.createElement("video");
video.src = cellValue, video.style.maxWidth = "80%", video.style.maxHeight = "80%",
video.setAttribute("preload", "auto"), video.setAttribute("controls", "true"), overlay.appendChild(video),
document.body.appendChild(overlay);
}
}));
}
//# sourceMappingURL=media-click.js.map