Added direct editing for headers

This commit is contained in:
Matthew Welch 2020-09-08 17:57:08 -07:00
parent b78efa587a
commit e8779b9827

View File

@ -32,34 +32,35 @@ 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}')" draggable="true" ondrop='tableDrop(event, ${table_index})' ondragstart='tableDrag(event, ${table_index})' ondragover='allowDrop(event)'>${table["name"]}</button>`) $("nav").append(`<button id="${name}-nav" class="w3-bar-item w3-button tablink" style="white-space: nowrap" onclick="showTable('${name}')" draggable="true" ondrop='tableDrop(event, ${table_index})' ondragstart='tableDrag(event, ${table_index})' ondragover='allowDrop(event)'>${table["name"]}</button>`);
let table_elm = $("<table class='editor-table'></table>"); let table_elm = $("<table class='editor-table'></table>");
table_elm.attr("id", name+"-table"); table_elm.attr("id", name+"-table");
let cols = table["col-def"] let cols = table["col-def"]
let tr = $("<tr></tr>"); let tr = $("<tr></tr>");
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>`) td.html(`<button class="w3-button w3-red" onclick="deleteTable('${table["name"]}')">Delete Table</button>`);
} }
tr.append(td) tr.append(td);
let index = 0; let index = 0;
for (let col of cols) { for (let col of cols) {
let th = $(`<th class="w3-display-container" draggable="true" ondrop="colDrop(event, '${name}', ${index})" ondragstart="drag(event, ${index})" ondragover="allowDrop(event)"></th>`); let id = name+"-"+index.toString();
th.attr("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>`);
th.attr("id", id);
th.append(`<span style="margin-right: 44px; white-space: nowrap">${col.title}</span>`); th.append(`<span style="margin-right: 44px; white-space: nowrap">${col.title}</span>`);
th.append(`<span class="w3-button w3-display-right w3-hover-red" onclick="deleteCol('${table["name"]}', ${index})">&times;</span>`) th.append(`<span class="w3-button w3-display-right w3-hover-red" onclick="deleteCol('${table["name"]}', ${index})">&times;</span>`);
tr.append(th); tr.append(th);
index++; index++;
} }
td = $("<td></td>") td = $("<td></td>");
td.css("border", "none") td.css("border", "none");
td.html(`<button class="w3-button w3-green" onclick="addColumn('${table["name"]}')">Add Column</button>`) td.html(`<button class="w3-button w3-green" onclick="addColumn('${table["name"]}')">Add Column</button>`);
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);
@ -68,7 +69,7 @@ function makeTables() {
td = $("<td></td>"); td = $("<td></td>");
td.css("border", "none"); td.css("border", "none");
td.append(`<button class="w3-button w3-tiny w3-red" onclick="deleteRow('${table["name"]}', ${index})">×</button>`); td.append(`<button class="w3-button w3-tiny w3-red" onclick="deleteRow('${table["name"]}', ${index})">×</button>`);
td.append(`<div style="display: inline; float: right; font-size: 2em" draggable="true" ondragstart="rowDrag(event, '${index}')">☰</div>`) td.append(`<div style="display: inline; float: right; font-size: 2em" draggable="true" ondragstart="rowDrag(event, '${index}')">☰</div>`);
tr.append(td); tr.append(td);
for (let col of cols) { for (let col of cols) {
@ -97,7 +98,7 @@ function makeTables() {
} }
function removeTables() { function removeTables() {
$("nav").empty(); $("#nav").empty();
$("#tables").empty(); $("#tables").empty();
} }
@ -216,9 +217,17 @@ function addTable() {
function selectCell(table_name, title, field, cell_id) { function selectCell(table_name, title, field, cell_id) {
let elm = $("#"+cell_id); let elm = $("#"+cell_id);
if (elm.is("th")) {
$("#cell-text").prop("disabled", true);
$("#cell-text").val("");
}
else {
$("#cell-text").prop("disabled", false);
}
selected = {table_name:table_name,title:title,field:field, cell:cell_id}; selected = {table_name:table_name,title:title,field:field, cell:cell_id};
current_col = {"title":title, "field":field}; current_col = {"title":title, "field":field};
$("td").removeClass("w3-green"); $("td").removeClass("w3-green");
$("th").removeClass("w3-green");
elm.addClass("w3-green"); elm.addClass("w3-green");
for (let table of data) { for (let table of data) {
if (table["name"] == table_name) { if (table["name"] == table_name) {
@ -228,7 +237,7 @@ function selectCell(table_name, title, field, cell_id) {
for (let col of table["col-def"]) { for (let col of table["col-def"]) {
if (col["title"] == title) { if (col["title"] == title) {
$("#col-sortable").prop("checked", col["sortable"]); $("#col-sortable").prop("checked", col["sortable"]);
$("#col-selectable").prop("checked", col["selectable"]) $("#col-selectable").prop("checked", col["selectable"]);
} }
} }
for (let row of table["rows"]) { for (let row of table["rows"]) {
@ -259,15 +268,15 @@ function save() {
} }
} }
if (!table_exsits && table_name.length > 0) { if (!table_exsits && table_name.length > 0) {
selected["cell"] = selected["cell"].replace(sanitizeName(table["name"]), sanitizeName(table_name)) selected["cell"] = selected["cell"].replace(sanitizeName(table["name"]), sanitizeName(table_name));
table["name"] = table_name; table["name"] = table_name;
for (let row of table["rows"]) { for (let row of table["rows"]) {
let match = row["uid"].match(uid_regex); let match = row["uid"].match(uid_regex);
row["uid"] = `${sanitizeName(table_name)}-row${match[2]}` row["uid"] = `${sanitizeName(table_name)}-row${match[2]}`;
} }
$("#table-name").removeClass("w3-red") $("#table-name").removeClass("w3-red");
} else { } else {
$("#table-name").addClass("w3-red") $("#table-name").addClass("w3-red");
return; return;
} }
} }
@ -292,9 +301,9 @@ function save() {
selected["cell"] = replaceLast(selected["cell"], col["field"], field); selected["cell"] = replaceLast(selected["cell"], col["field"], field);
col["title"] = title; col["title"] = title;
col["field"] = field; col["field"] = field;
$("#col-name").removeClass("w3-red") $("#col-name").removeClass("w3-red");
} else { } else {
$("#col-name").addClass("w3-red") $("#col-name").addClass("w3-red");
return; return;
} }
} }
@ -410,7 +419,7 @@ function tableDrop(event, new_index) {
} }
function showTable(table_name) { function showTable(table_name) {
let reset = false let reset = false;
if (current_table != table_name) { if (current_table != table_name) {
current_table = table_name; current_table = table_name;
reset = true; reset = true;
@ -428,7 +437,7 @@ function showTable(table_name) {
let child = $($($("#"+table_name+"-table").children()[1]).children()[1]); let child = $($($("#"+table_name+"-table").children()[1]).children()[1]);
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 = $(`#${selected["cell"]}`);
selectCell(table["name"], current_col["title"], current_col["field"], selected["cell"]); selectCell(table["name"], current_col["title"], current_col["field"], selected["cell"]);
} }
} }
@ -438,26 +447,67 @@ function showTable(table_name) {
function startEditCell(cell_id) { function startEditCell(cell_id) {
let cell = $(`#${cell_id}`); let cell = $(`#${cell_id}`);
let cell_text = $("#cell-text").val(); let cell_text = $("#cell-text").val();
let text_area = $(`<td id="${cell_id}" class="w3-green text-edit"><textarea id="${cell_id}-edit" onkeydown="finishEditCell(event, '${cell_id}')" onfocusout="finishEditCell(event, '${cell_id}')">${cell_text}</textarea></td>`); let td = $(`<td id="${cell_id}" class="w3-green text-edit"></td>`);
cell.parent().css("height", `${cell.outerHeight()}px`) let text_area = $(`<textarea id="${cell_id}-edit" onkeydown="finishEditCell(event, '${cell_id}')">${cell_text}</textarea>`);
cell.replaceWith(text_area); text_area.focusout(function (event){finishEditCell(event, cell_id)});
text_area.children()[0].focus(); td.append(text_area);
cell.parent().css("height", `${cell.outerHeight()}px`);
cell.replaceWith(td);
text_area.focus();
}
function startEditHeader(cell_id) {
let cell = $(`#${cell_id}`);
let cell_text = $("#col-name").val();
let th = $(`<th id="${cell_id}" class="w3-green text-edit"></th>`);
let text_area = $(`<textarea id="${cell_id}-edit" onkeydown="finishEditHeader(event, '${cell_id}')">${cell_text}</textarea>`);
text_area.focusout(function (event){finishEditHeader(event, cell_id)});
th.append(text_area);
cell.parent().css("height", `${cell.outerHeight()}px`);
cell.replaceWith(th);
text_area.focus();
} }
function finishEditCell(event, cell_id) { function finishEditCell(event, cell_id) {
if (event.ctrlKey && event.key == "Enter" || event.type == "focusout") { let cell = $(`#${cell_id}-edit`);
let text_area_val = $(`#${cell_id}-edit`).val(); if (event.ctrlKey && event.key == "Enter") {
cell.off("focusout");
let text_area_val = cell.val();
$("#cell-text").val(text_area_val); $("#cell-text").val(text_area_val);
save(); save();
} else if (event.key == "Escape") { } else if (event.key == "Escape") {
cell.off("focusout");
let cell_val = $("#cell-text").val(); let cell_val = $("#cell-text").val();
cell.val(cell_val);
save();
} else if (event.type == "focusout") {
let text_area_val = cell.val();
$("#cell-text").val(text_area_val);
save();
}
}
function finishEditHeader(event, cell_id) {
let cell = $(`#${cell_id}-edit`);
if (event.ctrlKey && event.key == "Enter") {
cell.off("focusout");
let text_area_val = $(`#${cell_id}-edit`).val();
$("#col-name").val(text_area_val);
save();
} else if (event.key == "Escape") {
cell.off("focusout");
let cell_val = $("#col-name").val();
$(`#${cell_id}-edit`).val(cell_val); $(`#${cell_id}-edit`).val(cell_val);
save(); save();
} else if (event.type == "focusout") {
let text_area_val = $(`#${cell_id}-edit`).val();
$("#col-name").val(text_area_val);
save();
} }
} }
function saveFile(new_file) { function saveFile(new_file) {
ipcRenderer.send("save", data, new_file) ipcRenderer.send("save", data, new_file);
} }
function openFile(file_path) { function openFile(file_path) {