tangent/memex
1
0
Fork 0
mirror of https://github.com/TangentFoxy/memex.git synced 2024-11-22 04:54:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add improved loading handling. Clean up.

Browse Source
This commit is contained in:
kor 2018-11-07 14:14:49 +13:00
parent 90375587ac
commit ccd94fded6
3 changed files with 35 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/asset/style.css
View File

@ -70,7 +70,8 @@ body {
/* LOADING */ /* LOADING */
.loading-wave { .loading-wave {
display: inline-block; display: inline-block;
position: absolute; position: fixed;
margin-left: calc(var(--size-menu)/2);
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 94px; width: 94px;

2
docs/index.html
View File

@ -20,7 +20,7 @@
<script src="logic/seer.js"></script> <script src="logic/seer.js"></script>
<script> <script>
var seer = new Seer(); var seer = new Seer();
seer.install(true, 1); seer.install(false, 1);
</script> </script>
<div class="error"></div> <div class="error"></div>

63
docs/logic/main.js
View File

@ -3,6 +3,7 @@ function Main()
this.util = null; this.util = null;
this.wrap = null; this.wrap = null;
this.articles = null; this.articles = null;
this.articlesDisplayed = 0;
this.grid = null; this.grid = null;
this.nav = null; this.nav = null;
this.add = null; this.add = null;
@ -55,41 +56,13 @@ function Main()
this.load(); this.load();
} }
this.test = function()
{
this.grid.clear();
document.querySelector('.loading-wave').style.display = 'inline-block';
setTimeout(this.load(), 1000);
}
this.load = function() this.load = function()
{ {
// this.grid.clear(); // RESET
// document.querySelector('.loading-wave').style.display = 'inline-block';
this.resetPage();
this.updateQuery();
let filtered = this.wrap.filter(this.queryCur, this.articles);
seer.note('filter db');
let html = this.grid.buildAllArticles(filtered)
seer.note('build html');
this.grid.display(html);
seer.report();
document.querySelector('.loading-wave').style.display = 'none';
}
this.resetPage = function()
{
lightbox.close(); lightbox.close();
document.activeElement.blur(); document.activeElement.blur();
}
this.updateQuery = function() // UPDATE QUERY
{
let target = window.document.location.hash; let target = window.document.location.hash;
if (this.queryCur !== 'add') if (this.queryCur !== 'add')
{ {
@ -101,7 +74,35 @@ function Main()
{ {
window.location.hash = this.queryCur; window.location.hash = this.queryCur;
} }
// DISPLAY
let filtered = main.wrap.filter(main.queryCur, main.articles);
let filteredLength = Object.keys(filtered).length;
seer.note('filter db');
let delay = 0;
if (filteredLength > 50 || this.articlesDisplayed > 50)
{
// adding or removing a large number of articles can take time, so show loader
this.grid.clear();
document.querySelector('.loading-wave').style.display = 'inline-block';
delay = 10; // Small delay gives the preloader time to display
}
this.articlesDisplayed = filteredLength;
setTimeout(function() { main.build(filtered) }, delay);
}
this.build = function(filtered)
{
let html = main.grid.buildAllArticles(filtered)
seer.note('build html');
main.grid.display(html);
seer.report();
document.querySelector('.loading-wave').style.display = 'none';
} }
} }
window.addEventListener("hashchange", function() { main.test(); }); window.addEventListener("hashchange", function() { main.load(); });