From 7213e03978c1ec6e8457d90d3384ba104179d1c9 Mon Sep 17 00:00:00 2001 From: Amlan S Warman Date: Thu, 26 Sep 2024 18:28:22 +0700 Subject: [PATCH 1/6] add divider resizer and buttons: load MD, save MD, Print or PDF --- public/iframe-pdf.html | 78 ++++++++++++++++++++++++++++++++++++++++++ public/index.html | 14 ++++++++ 2 files changed, 92 insertions(+) create mode 100644 public/iframe-pdf.html diff --git a/public/iframe-pdf.html b/public/iframe-pdf.html new file mode 100644 index 0000000..8613785 --- /dev/null +++ b/public/iframe-pdf.html @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + PDF Document + + + + + + +
+ + + + diff --git a/public/index.html b/public/index.html index c5a1630..58919bc 100644 --- a/public/index.html +++ b/public/index.html @@ -39,7 +39,15 @@
Reset
Copy
+
Load MD
+
Save MD
+ + + +
@@ -50,6 +58,7 @@
+
@@ -59,5 +68,10 @@
+ + From 365fe6e6bcbae840eb5b427ad5afdb51241dee08 Mon Sep 17 00:00:00 2001 From: Amlan S Warman Date: Thu, 26 Sep 2024 18:29:50 +0700 Subject: [PATCH 2/6] add divider resizer and buttons: load MD, save MD, Print or PDF --- public/css/style.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/public/css/style.css b/public/css/style.css index 7bf8c99..71471b7 100644 --- a/public/css/style.css +++ b/public/css/style.css @@ -140,3 +140,21 @@ footer { #preview.column { white-space: normal; } + +#divider { + width: 5px; + background-color: #ccc; + cursor: ew-resize; +} + +#printer-button { + margin-right: 32px; +} + +#load-button { + margin-left: 48px; +} + +#save-button { + margin-left: 16px; +} From 125d8f4d8945eee0a213b4599222dc384e9a9abb Mon Sep 17 00:00:00 2001 From: Amlan S Warman Date: Thu, 26 Sep 2024 18:31:27 +0700 Subject: [PATCH 3/6] add divider resizer, buttons: load MD, save MD, Print or PDF --- public/js/main.js | 105 +++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 104 insertions(+), 1 deletion(-) diff --git a/public/js/main.js b/public/js/main.js index 8a7bfbb..ba4199e 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -45,7 +45,7 @@ _You **can** combine them_ ## Images -![This is an alt text.](/image/sample.webp "This is a sample image.") +![This is an alt text.](image/sample.webp "This is a sample image.") ## Links @@ -217,6 +217,27 @@ This web site is using ${"`"}markedjs/marked${"`"}. }); }; + let setupLoadButton = () => { + document.querySelector("#load-button").addEventListener('click', (event) => { + event.preventDefault(); + loadMD(); + }); + }; + + let setupSaveButton = () => { + document.querySelector("#save-button").addEventListener('click', (event) => { + event.preventDefault(); + saveMD(); + }); + }; + + let setupPrinterButton = () => { + document.querySelector("#printer-button").addEventListener('click', (event) => { + event.preventDefault(); + self['iframe-pdf'].window.generatePrinter(); + }); + }; + // ----- local state ----- let loadLastContent = () => { @@ -239,6 +260,83 @@ This web site is using ${"`"}markedjs/marked${"`"}. Storehouse.setItem(localStorageNamespace, localStorageScrollBarKey, settings, expiredAt); }; + // ----- load save button ---- + + self.currentFileName = 'document.md'; + let loadMD = () => { + const input = document.createElement('input'); + input.type = 'file'; + input.accept = '.md'; + const textarea = + + input.onchange = (e) => { + const file = e.target.files[0]; + if (file) { + const reader = new FileReader(); + reader.onload = (ev) => { + presetValue(ev.target.result) + currentFileName = file.name; // Update filename + }; + reader.readAsText(file); + } + + document.body.removeChild(input); // Remove the input element after usage + }; + + input.click(); // Trigger file input click + } + + let saveMD = () => { + const blob = new Blob([editor.getValue()], { type: 'text/plain' }); + const url = URL.createObjectURL(blob); + const link = document.createElement('a'); + + link.href = url; + link.download = currentFileName; // Use the current file name for saving + document.body.appendChild(link); + link.click(); + + // Clean up + URL.revokeObjectURL(url); + document.body.removeChild(link); // Remove the link element after usage + } + + // ----- divider resize ---- + + let setupDividerResize = () => { + const container = document.getElementById('container'); + const edit = document.getElementById('edit'); + const preview = document.getElementById('preview'); + const divider = document.getElementById('divider'); + + let isDragging = false; + + // Saat user mulai drag + divider.addEventListener('mousedown', function(e) { + isDragging = true; + document.body.style.cursor = 'ew-resize'; + }); + + document.addEventListener('mousemove', function(e) { + if (!isDragging) return; + + // Dapatkan lebar total container + const containerWidth = container.offsetWidth; + + // Hitung posisi relatif dari mouse terhadap container + const newLeftWidth = (e.clientX / containerWidth) * 100; + const newRightWidth = 100 - newLeftWidth; + + // Update lebar edit dan preview + edit.style.flexBasis = `${newLeftWidth}%`; + preview.style.flexBasis = `${newRightWidth}%`; + }); + + document.addEventListener('mouseup', function() { + isDragging = false; + document.body.style.cursor = 'default'; + }); + } // ----- entry point ----- @@ -251,7 +349,12 @@ This web site is using ${"`"}markedjs/marked${"`"}. } setupResetButton(); setupCopyButton(editor); + setupLoadButton(); + setupSaveButton(); + setupPrinterButton(); + setupDividerResize(); let scrollBarSettings = loadScrollBarSettings() || false; initScrollBarSync(scrollBarSettings); + }); From 2b0b7ce2e7f965759e8d61b78a72c51a19b52a0d Mon Sep 17 00:00:00 2001 From: Amlan S Warman Date: Sun, 6 Oct 2024 22:54:36 +0700 Subject: [PATCH 4/6] Add: Copy Code,Mermaid --- public/iframe-pdf.html | 2 -- public/index.html | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/public/iframe-pdf.html b/public/iframe-pdf.html index 8613785..3b9f394 100644 --- a/public/iframe-pdf.html +++ b/public/iframe-pdf.html @@ -9,8 +9,6 @@ - - PDF Document