diff --git a/src/js/src/bookmark/main.css b/src/js/src/bookmark/main.css index 275da42..a7d7193 100644 --- a/src/js/src/bookmark/main.css +++ b/src/js/src/bookmark/main.css @@ -48,7 +48,7 @@ } #mainView { - height: 30vh; + height: 60vh; overflow-x: scroll; overflow-y: scroll; } diff --git a/src/js/src/bookmark/main.js b/src/js/src/bookmark/main.js index 9c15d54..a9a0748 100644 --- a/src/js/src/bookmark/main.js +++ b/src/js/src/bookmark/main.js @@ -12,80 +12,89 @@ })(); window.addEventListener("load", (event) => { + const handle = handlers.call({}); const menu = document.querySelector("#menuView"); - menu.addEventListener("click", handleGenerateButton) - menu.addEventListener("click", handleLoadCsvButton) - menu.addEventListener("click", handleSaveButton) - menu.addEventListener("click", handleExportButton) + menu.addEventListener("click", handle.generate) + menu.addEventListener("click", handle.loadCSV); + menu.addEventListener("click", handle.save) + menu.addEventListener("click", handle.export) const editor = document.querySelector("#editView"); - editor.addEventListener("click", handleAppendCardButton) - editor.addEventListener("click", handleDeleteCardButton) + editor.addEventListener("click", handle.appendCard) + editor.addEventListener("click", handle.deleteCard) + function handlers() { + this.appenndCard = handleAppendCardButton; + this.deleteCard = handleDeleteCardButton + this.export = handleExportButton + this.generate = handleGenerateButton + this.loadCSV = handleLoadCsvButton; + this.save = handleSaveButton + return this; - function handleGenerateButton(event) { - if(event.target.id != "generate") { - return; - } - - document.querySelector("#dot-src-viewer").value = card2dot(); - dot2svg(document.querySelector("#dot-src-viewer").value) - .then(xml => document.querySelector("#ref-map").setAttribute("data", text2DataUriScheme(xml,"image/svg+xml"))); - } - - function handleLoadCsvButton(event) { - if(event.target.id != "loadCsv") { - return; - } - - for (const elem of document.querySelectorAll("button.card-delete")) { - - setTimeout(() => { - deleteCard(elem.closest("div.ref-card")); - }, 50); - }; - - csv2card(document.querySelector("#csv-src-viewer").value); - } - - async function handleSaveButton(event) { - if(event.target.id !="save") { - return; - } - - const data = await dot2svg(card2dot()); - download(data, "image/svg+xml", "result.svg"); - } - - function handleExportButton(event) { - if (event.target.id != "export") { - return; - } - download(card2csv(),"text/csv", "favorite.csv",); - } - - function handleAppendCardButton(event) { - if(event.target.classList.contains("card-append")){ - const bigBrotherCard = event.target.closest("div.ref-card"); - appendCard(bigBrotherCard, { - id: counter++ + "", - parent: "root", - type: "folder", - label: "nonelabel", - url: "https://www.exmple.com/" - }) - } - } + function handleGenerateButton(event) { + if(event.target.id != "generate") { + return; + } - function handleDeleteCardButton(event) { - if(event.target.classList.contains("card-delete")) { - setTimeout(() => { - deleteCard(event.target.closest("div.ref-card")); - } ,50); - } - } + document.querySelector("#dot-src-viewer").value = card2dot(); + dot2svg(document.querySelector("#dot-src-viewer").value) + .then(xml => document.querySelector("#ref-map").setAttribute("data", text2DataUriScheme(xml,"image/svg+xml"))); + } + function handleLoadCsvButton(event) { + if (event.target.id != "loadCsv") { + return; + } + + for (const elem of document.querySelectorAll("button.card-delete")) { + + setTimeout(() => { + deleteCard(elem.closest("div.ref-card")); + }, 50); + }; + + csv2card(document.querySelector("#csv-src-viewer").value); + } + + async function handleSaveButton(event) { + if (event.target.id != "save") { + return; + } + + const data = await dot2svg(card2dot()); + download(data, "image/svg+xml", "result.svg"); + } + + function handleExportButton(event) { + if (event.target.id != "export") { + return; + } + download(card2csv(), "text/csv", "favorite.csv",); + } + + function handleAppendCardButton(event) { + if (event.target.classList.contains("card-append")) { + const bigBrotherCard = event.target.closest("div.ref-card"); + appendCard(bigBrotherCard, { + id: counter++ + "", + parent: "root", + type: "folder", + label: "nonelabel", + url: "https://www.exmple.com/" + }) + } + } + + function handleDeleteCardButton(event) { + if (event.target.classList.contains("card-delete")) { + setTimeout(() => { + deleteCard(event.target.closest("div.ref-card")); + }, 50); + } + } + } }); function download(text, mimeType, name,) { @@ -107,28 +116,7 @@ const addedCard = bigbrother.nextElementSibling; - const inputs = addedCard.querySelectorAll("input"); - const {id, parent, type, label, url} = node; - if (id && id.length > 0) { - inputs[0].value = id - } - - if (parent && parent.length > 0) { - inputs[1].value = parent - } - - if (type && type.length > 0) { - inputs[2].value = type - } - - if (label && label.length > 0) { - inputs[3].value = label - } - - - if (url && url.length > 0) { - inputs[4].value = url - } + writeNodeValues(addedCard, node) } function deleteCard(card) { @@ -194,15 +182,7 @@ const id = 0, parent=1, type=2, label=3, url=4; for(const card of cards) { - const values = card.querySelectorAll("input"); - const refNode = {}; - - refNode.id = values[id].value; - refNode.parent = values[parent].value; - refNode.type = values[type].value; - refNode.label = values[label].value; - refNode.url = values[url].value; - + const refNode = readNodeValues(card); nodeList.push(refNode); } for (const refNode of nodeList) { @@ -256,27 +236,71 @@ function card2csv() { const cards = document.querySelectorAll("div.ref-card"); - const csvText = [ - "id,parent,type,label,url" - ]; + const header = ["id","parent","type","label","url"].join(","); + const csvText = [header] - const id = 0, parent=1, type=2, label=3, url=4; for(const card of cards) { - const values = card.querySelectorAll("input"); - const refNode = [ - values[id].value, - values[parent].value, - values[type].value, - values[label].value, - values[url].value - ]; - - csvText.push(refNode.join(",")); + const refNode = readNodeValues(card); + csvText.push([ + refNode.id, + refNode.parent, + refNode.type, + refNode.label, + refNode.url, + ].join(",")); } return csvText.join("\n") } +/** + * ノードを表すカードからノードの情報を取り出す。 + * カード内のinputについて知っている + * @param {*} card + * @returns + */ +function readNodeValues(card) { + const values = card.querySelectorAll("input"); + const refNode = {}; + refNode.id = values[0].value; + refNode.parent = values[1].value; + refNode.tytpe = values[2].value; + refNode.label = values[3].value; + refNode.url = values[4].value; + + return refNode; +} + +/** + * ノードを表すカードに書き込む + * カード内のinputについて知っている + */ +function writeNodeValues(card, values) { + const inputs = card.querySelectorAll("input"); + const {id, parent, type, label, url} = values; + + if (id && id.length > 0) { + inputs[0].value = id + } + + if (parent && parent.length > 0) { + inputs[1].value = parent + } + + if (type && type.length > 0) { + inputs[2].value = type + } + + if (label && label.length > 0) { + inputs[3].value = label + } + + if (url && url.length > 0) { + inputs[4].value = url + } + +} + function text2DataUriScheme(text, mimeType) { const encoded = window.btoa(unescape(encodeURIComponent(text))) const dataUri = `data:${mimeType};charset=UTF-8;base64,${encoded}`