Skip to content

Commit 383c850

Browse files
eviltestereviltester
committed
refactor app and generator to remove shared code
1 parent 2416e32 commit 383c850

10 files changed

Lines changed: 310 additions & 274 deletions

File tree

‎app.html‎

Lines changed: 1 addition & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -124,154 +124,8 @@
124124
-->
125125
<script src="https://unpkg.com/@popperjs/core@2"></script>
126126
<script src="https://unpkg.com/tippy.js@6"></script>
127-
128-
129-
<div id="inline-help-items" style="display:none">
130-
131-
<div data-name="test-data-summary-title">
132-
<p>The Test Data section allows you to randomly generate data to populate the grid. You can then export to the various supported formats.</p>
133-
<p><a class="helplink" href="/docs/test-data/test-data-generation" target="anywaydatadocs">Learn more</a></p>
134-
</div>
135-
136-
<div data-name="import-export-controls">
137-
<p>Using the import and export controls you can:</p>
138-
<ul>
139-
<li>"Set Text From Grid"<br> to refresh the text box for the chosen output format.</li>
140-
<li>"Set Grid From Text"<br> to <a class="helplink" href="/docs/editing-data/text-editing" target="anywaydatadocs">import the text box content</a> into the grid.</li>
141-
<li>"Choose File"<br> to <a class="helplink" href="docs/editing-data/import-from-file" target="anywaydatadocs">import a text file</a> of the chosen format.</li>
142-
<li>"Download File"<br> to <a class="helplink" href="docs/editing-data/exporting-data" target="anywaydatadocs">export the Data Grid</a> items in the chosen format.</li>
143-
<li>"Drag and Drop File"<br> to <a class="helplink" href="docs/editing-data/import-from-file" target="anywaydatadocs">import the file</a> contents using the currently chosen format.</li>
144-
</ul>
145-
<p>The options shown depend on the output type, some types are not supported for input and so only the output options will be shown.</p>
146-
</div>
147-
148-
<!-- Data Format Options -->
149-
<div data-name="markdown-table-options">
150-
<p>Export the table data as <a class="helplink" href="docs/data-formats/markdown/markdown" target="anywaydatadocs">Markdown</a>, a human readable format which can be easily converted to HTML or PDF.</p>
151-
<p>Choose from the list of <a class="helplink" href="docs/data-formats/markdown/options" target="anywaydatadocs">formatting options</a> and press the [Apply] button to render the data in the chosen style.</p>
152-
<p><a class="helplink" href="docs/data-formats/markdown/options" target="anywaydatadocs">Learn more</a></p>
153-
</div>
154-
155-
<div data-name="ascii-table-options">
156-
<p>Export the table data as Ascii Table suitable for adding to an email or text file.</p>
157-
<p>Choose from a list of predefined formats and press the [Apply] button to render the table in the chosen style.</p>
158-
<p><a class="helplink" href="docs/data-formats/ascii-tables/options" target="anywaydatadocs">Learn more</a></p>
159-
</div>
160-
161-
<div data-name="csv-options">
162-
<p>Export the table data as <a class="helplink" href="docs/data-formats/csv/csv" target="anywaydatadocs">CSV (Comma Separated Values)</a> suitable for importing into a spreadsheet.</p>
163-
<p>Choose from the formatting options and press the [Apply] button to render the data in the chosen style.</p>
164-
<p><a class="helplink" href="docs/data-formats/csv/options" target="anywaydatadocs">Learn more</a></p>
165-
</div>
166-
167-
<div data-name="delimiter-options">
168-
<p>Export the table data as a <a class="helplink" href="docs/data-formats/delimited/delimited" target="anywaydatadocs">Delimited</a> output suitable for importing or copy and pasting into a spreadsheet.</p>
169-
<p>Choose from the formatting options and press the [Apply] button to render the data in the chosen style.</p>
170-
<p><em>Hint: Use Tab delimiter if copying into another table editing application like a spreadsheet.</em></p>
171-
<p><a class="helplink" href="docs/data-formats/delimited/options" target="anywaydatadocs">Learn more</a></p>
172-
</div>
173-
174-
<div data-name="json-options">
175-
<p>Export the table data as a <a class="helplink" href="docs/data-formats/json/json" target="anywaydatadocs">JSON</a> output suitable for JSON interchange messages e.g. APIs.</p>
176-
<p>Choose from the formatting options and press the [Apply] button to render the JSON in the chosen style.</p>
177-
<p><a class="helplink" href="docs/data-formats/json/options" target="anywaydatadocs">Learn more</a></p>
178-
</div>
179-
180-
<div data-name="jsonl-options">
181-
<p>Export the table data as JSON Lines (JSONL), with one JSON object per line and no surrounding array.</p>
182-
<p>JSONL output is always compact single-line records. Number Convert can optionally convert numeric-looking values to numbers.</p>
183-
<p><a class="helplink" href="docs/data-formats/jsonl/jsonl" target="anywaydatadocs">Learn more</a> and see <a class="helplink" href="docs/data-formats/jsonl/options" target="anywaydatadocs">JSONL options</a>.</p>
184-
</div>
185-
186-
<div data-name="javascript-options">
187-
<p>Export the table data as a <a class="helplink" href="docs/data-formats/javascript/javascript" target="anywaydatadocs">Javascript</a> output suitable for using in a Javascript application or unit testing code.</p>
188-
<p>Choose from the formatting options and press the [Apply] button to render the Javascript in the chosen style.</p>
189-
<p><a class="helplink" href="docs/data-formats/javascript/options" target="anywaydatadocs">Learn more</a></p>
190-
</div>
191-
192-
<div data-name="java-options">
193-
<p>Export the table data as Java code using either anonymous `Map` rows or named class instances.</p>
194-
<p>Configure collection type, variable/class naming, number quoting, blank value handling, imports, and pretty printing before pressing [Apply].</p>
195-
<p><a class="helplink" href="docs/data-formats/java/options" target="anywaydatadocs">Learn more</a></p>
196-
</div>
197-
198-
<div data-name="python-options">
199-
<p>Export the table data as Python code using dictionaries or named class instances.</p>
200-
<p>Configure collection type, variable/class naming, decimal handling, quote style, import statements, and pretty printing before pressing [Apply].</p>
201-
<p><a class="helplink" href="docs/data-formats/python/options" target="anywaydatadocs">Learn more</a></p>
202-
</div>
203-
204-
<div data-name="typescript-options">
205-
<p>Export the table data as TypeScript code using anonymous objects or named class instances.</p>
206-
<p>Configure collection type, variable/class naming, blank value handling, number quoting, and pretty printing before pressing [Apply].</p>
207-
<p><a class="helplink" href="docs/data-formats/typescript/options" target="anywaydatadocs">Learn more</a></p>
208-
</div>
209-
210-
<div data-name="xml-options">
211-
<p>Export the table data as <a class="helplink" href="docs/data-formats/xml/xml" target="anywaydatadocs">XML</a>, suitable for system integration and data interchange.</p>
212-
<p>Configure root and item element names, optional attributes, XML header, and XML namespace, then press [Apply] to render using those settings.</p>
213-
<p><a class="helplink" href="docs/data-formats/xml/options" target="anywaydatadocs">Learn more</a></p>
214-
</div>
215-
216-
<div data-name="sql-options">
217-
<p>Export the table data as SQL INSERT statements for loading data into a table.</p>
218-
<p>Configure table name, max values per INSERT statement, and whether numeric-looking values are quoted.</p>
219-
<p><a class="helplink" href="docs/data-formats/sql/sql" target="anywaydatadocs">Learn more</a> and see <a class="helplink" href="docs/data-formats/sql/options" target="anywaydatadocs">SQL options</a>.</p>
220-
</div>
221-
222-
<div data-name="gherkin-options">
223-
<p>Export the table data as <a class="helplink" href="docs/data-formats/gherkin/gherkin" target="anywaydatadocs">Gherkin</a>, a human readable format used in BDD automation.</p>
224-
<p>The <a class="helplink" href="docs/data-formats/gherkin/options" target="anywaydatadocs">formatting options</a> help pretty print the output to fit in the specification.</p>
225-
<p><a class="helplink" href="docs/data-formats/gherkin/options" target="anywaydatadocs">Learn more</a></p>
226-
</div>
227-
228-
<div data-name="html-table-options">
229-
<p>Export the table data as a <a class="helplink" href="docs/data-formats/html/html-tables" target="anywaydatadocs">HTML Table</a> suitable for adding to a web page.</p>
230-
<p>Choose from the formatting options and press the [Apply] button to render the data as HTML code.</p>
231-
<p>Import any HTML code by pasting the `table` contents into the text area and pressing `Set Grid From Text`</p>
232-
<p><a class="helplink" href="docs/data-formats/html/options" target="anywaydatadocs">Learn more</a></p>
233-
</div>
234-
235-
</div>
236-
237127
<script>
238-
239-
function updateHelpHints(){
240-
tippy('.helpicon[data-help]', {
241-
content(reference) {
242-
const id = reference.getAttribute('data-help');
243-
const inlineHelpText = reference.getAttribute('data-help-text');
244-
if (inlineHelpText) {
245-
return inlineHelpText;
246-
}
247-
248-
// look up help text
249-
const helpItems = document.getElementById("inline-help-items");
250-
if (!helpItems || !id) {
251-
return '';
252-
}
253-
const helpText = helpItems.querySelector(`div[data-name='${id}']`);
254-
255-
// return help text
256-
if(helpText){
257-
return helpText.innerHTML;
258-
}
259-
260-
console.log("TODO: Create help for " + id);
261-
return '';
262-
},
263-
placement: 'top-start',
264-
allowHTML: true,
265-
interactive: true,
266-
}
267-
);
268-
}
269-
270-
271-
window.addEventListener('load', (event) => {
272-
document.getElementById("initial-load").remove();
273-
updateHelpHints();
274-
});
128+
document.getElementById('initial-load')?.remove();
275129
</script>
276130

277131

‎generator.html‎

Lines changed: 0 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -49,128 +49,5 @@
4949
<p id="generator-initial-load">Please Wait, Loading Libraries...</p>
5050
<div id="generator-app"></div>
5151
</div>
52-
53-
<div id="inline-help-items" style="display:none">
54-
<div data-name="markdown-table-options">
55-
<p>Export the table data as <a class="helplink" href="docs/data-formats/markdown/markdown" target="anywaydatadocs">Markdown</a>, a human readable format which can be easily converted to HTML or PDF.</p>
56-
<p>Choose from the list of <a class="helplink" href="docs/data-formats/markdown/options" target="anywaydatadocs">formatting options</a> and press the [Apply] button to render the data in the chosen style.</p>
57-
<p><a class="helplink" href="docs/data-formats/markdown/options" target="anywaydatadocs">Learn more</a></p>
58-
</div>
59-
60-
<div data-name="ascii-table-options">
61-
<p>Export the table data as Ascii Table suitable for adding to an email or text file.</p>
62-
<p>Choose from a list of predefined formats and press the [Apply] button to render the table in the chosen style.</p>
63-
<p><a class="helplink" href="docs/data-formats/ascii-tables/options" target="anywaydatadocs">Learn more</a></p>
64-
</div>
65-
66-
<div data-name="csv-options">
67-
<p>Export the table data as <a class="helplink" href="docs/data-formats/csv/csv" target="anywaydatadocs">CSV (Comma Separated Values)</a> suitable for importing into a spreadsheet.</p>
68-
<p>Choose from the formatting options and press the [Apply] button to render the data in the chosen style.</p>
69-
<p><a class="helplink" href="docs/data-formats/csv/options" target="anywaydatadocs">Learn more</a></p>
70-
</div>
71-
72-
<div data-name="delimiter-options">
73-
<p>Export the table data as a <a class="helplink" href="docs/data-formats/delimited/delimited" target="anywaydatadocs">Delimited</a> output suitable for importing or copy and pasting into a spreadsheet.</p>
74-
<p>Choose from the formatting options and press the [Apply] button to render the data in the chosen style.</p>
75-
<p><em>Hint: Use Tab delimiter if copying into another table editing application like a spreadsheet.</em></p>
76-
<p><a class="helplink" href="docs/data-formats/delimited/options" target="anywaydatadocs">Learn more</a></p>
77-
</div>
78-
79-
<div data-name="json-options">
80-
<p>Export the table data as a <a class="helplink" href="docs/data-formats/json/json" target="anywaydatadocs">JSON</a> output suitable for JSON interchange messages e.g. APIs.</p>
81-
<p>Choose from the formatting options and press the [Apply] button to render the JSON in the chosen style.</p>
82-
<p><a class="helplink" href="docs/data-formats/json/options" target="anywaydatadocs">Learn more</a></p>
83-
</div>
84-
85-
<div data-name="jsonl-options">
86-
<p>Export the table data as JSON Lines (JSONL), with one JSON object per line and no surrounding array.</p>
87-
<p>JSONL output is always compact single-line records. Number Convert can optionally convert numeric-looking values to numbers.</p>
88-
<p><a class="helplink" href="docs/data-formats/jsonl/jsonl" target="anywaydatadocs">Learn more</a> and see <a class="helplink" href="docs/data-formats/jsonl/options" target="anywaydatadocs">JSONL options</a>.</p>
89-
</div>
90-
91-
<div data-name="javascript-options">
92-
<p>Export the table data as a <a class="helplink" href="docs/data-formats/javascript/javascript" target="anywaydatadocs">Javascript</a> output suitable for using in a Javascript application or unit testing code.</p>
93-
<p>Choose from the formatting options and press the [Apply] button to render the Javascript in the chosen style.</p>
94-
<p><a class="helplink" href="docs/data-formats/javascript/options" target="anywaydatadocs">Learn more</a></p>
95-
</div>
96-
97-
<div data-name="java-options">
98-
<p>Export the table data as Java code using either anonymous `Map` rows or named class instances.</p>
99-
<p>Configure collection type, variable/class naming, number quoting, blank value handling, imports, and pretty printing before pressing [Apply].</p>
100-
<p><a class="helplink" href="docs/data-formats/java/options" target="anywaydatadocs">Learn more</a></p>
101-
</div>
102-
103-
<div data-name="python-options">
104-
<p>Export the table data as Python code using dictionaries or named class instances.</p>
105-
<p>Configure collection type, variable/class naming, decimal handling, quote style, import statements, and pretty printing before pressing [Apply].</p>
106-
<p><a class="helplink" href="docs/data-formats/python/options" target="anywaydatadocs">Learn more</a></p>
107-
</div>
108-
109-
<div data-name="typescript-options">
110-
<p>Export the table data as TypeScript code using anonymous objects or named class instances.</p>
111-
<p>Configure collection type, variable/class naming, blank value handling, number quoting, and pretty printing before pressing [Apply].</p>
112-
<p><a class="helplink" href="docs/data-formats/typescript/options" target="anywaydatadocs">Learn more</a></p>
113-
</div>
114-
115-
<div data-name="xml-options">
116-
<p>Export the table data as <a class="helplink" href="docs/data-formats/xml/xml" target="anywaydatadocs">XML</a>, suitable for system integration and data interchange.</p>
117-
<p>Configure root and item element names, optional attributes, XML header, and XML namespace, then press [Apply] to render using those settings.</p>
118-
<p><a class="helplink" href="docs/data-formats/xml/options" target="anywaydatadocs">Learn more</a></p>
119-
</div>
120-
121-
<div data-name="sql-options">
122-
<p>Export the table data as SQL INSERT statements for loading data into a table.</p>
123-
<p>Configure table name, max values per INSERT statement, and whether numeric-looking values are quoted.</p>
124-
<p><a class="helplink" href="docs/data-formats/sql/sql" target="anywaydatadocs">Learn more</a> and see <a class="helplink" href="docs/data-formats/sql/options" target="anywaydatadocs">SQL options</a>.</p>
125-
</div>
126-
127-
<div data-name="gherkin-options">
128-
<p>Export the table data as <a class="helplink" href="docs/data-formats/gherkin/gherkin" target="anywaydatadocs">Gherkin</a>, a human readable format used in BDD automation.</p>
129-
<p>The <a class="helplink" href="docs/data-formats/gherkin/options" target="anywaydatadocs">formatting options</a> help pretty print the output to fit in the specification.</p>
130-
<p><a class="helplink" href="docs/data-formats/gherkin/options" target="anywaydatadocs">Learn more</a></p>
131-
</div>
132-
133-
<div data-name="html-table-options">
134-
<p>Export the table data as a <a class="helplink" href="docs/data-formats/html/html-tables" target="anywaydatadocs">HTML Table</a> suitable for adding to a web page.</p>
135-
<p>Choose from the formatting options and press the [Apply] button to render the data as HTML code.</p>
136-
<p>Import any HTML code by pasting the `table` contents into the text area and pressing `Set Grid From Text`</p>
137-
<p><a class="helplink" href="docs/data-formats/html/options" target="anywaydatadocs">Learn more</a></p>
138-
</div>
139-
</div>
140-
141-
<script>
142-
function updateHelpHints(){
143-
if (typeof tippy !== 'function') {
144-
return;
145-
}
146-
147-
tippy('.helpicon[data-help]', {
148-
content(reference) {
149-
const id = reference.getAttribute('data-help');
150-
const helpItems = document.getElementById('inline-help-items');
151-
const inlineHelpText = reference.getAttribute('data-help-text');
152-
if (inlineHelpText) {
153-
return inlineHelpText;
154-
}
155-
if (!helpItems || !id) {
156-
return '';
157-
}
158-
159-
const helpText = helpItems.querySelector(`div[data-name='${id}']`);
160-
if (helpText) {
161-
return helpText.innerHTML;
162-
}
163-
164-
console.log('TODO: Create help for ' + id);
165-
return '';
166-
},
167-
placement: 'top-start',
168-
allowHTML: true,
169-
interactive: true,
170-
});
171-
}
172-
173-
window.updateHelpHints = updateHelpHints;
174-
</script>
17552
</body>
17653
</html>

‎packages/core-ui/js/generator-script.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ensureGridLibraryLoaded } from './gui_components/data-grid-editor/grid-library-loader.js';
22
import { DataGeneratorPage } from './gui_components/data-generator-page.js';
33
import { faker } from 'https://cdn.skypack.dev/@faker-js/faker@v9.7.0';
4+
import { initHelpTooltips } from './help/help-tooltips.js';
45

56
async function bootstrapGeneratorPage({
67
documentObj = document,
@@ -23,6 +24,7 @@ async function bootstrapGeneratorPage({
2324
RandExp: globalThis?.RandExp,
2425
});
2526
page.init();
27+
initHelpTooltips({ documentObj });
2628

2729
const loadingMessage = documentObj.getElementById('generator-initial-load');
2830
if (loadingMessage) {

‎packages/core-ui/js/gui_components/import-export-controls.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,9 @@ class ImportExportControls {
321321
this.applyCurrentTypeOptions(options);
322322
this.setOptionsApplyDirtyState(optionsparent, false);
323323
});
324-
window.updateHelpHints();
324+
if (typeof window !== 'undefined' && typeof window.updateHelpHints === 'function') {
325+
window.updateHelpHints();
326+
}
325327
}
326328

327329
optionsparent.style.display = 'block';

0 commit comments

Comments
 (0)