Commit 076a3ecb authored by Mikolaï Krol's avatar Mikolaï Krol Committed by Mikolaï Krol

erp5_jexcel_editor: add multiple tabs, no formula bar

parent bd86cdd7
...@@ -13,4 +13,4 @@ input.jexcel_formula { ...@@ -13,4 +13,4 @@ input.jexcel_formula {
top:0px; top:0px;
z-index:21; z-index:21;
display: inline-block; display: inline-block;
} }
\ No newline at end of file
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<script src="rsvp.js"></script> <script src="rsvp.js"></script>
<script src="renderjs.js"></script> <script src="renderjs.js"></script>
<script src="gadget.utils.toolbar.js"></script> <script src="gadget.utils.template.js"></script>
</head> </head>
<body> <body>
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<dictionary> <dictionary>
<item> <item>
<key> <string>__name__</string> </key> <key> <string>__name__</string> </key>
<value> <string>gadget.utils.toolbar.html</string> </value> <value> <string>gadget.utils.template.html</string> </value>
</item> </item>
<item> <item>
<key> <string>content_type</string> </key> <key> <string>content_type</string> </key>
......
...@@ -3,6 +3,95 @@ ...@@ -3,6 +3,95 @@
(function (window, rJS, jexcel) { (function (window, rJS, jexcel) {
"use strict"; "use strict";
var template = {
minDimensions: [26, 100],
defaultColWidth: 100,
allowExport: true,
columnSorting: true,
columnDrag: true,
columnResize: true,
rowResize: true,
rowDrag: true,
editable: true,
allowInsertRow: true,
allowManualInsertRow: true,
allowInsertColumn: true,
allowManualInsertColumn: true,
allowDeleteRow: true,
allowRenameColumn: true,
allowComments: true,
selectionCopy: true,
search: true,
fullscreen: true,
autoIncrement: true,
parseFormulas: true
};
var undo = {
type: 'i',
content: 'undo',
onclick: function (a, b, c) {
b.undo();
}
};
var redo = {
type: 'i',
content: 'redo',
onclick: function (a, b, c) {
b.redo();
}
};
var merge = {
type: 'i',
content: 'table_chart',
onclick: function (a, b, c) {
var cell = document.querySelector("td.highlight");
var x = Number(cell.dataset.x);
var selected = b.getJson(true);
var colspan = Object.keys(selected[0]).length;
var rowspan = selected.length;
var letter = "";
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.setMerge(coor, colspan, rowspan);
}
};
var unmerge = {
type: 'i',
content: 'close',
onclick: function (a, b, c) {
var cell = document.querySelector("td.highlight-selected");
var x = Number(cell.dataset.x);
var letter = "";
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);
}
};
var destroy_merge = {
type: 'i',
content: 'cancel',
onclick: function (a, b, c) {
b.destroyMerged();
}
};
var font_style = { var font_style = {
type: 'select', type: 'select',
k: 'font-family', k: 'font-family',
...@@ -96,8 +185,22 @@ ...@@ -96,8 +185,22 @@
rJS(window) rJS(window)
.declareMethod("getToolbarList", function (dict) { .declareMethod("getToolbarList", function (add_function, dict) {
var list = []; var list = [];
if (dict.hasOwnProperty("undo_redo") && dict.undo_redo) {
list.push(undo, redo);
}
if (dict.hasOwnProperty("add") && dict.add) {
var add = {
type: 'i',
content: 'add',
onclick : add_function
};
list.push(add);
}
if (dict.hasOwnProperty("merge") && dict.merge) {
list.push(merge, unmerge, destroy_merge);
}
if (dict.hasOwnProperty("text_font") && dict.text_font) { if (dict.hasOwnProperty("text_font") && dict.text_font) {
list.push(font_style, font_size, style_bold, style_italic, style_underlined); list.push(font_style, font_size, style_bold, style_italic, style_underlined);
} }
...@@ -107,7 +210,9 @@ ...@@ -107,7 +210,9 @@
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);
} }
return list; var res = Object.assign({}, template);
res.toolbar = list;
return res;
}); });
}(window, rJS, jexcel)); }(window, rJS, jexcel));
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<dictionary> <dictionary>
<item> <item>
<key> <string>__name__</string> </key> <key> <string>__name__</string> </key>
<value> <string>jexcel.webcomponent.js</string> </value> <value> <string>gadget.utils.template.js</string> </value>
</item> </item>
<item> <item>
<key> <string>content_type</string> </key> <key> <string>content_type</string> </key>
......
<?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>gadget.utils.toolbar.js</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>application/javascript</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>
...@@ -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.css" type="text/css" /> <link rel="stylesheet" href="jexcel/jexcel_perso.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" />
...@@ -21,8 +21,8 @@ ...@@ -21,8 +21,8 @@
</head> </head>
<body> <body>
<div data-gadget-url="gadget.utils.toolbar.html" <div data-gadget-url="gadget.utils.template.html"
data-gadget-scope="toolbar_gadget" data-gadget-scope="template_gadget"
data-gadget-sandbox="public"> data-gadget-sandbox="public">
</div> </div>
<div class="spreadsheet"></div> <div class="spreadsheet"></div>
......
...@@ -21,10 +21,14 @@ ...@@ -21,10 +21,14 @@
.jexcel_container.fullscreen .jexcel_content { .jexcel_container.fullscreen .jexcel_content {
overflow:auto; overflow:auto;
width:100%; width:100%;
height:96.5%; height:100%;
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);
} }
...@@ -90,7 +94,7 @@ ...@@ -90,7 +94,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
...@@ -552,12 +556,12 @@ ...@@ -552,12 +556,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:4px; padding:8px;
align-items:center; align-items:center;
} }
...@@ -609,7 +613,7 @@ ...@@ -609,7 +613,7 @@
background-color:#f3f3f3; background-color:#f3f3f3;
border:1px solid #ccc; border:1px solid #ccc;
padding:4px; padding:4px;
margin:0px 2px 1px 1px; margin:0px 2px 4px 1px;
position:sticky; position:sticky;
top:0px; top:0px;
z-index:21; z-index:21;
......
...@@ -1339,7 +1339,12 @@ console.log(ret); ...@@ -1339,7 +1339,12 @@ console.log(ret);
} }
// Handle click // Handle click
if (toolbar[i].onclick && typeof(toolbar[i].onclick)) { if (toolbar[i].onclick && typeof(toolbar[i].onclick)) {
toolbarItem.onclick = toolbar[i].onclick; toolbarItem.onclick = (function (a) {
var b = a;
return function () {
toolbar[b].onclick(el, obj, this);
};
})(i);
} else { } else {
toolbarItem.onclick = function() { toolbarItem.onclick = function() {
var k = this.getAttribute('data-k'); var k = this.getAttribute('data-k');
......
:root {
--jexcel_header_color: #888;
--jexcel_header_color_highlighted: #444;
--jexcel_header_background: #313131;
--jexcel_header_background_highlighted: #777;
--jexcel_content_color: #777;
--jexcel_content_color_highlighted: #333;
--jexcel_content_background: #3e3e3e;
--jexcel_content_background_highlighted: #777;
--jexcel_menu_background: #7e7e7e;
--jexcel_menu_background_highlighted: #ebebeb;
--jexcel_menu_color: #ddd;
--jexcel_menu_color_highlighted: #222;
--jexcel_border_color: #5f5f5f;
--jexcel_border_color_highlighted: #999;
--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;
}
\ No newline at end of file
class Jexcel extends HTMLElement {
constructor() {
super();
}
init(o) {
// Shadow root
const shadowRoot = this.attachShadow({mode: 'open'});
// Style
const cssJexcel = document.createElement('link');
cssJexcel.rel = 'stylesheet';
cssJexcel.type = 'text/css'
cssJexcel.href = 'jexcel.css';
shadowRoot.appendChild(cssJexcel);
const cssJsuites = document.createElement('link');
cssJsuites.rel = 'stylesheet';
cssJsuites.type = 'text/css'
cssJsuites.href = 'jsuites.css';
shadowRoot.appendChild(cssJsuites);
// Jexcel container
var container = document.createElement('div');
shadowRoot.appendChild(container);
// Garantee all elements are rendered
setTimeout(function() {
// Parse JSON
var config = JSON.parse(o.innerHTML);
// Root
config.root = shadowRoot;
// Reset container
o.innerHTML = '';
// Create jexcel element
jexcel(container, config);
}, 0);
}
connectedCallback() {
this.init(this);
}
disconnectedCallback() {
}
attributeChangedCallback() {
}
}
window.customElements.define('jexcel-spreadsheet', Jexcel);
\ No newline at end of file
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<dictionary> <dictionary>
<item> <item>
<key> <string>__name__</string> </key> <key> <string>__name__</string> </key>
<value> <string>jexcel.theme.css</string> </value> <value> <string>jexcel_perso.css</string> </value>
</item> </item>
<item> <item>
<key> <string>content_type</string> </key> <key> <string>content_type</string> </key>
......
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