Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-03-31 21:40:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ngdocs): add variable type hinting with colors

Browse source
This commit is contained in:
Matias Niemelä 2013-05-07 11:02:17 -04:00 committed by Misko Hevery
parent ee2689051b
commit 404c9a653a
2 changed files with 102 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
docs/src/ngdoc.js
View file

@ -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);
if (param.optional) {
dom.text('=');
var limit = types.length - 1;
if(types.charAt(limit) == ')' && types.charAt(limit-1) != '(') {
types = types.substr(0,limit);
}
dom.text('} – ');
});
dom.html(param.description);
});
types = types.split(/\|(?![\(\)\w\|\s]+>)/);
var description = param.description;
if (param.optional) {
name += ' <div><em>(optional)</em></div>';
}
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>');
}
},

39
docs/src/templates/css/docs.css
View file

@ -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);
}