Possibility to include all section elements in fullscreen mode

lib/app/js/controllers/element.js

@@ -1,5 +1,5 @@
 angular.module('sgApp')
-  .controller('ElementCtrl', function($scope, $rootScope, $stateParams, $state, Styleguide, Variables, $filter) {
+  .controller('ElementCtrl', function($scope, $rootScope, $stateParams, $state, Styleguide, Variables, $filter, $location) {
 
     var section = $stateParams.section.split('-'),
       reference = section[0],
@@ -70,16 +70,30 @@ angular.module('sgApp')
       }
     }
 
+    function getSectionMarkup(section) {
+      return $filter('setVariables')($filter('setModifierClass')(section.renderMarkup, section.className), $scope.variables);
+    }
+
     function updatePageData() {
-      var sections, result, element, modifierStr;
+      var recursive = $location.search().recursive,
+        separator = '<br>',
+        sections, result, element, markup, modifierStr;
+
       if (!Styleguide.sections.data) {
         return;
       }
       sections = Styleguide.sections.data;
 
       // Find correct element definition from styleguide data
-      result = sections.filter(function(item) {
-        return reference === item.reference;
+      result = sections.filter(function(section) {
+        if (reference === 'all') {
+          return true;
+        }
+        if (recursive) {
+          return new RegExp('^' + reference + '(\\D|$)').test(section.reference);
+        } else {
+          return reference === section.reference;
+        }
       });
 
       if (result.length > 0) {
@@ -91,17 +105,35 @@ angular.module('sgApp')
           $rootScope.pageTitle = element.reference + modifierStr + ' ' + element.header + ' - ' + Styleguide.config.data.title;
         }
 
-        // Select correct modifier element if one is defined
-        if (modifier) {
-          element = element.modifiers[modifier - 1];
-        }
-
         // Set the actual page content
         $scope.previousSection = previousSection(sections, result);
         $scope.nextSection = nextSection(sections, result);
-        $scope.section = element;
         $scope.variables = Variables.variables;
-        $scope.markup = $filter('setVariables')($filter('setModifierClass')(element.renderMarkup, element.className), $scope.variables);
+
+        // Collect every component markup when using recursive mode
+        if (recursive) {
+          markup = '';
+          angular.forEach(result, function(section) {
+            if (section.modifiers && section.modifiers.length > 0) {
+              // If section contains modifier, render every modifier
+              angular.forEach(section.modifiers, function(modifier) {
+                markup += getSectionMarkup(modifier) + separator;
+              });
+            } else {
+              // Otherwise just render the element
+              markup += getSectionMarkup(section) + separator;
+            }
+          });
+        } else {
+          // Select correct modifier element if one is defined
+          if (modifier) {
+            element = element.modifiers[modifier - 1];
+          }
+          markup = getSectionMarkup(element);
+        }
+
+        $scope.section = element;
+        $scope.markup = markup;
       }
     }
   });