Skip to content

Commit 3af8657

Browse files
chloe9678chloe9678
authored
Merge 9ab1dec into 6bdf7ee 
2 parents 6bdf7ee + 9ab1dec commit 3af8657

File tree

8 files changed

+340
-7
lines changed

8 files changed

+340
-7
lines changed

‎README.md‎

Lines changed: 71 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,71 @@
1-
# A placeholder readme for the RCV entry table
1+
# A lightweight HTML+JS library for inputting two-dimensional form data
2+
3+
See this project at [https://brmighell.github.io/rcv-entry/]
4+
5+
6+
7+
# A lightweight, extendable, dependency-free javascript HTML table plugin
8+
9+
The default configuration:
10+
11+
## Features & Benefits
12+
Features:
13+
* Customisable labels
14+
* Customisable layout
15+
* Customise column rendering
16+
* Has option to disable any input type for any cell
17+
* Has option to change values for any input type at any cell
18+
* Callback informs RCVis of the updates
19+
20+
Benefits:
21+
* Vanilla Javascript & CSS
22+
* No external libraries: no jQuery, bootstrap, Sass, etc
23+
* Simple javascript configuration with sane defaults
24+
* Simple, easy-to-override CSS
25+
* Permissive license
26+
27+
## Examples
28+
### #1: Default
29+
30+
### #2: Fruit Example
31+
32+
### Usage
33+
#### API: Vanilla Javascript
34+
If you're not using node.js, functions begin with dt namespace to avoid conflicts:
35+
36+
Include the files in your HTML and create a wrapper div:
37+
```html
38+
<link rel="stylesheet" href="table.css">
39+
<script type="text/javascript" src="table.js"></script>
40+
<div id="table"></div>
41+
```
42+
43+
Create a slider by calling:
44+
```javascript
45+
const config = {wrapperDivId: 'div'}
46+
dtCreateDataTable(config);
47+
```
48+
49+
additional config options are described below.
50+
51+
### Configuration options
52+
The `config` dictionary has the following options:
53+
54+
| key/default | description |
55+
| --- | --- |
56+
| `wrapperDivId`\* <br/><br/> _required_ | The div id in which to create the data table. |
57+
| `numRows` <br/><br/> default: `3` | Number of rows in the table. |
58+
| `numColumns` <br/><br/> default: `4` | Number of columns in the table. |
59+
| `rowsName` <br/><br/> default: `Row` | Name of rows in the table. |
60+
| `columnsName` <br/><br/> default: `Column` | Name of columns in the table. |
61+
| `tableIds` <br/><br/> default: `Container` | Container for all the table's magic strings. |
62+
| `datumConfig` <br/><br/> default: `Container` | Container for default values of a cell. |
63+
| `tableDivId` <br/><br/> default: `'_tableDivId_'` | ID for the div containing the table. |
64+
| `entryBoxDivId` <br/><br/> default: `'_entryBoxDivId_'` | ID for the div containing the entry box. |
65+
| `tableElementId` <br/><br/> default: `'_tableId_'` | Id for the entire table element. |
66+
| `theadElementId ` <br/><br/> default: `'_theadId_'` | ID for the table's first row (column headers) element. |
67+
| `tbodyElementId` <br/><br/> default: `'_tbodyId_'` | ID for the table's body element. |
68+
| `names` <br/><br/> default: `"Value"` | Array of the names for all fields in a cell. |
69+
| `types` <br/><br/> default: `Number` | Array of the types for all fields in a cell. |
70+
| `defaults` <br/><br/> default: `0` | Array of the defaults for all fields in a cell. |
71+
| `callbacks` <br/><br/> default: `"None"` | Tells what function to execute when a field is changed. |

‎docs/deps.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<link rel="stylesheet" href="data-table/table.css">
2+
<script type="text/javascript" src="data-table/table.js"></script>

‎docs/github-pages-example-1.html‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,3 @@
1-
<head>
2-
<link rel="stylesheet" href="data-table/table.css">
3-
</head>
4-
5-
<script type="text/javascript" src="data-table/table.js"></script>
6-
71
<div>
82
<div id="wrapper-0">
93
</div>

‎docs/github-pages-example-2.html‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div>
2+
<div id="wrapper-1">
3+
</div>
4+
5+
<script type="text/javascript">
6+
dtCreateDataTable({
7+
wrapperDivId: 'wrapper-1',
8+
numRows: 6,
9+
numColumns: 6,
10+
rowsNamePlural: 'fruits',
11+
columnsName: 'Round',
12+
rowsName: 'Type of fruit'
13+
});
14+
</script>
15+
</div>

‎docs/local-example-1.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<head>
2+
<link rel="stylesheet" href="../data-table/table.css">
3+
<title>"Basic Example"</title>
4+
</head>
5+
6+
<script type="text/javascript" src="../data-table/table.js"></script>
7+
8+
<div>
9+
<div id="wrapper-0">
10+
</div>
11+
12+
<script type="text/javascript">
13+
dtCreateDataTable({
14+
wrapperDivId: 'wrapper-0',
15+
});
16+
</script>
17+
</div>

‎docs/readme-generator.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
2+
{{ deps }}
3+
4+
# A lightweight, extendable, dependency-free javascript HTML table plugin
5+
6+
The default configuration:
7+
{{ ex0 }}
8+
9+
## Features & Benefits
10+
Features:
11+
* Customisable labels
12+
* Customisable layout
13+
* Customise column rendering
14+
* Has option to disable any input type for any cell
15+
* Has option to change values for any input type at any cell
16+
* Callback informs RCVis of the updates
17+
18+
Benefits:
19+
* Vanilla Javascript & CSS
20+
* No external libraries: no jQuery, bootstrap, Sass, etc
21+
* Simple javascript configuration with sane defaults
22+
* Simple, easy-to-override CSS
23+
* Permissive license
24+
25+
## Examples
26+
### #1: Default
27+
{{ ex1 }}
28+
29+
### #2: Fruit Example
30+
{{ ex2 }}
31+
32+
### Usage
33+
#### API: Vanilla Javascript
34+
If you're not using node.js, functions begin with dt namespace to avoid conflicts:
35+
36+
Include the files in your HTML and create a wrapper div:
37+
```html
38+
<link rel="stylesheet" href="table.css">
39+
<script type="text/javascript" src="table.js"></script>
40+
<div id="table"></div>
41+
```
42+
43+
Create a slider by calling:
44+
```javascript
45+
const config = {wrapperDivId: 'div'}
46+
dtCreateDataTable(config);
47+
```
48+
49+
additional config options are described below.
50+
51+
### Configuration options
52+
The `config` dictionary has the following options:
53+
54+
| key/default | description |
55+
| --- | --- |
56+
| `wrapperDivId`\* <br/><br/> _required_ | The div id in which to create the data table. |
57+
| `numRows` <br/><br/> default: `3` | Number of rows in the table. |
58+
| `numColumns` <br/><br/> default: `4` | Number of columns in the table. |
59+
| `rowsName` <br/><br/> default: `Row` | Name of rows in the table. |
60+
| `columnsName` <br/><br/> default: `Column` | Name of columns in the table. |
61+
| `tableIds` <br/><br/> default: `Container` | Container for all the table's magic strings. |
62+
| `datumConfig` <br/><br/> default: `Container` | Container for default values of a cell. |
63+
| `tableDivId` <br/><br/> default: `'_tableDivId_'` | ID for the div containing the table. |
64+
| `entryBoxDivId` <br/><br/> default: `'_entryBoxDivId_'` | ID for the div containing the entry box. |
65+
| `tableElementId` <br/><br/> default: `'_tableId_'` | Id for the entire table element. |
66+
| `theadElementId ` <br/><br/> default: `'_theadId_'` | ID for the table's first row (column headers) element. |
67+
| `tbodyElementId` <br/><br/> default: `'_tbodyId_'` | ID for the table's body element. |
68+
| `names` <br/><br/> default: `"Value"` | Array of the names for all fields in a cell. |
69+
| `types` <br/><br/> default: `Number` | Array of the types for all fields in a cell. |
70+
| `defaults` <br/><br/> default: `0` | Array of the defaults for all fields in a cell. |
71+
| `callbacks` <br/><br/> default: `"None"` | Tells what function to execute when a field is changed. |

‎docs/readme-generator.py‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
# Run this as a pre-commit script.
2+
# Will be a no-op unless docs have changed.
3+
#
4+
# Takes readme-generator.md and creates:
5+
# 1. A jekyll-ready markdown file with includes for dynamic github pages
6+
# 2. A github-ready markdown file with images for static pages
7+
8+
import os
9+
import sys
10+
11+
12+
def initialize_dynamic_lines():
13+
return [
14+
'---\n',
15+
'layout: default\n',
16+
'---\n'
17+
]
18+
19+
20+
def initialize_static_lines():
21+
return [
22+
'# A lightweight HTML+JS library for inputting two-dimensional form data\n\n',
23+
'See this project at [https://brmighell.github.io/rcv-entry/]\n\n',
24+
]
25+
26+
27+
def isFileDataEqual(filename, expectedlines):
28+
# Is expectedlines equal to filename?
29+
with open(filename, 'r') as f:
30+
lines = f.readlines()
31+
return lines == expectedlines
32+
33+
34+
def create_derived_files(input_filename, output_static_filename, output_dynamic_filename):
35+
# Map from a magic key to a triple:
36+
# 1. variable name (just a helper - must match the key)
37+
# 2. What file to include in the dynamic file?
38+
# 3. What file to include in the static file?
39+
magic_keys = {
40+
'{{ deps }}\n': ('deps', 'docs/deps.html', None),
41+
'{{ ex0 }}\n': ('ex0', 'docs/github-pages-example-1.html', None),
42+
'{{ ex1 }}\n': ('ex1', 'docs/github-pages-example-1.html', None),
43+
'{{ ex2 }}\n': ('ex2', 'docs/github-pages-example-2.html', None),
44+
}
45+
46+
# Small enough to just read it all into memory,
47+
# why complicate things?
48+
with open(input_filename, 'r') as f:
49+
lines = f.readlines()
50+
51+
static_lines = initialize_static_lines()
52+
dynamic_lines = initialize_dynamic_lines()
53+
for line in lines:
54+
if line not in magic_keys:
55+
static_lines.append(line)
56+
dynamic_lines.append(line)
57+
continue
58+
59+
# Magic keyword found. Do magic for static or dynamic
60+
(key, dynamic_content, static_content) = magic_keys[line]
61+
if static_content is not None:
62+
# Replace the static content
63+
static_lines.append(
64+
f'\n[\[interactive demo\]](https://artoonie.github.io/timeline-range-slider)\n')
65+
static_lines.append(f'![{key}]({static_content})\n')
66+
67+
# Include the actual content + the dynamic content
68+
include_line = '{% capture ' + key + ' %}'
69+
include_line += '{% include_relative ' + dynamic_content + ' %}'
70+
include_line += '{% endcapture %}\n'
71+
dynamic_lines.append(include_line)
72+
dynamic_lines.append(line)
73+
74+
# Safety check: don't overwrite accidental changes
75+
stream = os.popen('git diff --name-only')
76+
diffs = stream.read()
77+
78+
# Make sure we didn't accidentally change README.md or index.md
79+
if output_dynamic_filename in diffs:
80+
if not isFileDataEqual(output_dynamic_filename, dynamic_lines):
81+
print(
82+
f"File {output_dynamic_filename} is dirty. Refusing to overwrite.")
83+
sys.exit(-1)
84+
if output_static_filename in diffs:
85+
if not isFileDataEqual(output_static_filename, static_lines):
86+
print(
87+
f"File {output_static_filename} is dirty. Refusing to overwrite.")
88+
sys.exit(-1)
89+
90+
# Finally, write it all
91+
with open(output_static_filename, 'w') as f:
92+
f.write(''.join(static_lines))
93+
with open(output_dynamic_filename, 'w') as f:
94+
f.write(''.join(dynamic_lines))
95+
96+
97+
create_derived_files('docs/readme-generator.md', 'README.md', 'index.md')

‎index.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,71 @@
1+
---
2+
layout: default
3+
---
4+
5+
{% capture deps %}{% include_relative docs/deps.html %}{% endcapture %}
6+
{{ deps }}
7+
8+
# A lightweight, extendable, dependency-free javascript HTML table plugin
9+
10+
The default configuration:
11+
{% capture ex0 %}{% include_relative docs/github-pages-example-1.html %}{% endcapture %}
12+
{{ ex0 }}
13+
14+
## Features & Benefits
15+
Features:
16+
* Customisable labels
17+
* Customisable layout
18+
* Customise column rendering
19+
* Has option to disable any input type for any cell
20+
* Has option to change values for any input type at any cell
21+
* Callback informs RCVis of the updates
22+
23+
Benefits:
24+
* Vanilla Javascript & CSS
25+
* No external libraries: no jQuery, bootstrap, Sass, etc
26+
* Simple javascript configuration with sane defaults
27+
* Simple, easy-to-override CSS
28+
* Permissive license
29+
130
## Examples
231
### #1: Default
332
{% capture ex1 %}{% include_relative docs/github-pages-example-1.html %}{% endcapture %}
433
{{ ex1 }}
34+
35+
### #2: Fruit Example
36+
{% capture ex2 %}{% include_relative docs/github-pages-example-2.html %}{% endcapture %}
37+
{{ ex2 }}
38+
39+
### Usage
40+
#### API: Vanilla Javascript
41+
If you're not using node.js, functions begin with dt namespace to avoid conflicts:
42+
43+
Include the files in your HTML and create a wrapper div:
44+
```html
45+
<link rel="stylesheet" href="table.css">
46+
<script type="text/javascript" src="table.js"></script>
47+
<div id="table"></div>
48+
```
49+
50+
Create a table by calling:
51+
```javascript
52+
const config = {wrapperDivId: 'div'}
53+
dtCreateDataTable(config);
54+
```
55+
56+
additional config options are described below.
57+
58+
### Configuration options
59+
The `config` dictionary has the following options:
60+
61+
| key/default | description |
62+
| --- | --- |
63+
| `wrapperDivId`\* <br/><br/> _required_ | The div id in which to create the data table. |
64+
| `numRows` <br/><br/> default: `3` | Number of rows in the table. |
65+
| `numColumns` <br/><br/> default: `4` | Number of columns in the table. |
66+
| `rowsName` <br/><br/> default: `Row` | Name of rows in the table. |
67+
| `columnsName` <br/><br/> default: `Column` | Name of columns in the table. |
68+
| `names` <br/><br/> default: `["Value", "Status"] ` | Array of the names for all fields in a cell. |
69+
| `types` <br/><br/> default: `[Number, Array]` | Array of the types for all fields in a cell. |
70+
| `values` <br/><br/> default: `[0, ["Active", "Inactive"]]` | Array of the types for all fields in a cell. |
71+
| `callbacks` <br/><br/> default: `"None"` | Tells what function to execute when a field is changed. |

0 commit comments

Comments
 (0)