diff --git a/src/index.js b/src/index.js index 3711155..e3f6ba4 100644 --- a/src/index.js +++ b/src/index.js @@ -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 += `

${table["name"]} (/)

${table["description"]}

`; - nav += `
  • ${table["name"]}
    • ` + tabs += $("
    ") + .addClass("tab-pane fade") + .attr("id", sanitizeName(table["name"])) + .attr("role", "tabpanel") + .attr("aria-labelledby", sanitizeName(table["name"])+"-tab") + .append($("

    ") + .attr("id", sanitizeName(table["name"])+"-header") + .append(`${table["name"]} (`) + .append($("") + .attr("id", sanitizeName(table["name"])+"-completed")) + .append("/") + .append($("") + .attr("id", sanitizeName(table["name"])+"-total")) + .append(")")) + .append($("

    ") + .html(table["description"])) + .append($("
    ") + .attr("id", sanitizeName(table["name"])+"-table") + .addClass("table table-hover")) + .html(); + nav += $("
  • ") + .addClass("nav-item") + .append($("") + .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 = `` - let div = $(`
    `) + let 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 = $("
    ") + .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 += `

    ${tab_table["name"]} (/)

    ${tab_table["description"]}

    `; - div.append(`${tab_table["name"]}`) + tabs += $("
    ") + .addClass("tab-pane fade") + .attr("id", sanitizeName(tab_table["name"])) + .attr("role", "tabpanel") + .attr("aria-labelledby", sanitizeName(table["name"])+"-tab") + .append($("

    ") + .attr("id", sanitizeName(tab_table["name"])+"-header") + .append(`${tab_table["name"]} (`) + .append($("") + .attr("id", sanitizeName(tab_table["name"])+"-completed")) + .append("/") + .append($("") + .attr("id", sanitizeName(tab_table["name"])+"-total")) + .append(")")) + .append($("

    ") + .html(tab_table["description"])) + .append($("
    ") + .attr("id", sanitizeName(tab_table["name"])+"-table") + .addClass("table table-hover")) + .html(); + div.append("") + .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 = $(`
  • `); + let li = $("
  • ") + .addClass("nav-item dropdown"); li.append(a); li.append(div); nav += li.prop('outerHTML'); diff --git a/src/js/script.js b/src/js/script.js index c961924..def8b85 100644 --- a/src/js/script.js +++ b/src/js/script.js @@ -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(``); + let btn = $("") + .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.focusout(function (event){save()}); + $("nav").append(btn); - let table_elm = $("
    "); - table_elm.attr("id", name+"-table"); + let textarea = $(``) + .focusout(function (event){save()}) + .attr("id", name+"-description") + .addClass("table-description") + .text(table["description"]); + + let table_elm = $("
    "); + table_elm.attr("id", name+"-table") + .addClass("editor-table"); let cols = table["col-def"] @@ -53,60 +78,123 @@ function makeTables() { let td = $(""); td.css("border", "none"); if (data.length > 1) { - td.html(``); + btn = $("") + .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.attr("id", id); - th.append(`${col.title}`); - th.append(`×`); - tr.append(th); + let 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($("") + .css({"margin-right": "44px", "white-space": "nowrap"}) + .text(col.title)) + .append($(`×`) + .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.css("border", "none"); - td.html(``); + td = $("") + .css("border", "none") + .html($("") + .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 = $("") + .attr("id", row["uid"]) + .on("drop", (event) => { + rowDrop(event, name, index); + }) + .on("dragover", (event) => { + allowDrop(event); + }) - td = $(""); - td.css("border", "none"); - td.append(``); - td.append(`
    ☰
    `); + td = $("") + .css("border", "none") + .append($("") + .addClass("w3-button w3-tiny w3-red") + .on("click", () => { + deleteRow(table["name"], index); + })) + .append($("
    ☰
    ") + .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.html(row[col["field"]]); - // td.click(function (){ - // selectCell(table["name"], col["title"], col["field"], index); - // }); + 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 = $(""); - td = $(""); - td.css("border", "none"); - td.html(``); + td = $("") + .css("border", "none") + .html($(``) + .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(""); + $("nav").append($("") + .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 = $(``); - let text_area = $(``); - text_area.focusout(function (event){finishEditCell(event, cell_id)}); + let td = $("") + .attr("id", cell_id) + .addClass("w3-green text-edit"); + let text_area = $(``) + .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 = $(``); - let text_area = $(``); - text_area.focusout(function (event){finishEditHeader(event, cell_id)}); + let th = $(``) + .attr("id", cell_id) + .addClass("w3-green text-edit"); + let text_area = $("") + .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 = $(`
    `); - let buttons = $(`
    - - -
    `) - // context_menu.append(``); - // context_menu.append(``); + let context_menu = $(`
    `) + .css({"position": "absolute", "top": `${event.originalEvent.y-10}px`, "left": `${event.originalEvent.x-10}px`}) + .on("mouseleave", () => { + context_menu.remove(); + }); + let buttons = $("
    ") + .addClass("w3-dropdown-content w3-bar-block w3-border") + .css("display", "block") + .append($("") + .addClass("w3-bar-item w3-button") + .on("click", () => { + duplicateTable(table_name); + })); context_menu.append(buttons) $("body").append(context_menu); }