Added inline editing

double clicking on a cell or header will place a text box for editing

src/css/style.css

@@ -15,3 +15,17 @@ nav::-webkit-scrollbar {
 .selected {
   background-color: #24c278 !important;
 }
+
+.context-menu {
+  position: absolute;
+  background: white;
+}
+
+.inline-edit {
+  padding: 0!important;
+}
+
+td.inline-edit > textarea, th.inline-edit > textarea {
+  width: 100%;
+  height: 100%;
+}

src/js/editor.js

@@ -95,6 +95,9 @@ function makeCell(cell_id, cell_text) {
 		})
 		.on("contextmenu" , (event) => {
 			cellContextMenu(event, cell_id);
+		})
+		.on("dblclick", (event) => {
+			cellInlineEdit(event);
 		});
 }
 
@@ -104,6 +107,12 @@ function makeHeader(header_id, col_title) {
 		.text(col_title)
 		.on("click", () => {
 			selectCell(header_id);
+		})
+		.on("contextmenu", (event) => {
+			headerContextMenu(event, header_id);
+		})
+		.on("dblclick", (event) => {
+			headerInlineEdit(event);
 		});
 }
 
@@ -325,39 +334,38 @@ function cellContextMenu(event, cell_id) {
 	selectCell(cell_id);
 	let menu = $("<div></div>")
 		.attr("id", "context-menu-"+cell_id)
-		.addClass("border")
+		.addClass("border context-menu text-nowrap")
-		.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"))
+		.append($("<button></button>")
-	menu.append($("<button></button>")
+			.addClass("btn d-block")
-		.addClass("btn d-block")
+			.on("click", () => {
-		.on("click", () => {
+				let data = getSelectedCellData();
-			let data = getSelectedCellData();
+				insertRow(data["table_id"], data["row_index"]);
-			insertRow(data["table_id"], data["row_index"]+1);
+			})
-		})
+			.text("Insert row above"))
-		.text("Insert row below"))
+		.append($("<button></button>")
-	menu.append($("<button></button>")
+			.addClass("btn d-block")
-		.addClass("btn d-block")
+			.on("click", () => {
-		.on("click", () => {
+				let data = getSelectedCellData();
-			let data = getSelectedCellData();
+				insertRow(data["table_id"], data["row_index"]+1);
-			insertColumn(data["table_id"], data["col_index"]);
+			})
-		})
+			.text("Insert row below"))
-		.text("Insert column left"))
+		.append($("<button></button>")
-	menu.append($("<button></button>")
+			.addClass("btn d-block")
-		.addClass("btn d-block")
+			.on("click", () => {
-		.on("click", () => {
+				let data = getSelectedCellData();
-			let data = getSelectedCellData();
+				insertColumn(data["table_id"], data["col_index"]);
-			insertColumn(data["table_id"], data["col_index"]+1);
+			})
-		})
+			.text("Insert column left"))
-		.text("Insert column right"))
+		.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();
@@ -369,6 +377,113 @@ function cellContextMenu(event, cell_id) {
 	menu.css({"top": y_pos, "left": x_pos});
 }
 
+function headerContextMenu(event, header_id) {
+	if (!selected_cells.includes(header_id)) {
+		selectCell(header_id);
+	}
+	let menu = $("<div></div>")
+		.attr("id", "context-menu-"+header_id)
+		.addClass("border context-menu text-nowrap")
+		.on("mouseleave", () => {
+			menu.remove();
+		})
+		.append($("<button></button>")
+			.addClass("btn d-block")
+			.on("click", () => {
+				let data = getSelectedCellData();
+				insertColumn(data["table_id"], data["col_index"]);
+			})
+			.text("Insert column left"))
+		.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 cellInlineEdit(event) {
+	let data = getSelectedCellData()
+	let target = $(event.target);
+	let text_area = $("<textarea>")
+		.on("focusout", () => {
+			closeCellInlineEdit(true);
+		})
+		.on("keydown", (event) => {
+			if (event.key === "Escape") {
+				closeCellInlineEdit(false);
+			} else if (event.key === "Enter" && !event.shiftKey) {
+				closeCellInlineEdit(true);
+			}
+		})
+		.val(data["cell_text"]);
+	target.html(text_area)
+		.addClass("inline-edit");
+	text_area.focus();
+}
+
+function closeCellInlineEdit(save=false) {
+	if (save) {
+		let val = $("td.inline-edit > textarea").val()
+		$("td.inline-edit").html(val)
+			.removeClass("inline-edit");
+		let data = getSelectedCellData();
+		tables_data[data["table_index"]]["rows"][data["row_index"]][data["row_key"]] = val;
+		selected_cell_data["cell_text"] = val;
+		detail_cell_text.val(val);
+	} else {
+		let data = getSelectedCellData();
+		$("td.inline-edit").removeClass("inline-edit")
+			.html(data["cell_text"]);
+	}
+}
+
+function headerInlineEdit(event) {
+	let data = getSelectedCellData()
+	let target = $(event.target);
+	let text_area = $("<textarea>")
+		.on("focusout", () => {
+			closeHeaderInlineEdit(true);
+		})
+		.on("keydown", (event) => {
+			if (event.key === "Escape") {
+				closeHeaderInlineEdit(false);
+			} else if (event.key === "Enter" && !event.shiftKey) {
+				closeHeaderInlineEdit(true);
+			}
+		})
+		.val(data["col_name"]);
+	target.html(text_area)
+		.addClass("inline-edit");
+	text_area.focus();
+}
+
+function closeHeaderInlineEdit(save=false) {
+	if (save) {
+		let val = $("th.inline-edit > textarea").val()
+		$("th.inline-edit").html(val)
+			.removeClass("inline-edit");
+		let data = getSelectedCellData();
+		tables_data[data["table_index"]]["col-def"][data["col_index"]]["title"] = val;
+		selected_cell_data["col_name"] = val;
+		detail_column_name.val(val);
+	} else {
+		let data = getSelectedCellData();
+		$("th.inline-edit").removeClass("inline-edit")
+			.html(data["col_name"]);
+	}
+}
+
 function getColumnIDs(columns) {
 	let ids = [];
 	for (let col of columns) {