[feat] Toast Message

src/body-renderer.js

@@ -87,6 +87,14 @@ export default class BodyRenderer {
         this.clusterize.append(data);
     }
 
+    showToastMessage(message) {
+        this.instance.toastMessage.innerHTML = `<span>${message}</span>`;
+    }
+
+    clearToastMessage() {
+        this.instance.toastMessage.innerHTML = '';
+    }
+
     getDataForClusterize(rows) {
         return rows.map((row) => this.rowmanager.getRowHTML(row, row.meta));
     }

src/datatable.js

@@ -52,23 +52,25 @@ class DataTable {
 
     prepareDom() {
         this.wrapper.innerHTML = `
-      <div class="data-table">
-        <table class="data-table-header">
-        </table>
-        <div class="body-scrollable">
-        </div>
-        <div class="freeze-container">
-          <span>${this.options.freezeMessage}</span>
-        </div>
-        <div class="data-table-footer">
-        </div>
-      </div>
-    `;
+            <div class="data-table">
+                <table class="data-table-header">
+                </table>
+                <div class="body-scrollable">
+                </div>
+                <div class="freeze-container">
+                <span>${this.options.freezeMessage}</span>
+                </div>
+                <div class="data-table-footer">
+                </div>
+                <div class="toast-message"></div>
+            </div>
+        `;
 
         this.datatableWrapper = $('.data-table', this.wrapper);
         this.header = $('.data-table-header', this.wrapper);
         this.bodyScrollable = $('.body-scrollable', this.wrapper);
         this.freezeContainer = $('.freeze-container', this.wrapper);
+        this.toastMessage = $('.toast-message', this.wrapper);
     }
 
     refresh(data) {
@@ -108,6 +110,14 @@ class DataTable {
         this.style.setDimensions();
     }
 
+    showToastMessage(message) {
+        this.bodyRenderer.showToastMessage(message);
+    }
+
+    clearToastMessage() {
+        this.bodyRenderer.clearToastMessage();
+    }
+
     getColumn(colIndex) {
         return this.datamanager.getColumn(colIndex);
     }

src/rowmanager.js

@@ -12,7 +12,8 @@ export default class RowManager {
         linkProperties(this, this.instance, [
             'options',
             'wrapper',
-            'bodyScrollable'
+            'bodyScrollable',
+            'bodyRenderer'
         ]);
 
         this.bindEvents();
@@ -71,16 +72,15 @@ export default class RowManager {
             return [];
         }
 
-        return this.checkMap
-            .map((c, rowIndex) => {
-                if (c) {
-                    return rowIndex;
-                }
-                return null;
-            })
-            .filter(c => {
-                return c !== null || c !== undefined;
-            });
+        let out = [];
+        for (let rowIndex in this.checkMap) {
+            const checked = this.checkMap[rowIndex];
+            if (checked === 1) {
+                out.push(rowIndex)
+            }
+        }
+
+        return out;
     }
 
     highlightCheckedRows() {
@@ -101,6 +101,7 @@ export default class RowManager {
             });
         // highlight row
         this.highlightRow(rowIndex, toggle);
+        this.showCheckStatus();
     }
 
     checkAll(toggle) {
@@ -119,6 +120,16 @@ export default class RowManager {
             });
         // highlight all
         this.highlightAll(toggle);
+        this.showCheckStatus();
+    }
+
+    showCheckStatus() {
+        const checkedRows = this.getCheckedRows();
+        if (checkedRows.length > 0) {
+            this.bodyRenderer.showToastMessage(checkedRows.length + ' rows selected');
+        } else {
+            this.bodyRenderer.clearToastMessage();
+        }
     }
 
     highlightRow(rowIndex, toggle = true) {

src/style.css

@@ -7,6 +7,7 @@
 	--light-bg: #f5f7fa;
 	--light-red: #FD8B8B;
 	--text-color: #000000;
+	--text-light: #dfe2e5;
 
 	--spacer-1: 0.25rem;
 	--spacer-2: 0.5rem;
@@ -41,7 +42,6 @@
 	}
 
 	/* styling */
-	width: 100%;
 	position: relative;
 	overflow: auto;
 
@@ -78,19 +78,24 @@
 		}
 	}
 
-	.trash-container {
-		position: absolute;
-		bottom: 0;
-		left: 30%;
-		right: 30%;
-		height: 70px;
-		background: palevioletred;
-		opacity: 0.5;
-	}
-
 	.hide {
 		display: none;
 	}
+
+	.toast-message {
+		position: absolute;
+		bottom: var(--spacer-3);
+		left: 50%;
+		transform: translateX(-50%);
+
+		span {
+			display: inline-block;
+			background-color: rgba(0, 0, 0, 0.8);
+			color: var(--text-light);
+			border-radius: 3px;
+			padding: var(--spacer-2) var(--spacer-3);
+		}
+	}
 }
 
 .body-scrollable {
@@ -272,4 +277,4 @@
 
 body.data-table-resize {
 	cursor: col-resize;
-}
+}