Skip to content

Commit 971192e

Browse files
djthorpedjthorpe
committed
Updated
1 parent ca5fbfb commit 971192e

File tree

7 files changed

+120
-26
lines changed

7 files changed

+120
-26
lines changed

‎README.md‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,11 @@ npm install
99
Development mode,
1010

1111
```bash
12-
npm run dev
12+
npm run dev
13+
```
14+
15+
Build,
16+
17+
```bash
18+
npm run build
19+
```

‎example/table/index.html‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,23 @@
1919

2020
<body>
2121
<js-canvas>
22-
<js-nav vertical>
22+
<js-nav>
2323
<js-navitem>Home</js-navitem>
2424
</js-nav>
2525
<js-content class="content-scroll">
2626
<js-table id="items-table" data="#items-data">
27-
<js-tablehead body="#items-table"></js-tablehead>
28-
<js-tablecol name="author">Author</js-tablecol>
29-
<js-tablecol name="pubdate">Date</js-tablecol>
30-
<js-tablecol name="title">Title</js-tablecol>
31-
<js-tablecol name="desc">Description</js-tablecol>
32-
<js-tablecol name="media">Media</js-tablecol>
27+
<!-- Table columns -->
28+
<js-itemcol name="title"></js-itemcol>
29+
30+
<!-- Hide other columns by default -->
31+
<js-tablecol hidden></js-tablecol>
3332
</js-table>
3433
</js-content>
35-
<!-- data source and model for items -->
36-
<js-provider id="items-provider" path="http://cm5.lan:8000/feed/v1/document"></js-provider>
37-
<js-array id="items-data" provider="#items-provider" select="body"></js-array>
34+
<js-nav>
35+
<!-- data source and model for items -->
36+
<js-provider id="items-provider" path="http://cm5.lan:8000/feed/v1/document?limit=50"></js-provider>
37+
<js-array id="items-data" provider="#items-provider" select="body"></js-array>
38+
</js-nav>
3839
</js-canvas>
3940
</body>
4041

‎example/table/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
// This file defines all the styles and elements used for the web components
22
import '../../src/index';
3+
import './item.js'
34

45
/* Code to reload in the esbuild serve development environment */
56
window.addEventListener('load', () => {

‎example/table/item.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { html } from 'lit';
2+
import { TableColumnElement } from '../../src/element/TableColumnElement';
3+
4+
export class ItemColumn extends TableColumnElement {
5+
static get localName() {
6+
return 'js-itemcol';
7+
}
8+
9+
// eslint-disable-next-line class-methods-use-this
10+
#text(value, key) {
11+
return value instanceof Object ? value[key] : value;
12+
}
13+
14+
render(value, key) {
15+
const cell = value instanceof Object ? value[key] : value;
16+
switch (key) {
17+
case 'title':
18+
return html`
19+
<div style="padding: 5px;">
20+
<js-tag size="small">${this.#text(value, 'author')}</js-tag>
21+
<h4>${this.#text(value, 'title')}</h4>
22+
<small><strong>${this.#text(value, 'pubdate')}</strong></small>
23+
<p>${this.#text(value, 'desc')}</p>
24+
${value.media ? this.#renderAudio(value.media[0]) : ''}
25+
</div>
26+
`;
27+
default:
28+
}
29+
return html`${cell}`;
30+
}
31+
32+
// eslint-disable-next-line class-methods-use-this
33+
#renderAudio(media) {
34+
return html`
35+
<audio controls>
36+
<source src="${media.url}" type="${media.type}">
37+
Your browser does not support the audio element.
38+
</audio>
39+
`;
40+
}
41+
}
42+
43+
customElements.define(ItemColumn.localName, ItemColumn); // js-itemcol

‎src/element/TableColumnElement.js‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { LitElement } from "lit";
1+
import { LitElement, html } from 'lit';
22

33
/**
44
* @class TableColumnElement
55
*
66
* This class provides a table column element, for rendering
77
* a table cell. It also provides properties for the column.
8+
* The name property is used to identify the column in the
9+
* table, and the hidden property is used to hide the column.
810
*
911
* @example
1012
* <js-tablecol name="id">ID</js-tablecol>
@@ -17,6 +19,25 @@ export class TableColumnElement extends LitElement {
1719
static get properties() {
1820
return {
1921
name: { type: String, reflect: true },
22+
hidden: { type: Boolean, reflect: true },
2023
};
2124
}
25+
26+
/**
27+
* Get the column title.
28+
*
29+
* @returns {string}
30+
*/
31+
get title() {
32+
return this.textContent;
33+
}
34+
35+
// eslint-disable-next-line class-methods-use-this
36+
render(value, key) {
37+
const cell = value instanceof Object ? value[key] : value;
38+
if (cell instanceof Object) {
39+
return html`<code>${JSON.stringify(cell)}</code>`;
40+
}
41+
return html`${cell}`;
42+
}
2243
}

‎src/element/TableElement.js‎

Lines changed: 34 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,18 @@ import { TableColumnElement } from './TableColumnElement';
1313
* <js-table data="#data-source-id"><!-- .... --></js-table>
1414
*/
1515
export class TableElement extends LitElement {
16+
// Data source node
1617
#data = null;
1718

19+
// Table header node
1820
#head = null;
1921

22+
// Table column renderers
23+
#renderer = {};
24+
25+
// Default renderer
26+
#default;
27+
2028
static get localName() {
2129
return 'js-table';
2230
}
@@ -98,13 +106,19 @@ export class TableElement extends LitElement {
98106
const elements = this.childNodes;
99107
for (let i = 0; i < elements.length; i += 1) {
100108
if (elements[i] instanceof TableColumnElement) {
109+
// Column name and title
101110
const name = elements[i].getAttribute('name');
111+
// If the name is not empty, add it to the column list
102112
if (name && name !== '') {
103113
// Append the column to the list
104114
if (this.columns.indexOf(name) === -1) {
105115
this.columns.push(elements[i].getAttribute('name'));
106116
}
107-
// TODO: Set this column as the renderer
117+
// Set column renderer
118+
this.#renderer[name] = elements[i];
119+
} else {
120+
// Set the default renderer
121+
this.#default = elements[i];
108122
}
109123
}
110124
}
@@ -127,14 +141,28 @@ export class TableElement extends LitElement {
127141
return rows;
128142
}
129143

144+
#rendererFor(key) {
145+
const renderer = this.#renderer[key];
146+
if (renderer) {
147+
return renderer;
148+
}
149+
return this.#default;
150+
}
151+
152+
#hidden(key) {
153+
return this.#rendererFor(key).hidden;
154+
}
155+
130156
#renderColumns(row) {
131157
const cells = [];
132158
if (row instanceof Object) {
133159
Object.keys(row).forEach((key) => {
134-
if (this.columns.indexOf(key) === -1) {
135-
this.columns.push(key);
160+
if (!this.#hidden(key)) {
161+
if (this.columns.indexOf(key) === -1) {
162+
this.columns.push(key);
163+
}
164+
cells[this.columns.indexOf(key)] = html`<td><div class="cell">${this.#renderCell(row, key)}</div></td>`;
136165
}
137-
cells[this.columns.indexOf(key)] = html`<td><div class="cell">${this.#renderCell(row[key])}</div></td>`;
138166
});
139167
} else {
140168
this.columns.push('value');
@@ -152,14 +180,7 @@ export class TableElement extends LitElement {
152180
return cells;
153181
}
154182

155-
// eslint-disable-next-line class-methods-use-this
156-
#renderCell(cell) {
157-
if (cell === null || cell === undefined || cell === '') {
158-
return html`nil`;
159-
}
160-
if (cell instanceof Object) {
161-
return html`<code>${JSON.stringify(cell)}</code>`;
162-
}
163-
return html`${cell}`;
183+
#renderCell(value, key) {
184+
return this.#rendererFor(key).render(value, key);
164185
}
165186
}

‎src/tokens.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
--success-color: #285;
2929
--warning-color: #f72;
3030
--error-color: #f55;
31-
--light-color: #eee;
31+
--light-color: #f9f9f9;
3232
--white-color: #fff;
3333
--dark-color: #333;
3434
--black-color: #000;

0 commit comments

Comments
 (0)