From 14c5e9a7e8f01bba558f1ffdcaa6b0b6bfac7879 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maximilian=20Kr=C3=B6g?= Date: Fri, 18 Sep 2020 21:20:53 +0200 Subject: [PATCH] Load api navigation dynamically to reduce needed disk space --- config/jsdoc/api/template/publish.js | 12 +++- .../jsdoc/api/template/static/scripts/main.js | 50 +++++++++++++---- .../api/template/static/styles/jaguar.css | 14 ++++- config/jsdoc/api/template/tmpl/layout.tmpl | 48 +++++++++++----- .../jsdoc/api/template/tmpl/navigation.tmpl | 55 +++++++------------ examples/resources/layout.css | 1 + 6 files changed, 116 insertions(+), 64 deletions(-) diff --git a/config/jsdoc/api/template/publish.js b/config/jsdoc/api/template/publish.js index 7a70ec63a3..70ab84e960 100644 --- a/config/jsdoc/api/template/publish.js +++ b/config/jsdoc/api/template/publish.js @@ -500,6 +500,7 @@ exports.publish = function (taffyData, opts, tutorials) { // once for all view.nav = buildNav(members); + attachModuleSymbols( find({kind: ['class', 'function'], longname: {left: 'module:'}}), members.modules @@ -518,7 +519,16 @@ exports.publish = function (taffyData, opts, tutorials) { // index page displays information from package.json and lists files const files = find({kind: 'file'}); - view.navigationHtml = helper.resolveLinks(view.partial('navigation.tmpl')); + view.navigationItems = view.nav.reduce(function (dict, item) { + dict[item.longname] = item; + return dict; + }, {}); + const navigationHtml = helper.resolveLinks( + view.nav.map((item) => view.partial('navigation.tmpl', {item})).join('') + ); + const navHtmlPath = path.join(outdir, 'navigation.tmpl.html'); + fs.writeFileSync(navHtmlPath, navigationHtml, 'utf8'); + generate( 'Index', [ diff --git a/config/jsdoc/api/template/static/scripts/main.js b/config/jsdoc/api/template/static/scripts/main.js index 827c9c11b0..a94b8bb419 100644 --- a/config/jsdoc/api/template/static/scripts/main.js +++ b/config/jsdoc/api/template/static/scripts/main.js @@ -62,21 +62,47 @@ $(function () { $navList.addClass('search-empty'); return 'search-empty'; })(); + let initialCurrent = navListNode.querySelector('li.item'); + const longname = initialCurrent && initialCurrent.dataset.longname; let manualToggles = {}; - - // Show an item related a current documentation automatically - const longname = $('.page-title').data('filename') - .replace(/\.[a-z]+$/, '') - .replace('module-', 'module:') - .replace(/_/g, '/') - .replace(/-/g, '~'); - const currentItem = navListNode.querySelector('.item[data-longname="' + longname + '"]'); - if (currentItem) { - $navList.prepend(currentItem); + if (initialCurrent) { + manualToggles[longname] = $(initialCurrent); } + + fetch('./navigation.tmpl.html').then(function (response) { + return response.text(); + }).then(function (text) { + navListNode.innerHTML = text; + + // Show an item related a current documentation automatically + const currentItem = navListNode.querySelector('.item[data-longname="' + longname + '"]'); + if (currentItem) { + $navList.prepend(currentItem); + search.$currentItem = $(currentItem); + } + $classItems = undefined; + $members = undefined; + + // Search again with full navigation, if user already searched + manualToggles = {}; + const lastTerm = search.lastSearchTerm; + search.lastSearchTerm = undefined; + const fa = currentItem.querySelector('.title > .fa'); + fa.classList.add('no-transition'); + doSearch(lastTerm || ''); + + // Transfer manual toggle state to newly loaded current node + if (initialCurrent && initialCurrent.classList.contains('toggle-manual')) { + search.manualToggle(search.$currentItem, initialCurrent.classList.contains('toggle-manual-show')); + } + setTimeout(function () { + fa.classList.remove('no-transition'); + }, 0); + }); + return { $navList: $navList, - $currentItem: currentItem ? $(currentItem) : undefined, + $currentItem: initialCurrent ? $(initialCurrent) : undefined, lastSearchTerm: undefined, lastState: {}, lastClasses: undefined, @@ -240,7 +266,7 @@ $(function () { // Toggle when click an item element search.$navList.on('click', '.toggle', function (e) { - if (event.target.tagName.toLowerCase() === 'a') { + if (e.target.tagName === 'A') { return; } const clsItem = $(this).closest('.item'); diff --git a/config/jsdoc/api/template/static/styles/jaguar.css b/config/jsdoc/api/template/static/styles/jaguar.css index 247bdeba04..f073631dfc 100644 --- a/config/jsdoc/api/template/static/styles/jaguar.css +++ b/config/jsdoc/api/template/static/styles/jaguar.css @@ -5,6 +5,7 @@ .navbar-brand img { height: 35px; + width: 35px; vertical-align: middle; margin-right: 5px; display: inline-block; @@ -71,6 +72,11 @@ li { .navigation-list { padding: 0 15px 0 15px; } +.no-transition, +.no-transition:after, +.no-transition:before { + transition: none!important; +} @supports (position: sticky) { .navigation { position: sticky; @@ -78,7 +84,7 @@ li { height: calc(100vh - 54px); } .navigation-list { - overflow: auto; + overflow-y: auto; /* 54px navbar height */ /* 4.25rem + 2px searchbox height */ /* 25px navigation padding */ @@ -94,7 +100,7 @@ li { position: inherit; } .navigation-list { - overflow: auto; + overflow-y: auto; max-height: 33vh; height: inherit; } @@ -206,6 +212,10 @@ li { padding-left: 8px; } +.navigation-list li.loading { + display: block; + height: 101vh; +} /* search state */ /* show all classes when search is empty */ .navigation-list.search-empty .item { diff --git a/config/jsdoc/api/template/tmpl/layout.tmpl b/config/jsdoc/api/template/tmpl/layout.tmpl index ee2de77e8f..6f338d4664 100644 --- a/config/jsdoc/api/template/tmpl/layout.tmpl +++ b/config/jsdoc/api/template/tmpl/layout.tmpl @@ -29,7 +29,7 @@ var version = obj.packageInfo.version; gtag('js', new Date()); gtag('config', 'UA-2577926-1', { 'anonymize_ip': true }); - + OpenLayers v<?js= version ?> API - <?js= title ?> - - - - + + + + - + @@ -115,15 +115,35 @@ var version = obj.packageInfo.version;
- -
-

- - +
+
+
+ +
+
+
    +
  • Loading … +
+
+
+ +
+

+ + +
diff --git a/config/jsdoc/api/template/tmpl/navigation.tmpl b/config/jsdoc/api/template/tmpl/navigation.tmpl index 03b03cca63..982bc186f6 100644 --- a/config/jsdoc/api/template/tmpl/navigation.tmpl +++ b/config/jsdoc/api/template/tmpl/navigation.tmpl @@ -16,12 +16,12 @@ function getItemCssClass(type) { const printListItem = (member) => { const shortName = toShortName(member.name); ?> -
  • "> { const shortName = toShortName(member.name); const cls = member.stability && member.stability !== 'stable' ? ' class="unstable"' : ''; ?> -
  • >"> { 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); ?> -
  • >"> -
    - -
      -
    -
    -
    -
    -
    - -
    -
    -
    -
      -
    • - - - - +
      + +
        listItemPrinter(v)); ?>
      -
      -
    +
    +
  • + + + + \ No newline at end of file diff --git a/examples/resources/layout.css b/examples/resources/layout.css index a9611d3547..298ede6388 100644 --- a/examples/resources/layout.css +++ b/examples/resources/layout.css @@ -22,6 +22,7 @@ body { } .navbar-brand img { height: 35px; + width: 35px;; vertical-align: middle; margin-right: 5px; display: inline-block;