Merge pull request #10047 from KaiVolland/apidoc-changes

Apidoc changes

config/jsdoc/api/template/less/common.less

@@ -1,9 +0,0 @@
-@navWidth: 250px;
-@colorSubtitle: rgb(119, 156, 52);
-@colorRed: rgb(238, 125, 125);
-@colorLink: #2a6496;
-@colorBgNavi: #2a2a2a;
-
-.font-description () {
-    font-family: "freight-text-pro",Georgia,Cambria,"Times New Roman",Times,serif
-}

config/jsdoc/api/template/less/footer.less

@@ -1,10 +0,0 @@
-@import "common.less";
-
-footer {
-    margin: 15px 0;
-    padding-top: 15px;
-    border-top: 1px solid #e1e1e1;
-    .font-description();
-    font-size: 0.8em;
-    color: gray;
-}

config/jsdoc/api/template/less/jaguar.less

@@ -1,22 +0,0 @@
-@import "common.less";
-
-// normalize
-html, body {
-    font: 1em "jaf-bernino-sans","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
-    background-color: #fff;
-}
-ul, ol {
-    margin: 0;
-    padding: 0;
-}
-li {
-    list-style-type: none;
-}
-
-#wrap {
-    position: relative;
-}
-
-@import "navigation.less";
-@import "main.less";
-@import "footer.less";

config/jsdoc/api/template/less/main.less

@@ -1,288 +0,0 @@
-@import "common.less";
-
-.main {
-    padding: 20px 20px;
-    margin-left: @navWidth;
-    .page-title {
-        display: none;
-    }
-
-    h1 {
-        font-weight: bold;
-        font-size: 1.6em;
-        margin: 0;
-    }
-
-    h2 {
-        font-weight: bold;
-        font-size: 1.5em;
-        margin: 0;
-    }
-
-    h3 {
-        font-weight: bold;
-        font-size: 12px;
-        margin: 5px 0;
-    }
-
-    h4 {
-        font-weight: bold;
-        font-size: 1em;
-    }
-
-    h5 {
-        font-weight: bold;
-        font-size: 12px;
-    }
-
-    dd {
-        font-size: 12px;
-    }
-
-    h4.name {
-        span.type-signature {
-            display: inline-block;
-            border-radius: 3px;
-            background-color: gray;
-            color: #fff;
-            font-size: 0.7em;
-            padding: 2px 4px;
-        }
-
-        span.type {
-            margin-left: 5px;
-        }
-
-        span.glyphicon {
-            display: inline-block;
-            vertical-align: middle;
-            color: #e1e1e1;
-            margin-left: 7px;
-        }
-
-        span.returnType {
-            margin-left: 3px;
-            background-color: transparent!important;
-            color: gray!important;
-        }
-    }
-
-
-    span.static {
-        display: inline-block;
-        border-radius: 3px;
-        background-color: @colorSubtitle!important;
-        color: #fff;
-        font-size: 0.7em;
-        padding: 2px 4px;
-        margin-right: 8px;
-    }
-
-    span.number {
-        background-color: #ccc!important;
-        color: #2fa2b1!important;
-    }
-
-    span.string {
-        background-color: #ccc!important;
-        color: #2fa2b1!important;
-    }
-
-    span.object {
-        background-color: #ccc!important;
-        color: #2fa2b1!important;
-    }
-
-    span.array {
-        background-color: #ccc!important;
-        color: #2fa2b1!important;
-    }
-
-    span.boolean {
-        background-color: #ccc!important;
-        color: #2fa2b1!important;
-    }
-
-    .subsection-title {
-        font-size: 14px;
-        margin-top: 30px;
-        color: @colorSubtitle;
-    }
-
-    .description {
-        margin-top: 10px;
-        // .font-description();
-        font-size: 13px;
-
-        p {
-            font-size: 13px;
-        }
-    }
-
-    .tag-source {
-        font-size: 12px;
-    }
-    dt.tag-source {
-        margin-top: 5px;
-    }
-
-    dt.tag-todo {
-        font-size: 10px;
-        display: inline-block;
-        background-color: @colorLink;
-        color: #fff;
-        padding: 2px 4px;
-        border-radius: 5px;
-    }
-
-    .type-signature {
-        font-size: 12px;
-    }
-
-    .tag-deprecated {
-        display: inline-block;
-        font-size: 10px;
-    }
-
-    .important {
-        background-color: @colorRed;
-        color: #fff;
-        padding: 2px 4px;
-        border-radius: 5px;
-    }
-
-    .nameContainer {
-        position: relative;
-        margin-top: 20px;
-        padding-top: 5px;
-        border-top: 1px solid #e1e1e1;
-
-        .inherited {
-            display: inline-block;
-            border-radius: 3px;
-            background-color: #888!important;
-            font-size: 0.7em;
-            padding: 2px 4px;
-            margin-right: 5px;
-            a {
-                color: #fff;
-            }
-        }
-
-        .tag-source {
-            position: absolute;
-            top: 17px;
-            right: 0;
-            font-size: 10px;
-            a {
-                color: gray;
-            }
-        }
-
-        &.inherited {
-            color: gray;
-        }
-
-        h4 {
-            margin-right: 150px;
-            line-height: 1.3;
-            
-            .signature {
-                font-size: 13px;
-                font-weight: normal;
-                font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
-            }
-        }
-    }
-
-    pre {
-        font-size: 11px;
-    }
-
-    table {
-        width: 100%;
-        margin-bottom: 15px;
-
-        th {
-            padding: 3px 3px;
-        }
-
-        td {
-            vertical-align: top;
-            padding: 5px 3px;
-        }
-
-        .name {
-            width: 110px;
-        }
-
-        .type {
-            width: 60px;
-            color: #aaa;
-            font-size: 11px;
-        }
-
-        .attributes {
-            width: 80px;
-            color: #aaa;
-            font-size: 11px;
-        }
-
-        .description {
-            font-size: 12px;
-            p {
-                margin: 0;
-            }
-        }
-
-        .optional {
-            float: left;
-            border-radius: 3px;
-            background-color: #ddd!important;
-            font-size: 0.7em;
-            padding: 2px 4px;
-            margin-right: 5px;
-            color: gray;
-        }
-    }
-
-    .readme {
-        p {
-            margin-top: 15px;
-            line-height: 1.2;
-            font-size: 0.85em;
-        }
-
-        h1 {
-            font-size: 1.7em;
-        }
-
-        h2 {
-            margin-top: 30px;
-            margin-bottom: 10px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #e1e1e1;
-        }
-
-        li {
-            font-size: 0.9em;
-            margin-bottom: 10px;
-        }
-    }
-
-    article {
-        ol, ul {
-            margin-left: 25px;
-        }
-
-        ol > li {
-            list-style-type: decimal;
-            margin-bottom: 5px;
-        }
-
-        ul > li {
-            margin-bottom: 5px;
-            list-style-type: disc;
-        }
-    }
-}

config/jsdoc/api/template/less/navigation.less

@@ -1,103 +0,0 @@
-@import "common.less";
-
-::-webkit-scrollbar {
-    width: 8px;
-    background-color: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    background-color: gray;
-    border-radius: 4px;
-}
-
-.navigation {
-    position: fixed;
-    float: left;
-    width: @navWidth;
-    height: 100%;
-    background-color: @colorBgNavi;
-
-    .applicationName {
-        margin: 0;
-        margin-top: 15px;
-        padding: 10px 15px;
-        font: bold 1.25em Helvetica;
-        color: #fff;
-
-        a {
-            color: #fff;
-        }
-    }
-
-    .search {
-        padding: 10px 15px;
-
-        input {
-            background-color: #333;
-            color: #fff;
-            border-color: #555;
-        }
-    }
-
-    .list {
-        padding: 10px 15px 0 15px;
-        position: relative;
-        overflow: auto;
-        width: 100%;
-    }
-
-    li.item {
-        margin-bottom: 8px;
-        padding-bottom: 8px;
-        border-bottom: 1px solid #333;
-
-        a {
-            color: #bbb;
-            &:hover {
-                color: #fff;
-            }
-        }
-        .title {
-            cursor: pointer;
-            position: relative;
-            a {
-                color: #e1e1e1;
-                &:hover {
-                    color: #fff;
-                }
-            }
-            display: block;
-            font-size: 0.8em;
-
-            .static {
-                display: block;
-                border-radius: 3px;
-                background-color: @colorSubtitle;
-                color: #000;
-                font-size: 0.7em;
-                padding: 2px 4px;
-                float: right;
-            }
-        }
-
-        .subtitle {
-            margin-top: 10px;
-            font: bold 0.65em Helvetica;
-            color: @colorSubtitle;
-            display: block;
-        }
-
-
-        ul {
-            & > li {
-                font-size: 0.7em;
-                padding-left: 8px;
-                margin-top: 2px;
-            }
-        }
-
-        .itemMembers {
-            display: none;
-        }
-    }
-}

config/jsdoc/api/template/publish.js

@@ -215,15 +215,20 @@ function buildNav(members) {
     return 0;
   });
 
-  function createEntry(type, v) {
+  _.each(merged, function(v) {
-    return {
+    // exclude interfaces from sidebar
-      type: type,
+    if (v.interface !== true && v.kind === 'class') {
+      nav.push({
+        type: 'class',
         longname: v.longname,
+        prettyname: v.longname
+          .split('~')[0]
+          .replace('module:', ''),
         name: v.name,
-      classes: find({
+        module: find({
-        kind: 'class',
+          kind: 'module',
-        memberof: v.longname
+          longname: v.memberof
-      }).map(createEntry.bind(this, 'class')),
+        })[0],
         members: find({
           kind: 'member',
           memberof: v.longname
@@ -236,17 +241,48 @@ function buildNav(members) {
           kind: 'typedef',
           memberof: v.longname
         }),
+        fires: v.fires,
         events: find({
           kind: 'event',
           memberof: v.longname
         })
-    };
+      });
-  }
+    } else if (v.kind == 'module') {
-  _.each(merged, function(v) {
+      const classes = find({
-    // exclude interfaces from sidebar
+        kind: 'class',
-    if (v.interface !== true) {
+        memberof: v.longname
-      if (v.kind == 'module') {
+      });
-        nav.push(createEntry('module', v));
+      const members = find({
+        kind: 'member',
+        memberof: v.longname
+      });
+      const methods = find({
+        kind: 'function',
+        memberof: v.longname
+      });
+      const typedefs = find({
+        kind: 'typedef',
+        memberof: v.longname
+      });
+      const events = find({
+        kind: 'event',
+        memberof: v.longname
+      });
+      // only add modules that have more to show than just a single class
+      if (classes.length !== 1 && (classes.length + members.length + methods.length + typedefs.length + events.length > 0)) {
+        nav.push({
+          type: 'module',
+          longname: v.longname,
+          prettyname: v.longname
+            .split('~')[0]
+            .replace('module:', ''),
+          name: v.name,
+          members: members,
+          methods: methods,
+          typedefs: typedefs,
+          fires: v.fires,
+          events: events
+        });
       }
     }
   });

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

@@ -1,29 +1,66 @@
 $(function () {
+  // Search Items
+  $('#include_modules').change(function (e) {
+    console.log('change');
+    if ($(this).is(':checked')) {
+
+    } else {
+
+    }
+  });
+
+  var getSearchWeight = function (searchTerm, $matchedItem) {
+    let weight = 0;
+    // We could get smarter on the weight here
+    if ($matchedItem.data('shortname')
+      && $matchedItem.data('shortname').toLowerCase() === searchTerm.toLowerCase()) {
+      weight++;
+    }
+    return weight;
+  };
+
+  // sort function callback
+  var weightSorter = function (a, b) {
+    var aW = $(a).data('weight') || 0;
+    var bW = $(b).data('weight') || 0;
+    return bW - aW;
+  };
+
   // Search Items
   $('#search').on('keyup', function (e) {
     var value = $(this).val();
     var $el = $('.navigation');
 
-        if (value) {
+    if (value && value.length > 1) {
       var regexp = new RegExp(value, 'i');
       $el.find('li, .itemMembers').hide();
 
       $el.find('li').each(function (i, v) {
-                var $item = $(v);
+        const $item = $(v);
+        const name = $item.data('name');
 
-                if ($item.data('name') && regexp.test($item.data('name'))) {
+        if (name && regexp.test(name)) {
-                    const container = $item.parent().parent().parent();
+          const $classEntry = $item.closest('.item');
-                    container.show();
+          const $members = $item.closest('.itemMembers');
-                    container.closest('.itemMembers').show();
+
-                    container.closest('.item').show();
+          // Do the weight thing
+          $classEntry.removeData('weight');
+          $classEntry.show();
+          const weight = getSearchWeight(value, $classEntry);
+          $classEntry.data('weight', weight);
+
+          $members.show();
+          $classEntry.show();
           $item.show();
-                    $item.closest('.itemMembers').show();
-                    $item.closest('.item').show();
         }
       });
+
+      $(".navigation ul.list li.item:visible")
+        .sort(weightSorter) // sort elements
+        .appendTo(".navigation ul.list"); // append again to the list
+
     } else {
-            $el.find('.item, .itemMembers').hide();
+      $el.find('.item, .itemMembers').show();
-            $('.navigation>ul>li').show();
     }
 
     $el.find('.list').scrollTop(0);

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

@@ -106,6 +106,15 @@ li {
 .navigation .applicationName a {
   color: #fff;
 }
+.navigation .include-modules {
+  color: #e1e1e1;
+  float: right;
+  font-size: 0.75em;
+  padding: 5px 15px;
+}
+.navigation .include-modules input {
+  vertical-align: text-bottom;
+}
 .navigation .search {
   padding: 10px 15px;
 }
@@ -125,6 +134,11 @@ li {
   padding-bottom: 8px;
   border-bottom: 1px solid #333;
 }
+
+.navigation li.perfect-match {
+  border: 5px solid orange;
+}
+
 .navigation li.item a {
   color: #bbb;
 }
@@ -158,6 +172,12 @@ li {
   color: #1F6B75;
   display: block;
 }
+.navigation li.item .modulelink {
+  position: relative;
+  font-size: 0.75em;
+  padding-left: 5px;
+  top: -5px;
+}
 .navigation li.item ul > li {
   font-size: 0.75em;
   padding-left: 8px;
@@ -165,6 +185,7 @@ li {
 }
 .navigation li.item .itemMembers {
   display: none;
+  padding-left: 8px;
 }
 .main {
   padding: 20px 20px;

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

@@ -10,12 +10,16 @@ function toShortName(name) {
     </div>
     <ul class="list">
     <?js
-    let navbuilder;
+        this.nav.forEach(function (item) {
-    this.nav.forEach(navbuilder = function (item) {
     ?>
-        <li class="item" data-name="<?js= item.longname ?>">
+        <li class="item" data-name="<?js= item.longname ?>" data-shortname="<?js= item.name.toLowerCase() ?>">
             <span class="title">
-                <?js= self.linkto(item.longname, item.type === 'module' ? item.longname.replace('module:', '') : item.name) ?>
+                <?js if (item.type === 'module') { ?>
+                    <span class="glyphicon glyphicon-plus"></span> 
+                <?js } else if (item.type === 'class') { ?>
+                    <span class="glyphicon glyphicon-chevron-right"></span> 
+                <?js } ?>
+                <?js= self.linkto(item.longname, item.prettyname) ?>
                 <?js if (item.type === 'namespace' &&
                         (item.members.length + item.typedefs.length + item.methods.length +
                             item.events.length > 0)) { ?>
@@ -23,18 +27,6 @@ function toShortName(name) {
             </span>
             <ul class="members itemMembers">
             <?js
-            if (item.classes.length) {
-            ?>
-            <span class="subtitle">Classes</span>
-            <?js
-                item.classes.forEach(function (v) {
-                    navbuilder(v);
-                });
-            }
-            ?>
-            </ul>
-            <ul class="members itemMembers">
-            <?js
             if (item.members.length) {
             ?>
             <span class="subtitle">Members</span>