matt/enckes-web-editor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added direct editing for headers

Browse Source
This commit is contained in:
Matthew Welch 2020-09-08 17:57:08 -07:00
parent b78efa587a
commit e8779b9827
1 changed files with 80 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/js/script.js
View File

@ -32,34 +32,35 @@ function makeTables() {
let table_index = data.indexOf(table);
// 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>");
table_elm.attr("id", name+"-table");
let cols = table["col-def"]
let tr = $("<tr></tr>");
let td = $("<td></td>")
td.css("border", "none")
let td = $("<td></td>");
td.css("border", "none");
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;
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>`);
th.attr("id", name+"-"+index.toString())
let 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 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);
index++;
}
td = $("<td></td>")
td.css("border", "none")
td.html(`<button class="w3-button w3-green" onclick="addColumn('${table["name"]}')">Add Column</button>`)
tr.append(td)
td = $("<td></td>");
td.css("border", "none");
td.html(`<button class="w3-button w3-green" onclick="addColumn('${table["name"]}')">Add Column</button>`);
tr.append(td);
table_elm.append(tr);
for (let row of table["rows"]) {
let index = table["rows"].indexOf(row);
@ -68,7 +69,7 @@ function makeTables() {
td = $("<td></td>");
td.css("border", "none");
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);
for (let col of cols) {
@ -97,7 +98,7 @@ function makeTables() {
}
function removeTables() {
$("nav").empty();
$("#nav").empty();
$("#tables").empty();
}
@ -216,9 +217,17 @@ function addTable() {
function selectCell(table_name, title, field, 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};
current_col = {"title":title, "field":field};
$("td").removeClass("w3-green");
$("th").removeClass("w3-green");
elm.addClass("w3-green");
for (let table of data) {
if (table["name"] == table_name) {
@ -228,7 +237,7 @@ function selectCell(table_name, title, field, cell_id) {
for (let col of table["col-def"]) {
if (col["title"] == title) {
$("#col-sortable").prop("checked", col["sortable"]);
$("#col-selectable").prop("checked", col["selectable"])
$("#col-selectable").prop("checked", col["selectable"]);
}
}
for (let row of table["rows"]) {
@ -259,15 +268,15 @@ function save() {
}
}
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;
for (let row of table["rows"]) {
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 {
$("#table-name").addClass("w3-red")
$("#table-name").addClass("w3-red");
return;
}
}
@ -292,9 +301,9 @@ function save() {
selected["cell"] = replaceLast(selected["cell"], col["field"], field);
col["title"] = title;
col["field"] = field;
$("#col-name").removeClass("w3-red")
$("#col-name").removeClass("w3-red");
} else {
$("#col-name").addClass("w3-red")
$("#col-name").addClass("w3-red");
return;
}
}
@ -410,7 +419,7 @@ function tableDrop(event, new_index) {
}
function showTable(table_name) {
let reset = false
let reset = false;
if (current_table != table_name) {
current_table = table_name;
reset = true;
@ -428,7 +437,7 @@ function showTable(table_name) {
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"));
} else {
let elm = $(`#${selected["cell"]}`)
let elm = $(`#${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) {
let cell = $(`#${cell_id}`);
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>`);
cell.parent().css("height", `${cell.outerHeight()}px`)
cell.replaceWith(text_area);
text_area.children()[0].focus();
let td = $(`<td id="${cell_id}" class="w3-green text-edit"></td>`);
let text_area = $(`<textarea id="${cell_id}-edit" onkeydown="finishEditCell(event, '${cell_id}')">${cell_text}</textarea>`);
text_area.focusout(function (event){finishEditCell(event, cell_id)});
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) {
if (event.ctrlKey && event.key == "Enter" || event.type == "focusout") {
let text_area_val = $(`#${cell_id}-edit`).val();
let cell = $(`#${cell_id}-edit`);
if (event.ctrlKey && event.key == "Enter") {
cell.off("focusout");
let text_area_val = cell.val();
$("#cell-text").val(text_area_val);
save();
} else if (event.key == "Escape") {
cell.off("focusout");
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);
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) {
ipcRenderer.send("save", data, new_file)
ipcRenderer.send("save", data, new_file);
}
function openFile(file_path) {