matt/WebEditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added inline editing

Browse Source 
double clicking on a cell or header will place a text box for editing
This commit is contained in:
Matthew Welch 2021-01-03 00:11:27 -08:00
parent 94dd5f58db
commit 87b31074b4
2 changed files with 159 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/css/style.css
View File

@ -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%;
}

175
src/js/editor.js
View File

@ -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")
.css({"position": "absolute", "background": "white"})
.addClass("border context-menu text-nowrap")
.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"))
.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>")
.addClass("btn d-block")
.on("click", () => {
let data = getSelectedCellData();
insertRow(data["table_id"], data["row_index"]+1);
})
.text("Insert row below"))
.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();
@ -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) {