Skip to content

Commit ca87bce

Browse files
SwechhyaSwechhya
authored
Merge pull request #23 from Swechhya/add-toolbar
Add toolbar
2 parents 07773f2 + 728db7b commit ca87bce

File tree

13 files changed

+2531
-85
lines changed

13 files changed

+2531
-85
lines changed

‎R/jexcel.R‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,10 @@
5454
#' @param loadingSpin a boolean value indicating if loading spinner should be enabled. By default it is set to false.
5555
#' @param style a named list to specify style for each cell. The name should be the cell address and the value should be
5656
#' a valid 'css' string with styles. For example, to style cell 'A1', the list should look like
57-
#' @param autoColTypes a boolean value indicating if column type should be automatically detected if
5857
#' 'type' is not specified in 'columns' attribute
5958
#' \code{style = list("A1" = "background-color: gray;")}.
59+
#' @param autoColTypes a boolean value indicating if column type should be automatically detected if
60+
#' @param showToolbar a boolean value indicating if toolbar should be shown. By default it is set to false.
6061
#' @import jsonlite
6162
#' @import htmlwidgets
6263
#' @example inst/examples/examples_widget.R
@@ -89,7 +90,8 @@ excelTable <-
8990
lazyLoading = FALSE,
9091
loadingSpin = FALSE,
9192
style = NULL,
92-
autoColTypes = TRUE) {
93+
autoColTypes = TRUE,
94+
showToolbar = FALSE) {
9395
# List of parameters to send to js
9496
paramList <- list()
9597

@@ -341,7 +343,8 @@ excelTable <-
341343
"search",
342344
"fullscreen",
343345
"lazyLoading",
344-
"loadingSpin"
346+
"loadingSpin",
347+
"showToolbar"
345348
)) {
346349
argvalue <- get(arg)
347350
if(!is.null(argvalue)) {

‎inst/htmlwidgets/jexcel.js‎

Lines changed: 94 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,110 @@
1-
HTMLWidgets.widget({
2-
name: "jexcel",
1+
HTMLWidgets.widget({
2+
name: "jexcel",
33

4-
type: "output",
4+
type: "output",
55

6-
factory: function(el, width, height) {
7-
var elementId = el.id;
8-
var container = document.getElementById(elementId);
9-
var excel =null;
6+
factory: function(el, width, height) {
7+
var elementId = el.id;
8+
var container = document.getElementById(elementId);
9+
var excel =null;
1010

11-
return {
12-
renderValue: function(params) {
13-
var rowHeight = params.hasOwnProperty("rowHeight") ? params.rowHeight : undefined;
14-
var otherParams = {};
15-
Object.keys(params).forEach(function(ky) {
16-
if(params !== "rowHeight" && params !== "otherParams") {
17-
otherParams[ky] = params[ky];
18-
}
19-
});
20-
21-
var rows = (function() {
22-
if (rowHeight) {
23-
const rows = {};
24-
rowHeight.map(data => (rows[data[0]] = { height: `${data[1]}px` }));
25-
return rows;
26-
}
27-
return {};
28-
})();
11+
return {
12+
renderValue: function(params) {
13+
var rowHeight = params.hasOwnProperty("rowHeight") ? params.rowHeight : undefined;
14+
var showToolbar = params.hasOwnProperty("showToolbar")? params.showToolbar: false;
15+
var otherParams = {};
16+
Object.keys(params).forEach(function(ky) {
17+
if(params !== "rowHeight" && params !== "otherParams") {
18+
otherParams[ky] = params[ky];
19+
}
20+
});
21+
22+
var rows = (function() {
23+
if (rowHeight) {
24+
const rows = {};
25+
rowHeight.map(data => (rows[data[0]] = { height: `${data[1]}px` }));
26+
return rows;
27+
}
28+
return {};
29+
})();
2930

30-
otherParams.rows = rows;
31-
otherParams.tableOverflow = true;
32-
otherParams.onchange = this.onChange;
33-
otherParams.oninsertrow = this.onChange;
34-
otherParams.ondeleterow = this.onChange;
35-
otherParams.oninsertcolumn = this.onChange;
36-
otherParams.ondeletecolumn = this.onChange;
37-
otherParams.onsort = this.onChange;
38-
otherParams.onmoverow = this.onChange;
39-
otherParams.onchangeheader = this.onChangeHeader;
31+
otherParams.rows = rows;
32+
otherParams.tableOverflow = true;
33+
otherParams.onchange = this.onChange;
34+
otherParams.oninsertrow = this.onChange;
35+
otherParams.ondeleterow = this.onChange;
36+
otherParams.oninsertcolumn = this.onChange;
37+
otherParams.ondeletecolumn = this.onChange;
38+
otherParams.onsort = this.onChange;
39+
otherParams.onmoverow = this.onChange;
40+
otherParams.onchangeheader = this.onChangeHeader;
4041

41-
// If new instance of the table
42-
if(excel === null) {
43-
excel = jexcel(container, otherParams);
44-
45-
return;
46-
}
42+
if(showToolbar) {
43+
// Add toolbar to param
44+
otherParams.toolbar = [
45+
{ type:'i', content:'undo', onclick:function() { excel.undo(); } },
46+
{ type:'i', content:'redo', onclick:function() { excel.redo(); } },
47+
{ type:'i', content:'save', onclick:function () { excel.download(); } },
48+
{ type:'select', k:'font-family', v:['Arial','Verdana'] },
49+
{ type:'select', k:'font-size', v:['9px','10px','11px','12px','13px','14px','15px','16px','17px','18px','19px','20px'] },
50+
{ type:'i', content:'format_align_left', k:'text-align', v:'left' },
51+
{ type:'i', content:'format_align_center', k:'text-align', v:'center' },
52+
{ type:'i', content:'format_align_right', k:'text-align', v:'right' },
53+
{ type:'i', content:'format_bold', k:'font-weight', v:'bold' },
54+
{ type:'color', content:'format_color_text', k:'color' },
55+
{ type:'color', content:'format_color_fill', k:'background-color' },
56+
]
57+
}
4758

48-
var selection = excel.selectedCell;
59+
// If new instance of the table
60+
if(excel === null) {
61+
excel = jexcel(container, otherParams);
62+
63+
return;
64+
}
4965

50-
while (container.firstChild) {
51-
container.removeChild(container.firstChild);
52-
}
66+
var selection = excel.selectedCell;
5367

54-
excel = jexcel(container, otherParams);
55-
56-
if(selection){
57-
excel.updateSelectionFromCoords(selection[0], selection[1], selection[2], selection[3]);
68+
while (container.firstChild) {
69+
container.removeChild(container.firstChild);
5870
}
5971

60-
},
72+
excel = jexcel(container, otherParams);
73+
74+
if(selection){
75+
excel.updateSelectionFromCoords(selection[0], selection[1], selection[2], selection[3]);
76+
}
6177

62-
resize: function(width, height) {
78+
},
6379

64-
},
80+
resize: function(width, height) {
6581

66-
onChange: function(obj){
67-
if (HTMLWidgets.shinyMode) {
68-
69-
Shiny.setInputValue(obj.id,
70-
{
71-
data:this.data,
72-
colHeaders: this.colHeaders
73-
})
74-
}
75-
},
82+
},
7683

77-
onChangeHeader: function(obj, column, oldValue, newValue){
78-
79-
if (HTMLWidgets.shinyMode) {
80-
var newColHeader = this.colHeaders;
81-
newColHeader[parseInt(column)] = newValue;
84+
onChange: function(obj){
85+
if (HTMLWidgets.shinyMode) {
86+
87+
Shiny.setInputValue(obj.id,
88+
{
89+
data:this.data,
90+
colHeaders: this.colHeaders
91+
})
92+
}
93+
},
94+
95+
onChangeHeader: function(obj, column, oldValue, newValue){
96+
97+
if (HTMLWidgets.shinyMode) {
98+
var newColHeader = this.colHeaders;
99+
newColHeader[parseInt(column)] = newValue;
82100

83-
Shiny.setInputValue(obj.id,
84-
{
85-
data:this.data,
86-
colHeaders: newColHeader
87-
})
101+
Shiny.setInputValue(obj.id,
102+
{
103+
data:this.data,
104+
colHeaders: newColHeader
105+
})
106+
}
88107
}
89-
}
90-
};
91-
}
92-
});
108+
};
109+
}
110+
});

‎inst/htmlwidgets/jexcel.yaml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,5 @@ dependencies:
1010
- css/jexcel.min.css
1111
- css/japp.css
1212
- css/jsuites.css
13+
- css/materialicon/material-icons.css
14+
- css/custom.css

‎inst/htmlwidgets/lib/jexcel/css/custom.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.jcolor td {
2+
padding: 7px;
3+
}
4+
5+
.jexcel_toolbar {
6+
width: 450px;
7+
justify-content: space-around;
8+
}

‎inst/htmlwidgets/lib/jexcel/css/materialicon/MaterialIcons-Regular.eot‎

140 KB
Binary file not shown.

‎inst/htmlwidgets/lib/jexcel/css/materialicon/MaterialIcons-Regular.ijmap‎

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)