WIP: Use JSpreadsheet instead of Importabular
This commit is contained in:
Keegan George
parent
29089a6c43
commit
87b91f5a6f
|
|
@ -9,7 +9,7 @@
|
||||||
"minimum_discourse_version": null,
|
"minimum_discourse_version": null,
|
||||||
"maximum_discourse_version": null,
|
"maximum_discourse_version": null,
|
||||||
"assets": {
|
"assets": {
|
||||||
"importabular": "assets/importabular.js"
|
"jspreadsheet": "assets/jspreadsheet.js"
|
||||||
},
|
},
|
||||||
"modifiers": {
|
"modifiers": {
|
||||||
"svg_icons": [
|
"svg_icons": [
|
||||||
|
|
|
||||||
|
|
@ -1,726 +0,0 @@
|
||||||
!(function (t, e) {
|
|
||||||
"object" == typeof exports && "object" == typeof module
|
|
||||||
? (module.exports = e())
|
|
||||||
: "function" == typeof define && define.amd
|
|
||||||
? define([], e)
|
|
||||||
: "object" == typeof exports
|
|
||||||
? (exports.Importabular = e())
|
|
||||||
: (t.Importabular = e());
|
|
||||||
})(self, function () {
|
|
||||||
return (() => {
|
|
||||||
"use strict";
|
|
||||||
var t = {
|
|
||||||
103: (t, e, i) => {
|
|
||||||
i.d(e, { default: () => l });
|
|
||||||
class s {
|
|
||||||
constructor() {
|
|
||||||
var t, e;
|
|
||||||
(e = {}),
|
|
||||||
(t = "_data") in this
|
|
||||||
? Object.defineProperty(this, t, {
|
|
||||||
value: e,
|
|
||||||
enumerable: !0,
|
|
||||||
configurable: !0,
|
|
||||||
writable: !0,
|
|
||||||
})
|
|
||||||
: (this[t] = e);
|
|
||||||
}
|
|
||||||
_setVal(t, e, i) {
|
|
||||||
const s = this._data,
|
|
||||||
n = (function (t) {
|
|
||||||
return 0 === t ? "0" : t ? t.toString() : "";
|
|
||||||
})(i);
|
|
||||||
var o;
|
|
||||||
n
|
|
||||||
? (s[t] || (s[t] = {}), (s[t][e] = n))
|
|
||||||
: s[t] &&
|
|
||||||
s[t][e] &&
|
|
||||||
(delete s[t][e],
|
|
||||||
(o = s[t]),
|
|
||||||
0 === Object.keys(o).length && delete s[t]);
|
|
||||||
}
|
|
||||||
_clear() {
|
|
||||||
this._data = {};
|
|
||||||
}
|
|
||||||
_getVal(t, e) {
|
|
||||||
const i = this._data;
|
|
||||||
return (i && i[t] && i[t][e]) || "";
|
|
||||||
}
|
|
||||||
_toArr(t, e) {
|
|
||||||
const i = [];
|
|
||||||
for (let s = 0; s < e; s++) {
|
|
||||||
i.push([]);
|
|
||||||
for (let e = 0; e < t; e++) i[s].push(this._getVal(e, s));
|
|
||||||
}
|
|
||||||
return i;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function n(t, e, i, s, n, o, r) {
|
|
||||||
if ((t += i) < s) {
|
|
||||||
if (n === 1 / 0) return { x: s, y: e };
|
|
||||||
if (((t = n), --e < o)) {
|
|
||||||
if (r === 1 / 0) return { x: s, y: o };
|
|
||||||
e = r;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
t > n && ((t = s), ++e > r && ((e = o), (t = s))), { x: t, y: e }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
function o(t) {
|
|
||||||
return t.split('"').length - 1;
|
|
||||||
}
|
|
||||||
function r(t, e, i) {
|
|
||||||
return (
|
|
||||||
e in t
|
|
||||||
? Object.defineProperty(t, e, {
|
|
||||||
value: i,
|
|
||||||
enumerable: !0,
|
|
||||||
configurable: !0,
|
|
||||||
writable: !0,
|
|
||||||
})
|
|
||||||
: (t[e] = i),
|
|
||||||
t
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const h = [
|
|
||||||
"mousedown",
|
|
||||||
"mouseenter",
|
|
||||||
"mouseup",
|
|
||||||
"mouseleave",
|
|
||||||
"touchstart",
|
|
||||||
"touchend",
|
|
||||||
"touchmove",
|
|
||||||
"keydown",
|
|
||||||
"paste",
|
|
||||||
"cut",
|
|
||||||
"copy",
|
|
||||||
];
|
|
||||||
class l {
|
|
||||||
constructor(t) {
|
|
||||||
r(this, "_width", 1),
|
|
||||||
r(this, "_height", 1),
|
|
||||||
r(this, "_data", new s()),
|
|
||||||
r(this, "paste", (t) => {
|
|
||||||
if (this._editing) return;
|
|
||||||
t.preventDefault();
|
|
||||||
const e = (function (t) {
|
|
||||||
var e,
|
|
||||||
i,
|
|
||||||
s,
|
|
||||||
n,
|
|
||||||
r,
|
|
||||||
h,
|
|
||||||
l,
|
|
||||||
a = [],
|
|
||||||
c = 0;
|
|
||||||
for (
|
|
||||||
(s = t.split("\n")).length > 1 &&
|
|
||||||
"" === s[s.length - 1] &&
|
|
||||||
s.pop(),
|
|
||||||
e = 0,
|
|
||||||
i = s.length;
|
|
||||||
e < i;
|
|
||||||
e += 1
|
|
||||||
) {
|
|
||||||
for (
|
|
||||||
s[e] = s[e].split("\t"), n = 0, r = s[e].length;
|
|
||||||
n < r;
|
|
||||||
n += 1
|
|
||||||
)
|
|
||||||
a[c] || (a[c] = []),
|
|
||||||
h && 0 === n
|
|
||||||
? ((l = a[c].length - 1),
|
|
||||||
(a[c][l] = a[c][l] + "\n" + s[e][0]),
|
|
||||||
h &&
|
|
||||||
1 & o(s[e][0]) &&
|
|
||||||
((h = !1),
|
|
||||||
(a[c][l] = a[c][l]
|
|
||||||
.substring(0, a[c][l].length - 1)
|
|
||||||
.replace(/""/g, '"'))))
|
|
||||||
: n === r - 1 &&
|
|
||||||
0 === s[e][n].indexOf('"') &&
|
|
||||||
1 & o(s[e][n])
|
|
||||||
? (a[c].push(
|
|
||||||
s[e][n].substring(1).replace(/""/g, '"')
|
|
||||||
),
|
|
||||||
(h = !0))
|
|
||||||
: (a[c].push(s[e][n].replace(/""/g, '"')),
|
|
||||||
(h = !1));
|
|
||||||
h || (c += 1);
|
|
||||||
}
|
|
||||||
return a;
|
|
||||||
})(
|
|
||||||
(t.clipboardData || window.clipboardData).getData(
|
|
||||||
"text/plain"
|
|
||||||
)
|
|
||||||
),
|
|
||||||
{ rx: i, ry: s } = this._selection,
|
|
||||||
n = { x: i[0], y: s[0] };
|
|
||||||
for (let t = 0; t < e.length; t++)
|
|
||||||
for (let i = 0; i < e[0].length; i++)
|
|
||||||
this._setVal(n.x + i, n.y + t, e[t][i]);
|
|
||||||
this._changeSelectedCellsStyle(() => {
|
|
||||||
(this._selectionStart = n),
|
|
||||||
(this._selectionEnd = {
|
|
||||||
x: n.x + e[0].length - 1,
|
|
||||||
y: n.y + e.length - 1,
|
|
||||||
}),
|
|
||||||
this._onDataChanged();
|
|
||||||
});
|
|
||||||
}),
|
|
||||||
r(this, "copy", (t) => {
|
|
||||||
if (this._editing) return;
|
|
||||||
const e = this._getSelectionAsArray();
|
|
||||||
e &&
|
|
||||||
(t.preventDefault(),
|
|
||||||
t.clipboardData.setData(
|
|
||||||
"text/plain",
|
|
||||||
(function (t) {
|
|
||||||
var e,
|
|
||||||
i,
|
|
||||||
s,
|
|
||||||
n,
|
|
||||||
o,
|
|
||||||
r = "";
|
|
||||||
for (e = 0, i = t.length; e < i; e += 1) {
|
|
||||||
for (s = 0, n = t[e].length; s < n; s += 1)
|
|
||||||
s > 0 && (r += "\t"),
|
|
||||||
"string" == typeof (o = t[e][s])
|
|
||||||
? o.indexOf("\n") > -1
|
|
||||||
? (r += '"' + o.replace(/"/g, '""') + '"')
|
|
||||||
: (r += o)
|
|
||||||
: (r += null == o ? "" : o);
|
|
||||||
r += "\n";
|
|
||||||
}
|
|
||||||
return r;
|
|
||||||
})(e)
|
|
||||||
));
|
|
||||||
}),
|
|
||||||
r(this, "cut", (t) => {
|
|
||||||
this._editing ||
|
|
||||||
(this.copy(t), this._setAllSelectedCellsTo(""));
|
|
||||||
}),
|
|
||||||
r(this, "keydown", (t) => {
|
|
||||||
t.ctrlKey ||
|
|
||||||
(this._selectionStart &&
|
|
||||||
("Escape" === t.key &&
|
|
||||||
this._editing &&
|
|
||||||
(t.preventDefault(),
|
|
||||||
this._revertEdit(),
|
|
||||||
this._stopEditing()),
|
|
||||||
"Enter" === t.key &&
|
|
||||||
(t.preventDefault(),
|
|
||||||
this._tabCursorInSelection(!1, t.shiftKey ? -1 : 1)),
|
|
||||||
"Tab" === t.key &&
|
|
||||||
(t.preventDefault(),
|
|
||||||
this._tabCursorInSelection(!0, t.shiftKey ? -1 : 1)),
|
|
||||||
this._editing ||
|
|
||||||
("F2" === t.key &&
|
|
||||||
(t.preventDefault(), this._startEditing(this._focus)),
|
|
||||||
("Delete" !== t.key && "Backspace" !== t.key) ||
|
|
||||||
(t.preventDefault(), this._setAllSelectedCellsTo("")),
|
|
||||||
"ArrowDown" === t.key &&
|
|
||||||
(t.preventDefault(),
|
|
||||||
this._moveCursor({ y: 1 }, t.shiftKey)),
|
|
||||||
"ArrowUp" === t.key &&
|
|
||||||
(t.preventDefault(),
|
|
||||||
this._moveCursor({ y: -1 }, t.shiftKey)),
|
|
||||||
"ArrowLeft" === t.key &&
|
|
||||||
(t.preventDefault(),
|
|
||||||
this._moveCursor({ x: -1 }, t.shiftKey)),
|
|
||||||
"ArrowRight" === t.key &&
|
|
||||||
(t.preventDefault(),
|
|
||||||
this._moveCursor({ x: 1 }, t.shiftKey))),
|
|
||||||
1 !== t.key.length ||
|
|
||||||
this._editing ||
|
|
||||||
this._changeSelectedCellsStyle(() => {
|
|
||||||
const { x: t, y: e } = this._focus;
|
|
||||||
this._startEditing({ x: t, y: e }),
|
|
||||||
(this._getCell(t, e).firstChild.value = "");
|
|
||||||
})));
|
|
||||||
}),
|
|
||||||
r(this, "_selecting", !1),
|
|
||||||
r(this, "_selectionStart", null),
|
|
||||||
r(this, "_selectionEnd", null),
|
|
||||||
r(this, "_selection", { rx: [0, 0], ry: [0, 0] }),
|
|
||||||
r(this, "_editing", null),
|
|
||||||
r(this, "_focus", null),
|
|
||||||
r(this, "mousedown", (t) => {
|
|
||||||
if (!this.mobile) {
|
|
||||||
if (
|
|
||||||
3 === t.which &&
|
|
||||||
!this._editing &&
|
|
||||||
this._selectionSize()
|
|
||||||
) {
|
|
||||||
let t = new Range();
|
|
||||||
const { rx: e, ry: i } = this._selection;
|
|
||||||
return (
|
|
||||||
t.setStart(this._getCell(e[0], i[0]), 0),
|
|
||||||
t.setEnd(this._getCell(e[0], i[0]), 1),
|
|
||||||
this.cwd.getSelection().removeAllRanges(),
|
|
||||||
void this.cwd.getSelection().addRange(t)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
this._changeSelectedCellsStyle(() => {
|
|
||||||
(this.tbody.style.userSelect = "none"),
|
|
||||||
(this._selectionEnd =
|
|
||||||
this._selectionStart =
|
|
||||||
this._focus =
|
|
||||||
this._getCoords(t)),
|
|
||||||
(this._selecting = !0);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
r(this, "mouseenter", (t) => {
|
|
||||||
this.mobile ||
|
|
||||||
(this._selecting &&
|
|
||||||
this._changeSelectedCellsStyle(() => {
|
|
||||||
this._selectionEnd = this._getCoords(t);
|
|
||||||
}));
|
|
||||||
}),
|
|
||||||
r(this, "_lastMouseUp", null),
|
|
||||||
r(this, "_lastMouseUpTarget", null),
|
|
||||||
r(this, "mouseup", (t) => {
|
|
||||||
this.mobile ||
|
|
||||||
(3 !== t.which &&
|
|
||||||
this._selecting &&
|
|
||||||
this._changeSelectedCellsStyle(() => {
|
|
||||||
(this._selectionEnd = this._getCoords(t)),
|
|
||||||
this._endSelection(),
|
|
||||||
this._lastMouseUp &&
|
|
||||||
this._lastMouseUp > Date.now() - 300 &&
|
|
||||||
this._lastMouseUpTarget.x ===
|
|
||||||
this._selectionEnd.x &&
|
|
||||||
this._lastMouseUpTarget.y ===
|
|
||||||
this._selectionEnd.y &&
|
|
||||||
this._startEditing(this._selectionEnd),
|
|
||||||
(this._lastMouseUp = Date.now()),
|
|
||||||
(this._lastMouseUpTarget = this._selectionEnd);
|
|
||||||
}));
|
|
||||||
}),
|
|
||||||
r(this, "mouseleave", (t) => {
|
|
||||||
t.target === this.tbody &&
|
|
||||||
this._selecting &&
|
|
||||||
this._endSelection();
|
|
||||||
}),
|
|
||||||
r(this, "touchstart", (t) => {
|
|
||||||
this._editing || ((this.mobile = !0), (this.moved = !1));
|
|
||||||
}),
|
|
||||||
r(this, "touchend", (t) => {
|
|
||||||
this.mobile &&
|
|
||||||
(this._editing ||
|
|
||||||
this.moved ||
|
|
||||||
(this._changeSelectedCellsStyle(() => {
|
|
||||||
this._selectionEnd =
|
|
||||||
this._selectionStart =
|
|
||||||
this._focus =
|
|
||||||
this._getCoords(t);
|
|
||||||
}),
|
|
||||||
this._startEditing(this._focus)));
|
|
||||||
}),
|
|
||||||
r(this, "touchmove", (t) => {
|
|
||||||
this.mobile && (this.moved = !0);
|
|
||||||
}),
|
|
||||||
r(this, "_stopEditing", () => {
|
|
||||||
if (!this._editing) return;
|
|
||||||
const { x: t, y: e } = this._editing,
|
|
||||||
i = this._getCell(t, e);
|
|
||||||
(i.style.width = ""), (i.style.height = "");
|
|
||||||
const s = i.firstChild;
|
|
||||||
s.removeEventListener("blur", this._stopEditing),
|
|
||||||
s.removeEventListener("keydown", this._blurIfEnter),
|
|
||||||
this._setVal(t, e, s.value),
|
|
||||||
this._onDataChanged(),
|
|
||||||
i.removeChild(s),
|
|
||||||
(this._editing = null),
|
|
||||||
this._renderTDContent(i, t, e);
|
|
||||||
}),
|
|
||||||
r(this, "_blurIfEnter", (t) => {
|
|
||||||
13 === t.keyCode && (this._stopEditing(), t.preventDefault());
|
|
||||||
}),
|
|
||||||
r(this, "_restyle", ({ x: t, y: e }) => {
|
|
||||||
const i = this._getCell(t, e);
|
|
||||||
i.className = this._classNames(t, e);
|
|
||||||
const s = a(this.checkResults.titles, t, e);
|
|
||||||
s ? i.setAttribute("title", s) : i.removeAttribute("title");
|
|
||||||
}),
|
|
||||||
r(this, "_refreshDisplayedValue", ({ x: t, y: e }) => {
|
|
||||||
const i = this._getCell(t, e).firstChild;
|
|
||||||
"DIV" === i.tagName &&
|
|
||||||
(i.textContent = this._divContent(t, e)),
|
|
||||||
this._restyle({ x: t, y: e });
|
|
||||||
}),
|
|
||||||
this._saveConstructorOptions(t),
|
|
||||||
this._setupDom(),
|
|
||||||
this._replaceDataWithArray(t.data),
|
|
||||||
this._incrementToFit({
|
|
||||||
x: this.columns.length - 1,
|
|
||||||
y: this._options.minRows - 1,
|
|
||||||
}),
|
|
||||||
this._fillScrollSpace();
|
|
||||||
}
|
|
||||||
_runChecks(t) {
|
|
||||||
const { titles: e, classNames: i } = this.checks(t);
|
|
||||||
this.checkResults = { titles: e, classNames: i };
|
|
||||||
}
|
|
||||||
_saveConstructorOptions({
|
|
||||||
data: t = [],
|
|
||||||
node: e = null,
|
|
||||||
onChange: i = null,
|
|
||||||
minRows: s = 1,
|
|
||||||
maxRows: n = 1 / 0,
|
|
||||||
css: o = "",
|
|
||||||
width: r = "100%",
|
|
||||||
height: h = "80vh",
|
|
||||||
columns: l,
|
|
||||||
checks: a,
|
|
||||||
}) {
|
|
||||||
if (
|
|
||||||
((this.columns = l),
|
|
||||||
(this.checks = a || (() => ({}))),
|
|
||||||
this._runChecks(t),
|
|
||||||
!e)
|
|
||||||
)
|
|
||||||
throw new Error(
|
|
||||||
"You need to pass a node argument to Importabular, like this : new Importabular({node: document.body})"
|
|
||||||
);
|
|
||||||
(this._parent = e),
|
|
||||||
(this._options = {
|
|
||||||
onChange: i,
|
|
||||||
minRows: s,
|
|
||||||
maxRows: n,
|
|
||||||
css:
|
|
||||||
"\nhtml{\n -ms-overflow-style: none;\n scrollbar-width: none;\n}\n::-webkit-scrollbar {\n width: 0;\n height:0;\n}\n*{\n box-sizing: border-box;\n}\nbody{\n padding: 0; \n margin: 0;\n}\ntable{\n border-spacing: 0;\n background: white;\n border: 1px solid #ddd;\n border-width: 0 1px 1px 0;\n font-size: 16px;\n font-family: sans-serif;\n border-collapse: separate;\n min-width:100%;\n}\ntd, th{\n padding:0;\n border: 1px solid;\n border-color: #ddd transparent transparent #ddd; \n}\ntd.selected.multi:not(.editing){\n background:#d7f2f9;\n} \ntd.focus:not(.editing){\n border-color: black;\n} \ntd>*, th>*{\n border:none;\n padding:10px;\n min-width:100px;\n min-height: 40px;\n font:inherit;\n line-height: 20px;\n color:inherit;\n white-space: normal;\n}\ntd>div::selection {\n color: none;\n background: none;\n}\n\n.placeholder div{\n user-select:none;\n color:rgba(0,0,0,0.2);\n}\n*[title] div{cursor:help;}\nth{text-align:left;}\n" +
|
|
||||||
o,
|
|
||||||
}),
|
|
||||||
(this._iframeStyle = {
|
|
||||||
width: r,
|
|
||||||
height: h,
|
|
||||||
border: "none",
|
|
||||||
background: "transparent",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
_fitBounds({ x: t, y: e }) {
|
|
||||||
return (
|
|
||||||
t >= 0 &&
|
|
||||||
t < this.columns.length &&
|
|
||||||
e >= 0 &&
|
|
||||||
e < this._options.maxRows
|
|
||||||
);
|
|
||||||
}
|
|
||||||
_fillScrollSpace() {
|
|
||||||
const t = Math.ceil(this.iframe.contentWindow.innerHeight / 40),
|
|
||||||
e = Math.ceil(this.iframe.contentWindow.innerWidth / 100);
|
|
||||||
this._incrementToFit({ x: e - 1, y: t - 1 });
|
|
||||||
}
|
|
||||||
getData() {
|
|
||||||
return this._data._toArr(this._width, this._height);
|
|
||||||
}
|
|
||||||
_onDataChanged() {
|
|
||||||
const t = this.getData();
|
|
||||||
this._options.onChange && this._options.onChange(t),
|
|
||||||
this._runChecks(t),
|
|
||||||
this._restyleAll();
|
|
||||||
}
|
|
||||||
_renderTDContent(t, e, i) {
|
|
||||||
const s = document.createElement("div");
|
|
||||||
t.setAttribute("x", e.toString()),
|
|
||||||
t.setAttribute("y", i.toString());
|
|
||||||
const n = this._divContent(e, i);
|
|
||||||
n ? (s.textContent = n) : (s.innerHTML = " "),
|
|
||||||
t.appendChild(s),
|
|
||||||
this._restyle({ x: e, y: i });
|
|
||||||
}
|
|
||||||
_divContent(t, e) {
|
|
||||||
return this._getVal(t, e) || this.columns[t].placeholder;
|
|
||||||
}
|
|
||||||
_setupDom() {
|
|
||||||
const t = document.createElement("iframe");
|
|
||||||
(this.iframe = t), this._parent.appendChild(t);
|
|
||||||
const e = t.contentWindow.document;
|
|
||||||
(this.cwd = e),
|
|
||||||
e.open(),
|
|
||||||
e.write(
|
|
||||||
`<html lang="${navigator.language}"><body><style>${this._options.css}</style></body></html>`
|
|
||||||
),
|
|
||||||
e.close(),
|
|
||||||
Object.assign(t.style, this._iframeStyle);
|
|
||||||
const i = document.createElement("table"),
|
|
||||||
s = document.createElement("tbody"),
|
|
||||||
n = document.createElement("THEAD"),
|
|
||||||
o = document.createElement("TR");
|
|
||||||
n.appendChild(o),
|
|
||||||
this.columns.forEach((t) => {
|
|
||||||
const e = document.createElement("TH"),
|
|
||||||
i = document.createElement("div");
|
|
||||||
(i.innerHTML = t.label),
|
|
||||||
t.title && e.setAttribute("title", t.title),
|
|
||||||
e.appendChild(i),
|
|
||||||
o.appendChild(e);
|
|
||||||
}),
|
|
||||||
i.appendChild(n),
|
|
||||||
i.appendChild(s),
|
|
||||||
e.body.appendChild(i),
|
|
||||||
(this.tbody = s),
|
|
||||||
(this.table = i);
|
|
||||||
for (let t = 0; t < this._height; t++) {
|
|
||||||
const e = document.createElement("tr");
|
|
||||||
s.appendChild(e);
|
|
||||||
for (let i = 0; i < this._width; i++) this._addCell(e, i, t);
|
|
||||||
}
|
|
||||||
h.forEach((t) => e.addEventListener(t, this[t], !0));
|
|
||||||
}
|
|
||||||
destroy() {
|
|
||||||
this._destroyEditing(),
|
|
||||||
h.forEach((t) => this.cwd.removeEventListener(t, this[t], !0)),
|
|
||||||
this.iframe.parentElement.removeChild(this.iframe);
|
|
||||||
}
|
|
||||||
_addCell(t, e, i) {
|
|
||||||
const s = document.createElement("td");
|
|
||||||
t.appendChild(s), this._renderTDContent(s, e, i);
|
|
||||||
}
|
|
||||||
_incrementHeight() {
|
|
||||||
if (!this._fitBounds({ x: 0, y: this._height })) return !1;
|
|
||||||
this._height++;
|
|
||||||
const t = this._height - 1,
|
|
||||||
e = document.createElement("tr");
|
|
||||||
this.tbody.appendChild(e);
|
|
||||||
for (let i = 0; i < this._width; i++) this._addCell(e, i, t);
|
|
||||||
return !0;
|
|
||||||
}
|
|
||||||
_incrementWidth() {
|
|
||||||
if (!this._fitBounds({ x: this._width, y: 0 })) return !1;
|
|
||||||
this._width++;
|
|
||||||
const t = this._width - 1;
|
|
||||||
return (
|
|
||||||
Array.prototype.forEach.call(this.tbody.children, (e, i) => {
|
|
||||||
this._addCell(e, t, i);
|
|
||||||
}),
|
|
||||||
!0
|
|
||||||
);
|
|
||||||
}
|
|
||||||
_incrementToFit({ x: t, y: e }) {
|
|
||||||
for (; t > this._width - 1 && this._incrementWidth(); );
|
|
||||||
for (; e > this._height - 1 && this._incrementHeight(); );
|
|
||||||
}
|
|
||||||
_getSelectionAsArray() {
|
|
||||||
const { rx: t, ry: e } = this._selection;
|
|
||||||
if (t[0] === t[1]) return null;
|
|
||||||
const i = t[1] - t[0],
|
|
||||||
s = e[1] - e[0],
|
|
||||||
n = [];
|
|
||||||
for (let o = 0; o < s; o++) {
|
|
||||||
n.push([]);
|
|
||||||
for (let s = 0; s < i; s++)
|
|
||||||
n[o].push(this._getVal(t[0] + s, e[0] + o));
|
|
||||||
}
|
|
||||||
return n;
|
|
||||||
}
|
|
||||||
_setAllSelectedCellsTo(t) {
|
|
||||||
this._forSelectionCoord(this._selection, ({ x: e, y: i }) =>
|
|
||||||
this._setVal(e, i, t)
|
|
||||||
),
|
|
||||||
this._onDataChanged(),
|
|
||||||
this._forSelectionCoord(
|
|
||||||
this._selection,
|
|
||||||
this._refreshDisplayedValue
|
|
||||||
);
|
|
||||||
}
|
|
||||||
_moveCursor({ x: t = 0, y: e = 0 }, i) {
|
|
||||||
const s = i ? this._selectionEnd : this._selectionStart,
|
|
||||||
n = { x: s.x + t, y: s.y + e };
|
|
||||||
this._fitBounds(n) &&
|
|
||||||
(this._stopEditing(),
|
|
||||||
this._incrementToFit(n),
|
|
||||||
this._changeSelectedCellsStyle(() => {
|
|
||||||
i
|
|
||||||
? (this._selectionEnd = n)
|
|
||||||
: (this._selectionStart =
|
|
||||||
this._selectionEnd =
|
|
||||||
this._focus =
|
|
||||||
n);
|
|
||||||
}),
|
|
||||||
this._scrollIntoView(n));
|
|
||||||
}
|
|
||||||
_tabCursorInSelection(t, e = 1) {
|
|
||||||
let { x: i, y: s } = this._focus || { x: 0, y: 0 };
|
|
||||||
const o = this._selectionSize(),
|
|
||||||
{ rx: r, ry: h } =
|
|
||||||
o > 1
|
|
||||||
? this._selection
|
|
||||||
: {
|
|
||||||
rx: [0, this.columns.length],
|
|
||||||
ry: [0, this._options.maxRows],
|
|
||||||
};
|
|
||||||
let l;
|
|
||||||
if (t) l = n(i, s, e, r[0], r[1] - 1, h[0], h[1] - 1);
|
|
||||||
else {
|
|
||||||
const t = n(s, i, e, h[0], h[1] - 1, r[0], r[1] - 1);
|
|
||||||
l = { x: t.y, y: t.x };
|
|
||||||
}
|
|
||||||
this._fitBounds(l) &&
|
|
||||||
(this._stopEditing(),
|
|
||||||
this._incrementToFit(l),
|
|
||||||
this._changeSelectedCellsStyle(() => {
|
|
||||||
(this._focus = l),
|
|
||||||
o <= 1 && (this._selectionStart = this._selectionEnd = l);
|
|
||||||
}),
|
|
||||||
this._scrollIntoView(l));
|
|
||||||
}
|
|
||||||
_scrollIntoView({ x: t, y: e }) {
|
|
||||||
this._getCell(t, e).scrollIntoView({
|
|
||||||
behavior: "smooth",
|
|
||||||
block: "nearest",
|
|
||||||
});
|
|
||||||
}
|
|
||||||
_endSelection() {
|
|
||||||
(this._selecting = !1), (this.tbody.style.userSelect = "");
|
|
||||||
}
|
|
||||||
_startEditing({ x: t, y: e }) {
|
|
||||||
this._editing = { x: t, y: e };
|
|
||||||
const i = this._getCell(t, e),
|
|
||||||
s = i.getBoundingClientRect(),
|
|
||||||
n = i.firstChild.getBoundingClientRect();
|
|
||||||
i.removeChild(i.firstChild);
|
|
||||||
const o = document.createElement("input");
|
|
||||||
(o.type = "text"),
|
|
||||||
(o.value = this._getVal(t, e)),
|
|
||||||
i.appendChild(o),
|
|
||||||
Object.assign(i.style, {
|
|
||||||
width: s.width - 2,
|
|
||||||
height: s.height,
|
|
||||||
}),
|
|
||||||
Object.assign(o.style, {
|
|
||||||
width: `${n.width}px`,
|
|
||||||
height: `${n.height}px`,
|
|
||||||
}),
|
|
||||||
o.focus(),
|
|
||||||
o.addEventListener("blur", this._stopEditing),
|
|
||||||
o.addEventListener("keydown", this._blurIfEnter);
|
|
||||||
}
|
|
||||||
_destroyEditing() {
|
|
||||||
if (this._editing) {
|
|
||||||
const { x: t, y: e } = this._editing,
|
|
||||||
i = this._getCell(t, e).firstChild;
|
|
||||||
i.removeEventListener("blur", this._stopEditing),
|
|
||||||
i.removeEventListener("keydown", this._blurIfEnter);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
_revertEdit() {
|
|
||||||
if (!this._editing) return;
|
|
||||||
const { x: t, y: e } = this._editing;
|
|
||||||
this._getCell(t, e).firstChild.value = this._getVal(t, e);
|
|
||||||
}
|
|
||||||
_changeSelectedCellsStyle(t) {
|
|
||||||
const e = this._selection;
|
|
||||||
t(),
|
|
||||||
(this._selection = this._getSelectionCoords()),
|
|
||||||
this._forSelectionCoord(e, this._restyle),
|
|
||||||
this._forSelectionCoord(this._selection, this._restyle);
|
|
||||||
}
|
|
||||||
_getSelectionCoords() {
|
|
||||||
if (!this._selectionStart) return { rx: [0, 0], ry: [0, 0] };
|
|
||||||
let t = [this._selectionStart.x, this._selectionEnd.x];
|
|
||||||
t[0] > t[1] && t.reverse();
|
|
||||||
let e = [this._selectionStart.y, this._selectionEnd.y];
|
|
||||||
return (
|
|
||||||
e[0] > e[1] && e.reverse(),
|
|
||||||
{ rx: [t[0], t[1] + 1], ry: [e[0], e[1] + 1] }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
_forSelectionCoord({ rx: t, ry: e }, i) {
|
|
||||||
for (let s = t[0]; s < t[1]; s++)
|
|
||||||
for (let t = e[0]; t < e[1]; t++)
|
|
||||||
this._fitBounds({ x: s, y: t }) && i({ x: s, y: t });
|
|
||||||
}
|
|
||||||
_restyleAll() {
|
|
||||||
for (var t = 0; t < this._width; t++)
|
|
||||||
for (var e = 0; e < this._height; e++)
|
|
||||||
this._restyle({ x: t, y: e });
|
|
||||||
}
|
|
||||||
_selectionSize() {
|
|
||||||
const { rx: t, ry: e } = this._selection;
|
|
||||||
return (t[1] - t[0]) * (e[1] - e[0]);
|
|
||||||
}
|
|
||||||
_classNames(t, e) {
|
|
||||||
const { rx: i, ry: s } = this._selection;
|
|
||||||
let n = "";
|
|
||||||
return (
|
|
||||||
t >= i[0] &&
|
|
||||||
t < i[1] &&
|
|
||||||
e >= s[0] &&
|
|
||||||
e < s[1] &&
|
|
||||||
((n += " selected"),
|
|
||||||
this._selectionSize() > 1 && (n += " multi")),
|
|
||||||
this._focus &&
|
|
||||||
this._focus.x === t &&
|
|
||||||
this._focus.y === e &&
|
|
||||||
(n += " focus"),
|
|
||||||
this._editing &&
|
|
||||||
t === this._editing.x &&
|
|
||||||
e === this._editing.y &&
|
|
||||||
(n += " editing"),
|
|
||||||
this._getVal(t, e) || (n += " placeholder"),
|
|
||||||
(n += " " + a(this.checkResults.classNames, t, e)),
|
|
||||||
n
|
|
||||||
);
|
|
||||||
}
|
|
||||||
_getCoords(t) {
|
|
||||||
let e = t.target;
|
|
||||||
for (; !e.getAttribute("x") && e.parentElement; )
|
|
||||||
e = e.parentElement;
|
|
||||||
return {
|
|
||||||
x: parseInt(e.getAttribute("x")) || 0,
|
|
||||||
y: parseInt(e.getAttribute("y")) || 0,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
setData(t) {
|
|
||||||
this._data._clear(), this._replaceDataWithArray(t);
|
|
||||||
for (let t = 0; t < this._width; t++)
|
|
||||||
for (let e = 0; e < this._height; e++)
|
|
||||||
this._refreshDisplayedValue({ x: t, y: e });
|
|
||||||
}
|
|
||||||
_replaceDataWithArray(t = [[]]) {
|
|
||||||
t.forEach((t, e) => {
|
|
||||||
t.forEach((t, i) => {
|
|
||||||
this._setVal(i, e, t);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
_setVal(t, e, i) {
|
|
||||||
this._fitBounds({ x: t, y: e }) &&
|
|
||||||
(this._data._setVal(t, e, i),
|
|
||||||
this._incrementToFit({ x: t + 1, y: e + 1 }),
|
|
||||||
this._refreshDisplayedValue({ x: t, y: e }));
|
|
||||||
}
|
|
||||||
_getVal(t, e) {
|
|
||||||
return this._data._getVal(t, e);
|
|
||||||
}
|
|
||||||
_getCell(t, e) {
|
|
||||||
return this.tbody.children[e].children[t];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
function a(t, e, i) {
|
|
||||||
return (t && t[i] && t[i][e]) || "";
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
e = {};
|
|
||||||
function i(s) {
|
|
||||||
if (e[s]) return e[s].exports;
|
|
||||||
var n = (e[s] = { exports: {} });
|
|
||||||
return t[s](n, n.exports, i), n.exports;
|
|
||||||
}
|
|
||||||
return (
|
|
||||||
(i.d = (t, e) => {
|
|
||||||
for (var s in e)
|
|
||||||
i.o(e, s) &&
|
|
||||||
!i.o(t, s) &&
|
|
||||||
Object.defineProperty(t, s, { enumerable: !0, get: e[s] });
|
|
||||||
}),
|
|
||||||
(i.o = (t, e) => Object.prototype.hasOwnProperty.call(t, e)),
|
|
||||||
i(103)
|
|
||||||
);
|
|
||||||
})().default;
|
|
||||||
});
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -81,3 +81,8 @@
|
||||||
display: inline;
|
display: inline;
|
||||||
margin-inline: 0.25em;
|
margin-inline: 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@import "vendor/jspreadsheet";
|
||||||
|
@import "vendor/jspreadsheet-datatables";
|
||||||
|
@import "vendor/jspreadsheet-theme";
|
||||||
|
@import "vendor/jsuites";
|
||||||
|
|
|
||||||
|
|
@ -46,7 +46,10 @@ export default apiInitializer("0.11.1", (api) => {
|
||||||
|
|
||||||
showModal("table-editor-modal", {
|
showModal("table-editor-modal", {
|
||||||
model: attrs,
|
model: attrs,
|
||||||
}).set("tableHtml", tempTable);
|
}).setProperties({
|
||||||
|
tableHtml: tempTable,
|
||||||
|
submitOnEnter: false,
|
||||||
|
});
|
||||||
return result.raw;
|
return result.raw;
|
||||||
})
|
})
|
||||||
.catch(popupAjaxError);
|
.catch(popupAjaxError);
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ export default class extends Controller {
|
||||||
// ? TODO move to component (read about not allowing Controllers to do DOM manipulation)
|
// ? TODO move to component (read about not allowing Controllers to do DOM manipulation)
|
||||||
this._super(...arguments);
|
this._super(...arguments);
|
||||||
|
|
||||||
loadScript(settings.theme_uploads.importabular).then(() => {
|
loadScript(settings.theme_uploads.jspreadsheet).then(() => {
|
||||||
this.buildTable(this.tableHtml);
|
this.buildTable(this.tableHtml);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -29,17 +29,18 @@ export default class extends Controller {
|
||||||
|
|
||||||
const columns = headings.map((heading) => {
|
const columns = headings.map((heading) => {
|
||||||
return {
|
return {
|
||||||
label: heading,
|
title: heading,
|
||||||
|
width: "100", // TODO make based on string length?
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
// eslint-disable-next-line no-unused-vars, no-undef
|
this.spreadsheet = jspreadsheet(document.getElementById("spreadsheet"), {
|
||||||
const sheet = new Importabular({
|
|
||||||
node: document.getElementById("table-editor-spreadsheet"),
|
|
||||||
columns,
|
|
||||||
data: tableData,
|
data: tableData,
|
||||||
width: "100vw",
|
columns,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const originalData = this.spreadsheet.getData();
|
||||||
|
console.log("Original Data:", originalData);
|
||||||
}
|
}
|
||||||
|
|
||||||
@action
|
@action
|
||||||
|
|
@ -50,6 +51,7 @@ export default class extends Controller {
|
||||||
@action
|
@action
|
||||||
editTable() {
|
editTable() {
|
||||||
// TODO: insert table edit submission logic
|
// TODO: insert table edit submission logic
|
||||||
|
console.log("New Data:", this.spreadsheet.getData());
|
||||||
this.send("closeModal");
|
this.send("closeModal");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,13 +6,14 @@
|
||||||
{{! TODO: Fix instances where multiple tables in a single post }}
|
{{! TODO: Fix instances where multiple tables in a single post }}
|
||||||
|
|
||||||
{{! TODO better id name }}
|
{{! TODO better id name }}
|
||||||
<div class="table-spreadsheet-container" id="table-editor-spreadsheet"></div>
|
<div id="spreadsheet" tabindex="1" class="jexcel_container"></div>
|
||||||
|
|
||||||
</DModalBody>
|
</DModalBody>
|
||||||
|
|
||||||
<div class="modal-footer">
|
<div class="modal-footer">
|
||||||
|
{{! TODO Fix submitOnEnter property always true before adding back "btn-primary" class to edit button}}
|
||||||
<DButton
|
<DButton
|
||||||
@class="btn-primary btn-edit-table"
|
@class="btn btn-edit-table"
|
||||||
@label={{theme-prefix "discourse_table_builder.edit.modal.create"}}
|
@label={{theme-prefix "discourse_table_builder.edit.modal.create"}}
|
||||||
@icon="pencil-alt"
|
@icon="pencil-alt"
|
||||||
@action={{action "editTable"}}
|
@action={{action "editTable"}}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,85 @@
|
||||||
|
table.jexcel {
|
||||||
|
border-right: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.jexcel > thead {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.jexcel > thead > tr > td {
|
||||||
|
border-top: 1px solid transparent;
|
||||||
|
border-left: 1px solid transparent;
|
||||||
|
border-right: 1px solid transparent;
|
||||||
|
border-bottom: 1px solid #000;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.jexcel > thead > tr > td.selected {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.jexcel > tbody > tr > td {
|
||||||
|
padding: 8px;
|
||||||
|
border-right: 1px solid transparent;
|
||||||
|
border-left: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.jexcel > tbody > tr > td:first-child {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
table.jexcel > tbody > tr.selected > td:first-child {
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_toolbar {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 0px;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_pagination > div > div {
|
||||||
|
border: 1px solid transparent;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_page_selected {
|
||||||
|
background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
|
||||||
|
border: 1px solid #979797 !important;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #333 !important;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.jexcel > div > table > tbody > tr,
|
||||||
|
.jexcel > div > table > thead
|
||||||
|
{
|
||||||
|
border-left:1px solid transparent;
|
||||||
|
}
|
||||||
|
.jexcel > div > table > tbody > tr > td
|
||||||
|
{
|
||||||
|
padding:10px;
|
||||||
|
border-right:1px solid transparent;
|
||||||
|
}
|
||||||
|
.jexcel > div > table > tbody > td.edition
|
||||||
|
{
|
||||||
|
padding:0px;
|
||||||
|
padding-left:4px;
|
||||||
|
}
|
||||||
|
.jexcel > div > table > tbody > tr > td:first-child
|
||||||
|
{
|
||||||
|
background-color:#fff;
|
||||||
|
font-weight:bold;
|
||||||
|
}
|
||||||
|
.jexcel > div > table > tbody > tr.selected > td:first-child
|
||||||
|
{
|
||||||
|
background-color:#eee;
|
||||||
|
}
|
||||||
|
.jexcel > div > table > thead > tr > td.selected
|
||||||
|
{
|
||||||
|
background-color:#eee;
|
||||||
|
}*/
|
||||||
|
|
@ -0,0 +1,185 @@
|
||||||
|
:root {
|
||||||
|
--jexcel_header_color: var(--primary);
|
||||||
|
--jexcel_header_color_highlighted: var(--tertiary);
|
||||||
|
--jexcel_header_background: var(--primary-low);
|
||||||
|
--jexcel_header_background_highlighted: var(--tertiary);
|
||||||
|
--jexcel_content_color: var(--primary);
|
||||||
|
--jexcel_content_color_highlighted: #333;
|
||||||
|
--jexcel_content_background: var(--secondary);
|
||||||
|
--jexcel_content_background_highlighted: var(--highlight-low);
|
||||||
|
--jexcel_menu_background: #7e7e7e;
|
||||||
|
--jexcel_menu_background_highlighted: #ebebeb;
|
||||||
|
--jexcel_menu_color: #ddd;
|
||||||
|
--jexcel_menu_color_highlighted: #222;
|
||||||
|
--jexcel_border_color: var(--primary-medium);
|
||||||
|
--jexcel_border_color_highlighted: var(--highlight-high);
|
||||||
|
--active_color: #eee;
|
||||||
|
--active-color: var(--active_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel {
|
||||||
|
border-bottom: 1px solid var(--jexcel_border_color);
|
||||||
|
border-right: 1px solid var(--jexcel_border_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td,
|
||||||
|
.jexcel > thead > tr > td {
|
||||||
|
border-top: 1px solid var(--jexcel_border_color);
|
||||||
|
border-left: 1px solid var(--jexcel_border_color);
|
||||||
|
background-color: var(--jexcel_content_background);
|
||||||
|
color: var(--jexcel_content_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td:first-child,
|
||||||
|
.jexcel > thead > tr > td {
|
||||||
|
background-color: var(--jexcel_header_background);
|
||||||
|
color: var(--jexcel_header_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > thead > tr > td.selected,
|
||||||
|
.jexcel > tbody > tr.selected > td:first-child {
|
||||||
|
background-color: var(--jexcel_header_background_highlighted);
|
||||||
|
color: var(--jexcel_header_color_highlighted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td.jexcel_cursor a {
|
||||||
|
color: var(--active-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_pagination > div > div {
|
||||||
|
color: var(--jexcel_header_color);
|
||||||
|
background: var(--jexcel_header_background);
|
||||||
|
border: 1px solid var(--jexcel_border_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_page,
|
||||||
|
.jexcel_container input,
|
||||||
|
.jexcel_container select {
|
||||||
|
color: var(--jexcel_header_color);
|
||||||
|
background: var(--jexcel_header_background);
|
||||||
|
border: 1px solid var(--jexcel_border_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_contextmenu {
|
||||||
|
border: 1px solid var(--jexcel_border_color);
|
||||||
|
background: var(--jexcel_menu_background);
|
||||||
|
color: var(--jexcel_menu_color);
|
||||||
|
box-shadow: var(--jexcel_menu_box_shadow);
|
||||||
|
-webkit-box-shadow: var(--jexcel_menu_box_shadow);
|
||||||
|
-moz-box-shadow: var(--jexcel_menu_box_shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_contextmenu > div a {
|
||||||
|
color: var(--jexcel_menu_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_contextmenu > div:not(.contextmenu-line):hover a {
|
||||||
|
color: var(--jexcel_menu_color_highlighted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_contextmenu > div:not(.contextmenu-line):hover {
|
||||||
|
background: var(--jexcel_menu_background_highlighted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_dropdown .jdropdown-container,
|
||||||
|
.jexcel_dropdown .jdropdown-content {
|
||||||
|
background-color: var(--jexcel_content_background);
|
||||||
|
color: var(--jexcel_content_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_dropdown .jdropdown-item {
|
||||||
|
color: var(--jexcel_content_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_dropdown .jdropdown-item:hover,
|
||||||
|
.jexcel_dropdown .jdropdown-selected,
|
||||||
|
.jexcel_dropdown .jdropdown-cursor {
|
||||||
|
background-color: var(--jexcel_content_background_highlighted);
|
||||||
|
color: var(--jexcel_content_color_highlighted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .jcalendar-content {
|
||||||
|
background-color: var(--jexcel_header_background);
|
||||||
|
color: var(--jexcel_header_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .jcalendar-content > table {
|
||||||
|
background-color: var(--jexcel_content_background);
|
||||||
|
color: var(--jexcel_content_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .jcalendar-weekday {
|
||||||
|
background-color: var(--jexcel_content_background_highlighted);
|
||||||
|
color: var(--jexcel_content_color_highlighted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .jcalendar-sunday {
|
||||||
|
color: var(--jexcel_header_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .jcalendar-selected {
|
||||||
|
background-color: var(--jexcel_content_background_highlighted);
|
||||||
|
color: var(--jexcel_content_color_highlighted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_toolbar i.jexcel_toolbar_item {
|
||||||
|
color: var(--jexcel_content_color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_toolbar i.jexcel_toolbar_item:hover {
|
||||||
|
background: var(--jexcel_content_background_highlighted);
|
||||||
|
color: var(--jexcel_content_color_highlighted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_toolbar {
|
||||||
|
background: var(--jexcel_header_background);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_content::-webkit-scrollbar-track {
|
||||||
|
background: var(--jexcel_background_head);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_content::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--jexcel_background_head_highlighted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_border_main {
|
||||||
|
border: 1px solid #000;
|
||||||
|
border-color: var(--jexcel_border_color_highlighted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .highlight {
|
||||||
|
background-color: var(--jexcel_content_background_highlighted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .highlight-bottom {
|
||||||
|
border-bottom: 1px solid var(--jexcel_border_color_highlighted);
|
||||||
|
}
|
||||||
|
.jexcel .highlight-right {
|
||||||
|
border-right: 1px solid var(--jexcel_border_color_highlighted);
|
||||||
|
}
|
||||||
|
.jexcel .highlight-left {
|
||||||
|
border-left: 1px solid var(--jexcel_border_color_highlighted);
|
||||||
|
}
|
||||||
|
.jexcel .highlight-top {
|
||||||
|
border-top: 1px solid var(--jexcel_border_color_highlighted);
|
||||||
|
}
|
||||||
|
.jexcel .copying-top {
|
||||||
|
border-top-color: var(--jexcel_border_color_highlighted);
|
||||||
|
}
|
||||||
|
.jexcel .copying-right {
|
||||||
|
border-right-color: var(--jexcel_border_color_highlighted);
|
||||||
|
}
|
||||||
|
.jexcel .copying-left {
|
||||||
|
border-left-color: var(--jexcel_border_color_highlighted);
|
||||||
|
}
|
||||||
|
.jexcel .copying-bottom {
|
||||||
|
border-bottom-color: var(--jexcel_border_color_highlighted);
|
||||||
|
}
|
||||||
|
.jexcel_border_main,
|
||||||
|
.jexcel .highlight-top.highlight-left,
|
||||||
|
.jexcel .highlight-top,
|
||||||
|
.jexcel .highlight-left {
|
||||||
|
-webkit-box-shadow: unset;
|
||||||
|
box-shadow: unset;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,693 @@
|
||||||
|
:root {
|
||||||
|
--jexcel-border-color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_container {
|
||||||
|
display: inline-block;
|
||||||
|
padding-right: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overscroll-behavior: contain;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_container.fullscreen {
|
||||||
|
position: fixed;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: 21;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_container.fullscreen .jexcel_content {
|
||||||
|
overflow: auto;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_container.with-toolbar .jexcel > thead > tr > td {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_container.fullscreen.with-toolbar {
|
||||||
|
height: calc(100% - 46px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_content {
|
||||||
|
display: inline-block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-right: 3px;
|
||||||
|
padding-bottom: 3px;
|
||||||
|
position: relative;
|
||||||
|
scrollbar-width: thin;
|
||||||
|
scrollbar-color: #666 transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
@supports (-moz-appearance: none) {
|
||||||
|
.jexcel_content {
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_content::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_content::-webkit-scrollbar-track {
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_content::-webkit-scrollbar-thumb {
|
||||||
|
background: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel {
|
||||||
|
border-collapse: separate;
|
||||||
|
table-layout: fixed;
|
||||||
|
white-space: nowrap;
|
||||||
|
empty-cells: show;
|
||||||
|
border: 0px;
|
||||||
|
background-color: #fff;
|
||||||
|
width: 0;
|
||||||
|
|
||||||
|
border-top: 1px solid transparent;
|
||||||
|
border-left: 1px solid transparent;
|
||||||
|
border-right: 1px solid #ccc;
|
||||||
|
border-bottom: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > thead > tr > td {
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
border-right: 1px solid transparent;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
padding: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
position: -webkit-sticky;
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_container.with-toolbar .jexcel > thead > tr > td {
|
||||||
|
top: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > thead > tr > td.dragging {
|
||||||
|
background-color: #fff;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > thead > tr > td.selected {
|
||||||
|
background-color: #dcdcdc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > thead > tr > td.arrow-up {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center right 5px;
|
||||||
|
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 14l5-5 5 5H7z' fill='gray'/%3E%3C/svg%3E");
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > thead > tr > td.arrow-down {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center right 5px;
|
||||||
|
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='gray'/%3E%3C/svg%3E");
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td:first-child {
|
||||||
|
position: relative;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody.resizable > tr > td:first-child::before {
|
||||||
|
content: "\00a0";
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
cursor: row-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody.draggable > tr > td:first-child::after {
|
||||||
|
content: "\00a0";
|
||||||
|
width: 3px;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: 0px;
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr.dragging > td {
|
||||||
|
background-color: #eee;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td {
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
border-right: 1px solid transparent;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
padding: 4px;
|
||||||
|
white-space: nowrap;
|
||||||
|
box-sizing: border-box;
|
||||||
|
line-height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_overflow > tbody > tr > td {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td:last-child {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td > img {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td.readonly {
|
||||||
|
color: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
.jexcel > tbody > tr.selected > td:first-child {
|
||||||
|
background-color: #dcdcdc;
|
||||||
|
}
|
||||||
|
.jexcel > tbody > tr > td > select,
|
||||||
|
.jexcel > tbody > tr > td > input,
|
||||||
|
.jexcel > tbody > tr > td > textarea {
|
||||||
|
border: 0px;
|
||||||
|
border-radius: 0px;
|
||||||
|
outline: 0px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
padding-right: 2px;
|
||||||
|
background-color: transparent;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td > textarea {
|
||||||
|
resize: none;
|
||||||
|
padding-top: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td > input[type="checkbox"] {
|
||||||
|
width: 12px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
.jexcel > tbody > tr > td > input[type="radio"] {
|
||||||
|
width: 12px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td > select {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position-x: 100%;
|
||||||
|
background-position-y: 40%;
|
||||||
|
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSdibGFjaycgaGVpZ2h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0JyB3aWR0aD0nMjQnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcgMTBsNSA1IDUtNXonLz48cGF0aCBkPSdNMCAwaDI0djI0SDB6JyBmaWxsPSdub25lJy8+PC9zdmc+);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td.jexcel_dropdown {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top 50% right 5px;
|
||||||
|
background-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='lightgray'/%3E%3C/svg%3E");
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td.jexcel_dropdown.jexcel_comments {
|
||||||
|
background: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath d='M7 10l5 5 5-5H7z' fill='lightgray'/%3E%3C/svg%3E")
|
||||||
|
top 50% right 5px no-repeat,
|
||||||
|
url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFuGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphMTlhZDJmOC1kMDI2LTI1NDItODhjOS1iZTRkYjkyMmQ0MmQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpkOGI5NDUyMS00ZjEwLWQ5NDktYjUwNC0wZmU1N2I3Nzk1MDEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIHN0RXZ0OndoZW49IjIwMTktMDEtMzFUMTg6NTU6MDhaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmExOWFkMmY4LWQwMjYtMjU0Mi04OGM5LWJlNGRiOTIyZDQyZCIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4En6MDAAAAX0lEQVQYlX3KOw6AIBBAwS32RpJADXfx0pTET+ERZJ8F8RODFtONsG0QAoh0CSDM82dqodaBdQXnfoLZQM7gPai+wjNNE8R4pTuAYNZSKZASqL7CMy0LxNgJp30fKYUDi3+vIqb/+rUAAAAASUVORK5CYII=")
|
||||||
|
top right no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td > .color {
|
||||||
|
width: 90%;
|
||||||
|
height: 10px;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td > a {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tbody > tr > td.highlight > a {
|
||||||
|
color: blue;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > tfoot > tr > td {
|
||||||
|
border-top: 1px solid #ccc;
|
||||||
|
border-left: 1px solid #ccc;
|
||||||
|
border-right: 1px solid transparent;
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
padding: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .highlight {
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .highlight-top {
|
||||||
|
border-top: 1px solid #000; /* var(--jexcel-border-color);*/
|
||||||
|
box-shadow: 0px -1px #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .highlight-left {
|
||||||
|
border-left: 1px solid #000; /* var(--jexcel-border-color);*/
|
||||||
|
box-shadow: -1px 0px #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .highlight-right {
|
||||||
|
border-right: 1px solid #000; /* var(--jexcel-border-color);*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .highlight-bottom {
|
||||||
|
border-bottom: 1px solid #000; /* var(--jexcel-border-color);*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .highlight-top.highlight-left {
|
||||||
|
box-shadow: -1px -1px #ccc;
|
||||||
|
-webkit-box-shadow: -1px -1px #ccc;
|
||||||
|
-moz-box-shadow: -1px -1px #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .highlight-selected {
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
.jexcel .selection {
|
||||||
|
background-color: rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
.jexcel .selection-left {
|
||||||
|
border-left: 1px dotted #000;
|
||||||
|
}
|
||||||
|
.jexcel .selection-right {
|
||||||
|
border-right: 1px dotted #000;
|
||||||
|
}
|
||||||
|
.jexcel .selection-top {
|
||||||
|
border-top: 1px dotted #000;
|
||||||
|
}
|
||||||
|
.jexcel .selection-bottom {
|
||||||
|
border-bottom: 1px dotted #000;
|
||||||
|
}
|
||||||
|
.jexcel_corner {
|
||||||
|
position: absolute;
|
||||||
|
background-color: rgb(0, 0, 0);
|
||||||
|
height: 1px;
|
||||||
|
width: 1px;
|
||||||
|
border: 1px solid rgb(255, 255, 255);
|
||||||
|
top: -2000px;
|
||||||
|
left: -2000px;
|
||||||
|
cursor: crosshair;
|
||||||
|
box-sizing: initial;
|
||||||
|
z-index: 20;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .editor {
|
||||||
|
outline: 0px solid transparent;
|
||||||
|
overflow: visible;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-align: left;
|
||||||
|
padding: 0px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: visible !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .editor > input {
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .editor .jupload {
|
||||||
|
position: fixed;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 40;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
-webkit-border-radius: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
-webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||||
|
0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
|
||||||
|
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||||
|
0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
width: 300px;
|
||||||
|
min-height: 225px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .editor .jupload img {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .editor .jexcel_richtext {
|
||||||
|
position: fixed;
|
||||||
|
top: 100%;
|
||||||
|
z-index: 40;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
-webkit-box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||||
|
0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
|
||||||
|
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
|
||||||
|
0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
|
||||||
|
padding: 10px;
|
||||||
|
background-color: #fff;
|
||||||
|
min-width: 280px;
|
||||||
|
max-width: 310px;
|
||||||
|
margin-top: 2px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .editor .jclose:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: 10px;
|
||||||
|
content: "close";
|
||||||
|
font-family: "Material icons";
|
||||||
|
font-size: 24px;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
cursor: pointer;
|
||||||
|
text-shadow: 0px 0px 5px #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel,
|
||||||
|
.jexcel td,
|
||||||
|
.jexcel_corner {
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-user-drag: none;
|
||||||
|
-khtml-user-drag: none;
|
||||||
|
-moz-user-drag: none;
|
||||||
|
-o-user-drag: none;
|
||||||
|
user-drag: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_textarea {
|
||||||
|
position: absolute;
|
||||||
|
top: -999px;
|
||||||
|
left: -999px;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
.jexcel .dragline {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.jexcel .dragline div {
|
||||||
|
position: relative;
|
||||||
|
top: -6px;
|
||||||
|
height: 5px;
|
||||||
|
width: 22px;
|
||||||
|
}
|
||||||
|
.jexcel .dragline div:hover {
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .onDrag {
|
||||||
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .error {
|
||||||
|
border: 1px solid red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel thead td.resizing {
|
||||||
|
border-right-style: dotted !important;
|
||||||
|
border-right-color: red !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel tbody tr.resizing > td {
|
||||||
|
border-bottom-style: dotted !important;
|
||||||
|
border-bottom-color: red !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel tbody td.resizing {
|
||||||
|
border-right-style: dotted !important;
|
||||||
|
border-right-color: red !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .jdropdown-header {
|
||||||
|
border: 0px !important;
|
||||||
|
outline: none !important;
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100% !important;
|
||||||
|
padding: 0px !important;
|
||||||
|
padding-left: 8px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .jdropdown-container {
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .jdropdown-container-header {
|
||||||
|
padding: 0px;
|
||||||
|
margin: 0px;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .jdropdown-picker {
|
||||||
|
border: 0px !important;
|
||||||
|
padding: 0px !important;
|
||||||
|
width: inherit;
|
||||||
|
height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .jexcel_comments {
|
||||||
|
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFuGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTAxLTMxVDE4OjU1OjA4WiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDphMTlhZDJmOC1kMDI2LTI1NDItODhjOS1iZTRkYjkyMmQ0MmQiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpkOGI5NDUyMS00ZjEwLWQ5NDktYjUwNC0wZmU1N2I3Nzk1MDEiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDplMzdjYmE1ZS1hYTMwLWNkNDUtYTAyNS1lOWYxZjk2MzUzOGUiIHN0RXZ0OndoZW49IjIwMTktMDEtMzFUMTg6NTU6MDhaIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmExOWFkMmY4LWQwMjYtMjU0Mi04OGM5LWJlNGRiOTIyZDQyZCIgc3RFdnQ6d2hlbj0iMjAxOS0wMS0zMVQxODo1NTowOFoiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4En6MDAAAAX0lEQVQYlX3KOw6AIBBAwS32RpJADXfx0pTET+ERZJ8F8RODFtONsG0QAoh0CSDM82dqodaBdQXnfoLZQM7gPai+wjNNE8R4pTuAYNZSKZASqL7CMy0LxNgJp30fKYUDi3+vIqb/+rUAAAAASUVORK5CYII=");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .sp-replacer {
|
||||||
|
margin: 2px;
|
||||||
|
border: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel > thead > tr.jexcel_filter > td > input {
|
||||||
|
border: 0px;
|
||||||
|
width: 100%;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_about {
|
||||||
|
float: right;
|
||||||
|
font-size: 0.7em;
|
||||||
|
padding: 2px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.jexcel_about a {
|
||||||
|
color: #ccc;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_about img {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_filter {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_filter > div {
|
||||||
|
padding: 8px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_pagination {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_pagination > div {
|
||||||
|
display: flex;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_pagination > div:last-child {
|
||||||
|
padding-right: 10px;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_pagination > div > div {
|
||||||
|
text-align: center;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 34px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-left: 2px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_page {
|
||||||
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_page_selected {
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_toolbar {
|
||||||
|
display: flex;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
padding: 4px;
|
||||||
|
margin: 0px 2px 4px 1px;
|
||||||
|
position: sticky;
|
||||||
|
top: 0px;
|
||||||
|
z-index: 21;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_toolbar:empty {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_toolbar i.jexcel_toolbar_item {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
padding: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_toolbar i.jexcel_toolbar_item:hover {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_toolbar select.jexcel_toolbar_item {
|
||||||
|
margin-left: 2px;
|
||||||
|
margin-right: 2px;
|
||||||
|
display: inline-block;
|
||||||
|
border: 0px;
|
||||||
|
background-color: transparent;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .dragging-left {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top 50% left 0px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M14 7l-5 5 5 5V7z'/%3E%3Cpath fill='none' d='M24 0v24H0V0h24z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .dragging-right {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top 50% right 0px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M10 17l5-5-5-5v10z'/%3E%3Cpath fill='none' d='M0 24V0h24v24H0z'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_tabs .jexcel_tab {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_tabs .jexcel_tab_link {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 10px;
|
||||||
|
padding-left: 20px;
|
||||||
|
padding-right: 20px;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_tabs .jexcel_tab_link.selected {
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel_hidden_index > tbody > tr > td:first-child,
|
||||||
|
.jexcel_hidden_index > thead > tr > td:first-child,
|
||||||
|
.jexcel_hidden_index > tfoot > tr > td:first-child,
|
||||||
|
.jexcel_hidden_index > colgroup > col:first-child {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .jrating {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
.jexcel .jrating > div {
|
||||||
|
zoom: 0.55;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .copying-top {
|
||||||
|
border-top: 1px dashed #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .copying-left {
|
||||||
|
border-left: 1px dashed #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .copying-right {
|
||||||
|
border-right: 1px dashed #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .copying-bottom {
|
||||||
|
border-bottom: 1px dashed #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel .jexcel_column_filter {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: top 50% right 5px;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='gray' width='18px' height='18px'%3E%3Cpath d='M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0px;
|
||||||
|
padding-left: 6px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel thead .jexcel_freezed,
|
||||||
|
.jexcel tfoot .jexcel_freezed {
|
||||||
|
left: 0px;
|
||||||
|
z-index: 3 !important;
|
||||||
|
box-shadow: 2px 0px 2px 0.2px #ccc !important;
|
||||||
|
-webkit-box-shadow: 2px 0px 2px 0.2px #ccc !important;
|
||||||
|
-moz-box-shadow: 2px 0px 2px 0.2px #ccc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jexcel tbody .jexcel_freezed {
|
||||||
|
position: relative;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 1px 1px 1px 1px #ccc !important;
|
||||||
|
-webkit-box-shadow: 2px 4px 4px 0.1px #ccc !important;
|
||||||
|
-moz-box-shadow: 2px 4px 4px 0.1px #ccc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.red {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue