Added direct editing for headers
This commit is contained in:
parent
b78efa587a
commit
e8779b9827
110
src/js/script.js
110
src/js/script.js
@ -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})">×</span>`)
|
th.append(`<span class="w3-button w3-display-right w3-hover-red" onclick="deleteCol('${table["name"]}', ${index})">×</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) {
|
||||||
|
Loading…
Reference in New Issue
Block a user