SC5 · varya · Nov 17, 2016 · Nov 3, 2016 · Nov 9, 2016 · Nov 9, 2016
diff --git a/lib/app/css/styleguide-app.css b/lib/app/css/styleguide-app.css
@@ -389,6 +389,8 @@ Styleguide 3.1.1
     display: inline-block;
     width: 30%;
     opacity: 1;
+    height: 500px;
+    overflow-y: scroll;    
     @media (--mobile) {
       width: 100%;
       padding-top: 30px;

diff --git a/lib/app/index.html b/lib/app/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" ng-app="sgApp">
+<html lang="en" ng-app="sgApp" route-css-class>
 <head>
   <meta charset="UTF-8">
   <link rel="icon" href="{{{appRoot}}}/assets/img/favicon.ico">

diff --git a/lib/app/js/app.js b/lib/app/js/app.js
@@ -40,6 +40,7 @@ angular.module('sgApp', deps)
         url: '/section/:section',
         templateUrl: 'views/sections.html',
         controller: 'SectionsCtrl',
+        viewClass: 'view-section',
         resolve: {
           loadLazyModule: function($$animateJs, $ocLazyLoad) {
             return loadModule($$animateJs, $ocLazyLoad);
@@ -59,6 +60,7 @@ angular.module('sgApp', deps)
       .state('app.index.overview', {
         url: '/',
         templateUrl: 'overview.html',
+        viewClass: 'view-overview',
         controller: function($rootScope, Styleguide) {
           $rootScope.currentSection = 'overview';
           // Update current reference to update the designer tool view
@@ -131,6 +133,10 @@ angular.module('sgApp', deps)
       }
     };
 
+    $rootScope.$on('$stateChangeSuccess',function(event, toState){
+        $rootScope.viewClass = toState.viewClass;
+    });
+
     // Create global throttled scorll
     function broadcastScrollEvent(event) {
       $rootScope.$broadcast('scroll', event);

diff --git a/lib/app/js/controllers/appCtrl.js b/lib/app/js/controllers/appCtrl.js
@@ -8,11 +8,6 @@ angular.module('sgApp')
     ngProgress.setHeight('');
     ngProgress.setColor('');
 
-    // Scroll top when page is changed
-    $scope.$on('$viewContentLoaded', function() {
-      window.scrollTo(0, 0);
-    });
-
     $scope.$on('progress start', function() {
       ngProgress.start();
     });

diff --git a/lib/app/js/controllers/main.js b/lib/app/js/controllers/main.js
@@ -23,7 +23,7 @@ angular.module('sgApp')
     };
 
     $scope.isSideNav = function() {
-      if($scope.config.data && $scope.config.data.sideNav) {
+      if ($scope.config.data && $scope.config.data.sideNav) {
         return 'sideNav';
       } else if ($scope.config.data && !$scope.config.data.sideNav) {
         return 'topNav';

diff --git a/lib/app/js/directives/rootCssClass.js b/lib/app/js/directives/rootCssClass.js
@@ -0,0 +1,28 @@
+'use strict';
+
+angular.module('sgApp')
+.directive('routeCssClass', function($rootScope) {
+  return {
+    restrict: 'A',
+    scope: {},
+    link: function (scope, elem) {
+      $rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState) {
+        var fromClassnames = angular.isDefined(fromState.viewClass) && angular.isDefined(fromState.viewClass) ? fromState.viewClass : null;
+        var toClassnames = angular.isDefined(toState.viewClass) && angular.isDefined(toState.viewClass) ? toState.viewClass : null;
+
+        fromClassnames = 'root-' + fromClassnames;
+        toClassnames = 'root-' + toClassnames;
+        // don't do anything if they are the same
+        if (fromClassnames !== toClassnames) {
+          if (fromClassnames) {
+            elem.removeClass(fromClassnames);
+          }
+
+          if (toClassnames) {
+            elem.addClass(toClassnames);
+          }
+        }
+      });
+    }
+  };
+});
diff --git a/lib/app/views/main.html b/lib/app/views/main.html
@@ -1,3 +1,4 @@
+<div class="{{viewClass}}">
 <div id="socketDisconnection" class="sg disconnection-icon" title="no socket connection" ng-hide="socketService.isConnected()" ng-if="socketService.isAvailable()">
   <i class="fa fa-chain-broken"></i>
 </div>
@@ -118,7 +119,7 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
 </div>
 
 <div sg-design></div>
-
+</div>
 <footer class="sg sg-footer">
   <div class="sg sg-content">
     <p>

diff --git a/lib/app/views/sections.html b/lib/app/views/sections.html
@@ -28,4 +28,5 @@
       </a>
     </li>
   </ul>
-</div>
+</div>
+<section class="sg sg-after-sections" ng-bind-html="config.data.afterSections | unsafe"></section>
diff --git a/lib/modules/cli/argv.js b/lib/modules/cli/argv.js
@@ -15,6 +15,7 @@ module.exports = function(argLib) {
     .describe('extraHead', 'These HTML elements are injected inside the style guide head-tag')
     .describe('beforeBody', 'These HTML elements are injected inside the style guide body tag, before any other content')
     .describe('afterBody', 'These HTML elements are injected inside the style guide body tag, after any other content')
+    .describe('afterSections', 'These HTML elements are injected after the sections, after all the section content')
     .describe('sideNav', 'This bool use to switch navigation to side nav')
     .describe('commonClass', 'The provided classes are added to all preview blocks in the generated style guide')
     .describe('appRoot', 'Define the appRoot parameter if you are hosting the style guide from a directory other than the root directory of the HTTP server')

diff --git a/lib/modules/cli/styleguide-cli.js b/lib/modules/cli/styleguide-cli.js
@@ -22,6 +22,7 @@ module.exports = function(argv) {
           extraHead: argv.extraHead,
           beforeBody: argv.beforeBody,
           afterBody: argv.afterBody,
+          afterSections: argv.afterSections,
           sideNav: argv.sideNav,
           commonClass: argv.commonClass,
           appRoot: argv.appRoot,

diff --git a/lib/modules/common.js b/lib/modules/common.js
@@ -13,6 +13,7 @@ function sanitizeOptions(opt) {
     extraHead: (typeof opt.extraHead === 'object') ? opt.extraHead.join('\n') : opt.extraHead,
     beforeBody: (typeof opt.beforeBody === 'object') ? opt.beforeBody.join('\n') : opt.beforeBody,
     afterBody: (typeof opt.afterBody === 'object') ? opt.afterBody.join('\n') : opt.afterBody,
+    afterSections: (typeof opt.afterSections === 'object') ? opt.afterSections.join('\n') : opt.afterSections,
     additionalNgDependencies: opt.additionalNgDependencies || false,
     sideNav: opt.sideNav || false,
     disableEncapsulation: opt.disableEncapsulation || false,

diff --git a/lib/styleguide.js b/lib/styleguide.js
@@ -149,7 +149,7 @@ function replaceSectionReferences(json) {
 }
 
 function copyUsedOptionsToJsonConfig(opt, json) {
-  var used = ['appRoot', 'extraHead', 'beforeBody', 'afterBody', 'commonClass', 'title', 'disableEncapsulation', 'disableHtml5Mode', 'readOnly', 'sideNav', 'additionalNgDependencies'];
+  var used = ['appRoot', 'extraHead', 'beforeBody', 'afterBody', 'commonClass', 'title', 'disableEncapsulation', 'disableHtml5Mode', 'readOnly', 'sideNav', 'afterSections', 'additionalNgDependencies'];
   json.config = {};
   used.forEach(function(prop) {
     json.config[prop] = _.cloneDeep(opt[prop]);
@@ -158,7 +158,7 @@ function copyUsedOptionsToJsonConfig(opt, json) {
 }
 
 function copyUsedOptionsToInlineJsonConfig(opt, json) {
-  var used = ['title', 'disableEncapsulation', 'disableHtml5Mode', 'sideNav', 'additionalNgDependencies'];
+  var used = ['title', 'disableEncapsulation', 'disableHtml5Mode', 'sideNav', 'afterSections', 'additionalNgDependencies'];
   json.config = {};
   used.forEach(function(prop) {
     json.config[prop] = _.cloneDeep(opt[prop]);
@@ -329,7 +329,6 @@ module.exports.generate = function(options) {
           indexHtmlProcessed;
 
         overviewProcessed = processOverviewMarkdown(opt);
-
         var cssSrc = [distPath + '/css/styleguide-app.css', distPath + '/css/styleguide_helper_elements.css'];
 
         // Copy all files (except index.html) from dist from to output stream
@@ -389,6 +388,7 @@ module.exports.generate = function(options) {
               title: opt.title,
               extraHead: opt.extraHead,
               beforeBody: opt.beforeBody,
+              afterSections: opt.afterSections,
               afterBody: opt.afterBody,
               sideNav: opt.sideNav,
               styleguideConfig: JSON.stringify(copyUsedOptionsToInlineJsonConfig(opt, {}).config),