Skip to content

Commit 26c3791

Browse files
ConradSollittConradSollitt
committed
🚀 Dev Updates for Next Release
1 parent 11dec14 commit 26c3791

File tree

11 files changed

+92
-38
lines changed

11 files changed

+92
-38
lines changed

‎docs/to-do-list.txt‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -88,23 +88,10 @@ TODO List
8888
- Likely create a new function in [utils.js] `compileJsTemplate()` that will be shared and allow
8989
for caching of the template functions similar to the new framework file: [dataformsjs\js\extensions\jsTemplate.js]
9090
- Also make any related updates needed in the new <data-view>
91+
- This issue is avoided when using <script type="text/x-template"> so add comments in docs on it (or code comments at least)
9192
- Review all comments in [js/web-components/polyfill.js] and handle all issues.
9293
The file is mostly complete and properly working but still in active development.
9394
- New demo page to test all features of the new [utils-format.js] file
94-
- Consider adding multiple optional template options to <data-table>
95-
- If only <template> then use for row items (current)
96-
- Also support:
97-
<template data-header>
98-
- In the places demo this can be use to right align text on number columns in the header
99-
<template data-item>
100-
<template data-footer>
101-
- How to do this using the built-in <slot>? See if it makes sense using <slot>
102-
* Instead of this (most likely for now) another option can be to use a new attribute:
103-
col-class="{index|name}={class-names}, {index|name}={class-names}"
104-
col-class="0=align-right, 2=align-right col-class"
105-
col-class="Size (KM)=align-right, Population=align-right"
106-
Likely start with this version as it adds the smallest amount of code and works
107-
well with the existing demos.
10895
- At a minimum the new script Polyfill scripts needs to handle IE 11, older Safari (example iOS 9), UC Browser.
10996
iOS 9 support because older devices such as iPad 2 can't upgrade past it and iPhone 6
11097
phones that are not upgraded still use it.

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,7 @@ <h1>Countries</h1>
4747
data-bind="countries"
4848
highlight-class="highlight"
4949
labels="Code, Name, Size (KM), Population, Continent"
50+
col-class="Size (KM)=align-right, Population=align-right"
5051
table-attr="is=sortable-table,
5152
data-sort-class-odd=row-odd,
5253
data-sort-class-even=row-even">

‎examples/html/image-home-web.htm‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ <h1 data-i18n="Image Prediction Demo"></h1>
3636
only text strings using a JavaScript Tagged Template Literal function or a Polyfill.
3737
3838
This template uses ES5 so it works with all Browsers and can be handled when using [polyfill.js].
39-
For ES5 support nested `${js}` expresssions are not supported.
39+
For ES5 support nested `${js}` expressions are not supported.
4040
-->
4141
<template id="image">
4242
<li>

‎examples/places-demo-web.htm‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,7 @@ <h1 data-i18n="Countries"></h1>
118118
highlight-class="highlight"
119119
labels="Code, Name, Size (KM), Population, Continent"
120120
data-i18n-attr="labels"
121+
col-class="2=align-right, 3=align-right"
121122
table-attr="is=sortable-table,
122123
data-sort-class-odd=row-odd,
123124
data-sort-class-even=row-even">
@@ -140,12 +141,18 @@ <h1 data-i18n="Countries"></h1>
140141
contains links by using the [col-link-template] attribute however
141142
it will not show the flag icons or format numbers or use the selected
142143
i18n Locale.
144+
145+
When using [col-link-template] multiple fields can be linked using
146+
[col-link-fields] as shown below. By default links will be added to
147+
the first column. The values for [col-link-fields] need to be the
148+
field/property name and not the label.
143149
-->
144150
<!--
145151
<data-table
146152
data-bind="countries"
147153
highlight-class="highlight"
148-
col-link-template="#/regions/:iso"
154+
col-link-template="#/en/regions/:iso"
155+
col-link-fields="iso, country"
149156
labels="Code, Name, Size (KM), Population, Continent"
150157
table-attr="is=sortable-table,
151158
data-sort-class-odd=row-odd,

‎js/controls/data-table.js‎

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,10 @@
4242
errorClass: null,
4343
defaultErrorStyle: 'color:white; background-color:red; padding:0.5rem 1rem; margin:.5rem;',
4444
highlightClass: null,
45+
tableAttr: null,
46+
colClass: null,
47+
colLinkTemplate: null,
48+
colLinkFields: null,
4549
},
4650

4751
/**
@@ -153,9 +157,8 @@
153157
// Table Header
154158
var html = [];
155159
var tableHtml = '<table';
156-
var tableAttr = element.getAttribute('data-table-attr');
157-
if (tableAttr) {
158-
tableAttr = tableAttr.split(',').map(function(s) { return s.trim(); });
160+
if (this.tableAttr) {
161+
var tableAttr = this.tableAttr.split(',').map(function(s) { return s.trim(); });
159162
for (n = 0, m = tableAttr.length; n < m; n++) {
160163
var attr = tableAttr[n];
161164
var pos = attr.indexOf('=');
@@ -175,8 +178,35 @@
175178
}
176179
html.push(tableHtml + '><thead><tr>');
177180
row = [];
178-
for (n = 0, m = labels.length; n < m; n++) {
179-
row.push('<th>' + app.escapeHtml(labels[n]) + '</th>');
181+
if (this.colClass) {
182+
var classList = this.colClass.split(',').map(function(s) { return s.trim(); });
183+
var classIndex = {};
184+
classList.forEach(function(item) {
185+
var pos = item.indexOf('=');
186+
if (pos > 0) {
187+
var col = item.substr(0, pos);
188+
var className = item.substr(pos+1);
189+
classIndex[col] = className;
190+
}
191+
});
192+
for (n = 0, m = labels.length; n < m; n++) {
193+
var label = labels[n];
194+
var className = null;
195+
if (classIndex[n.toString()] !== undefined) {
196+
className = classIndex[n.toString()];
197+
} else if (classIndex[label] !== undefined) {
198+
className = classIndex[label];
199+
}
200+
if (className) {
201+
row.push('<th class="' + app.escapeHtml(className) + '">' + app.escapeHtml(labels[n]) + '</th>');
202+
} else {
203+
row.push('<th>' + app.escapeHtml(labels[n]) + '</th>');
204+
}
205+
}
206+
} else {
207+
for (n = 0, m = labels.length; n < m; n++) {
208+
row.push('<th>' + app.escapeHtml(labels[n]) + '</th>');
209+
}
180210
}
181211
html.push(row.join(''));
182212
html.push('</tr></thead>');
@@ -213,11 +243,11 @@
213243
}
214244
} else {
215245
// Will the table use a link template?
216-
var linkTmpl = element.getAttribute('data-col-link-template');
217-
var linkFields = element.getAttribute('data-col-link-fields');
246+
var linkTmpl = this.colLinkTemplate;
247+
var linkFields = null;
218248
if (linkTmpl) {
219-
if (linkFields) {
220-
linkFields = linkFields.split(',').map(function(s) { return s.trim(); });
249+
if (this.colLinkFields) {
250+
linkFields = this.colLinkFields.split(',').map(function(s) { return s.trim(); });
221251
} else {
222252
linkFields = [columns[0]];
223253
}
@@ -247,7 +277,7 @@
247277
addTable(html.join(''));
248278

249279
// Allow user to highlight rows by clicking on them using [clickToHighlight] Plugin?
250-
if (element.getAttribute('data-highlight-class')) {
280+
if (this.highlightClass) {
251281
element.querySelector('table').classList.add('click-to-highlight');
252282
}
253283
},

‎js/controls/data-table.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎js/web-components/data-list.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,14 +145,14 @@ class DataList extends HTMLElement {
145145
// Render each item in the template. A new function is dynamically created that simply
146146
// renders the contents of the template as a JavaScript template literal (template string).
147147
// The Tagged Template Literal function `render()` from [utils.js] is used to safely escape
148-
// the variables for HTML encoding. The variable `index` is made availble to the template
148+
// the variables for HTML encoding. The variable `index` is made available to the template
149149
// and it can be safely overwritten by the list item due to variable scoping during rendering.
150150
try {
151151
// Get Template Contents
152152
let tmplHtml = template.innerHTML;
153153

154154
// By default content to render is escaped using the `render` Tagged Template Literal function.
155-
// If not then then template is likley mixing more advanced JavaScript with HTML so replace
155+
// If not then then template is likely mixing more advanced JavaScript with HTML so replace
156156
// certain HTML escape characters.
157157
const renderFn = (this.getAttribute('template-returns-html') === null ? 'render' : '');
158158
if (!renderFn) {

‎js/web-components/data-table.js‎

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ class DataTable extends HTMLElement {
5858
}
5959

6060
static get observedAttributes() {
61-
return ['col-link-template', 'col-link-fields', 'columns', 'labels', 'table-attr', 'highlight-class'];
61+
return ['col-link-template', 'col-link-fields', 'col-class', 'columns', 'labels', 'table-attr', 'highlight-class'];
6262
}
6363

6464
attributeChangedCallback(attr, oldVal /* , newVal */) {
@@ -68,6 +68,7 @@ class DataTable extends HTMLElement {
6868
switch (attr) {
6969
case 'col-link-template':
7070
case 'col-link-fields':
71+
case 'col-class':
7172
case 'columns':
7273
case 'labels':
7374
case 'table-attr':
@@ -201,10 +202,38 @@ class DataTable extends HTMLElement {
201202
}
202203
}
203204
}
205+
const colClass = this.getAttribute('col-class');
204206
const html = [];
205207
html.push(`${tableHtml}><thead><tr>`);
206-
for (const label of labels) {
207-
html.push(render`<th>${label}</th>`);
208+
if (colClass) {
209+
const classList = colClass.split(',').map(s => s.trim());
210+
const classIndex = {};
211+
for (const item of classList) {
212+
const pos = item.indexOf('=');
213+
if (pos > 0) {
214+
const col = item.substr(0, pos);
215+
const className = item.substr(pos+1);
216+
classIndex[col] = className;
217+
}
218+
}
219+
for (let n = 0, m = labels.length; n < m; n++) {
220+
const label = labels[n];
221+
let className;
222+
if (classIndex[n.toString()] !== undefined) {
223+
className = classIndex[n.toString()];
224+
} else if (classIndex[label] !== undefined) {
225+
className = classIndex[label];
226+
}
227+
if (className) {
228+
html.push(render`<th class="${className}">${label}</th>`);
229+
} else {
230+
html.push(render`<th>${label}</th>`);
231+
}
232+
}
233+
} else {
234+
for (const label of labels) {
235+
html.push(render`<th>${label}</th>`);
236+
}
208237
}
209238
html.push('</tr></thead>');
210239

@@ -214,7 +243,7 @@ class DataTable extends HTMLElement {
214243
// Render each item in the template. A new function is dynamically created that simply
215244
// renders the contents of the template as a JavaScript template literal (template string).
216245
// The Tagged Template Literal function `render()` from [utils.js] is used to safely escape
217-
// the variables for HTML encoding. The variable `index` is made availble to the template
246+
// the variables for HTML encoding. The variable `index` is made available to the template
218247
// and it can be safely overwritten by the list item due to variable scoping during rendering.
219248
try {
220249
const tmpl = new Function('item', 'index', 'render', 'format', 'with(item){return render`' + template.innerHTML + '`}');

0 commit comments

Comments
 (0)