Cleanup navigation.tmpl and the generated html

- Add a function that is used to generate all four types of member lists.
- Only use one line per list item.
- Don't generate empty `class=""` attributes when item is stable.
- Remove closing `</li>` tag, as is allowed by the html 5 standard.

Overall this reduces the filesize for the generated html pages by ~33%.
This commit is contained in:
Maximilian Krög
2020-02-09 15:50:40 +01:00
parent 35569a8427
commit 5d922fc53b

View File

@@ -1,95 +1,57 @@
<?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) { ?>
<ul class="<?js= type ?> itemMembers">
<span class="subtitle"><?js= title ?></span><?js
item[type].forEach(function (v) {
listItemPrinter(v); ?><?js= self.linkto(v.longname, toShortName(v.name)) ?><?js
}); ?>
</ul><?js
}
}
?>
<div class="navigation">
<div class="search">
<input id="search" type="text" class="form-control input-sm" placeholder="Search Documentation">
</div>
<ul class="list">
<?js
this.nav.forEach(function (item) {
?>
<ul class="list"><?js
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 glyphicon-plus toggle"></span>
<?js } else if (item.type === 'class') { ?>
<span class="glyphicon glyphicon-chevron-right toggle"></span>
<?js } ?>
<span class="glyphicon <?js= getItemCssClass(item.type) ?> toggle"></span>
<?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)) { ?>
<?js } ?>
</span>
<ul class="members itemMembers">
<?js
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 }); ?>
</span><?js
listContent(item, 'Members', printList);
listContent(item, 'Typedefs', printListWithStability);
listContent(item, 'Methods', printListWithStability);
if (item.fires) {
const fires = item.fires.map(v => self.find({longname: v})[0] || {longname: v, name: v.split(/#?event:/)[1]});
listContent({fires: fires}, 'Fires', printListWithStability)
}
}); ?>
</ul>
</div>