From 3d84bfe7a5abf450c2bdee2d605e8c7a617730e9 Mon Sep 17 00:00:00 2001 From: kor Date: Wed, 31 Jan 2024 16:30:18 +0100 Subject: [PATCH] feat: Add save to markdown file and full html page --- public/js/collection.js | 62 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 60 insertions(+), 2 deletions(-) diff --git a/public/js/collection.js b/public/js/collection.js index 3828997..5045154 100644 --- a/public/js/collection.js +++ b/public/js/collection.js @@ -1,7 +1,37 @@ function loadCollections() { + function saveStringToFile(stringToSave, filename) { + // Step 1: Create a Blob from the string + const blob = new Blob([stringToSave], { type: 'text/plain' }); + + // Step 2: Create a URL for the Blob + const url = URL.createObjectURL(blob); + + // Step 3: Create an anchor () element + const a = document.createElement('a'); + + // Step 4: Set the href and download attributes of the anchor + a.href = url; + a.download = filename || 'default.txt'; // Default filename if none provided + + // Temporarily add the anchor to the document to trigger the click event + document.body.appendChild(a); + + // Step 5: Trigger a click on the anchor + a.click(); + + // Clean up by revoking the Blob URL and removing the anchor from the document + URL.revokeObjectURL(url); + document.body.removeChild(a); + } + + // Example usage + // saveStringToFile('Hello, world!', 'example.txt'); + + chrome.storage.local.get(['kerificTerms'], function (result) { let domString = ''; let domStringMarkdown = ''; + let domStrinFullHTMLpage = `My custom glossary

My custom glossary

`; if (result.kerificTerms === undefined) { domString = '

No terms found

'; @@ -14,7 +44,7 @@ function loadCollections() { // If term is copied, add edit button let editButton = ''; - terms[i].status === 'copied' ? editButton = `` : editButton = ``; + terms[i].status === 'copied' ? editButton = `` : editButton = ``; let footerMessage = ''; terms[i].status === 'copied' ? footerMessage = 'This definition is a copy.' : footerMessage = 'This definition comes from: ' + terms[i].organisation; @@ -56,11 +86,26 @@ function loadCollections() { `; + + domStrinFullHTMLpage += ` +

${terms[i].term}

+

+ ${terms[i].definition} +

+ + ${footerMessage} + + `; } domString += `

In Markdown-format:

-
`; +
+ + + `; + + domStrinFullHTMLpage += `` } document.getElementById('container-collection').innerHTML = domString; document.getElementById('container-collection-for-markdown').innerHTML = domStringMarkdown; @@ -96,6 +141,8 @@ function loadCollections() { editableTextarea.setAttribute('contenteditable', 'true'); editableTextarea.classList.add('editable'); editableTextarea.focus(); + + document.querySelector(`.save-button[data-uniqueid="${this.dataset.uniqueid}"]`).removeAttribute('disabled'); }); } @@ -112,6 +159,17 @@ function loadCollections() { }); } + const saveToMarkdownFileButton = document.getElementById('save-to-markdown-file-button'); + saveToMarkdownFileButton.addEventListener('click', function () { + const markdownContainerTextarea = document.querySelector('#markdown-container textarea'); + saveStringToFile(markdownContainerTextarea.value, 'my-custom-glossary.md'); + }); + + const saveToFullHTMLFileButton = document.getElementById('save-to-full-html-page-file-button'); + saveToFullHTMLFileButton.addEventListener('click', function () { + saveStringToFile(domStrinFullHTMLpage, 'my-custom-glossary.html'); + }); + const turndownService = new TurndownService() const markdown = turndownService.turndown(document.getElementById('container-collection-for-markdown')) const markdownContainer = document.getElementById('markdown-container');