Commit 9ebb3207 authored by Mikolaï Krol's avatar Mikolaï Krol Committed by Mikolaï Krol

erp5_jexcel_editor: handle multiple tabs (formula bar not working)

erp5_jexcel_editor: fix tabs and formula bar

erp5_jexcel_editor: remove and rename tabs

erp5_jexcel_editor: fixed delete and rename tabs

erp5_jexcel_editor: add formula from toolbar and real cell value in formula bar

erp5_jexcel_editor: more formulas

erp5_jexcel_editor: fixed merge issue, added warning before merge, fixed formula dropdown, parse formulas and hide js code i the cell, added cell selection input

erp5_jexcel_editor: new  columns types : images, html, color, text, calendar, checkbox

erp5_jexcel_editor: fixed select width

erp5_jexcel_editor: stable version

erp5_jexcel_editor: fixed merge save conflict

erp5_jexcel_editor: fixed formula dropdown, different cursors
parent 9c29b517
...@@ -3,12 +3,14 @@ url_list = [ ...@@ -3,12 +3,14 @@ url_list = [
"rsvp.js", "rsvp.js",
"jexcel.gadget.html", "jexcel.gadget.html",
"jexcel.gadget.js", "jexcel.gadget.js",
"gadget.utils.template.html",
"gadget.utils.template.js",
"complements.css",
"fx.png",
"fonts.ttf", "fonts.ttf",
"icons.css", "icons.css",
"jexcel/jexcel.js", "jexcel/jexcel.js",
"jexcel/jexcel.css", "jexcel/jexcel.css",
"jexcel/jexcel.theme.css",
"jexcel/jexcel.webcomponent.js",
"jsuites/jsuites.js", "jsuites/jsuites.js",
"jsuites/jsuites.css", "jsuites/jsuites.css",
] ]
......
...@@ -8,9 +8,30 @@ div.jexcel_formula img{ ...@@ -8,9 +8,30 @@ div.jexcel_formula img{
input.jexcel_formula { input.jexcel_formula {
margin-left: 2px; margin-left: 2px;
width: 97%; width: 92.8%;
position:sticky; position:sticky;
top:0px; top:0px;
z-index:21; z-index:0;
display: inline-block; display: inline-block;
} }
input.cell_input {
display: inline-block;
width: 4%;
}
input.jexcel_search {
width: 40px;
}
.jexcel_toolbar select.minimize {
width: 90px;
}
td {
cursor: cell;
}
input.readonly {
cursor: not-allowed;
}
...@@ -3,8 +3,24 @@ ...@@ -3,8 +3,24 @@
(function (window, rJS, jexcel) { (function (window, rJS, jexcel) {
"use strict"; "use strict";
var numberToLetter = function (i) {
return (i >= 26 ? numberToLetter((i / 26 >> 0) - 1) : '') + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[i % 26 >> 0];
};
var getCoordsFromCell = function (cell) {
var x = Number(cell.dataset.x);
var y = Number(cell.dataset.y) + 1;
return numberToLetter(x) + y.toString();
};
var fireDblClick = function (el) {
var clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent('dblclick', true, true);
el.dispatchEvent(clickEvent);
};
var template = { var template = {
minDimensions: [26, 100], minDimensions: [26, 200],
defaultColWidth: 100, defaultColWidth: 100,
allowExport: true, allowExport: true,
columnSorting: true, columnSorting: true,
...@@ -24,7 +40,8 @@ ...@@ -24,7 +40,8 @@
search: true, search: true,
fullscreen: true, fullscreen: true,
autoIncrement: true, autoIncrement: true,
parseFormulas: true parseFormulas: true,
wordWrap: true
}; };
var undo = { var undo = {
...@@ -47,21 +64,12 @@ ...@@ -47,21 +64,12 @@
type: 'i', type: 'i',
content: 'table_chart', content: 'table_chart',
onclick: function (a, b, c) { onclick: function (a, b, c) {
var cell = document.querySelector("td.highlight"); var cell = a.querySelector("td.highlight");
var x = Number(cell.dataset.x);
var selected = b.getJson(true); var selected = b.getJson(true);
var colspan = Object.keys(selected[0]).length; var colspan = Object.keys(selected[0]).length;
var rowspan = selected.length; var rowspan = selected.length;
var letter = ""; var coor = getCoordsFromCell(cell);
if (x <= 25) { confirm("Top left selected cell's content will be kept, other will be erased.") ? b.setMerge(coor, colspan, rowspan) : null;
letter += String.fromCharCode(97 + x).toUpperCase();
}
else {
letter += String.fromCharCode(97 + Math.trunc(x / 25) - 1).toUpperCase();
letter += String.fromCharCode(97 + (x % 26)).toUpperCase();
}
var coor = letter + (Number(cell.dataset.y) + 1).toString();
b.setMerge(coor, colspan, rowspan);
} }
}; };
...@@ -71,15 +79,7 @@ ...@@ -71,15 +79,7 @@
onclick: function (a, b, c) { onclick: function (a, b, c) {
var cell = document.querySelector("td.highlight-selected"); var cell = document.querySelector("td.highlight-selected");
var x = Number(cell.dataset.x); var x = Number(cell.dataset.x);
var letter = ""; var coor = getCoordsFromCell(cell);
if (x <= 25) {
letter += String.fromCharCode(97 + x).toUpperCase();
}
else {
letter += String.fromCharCode(97 + Math.trunc(x / 25) - 1).toUpperCase();
letter += String.fromCharCode(97 + (x % 26)).toUpperCase();
}
var coor = letter + (Number(cell.dataset.y) + 1).toString();
b.removeMerge(coor); b.removeMerge(coor);
} }
}; };
...@@ -97,10 +97,11 @@ ...@@ -97,10 +97,11 @@
k: 'font-family', k: 'font-family',
v: ['Arial', 'Comic Sans MS', 'Verdana', 'Calibri', 'Tahoma', 'Helvetica', 'DejaVu Sans', 'Times New Roman', 'Georgia', 'Antiqua'] v: ['Arial', 'Comic Sans MS', 'Verdana', 'Calibri', 'Tahoma', 'Helvetica', 'DejaVu Sans', 'Times New Roman', 'Georgia', 'Antiqua']
}; };
var font_size = { var font_size = {
type: 'select', type: 'select',
k: 'font-size', k: 'font-size',
v: ['9px', '10px', '11px', '12px', '13px', '14px', '15px', '16px', '17px', '18px', '19px', '20px', '22px', '24px', '26px', '28px', '30px'] v: ['8px', '10px', '12px', '14px', '16px', '18px', '20px', '22px', '24px', '26px', '28px', '30px', '34px', '38px', '42px', '46px', '50px']
}; };
var text_align_left = { var text_align_left = {
...@@ -183,9 +184,147 @@ ...@@ -183,9 +184,147 @@
k: 'background-color' k: 'background-color'
}; };
var image = {
type: "i",
content: "image",
onclick: function (a, b, c) {
var cell = a.querySelector("td.highlight-selected");
if (cell && confirm("Data in this column will be erased.")) {
var worksheet = document.querySelector('.selected').getAttribute('data-spreadsheet');
var instance = document.querySelector('.spreadsheet').jexcel[worksheet];
instance.options.columns[Number(cell.dataset.x)].type = "image";
fireDblClick(cell);
}
}
};
var checkbox = {
type: "i",
content: "checkbox",
onclick: function (a, b, c) {
var cell = a.querySelector("td.highlight-selected");
if (cell && confirm("Data in this column will be erased.")) {
var worksheet = document.querySelector('.selected').getAttribute('data-spreadsheet');
var instance = document.querySelector('.spreadsheet').jexcel[worksheet];
var column = instance.el.querySelectorAll("td[data-x='" + cell.dataset.x + "']");
var array = [...column];
array.shift();
array.forEach(function (cell) {
instance.setValue(getCoordsFromCell(cell), "");
cell.innerHTML = "<input type='checkbox' name='c" + cell.dataset.x + "'>";
});
instance.options.columns[Number(cell.dataset.x)].type = "checkbox";
}
}
};
var radio = {
type: "i",
content: "radio",
onclick: function (a, b, c) {
var cell = a.querySelector("td.highlight-selected");
if (cell) {
var worksheet = document.querySelector('.selected').getAttribute('data-spreadsheet');
var instance = document.querySelector('.spreadsheet').jexcel[worksheet];
var column = instance.el.querySelectorAll("td[data-x='" + cell.dataset.x + "']");
var array = [...column];
array.shift();
array.forEach(function (cell) {
instance.setValue(getCoordsFromCell(cell), "");
cell.innerHTML = "<input type='radio'>";
});
instance.options.columns[Number(cell.dataset.x)].type = "radio";
}
}
};
var text = {
type: "i",
content: "title",
onclick: function (a, b, c) {
var cell = a.querySelector("td.highlight-selected");
if (cell && confirm("Data in this column will be erased.")) {
var worksheet = document.querySelector('.selected').getAttribute('data-spreadsheet');
var instance = document.querySelector('.spreadsheet').jexcel[worksheet];
var column = instance.el.querySelectorAll("td[data-x='" + cell.dataset.x + "']");
var array = [...column];
instance.options.columns[Number(cell.dataset.x)].type = "text";
array.shift();
array.forEach(function (cell) {
cell.innerHTML = "";
instance.setValue(getCoordsFromCell(cell), "");
});
fireDblClick(cell);
}
}
};
var html = {
type: "i",
content: "list",
onclick: function (a, b, c) {
var cell = a.querySelector("td.highlight-selected");
if (cell && confirm("Data in this column will be erased.")) {
var worksheet = document.querySelector('.selected').getAttribute('data-spreadsheet');
var instance = document.querySelector('.spreadsheet').jexcel[worksheet];
var column = instance.el.querySelectorAll("td[data-x='" + cell.dataset.x + "']");
var array = [...column];
instance.options.columns[Number(cell.dataset.x)].type = "html";
array.shift();
array.forEach(function (cell) {
cell.innerHTML = "";
instance.setValue(getCoordsFromCell(cell), "");
});
fireDblClick(cell);
}
}
};
var calendar = {
type: "i",
content: "calendar_today",
onclick: function (a, b, c) {
var cell = a.querySelector("td.highlight-selected");
if (cell && confirm("Data in this column will be erased.")) {
var worksheet = document.querySelector('.selected').getAttribute('data-spreadsheet');
var instance = document.querySelector('.spreadsheet').jexcel[worksheet];
var column = instance.el.querySelectorAll("td[data-x='" + cell.dataset.x + "']");
var array = [...column];
instance.options.columns[Number(cell.dataset.x)].type = "calendar";
array.shift();
array.forEach(function (cell) {
cell.innerHTML = "";
instance.setValue(getCoordsFromCell(cell), "");
});
fireDblClick(cell);
}
}
};
var color = {
type: "i",
content: "color_lens",
onclick: function (a, b, c) {
var cell = a.querySelector("td.highlight-selected");
if (cell && confirm("Data in this column will be erased.")) {
var worksheet = document.querySelector('.selected').getAttribute('data-spreadsheet');
var instance = document.querySelector('.spreadsheet').jexcel[worksheet];
var column = instance.el.querySelectorAll("td[data-x='" + cell.dataset.x + "']");
var array = [...column];
array.shift();
array.forEach(function (cell) {
instance.setValue(getCoordsFromCell(cell), "");
cell.innerHTML = "<div class='color' style='background-color: rgb(0,0,0);'></div>";
});
instance.options.columns[Number(cell.dataset.x)].type = "color";
fireDblClick(cell);
}
}
};
rJS(window) rJS(window)
.declareMethod("getToolbarList", function (add_function, dict) { .declareMethod("getToolbarList", function (add_function, remove_function, dict) {
var list = []; var list = [];
if (dict.hasOwnProperty("undo_redo") && dict.undo_redo) { if (dict.hasOwnProperty("undo_redo") && dict.undo_redo) {
list.push(undo, redo); list.push(undo, redo);
...@@ -196,7 +335,12 @@ ...@@ -196,7 +335,12 @@
content: 'add', content: 'add',
onclick : add_function onclick : add_function
}; };
list.push(add); var remove = {
type: 'i',
content: 'delete',
onclick: remove_function
};
list.push(add, remove);
} }
if (dict.hasOwnProperty("merge") && dict.merge) { if (dict.hasOwnProperty("merge") && dict.merge) {
list.push(merge, unmerge, destroy_merge); list.push(merge, unmerge, destroy_merge);
...@@ -210,9 +354,26 @@ ...@@ -210,9 +354,26 @@
if (dict.hasOwnProperty("color_picker") && dict.color_picker) { if (dict.hasOwnProperty("color_picker") && dict.color_picker) {
list.push(text_color, background_color); list.push(text_color, background_color);
} }
if (dict.hasOwnProperty("type") && dict.type) {
list.push(text, image, checkbox, html, calendar, color);
}
var res = Object.assign({}, template); var res = Object.assign({}, template);
res.toolbar = list; res.toolbar = list;
return res; return res;
})
.declareMethod("buildOptions", function () {
var str = "";
var formulas = ["SUM", "MIN", "MAX", "COUNT", "AVERAGE", "FLOOR", "ABS", "SQRT", "ISEVEN", "ISODD", "TODAY", "UPPER", "LOWER", "TRUNC", "TYPE", "TRIM",
"SIN", "COS", "TAN", "ARCSIN", "ARCCOS", "ARCTAN", "ROUND", "RAND", "RANDBETWEEN", "RADIANS", "POWER", "PI", "PHI", "MOD", "LEN", "LN",
"LOG", "LOG10", "FACT", "TRUE", "FALSE", "AND", "OR", "XOR", "EVEN", "ODD", "EXP", "CONCATENATE", "BITAND", "BITOR", "BIN2DEC", "BIN2HEX",
"BIN2OCT", "DEC2BIN", "DEC2HEX", "DEC2OCT", "HEX2BIN", "HEX2DEC", "HEX2OCT", "NOT", "OCT2BIN", "OCT2DEC", "OCT2HEX", "PRODUCT", "QUOTIENT",
"COLUMN", "ROW", "CELL"].sort();
formulas.forEach(function (value) {
str += "<option class='formula_option' value=" + value + ">" + value + "()" + "</option>";
});
str = "<option class='formula_option'>FORMULA</option>" + str;
return str;
}); });
}(window, rJS, jexcel)); }(window, rJS, jexcel));
...@@ -11,9 +11,9 @@ ...@@ -11,9 +11,9 @@
<script src="jexcel/jexcel.js"></script> <script src="jexcel/jexcel.js"></script>
<script src="jsuites/jsuites.js"></script> <script src="jsuites/jsuites.js"></script>
<link rel="stylesheet" href="jexcel/jexcel_perso.css" type="text/css" /> <link rel="stylesheet" href="jexcel/jexcel.css" type="text/css" />
<link rel="stylesheet" href="jsuites/jsuites.css" type="text/css" /> <link rel="stylesheet" href="jsuites/jsuites.css" type="text/css" />
<!--<link rel="stylesheet" href="complements.css" type="text/css" />--> <link rel="stylesheet" href="complements.css" type="text/css" />
<link rel="stylesheet" href="icons.css" type="text/css" /> <link rel="stylesheet" href="icons.css" type="text/css" />
......
...@@ -3,11 +3,40 @@ ...@@ -3,11 +3,40 @@
(function (window, rJS, jexcel) { (function (window, rJS, jexcel) {
"use strict"; "use strict";
var toolbar_dict = {
undo_redo: true,
add: true,
merge: true,
text_font: true,
text_position: true,
color_picker: true,
type: true
};
function letterToNumber(str) {
var out = 0, len = str.length, pos = len;
while (--pos > -1) {
out += (str.charCodeAt(pos) - 64) * Math.pow(26, len - 1 - pos);
}
return out - 1;
}
function numberToLetter(i) {
return (i >= 26 ? numberToLetter((i / 26 >> 0) - 1) : '') + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'[i % 26 >> 0];
}
function getCoordsFromCell(cell) {
var x = Number(cell.dataset.x);
var y = Number(cell.dataset.y) + 1;
return numberToLetter(x) + y.toString();
}
rJS(window) rJS(window)
.setState({ .setState({
saveConfig: false, saveConfig: false,
newSheet: false newSheet: false,
updateSelection: true
}) })
.declareAcquiredMethod("notifyChange", "notifyChange") .declareAcquiredMethod("notifyChange", "notifyChange")
...@@ -18,12 +47,12 @@ ...@@ -18,12 +47,12 @@
.declareMethod("render", function (options) { .declareMethod("render", function (options) {
var gadget = this; var gadget = this;
gadget.deferNotifyChangeBinded = gadget.deferNotifyChange.bind(gadget);
return gadget.getDeclaredGadget("template_gadget") return gadget.getDeclaredGadget("template_gadget")
.push(function (template_gadget) { .push(function (template_gadget) {
gadget.template_gadget = template_gadget; gadget.template_gadget = template_gadget;
}) })
.push(function () { .push(function () {
options.newSheet = true;
return gadget.changeState(options); return gadget.changeState(options);
}); });
}) })
...@@ -36,96 +65,145 @@ ...@@ -36,96 +65,145 @@
sheets.push(sheet.getConfig()); sheets.push(sheet.getConfig());
}); });
form_data[this.state.key] = JSON.stringify(sheets); form_data[this.state.key] = JSON.stringify(sheets);
this.state.value = form_data[this.state.key]; this.state.value = sheets;
} }
return form_data; return form_data;
}) })
.declareMethod("addSheet", function () { .declareMethod("getCurrentSheet", function () {
var gadget = this; var gadget = this;
return gadget.template_gadget.getToolbarList(() => gadget.addSheet(), { var worksheet = gadget.element.querySelector('.selected').getAttribute('data-spreadsheet');
undo_redo: true, return gadget.element.querySelector('.spreadsheet').jexcel[worksheet];
add: true,
merge: true,
text_font: true,
text_position: true,
color_picker: true
})
.push(function (dict) {
dict.sheetName = "Sheet " + (gadget.element.querySelector('.spreadsheet').jexcel.length + 1);
jexcel.tabs(gadget.element.querySelector(".spreadsheet"), [dict]);
return gadget.changeState({newSheet: true});
});
}) })
.onStateChange(function (modification_dict) { .declareMethod("addSheet", function () {
console.log(modification_dict.hasOwnProperty("newSheet")); var gadget = this;
var gadget = this, tmp; var tabs = gadget.element.querySelectorAll(".jexcel_tab_link");
gadget.deferNotifyChangeBinded = gadget.deferNotifyChange.bind(gadget); if (tabs.length == 18) alert("Can't add sheets anymore.");
if (modification_dict.hasOwnProperty('value')) { else {
return gadget.template_gadget.getToolbarList(() => gadget.addSheet(), { return gadget.template_gadget.getToolbarList(function () { return gadget.addSheet(); }, function (a, b) { return gadget.deleteSheet(a, b); }, toolbar_dict)
undo_redo: true, .push(function (dict) {
add: true, dict.sheetName = "Sheet " + (gadget.element.querySelector('.spreadsheet').jexcel.length + 1);
merge: true, return gadget.bindEvents(dict);
text_font: true,
text_position: true,
color_picker: true
})
.push(function (config) {
tmp = Object.assign({}, config);
if (gadget.state.value === "") {
gadget.state.value = [tmp];
}
else {
gadget.state.value = JSON.parse(gadget.state.value);
gadget.state.value.map(sheet => {
var res = Object.assign(sheet, tmp);
return res;
});
}
gadget.state.value.map((sheet, i) => {
sheet.sheetName = "Sheet " + (i + 1);
sheet.onEvent = function (ev) {
console.log("event");
var exluded_events = ["onload", "onfocus", "onblur", "onselection"];
if (!exluded_events.includes(ev)) {
if ((ev === "onchangestyle" && gadget.state.saveConfig) || ev !== "onchangestyle") {
gadget.deferNotifyChangeBinded();
} else {
gadget.state.saveConfig = true;
}
}
return sheet;
};
//sheet.onselection = function (ev) {
//var cell = gadget.element.querySelector("td.highlight-selected");
//var formula = gadget.element.querySelector("input.jexcel_formula");
//formula.value = cell.textContent;
//};
});
return gadget.state.value;
}) })
.push(function (sheets) { .push(function (dict) {
jexcel.tabs(gadget.element.querySelector(".spreadsheet"), sheets) jexcel.tabs(gadget.element.querySelector(".spreadsheet"), [dict]);
gadget.deferNotifyChangeBinded();
return gadget.changeState({newSheet: true});
}); });
} }
console.log("aaaaaa"); })
if (modification_dict.hasOwnProperty("newSheet") || true) {
var filter = gadget.element.querySelector(".jexcel_filter"); .declareMethod("deleteSheet", function (a, b, c) {
gadget.element.querySelector(".jexcel_toolbar").appendChild(filter); var gadget = this;
var formula_div = document.createElement("div"); if (confirm("Delete this sheet ?")) {
formula_div.classList.add("jexcel_formula"); var tab_link = gadget.element.querySelector('.jexcel_tab_link.selected');
var img = document.createElement("img"); var index = tab_link.getAttribute("data-spreadsheet");
img.src = "fx.png"; if (gadget.element.querySelector('.spreadsheet').jexcel.length > 1) {
var formula_input = document.createElement("input"); tab_link.remove();
formula_input.classList.add("jexcel_formula"); var to_remove;
formula_div.appendChild(img); gadget.element.querySelectorAll(".jexcel_container").forEach(function (tab) {tab.style.display === "block" ? to_remove = tab : null});
formula_div.appendChild(formula_input); to_remove.remove();
gadget.element.querySelector("div.jexcel_toolbar").parentNode.insertBefore(formula_div, gadget.element.querySelector("div.jexcel_toolbar").nextSibling); gadget.element.querySelector('.spreadsheet').jexcel.splice(index, 1);
var sheets = gadget.element.querySelectorAll('.jexcel_container');
sheets[sheets.length - 1].style.display = "block";
gadget.element.querySelectorAll('.jexcel_tab_link').forEach(function (tab, i) {
i == sheets.length - 1 ? tab.classList.add("selected") : null;
tab.dataset.spreadsheet = i;
tab.textContent = tab.textContent.substring(0, 5) === "Sheet" ? "Sheet " + (i + 1) : tab.textContent;
});
}
else {
gadget.element.querySelector('.jexcel_tab_link').textContent = "Sheet 1";
a.querySelector("input.jexcel_formula").value = "";
b.setData(new Array(100).fill(0, 99, new Array(26).fill(0, 26, "")));
}
gadget.deferNotifyChangeBinded();
}
})
.declareMethod("setupTable", function (element) {
var gadget = this;
var filter = element.querySelector(".jexcel_filter");
element.querySelector(".jexcel_toolbar").appendChild(filter);
element.querySelector("select.jexcel_toolbar_item").classList.add("minimize");
var formula_div = document.createElement("div");
formula_div.classList.add("jexcel_formula");
var img = document.createElement("img");
img.src = "fx.png";
var formula_input = document.createElement("input");
formula_input.classList.add("jexcel_formula");
formula_div.appendChild(img);
formula_div.appendChild(formula_input);
element.querySelector("div.jexcel_toolbar").parentNode.insertBefore(formula_div, element.querySelector("div.jexcel_toolbar").nextSibling);
var cell_input = document.createElement("input");
cell_input.classList.add("cell_input");
formula_input.onfocus = function () {
var worksheet = gadget.element.querySelector('.selected').getAttribute('data-spreadsheet');
gadget.element.querySelector('.spreadsheet').jexcel[worksheet].resetSelection(true);
};
formula_input.oninput = function (ev) {
var worksheet = gadget.element.querySelector('.selected').getAttribute('data-spreadsheet');
var instance = gadget.element.querySelector('.spreadsheet').jexcel[worksheet];
var e = this.value;
if (e[0] === "=" && e[e.length - 1] !== ")") {
var numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
if (numbers.includes(e[e.length - 1])) {
instance.setValue(cell_input.value, e);
}
}
else {
instance.setValue(cell_input.value, e);
}
};
cell_input.onfocus = function () {
var worksheet = gadget.element.querySelector('.selected').getAttribute('data-spreadsheet');
gadget.element.querySelector('.spreadsheet').jexcel[worksheet].resetSelection(true);
};
cell_input.onkeypress = function (ev) {
if (ev.keyCode == 13) {
var worksheet = gadget.element.querySelector('.selected').getAttribute('data-spreadsheet');
var y = this.value.match(/(\d+)/)[0];
var x = letterToNumber(this.value.substring(0, this.value.length - y.length));
var y = parseInt(y) - 1;
gadget.element.querySelector('.spreadsheet').jexcel[worksheet].updateSelectionFromCoords(x, y, x, y);
}
};
formula_div.insertBefore(cell_input, img);
return gadget.template_gadget.buildOptions()
.push(function (options) {
var select = document.createElement("select");
select.innerHTML = options;
select.classList.add("minimize");
select.onchange = function () {
var select = this;
var cell = gadget.element.querySelector("td.highlight-selected");
return gadget.getCurrentSheet()
.push(function (sheet) {
var cell = sheet.el.querySelector("td.highlight-selected");
if (cell && sheet.options.columns[Number(cell.dataset.x)].type === "text") {
var x = Number(cell.dataset.x);
var y = Number(cell.dataset.y);
var currentValue = sheet.getValueFromCoords(x, y);
var value;
if (currentValue === "" || currentValue[0] !== "=") {
value = "=" + select.options[select.selectedIndex].value + "(" + currentValue + ")";
}
else {
value = "=" + select.options[select.selectedIndex].value + "(" + currentValue.substring(1, currentValue.length) + ")";
}
sheet.setValueFromCoords(x, y, value);
formula_input.value = value;
}
select.selectedIndex = 0;
});
};
element.querySelector(".jexcel_toolbar").insertBefore(select, filter);
var icon_title = { var icon_title = {
"undo": "Undo", "undo": "Undo",
"redo": "Redo", "redo": "Redo",
"add": "Add", "add": "Add sheet",
"delete": "Delete sheet",
"table_chart": "Merge cells", "table_chart": "Merge cells",
"close": "Destroy merge", "close": "Destroy merge",
"cancel": "Destroy all merges", "cancel": "Destroy all merges",
...@@ -139,22 +217,138 @@ ...@@ -139,22 +217,138 @@
"vertical_align_top": "Align top", "vertical_align_top": "Align top",
"vertical_align_center": "Align middle", "vertical_align_center": "Align middle",
"vertical_align_bottom": "Align bottom", "vertical_align_bottom": "Align bottom",
} "image": "Set column type : Image",
gadget.element.querySelectorAll("i").forEach(i => { "radio": "Set column type: Radio button",
if (i.dataset.k === "color") {i.title = "Color"} "checkbox": "Set column type: Checkbox",
else if (i.dataset.k === "background-color") {i.title = "Background color"} "title": "Set column type: Text",
else {i.title = icon_title[i.textContent]} "list": "Set column type: HTML",
"calendar_today": "Set column type: Calendar",
"color_lens": "Set column type: Color"
};
element.querySelectorAll("i").forEach(function (i) {
if (i.dataset.k === "color") {i.title = "Color"; }
else if (i.dataset.k === "background-color") {i.title = "Background color"; }
else {i.title = icon_title[i.textContent]; }
}); });
gadget.element.querySelectorAll(".jexcel_tab_link").forEach(function (tab) { tab.title = "Right click to rename"; });
gadget.state.newSheet = false; gadget.state.newSheet = false;
});
})
.declareMethod("bindEvents", function (sheet) {
var gadget = this;
sheet.onevent = function (ev) {
var exluded_events = ["onload", "onfocus", "onblur", "onselection"];
if (!exluded_events.includes(ev)) {
if ((["onchangestyle", "onchange", "onbeforechange"].includes(ev) && gadget.state.saveConfig) || !["onchangestyle", "onchange", "onbeforechange"].includes(ev)) {
gadget.deferNotifyChangeBinded();
}
}
};
sheet.onselection = function (ev) {
return gadget.getCurrentSheet()
.push(function (instance) {
var tab = gadget.element.querySelectorAll(".jexcel_container")[gadget.element.querySelector("div.jexcel_tab_link.selected").getAttribute("data-spreadsheet")];
var cell = tab.querySelector("td.highlight-selected");
var cell_input = tab.querySelector("input.cell_input");
var formula = tab.querySelector("input.jexcel_formula");
cell_input.value = getCoordsFromCell(cell);
var x = Number(cell.dataset.x);
var y = Number(cell.dataset.y);
formula.value = ["text", "calendar", "checkbox", "color"].includes(instance.options.columns[x].type) ? instance.getValueFromCoords(x, y) : "";
if (instance.options.columns[x].type === "text") {
formula.readOnly = false;
formula.classList.remove("readonly");
}
else {
formula.readOnly = true;
formula.classList.add("readonly");
}
});
};
sheet.oneditionend = function (a, b, c, d, e) {
if (e) {
if (e[0] === "=" && e[e.length - 1] !== ")") {
var numbers = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
if (numbers.includes(e[e.length - 1])) {
var worksheet = gadget.element.querySelector('.selected').getAttribute('data-spreadsheet');
var tab = gadget.element.querySelector('.spreadsheet').jexcel[worksheet];
tab.setValueFromCoords(c, d, e);
}
else {
b.textContent = e;
}
}
}
};
return sheet;
})
.onStateChange(function (modification_dict) {
var gadget = this, tmp;
if (modification_dict.hasOwnProperty('newSheet') && modification_dict.newSheet) {
var tabs = (gadget.element.querySelectorAll(".jexcel_container"));
return gadget.setupTable(tabs[tabs.length - 1]);
}
if (modification_dict.hasOwnProperty('value')) {
return gadget.template_gadget.getToolbarList(function () { gadget.addSheet(); }, function (a, b) { gadget.deleteSheet(a, b); }, toolbar_dict)
.push(function (config) {
tmp = Object.assign({}, config);
if (gadget.state.value === "") {
gadget.state.value = [tmp];
}
else {
gadget.state.value = JSON.parse(gadget.state.value);
gadget.state.value.map(function (sheet) {
var res = Object.assign(sheet, tmp);
return res;
});
}
gadget.state.value.map(function (sheet, i) {
if (!sheet.hasOwnProperty("sheetName")) {sheet.sheetName = "Sheet " + (i + 1); }
return gadget.bindEvents(sheet);
});
return gadget.state.value;
})
.push(function (sheets) {
jexcel.tabs(gadget.element.querySelector(".spreadsheet"), sheets);
setTimeout(function () {gadget.state.saveConfig = true; }, 5000);
gadget.element.querySelectorAll(".jexcel_container").forEach(function (tab) {
return gadget.setupTable(tab);
});
});
} }
}) })
.onEvent("input", function (ev) { .onEvent("input", function (ev) {
var gadget = this; var gadget = this;
var formula = gadget.element.querySelector("input.jexcel_formula"); return gadget.getCurrentSheet()
if (ev.target == gadget.element.querySelector("td.highlight-selected input")) { .push(function (sheet) {
//formula.value = ev.target.value; var formula = sheet.el.querySelector("input.jexcel_formula");
} var td = sheet.el.querySelector("td.highlight-selected");
if (td && ev.target == td.childNodes[0]) {
formula.value = ev.target.value;
}
});
}, false, false) }, false, false)
.onEvent("contextmenu", function (ev) {
var gadget = this;
var worksheet = document.querySelector('.selected').getAttribute('data-spreadsheet');
var instance = document.querySelector('.spreadsheet').jexcel[worksheet];
if (ev.target.classList[0] === "jexcel_tab_link") {
ev.preventDefault();
var name = prompt("Sheet name :", ev.target.textContent);
ev.target.textContent = name !== null ? name : ev.target.textContent;
return gadget.getContent()
.push(function () {
var tabs = gadget.element.querySelectorAll(".jexcel_tab_link");
gadget.state.value.forEach(function (sheet, i) {
sheet.sheetName = tabs[i].textContent;
});
gadget.deferNotifyChangeBinded();
});
}
}, false, false);
}(window, rJS, jexcel)); }(window, rJS, jexcel));
...@@ -7,11 +7,12 @@ ...@@ -7,11 +7,12 @@
padding-right:2px; padding-right:2px;
box-sizing: border-box; box-sizing: border-box;
overscroll-behavior: contain; overscroll-behavior: contain;
padding-bottom: 40px;
} }
.jexcel_container.fullscreen { .jexcel_container.fullscreen {
position:fixed; position:fixed;
top:0px; top:38px;
left:0px; left:0px;
width:100%; width:100%;
height:100%; height:100%;
...@@ -21,14 +22,10 @@ ...@@ -21,14 +22,10 @@
.jexcel_container.fullscreen .jexcel_content { .jexcel_container.fullscreen .jexcel_content {
overflow:auto; overflow:auto;
width:100%; width:100%;
height:100%; height:96.5%;
background-color:#ffffff; background-color:#ffffff;
} }
.jexcel_container.with-toolbar .jexcel > thead > tr > td {
top: 0;
}
.jexcel_container.fullscreen.with-toolbar { .jexcel_container.fullscreen.with-toolbar {
height: calc(100% - 46px); height: calc(100% - 46px);
} }
...@@ -94,7 +91,7 @@ ...@@ -94,7 +91,7 @@
.with-toolbar .jexcel > thead > tr > td .with-toolbar .jexcel > thead > tr > td
{ {
top:42px; /**top:42px;**/
} }
.jexcel > thead > tr > td.dragging .jexcel > thead > tr > td.dragging
...@@ -126,7 +123,8 @@ ...@@ -126,7 +123,8 @@
.jexcel > tbody > tr > td:first-child .jexcel > tbody > tr > td:first-child
{ {
position:relative; position:sticky;
left:0;
background-color:#f3f3f3; background-color:#f3f3f3;
text-align:center; text-align:center;
} }
...@@ -556,12 +554,12 @@ ...@@ -556,12 +554,12 @@
{ {
display:flex; display:flex;
justify-content:space-between; justify-content:space-between;
margin-bottom:4px; /**margin-bottom:4px;**/
} }
.jexcel_filter > div .jexcel_filter > div
{ {
padding:8px; padding:4px;
align-items:center; align-items:center;
} }
...@@ -613,7 +611,7 @@ ...@@ -613,7 +611,7 @@
background-color:#f3f3f3; background-color:#f3f3f3;
border:1px solid #ccc; border:1px solid #ccc;
padding:4px; padding:4px;
margin:0px 2px 4px 1px; margin:0px 2px 1px 1px;
position:sticky; position:sticky;
top:0px; top:0px;
z-index:21; z-index:21;
...@@ -670,11 +668,9 @@ ...@@ -670,11 +668,9 @@
.jexcel_tabs .jexcel_tab_link .jexcel_tabs .jexcel_tab_link
{ {
display:inline-block; display:inline-block;
padding:10px; padding:5px;
padding-left:20px; margin-right:2px;
padding-right:20px; margin-bottom:2px;
margin-right:5px;
margin-bottom:5px;
background-color:#f3f3f3; background-color:#f3f3f3;
cursor:pointer; cursor:pointer;
} }
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</item> </item>
<item> <item>
<key> <string>content_type</string> </key> <key> <string>content_type</string> </key>
<value> <string>application/x-javascript</string> </value> <value> <string>application/javascript</string> </value>
</item> </item>
<item> <item>
<key> <string>precondition</string> </key> <key> <string>precondition</string> </key>
......
:root {
--jexcel-border-color:#000;
}
.jexcel_container {
display:inline-block;
padding-right:2px;
box-sizing: border-box;
overscroll-behavior: contain;
}
.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:96.5%;
background-color:#ffffff;
}
.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: 5px;
height: 5px;
}
.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;
}
.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 > 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;
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.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:30;
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: .875rem;
letter-spacing: .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: .875rem;
letter-spacing: .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:4px;
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 1px 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 > 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 {
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;
}
\ No newline at end of file
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="File" module="OFS.Image"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>__name__</string> </key>
<value> <string>jexcel_perso.css</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/css</string> </value>
</item>
<item>
<key> <string>precondition</string> </key>
<value> <string></string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <string></string> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment