Add improved benchmarking, continue promise refactor.

docs/index.html

@@ -15,11 +15,12 @@
     <main></main>
   </div>
 
-  <!-- everything above here is for initial load (display pretty loading anim ASAP) -->
+  <!-- everything above here is for initial load (aka: display bg and pretty loading anim ASAP!) -->
 
-  <script src="logic/main.js"></script>
+  <script src="logic/mark.js"></script>
   <script>
-    var main = new Main(); // starts benchmark timing
+    var benchmark = new Mark();
+    benchmark.install();
   </script>
 
   <div class="error"></div>
@@ -38,6 +39,7 @@
   <script src="logic/view/nav.js"></script>
   <script src="logic/wrap.js"></script>
   <script src="logic/add.js"></script>
+  <script src="logic/main.js"></script>
   <script src="logic/lightbox.js"></script>
   <script>
     window.onerror = function(error, url, line) {
@@ -48,10 +50,9 @@
     let lightbox = new Lightbox;
     lightbox.install(document.querySelector('.lightbox'), 'lightbox');
 
+    var main = new Main();
     main.install();
     main.start();
-
-    document.querySelector('.loading-wave').style.display = 'none';
   </script>
 </body>
 </html>

docs/logic/main.js

@@ -10,15 +10,12 @@ function Main()
   this.queryCur = '';
   this.queryPrev = '';
   this.queryPrevAdd = '';
-
-  this.timeBegin = Date.now();
-  this.timeStore = Date.now();
-  this.curTime = null;
-
   var parent = this;
 
   this.install = function()
   {
+    benchmark.note('load all js files');
+
     this.util = new Util();
     this.database = new Wrap();
     this.database.install(DATABASE);
@@ -41,13 +38,8 @@ function Main()
       //   main.add.close();
       // }
     }
-  }
 
-  this.timediff = function(label)
+    benchmark.note('install main');
-  {
-    this.curTime = Date.now();
-    console.log((this.curTime - this.timeStore) + ' ms to ' + label);
-    this.timeStore = this.curTime;
   }
 
   this.resetPage = function()
@@ -73,32 +65,41 @@ function Main()
 
   this.start = function()
   {
-    this.timediff('load all js files');
     this.database.start()
     .then((db) => {
-      this.timediff('process db');
+      benchmark.note('process db');
       
       this.resetPage();
       this.updateQuery();
 
-      this.timediff('prep query \'' + this.queryCur + '\'');
+      benchmark.note('prep query');
       return this.database.filter(db, this.queryCur);
     })
     .then((filtered) => {
-      this.timediff('filter db');
+      benchmark.note('filter db');
       return this.grid.buildAllArticles(filtered);
     })
     .then((html) => {
-      this.timediff('build html');
+      benchmark.note('build html');
-      document.querySelector('main').innerHTML = html;
+
-      this.timediff('render html');
+      let stats = this.database.stats();
-      console.log('TOTAL: ' + (Date.now() - this.timeBegin) + ' ms');
+      benchmark.note('calc stats');
+
+      this.nav.display(stats);
+      benchmark.note('render stats');
+
+      this.grid.newDisplay(html);
+      // benchmark.note('render html');
+
+      benchmark.complete();
+
+      document.querySelector('.loading-wave').style.display = 'none';
     })
     .catch((error) => {
       console.log('ERROR:', error);
     })
     // this.load(window.document.location.hash);
-    // this.nav.display(this.db.stats());
+    // 
   }
 
 //   this.load = function(target)

docs/logic/mark.js

@@ -0,0 +1,38 @@
+function Mark()
+{
+  this.timeBegin = null;
+  this.timeStore = null;
+  this.curTime = null;
+  this.specialDesc = null;
+  this.specialTime = null;
+
+  this.install = function()
+  {
+  	this.timeBegin = Date.now();
+    this.timeStore = Date.now();
+  }
+
+  this.note = function(desc)
+  {
+    this.curTime = Date.now();
+    console.log((this.curTime - this.timeStore) + ' ms to ' + desc);
+    this.timeStore = this.curTime;
+  }
+
+  this.special = function(desc)
+  {
+    this.specialDesc = desc;
+    this.specialTime = Date.now() - this.timeStore;
+    this.note(desc);
+  }
+
+  this.complete = function()
+  {
+    let total = (Date.now() - this.timeBegin);
+    console.log('TOTAL TIME: ' + total + ' ms');
+    if (this.specialDesc != null)
+    {
+      console.log(((this.specialTime / total)*100).toFixed(0) + ' % of time spent on: ' + this.specialDesc);
+    }
+  }
+}

docs/logic/view/grid.js

@@ -24,6 +24,42 @@ function Grid()
     }
   }
 
+  this.newDisplay = function(html)
+  {
+    if (window.showAdd !== undefined && window.showAdd)
+    {
+      main.add.setOverlay(false);
+    }
+
+    document.querySelector('main').innerHTML = html;
+    
+    benchmark.note('render html');
+
+    // LAYOUT
+    if (SETTINGS.USEMASONRY)
+    {
+      this.msnry.reloadItems();
+      this.msnry.layout();
+
+      if (SETTINGS.MASONRYCOMPLETE || SETTINGS.MASONRYPROGRESS)
+      {
+        let imgLoad = imagesLoaded( this.container );
+        if (!SETTINGS.MASONRYPROGRESS)
+        {
+          // When all images finish: redo mansonry layout
+          imgLoad.on( 'always', function() { parent.msnry.layout(); } );
+        }
+        else
+        {
+          // As images load one by one: redo masonry layout
+          imgLoad.on( 'progress', function() { parent.msnry.layout(); } );
+        }
+      }
+
+      benchmark.special('masonry layout');
+    }
+  }
+
   this.display = function(db)
   {
     if (window.showAdd !== undefined && window.showAdd)