Skip to content

Commit a8461d3

Browse files
ConradSollittConradSollitt
committed
📱 Examples - Minor Updates for Mobile, etc
1 parent 0b1acc5 commit a8461d3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+215
-81
lines changed

‎examples/binary-classification-hbs.htm‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
data-page="jsonData"
5555
data-url="https://www.dataformsjs.com/data/ai-ml/sample-training-data/pima-indians-diabetes"
5656
data-load-only-once="true"
57-
data-lazy-load="jsonData"
57+
data-lazy-load="jsonData, clickToHighlight"
5858
src="html/binary-training-hbs.htm">
5959
</script>
6060

@@ -86,6 +86,8 @@
8686
'./binary-classification.js',
8787
],
8888
jsonData: 'https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/pages/jsonData.min.js',
89+
// clickToHighlight: 'https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/plugins/clickToHighlight.min.js',
90+
clickToHighlight: 'https://dataformsjs.s3-us-west-1.amazonaws.com/js/pre-release/clickToHighlight.min.js',
8991
}
9092
</script>
9193
</body>

‎examples/binary-classification-vue.htm‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@
7070
data-page="jsonData"
7171
data-url="https://www.dataformsjs.com/data/ai-ml/sample-training-data/pima-indians-diabetes"
7272
data-load-only-once="true"
73-
data-lazy-load="jsonData"
73+
data-lazy-load="jsonData, clickToHighlight"
7474
src="html/binary-training-vue.htm"
7575
data-columns
7676
data-records>
@@ -103,6 +103,8 @@
103103
'./binary-classification.js',
104104
],
105105
jsonData: 'https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/pages/jsonData.min.js',
106+
// clickToHighlight: 'https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/plugins/clickToHighlight.min.js',
107+
clickToHighlight: 'https://dataformsjs.s3-us-west-1.amazonaws.com/js/pre-release/clickToHighlight.min.js',
106108
// Currently this is not used, if adding back then also update:
107109
// [data-lazy-load="binaryPredictionPage, vueDirectives"]
108110
//

‎examples/countries-no-spa-graphql.htm‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,13 @@ <h1>Countries</h1>
4141
<script type="text/babel">
4242
const format = new Format();
4343

44+
function toogleHighlight(e) {
45+
if (e.target.nodeName === 'A') {
46+
return;
47+
}
48+
e.currentTarget.classList.toggle('highlight');
49+
}
50+
4451
function ShowLoading() {
4552
return <h3 className="loading">Loading...</h3>;
4653
}
@@ -77,7 +84,7 @@ <h1>Countries</h1>
7784
<tbody>
7885
{props.data && props.data.countries && props.data.countries.map(country => {
7986
return (
80-
<tr key={country.iso}>
87+
<tr key={country.iso} onClick={toogleHighlight} className="pointer">
8188
<td>{country.iso}</td>
8289
<td>
8390
<i class={country.iso.toLowerCase() + ' flag'}></i>

‎examples/countries-no-spa-hbs.htm‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
<h1>Countries</h1>
1414

1515
<json-data
16+
class="flex-col"
1617
data-url="https://www.dataformsjs.com/data/geonames/countries"
1718
data-template-id="countries-list">
1819
</json-data>
@@ -23,19 +24,17 @@ <h1>Countries</h1>
2324
{{#if isLoading}}<div>Loading...</div>{{/if}}
2425
{{#if hasError}}<div class="error">{{errorMessage}}</div>{{/if}}
2526
{{#if isLoaded}}
26-
<div>
27-
<input
28-
data-filter-selector="table"
29-
data-filter-results-text-selector="h1"
30-
data-filter-results-text-all="{totalCount} Countries"
31-
data-filter-results-text-filtered="Showing {displayCount} of {totalCount} Countries"
32-
placeholder="Enter filter, example 'North America'">
33-
</div>
27+
<input
28+
data-filter-selector="table"
29+
data-filter-results-text-selector="h1"
30+
data-filter-results-text-all="{totalCount} Countries"
31+
data-filter-results-text-filtered="Showing {displayCount} of {totalCount} Countries"
32+
placeholder="Enter filter, example 'North America'">
3433

3534
<p>Click on a column to sort rows based on column values.</p>
3635

3736
<div class="responsive-table">
38-
<table data-sort data-sort-class-odd="row-odd" data-sort-class-even="row-even">
37+
<table data-sort data-sort-class-odd="row-odd" data-sort-class-even="row-even" class="click-to-highlight">
3938
<thead>
4039
<tr>
4140
<th>Code</th>
@@ -66,6 +65,8 @@ <h1>Countries</h1>
6665
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/extensions/handlebars-helpers.min.js"></script>
6766
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/plugins/filter.min.js"></script>
6867
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/plugins/sort.min.js"></script>
68+
<!-- <script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/plugins/clickToHighlight.min.js"></script> -->
69+
<script src="https://dataformsjs.s3-us-west-1.amazonaws.com/js/pre-release/clickToHighlight.min.js"></script>
6970
<script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.6/dist/handlebars.min.js"></script>
7071
</body>
7172
</html>

‎examples/countries-no-spa-js.htm‎

Lines changed: 36 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,19 +23,18 @@ <h1>Countries</h1>
2323
<div class="is-loading"><div>Loading...</div></div>
2424
<div class="has-error"><div class="error">Error</div></div>
2525
<div class="is-loaded flex-col">
26-
<div>
27-
<input
28-
data-filter-selector="table"
29-
data-filter-results-text-selector="h1"
30-
data-filter-results-text-all="{totalCount} Countries"
31-
data-filter-results-text-filtered="Showing {displayCount} of {totalCount} Countries"
32-
placeholder="Enter filter, example 'North America'">
33-
</div>
26+
<input
27+
data-filter-selector="table"
28+
data-filter-results-text-selector="h1"
29+
data-filter-results-text-all="{totalCount} Countries"
30+
data-filter-results-text-filtered="Showing {displayCount} of {totalCount} Countries"
31+
placeholder="Enter filter, example 'North America'">
3432

3533
<p>Click on a column to sort rows based on column values.</p>
3634

3735
<div class="responsive-table">
3836
<data-table
37+
class="click-to-highlight"
3938
data-source="countries"
4039
data-labels="Code, Name, Size (KM), Population, Continent"
4140
data-sort
@@ -51,30 +50,56 @@ <h1>Countries</h1>
5150
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/controls/json-data.min.js"></script>
5251
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/plugins/filter.min.js"></script>
5352
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/plugins/sort.min.js"></script>
53+
<!-- <script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/plugins/clickToHighlight.min.js"></script> -->
54+
<script src="https://dataformsjs.s3-us-west-1.amazonaws.com/js/pre-release/clickToHighlight.min.js"></script>
5455

5556
<!--
56-
Add images to the <table> element using a Custom Plugin with standard JavaScript DOM methods
57+
Add images to the <table> element using a Custom Plugin with standard JavaScript DOM methods.
58+
Additionally format number columns in user's local number format.
5759
-->
5860
<script>
5961
(function() {
6062
'use strict';
6163

62-
app.addPlugin('tableIcons', function(element) {
64+
app.addPlugin('formatTable', function(element) {
6365
// Get table and exit if no data
6466
var table = document.querySelector('table');
6567
if (table === null || table.tBodies === null || table.tBodies.length !== 1) {
6668
return;
6769
}
6870

69-
// Add flags to all rows
71+
// Find Number and Date Columns so the data can be formatted
72+
var cells = table.tHead.rows[0].cells;
73+
var colCount = cells.length;
74+
var updateCols = [];
75+
for (var n = 0; n < colCount; n++) {
76+
switch (cells[n].textContent) {
77+
case 'Size (KM)':
78+
case 'Population':
79+
updateCols.push(n);
80+
break;
81+
}
82+
}
83+
var updateColLen = updateCols.length;
84+
85+
// Process all rows
7086
var tableRows = table.tBodies[0].rows;
7187
var rowCount = tableRows.length;
7288
for (var x = 0; x < rowCount; x++) {
7389
var row = tableRows[x];
90+
91+
// Add flag to row
7492
var iso = row.cells[0].textContent.trim().toLowerCase();
7593
var flag = document.createElement('i');
7694
flag.className = iso + ' flag';
7795
row.cells[1].insertAdjacentElement('afterbegin', flag);
96+
97+
// Format Numbers
98+
for (var y = 0; y < updateColLen; y++) {
99+
var value = row.cells[updateCols[y]].textContent;
100+
row.cells[updateCols[y]].setAttribute('data-value', value); // Value for Sorting
101+
row.cells[updateCols[y]].textContent = Number(value).toLocaleString(); // Value for Display
102+
}
78103
}
79104
});
80105
})();

‎examples/countries-no-spa-preact.htm‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,13 @@ <h1>Countries</h1>
5353
<script type="text/babel">
5454
const format = new Format();
5555

56+
function toogleHighlight(e) {
57+
if (e.target.nodeName === 'A') {
58+
return;
59+
}
60+
e.currentTarget.classList.toggle('highlight');
61+
}
62+
5663
function ShowLoading() {
5764
return <h3 className="loading">Loading...</h3>;
5865
}
@@ -96,7 +103,7 @@ <h1>Countries</h1>
96103
<tbody>
97104
{props.data && props.data.countries && props.data.countries.map(country => {
98105
return (
99-
<tr key={country.iso}>
106+
<tr key={country.iso} onClick={toogleHighlight} className="pointer">
100107
<td>{country.iso}</td>
101108
<td>
102109
<i class={country.iso.toLowerCase() + ' flag'}></i>

‎examples/countries-no-spa-react.htm‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,13 @@ <h1>Countries</h1>
4141
<script type="text/babel">
4242
const format = new Format();
4343

44+
function toogleHighlight(e) {
45+
if (e.target.nodeName === 'A') {
46+
return;
47+
}
48+
e.currentTarget.classList.toggle('highlight');
49+
}
50+
4451
function ShowLoading() {
4552
return <h3 className="loading">Loading...</h3>;
4653
}
@@ -77,7 +84,7 @@ <h1>Countries</h1>
7784
<tbody>
7885
{props.data && props.data.countries && props.data.countries.map(country => {
7986
return (
80-
<tr key={country.iso}>
87+
<tr key={country.iso} onClick={toogleHighlight} className="pointer">
8188
<td>{country.iso}</td>
8289
<td>
8390
<i class={country.iso.toLowerCase() + ' flag'}></i>

‎examples/countries-no-spa-vue.htm‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ <h1>Countries</h1>
4747
<p>Click on a column to sort rows based on column values.</p>
4848

4949
<div class="responsive-table">
50-
<table data-sort data-sort-class-odd="row-odd" data-sort-class-even="row-even">
50+
<table data-sort data-sort-class-odd="row-odd" data-sort-class-even="row-even" class="click-to-highlight">
5151
<thead>
5252
<tr>
5353
<th>Code</th>
@@ -90,5 +90,7 @@ <h1>Countries</h1>
9090
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/extensions/vue-directives.min.js"></script>
9191
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/plugins/filter.min.js"></script>
9292
<script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/plugins/sort.min.js"></script>
93+
<!-- <script src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/plugins/clickToHighlight.min.js"></script> -->
94+
<script src="https://dataformsjs.s3-us-west-1.amazonaws.com/js/pre-release/clickToHighlight.min.js"></script>
9395
</body>
9496
</html>

‎examples/countries-no-spa-web.htm‎

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ <h1>Countries</h1>
2626
<has-error>
2727
<span class="error" data-bind="errorMessage"></span>
2828
</has-error>
29-
<is-loaded>
29+
<is-loaded class="flex-col">
3030
<input
3131
is="input-filter"
3232
filter-selector="table"
@@ -40,6 +40,7 @@ <h1>Countries</h1>
4040
<div class="responsive-table">
4141
<data-table
4242
data-bind="countries"
43+
highlight-class="highlight"
4344
labels="Code, Name, Size (KM), Population, Continent"
4445
table-attr="is=sortable-table,
4546
data-sort-class-odd=row-odd,
@@ -53,7 +54,8 @@ <h1>Countries</h1>
5354
<!-- DataFormsJS Web Components -->
5455
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/web-components/url-hash-router.min.js"></script>
5556
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/web-components/json-data.min.js"></script>
56-
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/web-components/data-table.min.js"></script>
57+
<!-- <script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/web-components/data-table.min.js"></script> -->
58+
<script type="module" src="https://dataformsjs.s3-us-west-1.amazonaws.com/js/pre-release/data-table.min.js"></script>
5759
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/web-components/input-filter.min.js"></script>
5860
<script type="module" src="https://cdn.jsdelivr.net/npm/dataformsjs@4.5.5/js/web-components/sortable-table.min.js"></script>
5961

@@ -72,14 +74,15 @@ <h1>Countries</h1>
7274
// [contentReady === true] can happen on the first page load if the
7375
// data loads very fast - (before <script type="module"> finished loading).
7476
if (jsonData.contentReady) {
75-
showTableImages();
77+
updateTableContent();
7678
} else {
77-
jsonData.addEventListener('contentReady', showTableImages);
79+
jsonData.addEventListener('contentReady', updateTableContent);
7880
}
7981
}
8082

81-
// Add Flag Images to the <table> once it has been rendered.
82-
async function showTableImages() {
83+
// Add Flag Images to the <table> once it has been rendered
84+
// and format Number Columns in User's local number format.
85+
async function updateTableContent() {
8386
// Wait till all web components are setup
8487
await componentsAreSetup();
8588

@@ -89,15 +92,34 @@ <h1>Countries</h1>
8992
return;
9093
}
9194

92-
// Add flags to all rows
93-
const tableRows = table.tBodies[0].rows;
94-
const rowCount = tableRows.length;
95-
for (let x = 0; x < rowCount; x++) {
96-
const row = tableRows[x];
95+
// Find Number and Date Columns so the data can be formatted
96+
const updateCols = [];
97+
const cells = table.tHead.rows[0].cells;
98+
const colCount = cells.length;
99+
for (let x = 0; x < colCount; x++) {
100+
switch (cells[x].textContent) {
101+
case 'Size (KM)':
102+
case 'Population':
103+
updateCols.push(x);
104+
break;
105+
}
106+
}
107+
const updateColLen = updateCols.length;
108+
109+
// Process all rows
110+
for (const row of table.tBodies[0].rows) {
111+
// Add flag to row
97112
const iso = row.cells[0].textContent.trim().toLowerCase();
98113
const flag = document.createElement('i');
99114
flag.className = iso + ' flag';
100115
row.cells[1].insertAdjacentElement('afterbegin', flag);
116+
117+
// Format Numbers
118+
for (let y = 0; y < updateColLen; y++) {
119+
const numValue = row.cells[updateCols[y]].textContent;
120+
row.cells[updateCols[y]].setAttribute('data-value', numValue); // Value for Sorting
121+
row.cells[updateCols[y]].textContent = Number(numValue).toLocaleString(); // Value for Display
122+
}
101123
}
102124
}
103125
</script>

‎examples/css/binary-classification.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ ul {
9595
text-align: left;
9696
max-width: 800px;
9797
}
98-
.links { overflow-x: auto; }
98+
.links { overflow-x: auto; white-space: nowrap; }
9999
html[lang='ar'] ul { text-align:right; }
100100

101101
li { line-height: 1.4em; margin-bottom: calc(var(--padding) / 2); }
@@ -105,6 +105,7 @@ td, th { padding:10px 20px; border:1px solid #ababab; }
105105
thead tr,
106106
tbody tr:nth-child(odd) { background-color:#fff; }
107107
tbody tr:nth-child(even) { background-color:#f7f7f7; }
108+
tbody tr.highlight { background-color: yellow; }
108109

109110
@media (min-width: 1150px) {
110111
table { margin:var(--padding); }

0 commit comments

Comments
 (0)