diff --git a/README.md b/README.md index cc311bf..c572ced 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,80 @@ # Isomorphic-Table-Cards · [![GitHub license](https://img.shields.io/github/license/evoluteur/meet-the-fans)](https://github.com/evoluteur/isomorphic-table-cards/blob/master/LICENSE) -Isomorphic Table and Cards views with animated transitions on sorting, changing view, and browser resizing. +Isomorphic-Table-Cards is a Javascript class for Table and Cards views with animated transitions on sorting, view toggle, and browser resizing. Check out the [live demo](https://evoluteur.github.io/isomorphic-table-cards/index.html). [![screenshot](https://raw.github.com/evoluteur/isomorphic-table-cards/master/screenshot.gif)](https://evoluteur.github.io/isomorphic-table-cards/index.html) +## Usage + The [code](https://github.com/evoluteur/isomorphic-table-cards) is just Vanilla Javascript, CSS, and HTML. -It could also be done [using D3.js](https://evoluteur.github.io/d3-table-cards/). +### Importing the code + +In the "head" section your html page, import the Javascript and CSS: + +```html + + +``` + +### Config options + +Isomorphic-Table-Cards is a Javascript class with configuration options for re-use. + +**data**: data to display (JSON array). + +**selector**: CSS selector for the root element which will hold the cards or table. + +**rowHeight**: Row height (in pixels). + +**cardHeight**: Card height (in pixels). + +**cardWidth**: Card width (in pixels). + +**itemTemplate**: HTML template to display an item. It is the same for both table and cards views, only the CSS changes. + +**sort**: Function for sorting the data (arguments: data, key, direction). + +### Methods + +**render()**: Initial rendering method. + +**redraw(style)**: Redraw method (style="table" or "cards"). + +**sort(key)**: Sort method (key=data attribute to sort by). + +### Example +```javascript +const tableCards = new IsomorphicTableCards({ + data: , + selector: ".holder", + // row and card dimensions + rowHeight: 30, + cardHeight: 100, + cardWidth: 250, + // item template + itemTemplate: d => `
+
+ ${d.name} +
+
+ ${d.descriptionn} +
+
+ `, + // sort function + sort: (data, key, direction) => data.sort((a, b) => direction*a[key].localeCompare(b[key])) } +}); + +tableCards.render() +``` + +The same animations can also be done [using D3.js](https://evoluteur.github.io/d3-table-cards/). + +## License + +Isomorphic-Table-Cards is open source at [GitHub](https://github.com/evoluteur/isomorphic-table-cards) with MIT license. (c) 2024 [Olivier Giulieri](https://evoluteur.github.io/). diff --git a/index.html b/index.html index 0579853..d375239 100755 --- a/index.html +++ b/index.html @@ -79,32 +79,34 @@

let itc const render = () => { itc = new IsomorphicTableCards({ - // row and card dimensions - rowHeight: 31, - cardHeight: 94, - cardWidth: 210, - // item template - itemTemplate: d => `
-
- ${d.name} -
-
- ${d.spirit} -
-
- `, - // sort functions - sort: (data, key, direction) => { - if(key=='chakra'){ - return data.sort(direction>0 ? - (a, b) => (a.chakra+a.name).localeCompare(b.chakra+b.name) - : - (a, b) => ((8-a.chakra)+a.name).localeCompare((8-b.chakra)+b.name) - ) - }else{ - return data.sort((a, b) => direction*a.name.localeCompare(b.name)) - } - } + data, + selector: ".holder", + // row and card dimensions + rowHeight: 31, + cardHeight: 94, + cardWidth: 210, + // item template + itemTemplate: d => `
+
+ ${d.name} +
+
+ ${d.spirit} +
+
+ `, + // sort functions + sort: (data, key, direction) => { + if(key=='chakra'){ + return data.sort(direction>0 ? + (a, b) => (a.chakra+a.name).localeCompare(b.chakra+b.name) + : + (a, b) => ((8-a.chakra)+a.name).localeCompare((8-b.chakra)+b.name) + ) + }else{ + return data.sort((a, b) => direction*a.name.localeCompare(b.name)) + } + } }); itc.render() } diff --git a/js/data-gemstones.js b/js/data-gemstones.js index 473cf4b..a3dc02a 100644 --- a/js/data-gemstones.js +++ b/js/data-gemstones.js @@ -4,7 +4,7 @@ This data is not public domain! */ -let data = [ +const data = [ { name: "Amazonite", chakra: 4, diff --git a/js/isomorphic-table-cards.js b/js/isomorphic-table-cards.js index 2a5a8ac..a15dd21 100755 --- a/js/isomorphic-table-cards.js +++ b/js/isomorphic-table-cards.js @@ -6,7 +6,6 @@ let cardsPerRow = 3; class IsomorphicTableCards { - selector = ".holder"; holder = null; curSortField = "chakra"; curSortDirection = 1; @@ -17,10 +16,12 @@ class IsomorphicTableCards { } render() { - this.holder = document.querySelector(this.selector); + this.holder = document.querySelector(this.config.selector); this.node = document.createElement("div"); this.node.className = this.curStyle; - this.node.innerHTML = data.map(this.config.itemTemplate).join(""); + this.node.innerHTML = this.config.data + .map(this.config.itemTemplate) + .join(""); this.holder.appendChild(this.node); this.layout(false, true); setTimeout(() => this.layout(true, false), 0); @@ -37,7 +38,7 @@ class IsomorphicTableCards { sort(key) { const csDirection = key === this.curSortField ? -this.curSortDirection : 1; this.curSortDirection = csDirection; - data = this.config.sort(data, key, csDirection); + this.config.data = this.config.sort(this.config.data, key, csDirection); this.curSortField = key; this.layout(true); } @@ -53,7 +54,7 @@ class IsomorphicTableCards { ? (idx) => (idx % cardsPerRow) * cardWidth + "px" : () => 0; const id2idx = {}; - data.forEach((d, idx) => (id2idx[d.name] = idx)); + this.config.data.forEach((d, idx) => (id2idx[d.name] = idx)); if (!firstTime) { this.holder.querySelectorAll(".item").forEach((e) => { const idx = id2idx[e.id]; @@ -68,8 +69,8 @@ class IsomorphicTableCards { const totalHeight = 20 + (this.curStyle === "cards" - ? Math.ceil(data.length / cardsPerRow) * cardHeight - : 40 + data.length * rowHeight); + ? Math.ceil(this.config.data.length / cardsPerRow) * cardHeight + : 40 + this.config.data.length * rowHeight); this.holder.style.height = totalHeight + "px"; } } diff --git a/package.json b/package.json index e6a6a28..8b2c305 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "isomorphic-table-cards", - "version": "1.0.0", + "version": "1.1.0", "description": "Isomorphic Table/Cards views with animated transitions.", "author": "Olivier Giulieri (https://evoluteur.github.io/)", "copyright": "(c) 2024 Olivier Giulieri",