From 94dd5f58db26b61f3d48ae6754bd2e49ef58b55f Mon Sep 17 00:00:00 2001 From: Matthew Welch Date: Fri, 1 Jan 2021 23:36:17 -0800 Subject: [PATCH] Added right click menu for adding rows and columns moved code for making cells and headers to their own functions --- src/js/editor.js | 200 +++++++++++++++++++++++++++++++---------------- 1 file changed, 134 insertions(+), 66 deletions(-) diff --git a/src/js/editor.js b/src/js/editor.js index d4f82c5..8e438f0 100644 --- a/src/js/editor.js +++ b/src/js/editor.js @@ -33,62 +33,83 @@ function refreshPage() { showTab(tables_data[0]["id"]); } +function generateTable(table_data) { + const table_id = table_data["id"]; + let a = $("") + .attr("id", table_id + "-nav") + .addClass("nav-link") + .attr("href", "#" + table_id) + .text(table_data["name"]) + .on("click", () => { + showTab(table_id); + }); + let add_table_btn = nav.find("a[id='add-table']"); + if (add_table_btn.length !== 0) { + add_table_btn.before(a); + } else { + nav.append(a); + } + + let table_div = $("
") + .attr("id", table_id + "-tab") + .addClass("tab-pane table-responsive"); + + let table = $("
") + .attr("id", table_id) + .addClass("table table-bordered") + .append($("") + .append($("") + .addClass("text-nowrap"))) + .append(""); + + $.each(table_data["col-def"], (i, col) => { + const col_id = col["field"]; + let header_id = table_id + "-" + col_id; + table.find("thead > tr") + .append(makeHeader(header_id, col["title"])); + }) + + $.each(table_data["rows"], (i, row) => { + const row_id = row["uid"]; + let tr = $("") + .attr("id", table_id + "-" + row_id); + $.each(table_data["col-def"], (j, col) => { + const col_id = col["field"]; + let cell_id = table_id + "-" + col_id + "-" + row_id; + let td = makeCell(cell_id, row[col_id]); + tr.append(td); + }) + table.find("tbody").append(tr); + }) + + table_div.append(table) + $("#tables").append(table_div); +} + +function makeCell(cell_id, cell_text) { + return $("") + .attr("id", cell_id) + .text(cell_text) + .on("click", () => { + selectCell(cell_id); + }) + .on("contextmenu" , (event) => { + cellContextMenu(event, cell_id); + }); +} + +function makeHeader(header_id, col_title) { + return $("") + .attr("id", header_id) + .text(col_title) + .on("click", () => { + selectCell(header_id); + }); +} + function generateTables() { for (let table_data of tables_data) { - const table_id = table_data["id"]; - let a = $("") - .attr("id", table_id+"-nav") - .addClass("nav-link") - .attr("href", "#"+table_id) - .text(table_data["name"]) - .on("click", () => { - showTab(table_id); - }); - nav.append(a); - - let table_div = $("
") - .attr("id", table_id+"-tab") - .addClass("tab-pane table-responsive"); - - let table = $("
") - .attr("id", table_id) - .addClass("table table-bordered") - .append($("") - .append($("") - .addClass("text-nowrap"))) - .append(""); - - $.each(table_data["col-def"], (i, col) => { - const col_id = col["field"]; - table.find("thead > tr") - .append($("") - .attr("id", table_id+"-"+col_id) - .text(col["title"]) - .on("click", () => { - selectCell(table_id+"-"+col_id); - })); - }) - - $.each(table_data["rows"], (i, row) => { - const row_id = row["uid"]; - let tr = $("") - .attr("id", table_id+"-"+row_id); - $.each(table_data["col-def"], (j, col) => { - const col_id = col["field"]; - let cell_id = table_id+"-"+col_id+"-"+row_id; - let td = $("") - .attr("id", cell_id) - .text(row[col_id]) - .on("click", () => { - selectCell(cell_id); - }); - tr.append(td); - }) - table.find("tbody").append(tr); - }) - - table_div.append(table) - $("#tables").append(table_div); + generateTable(table_data); } nav.append($("") .attr("id", "add-table") @@ -129,8 +150,8 @@ function selectCell(cell_id) { updateDetailsPanel(); } -function getSelectedCellData() { - if (selected_cell_data && selected_cells[0] === selected_cell_data["selected_id"]) { +function getSelectedCellData(force_update=false) { + if (!force_update && selected_cell_data && selected_cells[0] === selected_cell_data["selected_id"]) { return selected_cell_data; } let table_pattern = /(table\d+)/; @@ -207,7 +228,7 @@ function addTable() { ] } tables_data.push(table_data); - refreshPage(); + generateTable(table_data); } function insertColumn(table_id, index) { @@ -240,18 +261,17 @@ function insertColumn(table_id, index) { this.before(data); }; } + let header_id = table_id + "-" + col_id; $(`#${table_id} > thead > tr > th:nth-child(${index + 1})`) - .insert($("") - .attr("id", table_id + "-" + col_id) - .text("New Column")); + .insert(makeHeader(header_id, "New Column")); $(`#${table_id} > tbody > tr`).each((j, tr) => { tr = $(tr); + let cell_id = table_id+"-"+col_id+"-"+table_data["rows"][j]["uid"]; tr.children(`td:nth-child(${index + 1})`) - .insert($("") - .attr("id", table_id+"-"+col_id+"-"+table_data["rows"][j]["uid"]) - .text("")) + .insert(makeCell(cell_id, "")) }); + getSelectedCellData(true); return false; } }) @@ -290,17 +310,65 @@ function insertRow(table_id, index) { let tr = $("") .attr("id", table_id+"-"+row_id); for (let col_id of col_ids) { - tr.append($("") - .attr("id", table_id+"-"+col_id+"-"+row_id) - .text("")) + let cell_id = table_id+"-"+col_id+"-"+row_id; + tr.append(makeCell(cell_id, "")) } $(`#${table_id} > tbody > tr:nth-child(${index+1})`) .insert(tr); + getSelectedCellData(true); return false; } }) } +function cellContextMenu(event, cell_id) { + selectCell(cell_id); + let menu = $("
") + .attr("id", "context-menu-"+cell_id) + .addClass("border") + .css({"position": "absolute", "background": "white"}) + .on("mouseleave", () => { + menu.remove(); + }); + menu.append($("") + .addClass("btn d-block") + .on("click", () => { + let data = getSelectedCellData(); + insertRow(data["table_id"], data["row_index"]); + }) + .text("Insert row above")) + menu.append($("") + .addClass("btn d-block") + .on("click", () => { + let data = getSelectedCellData(); + insertRow(data["table_id"], data["row_index"]+1); + }) + .text("Insert row below")) + menu.append($("") + .addClass("btn d-block") + .on("click", () => { + let data = getSelectedCellData(); + insertColumn(data["table_id"], data["col_index"]); + }) + .text("Insert column left")) + menu.append($("") + .addClass("btn d-block") + .on("click", () => { + let data = getSelectedCellData(); + insertColumn(data["table_id"], data["col_index"]+1); + }) + .text("Insert column right")) + + let max_height = $(document).height(); + let max_width = $(document).width(); + let x_pos = event.pageX-5; + let y_pos = event.pageY-5; + $("body").append(menu); + y_pos = Math.min(y_pos, max_height-menu.height()); + x_pos = Math.min(x_pos, max_width-menu.width()); + menu.css({"top": y_pos, "left": x_pos}); +} + function getColumnIDs(columns) { let ids = []; for (let col of columns) {