Merge pull request #1039 from junaidrsd/feature-option-show-markup-se…

…ction Feature option show markup section
SC5 · Nov 28, 2016 · 4e38cf8 · 4e38cf8
2 parents 0b66c13 + dce8e80
commit 4e38cf8
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 44 deletions.
diff --git a/README.md b/README.md
@@ -212,6 +212,11 @@ These HTML elements are injected inside the style guide `head` tag.
 
 Enables side navigation. When this option parameter is enabled, style guide will switch to side navbar.
 
+<a name="option-showMarkupSection"></a>
+**showMarkupSection** (boolean, optional, default: true)
+
+Show/hide Markup section.
+
 <a name="option-beforeBody"></a>
 **beforeBody** (array or string, optional)
 
@@ -222,6 +227,11 @@ These HTML elements are injected inside the style guide `<body>` tag, before any
 
 These HTML elements are injected inside the style guide `<body>` tag, after any other content.
 
+<a name="option-afterSections"></a>
+**afterSections** (array or string, optional)
+
+These HTML elements are injected inside the style guide `.sg-body` section, after any other content.
+
 <a name="option-commonClass"></a>
 **commonClass** (string or array of strings, optional)
 

diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -81,6 +81,7 @@ gulp.task('dev:generate', () => {
     .pipe(styleguide.generate({
       title: 'SC5 Styleguide',
       sideNav: false,
+      showMarkupSection: true,
       server: true,
       rootPath: outputPath,
       overviewPath: 'README.md',

diff --git a/lib/app/js/controllers/main.js b/lib/app/js/controllers/main.js
@@ -3,19 +3,25 @@
 angular.module('sgApp')
   .controller('MainCtrl', function($scope, $location, $state, Styleguide, Variables, localStorageService, Socket) {
 
-    $scope.isNavCollapsed = false;
-    $scope.markupSection = {isVisible: true};
-    $scope.designerTool = {isVisible: false};
-
-    localStorageService.bind($scope, 'markupSection', {isVisible: true});
-    localStorageService.bind($scope, 'designerTool', {isVisible: false});
-
     // Bind scope variables to service updates
     $scope.sections = Styleguide.sections;
     $scope.config = Styleguide.config;
     $scope.status = Styleguide.status;
     $scope.variables = Variables.variables;
     $scope.toggleMenu = true;
+    $scope.toggleMenu = false;
+    $scope.isNavCollapsed = false;
+    $scope.markupSection = {isVisible: ''};
+
+    $scope.$watch('config.data', function() {
+      if ($scope.config.data) {
+        $scope.markupSection = {isVisible: $scope.config.data.showMarkupSection};
+        localStorageService.bind($scope, 'markupSection', {isVisible: $scope.config.data.showMarkupSection});
+      }
+    });
+
+    $scope.designerTool = {isVisible: false};
+    localStorageService.bind($scope, 'designerTool', {isVisible: false});
 
     $scope.toggleSideNav = function(toggleMenu) {
       $scope.toggleMenu = !toggleMenu;
@@ -54,6 +60,7 @@ angular.module('sgApp')
           return;
         }
       });
+
       return result;
     };
 

diff --git a/lib/app/views/sections.html b/lib/app/views/sections.html
@@ -1,32 +1,34 @@
-<article
-  sg-section
-  ng-repeat="section in sections.data | filter: filterSections | filter: search">
-</article>
-<div class="sg sg-section-links" ng-repeat="section in sections.data | filter: filterMainSections()" ng-if="isMainSection(section) && isActive(section)">
-  <a class="sg sg-section-link"
-      ng-class="{ 'active': (currentSection === section.reference), 'sub-active': (currentSection.indexOf(section.reference + '.') === 0) }"
-    ng-click="clearSearch()"
-    ui-sref="app.index.section({section: section.reference})">
-  </a>
-  <ul class="sg sg-subsection-links">
-    <li class="sg sg-section-list-item" ng-repeat="subsection in sections.data | filter: filterSubsections(section)">
-      <a class="sg sg-section-link"
-        ng-class="currentSection === subsection.reference ? 'active' : ''"
-        ng-click="clearSearch()"
-        ui-sref="app.index.section({section: subsection.reference})">
-        <span class="sg-ref">{{ subsection.reference }}</span> <span ng-bind-html="subsection.header | unsafe"></span>
-        <ul class="sg sg-nav-subsubsection sg-subsubsection-links">
-          <li class="sg sg-section-list-item" ng-repeat="subsubsection in sections.data | filter: filterSubsections(subsection)">
-            <a class="sg sg-section-link"
-              ng-class="currentSection === subsubsection.reference ? 'active' : ''"
-              ng-click="clearSearch()"
-              ui-sref="app.index.section({section: subsubsection.reference})">
-              <span class="sg-ref">{{ subsubsection.reference }}</span> <span ng-bind-html="subsubsection.header | unsafe"></span>
-            </a>
-          </li>
-        </ul>
-      </a>
-    </li>
-  </ul>
-</div>
-<section class="sg sg-after-sections" ng-bind-html="config.data.afterSections | unsafe"></section>
+<section class="sg sg-sections">
+  <article
+    sg-section
+    ng-repeat="section in sections.data | filter: filterSections | filter: search">
+  </article>
+  <section class="sg sg-section-links" ng-repeat="section in sections.data | filter: filterMainSections()" ng-if="isMainSection(section) && isActive(section)">
+    <a class="sg sg-section-link"
+        ng-class="{ 'active': (currentSection === section.reference), 'sub-active': (currentSection.indexOf(section.reference + '.') === 0) }"
+      ng-click="clearSearch()"
+      ui-sref="app.index.section({section: section.reference})">
+    </a>
+    <ul class="sg sg-subsection-links">
+      <li class="sg sg-section-list-item" ng-repeat="subsection in sections.data | filter: filterSubsections(section)">
+        <a class="sg sg-section-link"
+          ng-class="currentSection === subsection.reference ? 'active' : ''"
+          ng-click="clearSearch()"
+          ui-sref="app.index.section({section: subsection.reference})">
+          <span class="sg-ref">{{ subsection.reference }}</span> <span ng-bind-html="subsection.header | unsafe"></span>
+          <ul class="sg sg-nav-subsubsection sg-subsubsection-links">
+            <li class="sg sg-section-list-item" ng-repeat="subsubsection in sections.data | filter: filterSubsections(subsection)">
+              <a class="sg sg-section-link"
+                ng-class="currentSection === subsubsection.reference ? 'active' : ''"
+                ng-click="clearSearch()"
+                ui-sref="app.index.section({section: subsubsection.reference})">
+                <span class="sg-ref">{{ subsubsection.reference }}</span> <span ng-bind-html="subsubsection.header | unsafe"></span>
+              </a>
+            </li>
+          </ul>
+        </a>
+      </li>
+    </ul>
+  </section>
+</section>
+<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
@@ -16,7 +16,8 @@ module.exports = function(argLib) {
     .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('sideNav', 'This bool option is used to switch navigation to side nav')
+    .describe('showMarkupSection', 'This bool option is for hiding markup section. By default markup is visible.')
     .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')
     .describe('styleVariables', 'Specify the files to parse variable definitions from (defaults to all files/glob pattern passed to kssSource')

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

diff --git a/lib/modules/common.js b/lib/modules/common.js
@@ -16,6 +16,7 @@ function sanitizeOptions(opt) {
     afterSections: (typeof opt.afterSections === 'object') ? opt.afterSections.join('\n') : opt.afterSections,
     additionalNgDependencies: opt.additionalNgDependencies || false,
     sideNav: opt.sideNav || false,
+    showMarkupSection: opt.showMarkupSection || false,
     disableEncapsulation: opt.disableEncapsulation || false,
     disableHtml5Mode: opt.disableHtml5Mode || (typeof opt.disableHtml5Mode === 'undefined' && !opt.server) || false,
     appRoot: opt.appRoot || '',

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', 'afterSections', 'additionalNgDependencies'];
+  var used = ['appRoot', 'extraHead', 'beforeBody', 'afterBody', 'commonClass', 'title', 'disableEncapsulation', 'disableHtml5Mode', 'readOnly', 'sideNav', 'afterSections', 'showMarkupSection', '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', 'afterSections', 'additionalNgDependencies'];
+  var used = ['title', 'disableEncapsulation', 'disableHtml5Mode', 'sideNav', 'afterSections', 'showMarkupSection', 'additionalNgDependencies'];
   json.config = {};
   used.forEach(function(prop) {
     json.config[prop] = _.cloneDeep(opt[prop]);
@@ -391,6 +391,7 @@ module.exports.generate = function(options) {
               afterSections: opt.afterSections,
               afterBody: opt.afterBody,
               sideNav: opt.sideNav,
+              showMarkupSection: opt.showMarkupSection,
               styleguideConfig: JSON.stringify(copyUsedOptionsToInlineJsonConfig(opt, {}).config),
               appRoot: opt.appRoot,
               socketIo: opt.server,

diff --git a/test/angular/unit/controllers/main.test.js b/test/angular/unit/controllers/main.test.js
@@ -23,7 +23,8 @@ describe('Controller: MainCtrl', function() {
       },
       config: {
         data: {
-          title: 'Page Title'
+          title: 'Page Title',
+          showMarkupSection: true
         }
       }
     };
@@ -74,7 +75,7 @@ describe('Controller: MainCtrl', function() {
   });
 
   it('should have markup shown by default', function() {
-    expect(scope.markupSection.isVisible).to.eql(true);
+    expect(scope.markupSection.isVisible).to.eql(styleguideData.config.data.showMarkupSection);
   });
 
   describe('toggle sideNav', function() {