Fix laggy window issue with Clusterize.js (Filtering and Sorting won'…

…t work anymore)

app/WndMain.html

@@ -5,7 +5,7 @@
     <title>OfflineBay by TechTac</title>
     <link rel="stylesheet" href="../node_modules/material-design-iconic-font/dist/css/material-design-iconic-font.min.css">
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
-    <!--<link rel="stylesheet" href="css/app.css">-->
+    <link href="css/clusterize.css" rel="stylesheet">
     <link rel="stylesheet" href="css/animate.css">
     <link rel="stylesheet" href="css/comp-override.css">
     <link rel="stylesheet" href="css/WndMain.css">
@@ -103,7 +103,7 @@
             <span>Max Results:</span>
         </div> <!-- lblResCount -->
         <div>
-            <input id="txtResCount" type="text" class="txtbox" style="height: 32px" placeholder="Enter amount" autocomplete="off" value="50">
+            <input id="txtResCount" type="text" class="txtbox" style="height: 32px" placeholder="Enter amount" autocomplete="off" value="250">
         </div> <!-- txtResCount -->
         <div class="item-v-center">
             <span style="margin-left: 20px">Filter:</span>
@@ -112,8 +112,8 @@
             <input id="txtFilter" type="text" class="txtbox" style="height: 32px" placeholder="Insert keywords" autocomplete="off">
         </div> <!-- txtFilter -->
     </div>
-    <div class="tbl-grid">
-        <div class="table-responsive">
+    <div id="tblPane" class="tbl-grid clusterize-scroll">
+        <!--<div  class="table-responsive">-->
             <table id="tblMain" class="table table-striped table-hover">
                 <thead>
                 <tr>
@@ -123,7 +123,7 @@
                     <th data-sort-method='filesize'>Torrent Size</th>
                 </tr>
                 </thead>
-                <tbody id="tblMainBody">
+                <tbody id="tblMainBody" class="clusterize-content">
                 <tr>
                     <td>2017-Dec-05 15:12:49</td>
                     <td style="display: none">2017-Dec-05 15:12:49</td>
@@ -186,7 +186,7 @@
                 </tr>
                 </tbody>
             </table>
-        </div>
+        <!--</div>-->
     </div> <!-- tblMain -->
     <div class="btnOpenMag">
         <button id="btnOpenMag" class="btn-ui btn-info" type="button">
@@ -308,6 +308,7 @@
 <script src="js/tablesort.filesize.min.js"></script>
 <script src="js/tablesort.date.min.js"></script>
 <script src="js/jquery.floatThead.min.js"></script>
+<script src="js/clusterize.min.js"></script>
 <script src="js/WndMain.js"></script>
 <script src="renderers/RndMain.js"></script>
 <script>if (window.module) module = window.module;</script>

app/css/WndMain.css

@@ -18,10 +18,7 @@ body {
 /* Table */
 table {
     cursor: default;
-    transform: rotateX(0deg);
-}
-.table-responsive {
-    overflow-x: hidden;
+    /*transform: rotateX(0deg);*/
 }
 thead > tr > th:hover {
     background: rgba(255, 255, 255, 0.01);
@@ -57,6 +54,7 @@ th[role=columnheader]:not(.no-sort):hover:after {
 }
 .floatThead-container {
     border-radius: 4px;
+    overflow-y: auto;
 }
 
 span, strong {

app/css/clusterize.css

@@ -0,0 +1,38 @@
+/* max-height - the only parameter in this file that needs to be edited.
+ * Change it to suit your needs. The rest is recommended to leave as is.
+ */
+.clusterize-scroll{
+  max-height: 2160px;
+  /*overflow: auto;*/
+}
+
+/**
+ * Avoid vertical margins for extra tags
+ * Necessary for correct calculations when rows have nonzero vertical margins
+ */
+.clusterize-extra-row{
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+/* By default extra tag .clusterize-keep-parity added to keep parity of rows.
+ * Useful when used :nth-child(even/odd)
+ */
+.clusterize-extra-row.clusterize-keep-parity{
+  display: none;
+}
+
+/* During initialization clusterize adds tabindex to force the browser to keep focus
+ * on the scrolling list, see issue #11
+ * Outline removes default browser's borders for focused elements.
+ */
+.clusterize-content{
+  outline: 0;
+  counter-reset: clusterize-counter;
+}
+
+/* Centering message that appears when no data provided
+ */
+.clusterize-no-data td{
+  text-align: center;
+}

app/main-functions/search.js

@@ -20,7 +20,7 @@ console.log(smart);
 let i = 1;
 let reg;
 let stream;
-let result = '';
+let result = [];
 
 let procData = smart ? smartSearch : regularSearch;
 
@@ -59,11 +59,12 @@ function smartSearch(results, parser) {
                 }
                 stop = true;
             } else {
-                result += '<tr><td>' + record['#ADDED'] +
+                let row = '<tr><td>' + record['#ADDED'] +
                     '</td><td class="d-none">' + record['HASH(B64)'] +
                     '</td><td>' + record['NAME'] +
                     '</td><td>' + formatBytes(record['SIZE(BYTES)'], 1) + '</td></tr>';
                  // console.log(i + ' ' + formatBytes(record['SIZE(BYTES)']));
+                result.push(row);
                 i++;
             }
         }

app/renderers/RndMain.js

@@ -1,6 +1,8 @@
 const electron = require('electron');
 const {ipcRenderer} = electron;
 
+let rows = [];
+
 /* Window Settings
 --------------------*/
 document.addEventListener('dragover', event => event.preventDefault());
@@ -80,7 +82,15 @@ $('#mnuUpdTrcks').on('click', function () {
 ------------------*/
 /* Table */
 let tbl = new Tablesort(document.getElementById('tblMain'));
-
+let clusterize = new Clusterize({
+    rows: rows,
+    scrollId: 'tblPane',
+    contentId: 'tblMainBody',
+    tag: 'tr',
+    show_no_data_row: false,
+    rows_in_block: 20
+    // blocks_in_cluster: 100
+});
 /* Search */
 function startSearch(){
     $("#olAnim").attr("src", "img/load.svg");
@@ -114,8 +124,11 @@ ipcRenderer.on('search-failed', function (event, data) {
 ipcRenderer.on('search-success', function (event, data) {
     hideOL();
     $('#txtStat').text(data.resCount + ' Results found');
-    $('#tblMainBody').html(data.results);
-    tbl.refresh();
+    // $('#tblMainBody').html(data.results);
+    rows = data.results;
+    clusterize.update(rows);
+    clusterize.refresh();
+    // tbl.refresh();
     $('#txtFilter').val('');
 });