diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 7f5e22c397b93266e4f98e1766d5a46c719aebb0..f63bf8f49cb4162b91f6d24313ab726b3491de54 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -131,138 +131,136 @@ function deferredInitialisation() { setTimeout(() => $body.addClass('page-initialised'), 1000); } -document.addEventListener('DOMContentLoaded', () => { - const $body = $('body'); - const $document = $(document); - const bootstrapBreakpoint = bp.getBreakpointSize(); - - initUserTracking(); - initLayoutNav(); - initAlertHandler(); - - // Set the default path for all cookies to GitLab's root directory - Cookies.defaults.path = gon.relative_url_root || '/'; - - // `hashchange` is not triggered when link target is already in window.location - $body.on('click', 'a[href^="#"]', function clickHashLinkCallback() { - const href = this.getAttribute('href'); - if (href.substr(1) === getLocationHash()) { - setTimeout(handleLocationHash, 1); - } - }); +const $body = $('body'); +const $document = $(document); +const bootstrapBreakpoint = bp.getBreakpointSize(); + +initUserTracking(); +initLayoutNav(); +initAlertHandler(); + +// Set the default path for all cookies to GitLab's root directory +Cookies.defaults.path = gon.relative_url_root || '/'; + +// `hashchange` is not triggered when link target is already in window.location +$body.on('click', 'a[href^="#"]', function clickHashLinkCallback() { + const href = this.getAttribute('href'); + if (href.substr(1) === getLocationHash()) { + setTimeout(handleLocationHash, 1); + } +}); - /** - * TODO: Apparently we are collapsing the right sidebar on certain screensizes per default - * except on issue board pages. Why can't we do it with CSS? - * - * Proposal: Expose a global sidebar API, which we could import wherever we are manipulating - * the visibility of the sidebar. - * - * Quick fix: Get rid of jQuery for this implementation - */ - const isBoardsPage = /(projects|groups):boards:show/.test(document.body.dataset.page); - if (!isBoardsPage && (bootstrapBreakpoint === 'sm' || bootstrapBreakpoint === 'xs')) { - const $rightSidebar = $('aside.right-sidebar'); - const $layoutPage = $('.layout-page'); - - if ($rightSidebar.length > 0) { - $rightSidebar.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed'); - $layoutPage.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed'); - } else { - $layoutPage.removeClass('right-sidebar-expanded right-sidebar-collapsed'); - } +/** + * TODO: Apparently we are collapsing the right sidebar on certain screensizes per default + * except on issue board pages. Why can't we do it with CSS? + * + * Proposal: Expose a global sidebar API, which we could import wherever we are manipulating + * the visibility of the sidebar. + * + * Quick fix: Get rid of jQuery for this implementation + */ +const isBoardsPage = /(projects|groups):boards:show/.test(document.body.dataset.page); +if (!isBoardsPage && (bootstrapBreakpoint === 'sm' || bootstrapBreakpoint === 'xs')) { + const $rightSidebar = $('aside.right-sidebar'); + const $layoutPage = $('.layout-page'); + + if ($rightSidebar.length > 0) { + $rightSidebar.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed'); + $layoutPage.removeClass('right-sidebar-expanded').addClass('right-sidebar-collapsed'); + } else { + $layoutPage.removeClass('right-sidebar-expanded right-sidebar-collapsed'); } +} - // prevent default action for disabled buttons - $('.btn').click(function clickDisabledButtonCallback(e) { - if ($(this).hasClass('disabled')) { - e.preventDefault(); - e.stopImmediatePropagation(); - return false; - } +// prevent default action for disabled buttons +$('.btn').click(function clickDisabledButtonCallback(e) { + if ($(this).hasClass('disabled')) { + e.preventDefault(); + e.stopImmediatePropagation(); + return false; + } - return true; - }); + return true; +}); - localTimeAgo(document.querySelectorAll('abbr.timeago, .js-timeago'), true); - - /** - * This disables form buttons while a form is submitting - * We do not difinitively know all of the places where this is used - * - * TODO: Defer execution, migrate to behaviors, and add sentry logging - */ - $body.on('ajax:complete, ajax:beforeSend, submit', 'form', function ajaxCompleteCallback(e) { - const $buttons = $('[type="submit"], .js-disable-on-submit', this).not('.js-no-auto-disable'); - switch (e.type) { - case 'ajax:beforeSend': - case 'submit': - return $buttons.disable(); - default: - return $buttons.enable(); - } - }); +localTimeAgo(document.querySelectorAll('abbr.timeago, .js-timeago'), true); + +/** + * This disables form buttons while a form is submitting + * We do not difinitively know all of the places where this is used + * + * TODO: Defer execution, migrate to behaviors, and add sentry logging + */ +$body.on('ajax:complete, ajax:beforeSend, submit', 'form', function ajaxCompleteCallback(e) { + const $buttons = $('[type="submit"], .js-disable-on-submit', this).not('.js-no-auto-disable'); + switch (e.type) { + case 'ajax:beforeSend': + case 'submit': + return $buttons.disable(); + default: + return $buttons.enable(); + } +}); - $('.navbar-toggler').on('click', () => { - // The order is important. The `menu-expanded` is used as a source of truth for now. - // This can be simplified when the :combined_menu feature flag is removed. - // https://gitlab.com/gitlab-org/gitlab/-/issues/333180 - $('.header-content').toggleClass('menu-expanded'); - navEventHub.$emit(EVENT_RESPONSIVE_TOGGLE); - }); +$('.navbar-toggler').on('click', () => { + // The order is important. The `menu-expanded` is used as a source of truth for now. + // This can be simplified when the :combined_menu feature flag is removed. + // https://gitlab.com/gitlab-org/gitlab/-/issues/333180 + $('.header-content').toggleClass('menu-expanded'); + navEventHub.$emit(EVENT_RESPONSIVE_TOGGLE); +}); - /** - * Show suppressed commit diff - * - * TODO: Move to commit diff pages - */ - $document.on('click', '.diff-content .js-show-suppressed-diff', function showDiffCallback() { - const $container = $(this).parent(); - $container.next('table').show(); - $container.remove(); - }); +/** + * Show suppressed commit diff + * + * TODO: Move to commit diff pages + */ +$document.on('click', '.diff-content .js-show-suppressed-diff', function showDiffCallback() { + const $container = $(this).parent(); + $container.next('table').show(); + $container.remove(); +}); - // Show/hide comments on diff - $body.on('click', '.js-toggle-diff-comments', function toggleDiffCommentsCallback(e) { - const $this = $(this); - const notesHolders = $this.closest('.diff-file').find('.notes_holder'); +// Show/hide comments on diff +$body.on('click', '.js-toggle-diff-comments', function toggleDiffCommentsCallback(e) { + const $this = $(this); + const notesHolders = $this.closest('.diff-file').find('.notes_holder'); - e.preventDefault(); + e.preventDefault(); - $this.toggleClass('selected'); + $this.toggleClass('selected'); - if ($this.hasClass('active')) { - notesHolders.show().find('.hide, .content').show(); - } else { - notesHolders.hide().find('.content').hide(); - } + if ($this.hasClass('active')) { + notesHolders.show().find('.hide, .content').show(); + } else { + notesHolders.hide().find('.content').hide(); + } - $(document).trigger('toggle.comments'); - }); + $(document).trigger('toggle.comments'); +}); - $('form.filter-form').on('submit', function filterFormSubmitCallback(event) { - const link = document.createElement('a'); - link.href = this.action; +$('form.filter-form').on('submit', function filterFormSubmitCallback(event) { + const link = document.createElement('a'); + link.href = this.action; - const action = `${this.action}${link.search === '' ? '?' : '&'}`; + const action = `${this.action}${link.search === '' ? '?' : '&'}`; - event.preventDefault(); - // eslint-disable-next-line no-jquery/no-serialize - visitUrl(`${action}${$(this).serialize()}`); - }); + event.preventDefault(); + // eslint-disable-next-line no-jquery/no-serialize + visitUrl(`${action}${$(this).serialize()}`); +}); - const flashContainer = document.querySelector('.flash-container'); +const flashContainer = document.querySelector('.flash-container'); - if (flashContainer && flashContainer.children.length) { - flashContainer - .querySelectorAll('.flash-alert, .flash-notice, .flash-success') - .forEach((flashEl) => { - removeFlashClickListener(flashEl); - }); - } +if (flashContainer && flashContainer.children.length) { + flashContainer + .querySelectorAll('.flash-alert, .flash-notice, .flash-success') + .forEach((flashEl) => { + removeFlashClickListener(flashEl); + }); +} - // initialize field errors - $('.gl-show-field-errors').each((i, form) => new GlFieldErrors(form)); +// initialize field errors +$('.gl-show-field-errors').each((i, form) => new GlFieldErrors(form)); - requestIdleCallback(deferredInitialisation); -}); +requestIdleCallback(deferredInitialisation);