Merge branch 'master' into 1384-author-affiliation-persisting-options

adsabs · Mar 14, 2018 · 5ba0e3d · 5ba0e3d
2 parents c50a1cf + 612e47d
commit 5ba0e3d
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 21 deletions.
diff --git a/src/discovery.config.js b/src/discovery.config.js
@@ -281,6 +281,7 @@ require.config({
         exports: "MathJax",
         init: function () {
           MathJax.Hub.Config({
+            messageStyle: 'none',
             HTML: ["input/TeX","output/HTML-CSS"],
             TeX: { extensions: ["AMSmath.js","AMSsymbols.js"],
               equationNumbers: { autoNumber: "AMS" } },

diff --git a/src/index.html b/src/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
 
 <head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta charset="utf-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1"/>
   <meta name="google-site-verification" content="XxQuw38lagr8-TgtCyhAMP_6ELS9dy35fgrqo9dxw3o" />
   <title>NASA/ADS Search (Beta Interface)</title>
   <meta name="description" content="A powerful, streamlined new way to search the Astrophysics Data System" />
   <link rel="stylesheet" href="./styles/css/styles.css" />
-  <link rel="icon" type="image/png" sizes="32x32" href="./styles/img/favicon.ico">
+  <link rel="icon" type="image/png" sizes="32x32" href="./styles/img/favicon.ico"/>
 </head>
 
   <body>
@@ -27,11 +27,23 @@
         </noscript>
 
         <div class="loading-screen">
-          <div>
-              <div class="logo__astrophysics">astrophysics</div>
-              <div class="logo__data-system">data system</div>
-          </div>
-          <span class="loading-screen__loading">loading...</span>
+            <div class="row">
+                <div class="col-xs-8 col-xs-offset-2">
+                    <div class="logo__astrophysics">astrophysics</div>
+                    <div class="logo__data-system">data system</div>
+                </div>
+            </div>
+            <div class="row">
+                <div class="col-xs-6 col-xs-offset-3">
+                    <span class="sr-only">loading...</span>
+                    <div class="progress">
+                        <div class="progress-bar" role="progressbar" id="app_loading_progress" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
+                            <div class="sr-only">0% Complete</div>
+                        </div>
+                    </div>
+                    <span class="loading-screen__loading" id="app_loading_message"></span>
+                </div>
+            </div>
         </div>
       </div>
     </div>
@@ -47,9 +59,41 @@
         window.require = {
             waitSeconds: 30
         };
+
+        // Progress Bar
+        (function () {
+          var progressBar = document.getElementById('app_loading_progress');
+          var message = document.getElementById('app_loading_message');
+          var progressInner = document.querySelector('#app_loading_progress>div');
+          var progressValue = 0;
+
+          window.__setAppLoadingProgress = function (val, msg) {
+              progressBar.setAttribute('aria-valuenow', val);
+              progressBar.style = 'width: ' + val + '%';
+              progressInner.innerText = val + '% Complete';
+              message.innerHTML = msg ? msg : message.innerHTML;
+              progressValue = val;
+          };
+          setTimeout(function () { window.__setAppLoadingProgress(10); }, 200);
+          setTimeout(function () { window.__setAppLoadingProgress(15); }, 500);
+          window.__setAppLoadingProgress(5, 'Downloading Assets');
+          window.__PAGE_LOAD_TIMESTAMP = new Date();
+
+          // Show a reload button if the page is taking too long
+          setTimeout(function check () {
+            if (progressValue !== 100) {
+              var msg = 'Loading the application is taking a long time... ';
+              msg += '<button role="button" onclick="location.reload()" class="btn btn-default">Reload</button>';
+              window.__setAppLoadingProgress(progressValue, msg);
+            } else {
+              setTimeout(check, 10000);
+            }
+          }, 10000);
+        })();
+
     </script>
 
     <!-- start the discovery application -->
-    <script data-main="./discovery.config"  src="./libs/requirejs/require.js"></script>
+    <script data-main="./discovery.config" src="./libs/requirejs/require.js"></script>
   </body>
 </html>
diff --git a/src/js/apps/discovery/main.js b/src/js/apps/discovery/main.js
@@ -20,26 +20,29 @@ define(['config', 'module'], function(config, module) {
       'js/components/application',
       'js/mixins/discovery_bootstrap',
       'js/mixins/api_access',
+      'analytics',
       'es5-shim'
-    ],
-    function(Router,
-      Application,
-      DiscoveryBootstrap,
-      ApiAccess
-      ) {
+    ], function(Router, Application, DiscoveryBootstrap, ApiAccess, analytics) {
+
+      var updateProgress = (typeof window.__setAppLoadingProgress === 'function') ?
+        window.__setAppLoadingProgress : function () {};
+
       Application.prototype.shim();
 
       // at the beginning, we don't know anything about ourselves...
-      var debug = window.location.href.indexOf('debug=true') > -1 ? true : false;
+      var debug = window.location.href.indexOf('debug=true') > -1;
 
       // app object will load everything
       var app = new (Application.extend(DiscoveryBootstrap))({'debug': debug, timeout: 30000});
 
       // load the objects/widgets/modules (using discovery.config.js)
       var defer = app.loadModules(module.config());
 
+      updateProgress(20, 'Starting Application');
+
       // after they are loaded; we'll kick off the application
       defer.done(function() {
+        updateProgress(50, 'Modules Loaded');
 
         // this will activate all loaded modules
         app.activate();
@@ -50,7 +53,9 @@ define(['config', 'module'], function(config, module) {
         // set some important urls, parameters before doing anything
         app.configure();
 
+        updateProgress(95, 'Finishing Up...');
         app.bootstrap().done(function (data) {
+          updateProgress(100);
 
           app.onBootstrap(data);
           pubsub.publish(pubsub.getCurrentPubSubKey(), pubsub.APP_BOOTSTRAPPED);
@@ -80,6 +85,21 @@ define(['config', 'module'], function(config, module) {
             window.bbb = app;
           }
 
+          // app is loaded, send timing event
+
+          if (__PAGE_LOAD_TIMESTAMP) {
+            var time = new Date() - __PAGE_LOAD_TIMESTAMP;
+            analytics('send', {
+              hitType: 'timing',
+              timingCategory: 'Application',
+              timingVar: 'Loaded',
+              timingValue: time
+            });
+            if (debug) {
+              console.log('Application Started: ' + time + 'ms');
+            }
+
+          }
         }).fail(function () {
           app.redirect('500.html');
         });
@@ -94,8 +114,4 @@ define(['config', 'module'], function(config, module) {
       });
 
     });
-
-
-
-
 });