matt/enckes-web-editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor to remove html strings

Browse Source 
Change sanitizeName to just remove spaces
Changed some selectors to use standard JS to work with special characters in element id
This commit is contained in:
Matthew Welch 2020-11-27 20:04:17 -08:00
parent 4ee75511ad
commit 989ef96931
2 changed files with 262 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/index.js
View File

@ -81,6 +81,7 @@ function openFile() {
} }
function loadFile(file_name) { function loadFile(file_name) {
save_data.file_path = file_name;
createWindow(); createWindow();
mainWindow.webContents.once("dom-ready", () => { mainWindow.webContents.once("dom-ready", () => {
mainWindow.webContents.send("open", file_name); mainWindow.webContents.send("open", file_name);
@ -88,11 +89,10 @@ function loadFile(file_name) {
}) })
} }
function sanitizeName(table_name) { function sanitizeName(name) {
let pattern = " !@#$%^&*()_+=/?.,<>;':\"[]{}\\`~|-" let new_name = name.toLowerCase();
let new_name = table_name.toLowerCase(); for (let char of name) {
for (let char of table_name) { if (char === " ") {
if (pattern.includes(char)) {
new_name = new_name.replace(char, ""); new_name = new_name.replace(char, "");
} }
} }
@ -171,19 +171,86 @@ ipcMain.on("save", (event, data, new_file) => {
if (!table["hidden"]) { if (!table["hidden"]) {
if (!added_tables.includes(table["name"])) { if (!added_tables.includes(table["name"])) {
if (table["tab-name"] == "") { if (table["tab-name"] == "") {
tabs += `<div class="tab-pane fade" id="${sanitizeName(table["name"])}" role="tabpanel" aria-labelledby="${sanitizeName(table["name"])}-tab"><h3 id="${sanitizeName(table["name"])}-header">${table["name"]} (<span id="${sanitizeName(table["name"])}-completed"></span>/<span id="${sanitizeName(table["name"])}-total"></span>)</h3><p>${table["description"]}</p><table id="${sanitizeName(table["name"])}-table" class="table table-hover"></table></div>`; tabs += $("<div></div>")
nav += `<li class="nav-item"><a class="nav-link" id="${sanitizeName(table["name"])}-tab" data-toggle="tab" href="#${sanitizeName(table["name"])}" role="tab" aria-controls="${sanitizeName(table["name"])}" aria-selected="false">${table["name"]}</a></li>` .addClass("tab-pane fade")
.attr("id", sanitizeName(table["name"]))
.attr("role", "tabpanel")
.attr("aria-labelledby", sanitizeName(table["name"])+"-tab")
.append($("<h3></h3>")
.attr("id", sanitizeName(table["name"])+"-header")
.append(`${table["name"]} (`)
.append($("<span></span>")
.attr("id", sanitizeName(table["name"])+"-completed"))
.append("/")
.append($("<span></span>")
.attr("id", sanitizeName(table["name"])+"-total"))
.append(")"))
.append($("<p></p>")
.html(table["description"]))
.append($("<table></table>")
.attr("id", sanitizeName(table["name"])+"-table")
.addClass("table table-hover"))
.html();
nav += $("<li></li>")
.addClass("nav-item")
.append($("<a></a>")
.addClass("nav-link")
.attr("id", sanitizeName(table["name"])+"-tab")
.attr("data-toggle", "tab")
.attr("href", "#"+sanitizeName(table["name"]))
.attr("role", "tab")
.attr("aria-controls", sanitizeName(table["name"]))
.attr("aria-selected", false)
.html(table["name"]))
.html();
added_tables.push(table["name"]); added_tables.push(table["name"]);
} else { } else {
let tab_name = table["tab-name"]; let tab_name = table["tab-name"];
let a = `<a id="${sanitizeName(tab_name)}-tab" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">${tab_name}</a>` let a = $("<a></a>")
let div = $(`<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0; left: 0; transform: translate3d(0px, 39px, 0px);"></div>`) .attr("id", sanitizeName(tab_name)+"-tab")
.addClass("nav-link dropdown-toggle")
.attr("data-toggle", "dropdown")
.attr("href", "#")
.attr("role", "button")
.attr("aria-haspopup", true)
.attr("aria-expanded", false)
.html(tab_name);
let div = $("<div></div>")
.addClass("dropdown-menu")
.attr("x-placement", "bottom-start")
.css({"position": "absolute", "will-change": "transform", "top": "0", "left": "0", "transform": "translate3d(0px, 39px, 0px)"});
for (let tab_table of table_tabs[tab_name]) { for (let tab_table of table_tabs[tab_name]) {
tabs += `<div class="tab-pane fade" id="${sanitizeName(tab_table["name"])}" role="tabpanel" aria-labelledby="${sanitizeName(tab_table["name"])}-tab"><h3 id="${sanitizeName(tab_table["name"])}-header">${tab_table["name"]} (<span id="${sanitizeName(tab_table["name"])}-completed"></span>/<span id="${sanitizeName(tab_table["name"])}-total"></span>)</h3><p>${tab_table["description"]}</p><table id="${sanitizeName(tab_table["name"])}-table" class="table table-hover"></table></div>`; tabs += $("<div></div>")
div.append(`<a class="dropdown-item" data-toggle="tab" href="#${sanitizeName(tab_table["name"])}" aria-expanded="true">${tab_table["name"]}</a>`) .addClass("tab-pane fade")
.attr("id", sanitizeName(tab_table["name"]))
.attr("role", "tabpanel")
.attr("aria-labelledby", sanitizeName(table["name"])+"-tab")
.append($("<h3></h3>")
.attr("id", sanitizeName(tab_table["name"])+"-header")
.append(`${tab_table["name"]} (`)
.append($("<span></span>")
.attr("id", sanitizeName(tab_table["name"])+"-completed"))
.append("/")
.append($("<span></span>")
.attr("id", sanitizeName(tab_table["name"])+"-total"))
.append(")"))
.append($("<p></p>")
.html(tab_table["description"]))
.append($("<table></table>")
.attr("id", sanitizeName(tab_table["name"])+"-table")
.addClass("table table-hover"))
.html();
div.append("<a></a>")
.addClass("dropdown-item")
.attr("data-toggle", "tab")
.attr("href", "#"+sanitizeName(tab_table["name"]))
.attr("aria-expanded", true)
.html(tab_table["name"]);
added_tables.push(tab_table["name"]); added_tables.push(tab_table["name"]);
} }
let li = $(`<li class="nav-item dropdown"></li>`); let li = $("<li></li>")
.addClass("nav-item dropdown");
li.append(a); li.append(a);
li.append(div); li.append(div);
nav += li.prop('outerHTML'); nav += li.prop('outerHTML');

249
src/js/script.js
View File

@ -17,10 +17,9 @@ $.ajax({
}); });
function sanitizeName(table_name) { function sanitizeName(table_name) {
let pattern = " !@#$%^&*()_+=/?.,<>;':\"[]{}\\`~|-"
let new_name = table_name.toLowerCase(); let new_name = table_name.toLowerCase();
for (let char of table_name) { for (let char of table_name) {
if (pattern.includes(char)) { if (char === " ") {
new_name = new_name.replace(char, ""); new_name = new_name.replace(char, "");
} }
} }
@ -39,13 +38,39 @@ function makeTables() {
let table_index = data.indexOf(table); let table_index = data.indexOf(table);
// create nav element // create nav element
$("nav").append(`<button id="${name}-nav" class="w3-bar-item w3-button tablink" style="white-space: nowrap" onclick="showTable('${name}')" oncontextmenu="navContext(event, '${table["name"]}')" draggable="true" ondrop='tableDrop(event, ${table_index})' ondragstart='tableDrag(event, ${table_index})' ondragover='allowDrop(event)'>${table["name"]}</button>`); let btn = $("<button></button>")
.attr("id", name+"-nav")
.addClass("w3-bar-item w3-button tablink")
.css("white-space", "nowrap")
.on("click", () => {
showTable(name);
})
.on("contextmenu", (event) => {
navContext(event, table["name"]);
})
.attr("draggable", true)
.on("drop", (event) => {
tableDrop(event, table_index);
})
.on("dragstart", (event) => {
tableDrag(event, table_index);
})
.on("dragover", (event) => {
allowDrop(event)
})
.text(table["name"]);
let textarea = $(`<textarea id="${name}-description" class="table-description">${table["description"]}</textarea>`); $("nav").append(btn);
textarea.focusout(function (event){save()});
let table_elm = $("<table class='editor-table'></table>"); let textarea = $(`<textarea></textarea>`)
table_elm.attr("id", name+"-table"); .focusout(function (event){save()})
.attr("id", name+"-description")
.addClass("table-description")
.text(table["description"]);
let table_elm = $("<table></table>");
table_elm.attr("id", name+"-table")
.addClass("editor-table");
let cols = table["col-def"] let cols = table["col-def"]
@ -53,60 +78,123 @@ function makeTables() {
let td = $("<td></td>"); let td = $("<td></td>");
td.css("border", "none"); td.css("border", "none");
if (data.length > 1) { if (data.length > 1) {
td.html(`<button class="w3-button w3-red" onclick="deleteTable('${table["name"]}')">Delete Table</button>`); btn = $("<button>Delete Table</button>")
.addClass("w3-button w3-red")
.on("click", () => {
deleteTable(table["name"]);
});
td.html(btn);
} }
tr.append(td); tr.append(td);
let index = 0; let index = 0;
for (let col of cols) { for (let col of cols) {
let id = name+"-"+index.toString(); let id = name+"-"+index.toString();
let th = $(`<th class="w3-display-container" onclick="selectCell('${table["name"]}', '${col["title"]}', '${col["field"]}', '${id}')" draggable="true" ondrop="colDrop(event, '${name}', ${index})" ondragstart="drag(event, ${index})" ondragover="allowDrop(event)" ondblclick="startEditHeader('${id}')"></th>`); let th = $("<th></th>")
th.attr("id", id); .attr("id", id)
th.append(`<span style="margin-right: 44px; white-space: nowrap">${col.title}</span>`); .addClass("w3-display-container")
th.append(`<span class="w3-button w3-display-right w3-hover-red" onclick="deleteCol('${table["name"]}', ${index})">&times;</span>`); .on("click", (event) => {
tr.append(th); selectCell(table["name"], col["title"], col["field"], id);
})
.attr("draggable", true).
on("drop", {index:index}, (event) => {
colDrop(event, name, event.data.index);
})
.on("dragstart", {index:index}, (event) => {
drag(event, event.data.index);
})
.on("dragover", (event) => {
allowDrop(event);
})
.on("dblclick", () => {
startEditHeader(id);
})
.append($("<span></span>")
.css({"margin-right": "44px", "white-space": "nowrap"})
.text(col.title))
.append($(`<span>&times;</span>`)
.addClass("w3-button w3-display-right w3-hover-red")
.on("click", {index:index}, (event) => {
console.log(table["name"], event.data.index)
deleteCol(table["name"], event.data.index);
}));
tr.append(th)
index++; index++;
} }
td = $("<td></td>"); td = $("<td></td>")
td.css("border", "none"); .css("border", "none")
td.html(`<button class="w3-button w3-green" onclick="addColumn('${table["name"]}')">Add Column</button>`); .html($("<button>Add Column</button>")
.addClass("w3-button w3-green")
.on("click", () => {
addColumn(table["name"]);
}));
tr.append(td); tr.append(td);
table_elm.append(tr); table_elm.append(tr);
for (let row of table["rows"]) { for (let row of table["rows"]) {
let index = table["rows"].indexOf(row); let index = table["rows"].indexOf(row);
tr = $(`<tr id="${row["uid"]}" ondrop="rowDrop(event, '${name}', ${index})" ondragover="allowDrop(event)"></tr>`); tr = $("<tr></tr>")
.attr("id", row["uid"])
.on("drop", (event) => {
rowDrop(event, name, index);
})
.on("dragover", (event) => {
allowDrop(event);
})
td = $("<td></td>"); td = $("<td></td>")
td.css("border", "none"); .css("border", "none")
td.append(`<button class="w3-button w3-tiny w3-red" onclick="deleteRow('${table["name"]}', ${index})">×</button>`); .append($("<button>×</button>")
td.append(`<div style="display: inline; float: right; font-size: 2em" draggable="true" ondragstart="rowDrag(event, '${index}')">☰</div>`); .addClass("w3-button w3-tiny w3-red")
.on("click", () => {
deleteRow(table["name"], index);
}))
.append($("<div>☰</div>")
.css({"display": "inline", "float": "right", "font-size": "2em"})
.attr("draggable", true)
.on("dragstart", (event) => {
rowDrag(event, index);
}));
tr.append(td); tr.append(td);
for (let col of cols) { for (let col of cols) {
let uid = row["uid"]+"-"+col["field"]; let uid = row["uid"]+"-"+col["field"];
td = $(`<td id="${uid}" onclick="selectCell('${table["name"]}', '${col["title"]}', '${col["field"]}', '${uid}')" ondblclick="startEditCell('${uid}')"></td>`); td = $("<td></td>")
td.html(row[col["field"]]); .html(row[col["field"]])
// td.click(function (){ .attr("id", uid)
// selectCell(table["name"], col["title"], col["field"], index); .on("click", () => {
// }); selectCell(table["name"], col["title"], col["field"], uid);
})
.on("dblclick", () => {
startEditCell(uid);
});
tr.append(td); tr.append(td);
} }
table_elm.append(tr); table_elm.append(tr);
} }
tr = $("<tr></tr>"); tr = $("<tr></tr>");
td = $("<td></td>"); td = $("<td></td>")
td.css("border", "none"); .css("border", "none")
td.html(`<button class="w3-button w3-green" onclick="addRow('${name}')">Add Row</button>`); .html($(`<button>Add Row</button>`)
.addClass("w3-button w3-green")
.on("click", () => {
addRow(name);
}));
tr.append(td); tr.append(td);
table_elm.append(tr); table_elm.append(tr);
// table_elm.attr("class", "table table-hover"); // table_elm.attr("class", "table table-hover");
$("#tables").append(textarea); $("#tables").append(textarea)
$("#tables").append(table_elm); .append(table_elm);
} }
$("nav").append("<button class='w3-button w3-green' onclick='addTable()'>+</button>"); $("nav").append($("<button>+</button>")
.addClass("w3-button w3-green")
.on("click", () => {
addTable();
}));
} }
function removeTables() { function removeTables() {
@ -253,7 +341,7 @@ function addTable(dup_table=null, tab_name=null) {
} }
function selectCell(table_name, title, field, cell_id) { function selectCell(table_name, title, field, cell_id) {
let elm = $("#"+cell_id); let elm = $(document.getElementById(cell_id));
if (elm.is("th")) { if (elm.is("th")) {
$("#cell-text").prop("disabled", true); $("#cell-text").prop("disabled", true);
$("#cell-text").val(""); $("#cell-text").val("");
@ -319,7 +407,8 @@ function save() {
return; return;
} }
} }
table["description"] = $(`#${sanitizeName(table["name"])}-description`).val(); let table_description = $(document.getElementById(`${sanitizeName(table["name"])}-description`));
table["description"] = table_description.val();
table["tab-name"] = tab_name; table["tab-name"] = tab_name;
table["hidden"] = table_hidden; table["hidden"] = table_hidden;
for (let col of table["col-def"]) { for (let col of table["col-def"]) {
@ -426,15 +515,15 @@ function moveTable(old_index, new_index) {
} }
function drag(event, old_index) { function drag(event, old_index) {
event.dataTransfer.setData("text", old_index); event.originalEvent.dataTransfer.setData("text", old_index);
} }
function rowDrag(event, old_index) { function rowDrag(event, old_index) {
event.dataTransfer.setData("text", old_index); event.originalEvent.dataTransfer.setData("text", old_index);
} }
function tableDrag(event, table_index) { function tableDrag(event, table_index) {
event.dataTransfer.setData("text", table_index.toString()); event.originalEvent.dataTransfer.setData("text", table_index.toString());
} }
function allowDrop(event) { function allowDrop(event) {
@ -443,19 +532,19 @@ function allowDrop(event) {
function colDrop(event, table_name, new_index) { function colDrop(event, table_name, new_index) {
event.preventDefault(); event.preventDefault();
let old_index = event.dataTransfer.getData("text"); let old_index = event.originalEvent.dataTransfer.getData("text");
moveCol(table_name, parseInt(old_index), new_index); moveCol(table_name, parseInt(old_index), new_index);
} }
function rowDrop(event, table_name, new_index) { function rowDrop(event, table_name, new_index) {
event.preventDefault(); event.preventDefault();
let old_index = event.dataTransfer.getData("text"); let old_index = event.originalEvent.dataTransfer.getData("text");
moveRow(table_name, parseInt(old_index), new_index); moveRow(table_name, parseInt(old_index), new_index);
} }
function tableDrop(event, new_index) { function tableDrop(event, new_index) {
event.preventDefault(); event.preventDefault();
let old_index = event.dataTransfer.getData("text"); let old_index = event.originalEvent.dataTransfer.getData("text");
moveTable(parseInt(old_index), new_index); moveTable(parseInt(old_index), new_index);
} }
@ -468,20 +557,24 @@ function showTable(table_name) {
let tables = $(".editor-table"); let tables = $(".editor-table");
tables.css("display", "none"); tables.css("display", "none");
$(`#${table_name}-table`).css("display", "block"); $(document.getElementById(`${table_name}-table`))
.css("display", "block");
let table_description = $(".table-description"); let table_description = $(".table-description");
table_description.css("display", "none"); table_description.css("display", "none");
$(`#${table_name}-description`).css("display", "block"); $(document.getElementById(`${table_name}-description`))
.css("display", "block");
let tabs = $(".tablink"); let tabs = $(".tablink");
tabs.removeClass("w3-grey"); tabs.removeClass("w3-grey");
$(`#${table_name}-nav`).addClass("w3-grey"); $(document.getElementById(`${table_name}-nav`))
.addClass("w3-grey");
for (let table of data) { for (let table of data) {
if (sanitizeName(table["name"]) == table_name) { if (sanitizeName(table["name"]) == table_name) {
if (reset) { if (reset) {
let child = $($($("#"+table_name+"-table").children()[1]).children()[1]); let child = $(document.getElementById(table_name+"-table"))
.children(":nth-child(2)").children(":nth-child(2)");
selectCell(table["name"], table["col-def"][0]["title"], table["col-def"][0]["field"], child.attr("id")); selectCell(table["name"], table["col-def"][0]["title"], table["col-def"][0]["field"], child.attr("id"));
} else { } else {
let elm = $(`#${selected["cell"]}`); let elm = $(document.getElementById(selected["cell"]));
selectCell(table["name"], current_col["title"], current_col["field"], selected["cell"]); selectCell(table["name"], current_col["title"], current_col["field"], selected["cell"]);
} }
} }
@ -489,11 +582,20 @@ function showTable(table_name) {
} }
function startEditCell(cell_id) { function startEditCell(cell_id) {
let cell = $(`#${cell_id}`); let cell = $(document.getElementById(cell_id));
let cell_text = $("#cell-text").val(); let cell_text = $("#cell-text").val();
let td = $(`<td id="${cell_id}" class="w3-green text-edit"></td>`); let td = $("<td></td>")
let text_area = $(`<textarea id="${cell_id}-edit" onkeydown="finishEditCell(event, '${cell_id}')">${cell_text}</textarea>`); .attr("id", cell_id)
text_area.focusout(function (event){finishEditCell(event, cell_id)}); .addClass("w3-green text-edit");
let text_area = $(`<textarea></textarea>`)
.on("focusout", (event) => {
finishEditCell(event, cell_id);
})
.attr("id", cell_id+"-edit")
.on("keydown", (event) => {
finishEditCell(event, cell_id);
})
.text(cell_text);
td.append(text_area); td.append(text_area);
cell.parent().css("height", `${cell.outerHeight()}px`); cell.parent().css("height", `${cell.outerHeight()}px`);
cell.replaceWith(td); cell.replaceWith(td);
@ -501,11 +603,20 @@ function startEditCell(cell_id) {
} }
function startEditHeader(cell_id) { function startEditHeader(cell_id) {
let cell = $(`#${cell_id}`); let cell = $(document.getElementById(cell_id));
let cell_text = $("#col-name").val(); let cell_text = $("#col-name").val();
let th = $(`<th id="${cell_id}" class="w3-green text-edit"></th>`); let th = $(`<th></th>`)
let text_area = $(`<textarea id="${cell_id}-edit" onkeydown="finishEditHeader(event, '${cell_id}')">${cell_text}</textarea>`); .attr("id", cell_id)
text_area.focusout(function (event){finishEditHeader(event, cell_id)}); .addClass("w3-green text-edit");
let text_area = $("<textarea></textarea>")
.on("focusout", (event) => {
finishEditHeader(event, cell_id);
})
.attr("id", cell_id+"-edit")
.on("keydown", (event) => {
finishEditHeader(event, cell_id);
})
.text(cell_text);
th.append(text_area); th.append(text_area);
cell.parent().css("height", `${cell.outerHeight()}px`); cell.parent().css("height", `${cell.outerHeight()}px`);
cell.replaceWith(th); cell.replaceWith(th);
@ -513,7 +624,7 @@ function startEditHeader(cell_id) {
} }
function finishEditCell(event, cell_id) { function finishEditCell(event, cell_id) {
let cell = $(`#${cell_id}-edit`); let cell = $(document.getElementById(`${cell_id}-edit`));
if (event.ctrlKey && event.key == "Enter") { if (event.ctrlKey && event.key == "Enter") {
cell.off("focusout"); cell.off("focusout");
let text_area_val = cell.val(); let text_area_val = cell.val();
@ -532,26 +643,26 @@ function finishEditCell(event, cell_id) {
} }
function finishEditHeader(event, cell_id) { function finishEditHeader(event, cell_id) {
let cell = $(`#${cell_id}-edit`); let cell = $(document.getElementById(`${cell_id}-edit`));
if (event.ctrlKey && event.key == "Enter") { if (event.ctrlKey && event.key == "Enter") {
cell.off("focusout"); cell.off("focusout");
let text_area_val = $(`#${cell_id}-edit`).val(); let text_area_val = $(document.getElementById(`${cell_id}-edit`)).val();
$("#col-name").val(text_area_val); $("#col-name").val(text_area_val);
save(); save();
} else if (event.key == "Escape") { } else if (event.key == "Escape") {
cell.off("focusout"); cell.off("focusout");
let cell_val = $("#col-name").val(); let cell_val = $("#col-name").val();
$(`#${cell_id}-edit`).val(cell_val); $(document.getElementById(`${cell_id}-edit`)).val(cell_val);
save(); save();
} else if (event.type == "focusout") { } else if (event.type == "focusout") {
let text_area_val = $(`#${cell_id}-edit`).val(); let text_area_val = $(document.getElementById(`${cell_id}-edit`)).val();
$("#col-name").val(text_area_val); $("#col-name").val(text_area_val);
save(); save();
} }
} }
function finishEditDescription(event, table_name) { function finishEditDescription(event, table_name) {
let cell = $(`#${table_name}-description`); let cell = $(document.getElementById(`${table_name}-description`));
if (event.ctrlKey && event.key == "Enter") { if (event.ctrlKey && event.key == "Enter") {
cell.off("focusout"); cell.off("focusout");
// let text_area_val = $(`#${cell_id}-edit`).val(); // let text_area_val = $(`#${cell_id}-edit`).val();
@ -570,13 +681,19 @@ function finishEditDescription(event, table_name) {
} }
function navContext(event, table_name) { function navContext(event, table_name) {
let context_menu = $(`<div style="position: absolute; top: ${event.y-10}px;left: ${event.x-10}px" onmouseleave="$(this).remove()"></div>`); let context_menu = $(`<div></div>`)
let buttons = $(`<div class="w3-dropdown-content w3-bar-block w3-border" style="display: block"> .css({"position": "absolute", "top": `${event.originalEvent.y-10}px`, "left": `${event.originalEvent.x-10}px`})
<button class="w3-bar-item w3-button" onclick="duplicateTable('${table_name}')">duplicate</button> .on("mouseleave", () => {
<!--<button class="w3-bar-item w3-button" onclick="addSubTable('${table_name}')">new sub table</button>--> context_menu.remove();
</div>`) });
// context_menu.append(`<button style="display: block" onclick="duplicateTable('${table_name}')">duplicate</button>`); let buttons = $("<div></div>")
// context_menu.append(`<button style="display: block" onclick="addSubTable('${table_name}')">new sub table</button>`); .addClass("w3-dropdown-content w3-bar-block w3-border")
.css("display", "block")
.append($("<button>duplicate</button>")
.addClass("w3-bar-item w3-button")
.on("click", () => {
duplicateTable(table_name);
}));
context_menu.append(buttons) context_menu.append(buttons)
$("body").append(context_menu); $("body").append(context_menu);
} }