phares3757/snap-2-html
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update template

Browse Source 
* Faster display after searching large amount of files
* Also show "searching..." indicator.
* Fix [..] position
This commit is contained in:
rlv-dan 2020-08-09 17:29:25 +02:00
parent b3476e455a
commit 7cb819d401
1 changed files with 64 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
Snap2HTML/template.html
View File

@ -172,6 +172,22 @@
.list_files {
overflow: auto;
position: relative;
}
.search_indicator {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: white;
opacity: 0.7;
text-align: center;
padding-top: 100px;
font-size: 18px;
display: none;
z-index: 99;
}
/* --- Splitter --- */
@ -291,7 +307,7 @@
}
#parent_folder {
position: absolute;
top: 43px;
top: 24px;
left: 4px;
}
#parent_folder_border {
@ -299,7 +315,7 @@
height: 1px;
position: absolute;
width: 100%;
top: 61px;
top: 42px;
}
@ -970,8 +986,12 @@
return;
}
var showLocationColumn = true;
if( numberOfFiles > 5000 ) {
$("#list_header").html( "Searching..." );
$("#search_indicator").show();
//$("#list_header").html( "Searching..." );
showLocationColumn = false;
}
location.hash = "";
@ -1033,9 +1053,15 @@
}
}
var locationHtml = "";
if(showLocationColumn) locationHtml = "<th>Folder</th>";
currentView = [];
var table_html = "";
table_html += "<table id='files' class='tablesorter'><thead><tr><th>Name</th><th>Folder</th><th>Size</th><th>Modified</th></tr></thead><tbody>\n";
table_html += "<table id='files' class='tablesorter'><thead><tr><th>Name</th>" +
locationHtml +
"<th>Size</th><th>Modified</th></tr></thead><tbody>";
var countFiles = 0;
var countDirs = 0;
@ -1079,18 +1105,23 @@
sizeDirs += SearchFilenames[index][1];
var subdir_id = parent_folders[ SearchLocationsID[index] ];
var timestamp = timestampToDate(SearchFilenames[index][2]);
locationHtml = "";
if(showLocationColumn) {
var located_in = SearchLocations[index];
if( located_in === "" ) located_in = "[.]"
located_in = located_in.substring( 0, located_in.lastIndexOf("\\") );
var timestamp = timestampToDate(SearchFilenames[index][2]);
locationHtml = "<td><span class='file_folder'><a href=\"#\" class=\"folder_link\" id=\"" + subdir_id + "\"> " + located_in + "</a></span></td>";
}
table_html +=
"<tr>" +
"<td><span class='file_folder'><a href=\"#\" class=\"folder_link\" id=\"" + SearchLocationsID[index] + "\"> " + SearchFilenames[index][3] + "</a></span></td>" +
"<td><span class='file_folder'><a href=\"#\" class=\"folder_link\" id=\"" + subdir_id + "\"> " + located_in + "</a></span></td>" +
locationHtml +
"<td class='size' data-sort='" + SearchFilenames[index][1] + "'>" + bytesToSize( SearchFilenames[index][1] ) + "</td>" +
"<td class='date' data-sort='" + SearchFilenames[index][2] + "'>" + timestamp + "</td>" +
"</tr>\n";
"</tr>";
currentView.push( { "name": SearchFilenames[index][3], "path": SearchLocationsRaw[index].replace(/\//g,"\\"), "type": "dir", "size": SearchFilenames[index][1], "date": SearchFilenames[index][2] } );
}
else // files
@ -1131,16 +1162,22 @@
}
}
locationHtml = "";
if(showLocationColumn) {
var located_in = SearchLocations[index];
if( located_in === "" ) located_in = "[.]"
locationHtml = "<td><span class='file_folder'><a href=\"#\" class=\"folder_link\" id=\"" + SearchLocationsID[index] + "\"> " + located_in + "</a></span></td>";
}
var timestamp = timestampToDate(SearchFilenames[index][2]);
table_html +=
"<tr>" +
"<td><span class='file'>" + file_tmp + "</span></td>" +
"<td><span class='file_folder'><a href=\"#\" class=\"folder_link\" id=\"" + SearchLocationsID[index] + "\"> " + located_in + "</a></span></td>" +
locationHtml +
"<td class='size' data-sort='" + SearchFilenames[index][1] + "'>" + bytesToSize( SearchFilenames[index][1] ) + "</td>" +
"<td class='date' data-sort='" + SearchFilenames[index][2] + "'>" + timestamp + "</td>" +
"</tr>\n";
"</tr>";
currentView.push( { "name": SearchFilenames[index][3], "path": SearchLocationsRaw[index].replace(/\//g,"\\"), "type": "file", "size": SearchFilenames[index][1], "date": SearchFilenames[index][2] } );
@ -1170,24 +1207,28 @@
}
}
table_html += "</tbody></table>\n";
table_html += "</tbody></table>";
$("#list_header").html( "Search Results <span class='path_divider'></span>" );
document.getElementById("list_files").innerHTML = table_html;
$("#search_indicator").hide();
addFolderClickEventHandlers();
var tablesorterHeaders = { 1 : { sorter: 'datasort' }, 2 : { sorter: 'datasort' } }
if(showLocationColumn) {
tablesorterHeaders = { 2 : { sorter: 'datasort' }, 3 : { sorter: 'datasort' } }
}
$("#files").tablesorter({
sortInitialOrder: "desc",
headers: {
2 : { sorter: 'datasort' },
3 : { sorter: 'datasort' }
}
headers: tablesorterHeaders
});
var sFiles = " files"; if(countFiles===1) sFiles = " file";
var sDirs = " folders"; if(countDirs===1) sDirs = " folder";
$("#list_footer_info_label").html( countDirs + sDirs + " (" + bytesToSize( sizeDirs , 0 ) + "), " + countFiles + sFiles + " (" + bytesToSize( sizeFiles , 0 ) + ")" );
}, 1); // end setTimeout before search
}, 50); // end setTimeout before search
}; // end doSearch()
@ -1689,10 +1730,12 @@
<div id="loading" class="loading"><b>Loading...</b><p class="loading_info">(if nothing happens, make sure javascript is enabled and allowed to execute, or try another browser)</p></div>
<div id="content" class="content">
<div id="treeview" class="treeview"></div>
<div id="list_container" class="list_container">
<div id="search_indicator" class="search_indicator">
Searching...
</div>
<div id="list_header" class="list_header"></div>
<div id="list_files" class="list_files"></div>
<div id="list_footer" class='list_footer'>
@ -1700,7 +1743,6 @@
<span id="list_footer_info_label"></span>
</div>
</div>
</div>
</div>