Merge pull request #10625 from MoonE/apidoc-cleanup-navigation

Apidoc cleanup navigation html

config/jsdoc/api/template/static/scripts/main.js

@@ -33,7 +33,7 @@ $(function () {
 
     if (value && value.length > 1) {
       var regexp = new RegExp(value, 'i');
-      $el.find('li, .itemMembers').hide();
+      $el.find('li, .member-list').hide();
 
       $el.find('li').each(function (i, v) {
         const $item = $(v);
@@ -41,7 +41,7 @@ $(function () {
 
         if (name && regexp.test(name)) {
           const $classEntry = $item.closest('.item');
-          const $members = $item.closest('.itemMembers');
+          const $members = $item.closest('.member-list');
 
           // Do the weight thing
           $classEntry.removeData('weight');
@@ -60,7 +60,7 @@ $(function () {
         .appendTo(".navigation ul.list"); // append again to the list
 
     } else {
-      $el.find('.item, .itemMembers').show();
+      $el.find('.item, .member-list').show();
     }
 
     $el.find('.list').scrollTop(0);
@@ -68,7 +68,7 @@ $(function () {
 
   // Toggle when click an item element
   $('.navigation').on('click', '.toggle', function (e) {
-    $(this).parent().parent().find('.itemMembers').toggle();
+    $(this).parent().parent().find('.member-list').toggle();
   });
 
   // Show an item related a current documentation automatically
@@ -84,7 +84,7 @@ $(function () {
       .remove()
       .prependTo('.navigation .list')
       .show()
-      .find('.itemMembers')
+      .find('.member-list')
       .show();
   }
 

config/jsdoc/api/template/static/styles/jaguar.css

@@ -183,7 +183,7 @@ li {
   padding-left: 8px;
   margin-top: 2px;
 }
-.navigation li.item .itemMembers {
+.navigation li.item .member-list {
   display: none;
   padding-left: 8px;
 }

config/jsdoc/api/template/tmpl/navigation.tmpl

@@ -1,95 +1,59 @@
 <?js
 var self = this;
+
 function toShortName(name) {
     return name.indexOf('module:') === 0 ? name.split('/').pop() : name;
 }
+
+function getItemCssClass(type) {
+    if (type === 'module') {
+        return 'glyphicon-plus';
+    } else if (type === 'class') {
+        return 'glyphicon-chevron-right';
+    }
+    return '';
+}
+
+const printList = v => { ?>
+                    <li data-name="<?js= v.longname ?>"><?js
+}
+const printListWithStability = v => {
+    const cls = v.stability && v.stability !== 'stable' ? ' class="unstable"' : ''; ?>
+                    <li data-name="<?js= v.longname ?>"<?js= cls ?>><?js
+}
+
+function listContent(item, title, listItemPrinter) {
+    const type = title.toLowerCase();
+    if (item[type] && item[type].length) { ?>
+            <div class="member-list">
+                <span class="subtitle"><?js= title ?></span>
+                <ul><?js
+        item[type].forEach(function (v) {
+            listItemPrinter(v); ?><?js= self.linkto(v.longname, toShortName(v.name)) ?><?js
+         }); ?>
+                </ul>
+            </div><?js
+    }
+}
 ?>
 <div class="navigation">
     <div class="search">
         <input id="search" type="text" class="form-control input-sm" placeholder="Search Documentation">
     </div>
-    <ul class="list">
+    <ul class="list"><?js
-    <?js
+        this.nav.forEach(function (item) { ?>
-        this.nav.forEach(function (item) {
-    ?>
         <li class="item" data-name="<?js= item.longname ?>" data-shortname="<?js= item.name.toLowerCase() ?>">
             <span class="title">
-                <?js if (item.type === 'module') { ?>
+                <span class="glyphicon <?js= getItemCssClass(item.type) ?> toggle"></span>
-                    <span class="glyphicon glyphicon-plus toggle"></span>
-                <?js } else if (item.type === 'class') { ?>
-                    <span class="glyphicon glyphicon-chevron-right toggle"></span>
-                <?js } ?>
                 <?js= self.linkto(item.longname, item.prettyname) ?>
-                <?js if (item.type === 'namespace' &&
+            </span><?js
-                        (item.members.length + item.typedefs.length + item.methods.length +
+                listContent(item, 'Members', printList);
-                            item.events.length > 0)) { ?>
+                listContent(item, 'Typedefs', printListWithStability);
-                <?js } ?>
+                listContent(item, 'Methods', printListWithStability);
-            </span>
+                if (item.fires) {
-            <ul class="members itemMembers">
+                    const fires = item.fires.map(v => self.find({longname: v})[0] || {longname: v, name: v.split(/#?event:/)[1]});
-            <?js
+                    listContent({fires: fires}, 'Fires', printListWithStability)
-            if (item.members.length) {
+                }
-            ?>
+        }); ?>
-            <span class="subtitle">Members</span>
-            <?js
-                item.members.forEach(function (v) {
-            ?>
-                <li data-name="<?js= v.longname ?>"><?js= self.linkto(v.longname, toShortName(v.name)) ?></li>
-            <?js
-                });
-            }
-            ?>
-            </ul>
-            <ul class="typedefs itemMembers">
-            <?js
-            if (item.typedefs.length) {
-            ?>
-            <span class="subtitle">Typedefs</span>
-            <?js
-                item.typedefs.forEach(function (v) {
-            ?>
-                <li data-name="<?js= v.longname ?>" class="<?js= (v.stability && v.stability !== 'stable') ? 'unstable' : ''?>">
-                    <?js= self.linkto(v.longname, toShortName(v.name)) ?>
-                </li>
-            <?js
-                });
-            }
-            ?>
-            </ul>
-            <ul class="methods itemMembers">
-            <?js
-            if (item.methods.length) {
-            ?>
-            <span class="subtitle">Methods</span>
-            <?js
-
-                item.methods.forEach(function (v) {
-            ?>
-                <li data-name="<?js= v.longname ?>" class="<?js= (v.stability && v.stability !== 'stable') ? 'unstable' : ''?>">
-                    <?js= self.linkto(v.longname, toShortName(v.name)) ?>
-                </li>
-            <?js
-                });
-            }
-            ?>
-            </ul>
-            <ul class="fires itemMembers">
-            <?js
-            if (item.fires && item.fires.length) {
-            ?>
-            <span class="subtitle">Fires</span>
-            <?js
-                item.fires.forEach(function (v) {
-                    v = self.find({longname: v})[0] || {longname: v, name: v.split(/#?event:/)[1]};
-            ?>
-                <li data-name="<?js= v.longname ?>" class="<?js= (v.stability && v.stability != 'stable') ? 'unstable' : '' ?>">
-                    <?js= self.linkto(v.longname, toShortName(v.name)) ?>
-                </li>
-            <?js
-                });
-            }
-            ?>
-            </ul>
-        </li>
-    <?js }); ?>
     </ul>
 </div>