nitweb: add sumaries to doc pages
authorAlexandre Terrasa <alexandre@moz-code.org>
Sat, 3 Dec 2016 02:10:38 +0000 (21:10 -0500)
committerAlexandre Terrasa <alexandre@moz-code.org>
Mon, 5 Dec 2016 16:01:44 +0000 (11:01 -0500)
Signed-off-by: Alexandre Terrasa <alexandre@moz-code.org>

share/nitweb/directives/ui-summary.html [new file with mode: 0644]
share/nitweb/javascripts/nitweb.js
share/nitweb/javascripts/ui.js
share/nitweb/stylesheets/nitweb.css
share/nitweb/views/class.html
share/nitweb/views/group.html
share/nitweb/views/module.html
share/nitweb/views/package.html
share/nitweb/views/property.html

diff --git a/share/nitweb/directives/ui-summary.html b/share/nitweb/directives/ui-summary.html
new file mode 100644 (file)
index 0000000..3edf99d
--- /dev/null
@@ -0,0 +1,23 @@
+<div>
+       <h4>Summary</h4>
+       <div ng-repeat='entry in headings' class='summary'>
+               <h1 ng-if='entry.level == 1'>
+                       <a ng-click='goTo(entry)'>{{entry.text}}</a>
+               </h1>
+               <h2 ng-if='entry.level == 2'>
+                       <a ng-click='goTo(entry)'>{{entry.text}}</a>
+               </h2>
+               <h3 ng-if='entry.level == 3'>
+                       <a ng-click='goTo(entry)'>{{entry.text}}</a>
+               </h3>
+               <h4 ng-if='entry.level == 4'>
+                       <a ng-click='goTo(entry)'>{{entry.text}}</a>
+               </h4>
+               <h5 ng-if='entry.level == 5'>
+                       <a ng-click='goTo(entry)'>{{entry.text}}</a>
+               </h5>
+               <h6 ng-if='entry.level == 6'>
+                       <a ng-click='goTo(entry)'>{{entry.text}}</a>
+               </h6>
+       </div>
+</div>
index 6cac103..f3ba26d 100644 (file)
@@ -51,7 +51,8 @@
                        .when('/doc/:id', {
                                templateUrl: 'views/doc.html',
                                controller: 'EntityCtrl',
-                               controllerAs: 'entityCtrl'
+                               controllerAs: 'entityCtrl',
+                               reloadOnSearch: false
                        })
                        .otherwise({
                                templateUrl: 'views/error.html'
index f33a439..e9f91d2 100644 (file)
                        };
                })
 
+               .directive('uiSummary', function($rootScope, $location, $anchorScroll) {
+                       return {
+                               restrict: 'E',
+                               scope: {
+                                       target: '@'
+                               },
+                               replace: true,
+                               templateUrl: '/directives/ui-summary.html',
+                               link: function ($scope, element, attrs) {
+                                       $scope.goTo = function(entity) {
+                                               $location.hash(entity.id);
+                                       }
+
+                                       $scope.textToId = function(text) {
+                                               return text.replace(/ /g, '-').replace(/[^A-Za-z_-]/g, '');
+                                       }
+
+                                       $rootScope.reloadSummary = function() {
+                                               var h = angular.element(document.querySelectorAll(
+                                                       $scope.target + ' h1, ' +
+                                                       $scope.target + ' h2, ' +
+                                                       $scope.target + ' h3, ' +
+                                                       $scope.target + ' h4, ' +
+                                                       $scope.target + ' h5, ' +
+                                                       $scope.target + ' h6 '));
+
+                                               $scope.headings = [];
+                                               angular.forEach(h, function(heading) {
+                                                       var head = angular.element(heading);
+                                                       if(!head.is(':visible')) { return ; }
+                                                       var text = head.text().trim();
+                                                       var id = $scope.textToId(text);
+                                                       if(!head.attr('id')) {
+                                                               head.attr('id', id);
+                                                       } else {
+                                                               id = head.attr('id');
+                                                       }
+                                                       $scope.headings.push({
+                                                               id: id,
+                                                               text: text,
+                                                               level: parseInt(head[0].nodeName[1])
+                                                       });
+                                               });
+                                               $anchorScroll();
+                                       }
+
+                                       $scope.$watch('target', function() {
+                                               setTimeout(function() {
+                                                       $rootScope.reloadSummary();
+                                               }, 100);
+                                       });
+                               }
+                       };
+               })
+
                .directive('uiFilterForm', function() {
                        return {
                                restrict: 'E',
index 23facdf..3ca9e18 100644 (file)
@@ -94,7 +94,7 @@ entity-list:hover .btn-filter {
 /* doc */
 
 .nitdoc .synopsys {
-       font-size: 2em;
+       margin-top: 0;
 }
 
 .signature {
@@ -224,6 +224,23 @@ entity-list:hover .btn-filter {
        margin-bottom: 0px;
 }
 
+/* Summary */
+
+.summary h1, .summary h2, .summary h3, .summary h4, .summary h5, .summary h6 {
+       margin: 5px 0;
+}
+
+.summary h1 a, .summary h2 a, .summary h3 a, .summary h4 a, .summary h5 a, .summary h6 a {
+       color: #555;
+}
+
+.summary h1 { font-size: 14px; margin-left: 0px; font-weight: bold; }
+.summary h2 { font-size: 13px; margin-left: 5px; font-weight: bold; }
+.summary h3 { font-size: 12px; margin-left: 10px; }
+.summary h4 { font-size: 11px; margin-left: 15px; }
+.summary h5 { font-size: 10px; margin-left: 20px; }
+.summary h6 { font-size: 9px; margin-left: 25px; }
+
 /*
  * Ratings
  */
index 445ef37..70ec753 100644 (file)
 
 <div class='tab-content'>
        <div role='tabpanel' class='tab-pane fade in active' id='doc'>
-               <entity-card mentity='mentity' default-tab='doc' no-synopsis='true' />
+               <div class='col-xs-3'>
+                       <ui-summary target='#summary-content' />
+               </div>
+               <div id='summary-content' class='col-xs-9'>
+                       <entity-card mentity='mentity' default-tab='doc' no-synopsis='true' />
 
-               <entity-list list-title='Parents'
-                       list-entities='mentity.parents'
-                       list-object-filter='{}' />
+                       <entity-list list-title='Parents'
+                               list-entities='mentity.parents'
+                               list-object-filter='{}' />
 
-               <entity-list list-title='Constructors'
-                       list-entities='mentity.all_mproperties'
-                       list-object-filter='{is_init: true}' />
+                       <entity-list list-title='Constructors'
+                               list-entities='mentity.all_mproperties'
+                               list-object-filter='{is_init: true}' />
 
-               <entity-list list-title='Introduced properties'
-                       list-entities='mentity.intro_mproperties'
-                       list-object-filter='{is_init: "!true"}' />
+                       <entity-list list-title='Introduced properties'
+                               list-entities='mentity.intro_mproperties'
+                               list-object-filter='{is_init: "!true"}' />
 
-               <entity-list list-title='Redefined properties'
-                       list-entities='mentity.redef_mproperties'
-                       list-object-filter='{is_init: "!true"}' />
+                       <entity-list list-title='Redefined properties'
+                               list-entities='mentity.redef_mproperties'
+                               list-object-filter='{is_init: "!true"}' />
+               </div>
        </div>
        <div role='tabpanel' class='tab-pane fade' id='all_props'>
                <entity-list list-title='All properties' list-entities='mentity.all_mproperties'
index 46a2c51..0f7347b 100644 (file)
 
 <div class='tab-content'>
        <div role='tabpanel' class='tab-pane fade in active' id='doc'>
-               <entity-card mentity='mentity' default-tab='doc' no-synopsis='true' />
+               <div class='col-xs-3'>
+                       <ui-summary target='#summary-content' />
+               </div>
+               <div class='col-xs-9' id='summary-content'>
+                       <entity-card mentity='mentity' default-tab='doc' no-synopsis='true' />
 
-               <entity-list list-title='Parent group' list-entities='[mentity.parent]'
-                       list-object-filter='{}' ng-if='mentity.parent' />
+                       <entity-list list-title='Parent group' list-entities='[mentity.parent]'
+                               list-object-filter='{}' ng-if='mentity.parent' />
 
-               <entity-list list-title='Subgroups' list-entities='mentity.mgroups'
-                       list-object-filter='{}' />
+                       <entity-list list-title='Subgroups' list-entities='mentity.mgroups'
+                               list-object-filter='{}' />
 
-               <entity-list list-title='Modules' list-entities='mentity.mmodules'
-                       list-object-filter='{}' />
+                       <entity-list list-title='Modules' list-entities='mentity.mmodules'
+                               list-object-filter='{}' />
+               </div>
        </div>
        <div role='tabpanel' class='tab-pane fade' id='graph'>
                <div class='card'>
index 92ec2f9..304b14b 100644 (file)
 
 <div class='tab-content'>
        <div role='tabpanel' class='tab-pane fade in active' id='doc'>
-               <entity-card mentity='mentity' default-tab='doc' no-synopsis='true' />
-
-               <entity-list list-title='Imported modules' list-entities='mentity.imports'
-                       list-object-filter='{}' />
+               <div class='col-xs-3'>
+                       <ui-summary target='#summary-content' />
+               </div>
+               <div class='col-xs-9' id='summary-content'>
+                       <entity-card mentity='mentity' default-tab='doc' no-synopsis='true' />
 
-               <entity-list list-title='Introduced classes' list-entities='mentity.intro_mclasses'
-                       list-object-filter='{}' />
+                       <entity-list list-title='Imported modules' list-entities='mentity.imports'
+                               list-object-filter='{}' />
 
-               <entity-list list-title='Class redefinitions' list-entities='mentity.redef_mclassdefs'
-                       list-object-filter='{}' />
+                       <entity-list list-title='Introduced classes' list-entities='mentity.intro_mclasses'
+                               list-object-filter='{}' />
 
+                       <entity-list list-title='Class redefinitions' list-entities='mentity.redef_mclassdefs'
+                               list-object-filter='{}' />
+               </div>
        </div>
        <div role='tabpanel' class='tab-pane fade' id='code'>
                <div class='card'>
index 33b360b..38b1bf6 100644 (file)
 
 <div class='tab-content'>
        <div role='tabpanel' class='tab-pane fade in active' id='doc'>
-               <entity-card mentity='mentity' default-tab='doc' no-synopsis='true' />
+               <div class='col-xs-3'>
+                       <ui-summary target='#summary-content' />
+               </div>
+               <div class='col-xs-9' id='summary-content'>
+                       <entity-card mentity='mentity' default-tab='doc' no-synopsis='true' />
 
-               <entity-list list-title='Groups' list-entities='mentity.mgroups'
-                       list-object-filter='{}' />
+                       <entity-list list-title='Groups' list-entities='mentity.mgroups'
+                               list-object-filter='{}' />
+               </div>
        </div>
        <div role='tabpanel' class='tab-pane fade' id='graph'>
                <div class='card'>
index a3c2281..345a3bf 100644 (file)
 
 <div class='tab-content'>
        <div role='tabpanel' class='tab-pane fade in active' id='doc'>
-               <entity-card mentity='mentity' default-tab='doc' no-synopsis='true' />
+               <div class='col-xs-3'>
+                       <ui-summary target='#summary-content' />
+               </div>
+               <div class='col-xs-9' id='summary-content'>
+                       <entity-card mentity='mentity' default-tab='doc' no-synopsis='true' />
+               </div>
        </div>
        <div role='tabpanel' class='tab-pane fade' id='linearization'>
                <entity-linearization