Skip to content

Commit 84d50d8

Browse files
author
R. S. Doiel
committed
minor tweaks and improvements to csv-textarea
1 parent c4568bd commit 84d50d8

15 files changed

+110
-2
lines changed

‎csv-textarea.js‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,48 @@ class CSVTextarea extends HTMLElement {
2525
this.isComponentInitialized = true;
2626
this.initializeTable();
2727
this.setupEventListeners();
28+
this.setupMutationObserver();
29+
}
30+
31+
setupMutationObserver() {
32+
// Select the node that will be observed for mutations
33+
const targetNode = this.shadowRoot.querySelector('tbody');
34+
35+
// Options for the observer (which mutations to observe)
36+
const config = {
37+
attributes: true,
38+
childList: true,
39+
subtree: true,
40+
attributeFilter: ['value'] // This ensures we only observe changes to the 'value' attribute
41+
};
42+
43+
// Callback function to execute when mutations are observed
44+
const callback = (mutationsList, observer) => {
45+
for (const mutation of mutationsList) {
46+
if (mutation.type === 'attributes' && mutation.attributeName === 'value') {
47+
// If an input value changes, update the textarea
48+
this.toTextarea();
49+
} else if (mutation.type === 'childList') {
50+
// If there are changes in the child list (like adding or removing rows), update the textarea
51+
this.toTextarea();
52+
}
53+
}
54+
};
55+
56+
// Create an observer instance linked to the callback function
57+
this.observer = new MutationObserver(callback);
58+
59+
// Start observing the target node for configured mutations
60+
if (targetNode) {
61+
this.observer.observe(targetNode, config);
62+
}
63+
}
64+
65+
disconnectedCallback() {
66+
// Disconnect the observer when the element is removed from the DOM
67+
if (this.observer) {
68+
this.observer.disconnect();
69+
}
2870
}
2971

3072
async initializeComponent() {
@@ -202,6 +244,7 @@ class CSVTextarea extends HTMLElement {
202244
toCSV() {
203245
const rows = [];
204246
const tbody = this.shadowRoot.querySelector('tbody').rows;
247+
console.log(this.innertHTML);//DEBUG
205248
for (let i = 0; i < tbody.length; i++) {
206249
const cells = tbody[i].cells;
207250
const row = [];
@@ -267,6 +310,7 @@ class CSVTextarea extends HTMLElement {
267310
});
268311
}
269312

313+
270314
fromTextarea() {
271315
const textarea = this.querySelector('textarea');
272316
if (textarea) {
@@ -277,7 +321,17 @@ class CSVTextarea extends HTMLElement {
277321
toTextarea() {
278322
const textarea = this.querySelector('textarea');
279323
if (textarea) {
280-
textarea.value = this.toCSV();
324+
textarea.value = this.toCSV(); // Convert the current state of the component to CSV and update the textarea
325+
console.log('Textarea updated with CSV data:', textarea.value);
326+
}
327+
}
328+
329+
setupFormListener() {
330+
const form = this.closest('form');
331+
if (form) {
332+
form.addEventListener('submit', (event) => {
333+
this.toTextarea(); // Update the textarea with the latest CSV data
334+
});
281335
}
282336
}
283337

‎demo_csv_submit.html‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>CSV Textarea Form Submission Demo</title>
7+
<script type="module" src="csv-textarea.js"></script>
8+
<style>
9+
pre {
10+
background-color: #f4f4f4;
11+
padding: 10px;
12+
border: 1px solid #ccc;
13+
white-space: pre-wrap;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<h1>CSV Textarea Form Submission Demo</h1>
19+
<form id="the-form" method="post">
20+
<csv-textarea name="csvData" column-headings="Name,Age,City" debug>
21+
<textarea name="csvData">
22+
"Doe, Jane",20,"Rancho Cucamonga"
23+
"Doe, John",25,"Cocomo"
24+
</textarea>
25+
</csv-textarea>
26+
<button type="submit">Submit</button>
27+
</form>
28+
29+
<hr>
30+
<h2>Form Data Preview</h2>
31+
<pre id="form-data"></pre>
32+
33+
<script>
34+
document.getElementById('the-form').addEventListener('submit', function(event) {
35+
event.preventDefault(); // Prevent the default form submission
36+
// NOTE: We need to force the inner textarea to be update before fetching the form data.
37+
const csv_textarea = document.querySelector('csv-textarea');
38+
csv_textarea.toTextarea();
39+
const formData = new FormData(this);
40+
let output = [];
41+
42+
// Iterate over the form data and build the output string
43+
for (let [name, value] of formData.entries()) {
44+
output.push(`${name}: ${value}`);
45+
}
46+
47+
// Display the form contents in the pre element
48+
document.getElementById('form-data').textContent = output.join('\n');
49+
});
50+
</script>
51+
</body>
52+
</html>

‎pagefind/fragment/en-US_363f0e8.pf_fragment‎

393 Bytes
Binary file not shown.

‎pagefind/fragment/en-US_44b244d.pf_fragment‎

171 Bytes
Binary file not shown.

‎pagefind/fragment/en-US_566d625.pf_fragment‎

391 Bytes
Binary file not shown.

‎pagefind/fragment/en-US_8ef53b4.pf_fragment‎

166 Bytes
Binary file not shown.

‎pagefind/index/en-US_16323bb.pf_index‎

20 KB
Binary file not shown.

‎pagefind/index/en-US_4999fd9.pf_index‎

20 KB
Binary file not shown.

‎pagefind/index/en-US_e18ccfd.pf_index‎

20 KB
Binary file not shown.

‎pagefind/pagefind-entry.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
{"version":"1.3.0","languages":{"en-US":{"hash":"en-US_caa8a511f31dc","wasm":"en-US","page_count":30}}}
1+
{"version":"1.3.0","languages":{"en-US":{"hash":"en-US_523ef2cdeebe7","wasm":"en-US","page_count":32}}}

0 commit comments

Comments
 (0)