Skip to content

erp5
erp5
Commit fd0b4abf authored by Mikolaï Krol's avatar Mikolaï Krol Committed by Mikolaï Krol
Browse files
Options

erp5_jexcel_editor: moved toolbar definition to util gadget 

erp5_jexcel_editor: formula bar, not working like expected yet

erp5_jexcel_editor: updated jexcel source
parent eb45d105
Expand all Show whitespace changes
Inline Side-by-side
Showing with 531 additions and 216 deletions
bt5/erp5_jexcel_editor/SkinTemplateItem/portal_skins/erp5_jexcel_editor/complements.css.css 0 → 100644
View file @ fd0b4abf
div.jexcel_formula img{
display: inline-block;
width: 12px;
height: 12px;
margin-left: 4px;
margin-right: 4px;
}
input.jexcel_formula {
margin-left: 2px;
width: 97%;
position:sticky;
top:0px;
z-index:21;
display: inline-block;
}
\ No newline at end of file
bt5/erp5_jexcel_editor/SkinTemplateItem/portal_skins/erp5_jexcel_editor/complements.css.xml 0 → 100644
View file @ fd0b4abf
<?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>complements.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>
bt5/erp5_jexcel_editor/SkinTemplateItem/portal_skins/erp5_jexcel_editor/fx.png.xml 0 → 100644
View file @ fd0b4abf
<?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>fx.png</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>image/png</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>
bt5/erp5_jexcel_editor/SkinTemplateItem/portal_skins/erp5_jexcel_editor/gadget.utils.toolbar.html.html 0 → 100644
View file @ fd0b4abf
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Jexcel</title>
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script src="gadget.utils.toolbar.js"></script>
</head>
<body>
</body>
</html>
bt5/erp5_jexcel_editor/SkinTemplateItem/portal_skins/erp5_jexcel_editor/gadget.utils.toolbar.html.xml 0 → 100644
View file @ fd0b4abf
<?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.html</string> </value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/html</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>
bt5/erp5_jexcel_editor/SkinTemplateItem/portal_skins/erp5_jexcel_editor/gadget.utils.toolbar.js.js 0 → 100644
View file @ fd0b4abf
/*jslint nomen: true, indent: 2 */
/*global window, rJS, RSVP, jexcel*/
(function (window, rJS, jexcel) {
"use strict";
var font_style = {
type: 'select',
k: 'font-family',
v: ['Arial', 'Comic Sans MS', 'Verdana', 'Calibri', 'Tahoma', 'Helvetica', 'DejaVu Sans', 'Times New Roman', 'Georgia', 'Antiqua']
};
var font_size = {
type: 'select',
k: 'font-size',
v: ['9px', '10px', '11px', '12px', '13px', '14px', '15px', '16px', '17px', '18px', '19px', '20px', '22px', '24px', '26px', '28px', '30px']
};
var text_align_left = {
type: 'i',
content: 'format_align_left',
k: 'text-align',
v: 'left'
};
var text_align_center = {
type: 'i',
content: 'format_align_center',
k: 'text-align',
v: 'center'
};
var text_align_right = {
type: 'i',
content: 'format_align_right',
k: 'text-align',
v: 'right'
};
var text_align_justify = {
type: 'i',
content: 'format_align_justify',
k: 'text-align',
v: 'justify'
};
var vertical_align_top = {
type: 'i',
content: 'vertical_align_top',
k: 'vertical-align',
v: 'top'
};
var vertical_align_middle = {
type: 'i',
content: 'vertical_align_center',
k: 'vertical-align',
v: 'middle'
};
var vertical_align_bottom = {
type: 'i',
content: 'vertical_align_bottom',
k: 'vertical-align',
v: 'bottom'
};
var style_bold = {
type: 'i',
content: 'format_bold',
k: 'font-weight',
v: 'bold'
};
var style_underlined = {
type: 'i',
content: 'format_underlined',
k: 'text-decoration',
v: 'underline'
};
var style_italic = {
type: 'i',
content: 'format_italic',
k: 'font-style',
v: 'italic'
};
var text_color = {
type: 'color',
content: 'format_color_text',
k: 'color'
};
var background_color = {
type: 'color',
content: 'format_color_fill',
k: 'background-color'
};
rJS(window)
.declareMethod("getToolbarList", function (dict) {
var list = [];
if (dict.hasOwnProperty("text_font") && dict.text_font) {
list.push(font_style, font_size, style_bold, style_italic, style_underlined);
}
if (dict.hasOwnProperty("text_position") && dict.text_position) {
list.push(text_align_left, text_align_center, text_align_right, text_align_justify, vertical_align_top, vertical_align_middle, vertical_align_bottom);
}
if (dict.hasOwnProperty("color_picker") && dict.color_picker) {
list.push(text_color, background_color);
}
return list;
});
}(window, rJS, jexcel));
bt5/erp5_jexcel_editor/SkinTemplateItem/portal_skins/erp5_jexcel_editor/gadget.utils.toolbar.js.xml 0 → 100644
View file @ fd0b4abf
<?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>
bt5/erp5_jexcel_editor/SkinTemplateItem/portal_skins/erp5_jexcel_editor/jexcel.gadget.html.html
View file @ fd0b4abf
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
<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.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="icons.css" type="text/css" /> <link rel="stylesheet" href="icons.css" type="text/css" />
...@@ -20,6 +21,10 @@ ...@@ -20,6 +21,10 @@
</head> </head>
<body> <body>
<div data-gadget-url="gadget.utils.toolbar.html"
data-gadget-scope="toolbar_gadget"
data-gadget-sandbox="public">
</div>
<div class="spreadsheet"></div> <div class="spreadsheet"></div>
</body> </body>
</html> </html>
bt5/erp5_jexcel_editor/SkinTemplateItem/portal_skins/erp5_jexcel_editor/jexcel.gadget.js.js
View file @ fd0b4abf
...@@ -16,7 +16,13 @@ ...@@ -16,7 +16,13 @@
.declareMethod("render", function (options) { .declareMethod("render", function (options) {
var gadget = this; var gadget = this;
return gadget.getDeclaredGadget("toolbar_gadget")
.push(function (toolbar_gadget) {
gadget.toolbar_gadget = toolbar_gadget;
})
.push(function () {
return gadget.changeState(options); return gadget.changeState(options);
});
}) })
.declareMethod('getContent', function () { .declareMethod('getContent', function () {
...@@ -49,18 +55,24 @@ ...@@ -49,18 +55,24 @@
selectionCopy: true, selectionCopy: true,
search: true, search: true,
fullscreen: true, fullscreen: true,
//lazyLoading: true,
//loadingSpin: true,
//tableOverflow: true,
autoIncrement: true, autoIncrement: true,
parseFormulas: true parseFormulas: true
}, },
gadget = this, tmp = Object.assign({}, template), table; gadget = this, tmp = Object.assign({}, template), table, toolbar_list;
gadget.deferNotifyChangeBinded = gadget.deferNotifyChange.bind(gadget); gadget.deferNotifyChangeBinded = gadget.deferNotifyChange.bind(gadget);
if (modification_dict.hasOwnProperty('value')) { if (modification_dict.hasOwnProperty('value')) {
gadget.state.value = gadget.state.value === "" ? gadget.state.value : JSON.parse(gadget.state.value); gadget.state.value = gadget.state.value === "" ? gadget.state.value : JSON.parse(gadget.state.value);
Object.assign(tmp, template); Object.assign(tmp, template);
Object.assign(tmp, gadget.state.value); Object.assign(tmp, gadget.state.value);
return gadget.toolbar_gadget.getToolbarList({
text_font: true,
text_position: true,
color_picker: true
})
.push(function (list) {
toolbar_list = list;
})
.push(function () {
table = jexcel(gadget.element.querySelector(".spreadsheet"), Object.assign(tmp, { table = jexcel(gadget.element.querySelector(".spreadsheet"), Object.assign(tmp, {
onevent: function (ev) { onevent: function (ev) {
var exluded_events = ["onload", "onfocus", "onblur", "onselection"]; var exluded_events = ["onload", "onfocus", "onblur", "onselection"];
...@@ -72,6 +84,11 @@ ...@@ -72,6 +84,11 @@
} }
} }
}, },
onselection: function (ev) {
var cell = gadget.element.querySelector("td.highlight-selected");
var formula = gadget.element.querySelector("input.jexcel_formula");
formula.value = cell.textContent;
},
toolbar: [ toolbar: [
//undo //undo
{ {
...@@ -137,107 +154,54 @@ ...@@ -137,107 +154,54 @@
onclick: function () { onclick: function () {
table.destroyMerged(); table.destroyMerged();
} }
},
//font style
{
type: 'select',
k: 'font-family',
v: ['Arial', 'Comic Sans MS', 'Verdana', 'Calibri', 'Tahoma', 'Helvetica', 'DejaVu Sans', 'Times New Roman', 'Georgia', 'Antiqua']
},
//font size
{
type: 'select',
k: 'font-size',
v: ['9px', '10px', '11px', '12px', '13px', '14px', '15px', '16px', '17px', '18px', '19px', '20px', '22px', '24px', '26px', '28px', '30px']
},
//text align left
{
type: 'i',
content: 'format_align_left',
k: 'text-align',
v: 'left'
},
//text align center
{
type: 'i',
content: 'format_align_center',
k: 'text-align',
v: 'center'
},
//text align right
{
type: 'i',
content: 'format_align_right',
k: 'text-align',
v: 'right'
},
//text align justify
{
type: 'i',
content: 'format_align_justify',
k: 'text-align',
v: 'justify'
},
//vertical align top
{
type: 'i',
content: 'vertical_align_top',
k: 'vertical-align',
v: 'top'
},
//vertical align middle
{
type: 'i',
content: 'vertical_align_center',
k: 'vertical-align',
v: 'middle'
},
//vertical align bottom
{
type: 'i',
content: 'vertical_align_bottom',
k: 'vertical-align',
v: 'bottom'
},
//style bold
{
type: 'i',
content: 'format_bold',
k: 'font-weight',
v: 'bold'
},
//style underlined
{
type: 'i',
content: 'format_underlined',
k: 'text-decoration',
v: 'underline'
},
//style italic
{
type: 'i',
content: 'format_italic',
k: 'font-style',
v: 'italic'
},
//text color
{
type: 'color',
content: 'format_color_text',
k: 'color'
},
//background color
{
type: 'color',
content: 'format_color_fill',
k: 'background-color'
} }
] ].concat(toolbar_list)
})); }));
gadget.table = table; gadget.table = table;
var filter = gadget.element.querySelector(".jexcel_filter"); var filter = gadget.element.querySelector(".jexcel_filter");
gadget.element.querySelector(".jexcel_toolbar").appendChild(filter); gadget.element.querySelector(".jexcel_toolbar").appendChild(filter);
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);
gadget.element.querySelector("div.jexcel_toolbar").parentNode.insertBefore(formula_div, gadget.element.querySelector("div.jexcel_toolbar").nextSibling);
console.log(gadget.element.querySelectorAll("i"));
var icon_title = {
"undo": "Undo",
"redo": "Redo",
"table_chart": "Merge cells",
"close": "Destroy merge",
"cancel": "Destroy all merges",
"format_bold": "Bold",
"format_italic": "Italic",
"format_underlined": "Underline",
"format_align_left": "Align left",
"format_align_center": "Align center",
"format_align_right": "Align right",
"format_align_justify": "Align justify",
"vertical_align_top": "Align top",
"vertical_align_center": "Align middle",
"vertical_align_bottom": "Align bottom",
} }
gadget.element.querySelectorAll("i").forEach(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]}
}); });
});
}
})
.onEvent("input", function (ev) {
var gadget = this;
var formula = gadget.element.querySelector("input.jexcel_formula");
if (ev.target == gadget.element.querySelector("td.highlight-selected input")) {
formula.value = ev.target.value;
}
}, false, false)
}(window, rJS, jexcel)); }(window, rJS, jexcel));
bt5/erp5_jexcel_editor/SkinTemplateItem/portal_skins/erp5_jexcel_editor/jexcel/jexcel.css.css
View file @ fd0b4abf
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
.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;
} }
...@@ -609,7 +609,7 @@ ...@@ -609,7 +609,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;
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7