More config options.

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
+<link href="css/isomorphic-table-cards.css" rel="stylesheet" />
+<script src="js/isomorphic-table-cards.js" charset="utf-8"></script>
+```
+
+### 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: <yourData>,
+  selector: ".holder",
+  // row and card dimensions
+  rowHeight: 30,
+  cardHeight: 100,
+  cardWidth: 250,
+  // item template
+  itemTemplate: d => `<div class="item" id="${d.name}">
+      <div class="c1">
+        ${d.name}
+      </div>
+      <div class="c2">
+        ${d.descriptionn}
+      </div>
+    </div>
+  `,
+  // 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/).

index.html

@@ -79,32 +79,34 @@ <h1>
       let itc
       const render = () => {
       	itc = new IsomorphicTableCards({
-      		// row and card dimensions
-      		rowHeight: 31,
-      		cardHeight: 94,
-      		cardWidth: 210,
-      		// item template
-      		itemTemplate: d => `<div class="item chakra${d.chakra}" id="${d.name}">
-      				<div class="c1">
-      					${d.name}
-      				</div>
-      				<div class="c2">
-      					${d.spirit}
-      				</div>
-      			</div>
-      		`,
-      		// 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 => `<div class="item chakra${d.chakra}" id="${d.name}">
+              <div class="c1">
+                ${d.name}
+              </div>
+              <div class="c2">
+                ${d.spirit}
+              </div>
+            </div>
+          `,
+          // 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()
       }

js/data-gemstones.js

@@ -4,7 +4,7 @@
   This data is not public domain!
 */
 
-let data = [
+const data = [
   {
     name: "Amazonite",
     chakra: 4,

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";
     }
   }

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",