add old message for empty results to cards list.

javascript/clusterize.js

@@ -19,6 +19,8 @@ class Clusterize {
     content_elem = null;
     scroll_id = null;
     content_id = null;
+    no_data_class_default = "clusterize-no-data";
+    loading_class_default = "clusterize-loading";
     options = {
         rows_in_block: 50,
         cols_in_block: 1,
@@ -26,12 +28,15 @@ class Clusterize {
         tag: null,
         id_attr: "data-div-id",
         show_no_data_row: true,
-        no_data_class: "clusterize-no-data",
-        no_data_text: "No data",
-        loading_data_text: "Loading...",
+        no_data_class: this.no_data_class_default,
+        loading_class: this.loading_class_default,
         keep_parity: true,
         callbacks: {},
     };
+    loading_html_default = `<div class="${this.loading_class_default}">Loading...</div>`;
+    no_data_html_default = `<div class="${this.no_data_class_default}">No Data</div>`;
+    loading_html = null;
+    no_data_html = null;
     setup_has_run = false;
     enabled = false;
     #is_mac = null;
@@ -100,6 +105,9 @@ class Clusterize {
         this.#max_items = args.max_items;
 
         this.#on_scroll_bound = this.#onScroll.bind(this);
+
+        this.loading_html = args.loading_html;
+        this.no_data_html = args.no_data_html;
     }
 
     // ==== PUBLIC FUNCTIONS ====
@@ -125,12 +133,13 @@ class Clusterize {
         this.setup_has_run = true;
     }
 
-    clear(custom_text) {
+    clear(custom_html) {
         if (!this.setup_has_run || !this.enabled) {
             return;
         }
 
-        this.#html(this.#generateEmptyRow(custom_text).join(""));
+        custom_html = custom_html || this.no_data_html;
+        this.#html(custom_html);
     }
 
     destroy() {        
@@ -138,7 +147,7 @@ class Clusterize {
         this.#teardownElementObservers();
         this.#teardownResizeObservers();
 
-        this.#html(this.#generateEmptyRow().join(""));
+        this.#html(this.no_data_html);
         
         this.setup_has_run = false;
     }
@@ -276,6 +285,23 @@ class Clusterize {
         if (!this.options.tag) {
             this.options.tag = this.content_elem.children[0].tagName.toLowerCase();
         }
+
+        if (!isString(this.loading_html)) {
+            const loading_elem = this.content_elem.querySelector(`.${this.options.loading_class}`);
+            if (isElement(loading_elem)) {
+                this.loading_html = loading_elem.outerHTML;
+                loading_elem.remove();
+            }
+        }
+
+        if (!isString(this.no_data_html)) {
+            const no_data_elem = this.content_elem.querySelector(`.${this.options.no_data_class}`);
+            if (isElement(no_data_elem)) {
+                this.no_data_html = no_data_elem.outerHTML;
+                no_data_elem.remove();
+            }
+        }
+
         this.#recalculateDims();
     }
 
@@ -290,7 +316,9 @@ class Clusterize {
         }
 
         // Get the first element that isn't one of our placeholder rows.
-        const node = this.content_elem.querySelector(":scope > :not(.clusterize-extra-row,.clusterize-no-data)");
+        const node = this.content_elem.querySelector(
+            `:scope > :not(.clusterize-extra-row,.${this.options.no_data_class},.${this.options.loading_class})`
+        );
         if (!isElement(node)) {
             // dont attempt to compute dims if we have no data.
             return;
@@ -348,30 +376,6 @@ class Clusterize {
         return Math.min(current_cluster, max_cluster);
     }
 
-    #generateEmptyRow(text, class_name) {
-        if (isNullOrUndefined(text)) {
-            text = this.options.no_data_text;
-        }
-
-        if (isNullOrUndefined(class_name)) {
-            class_name = this.options.no_data_class;
-        }
-
-        const empty_row = document.createElement(this.options.tag);
-        const content = document.createTextNode(text);
-        empty_row.className = class_name;
-        if (this.options.tag === "tr") {
-            const td = document.createElement("td");
-            // fixes #53
-            td.colSpan = 100;
-            td.appendChild(content);
-            empty_row.appendChild(td);
-        } else {
-            empty_row.appendChild(content);
-        }
-        return [empty_row.outerHTML];
-    }
-
     async #generate() {
         const rows_start = Math.max(0, (this.options.rows_in_cluster - this.options.rows_in_block) * this.#getClusterNum());
         const rows_end = rows_start + this.options.rows_in_cluster;
@@ -393,7 +397,7 @@ class Clusterize {
                 top_offset: 0,
                 bottom_offset: 0,
                 rows_above: 0,
-                rows: this_cluster_rows.length ? this_cluster_rows : this.#generateEmptyRow(),
+                rows: this_cluster_rows.length ? this_cluster_rows : [this.no_data_html],
             };
         }
 
@@ -413,12 +417,12 @@ class Clusterize {
             if (!Array.isArray(rows) || !rows.length) {
                 // This implies there is no data for this list. Not an error.
                 // Errors should be handled in the fetchData callback, not here.
-                this.#html(this.#generateEmptyRow().join(""));
+                this.#html(this.no_data_html);
                 return;
             } else {
                 this.#exploreEnvironment(rows, this.#cache);
                 // Remove the temporary item from the data since we calculated its size.
-                this.#html(this.#generateEmptyRow("Loading...").join(""));
+                this.#html(this.loading_html);
             }
         }