Updated dist.

elifesciences · Dec 21, 2013 · cab730c · cab730c
1 parent 9546322
commit cab730c
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 54 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -158,7 +158,7 @@
 
     </script>
   </head>
-  <body>
+  <body class="loading">
 
   </body>
 </html>
diff --git a/dist/lens.css b/dist/lens.css
@@ -1586,7 +1586,7 @@ TOC
 .resource-view.toc .heading-ref {
   cursor: pointer;
   display: block;
-  color: rgba(0,0,0,0.5);
+  color: rgba(0,0,0,0.7);
   font-size: 17px;
   padding: 4px 10px;
   line-height: 20px;
@@ -1636,6 +1636,14 @@ TOC
 body {
   padding: 0;
   margin: 0;
+  background-color: white;
+  -moz-transition: background-color 200ms linear;
+  -o-transition: background-color 200ms linear;
+  -webkit-transition: background-color 200ms linear;
+  transition: background-color 200ms linear;
+}
+
+body.loading {
 }
 
 html {
@@ -1669,38 +1677,6 @@ body.reader #container {
 }
 
 
-/*#container .browser-not-supported {
-  text-align: center;
-  padding-top: 200px;
-  width: 500px;
-  margin: 0 auto;
-  font-size: 20px;
-  line-height: 30px;
-}
-
-#container .browser-not-supported h1 {
-  font-family: 'Avenir LT W01 85 Heavy', 'Montserrat', 'Source Sans Pro';
-  font-size: 30px;
-}
-
-#container .browser-not-supported p {
-  padding: 30px 0;
-}
-
-#container .browser-not-supported a {
-  background: #444;
-  padding: 2px 10px;
-  color: #fff;
-  font-family: 'Avenir LT W01 85 Heavy', 'Montserrat', 'Source Sans Pro';
-}
-
-#container .browser-not-supported a:hover {
-  background: #000;
-}
-*/
-
-
-
 body, textarea, p, input {
   font-family: 'Source Sans Pro', Helvetica, Arial, Verdana, sans-serif;
   color: #505050;
@@ -1817,3 +1793,61 @@ body.reader #main {
   line-height: 50px;
   font-size: 12px;
 }
+
+
+/* Loading bar */
+
+
+.spinner-wrapper {
+  position: fixed;
+  display: none;
+  left: 50%;
+  margin-left: -75px;
+  width: 150px;
+  top: 40%;
+  z-index: 5000;
+  font-family: 'Avenir LT W01 85 Heavy', 'Montserrat', 'Source Sans Pro';
+}
+
+body.loading .spinner-wrapper {
+  display: block;
+}
+
+.spinner-wrapper .spinner {
+  width: 40px;
+  height: 40px;
+  margin: 0 auto;  
+  background: #444;
+  -webkit-animation: rotateplane 1.2s infinite ease-in-out;
+  animation: rotateplane 1.2s infinite ease-in-out;
+}
+
+.spinner-wrapper .message {
+  color: #444;
+  text-align: center;
+  font-size: 12px;
+  padding-top: 20px;
+}
+
+@-webkit-keyframes rotateplane {
+  0% { -webkit-transform: perspective(120px) }
+  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
+  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+}
+
+@keyframes rotateplane {
+  0% {
+    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
+  } 50% {
+    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
+  } 100% {
+    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
+  }
+}
+
+#MathJax_Message {
+  display: none;
+}
diff --git a/dist/lens.js b/dist/lens.js
@@ -22857,7 +22857,7 @@ LensController.Prototype = function() {
       var doc = Article.describe();
       that.createReader(doc, state);
     } else {
-      this.trigger("loading:started", "Loading document ...");
+      this.trigger("loading:started", "Loading article");
       $.get(this.config.document_url)
       .done(function(data) {
         var doc, err;
@@ -22878,6 +22878,7 @@ LensController.Prototype = function() {
         that.createReader(doc, state);
       })
       .fail(function(err) {
+        that.view.startLoading("Error during loading. Please try again.")
         console.error(err);
       });
     }
@@ -22909,8 +22910,6 @@ module.exports = LensController;
 "use strict";
 
 var _ = require("underscore");
-var util = require('substance-util');
-var html = util.html;
 var View = require("substance-application").View;
 var $$ = require("substance-application").$$;
 
@@ -22929,7 +22928,7 @@ var LensView = function(controller) {
   // --------
 
   this.listenTo(this.controller, 'state-changed', this.onStateChanged);
-  this.listenTo(this.controller, 'loading:started', this.displayLoadingIndicator);
+  this.listenTo(this.controller, 'loading:started', this.startLoading);
 
   $(document).on('dragover', function () { return false; });
   $(document).on('ondragend', function () { return false; });
@@ -22938,10 +22937,6 @@ var LensView = function(controller) {
 
 LensView.Prototype = function() {
 
-  this.displayLoadingIndicator = function(msg) {
-    this.$('#main').empty();
-    this.$('.loading').html(msg).show();
-  };
 
   this.handleDroppedFile = function(e) {
     var ctrl = this.controller;
@@ -22970,20 +22965,34 @@ LensView.Prototype = function() {
     }
   };
 
+  this.startLoading = function(msg) {
+    if (!msg) msg = "Loading article";
+    $('.spinner-wrapper .message').html(msg);
+    $('body').addClass('loading');
+  };
+
+  this.stopLoading = function() {
+    $('body').removeClass('loading');
+  };
+
 
   // Open the reader view
   // ----------
   //
 
   this.openReader = function() {
     var view = this.controller.reader.createView();
-    this.replaceMainView('reader', view);
+    var that = this;
+
+    that.replaceMainView('reader', view);
+    that.startLoading("Typesetting");
 
-    var doc = this.controller.reader.__document;
-    var publicationInfo = doc.get('publication_info');
+    this.$('#main').css({opacity: 0});
 
-    // Hide loading indicator
-    this.$('.loading').hide();
+    _.delay(function() {
+      that.stopLoading();
+      that.$('#main').css({opacity: 1});
+    }, 1000);
   };
 
   // Rendering
@@ -23012,11 +23021,14 @@ LensView.Prototype = function() {
       style: "display: none;"
     }));
 
-    // Loading indicator
-    // ------------
+    // Spinner
+    // ------------  
 
-    this.el.appendChild($$('.loading', {
-      style: "display: none;"
+    this.el.appendChild($$('.spinner-wrapper', {
+      children: [
+        $$('.spinner'),
+        $$('.message', {html: 'Loading article'})
+      ]
     }));
 
     // Main container
@@ -23040,8 +23052,11 @@ LensView.Prototype.prototype = View.prototype;
 LensView.prototype = new LensView.Prototype();
 
 module.exports = LensView;
-},{"substance-application":57,"substance-util":155,"underscore":160}],164:[function(require,module,exports){
-// nothing to see here... no file methods for the browser
+},{"substance-application":57,"underscore":160}],164:[function(require,module,exports){
+
+// not implemented
+// The reason for having an empty file and not throwing is to allow
+// untraditional implementation of this module.
 
 },{}]},{},[1])
 ;
diff --git a/dist/lens.min.js b/dist/lens.min.js
-Original file line number
+Diff line change
@@ Expand Up / @@ -158,7 +158,7 @@ @@
         </script>
       </head>
-      <body>
+      <body class="loading">
       </body>
     </html>