Added right click menu for adding rows and columns
moved code for making cells and headers to their own functions
This commit is contained in:
parent
1b85241d65
commit
94dd5f58db
200
src/js/editor.js
200
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 = $("<a></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 = $("<div></div>")
|
||||
.attr("id", table_id + "-tab")
|
||||
.addClass("tab-pane table-responsive");
|
||||
|
||||
let table = $("<table></table>")
|
||||
.attr("id", table_id)
|
||||
.addClass("table table-bordered")
|
||||
.append($("<thead></thead>")
|
||||
.append($("<tr></tr>")
|
||||
.addClass("text-nowrap")))
|
||||
.append("<tbody>");
|
||||
|
||||
$.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 = $("<tr></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 $("<td></td>")
|
||||
.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 $("<th>")
|
||||
.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 = $("<a></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 = $("<div></div>")
|
||||
.attr("id", table_id+"-tab")
|
||||
.addClass("tab-pane table-responsive");
|
||||
|
||||
let table = $("<table></table>")
|
||||
.attr("id", table_id)
|
||||
.addClass("table table-bordered")
|
||||
.append($("<thead></thead>")
|
||||
.append($("<tr></tr>")
|
||||
.addClass("text-nowrap")))
|
||||
.append("<tbody>");
|
||||
|
||||
$.each(table_data["col-def"], (i, col) => {
|
||||
const col_id = col["field"];
|
||||
table.find("thead > tr")
|
||||
.append($("<th>")
|
||||
.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 = $("<tr></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 = $("<td></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($("<a></a>")
|
||||
.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($("<th>")
|
||||
.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($("<td>")
|
||||
.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 = $("<tr></tr>")
|
||||
.attr("id", table_id+"-"+row_id);
|
||||
for (let col_id of col_ids) {
|
||||
tr.append($("<td>")
|
||||
.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 = $("<div></div>")
|
||||
.attr("id", "context-menu-"+cell_id)
|
||||
.addClass("border")
|
||||
.css({"position": "absolute", "background": "white"})
|
||||
.on("mouseleave", () => {
|
||||
menu.remove();
|
||||
});
|
||||
menu.append($("<button></button>")
|
||||
.addClass("btn d-block")
|
||||
.on("click", () => {
|
||||
let data = getSelectedCellData();
|
||||
insertRow(data["table_id"], data["row_index"]);
|
||||
})
|
||||
.text("Insert row above"))
|
||||
menu.append($("<button></button>")
|
||||
.addClass("btn d-block")
|
||||
.on("click", () => {
|
||||
let data = getSelectedCellData();
|
||||
insertRow(data["table_id"], data["row_index"]+1);
|
||||
})
|
||||
.text("Insert row below"))
|
||||
menu.append($("<button></button>")
|
||||
.addClass("btn d-block")
|
||||
.on("click", () => {
|
||||
let data = getSelectedCellData();
|
||||
insertColumn(data["table_id"], data["col_index"]);
|
||||
})
|
||||
.text("Insert column left"))
|
||||
menu.append($("<button></button>")
|
||||
.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) {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user