-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcsvtextarea_llm_prompts.html
182 lines (182 loc) · 13 KB
/
csvtextarea_llm_prompts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>CL-web-components</title>
<link rel="stylesheet" href="/css/site.css">
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="index.html">README</a></li>
<li><a href="LICENSE">LICENSE</a></li>
<li><a href="user_manual.html">User Manual</a></li>
<li><a href="INSTALL.html">INSTALL</a></li>
<li><a href="about.html">About</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="https://github.com/caltechlibrary/CL-web-components">GitHub</a></li>
</ul>
</nav>
<section>
<h1 id="csvtextarea-web-component">CSVTextarea Web Component</h1>
<p>I would like to implement a web component in JavaScript called
CSVTextarea.</p>
<p>The CSVTextarea uses an editable HTML5 table element to manage the
tabular data. The CSVTextarea uses an HTML template to structure the
table and provide default CSS.</p>
<p>“parseCSV” and “parseCSVRow” are imported from a module called
“./parseCSV.js”;</p>
<p>The CSVTextarea element has an attribute called “column-headings”.
This is a required attribute. This is a comma delimited list that use an
imported “parseCSVRow” method to produce a list of headings that will be
used for the HTML5 table.</p>
<p>The CSVTextarea may of the following attributes, “id”, “class”,
“caption”, “text”, “placeholder”, “css-href”.</p>
<p>The CSVTextarea “css-href” attribute is used to fetch custom CSS for
the CSVTextarea and replaces the default CSS provided by the HTML
Template.</p>
<p>If the CSVTextarea’s innerHTML includes one or more datalist HTML
elements those to be cloned into the HTML Template.</p>
<p>The CSVTextarea the async initializeComponent should instantiate the
HTML template and return a promise if successfully complete.</p>
<p>The CSVTextarea initializeTable method is called after
initializeComponent has completed and it should populate the HTML5
table. The HTML5 table heading should be populated from by using the
imported “parseCSVRow” method on the “column-headings” attribute. Each
string in the array should become a column heading.</p>
<p>The CSVTextarea’s table body’s TD elements should use input elements
to hold editable content. If there is a datalist associated with the
column of the TD then each input element in the column should point to
the datalist with it’s “list” attribute.</p>
<p>The CSVTextarea emits a “cell-change” event consisting of the row
index, column index and value for the editable HTML5 table body TD’s
input element change.</p>
<p>The CSVTextarea emits a “cell-focus” event consisting of the row
index, column index and value for the editable HTML5 table body TD’s
recieves focus.</p>
<p>The CSVTextarea has a debug attribute that is false by default. If
debug is true the CSVTextarea will use the “toCSV” method to display
contents of the HTML5 table’s body in the console when CSVTextarea is
instantiated in the web page. CSVTextarea should emit events when the
HTML5 table body’s TD are edited. If debug is true events are displayed
in the console.</p>
<p>The CSVTextarea has a method called “rowCount” that returns the
number of rows in the HTML5 table body. The minimum number of rows is
zero when only the HTML5 table’s headings are populated.</p>
<p>The CSVTextarea has a method called “columnCount” that returns the
number of columns in the HTML5 table headings. The minimum column count
is one. A HTML5 table must have at least one column heading.</p>
<p>The CSVTextarea HTML5 table body must have the same number of columns
as the heading columns.</p>
<p>The CSVTextarea has a method called “isEmptyRow”. It takes a row
index. The method scans each TD of the row and if each TD has an enpty
innerHTML then it returns true. If a TD’s innerHTML has content true is
returned.</p>
<p>The CSVTextarea has a method “appendRow” that adds an row of empty TD
at the bottom of the HTML5 table body. Set the input fosuc to the first
TD in the added row.</p>
<p>The CSVTextarea has a method “cleanupTable” that looks at each row in
the HTML5 table’s body and removes it if “isEmptyRow” returns true. It
should start checking for the empty rows from the bottom and work it’s
way to the top.</p>
<p>The CSVTextarea has a method “toCSV” method that returns the HTML5
table’s body and a CSV text. The toCSV method should use “stringifyCSV”
imported from “./parseCSV.js” to encode the rows array in CSV
format.</p>
<p>The CSVTextarea has a method “fromCSV” that takes CSV text, uses the
imported “parseCSV” function and result rows into the HTML5 table
body.</p>
<p>The CSVTextarea has a method “toObjects”. The method returns a array
objects representing each TD in the HTML5 table’s body. The objects will
have the row index, column index and value of the TDs.</p>
<p>The CSVTextarea has a method “fromObjects”. The method takes an array
of objects that have the row index, column index and value. It maps the
objects into the HTML5 table body replacing or creating TD has
needed.</p>
<p>When the CSVTextarea’s inner TEXTAREA’s innerText is an empty string
then display the HTML5 table with a single empty row with the same
number of cells as the number of column headings.</p>
<p>CSVTextarea should have methods the correspond to a HTML5 table’s
methods.</p>
<p>CSVTextarea web component must follow W3C accessibilty
guidelines.</p>
<p>Multiple CSVTextarea may occur in a web page.</p>
<p>The CSVTextarea will normally be used to wrap a TEXTAREA element. The
innerHTML of the TEXTAREA element will provide CSV content used to
initial the editable HTML5 table element’s body.</p>
<p>The CSVTextarea has a method “fromTextarea” that reads an innerHTML’s
TEXTAREA, parses the content using “parseCSV” method and updates the
HTML5 table body.</p>
<p>The CSVTextarea has a method “toTextarea” that takes the contents of
the HTML5 table body and uses “stringifyCSV” when setting the
innerHTML’s of TEXTAREA.</p>
<p>Example usage of the CSVTextarea should look like this.</p>
<div class="sourceCode" id="cb1"><pre
class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">csv-textarea</span><span class="ot"> id</span><span class="op">=</span><span class="st">"my-csv"</span><span class="ot"> name</span><span class="op">=</span><span class="st">"csv-table"</span><span class="ot"> class</span><span class="op">=</span><span class="st">"csv-component"</span><span class="ot"> title</span><span class="op">=</span><span class="st">"CSV Editor"</span><span class="ot"> placeholder</span><span class="op">=</span><span class="st">"Enter CSV data"</span><span class="ot"> caption</span><span class="op">=</span><span class="st">"CSV Table"</span><span class="ot"> column-headings</span><span class="op">=</span><span class="st">"Name,Age,City"</span><span class="ot"> cols</span><span class="op">=</span><span class="st">"3"</span><span class="ot"> rows</span><span class="op">=</span><span class="st">"5"</span><span class="dt">></span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">datalist</span><span class="ot"> id</span><span class="op">=</span><span class="st">"city"</span><span class="dt">></span></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">option</span><span class="ot"> value</span><span class="op">=</span><span class="st">"Azuza"</span><span class="dt">></span></span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">option</span><span class="ot"> value</span><span class="op">=</span><span class="st">"Cocomo"</span><span class="dt">></span></span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">option</span><span class="ot"> value</span><span class="op">=</span><span class="st">"Malibu"</span><span class="dt">></span></span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">option</span><span class="ot"> vlaue</span><span class="op">=</span><span class="st">"Topanga"</span><span class="dt">></span></span>
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">option</span><span class="ot"> value</span><span class="op">=</span><span class="st">"Rancho Cucamonga"</span><span class="dt">></span></span>
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">option</span><span class="ot"> vlaue</span><span class="op">=</span><span class="st">"Zuma"</span><span class="dt">></span></span>
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">datalist</span><span class="dt">></span></span>
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">textarea</span><span class="dt">></span></span>
<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a>"Doe, Jane", 20, Rancho Cucamonga</span>
<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a>"Doe, John", 25, Cocomo</span>
<span id="cb1-13"><a href="#cb1-13" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">textarea</span><span class="dt">></span></span>
<span id="cb1-14"><a href="#cb1-14" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">csv-textarea</span><span class="dt">></span></span></code></pre></div>
<p>When the CSVTextarea is initialized it reads the wrapped TEXTAREA’s
innerText and has the Table object parse the CSV content and populate
the table. There should not be a TEXTAREA rendered by the CSVTextarea
web component.</p>
<p>The CSVTextarea has two buttons below the HTML5 table. The first
button is labeled “Append Row”, it triggers the “appendRow” action. The
second button is called “Cleanup” it triggers the “cleanupTable” action.
If “debug” is true then those events are shown in the console.</p>
<p>If the CSVTextarea “debug” attribute is true then a third button with
a label “Debug”. When clicked the the current fucus information and the
content CSVTextarea’s TEXTAREA’s innerHTML will be display the results
for toCSV in the console.</p>
<p>Please display the ES6 module, “csvtextarea.js”.</p>
<p>When text in a TD is selected and the backspace key is pressed delete
the selected text. If not text is selected and the backspace key is
pressed delete the character before the cursor.</p>
<p>When CSVTextarea is initialized without any CSV data the HTML5 table
the header and use the appendRow method to add an empty row to the HTML5
table’s body.</p>
<p>CSVTextarea should include “getCellValue” method that take a row
index and column index or name. It should return the value of the
corresponding input element contained in the TD of the table’s body
corresponding row and index. If column index is not a number the column
index value is dereved by matching the string against a
column-heading.</p>
<p>CSVTextarea should include a “setCellValue” method that takes a row
index, column index or name, and a value. It sets the value of the input
element contained in the TD corresponding the the row and column index.
If column index is not a number the column index value is dereved by
matching the string against a column-heading.</p>
<p>CSVTextarea should include a method <code>toJSON</code> that uses
<code>toObjects</code> and returns the results by using
<code>JSON.stringify</code>.</p>
<p>CSVTextarea should include a method <code>fromJSON</code> that takes
a JSON string and used <code>JSON.parse</code> and
<code>fromObjects</code> to update the CSVTextarea table.</p>
<p>CSVTextarea should include a method called
<code>setAutocomplete</code> that will associated a datalist in the HTML
Template with a column’s input elements. The
<code>setAutocomplate</code> takes a column index or name and an array
of objects where each object’s value is used when creating the
datalist’s options.</p>
<p>CSVTextarea should include a method called
<code>getAutocomplete</code>. This method takes a column index or name.
It returns an array of objects representing the options associated with
the column’s datalist. If no datalist is found it returns undefined.</p>
<p>If the CSVTextarea as a title attribute, “help-description” attribute
a clickable “ⓘ” should be included after the buttons. Clicking toggles
the a help message. The help message is composed from the CSVTextarea’s
title if available, the value in a “help-text” attribute if available
and should describe navigating and editing the table.</p>
</section>
</body>
</html>