menu.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  1. document.addEventListener('DOMContentLoaded', function () {
  2. var menuCollapsed = false,
  3. mobileMenu = document.getElementById('mobile-menu');
  4. var localContextInUrl = '';
  5. if (COMPODOC_CURRENT_PAGE_CONTEXT !== '') {
  6. switch (COMPODOC_CURRENT_PAGE_CONTEXT) {
  7. case 'additional-page':
  8. localContextInUrl = 'additional-documentation';
  9. break;
  10. case 'class':
  11. localContextInUrl = 'classes';
  12. break;
  13. case 'miscellaneous-functions':
  14. case 'miscellaneous-variables':
  15. case 'miscellaneous-typealiases':
  16. case 'miscellaneous-enumerations':
  17. localContextInUrl = 'miscellaneous';
  18. default:
  19. break;
  20. }
  21. }
  22. function hasClass(el, cls) {
  23. return el.className && new RegExp('(\\s|^)' + cls + '(\\s|$)').test(el.className);
  24. }
  25. var processLink = function (link, url) {
  26. if (url.charAt(0) !== '.') {
  27. var prefix = '';
  28. switch (COMPODOC_CURRENT_PAGE_DEPTH) {
  29. case 5:
  30. prefix = '../../../../../';
  31. break;
  32. case 4:
  33. prefix = '../../../../';
  34. break;
  35. case 3:
  36. prefix = '../../../';
  37. break;
  38. case 2:
  39. prefix = '../../';
  40. break;
  41. case 1:
  42. prefix = '../';
  43. break;
  44. case 0:
  45. prefix = './';
  46. break;
  47. }
  48. link.setAttribute('href', prefix + url);
  49. }
  50. };
  51. var processMenuLinks = function (links, dontAddClass) {
  52. for (var i = 0; i < links.length; i++) {
  53. var link = links[i];
  54. var linkHref = link.getAttribute('href');
  55. if (linkHref) {
  56. var linkHrefFile = linkHref.substr(linkHref.lastIndexOf('/') + 1, linkHref.length);
  57. if (
  58. linkHrefFile.toLowerCase() === COMPODOC_CURRENT_PAGE_URL.toLowerCase() &&
  59. link.innerHTML.indexOf('Getting started') == -1 &&
  60. !dontAddClass &&
  61. linkHref.toLowerCase().indexOf(localContextInUrl.toLowerCase()) !== -1
  62. ) {
  63. link.classList.add('active');
  64. }
  65. processLink(link, linkHref);
  66. }
  67. }
  68. };
  69. var chapterLinks = document.querySelectorAll('[data-type="chapter-link"]');
  70. processMenuLinks(chapterLinks);
  71. var entityLinks = document.querySelectorAll('[data-type="entity-link"]');
  72. processMenuLinks(entityLinks);
  73. var indexLinks = document.querySelectorAll('[data-type="index-link"]');
  74. processMenuLinks(indexLinks, true);
  75. var compodocLogos = document.querySelectorAll('[data-type="compodoc-logo"]');
  76. var customLogo = document.querySelectorAll('[data-type="custom-logo"]');
  77. var processLogos = function (entityLogos) {
  78. for (var i = 0; i < entityLogos.length; i++) {
  79. var entityLogo = entityLogos[i];
  80. if (entityLogo) {
  81. var url = entityLogo.getAttribute('data-src');
  82. // Dark mode + logo
  83. let isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
  84. if (isDarkMode && url.indexOf('compodoc') !== -1) {
  85. url = 'images/compodoc-vectorise-inverted.png';
  86. }
  87. if (url.charAt(0) !== '.') {
  88. var prefix = '';
  89. switch (COMPODOC_CURRENT_PAGE_DEPTH) {
  90. case 5:
  91. prefix = '../../../../../';
  92. break;
  93. case 4:
  94. prefix = '../../../../';
  95. break;
  96. case 3:
  97. prefix = '../../../';
  98. break;
  99. case 2:
  100. prefix = '../../';
  101. break;
  102. case 1:
  103. prefix = '../';
  104. break;
  105. case 0:
  106. prefix = './';
  107. break;
  108. }
  109. entityLogo.src = prefix + url;
  110. }
  111. }
  112. }
  113. };
  114. processLogos(compodocLogos);
  115. processLogos(customLogo);
  116. setTimeout(function () {
  117. document.getElementById('btn-menu').addEventListener('click', function () {
  118. if (menuCollapsed) {
  119. mobileMenu.style.display = 'none';
  120. } else {
  121. mobileMenu.style.display = 'block';
  122. document.getElementsByTagName('body')[0].style['overflow-y'] = 'hidden';
  123. }
  124. menuCollapsed = !menuCollapsed;
  125. });
  126. /**
  127. * Native bootstrap doesn't wait DOMContentLoaded event to start his job, re do it here
  128. */
  129. var Collapses = document.querySelectorAll('[data-bs-toggle="collapse"]');
  130. for (var o = 0, cll = Collapses.length; o < cll; o++) {
  131. var collapse = Collapses[o],
  132. options = {};
  133. options.duration = collapse.getAttribute('data-duration');
  134. const targetId = collapse.getAttribute('data-bs-target');
  135. if (targetId !== '') {
  136. options.parent = collapse;
  137. const c = new BSN.Collapse(targetId, options);
  138. }
  139. }
  140. // collapse menu
  141. var classnameMenuToggler = document.getElementsByClassName('menu-toggler'),
  142. faAngleUpClass = 'ion-ios-arrow-up',
  143. faAngleDownClass = 'ion-ios-arrow-down',
  144. toggleItemMenu = function (e) {
  145. var element = e.target,
  146. parent = element.parentNode,
  147. parentLink,
  148. elementIconChild;
  149. if (parent) {
  150. if (!parent.classList.contains('linked')) {
  151. e.preventDefault();
  152. } else {
  153. parentLink = parent.parentNode;
  154. if (parentLink && element.classList.contains('link-name')) {
  155. parentLink.trigger('click');
  156. }
  157. }
  158. elementIconChild = parent.getElementsByClassName(faAngleUpClass)[0];
  159. if (!elementIconChild) {
  160. elementIconChild = parent.getElementsByClassName(faAngleDownClass)[0];
  161. }
  162. if (elementIconChild) {
  163. if (elementIconChild.classList.contains(faAngleUpClass)) {
  164. elementIconChild.classList.add(faAngleDownClass);
  165. elementIconChild.classList.remove(faAngleUpClass);
  166. } else {
  167. elementIconChild.classList.add(faAngleUpClass);
  168. elementIconChild.classList.remove(faAngleDownClass);
  169. }
  170. }
  171. }
  172. };
  173. for (var i = 0; i < classnameMenuToggler.length; i++) {
  174. classnameMenuToggler[i].addEventListener('click', toggleItemMenu, false);
  175. }
  176. // Scroll to active link
  177. var menus = document.querySelectorAll('.menu'),
  178. i = 0,
  179. len = menus.length,
  180. activeMenu,
  181. activeMenuClass,
  182. activeLink;
  183. for (i; i < len; i++) {
  184. if (getComputedStyle(menus[i]).display != 'none') {
  185. activeMenu = menus[i];
  186. activeMenuClass = activeMenu.getAttribute('class').split(' ')[0];
  187. }
  188. }
  189. if (activeMenu) {
  190. activeLink = document.querySelector('.' + activeMenuClass + ' .active');
  191. if (activeLink) {
  192. var linkType = activeLink.getAttribute('data-type');
  193. var linkContext = activeLink.getAttribute('data-context');
  194. if (linkType === 'entity-link') {
  195. var parentLi = activeLink.parentNode,
  196. parentUl,
  197. parentChapterMenu;
  198. if (parentLi) {
  199. parentUl = parentLi.parentNode;
  200. if (parentUl) {
  201. parentChapterMenu = parentUl.parentNode;
  202. if (parentChapterMenu) {
  203. var toggler = parentChapterMenu.querySelector('.menu-toggler'),
  204. elementIconChild =
  205. toggler.getElementsByClassName(faAngleUpClass)[0];
  206. if (toggler && !elementIconChild) {
  207. toggler.click();
  208. }
  209. }
  210. }
  211. }
  212. if (linkContext && linkContext === 'sub-entity') {
  213. // Toggle also the master parent menu
  214. var linkContextId = activeLink.getAttribute('data-context-id');
  215. var toggler = activeMenu.querySelector(
  216. '.chapter.' + linkContextId + ' a .menu-toggler'
  217. );
  218. if (toggler) {
  219. toggler.click();
  220. }
  221. if (linkContextId === 'additional') {
  222. var mainToggler = activeMenu.querySelector(
  223. '.chapter.' + linkContextId + ' div.menu-toggler'
  224. );
  225. if (mainToggler) {
  226. mainToggler.click();
  227. }
  228. }
  229. }
  230. } else if (linkType === 'chapter-link') {
  231. var linkContextId = activeLink.getAttribute('data-context-id');
  232. var toggler = activeLink.querySelector('.menu-toggler');
  233. if (toggler) {
  234. toggler.click();
  235. }
  236. if (linkContextId === 'additional') {
  237. var mainToggler = activeMenu.querySelector(
  238. '.chapter.' + linkContextId + ' div.menu-toggler'
  239. );
  240. if (mainToggler) {
  241. mainToggler.click();
  242. }
  243. }
  244. }
  245. setTimeout(function () {
  246. activeMenu.scrollTop = activeLink.offsetTop;
  247. if (
  248. activeLink.innerHTML.toLowerCase().indexOf('readme') != -1 ||
  249. activeLink.innerHTML.toLowerCase().indexOf('overview') != -1
  250. ) {
  251. activeMenu.scrollTop = 0;
  252. }
  253. }, 300);
  254. }
  255. }
  256. }, 0);
  257. });