Improved empty feed support. Ensured views are rendered only once

The commit brings in the latest version of the framework that
provides a more consistent update mechanism across views that do not
force a full refresh when not needed.

Sleek now renders views once when they get created. Updates made to
the models and collections bound to the views trigger the additional
magic needed to update the content displayed. This is probably not
enough to fix the flickering effect on iPads, but that should still
improve things and avoid useless updates that could happen in the
past.

Samsung TV version still not operational.

app/lang/dictionaries/en.json

@@ -1,5 +1,6 @@
 {
   "terms": {
-    "nodata": "No data feed to display.<br>Consider adding a data source."
+    "nodata": "No data feed to display.<br>Consider adding a data source.",
+    "empty": "Feed is empty!"
   }
 }

app/lang/dictionaries/fr.json

@@ -1,5 +1,6 @@
 {
   "terms": {
-    "nodata": "Pas de données à afficher.<br> Merci d'ajouter une source de données."
+    "nodata": "Pas de données à afficher.<br> Merci d'ajouter une source de données.",
+    "empty": "Le flux est vide!"
   }
 }

app/less/global.less

@@ -74,9 +74,43 @@ img {
       font-style: normal;
     }
   }
-} 
+}
+
+
+//---------------------------------------------------------------------------
+// The spinner centered in image box and not rendered by default
+//---------------------------------------------------------------------------
+.loader {
+  background: transparent url(../images/image-spinner.gif) no-repeat center center;
+  margin: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+  display: none;
+
+  &.inv {
+    background-image: url(../images/image-spinner-inv.gif)
+  }
+
+  &.large {
+    background-color: rgba(0, 0, 0, 0.9);
+    background-image: url(../images/spinner.gif);
+    .border-radius(.5em);
+    width: 5em;
+    height: 5em;
+    left: 50%;
+    top: 50%;
+    margin-top: -2.5em;
+    margin-left: -2.5em;
+  }
+}
+
+
 //---------------------------------------------------------------------------
-// The no-data message
+// The "No datasource" and "empty feed" messages
 //---------------------------------------------------------------------------
 .nodata {
   padding: 3em 0;
@@ -86,6 +120,17 @@ img {
   color: @dark-text-color;
 }
 
+.loading {
+  .nodata {
+    display: none;
+  }
+
+  .loader {
+    display: block;
+  }
+}
+
+
 //---------------------------------------------------------------------------
 // The contents of an article
 // (which may include all sorts of tags, including headers)
@@ -214,35 +259,6 @@ figure,
     .translate3d(0,0,0);
   }
 
-  // Center spinner in image box, not rendered by default
-  & > .loader {
-    background: transparent url(../images/image-spinner.gif) no-repeat center center;
-    margin: 0;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-    display: none;
-
-    &.inv {
-      background-image: url(../images/image-spinner-inv.gif)
-    }
-
-    &.large {
-      background-color: rgba(0, 0, 0, 0.9);
-      background-image: url(../images/spinner.gif);
-      .border-radius(.5em);
-      width: 5em;
-      height: 5em;
-      left: 50%;
-      top: 50%;
-      margin-top: -2.5em;
-      margin-left: -2.5em;
-    }
-  }
-
   // When "loading" is there, spinner is displayed over the transparent image
   &.loading,
   &.dataloading {
@@ -256,7 +272,8 @@ figure,
       .transition(none);
     }
 
-    .no-data {
+    .no-data,
+    .nodata {
       display: none;
     }
   }

app/sleek.desktop.js

@@ -140,12 +140,10 @@ define([
       // Render detail view
       // (of full view if there are no listing)
       if (children.detail) {
-        children.detail.setModel(section.collection.at(offset));
-        children.detail.render();
+        children.detail.setModel(section.collection.at(offset), true);
       }
       else {
-        container.setModel(section.collection.at(offset));
-        container.render();
+        container.setModel(section.collection.at(offset), true);
       }
 
       // Render listing if defined

app/sleek.js

@@ -48,6 +48,17 @@ define([
 
   var logger = woodman.getLogger('sleek');
 
+  // The "empty" template is used to display an "Empty feed" empty view when
+  // the underlying feed does not contain any item or has not yet been fetched.
+  // The template should really not be different from one version to another.
+  // TODO: when refactoring templates using "text!" or "tpl!" require.js
+  // plugins, move the template to a separate file along with the other
+  // templates.
+  var templateEmpty = '<div class="single content"><div>' +
+    '<div class="nodata"><%= T("empty") %></div>' +
+    '<div class="loader large">&nbsp;</div>' +
+    '</div></div>';
+
   var Sleek = function () {
     _.bindAll(this, 'initialize',  'setColor', 'slugify');
   };
@@ -254,6 +265,7 @@ define([
             //failsafe if first tab fails to load for some reason
             setTimeout(loaded, 20*1000);
 
+            self.toolbarView.render();
             views.render();
             self.router.historyStart();
           });
@@ -395,8 +407,7 @@ define([
       }
 
       var toolbar = this.createToolbarElement();
-      toolbar.setCollection(sectionCollection);
-      toolbar.render();
+      toolbar.setCollection(sectionCollection, true);
       return toolbar;
     },
 
@@ -422,7 +433,7 @@ define([
         sectionsView = new Item({
           el: '#cards',
           model: new Backbone.Model(),
-          templateEl: '#template-nodata'
+          template: '#template-nodata'
         });
         return sectionsView;
       }
@@ -472,7 +483,7 @@ define([
       logger.log('create toolbar element');
       var Toolbar = List.extend({
         generate: function (cb) {
-          if (this.items.length < 2) {
+          if (this.collection && (this.collection.length < 2)) {
             logger.info('no toolbar element needed');
             $('body').addClass('no-toolbar');
           }
@@ -508,6 +519,11 @@ define([
       return _.bind(function(params) {
         var collection = params.collection;
 
+        if (!collection || collection.length === 0) {
+          logger.log(section.slug, 'view factory', 'create empty element');
+          return this.createEmptyElement(section, collection);
+        }
+
         if (section.outputType === 'photo') {
           logger.log(section.slug, 'view factory',
             'create list element');
@@ -590,8 +606,7 @@ define([
       }
       else if (section.collection.length) {
         logger.log(section.slug, 'show list', 'render list');
-        container.setModel(section.collection.at(0));
-        container.render();
+        container.setModel(section.collection.at(0), true);
       }
     },
 
@@ -643,14 +658,48 @@ define([
         var detail = container.view.children.detail;
 
         if(section.collection.length > offset) {
-          detail.setModel(section.collection.at(offset));
-          detail.render();
+          detail.setModel(section.collection.at(offset), true);
         }
 
         container.view.showChild('detail', 'right');
       }
     },
 
+
+    /**
+     * Creates the element to use to represent an empty collection for
+     * the given section. The collection may be empty because items have
+     * not yet been fetched or because it is empty.
+     *
+     * The collection should be given as parameter to let the view render
+     * a spinner while the collection is being fetched.
+     */
+    createEmptyElement: function (section, collection) {
+      section = section || {};
+      logger.log(section.slug, 'create empty element');
+
+      var viewOptions = {
+        name: section.slug + '-empty',
+        model: new Backbone.Model(),
+        template: templateEmpty
+      };
+
+      if (collection && !collection.fetched) {
+        viewOptions.className = 'loading';
+      }
+
+      var emptyView = new Item(viewOptions);
+
+      if (collection && !collection.fetched) {
+        emptyView.listenTo(collection, 'load', function () {
+          emptyView.$el.removeClass('loading');
+        });
+      }
+
+      return emptyView;
+    },
+
+
     /**
      * Creates the element to use to represent a list of items
      * for the given section.

app/sleek.samsung.js

@@ -500,6 +500,7 @@ define([
           templateEl: tplSel,
           itemFactory: this.itemFactory(section),
           collection: section.collection,
+          translate3d: false,
           className: section.outputType + ' ' + this.getClassName(section.outputType, 'list')
         });
 
@@ -584,8 +585,7 @@ define([
         }
 
         if(detail) {
-          detail.setModel(section.collection.at(offset));
-          detail.render();
+          detail.setModel(section.collection.at(offset), true);
           detail.navFocus();
         }
       }

app/sleek.tablet.js

@@ -153,12 +153,10 @@ define([
       // Render detail view
       // (of full view if there are no listing)
       if (children.detail) {
-        children.detail.setModel(section.collection.at(offset));
-        children.detail.render();
+        children.detail.setModel(section.collection.at(offset), true);
       }
       else if (section.outputType !== 'photo') {
-        container.setModel(section.collection.at(offset));
-        container.render();
+        container.setModel(section.collection.at(offset), true);
       }
 
       // Render listing if defined