addded loading progress

assets/dist/main.css

@@ -735,6 +735,21 @@ header {
       header #menus:hover nav:hover li:hover {
         color: #000; }
 
+#db-loader {
+  position: relative;
+  width: 300px;
+  height: 1px;
+  background-color: black;
+  margin-left: 70px; }
+  #db-loader #db-loaded {
+    position: absolute;
+    top: -1px;
+    left: 0;
+    width: 0%;
+    height: 3px;
+    background-color: black;
+    transition: width 1.2s; }
+
 .sticky-clone-wrapper {
   padding-top: 5em;
   position: fixed;
@@ -925,7 +940,7 @@ main#content.mode-text .opened-link .close-link-btn {
   .dot.to-links > section.text {
     border-top: 1px solid #e2e2e2;
     padding-top: 1.5em;
-    margin-top: -1.5em; }
+    margin-top: -1.4em; }
   .dot.from-links > section.text {
     border-bottom: 1px solid #e2e2e2; }
   .dot > nav.links {
@@ -934,14 +949,16 @@ main#content.mode-text .opened-link .close-link-btn {
     .dot > nav.links.to {
       bottom: 100%;
       margin-top: 15px;
-      padding-bottom: 10px; }
+      padding-bottom: 10px;
+      margin-top: 1em; }
       .dot > nav.links.to:before {
         content: "\2304";
         display: flex;
         align-items: flex-end; }
     .dot > nav.links.from {
       top: 100%;
-      padding-top: 10px; }
+      padding-top: 10px;
+      margin-bottom: 1em; }
       .dot > nav.links.from:before {
         content: "\2303"; }
     .dot > nav.links:before {
@@ -951,7 +968,7 @@ main#content.mode-text .opened-link .close-link-btn {
       left: 65px;
       height: 100%;
       width: 0;
-      z-index: -1;
+      z-index: 3;
       text-indent: -0.45em;
       line-height: 1;
       color: #4a4848; }

assets/dist/main.js

@@ -1715,10 +1715,15 @@ module.exports = {
       'sc'  :{full:'Scolie',        dim:'Scol.'},
     }
   ],
+  // loading progress
+  loaded_by_file:{},
+  // totalloaded:0,
+  loader: document.getElementById('db-loaded'),
 
   load(callback) {
     // load all dbs, when all loaded call main app callback function
     for (var i = 0; i < this.langs.length; i++) {
+      this.loaded_by_file[this.langs[i].lc] = 0;
       this.loadJSON(this.langs[i].lc, '/assets/jsondb/'+this.langs[i].db, callback)
     }
   },
@@ -1728,6 +1733,24 @@ module.exports = {
     xobj.overrideMimeType("application/json");
     // TODO: load and unzip gziped json
     // xobj.setRequestHeader('Accept-Encoding', 'gzip');
+
+    // Display loading progress
+    xobj.addEventListener("progress", function(oEvent){
+      if (oEvent.lengthComputable) {
+        var percentComplete = oEvent.loaded / oEvent.total * 100;
+        console.log(lc+' loaded :',percentComplete);
+        this.loaded_by_file[lc] = percentComplete;
+        var totalloaded = 0;
+        for (var i = 0; i < this.langs.length; i++) {
+          totalloaded += this.loaded_by_file[this.langs[i].lc];
+        }
+        this.loader.style.width = (totalloaded/this.langs.length)+"%";
+      } else {
+        // Unable to compute progress information since the total size is unknown
+        console.log('no progress');
+      }
+    }.bind(this));
+
     xobj.onreadystatechange = function () {
       // console.log('onreadystatechange', xobj.readyState);
       switch(xobj.readyState){

assets/main.scss

@@ -129,6 +129,22 @@ header{
 // }
 
 
+#db-loader{
+  position: relative;
+  width:300px;
+  height:1px;
+  background-color: black;
+  margin-left: $margin_left;
+  #db-loaded{
+    position: absolute;
+    top:-1px; left:0;
+    width: 0%;
+    height:3px;
+    background-color: black;
+    transition: width 1.2s;
+  }
+}
+
 
 .sticky-clone-wrapper{
   padding-top: $header_height;
@@ -478,9 +494,8 @@ main#content.mode-connections{
   }
   &.to-links > section.text{
     border-top: 1px solid #e2e2e2;
-    $decal:1.5em;
+    padding-top:1.5em;
-    padding-top:$decal;
+    margin-top: -1.4em;
-    margin-top: -$decal;
   }
   &.from-links > section.text{
     border-bottom: 1px solid #e2e2e2;
@@ -494,6 +509,7 @@ main#content.mode-connections{
       bottom:100%;
       margin-top: 15px;
       padding-bottom:10px;
+      margin-top: 1em;
       &:before{
         content: "\2304";
         display: flex;
@@ -503,7 +519,7 @@ main#content.mode-connections{
     &.from{
       top:100%;
       padding-top:10px;
-      // margin-bottom: 15px;
+      margin-bottom: 1em;
       &:before{
         content: "\2303";
       }
@@ -514,7 +530,7 @@ main#content.mode-connections{
       position: absolute;
       top:0; left:$margin_left - 5px;
       height: 100%; width:0;
-      z-index: -1;
+      z-index: 3;
       text-indent: -0.45em;
       line-height: 1;
       color: #4a4848;

assets/modules/dbs.js

@@ -74,10 +74,15 @@ module.exports = {
       'sc'  :{full:'Scolie',        dim:'Scol.'},
     }
   ],
+  // loading progress
+  loaded_by_file:{},
+  // totalloaded:0,
+  loader: document.getElementById('db-loaded'),
 
   load(callback) {
     // load all dbs, when all loaded call main app callback function
     for (var i = 0; i < this.langs.length; i++) {
+      this.loaded_by_file[this.langs[i].lc] = 0;
       this.loadJSON(this.langs[i].lc, '/assets/jsondb/'+this.langs[i].db, callback)
     }
   },
@@ -87,6 +92,24 @@ module.exports = {
     xobj.overrideMimeType("application/json");
     // TODO: load and unzip gziped json
     // xobj.setRequestHeader('Accept-Encoding', 'gzip');
+
+    // Display loading progress
+    xobj.addEventListener("progress", function(oEvent){
+      if (oEvent.lengthComputable) {
+        var percentComplete = oEvent.loaded / oEvent.total * 100;
+        console.log(lc+' loaded :',percentComplete);
+        this.loaded_by_file[lc] = percentComplete;
+        var totalloaded = 0;
+        for (var i = 0; i < this.langs.length; i++) {
+          totalloaded += this.loaded_by_file[this.langs[i].lc];
+        }
+        this.loader.style.width = (totalloaded/this.langs.length)+"%";
+      } else {
+        // Unable to compute progress information since the total size is unknown
+        console.log('no progress');
+      }
+    }.bind(this));
+
     xobj.onreadystatechange = function () {
       // console.log('onreadystatechange', xobj.readyState);
       switch(xobj.readyState){

index.html

@@ -6,7 +6,26 @@
     <link rel="stylesheet" href="/assets/dist/main.css">
   </head>
   <body>
-
+    <header>
+      <hgroup>
+        <h1>Ethica</h1>
+        <h2>Spinoza (1632-1677)</h2>
+      </hgroup>
+    </header>
+    <main id="content">
+      <section class="intro">
+        <p>
+          ÉTHIQUE<br/>
+          démontrée suivant l'Ordre Géométrique<br/>
+          ET<br/>
+          divisée en cinq Parties,<br/>
+          dans lesquelles il s'agit ...<br/>
+        </p>
+      </section>
+    </main>
+    <div id="db-loader">
+      <div id="db-loaded"></div>
+    </div>
     <script src="/assets/dist/main.js" charset="utf-8"></script>
   </body>
 </html>