/
PublicLab.RichTextModule.Table.js
119 lines (94 loc) · 4.08 KB
/
PublicLab.RichTextModule.Table.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/*
Table generation:
| col1 | col2 | col3 |
|------|------|------|
| cell | cell | cell |
| cell | cell | cell |
*/
module.exports = function initTables(_module, wysiwyg) {
function createTable(cols, rows) {
cols = cols || 3;
rows = rows || 2;
var table = "|";
for (var col = 0; col < cols; col++) {
table = table + " col" + col + " |";
}
table = table + "\n|";
for (var col = 0; col < cols; col++) {
table = table + "------|";
}
table = table + "\n";
for (var row = 0; row < rows; row++) {
table = table + "|";
for (var col = 0; col < cols; col++) {
table = table + " cell |";
}
table = table + "\n";
}
return table + "\n";
}
// create a submenu for sizing tables
$('.wk-commands').append('<button class="woofmark-command-table btn btn-outline-secondary" data-toggle="table" title="Table <table>"><i class="fa fa-table"></i></button>');
$(document).ready(function() {
$('[data-toggle="table"]').tooltip();
});
var builder = '<div class="form-inline form-group ple-table-popover" style="width:400px;">';
builder += '<a id="decRows" class="btn btn-sm btn-outline-secondary"><i class="fa fa-minus"></i></a> <span id="tableRows" class="mx-1">4</span> <a id="incRows" class="btn btn-sm btn-outline-secondary"><i class="fa fa-plus"></i></a>';
builder += '<span class="mx-1">x</span>';
builder += '<a id="decCols" class="btn btn-sm btn-outline-secondary"><i class="fa fa-minus"></i></a> <span id="tableCols" class="mx-1">3</span> <a id="incCols" class="btn btn-sm btn-outline-secondary"><i class="fa fa-plus"></i></a>';
builder += ' <a class="ple-table-size btn btn-outline-secondary">Add</a>';
builder += '</div>';
$('.woofmark-command-table').attr('data-content', builder);
$(document).on('click', '#incRows', function() {
$("#tableRows").text( Number($("#tableRows").text()) + 1 );
});
$(document).on('click', '#decRows', function() {
const numOfRows = Number($("#tableRows").text());
if (numOfRows > 1) $("#tableRows").text( numOfRows - 1 );
});
$(document).on('click', '#incCols', function() {
$("#tableCols").text( Number($("#tableCols").text()) + 1 );
});
$(document).on('click', '#decCols', function() {
const numOfCols = Number($("#tableCols").text());
if (numOfCols > 1) $("#tableCols").text( numOfCols - 1 );
});
$('.woofmark-command-table').attr('data-content', builder);
$('.woofmark-command-table').attr('data-container', 'body');
$('.woofmark-command-table').attr('data-placement', 'top');
$('.woofmark-command-table').popover({html: true});
let popoverIsOpen = false;
$('.wk-commands .woofmark-command-table').click(function() {
popoverIsOpen = !popoverIsOpen;
$('.ple-table-size').click(function() {
wysiwyg.runCommand(function(chunks, mode) {
var table = createTable(
+Number($('.ple-table-popover #tableCols').text()),
+Number($('.ple-table-popover #tableRows').text())
);
if (mode === 'markdown') chunks.before += table;
else {
chunks.before += _module.wysiwyg.parseMarkdown(table);
setTimeout(_module.afterParse, 0); // do this asynchronously so it applies Boostrap table styling
}
$('.woofmark-command-table').popover('toggle');
});
});
$(':not(".woofmark-command-table")').click((e) => {
// check to see that the clicked element isn't fa-table icon, else when you click on the fa-table icon, the popover will close
if (popoverIsOpen && $('.woofmark-command-table').children()[0] != e.target) {
const popoverContainer = document.querySelector('.popover');
const isChildElement = popoverContainer.contains(e.target);
if (popoverIsOpen && !e.target.classList.contains("woofmark-command-table") && !isChildElement) {
$('.woofmark-command-table').click();
}
}
});
// to hide the popover on pressing Esc button
$(document).on("keydown", (e) => {
if (popoverIsOpen && e.key == "Escape") {
$(".woofmark-command-table").click();
}
});
});
};