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

Refactor to remove html strings

Browse Source 
Change sanitizeName to just remove spaces
Changed some selectors to use standard JS to work with special characters in element id
This commit is contained in:
Matthew Welch 2020-11-27 20:04:17 -08:00
parent 4ee75511ad
commit 989ef96931
2 changed files with 262 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/index.js
View File

@ -81,6 +81,7 @@ function openFile() {
}
function loadFile(file_name) {
save_data.file_path = file_name;
createWindow();
mainWindow.webContents.once("dom-ready", () => {
mainWindow.webContents.send("open", file_name);
@ -88,11 +89,10 @@ function loadFile(file_name) {
})
}
function sanitizeName(table_name) {
let pattern = " !@#$%^&*()_+=/?.,<>;':\"[]{}\\`~|-"
let new_name = table_name.toLowerCase();
for (let char of table_name) {
if (pattern.includes(char)) {
function sanitizeName(name) {
let new_name = name.toLowerCase();
for (let char of name) {
if (char === " ") {
new_name = new_name.replace(char, "");
}
}
@ -171,19 +171,86 @@ ipcMain.on("save", (event, data, new_file) => {
if (!table["hidden"]) {
if (!added_tables.includes(table["name"])) {
if (table["tab-name"] == "") {
tabs += `<div class="tab-pane fade" id="${sanitizeName(table["name"])}" role="tabpanel" aria-labelledby="${sanitizeName(table["name"])}-tab"><h3 id="${sanitizeName(table["name"])}-header">${table["name"]} (<span id="${sanitizeName(table["name"])}-completed"></span>/<span id="${sanitizeName(table["name"])}-total"></span>)</h3><p>${table["description"]}</p><table id="${sanitizeName(table["name"])}-table" class="table table-hover"></table></div>`;
nav += `<li class="nav-item"><a class="nav-link" id="${sanitizeName(table["name"])}-tab" data-toggle="tab" href="#${sanitizeName(table["name"])}" role="tab" aria-controls="${sanitizeName(table["name"])}" aria-selected="false">${table["name"]}</a></li>`
tabs += $("<div></div>")
.addClass("tab-pane fade")
.attr("id", sanitizeName(table["name"]))
.attr("role", "tabpanel")
.attr("aria-labelledby", sanitizeName(table["name"])+"-tab")
.append($("<h3></h3>")
.attr("id", sanitizeName(table["name"])+"-header")
.append(`${table["name"]} (`)
.append($("<span></span>")
.attr("id", sanitizeName(table["name"])+"-completed"))
.append("/")
.append($("<span></span>")
.attr("id", sanitizeName(table["name"])+"-total"))
.append(")"))
.append($("<p></p>")
.html(table["description"]))
.append($("<table></table>")
.attr("id", sanitizeName(table["name"])+"-table")
.addClass("table table-hover"))
.html();
nav += $("<li></li>")
.addClass("nav-item")
.append($("<a></a>")
.addClass("nav-link")
.attr("id", sanitizeName(table["name"])+"-tab")
.attr("data-toggle", "tab")
.attr("href", "#"+sanitizeName(table["name"]))
.attr("role", "tab")
.attr("aria-controls", sanitizeName(table["name"]))
.attr("aria-selected", false)
.html(table["name"]))
.html();
added_tables.push(table["name"]);
} else {
let tab_name = table["tab-name"];
let a = `<a id="${sanitizeName(tab_name)}-tab" class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">${tab_name}</a>`
let div = $(`<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0; left: 0; transform: translate3d(0px, 39px, 0px);"></div>`)
let a = $("<a></a>")
.attr("id", sanitizeName(tab_name)+"-tab")
.addClass("nav-link dropdown-toggle")
.attr("data-toggle", "dropdown")
.attr("href", "#")
.attr("role", "button")
.attr("aria-haspopup", true)
.attr("aria-expanded", false)
.html(tab_name);
let div = $("<div></div>")
.addClass("dropdown-menu")
.attr("x-placement", "bottom-start")
.css({"position": "absolute", "will-change": "transform", "top": "0", "left": "0", "transform": "translate3d(0px, 39px, 0px)"});
for (let tab_table of table_tabs[tab_name]) {
tabs += `<div class="tab-pane fade" id="${sanitizeName(tab_table["name"])}" role="tabpanel" aria-labelledby="${sanitizeName(tab_table["name"])}-tab"><h3 id="${sanitizeName(tab_table["name"])}-header">${tab_table["name"]} (<span id="${sanitizeName(tab_table["name"])}-completed"></span>/<span id="${sanitizeName(tab_table["name"])}-total"></span>)</h3><p>${tab_table["description"]}</p><table id="${sanitizeName(tab_table["name"])}-table" class="table table-hover"></table></div>`;
div.append(`<a class="dropdown-item" data-toggle="tab" href="#${sanitizeName(tab_table["name"])}" aria-expanded="true">${tab_table["name"]}</a>`)
tabs += $("<div></div>")
.addClass("tab-pane fade")
.attr("id", sanitizeName(tab_table["name"]))
.attr("role", "tabpanel")
.attr("aria-labelledby", sanitizeName(table["name"])+"-tab")
.append($("<h3></h3>")
.attr("id", sanitizeName(tab_table["name"])+"-header")
.append(`${tab_table["name"]} (`)
.append($("<span></span>")
.attr("id", sanitizeName(tab_table["name"])+"-completed"))
.append("/")
.append($("<span></span>")
.attr("id", sanitizeName(tab_table["name"])+"-total"))
.append(")"))
.append($("<p></p>")
.html(tab_table["description"]))
.append($("<table></table>")
.attr("id", sanitizeName(tab_table["name"])+"-table")
.addClass("table table-hover"))
.html();
div.append("<a></a>")
.addClass("dropdown-item")
.attr("data-toggle", "tab")
.attr("href", "#"+sanitizeName(tab_table["name"]))
.attr("aria-expanded", true)
.html(tab_table["name"]);
added_tables.push(tab_table["name"]);
}
let li = $(`<li class="nav-item dropdown"></li>`);
let li = $("<li></li>")
.addClass("nav-item dropdown");
li.append(a);
li.append(div);
nav += li.prop('outerHTML');

249
src/js/script.js
View File

@ -17,10 +17,9 @@ $.ajax({
});
function sanitizeName(table_name) {
let pattern = " !@#$%^&*()_+=/?.,<>;':\"[]{}\\`~|-"
let new_name = table_name.toLowerCase();
for (let char of table_name) {
if (pattern.includes(char)) {
if (char === " ") {
new_name = new_name.replace(char, "");
}
}
@ -39,13 +38,39 @@ 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}')" oncontextmenu="navContext(event, '${table["name"]}')" draggable="true" ondrop='tableDrop(event, ${table_index})' ondragstart='tableDrag(event, ${table_index})' ondragover='allowDrop(event)'>${table["name"]}</button>`);
let btn = $("<button></button>")
.attr("id", name+"-nav")
.addClass("w3-bar-item w3-button tablink")
.css("white-space", "nowrap")
.on("click", () => {
showTable(name);
})
.on("contextmenu", (event) => {
navContext(event, table["name"]);
})
.attr("draggable", true)
.on("drop", (event) => {
tableDrop(event, table_index);
})
.on("dragstart", (event) => {
tableDrag(event, table_index);
})
.on("dragover", (event) => {
allowDrop(event)
})
.text(table["name"]);
let textarea = $(`<textarea id="${name}-description" class="table-description">${table["description"]}</textarea>`);
textarea.focusout(function (event){save()});
$("nav").append(btn);
let table_elm = $("<table class='editor-table'></table>");
table_elm.attr("id", name+"-table");
let textarea = $(`<textarea></textarea>`)
.focusout(function (event){save()})
.attr("id", name+"-description")
.addClass("table-description")
.text(table["description"]);
let table_elm = $("<table></table>");
table_elm.attr("id", name+"-table")
.addClass("editor-table");
let cols = table["col-def"]
@ -53,60 +78,123 @@ function makeTables() {
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>`);
btn = $("<button>Delete Table</button>")
.addClass("w3-button w3-red")
.on("click", () => {
deleteTable(table["name"]);
});
td.html(btn);
}
tr.append(td);
let index = 0;
for (let col of cols) {
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>`);
tr.append(th);
let th = $("<th></th>")
.attr("id", id)
.addClass("w3-display-container")
.on("click", (event) => {
selectCell(table["name"], col["title"], col["field"], id);
})
.attr("draggable", true).
on("drop", {index:index}, (event) => {
colDrop(event, name, event.data.index);
})
.on("dragstart", {index:index}, (event) => {
drag(event, event.data.index);
})
.on("dragover", (event) => {
allowDrop(event);
})
.on("dblclick", () => {
startEditHeader(id);
})
.append($("<span></span>")
.css({"margin-right": "44px", "white-space": "nowrap"})
.text(col.title))
.append($(`<span>&times;</span>`)
.addClass("w3-button w3-display-right w3-hover-red")
.on("click", {index:index}, (event) => {
console.log(table["name"], event.data.index)
deleteCol(table["name"], event.data.index);
}));
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>`);
td = $("<td></td>")
.css("border", "none")
.html($("<button>Add Column</button>")
.addClass("w3-button w3-green")
.on("click", () => {
addColumn(table["name"]);
}));
tr.append(td);
table_elm.append(tr);
for (let row of table["rows"]) {
let index = table["rows"].indexOf(row);
tr = $(`<tr id="${row["uid"]}" ondrop="rowDrop(event, '${name}', ${index})" ondragover="allowDrop(event)"></tr>`);
tr = $("<tr></tr>")
.attr("id", row["uid"])
.on("drop", (event) => {
rowDrop(event, name, index);
})
.on("dragover", (event) => {
allowDrop(event);
})
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 = $("<td></td>")
.css("border", "none")
.append($("<button>×</button>")
.addClass("w3-button w3-tiny w3-red")
.on("click", () => {
deleteRow(table["name"], index);
}))
.append($("<div>☰</div>")
.css({"display": "inline", "float": "right", "font-size": "2em"})
.attr("draggable", true)
.on("dragstart", (event) => {
rowDrag(event, index);
}));
tr.append(td);
for (let col of cols) {
let uid = row["uid"]+"-"+col["field"];
td = $(`<td id="${uid}" onclick="selectCell('${table["name"]}', '${col["title"]}', '${col["field"]}', '${uid}')" ondblclick="startEditCell('${uid}')"></td>`);
td.html(row[col["field"]]);
// td.click(function (){
// selectCell(table["name"], col["title"], col["field"], index);
// });
td = $("<td></td>")
.html(row[col["field"]])
.attr("id", uid)
.on("click", () => {
selectCell(table["name"], col["title"], col["field"], uid);
})
.on("dblclick", () => {
startEditCell(uid);
});
tr.append(td);
}
table_elm.append(tr);
}
tr = $("<tr></tr>");
td = $("<td></td>");
td.css("border", "none");
td.html(`<button class="w3-button w3-green" onclick="addRow('${name}')">Add Row</button>`);
td = $("<td></td>")
.css("border", "none")
.html($(`<button>Add Row</button>`)
.addClass("w3-button w3-green")
.on("click", () => {
addRow(name);
}));
tr.append(td);
table_elm.append(tr);
// table_elm.attr("class", "table table-hover");
$("#tables").append(textarea);
$("#tables").append(table_elm);
$("#tables").append(textarea)
.append(table_elm);
}
$("nav").append("<button class='w3-button w3-green' onclick='addTable()'>+</button>");
$("nav").append($("<button>+</button>")
.addClass("w3-button w3-green")
.on("click", () => {
addTable();
}));
}
function removeTables() {
@ -253,7 +341,7 @@ function addTable(dup_table=null, tab_name=null) {
}
function selectCell(table_name, title, field, cell_id) {
let elm = $("#"+cell_id);
let elm = $(document.getElementById(cell_id));
if (elm.is("th")) {
$("#cell-text").prop("disabled", true);
$("#cell-text").val("");
@ -319,7 +407,8 @@ function save() {
return;
}
}
table["description"] = $(`#${sanitizeName(table["name"])}-description`).val();
let table_description = $(document.getElementById(`${sanitizeName(table["name"])}-description`));
table["description"] = table_description.val();
table["tab-name"] = tab_name;
table["hidden"] = table_hidden;
for (let col of table["col-def"]) {
@ -426,15 +515,15 @@ function moveTable(old_index, new_index) {
}
function drag(event, old_index) {
event.dataTransfer.setData("text", old_index);
event.originalEvent.dataTransfer.setData("text", old_index);
}
function rowDrag(event, old_index) {
event.dataTransfer.setData("text", old_index);
event.originalEvent.dataTransfer.setData("text", old_index);
}
function tableDrag(event, table_index) {
event.dataTransfer.setData("text", table_index.toString());
event.originalEvent.dataTransfer.setData("text", table_index.toString());
}
function allowDrop(event) {
@ -443,19 +532,19 @@ function allowDrop(event) {
function colDrop(event, table_name, new_index) {
event.preventDefault();
let old_index = event.dataTransfer.getData("text");
let old_index = event.originalEvent.dataTransfer.getData("text");
moveCol(table_name, parseInt(old_index), new_index);
}
function rowDrop(event, table_name, new_index) {
event.preventDefault();
let old_index = event.dataTransfer.getData("text");
let old_index = event.originalEvent.dataTransfer.getData("text");
moveRow(table_name, parseInt(old_index), new_index);
}
function tableDrop(event, new_index) {
event.preventDefault();
let old_index = event.dataTransfer.getData("text");
let old_index = event.originalEvent.dataTransfer.getData("text");
moveTable(parseInt(old_index), new_index);
}
@ -468,20 +557,24 @@ function showTable(table_name) {
let tables = $(".editor-table");
tables.css("display", "none");
$(`#${table_name}-table`).css("display", "block");
$(document.getElementById(`${table_name}-table`))
.css("display", "block");
let table_description = $(".table-description");
table_description.css("display", "none");
$(`#${table_name}-description`).css("display", "block");
$(document.getElementById(`${table_name}-description`))
.css("display", "block");
let tabs = $(".tablink");
tabs.removeClass("w3-grey");
$(`#${table_name}-nav`).addClass("w3-grey");
$(document.getElementById(`${table_name}-nav`))
.addClass("w3-grey");
for (let table of data) {
if (sanitizeName(table["name"]) == table_name) {
if (reset) {
let child = $($($("#"+table_name+"-table").children()[1]).children()[1]);
let child = $(document.getElementById(table_name+"-table"))
.children(":nth-child(2)").children(":nth-child(2)");
selectCell(table["name"], table["col-def"][0]["title"], table["col-def"][0]["field"], child.attr("id"));
} else {
let elm = $(`#${selected["cell"]}`);
let elm = $(document.getElementById(selected["cell"]));
selectCell(table["name"], current_col["title"], current_col["field"], selected["cell"]);
}
}
@ -489,11 +582,20 @@ function showTable(table_name) {
}
function startEditCell(cell_id) {
let cell = $(`#${cell_id}`);
let cell = $(document.getElementById(cell_id));
let cell_text = $("#cell-text").val();
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)});
let td = $("<td></td>")
.attr("id", cell_id)
.addClass("w3-green text-edit");
let text_area = $(`<textarea></textarea>`)
.on("focusout", (event) => {
finishEditCell(event, cell_id);
})
.attr("id", cell_id+"-edit")
.on("keydown", (event) => {
finishEditCell(event, cell_id);
})
.text(cell_text);
td.append(text_area);
cell.parent().css("height", `${cell.outerHeight()}px`);
cell.replaceWith(td);
@ -501,11 +603,20 @@ function startEditCell(cell_id) {
}
function startEditHeader(cell_id) {
let cell = $(`#${cell_id}`);
let cell = $(document.getElementById(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)});
let th = $(`<th></th>`)
.attr("id", cell_id)
.addClass("w3-green text-edit");
let text_area = $("<textarea></textarea>")
.on("focusout", (event) => {
finishEditHeader(event, cell_id);
})
.attr("id", cell_id+"-edit")
.on("keydown", (event) => {
finishEditHeader(event, cell_id);
})
.text(cell_text);
th.append(text_area);
cell.parent().css("height", `${cell.outerHeight()}px`);
cell.replaceWith(th);
@ -513,7 +624,7 @@ function startEditHeader(cell_id) {
}
function finishEditCell(event, cell_id) {
let cell = $(`#${cell_id}-edit`);
let cell = $(document.getElementById(`${cell_id}-edit`));
if (event.ctrlKey && event.key == "Enter") {
cell.off("focusout");
let text_area_val = cell.val();
@ -532,26 +643,26 @@ function finishEditCell(event, cell_id) {
}
function finishEditHeader(event, cell_id) {
let cell = $(`#${cell_id}-edit`);
let cell = $(document.getElementById(`${cell_id}-edit`));
if (event.ctrlKey && event.key == "Enter") {
cell.off("focusout");
let text_area_val = $(`#${cell_id}-edit`).val();
let text_area_val = $(document.getElementById(`${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);
$(document.getElementById(`${cell_id}-edit`)).val(cell_val);
save();
} else if (event.type == "focusout") {
let text_area_val = $(`#${cell_id}-edit`).val();
let text_area_val = $(document.getElementById(`${cell_id}-edit`)).val();
$("#col-name").val(text_area_val);
save();
}
}
function finishEditDescription(event, table_name) {
let cell = $(`#${table_name}-description`);
let cell = $(document.getElementById(`${table_name}-description`));
if (event.ctrlKey && event.key == "Enter") {
cell.off("focusout");
// let text_area_val = $(`#${cell_id}-edit`).val();
@ -570,13 +681,19 @@ function finishEditDescription(event, table_name) {
}
function navContext(event, table_name) {
let context_menu = $(`<div style="position: absolute; top: ${event.y-10}px;left: ${event.x-10}px" onmouseleave="$(this).remove()"></div>`);
let buttons = $(`<div class="w3-dropdown-content w3-bar-block w3-border" style="display: block">
<button class="w3-bar-item w3-button" onclick="duplicateTable('${table_name}')">duplicate</button>
<!--<button class="w3-bar-item w3-button" onclick="addSubTable('${table_name}')">new sub table</button>-->
</div>`)
// context_menu.append(`<button style="display: block" onclick="duplicateTable('${table_name}')">duplicate</button>`);
// context_menu.append(`<button style="display: block" onclick="addSubTable('${table_name}')">new sub table</button>`);
let context_menu = $(`<div></div>`)
.css({"position": "absolute", "top": `${event.originalEvent.y-10}px`, "left": `${event.originalEvent.x-10}px`})
.on("mouseleave", () => {
context_menu.remove();
});
let buttons = $("<div></div>")
.addClass("w3-dropdown-content w3-bar-block w3-border")
.css("display", "block")
.append($("<button>duplicate</button>")
.addClass("w3-bar-item w3-button")
.on("click", () => {
duplicateTable(table_name);
}));
context_menu.append(buttons)
$("body").append(context_menu);
}