Merge pull request #20290 from EverythingMe/1020961-indications

Bug 1020961 - [Collection app] Loading progress indicator and Connectivity message
mozilla-b2g · Jun 13, 2014 · a0f537b · a0f537b
1 parent 4e8b16a
commit a0f537b
Show file tree

Hide file tree

Showing 6 changed files with 218 additions and 65 deletions.
diff --git a/apps/collection/js/view_apps.js b/apps/collection/js/view_apps.js
@@ -0,0 +1,93 @@
+'use strict';
+/* global eme */
+
+(function(exports) {
+
+  function ViewApps(collection) {
+
+    var grid = document.getElementById('grid');
+    var elements = {
+      offline: document.getElementById('offline'),
+      offlineMessage: document.getElementById('offline-message')
+    };
+    var requestParams = {
+      query: collection.query,
+      categoryId: collection.categoryId,
+      iconFormat: getIconFormat()
+    };
+
+    // render pinned apps first
+    collection.render(grid);
+
+    if (navigator.onLine) {
+      makeRequest();
+    } else {
+      onOffline();
+    }
+
+    addListeners();
+
+    function onOffline() {
+      loading(false);
+
+      var msg = navigator.mozL10n.get('offline-webresults', {
+        collectionName: collection.name
+      });
+      elements.offlineMessage.innerHTML = msg;
+      elements.offline.classList.add('show');
+    }
+
+    function makeRequest() {
+      loading();
+
+      eme.api.Apps.search(requestParams)
+        .then(function success(searchResponse) {
+          var results = [];
+
+          searchResponse.response.apps.forEach(function each(webapp) {
+            results.push({
+              id: webapp.id, // e.me app id (int)
+              name: webapp.name,
+              url: webapp.appUrl,
+              icon: webapp.icon,
+              clipIcon: true
+            });
+          });
+
+          onResponse();
+
+          grid.clientLeft; // force layout or else grid isn't displayed
+          collection.webResults = results;
+          collection.render(grid);
+
+        }, onResponse);
+    }
+
+    function loading(should) {
+      document.body.dataset.loading = should !== false;
+      elements.offline.classList.remove('show');
+    }
+
+    function onResponse() {
+      loading(false);
+      removeListeners();
+    }
+
+    function addListeners() {
+      window.addEventListener('online', makeRequest);
+      window.addEventListener('offline', onOffline);
+    }
+
+    function removeListeners() {
+      window.removeEventListener('online', makeRequest);
+      window.removeEventListener('offline', onOffline);
+    }
+
+    function getIconFormat() {
+      return 20;
+    }
+  }
+
+  exports.ViewApps = ViewApps;
+
+}(window));
diff --git a/apps/collection/js/view_bg.js b/apps/collection/js/view_bg.js
@@ -0,0 +1,48 @@
+'use strict';
+/* global eme */
+
+(function(exports) {
+
+  function ViewBGImage(requestParams) {
+
+    var elements = {
+      content: document.getElementById('content')
+    };
+
+    if (navigator.onLine) {
+      onOnline();
+    } else {
+      addListeners();
+    }
+
+    function onOnline() {
+      eme.api.Search.bgimage(requestParams)
+        .then(function success(bgResponse) {
+          removeListeners();
+
+          var image = bgResponse.response.image;
+          if (image) {
+            var src = image.data;
+            if (/image\//.test(image.MIMEType)) {  // base64 image data
+              src = 'data:' + image.MIMEType + ';base64,' + image.data;
+            }
+
+            elements.content.style.backgroundImage = 'url(' + src + ')';
+          } else {
+            // TODO show default image?
+          }
+        });
+    }
+
+    function addListeners() {
+      window.addEventListener('online', onOnline);
+    }
+
+    function removeListeners() {
+      window.removeEventListener('online', onOnline);
+    }
+  }
+
+  exports.ViewBGImage = ViewBGImage;
+
+}(window));
diff --git a/apps/collection/js/view_collection.js b/apps/collection/js/view_collection.js
@@ -1,90 +1,37 @@
 'use strict';
 /* global BaseCollection */
 /* global Contextmenu */
+/* global ViewApps */
+/* global ViewBGImage */
 /* global Promise */
+/* global eme */
 
 (function(exports) {
 
-  var eme = exports.eme;
-
-  var grid = document.getElementById('grid');
-
   var elements = {
-    content: document.getElementById('content'),
     header: document.getElementById('header'),
     close: document.getElementById('close'),
     name: document.getElementById('name')
   };
 
   function HandleView(activity) {
-
     var collection = BaseCollection.create(activity.source.data);
-    collection.render(grid);
-
-    /* jshint -W031 */
-    new Contextmenu(collection);
 
-    function error(e) {
-      eme.log(e);
-      alert('view-collection error', e);
-      activity.postError(e);
-    }
-
-    function fail(e) {
-      eme.log(e);
-      alert('view-collection fail', e);
-      activity.postError(e);
-    }
+    loading(false);
 
     var categoryId = collection.categoryId;
     var query = collection.query;
+    eme.log('view collection', categoryId ? ('categoryId: ' + categoryId)
+                                          : ('query: ' + query));
 
     elements.close.addEventListener('click', function close() {
       activity.postResult('close');
     });
 
-    eme.log('view collection', categoryId ? ('categoryId: ' + categoryId)
-                                          : ('query: ' + query));
-
-    eme.api.Apps.search({categoryId: categoryId, query: query, iconFormat: 20})
-      .then(function success(searchResponse) {
-
-        var webResults = [];
-
-        searchResponse.response.apps.forEach(function each(webapp) {
-          webResults.push({
-            id: webapp.id, // e.me app id (int)
-            name: webapp.name,
-            url: webapp.appUrl,
-            icon: webapp.icon,
-            clipIcon: true
-          });
-        });
-
-        collection.webResults = webResults;
-        collection.render(grid);
-      }, error)
-      .catch(fail);
-
-
-    eme.api.Search.bgimage({categoryId: categoryId, query: query})
-      .then(function success(bgResponse) {
-        var image = bgResponse.response.image;
-        if (image) {
-          var src = image.data;
-          if (/image\//.test(image.MIMEType)) {  // base64 image data
-            src = 'data:' + image.MIMEType + ';base64,' + image.data;
-          }
-
-          elements.content.style.backgroundImage = 'url(' + src + ')';
-        } else {
-          // TODO show default image?
-        }
-      }, function() {
-        // Bug 1023631 - Do not fail when BGImage can't be loaded
-        // TODO show default image?
-      })
-      .catch(fail);
+    /* jshint -W031 */
+    new Contextmenu(collection);
+    new ViewApps(collection);
+    new ViewBGImage(collection);
   }
 
   navigator.mozSetMessageHandler('activity', function onActivity(activity) {
@@ -97,6 +44,8 @@
         elements.header.style.backgroundImage = 'url(' + src + ')';
       });
 
+      loading();
+
       eme.init().then(function ready() {
         HandleView(activity);
       });
@@ -118,6 +67,11 @@
     });
   }
 
+  // toggle progress indicator
+  function loading(should) {
+    document.body.dataset.loading = should !== false;
+  }
+
   // exporting handler so we can trigger it from testpage.js
   // without mozActivities since we can't debug activities in app manager
   exports.HandleView = HandleView;

diff --git a/apps/collection/locales/collection.en-US.properties b/apps/collection/locales/collection.en-US.properties
@@ -8,6 +8,7 @@ network-error-message=Connect to the internet to add more Smart Collections
 # view-collection
 add-to-top-of-collection=Add to top of collection
 save-to-homescreen=Save to Homescreen
+offline-webresults=Connect to the internet to get apps for {{collectionName}}
 
 # delete-collection
 delete-title=Delete {{name}}

diff --git a/apps/collection/style/css/view.css b/apps/collection/style/css/view.css
@@ -1,11 +1,12 @@
 body {
   background: #000000;
 }
+
 gaia-grid {
   display: block;
-  height: 100%;
   width: 100%;
 }
+
 #header {
   height: 5.4rem;
   line-height: 5.4rem;
@@ -15,6 +16,7 @@ gaia-grid {
   background-position: center -2.4rem; /* to continue wallpaper position from status bar */
   position: relative;
 }
+
 #header:after {
   position: absolute;
   content: ' ';
@@ -25,6 +27,7 @@ gaia-grid {
   right: 0;
   bottom: 0;
 }
+
 #name {
   margin-right: 1rem;
   padding-left: 3rem;
@@ -37,6 +40,7 @@ gaia-grid {
   text-overflow: '';
   -moz-box-sizing: border-box;
 }
+
 #close {
   position: absolute;
   background: transparent url('../images/close.png') no-repeat 50% 50%/1.7rem;
@@ -46,6 +50,7 @@ gaia-grid {
   height: 5.4rem;
   z-index: 1;
 }
+
 #content {
   border-top: 0.1rem solid #555;
   position: fixed;
@@ -58,13 +63,54 @@ gaia-grid {
   background-color: #000000;
   background-size: cover;
 }
+
 #content:after {
   position: fixed;
-  top: 5.4rem;
+  top: 5.5rem; /* making sure not to overlay the top border */
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   content: " ";
   background-color: rgba(0,0,0,0.4);
 }
+/* making sure content elements don't get overlayed by #content:after */
+#content > * {
+  position: relative;
+  z-index: 1;
+}
+
+/* Notifications */
+#content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+section[role="notification"] {
+  flex: 1 1 auto;
+  align-items: center;
+  color: #fff;
+  font-size: 1.6rem;
+  line-height: 1.8rem;
+  text-align: center;
+  justify-content: center;
+  display: none;
+}
+
+section[role="notification"]#offline {
+  padding: 1.2rem 5rem;
+}
+
+/* Prevent unnecessary cpu usage (bug 922341) */
+section[role="notification"] progress {
+  display: none;
+}
+
+body[data-loading="true"] section[role="notification"] progress {
+  display: inline-block;
+}
+section[role="notification"].show,
+body[data-loading="true"] #content section[role="notification"]#loading{
+  display: flex;
+}