Empty Regions

applications/default/extensions/layout/layout.js

@@ -94,6 +94,10 @@ layout.type = function(types, callback) {
       region: {
         title: 'Region',
         type: 'boolean'
+      },
+      alwaysRender: {
+        title: 'Always Render',
+        type: 'boolean'
       }
     }
   };
@@ -125,6 +129,10 @@ layout.type = function(types, callback) {
       region: {
         title: 'Region',
         type: 'boolean'
+      },
+      alwaysRender: {
+        title: 'Always Render',
+        type: 'boolean'
       }
     }
   };

applications/default/extensions/layout/public/templates/column.html

@@ -1,3 +1,3 @@
-<div ng-if="column.region" ng-include="'/templates/region.html'" ng-controller="RegionController"></div>
+<div ng-if="column.region && !column.empty" ng-include="'/templates/region.html'" ng-controller="RegionController"></div>
 <!-- Rows -->
-<div ng-repeat="row in column.rows | orderBy:'weight'" ng-controller="RowController" ng-include="getTemplate()" class="row-{{row.name}} row-fluid"></div>
+<div ng-repeat="row in column.rows | orderBy:'weight'" ng-if="!row.empty" ng-controller="RowController" ng-include="getTemplate()" class="row-{{row.name}} row-fluid"></div>

applications/default/extensions/layout/public/templates/layout.html

@@ -1,2 +1,2 @@
 <!-- Rows -->
-<div ng-repeat="row in layout.rows | orderBy:'weight'" ng-controller="RowController" ng-include="row.template || '/templates/row.html'" class="row-{{row.name}} row-fluid"></div>
+<div ng-repeat="row in layout.rows | orderBy:'weight'" ng-if="!row.empty" ng-controller="RowController" ng-include="row.template || '/templates/row.html'" class="row-{{row.name}} row-fluid"></div>

applications/default/extensions/layout/public/templates/row.html

@@ -1,5 +1,5 @@
 <div ng-class="row.classes" class="container">
-  <div ng-if="row.region" ng-include="'/templates/region.html'" ng-controller="RegionController"></div>
+  <div ng-if="row.region && !row.empty" ng-include="'/templates/region.html'" ng-controller="RegionController"></div>
   <!-- Columns -->
-  <div ng-repeat="column in row.columns | orderBy:'weight'" ng-controller="ColumnController" ng-include="getTemplate()" ng-class="column.classes" class="column-{{column.name}} col-md-{{column.width}}"></div>
+  <div ng-repeat="column in row.columns | orderBy:'weight'" ng-if="!column.empty" ng-controller="ColumnController" ng-include="getTemplate()" ng-class="column.classes" class="column-{{column.name}} col-md-{{column.width}}"></div>
 </div>

applications/default/extensions/panel/panel.js

@@ -234,19 +234,24 @@ panel.contextReactionType = function(reactionTypes, callback) {
       }
     },
     react: function(request, response, regionPanels, callback) {
+
+      // Get panel type.
+      var Panel = self.application.type('panel'); 
+
       // Initialize panels container if not initialized yet.
       response.payload.panels = response.payload.panels || {};
 
       // Add all panels to response payload.
       async.each(Object.keys(regionPanels), function(regionName, next) {
+
         // Initialize panels container if not initialized yet.
         response.payload.panels[regionName] = response.payload.panels[regionName] || [];
         var panels = regionPanels[regionName];
+
         // A context can set several panels for a region.
         async.each(panels, function(regionPanel, next) {
-          // Load the panel.
-          var Panel = self.application.type('panel');
 
+          // Load the panel.
           Panel.load(regionPanel.name, function(err, panel) {
             if (err) {
               return callback(err);
@@ -274,3 +279,45 @@ panel.contextReactionType = function(reactionTypes, callback) {
 
   callback(null, newReactionTypes);
 };
+
+/**
+ * The response() hook.
+ */
+panel.response = function (payload, request, response, callback) {
+
+  var layout = payload.data && payload.data.layout; 
+  var panels = payload.data && payload.data.panels;
+
+  if (layout && panels) {
+
+    /**
+     * Recursively verifies if a row/column is empty.
+     */
+    function findContent(region, childType) {
+
+      // Consider empty by default, unless when region is told to always be
+      // rendered.
+      region.empty = region.alwaysRender ? false : true;
+
+      // Check if region has content.
+      if (region.empty && region.region == true) {
+        region.empty = !Boolean(panels[region.name] && panels[region.name].length);
+      }
+
+      // Iterate recursively
+      if (region[childType] && region[childType].length) {
+        region[childType].forEach(function (childRegion) {
+          var childEmpty = findContent(childRegion, childType == 'rows' ? 'columns' : 'rows');
+          region.empty = !region.empty ? region.empty : childEmpty;
+        });
+      }
+
+      return region.empty;
+    }
+
+    // As a layout contains rows, it behaves much like a column itself.
+    findContent(layout, 'rows');
+  }
+
+  callback();
+};