menu.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  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[0].parentNode,
  147. parentLink,
  148. elementIconChild;
  149. if (parent) {
  150. if (!$(parent).hasClass('linked')) {
  151. e.preventDefault();
  152. } else {
  153. parentLink = parent.parentNode;
  154. if (parentLink && element.hasClass('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. elementIconChild = $(elementIconChild);
  164. if (elementIconChild.hasClass(faAngleUpClass)) {
  165. elementIconChild.addClass(faAngleDownClass);
  166. elementIconChild.removeClass(faAngleUpClass);
  167. } else {
  168. elementIconChild.addClass(faAngleUpClass);
  169. elementIconChild.removeClass(faAngleDownClass);
  170. }
  171. }
  172. }
  173. };
  174. for (var i = 0; i < classnameMenuToggler.length; i++) {
  175. classnameMenuToggler[i].addEventListener('click', toggleItemMenu, false);
  176. }
  177. // Scroll to active link
  178. var menus = document.querySelectorAll('.menu'),
  179. i = 0,
  180. len = menus.length,
  181. activeMenu,
  182. activeMenuClass,
  183. activeLink;
  184. for (i; i < len; i++) {
  185. if (getComputedStyle(menus[i]).display != 'none') {
  186. activeMenu = menus[i];
  187. activeMenuClass = activeMenu.getAttribute('class').split(' ')[0];
  188. }
  189. }
  190. if (activeMenu) {
  191. activeLink = document.querySelector('.' + activeMenuClass + ' .active');
  192. if (activeLink) {
  193. var linkType = activeLink.getAttribute('data-type');
  194. var linkContext = activeLink.getAttribute('data-context');
  195. if (linkType === 'entity-link') {
  196. var parentLi = activeLink.parentNode,
  197. parentUl,
  198. parentChapterMenu;
  199. if (parentLi) {
  200. parentUl = parentLi.parentNode;
  201. if (parentUl) {
  202. parentChapterMenu = parentUl.parentNode;
  203. if (parentChapterMenu) {
  204. var toggler = parentChapterMenu.querySelector('.menu-toggler'),
  205. elementIconChild =
  206. toggler.getElementsByClassName(faAngleUpClass)[0];
  207. if (toggler && !elementIconChild) {
  208. toggler.click();
  209. }
  210. }
  211. }
  212. }
  213. if (linkContext && linkContext === 'sub-entity') {
  214. // Toggle also the master parent menu
  215. var linkContextId = activeLink.getAttribute('data-context-id');
  216. var toggler = activeMenu.querySelector(
  217. '.chapter.' + linkContextId + ' a .menu-toggler'
  218. );
  219. if (toggler) {
  220. toggler.click();
  221. }
  222. if (linkContextId === 'additional') {
  223. var mainToggler = activeMenu.querySelector(
  224. '.chapter.' + linkContextId + ' div.menu-toggler'
  225. );
  226. if (mainToggler) {
  227. mainToggler.click();
  228. }
  229. }
  230. }
  231. } else if (linkType === 'chapter-link') {
  232. var linkContextId = activeLink.getAttribute('data-context-id');
  233. var toggler = activeLink.querySelector('.menu-toggler');
  234. if (toggler) {
  235. toggler.click();
  236. }
  237. if (linkContextId === 'additional') {
  238. var mainToggler = activeMenu.querySelector(
  239. '.chapter.' + linkContextId + ' div.menu-toggler'
  240. );
  241. if (mainToggler) {
  242. mainToggler.click();
  243. }
  244. }
  245. }
  246. setTimeout(function () {
  247. activeMenu.scrollTop = activeLink.offsetTop;
  248. if (
  249. activeLink.innerHTML.toLowerCase().indexOf('readme') != -1 ||
  250. activeLink.innerHTML.toLowerCase().indexOf('overview') != -1
  251. ) {
  252. activeMenu.scrollTop = 0;
  253. }
  254. }, 300);
  255. }
  256. }
  257. }, 0);
  258. });