Load api navigation dynamically to reduce needed disk space
This commit is contained in:
Maximilian Krög
@@ -29,7 +29,7 @@ var version = obj.packageInfo.version;
|
||||
gtag('js', new Date());
|
||||
gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
|
||||
</script>
|
||||
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
|
||||
<link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
|
||||
<script>
|
||||
window.addEventListener("load", function() {
|
||||
@@ -64,14 +64,14 @@ var version = obj.packageInfo.version;
|
||||
</script>
|
||||
<title>OpenLayers v<?js= version ?> API - <?js= title ?></title>
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
|
||||
<script src="scripts/prettify/prettify.js"> </script>
|
||||
<script src="scripts/prettify/lang-css.js"> </script>
|
||||
<script src="scripts/jquery.min.js"> </script>
|
||||
<script src="scripts/bootstrap.bundle.min.js"> </script>
|
||||
<script src="scripts/prettify/prettify.js"></script>
|
||||
<script src="scripts/prettify/lang-css.js"></script>
|
||||
<script src="scripts/jquery.min.js"></script>
|
||||
<script src="scripts/bootstrap.bundle.min.js"></script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
|
||||
<![endif]-->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
|
||||
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
|
||||
<link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
|
||||
<link type="text/css" rel="stylesheet" href="styles/jaguar.css">
|
||||
@@ -115,15 +115,35 @@ var version = obj.packageInfo.version;
|
||||
</nav>
|
||||
</header>
|
||||
<div id="wrap" class="row">
|
||||
<?js= this.navigationHtml ?>
|
||||
<div class="main col-md-8 col-lg-9">
|
||||
<h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
|
||||
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
|
||||
<button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
|
||||
</div>
|
||||
<?js= content ?>
|
||||
<div class="navigation col-md-4 col-lg-3">
|
||||
<div class="search-wrapper">
|
||||
<div class="search">
|
||||
<input id="search" type="text" autocomplete="off" class="form-control input-sm" placeholder="Search Documentation">
|
||||
</div>
|
||||
</div>
|
||||
<div class="navigation-list-wrapper">
|
||||
<ul class="navigation-list search-empty"><?js
|
||||
const item = this.navigationItems[docs[0].longname];
|
||||
const listItem = item
|
||||
? this.partial('navigation.tmpl', {
|
||||
item: item,
|
||||
classes: ' toggle-manual toggle-manual-show',
|
||||
})
|
||||
: '';
|
||||
?><?js= listItem ?>
|
||||
<li class="loading">Loading …
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main col-md-8 col-lg-9">
|
||||
<h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
|
||||
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
|
||||
<button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
|
||||
</div>
|
||||
<?js= content ?>
|
||||
</div>
|
||||
</div>
|
||||
<script>prettyPrint();</script>
|
||||
<script src="scripts/linenumber.js"></script>
|
||||
|
||||
@@ -16,12 +16,12 @@ function getItemCssClass(type) {
|
||||
|
||||
const printListItem = (member) => {
|
||||
const shortName = toShortName(member.name); ?>
|
||||
<li data-name="<?js= shortName.toLowerCase() ?>"><?js= self.linkto(member.longname, shortName) ?><?js
|
||||
<li data-name="<?js= shortName.toLowerCase() ?>"><?js= self.linkto(member.longname, shortName) ?><?js
|
||||
};
|
||||
const printListItemWithStability = (member) => {
|
||||
const shortName = toShortName(member.name);
|
||||
const cls = member.stability && member.stability !== 'stable' ? ' class="unstable"' : ''; ?>
|
||||
<li data-name="<?js= shortName.toLowerCase() ?>"<?js= cls ?>><?js= self.linkto(member.longname, shortName) ?><?js
|
||||
<li data-name="<?js= shortName.toLowerCase() ?>"<?js= cls ?>><?js= self.linkto(member.longname, shortName) ?><?js
|
||||
};
|
||||
const printFiresListItem = (eventName) => {
|
||||
const ancestor = self.find({longname: eventName})[0] ||
|
||||
@@ -32,43 +32,28 @@ const printFiresListItem = (eventName) => {
|
||||
} else {
|
||||
const cls = ancestor.stability && ancestor.stability !== 'stable' ? ' class="unstable"' : '';
|
||||
const shortName = toShortName(ancestor.name); ?>
|
||||
<li data-name="<?js= shortName.toLowerCase() ?>"<?js= cls ?>><?js= shortName ?><?js
|
||||
<li data-name="<?js= shortName.toLowerCase() ?>"<?js= cls ?>><?js= shortName ?><?js
|
||||
}
|
||||
};
|
||||
|
||||
function listContent(item, title, listItemPrinter) {
|
||||
const type = title.toLowerCase();
|
||||
if (item[type] && item[type].length) { ?>
|
||||
<div class="member-list" data-type="<?js= type ?>">
|
||||
<span class="subtitle"><?js= title ?></span>
|
||||
<ul><?js
|
||||
item[type].forEach(function (v) {
|
||||
listItemPrinter(v);
|
||||
}); ?>
|
||||
</ul>
|
||||
</div><?js
|
||||
}
|
||||
}
|
||||
?>
|
||||
<div class="navigation col-md-4 col-lg-3">
|
||||
<div class="search-wrapper">
|
||||
<div class="search">
|
||||
<input id="search" type="text" autocomplete="off" class="form-control input-sm" placeholder="Search Documentation">
|
||||
</div>
|
||||
</div>
|
||||
<div class="navigation-list-wrapper">
|
||||
<ul class="navigation-list search-empty"><?js
|
||||
this.nav.forEach(function (item) { ?>
|
||||
<li class="item item-<?js= item.type ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
|
||||
<span class="title toggle">
|
||||
<span class="fa <?js= getItemCssClass(item.type) ?> mr-2 mt-1"></span>
|
||||
<span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
|
||||
</span><?js
|
||||
listContent(item, 'Members', printListItem);
|
||||
listContent(item, 'Typedefs', printListItemWithStability);
|
||||
listContent(item, 'Methods', printListItemWithStability);
|
||||
listContent(item, 'Fires', printFiresListItem);
|
||||
}); ?>
|
||||
<div class="member-list" data-type="<?js= type ?>">
|
||||
<span class="subtitle"><?js= title ?></span>
|
||||
<ul><?js
|
||||
item[type].forEach((v) => listItemPrinter(v)); ?>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div><?js
|
||||
}
|
||||
} ?>
|
||||
<li class="item item-<?js= item.type ?><?js= obj.classes || '' ?>" data-longname="<?js= item.longname ?>" data-name="<?js= item.prettyname.toLowerCase() ?>">
|
||||
<span class="title toggle">
|
||||
<span class="fa <?js= getItemCssClass(item.type) ?> mr-2 mt-1"></span>
|
||||
<span><?js= self.linkto(item.longname, item.prettyname.replace(/[.~\/]/g, '\u200b$&')) ?></span>
|
||||
</span><?js
|
||||
listContent(item, 'Members', printListItem);
|
||||
listContent(item, 'Typedefs', printListItemWithStability);
|
||||
listContent(item, 'Methods', printListItemWithStability);
|
||||
listContent(item, 'Fires', printFiresListItem);
|
||||
?>
|
||||
Reference in New Issue
Block a user