feat(ngdocs): add variable type hinting with colors

Author: matsko

docs/src/ngdoc.js

@@ -348,28 +348,59 @@ Doc.prototype = {
 
   },
 
+  prepare_type_hint_class_name : function(type) {
+    var typeClass = type.toLowerCase().match(/^[-\w]+/) || [];
+    typeClass = typeClass[0] ? typeClass[0] : 'object';
+    return 'label type-hint type-hint-' + typeClass;
+  },
+
   html_usage_parameters: function(dom) {
-    dom.h('Parameters', this.param, function(param){
-      dom.tag('code', function() {
-        dom.text(param.name);
-        if (param.optional) {
-          dom.tag('i', function() {
-            dom.text('(optional');
-            if(param['default']) {
-              dom.text('=' + param['default']);
-            }
-            dom.text(')');
-          });
+    var self = this;
+    var params = this.param ? this.param : []; 
+    if(params.length > 0) {
+      dom.html('<h2 id="parameters">Parameters</h2>');
+      dom.html('<table class="variables-matrix table table-bordered table-striped">');
+      dom.html('<thead>');
+      dom.html('<tr>');
+      dom.html('<th>Param</th>');
+      dom.html('<th>Type</th>');
+      dom.html('<th>Details</th>');
+      dom.html('</tr>');
+      dom.html('</thead>');
+      dom.html('<tbody>');
+      for(var i=0;i<params.length;i++) {
+        param = params[i];
+        var name = param.name;
+        var types = param.type;
+        if(types[0]=='(') {
+          types = types.substr(1);
         }
-        dom.text(' – {');
-        dom.text(param.type);
+
+        var limit = types.length - 1;
+        if(types.charAt(limit) == ')' && types.charAt(limit-1) != '(') {
+          types = types.substr(0,limit);
+        }
+        types = types.split(/\|(?![\(\)\w\|\s]+>)/);
+        var description = param.description;
         if (param.optional) {
-          dom.text('=');
+          name += ' <div><em>(optional)</em></div>';
         }
-        dom.text('} – ');
-      });
-      dom.html(param.description);
-    });
+        dom.html('<tr>');
+        dom.html('<td>' + name + '</td>');
+        dom.html('<td>');
+        for(var j=0;j<types.length;j++) {
+          var type = types[j];
+          dom.html('<a href="" class="' + self.prepare_type_hint_class_name(type) + '">');
+          dom.text(type);
+          dom.html('</a>');
+        }
+        dom.html('</td>');
+        dom.html('<td>' + description + '</td>');
+        dom.html('</tr>');
+      };
+      dom.html('</tbody>');
+      dom.html('</table>');
+    }
     if(this.animations) {
       dom.h('Animations', this.animations, function(animations){
         dom.html('<ul>');
@@ -387,11 +418,19 @@ Doc.prototype = {
   html_usage_returns: function(dom) {
     var self = this;
     if (self.returns) {
-      dom.h('Returns', function() {
-        dom.tag('code', '{' + self.returns.type + '}');
-        dom.text('– ');
-        dom.html(self.returns.description);
-      });
+      dom.html('<h2 id="returns">Returns</h2>');
+      dom.html('<table class="variables-matrix">');
+      dom.html('<tr>');
+      dom.html('<td>');
+      dom.html('<a href="" class="' + self.prepare_type_hint_class_name(self.returns.type) + '">');
+      dom.text(self.returns.type);
+      dom.html('</a>');
+      dom.html('</td>');
+      dom.html('<td>');
+      dom.html(self.returns.description);
+      dom.html('</td>');
+      dom.html('</tr>');
+      dom.html('</table>');
     }
   },
 

docs/src/templates/css/docs.css

@@ -202,3 +202,42 @@ ul.events > li > h3 {
 .clear {
   clear: both;
 }
+
+.variables-matrix td {
+  vertical-align:top;
+  padding:5px;
+}
+
+.type-hint {
+  display:inline-block;
+}
+
+.variables-matrix .type-hint {
+  text-align:center;
+  display:block;
+  min-width:60px;
+}
+
+.type-hint + .type-hint {
+  margin-top:5px;
+}
+
+.type-hint-string {
+  background:#3a87ad;
+}
+
+.type-hint-object {
+  background:#999;
+}
+
+.type-hint-array {
+  background:#F90;;
+}
+
+.type-hint-boolean {
+  background:rgb(18, 131, 39);
+}
+
+.type-hint-number {
+  background:rgb(189, 63, 66);
+}