kmck / hotdoc Goto Github PK
View Code? Open in Web Editor NEWThis project forked from clenemt/docdash
A SASSier responsive documentation template theme for JSDoc 3 based on docdash
License: Other
This project forked from clenemt/docdash
A SASSier responsive documentation template theme for JSDoc 3 based on docdash
License: Other
<3
It seems like multi-level params (further than 2 level), is not being displayed correctly. There are probably better and cleaner way to get this working but I'm put together a quick hack to get it to display correctly. Not ideal and probably needs some work but I want to post something before I forget about it.
<?js
var self = this;
var subprops = prop.subparams || prop.subprops;
var propNameParts = prop.name.split('.');
var propDepth = depth + propNameParts.length - 1;
var propName = propNameParts[propNameParts.length - 1];
?>
<tr class="prop">
<?js if (hasName) { ?>
<td class="name" style="white-space: nowrap">
<?js if (propDepth) { ?>
<span class="prefix"><?js= new Array(propDepth).join(' ') + '↳' ?></span>
<?js } ?>
<code><?js= propName ?></code>
</td>
<?js } ?>
<td class="type">
<?js if (prop.type && prop.type.names) { ?>
<?js= self.partial('type.tmpl', prop.type.names) ?>
<?js } ?>
</td>
<?js if (hasAttributes) { ?>
<td class="attributes">
<?js if (prop.optional) { ?>
<div class="attribute optional">optional</div>
<?js } ?>
<?js if (prop.nullable) { ?>
<div class="attribute nullable">nullable</div>
<?js } ?>
<?js if (prop.variable) { ?>
<div class="attribute repeatable">repeatable</div>
<?js } ?>
</td>
<?js } ?>
<?js if (hasDefault) { ?>
<td class="default">
<?js if (typeof prop.defaultvalue !== 'undefined') { ?>
<code><?js= self.htmlsafe(prop.defaultvalue) ?></code>
<?js } ?>
</td>
<?js } ?>
<td class="description last"><?js= prop.description ?></td>
</tr>
<?js subprops && subprops.forEach(function(prop) { ?>
<?js if (!prop) { return; } ?>
<?js=
self.partial('prop.tmpl', {
hasName: hasName,
hasAttributes: hasAttributes,
hasDefault: hasDefault,
depth: depth + 1, // used for nested properties
prop: prop
})
?>
<?js }); ?>
For multi level params, the attributes and defaults column are not showing. That is because the checker only looks at the top level param and not any of its children. Below is a solution though it should be cleaned up. Again, I'll probably create an actual pull request when I have the time but for now, posting something that works so I don't forget.
<?js
var self = this;
var params = obj;
var checkProps = function(checker, param) {
if (!param) { return false; }
if (checker(param)) {
return true;
}
var subparams = param.subparams || param.subprops || [];
return subparams.some(function(subparam) {
return checkProps(checker, subparam);
});
};
/* sort subparams under their parent params (like opts.classname) */
var parentParam = null;
params.forEach(function(param, i) {
var paramRegExp;
if (!param) {
return;
}
if (parentParam && parentParam.name && param.name) {
paramRegExp = new RegExp('^(?:' + parentParam.name + '(?:\\[\\])*)\\.(.+)$');
if ( paramRegExp.test(param.name) ) {
param.name = RegExp.$1;
parentParam.subparams = parentParam.subparams || [];
parentParam.subparams.push(param);
params[i] = null;
}
else {
parentParam = param;
}
}
else {
parentParam = param;
}
});
/* determine if we need extra columns, "attributes" and "default" */
params.hasAttributes = false;
params.hasDefault = false;
params.hasName = false;
params.forEach(function(param) {
if (!param) { return; }
if (checkProps(function(prop) { return prop.optional || prop.nullable || prop.variable; }, param)) {
params.hasAttributes = true;
}
if (checkProps(function(prop) { return prop.name; }, param)) {
params.hasName = true;
}
if (checkProps(function(prop) { return typeof prop.defaultvalue !== 'undefined'; }, param)) {
params.hasDefault = true;
}
});
?>
<table class="params">
<thead>
<tr>
<?js if (params.hasName) {?>
<th>Name</th>
<?js } ?>
<th>Type</th>
<?js if (params.hasAttributes) {?>
<th>Attributes</th>
<?js } ?>
<?js if (params.hasDefault) {?>
<th>Default</th>
<?js } ?>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<?js params.forEach(function(param) { ?>
<?js if (!param) { return; } ?>
<?js=
self.partial('prop.tmpl', {
hasName: params.hasName,
hasAttributes: params.hasAttributes,
hasDefault: params.hasDefault,
depth: 0, // used for nested params
prop: param
})
?>
<?js }); ?>
</tbody>
</table>
This would likely require work on JSDoc itself to make things easier. However, the navigational menu could be made so that Enums are in its own group much like classes and interfaces. I already got something somewhat working. Again, it will need more work to clean things up but for now, posting so I don't forget. In publish.js
:
function buildNav(members) {
var nav = '<h2 class="home-link"><a href="index.html">' + themeConfig.home + '</a></h2>';
var seen = {};
var seenTutorials = {};
nav += buildMemberNav(members.classes, 'Classes', seen, linkto);
nav += buildMemberNav(members.modules, 'Modules', {}, linkto);
nav += buildMemberNav(members.externals, 'Externals', seen, linktoExternal);
nav += buildMemberNav(members.events, 'Events', seen, linkto);
nav += buildMemberNav(members.namespaces, 'Namespaces', seen, linkto);
nav += buildMemberNav(members.mixins, 'Mixins', seen, linkto);
nav += buildMemberNav(members.tutorials, 'Tutorials', seenTutorials, linktoTutorial);
nav += buildMemberNav(members.interfaces, 'Interfaces', seen, linkto);
if (members.globals.length) {
var enums = [];
var globalNav = '';
members.globals.forEach(function(g) {
if (g.kind === 'member' && g.isEnum) {
enums.push(g);
return;
}
if ( g.kind !== 'typedef' && !hasOwnProp.call(seen, g.longname) ) {
globalNav += '<li>' + linkto(g.longname, g.name) + '</li>';
}
seen[g.longname] = true;
});
nav += buildMemberNav(enums, 'Enums', seen, linkto);
if (!globalNav) {
// turn the heading into a link so you can actually get to the global page
nav += '<h3>' + linkto('global', 'Global') + '</h3>';
}
else {
nav += '<h3>Global</h3><ul>' + globalNav + '</ul>';
}
}
return nav;
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.