Skip to content

Instantly share code, notes, and snippets.

<body>
<p class="text-center">
<a href="/">Index</a> - <a href="/info">Info</a>
</p>
</body>
<tbody>
${!this.data.length ? wire()`<tr><td colspan="${this.columns.length}" class="text-center">Loading...</td></tr>` : ""}
${this.data.map(item => wire(item, `:row${item.Id}`)`
<tr>
${this.columns.map(column => this._renderCell(item, column))}
</tr>
`)}
</tbody>
import HyperHTMLElement from 'hyperhtml-element/esm';
import Column from "./Column";
const {wire, bind} = HyperHTMLElement;
//describe the element
class HyperInput extends HyperHTMLElement {
static get observedAttributes() {
return [];
}
get defaultState() {
function update() {
fetch(`https://min-api.cryptocompare.com/data/top/totalvol?limit=10&tsym=USD`).then(b => b.json()).then(data => {
table.data = data.Data.map(coin => coin.CoinInfo);
});
}
document.querySelector("button").addEventListener("click", update);
update();
<tfoot>
<tr>
<th class="text-right" colspan="${this.columns.length}">
Top ten from: ${{dateTime: this._last}}
</th>
</tr>
</tfoot>
hyper.define('dateTime', (date) => {
let formatted = '',
newdate = date;
if (date) {
if (typeof newdate.getMonth !== 'function') {
newdate = new Date(date);
}
if (typeof newdate.getMonth === 'function') {
formatted = `
${newdate.getMonth() + 1}/${newdate.getDate()}/${newdate.getFullYear()} ${newdate.getHours()}:${newdate.getMinutes()}:${newdate.getSeconds()}
set data(data) {
this._data = data;
if (this.state.sorted) {
this.sort(this.state.sorted, this.state.asc);
}
this.render();
}
sort(attr, asc) {
//simple sort, reverse the sort if asc is true
this.data.sort((a, b) => (''+a[attr]).localeCompare(''+b[attr]) * (asc ? 1 : -1));
_renderCell(item, column) {
const obj = {};
if (column.attribute === "data") {
return wire(item, `:col${item.Id}`)`${{
any: fetch(`https://min-api.cryptocompare.com/data/pricemultifull?fsyms=${item.Name}&tsyms=${this.coin}`).then(b => b.json()).then(data => {
return wire()`${data.DISPLAY ? data.DISPLAY[item.Name][this.coin].PRICE : "-"}`;
}),
placeholder: wire()`Loading...`
}}`;
} else {
<!doctype html>
<html>
<head>
<script src="https://unpkg.com/document-register-element"></script>
</head>
<body>
<div id="app" class="container-fluid">
<div class="row">
{
"presets": [
["@babel/env",
{
"targets": {
"firefox": "52"
}
}
]
],