Added option showReferenceNumbers

Author: Tuire

README.md

@@ -221,7 +221,12 @@ These HTML elements are injected inside the style guide `head` tag.
 <a name="option-sideNav"></a>
 **sideNav** (boolean, optional, default: false)
 
-Enables side navigation. When this option parameter is enabled, style guide will switch to side navbar.
+Enables side navigation. When this option parameter is enabled, styleguide will switch to side navbar.
+
+<a name="option-showReferenceNumbers"></a>
+**showReferenceNumbers** (boolean, optional, default: false)
+
+When this option parameter is enabled, style guide will show reference numbers on navigation, headings and designer tool.
 
 <a name="option-excludeDefaultStyles"></a>
 **excludeDefaultStyles** (boolean, optional, default: false)

lib/app/css/_fontpath_and_mixin_definition.css

@@ -698,6 +698,15 @@ $fa-version: '4.2.0';
     }
   }
 
+  .sg-section-source-ref {
+    float: right;
+    color: var(--section-header-source-text-color);
+    color: $section-header-source-text-color;
+    font-size: 60%;
+    line-height: 1.777em;
+    margin-left: 0.3em;
+  }
+
   i.fa {
     font-size: 14px;
     padding: 0.4em 0.7em;

lib/app/css/_styleguide_default_styles.css

@@ -1051,6 +1051,16 @@ Styleguide 3.4
       font-size: 60%;
       line-height: 1.777em;
     }
+
+  }
+
+  .sg-section-source-ref {
+    float: right;
+    color: var(--section-header-source-text-color);
+    color: $section-header-source-text-color;
+    font-size: 60%;
+    line-height: 1.777em;
+    margin-left: 0.3em;
   }
 
   i.fa {

lib/app/views/main.html

@@ -44,15 +44,15 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
           ng-class="{ 'active': (currentSection === section.reference), 'sub-active': (currentSection.indexOf(section.reference + '.') === 0) }"
         ng-click="clearSearch()"
         ui-sref="app.index.section({section: section.reference})">
-        <span class="sg-ref">{{ section.reference }}</span> <span ng-bind-html="section.header | unsafe"></span>
+        <span class=“sg-ref” ng-if="config.data.showReferenceNumbers">{{ section.reference }}</span> <span ng-bind-html="section.header | unsafe"></span>
       </a>
       <ul class="sg sg-nav-subsection">
         <li class="sg-nav-item" ng-repeat="subsection in sections.data | filter: filterSubsections(section)">
           <a class="sg sg-nav-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>
+            <span class=“sg-ref” ng-if="config.data.showReferenceNumbers">{{ subsection.reference }}</span> <span ng-bind-html="subsection.header | unsafe"></span>
           </a>
         </li>
       </ul>
@@ -84,23 +84,26 @@ <h1 ng-if="status.hasError">Error: {{status.error.name}}</h1>
             ng-class="{ 'active': (currentSection === section.reference), 'sub-active': (currentSection.indexOf(section.reference + '.') === 0) }"
           ng-click="clearSearch(); show = !show;"
           ui-sref="{{isMainSectionNavigable()}}">
-          <span class="sg-ref">{{ section.reference }}</span> <span ng-bind-html="section.header | unsafe"></span>
+          <span class=“sg-ref” ng-if="config.data.showReferenceNumbers">{{ section.reference }}</span> <span ng-bind-html="section.header | unsafe"></span>
         </a>
         <ul class="sg-nav-subsection" ng-show="show">
           <li class="sg sg-nav-item" ng-repeat="subsection in sections.data | filter: filterSubsections(section)">
             <a class="sg sg-nav-link"
               ng-class="currentSection === subsection.reference ? 'active' : ''"
               ng-click="clearSearch(); showSub = !showSub;"
               ui-sref="app.index.section({section: subsection.reference})">
-              <span class="sg-ref" ng-class="{'plus': hasSubsections(subsection), 'minus': hasSubsections(subsection) && showSub}">{{ subsection.reference }}</span> <span ng-bind-html="subsection.header | unsafe"></span>
+              <span class="sg-ref" ng-class="{'plus': hasSubsections(subsection), 'minus': hasSubsections(subsection) && showSub}" ng-if=“config.data.showReferenceNumbers”>
+                {{ subsection.reference }}
+              </span> 
+              <span ng-bind-html="subsection.header | unsafe"></span>
             </a>
             <ul class="sg-nav-subsubsection" ng-show="showSub">
               <li class="sg sg-nav-item" ng-repeat="subsubsection in sections.data | filter: filterSubsections(subsection)">
                 <a class="sg sg-nav-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>
+                  <span class="sg-ref" ng-if=“config.data.showReferenceNumbers”>{{ subsubsection.reference }}</span> <span ng-bind-html="subsubsection.header | unsafe"></span>
                 </a>
               </li>
             </ul>

lib/app/views/partials/design.html

@@ -12,7 +12,10 @@
     </div>
     <a class="sg" ng-click="showRelated = true" ng-hide="showRelated">Show only related variables</a>
     <a class="sg" ng-click="showRelated = false" ng-show="showRelated">Show all variables</a>
-    <h3 class="sg" ng-show="showRelated">{{currentReference.section.reference}} <span ng-bind-html="currentReference.section.header | unsafe"></span></h3>
+    <h3 class="sg" ng-show="showRelated">
+      <span ng-if="config.data.showReferenceNumbers">{{currentReference.section.reference}}</span> 
+      <span ng-bind-html="currentReference.section.header | unsafe"></span>
+    </h3>
     <h3 class="sg" ng-hide="showRelated">All variables</h3>
     <ul class="sg">
       <li ng-hide="showRelated" ng-repeat="variable in variables">

lib/app/views/partials/section.html

@@ -4,9 +4,10 @@
     <a ui-sref="app.index.section({section: '{{section.reference}}'})">
       <i class="fa fa-link"></i>
       <h1 class="sg">
-        <span class="sg-reference-number">{{ section.reference }}</span>
+        <span class="sg-reference-number"  ng-if="config.data.showReferenceNumbers">{{ section.reference }}</span>
         <span ng-bind-html="section.header | unsafe"></span>
-        <span class="sg-section-source">{{ section.file }}</span>
+        <span class="sg-section-source-ref" ng-if="!config.data.showReferenceNumbers">{{ section.reference }}</span>
+        <span class="sg-section-source">{{ section.file }} </span>
       </h1>
     </a>
   </header>

lib/app/views/sections.html

@@ -15,14 +15,16 @@
           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>
+          <span class="sg-ref"  ng-if=“data.showReferenceNumbers”>{{ 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>
+                <span class="sg-ref" ng-if=“data.showReferenceNumbers”>{{ subsubsection.reference }}</span>
+                <span ng-bind-html="subsubsection.header | unsafe"></span>
               </a>
             </li>
           </ul>

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,
+    showReferenceNumbers: opt.showReferenceNumbers || false,
     showMarkupSection: opt.showMarkupSection || false,
     hideSubsectionsOnMainSection: opt.hideSubsectionsOnMainSection || false, 
     disableEncapsulation: opt.disableEncapsulation || false,

lib/styleguide.js

@@ -152,16 +152,44 @@ function replaceSectionReferences(json) {
 }
 
 function copyUsedOptionsToJsonConfig(opt, json) {
-  var used = ['appRoot', 'extraHead', 'beforeBody', 'afterBody', 'commonClass', 'title', 'disableEncapsulation', 'disableHtml5Mode', 'readOnly', 'sideNav', 'afterSections', 'showMarkupSection', 'hideSubsectionsOnMainSection', 'excludeDefaultStyles','additionalNgDependencies'];
+  var used = [
+    'appRoot',
+    'extraHead',
+    'beforeBody',
+    'afterBody',
+    'commonClass',
+    'title',
+    'disableEncapsulation',
+    'disableHtml5Mode',
+    'readOnly',
+    'sideNav',
+    'showReferenceNumbers',
+    'afterSections',
+    'showMarkupSection',
+    'hideSubsectionsOnMainSection',
+    'excludeDefaultStyles',
+    'additionalNgDependencies',
+  ];
   json.config = {};
   used.forEach(function(prop) {
     json.config[prop] = _.cloneDeep(opt[prop]);
   });
+
   return json;
 }
 
 function copyUsedOptionsToInlineJsonConfig(opt, json) {
-  var used = ['title', 'disableEncapsulation', 'disableHtml5Mode', 'sideNav', 'afterSections', 'showMarkupSection', 'hideSubsectionsOnMainSection','additionalNgDependencies'];
+  var used = [
+    'title',
+    'disableEncapsulation',
+    'disableHtml5Mode',
+    'sideNav',
+    'showReferenceNumbers',
+    'afterSections',
+    'showMarkupSection',
+    'hideSubsectionsOnMainSection',
+    'additionalNgDependencies',
+  ];
   json.config = {};
   used.forEach(function(prop) {
     json.config[prop] = _.cloneDeep(opt[prop]);