diff options
Diffstat (limited to 'app/assets/javascripts/main.js')
-rw-r--r-- | app/assets/javascripts/main.js | 98 |
1 files changed, 28 insertions, 70 deletions
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 5f5fd790f67..3f85295a5ed 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -19,6 +19,7 @@ import { getLocationHash, visitUrl } from './lib/utils/url_utility'; // everything else import loadAwardsHandler from './awards_handler'; +import applyGitLabUIConfig from '@gitlab/ui/dist/config'; import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils'; import Flash, { removeFlashClickListener } from './flash'; import './gl_dropdown'; @@ -32,7 +33,7 @@ import initFrequentItemDropdowns from './frequent_items'; import initBreadcrumbs from './breadcrumb'; import initUsagePingConsent from './usage_ping_consent'; import initPerformanceBar from './performance_bar'; -import initGlobalSearchInput from './global_search_input'; +import initSearchAutocomplete from './search_autocomplete'; import GlFieldErrors from './gl_field_errors'; import initUserPopovers from './user_popovers'; import initBroadcastNotifications from './broadcast_notification'; @@ -42,6 +43,8 @@ import { __ } from './locale'; import 'ee_else_ce/main_ee'; +applyGitLabUIConfig(); + // expose jQuery as global (TODO: remove these) window.jQuery = jQuery; window.$ = jQuery; @@ -62,12 +65,12 @@ function disableJQueryAnimations() { } // Disable jQuery animations -if (gon && gon.disable_animations) { +if (gon?.disable_animations) { disableJQueryAnimations(); } // inject test utilities if necessary -if (process.env.NODE_ENV !== 'production' && gon && gon.test_env) { +if (process.env.NODE_ENV !== 'production' && gon?.test_env) { disableJQueryAnimations(); import(/* webpackMode: "eager" */ './test_utils/'); // eslint-disable-line no-unused-expressions } @@ -110,7 +113,7 @@ function deferredInitialisation() { initFrequentItemDropdowns(); initPersistentUserCallouts(); - if (document.querySelector('.search')) initGlobalSearchInput(); + if (document.querySelector('.search')) initSearchAutocomplete(); addSelectOnFocusBehaviour('.js-select-on-focus'); @@ -132,27 +135,6 @@ function deferredInitialisation() { .fadeOut(); }); - // Initialize select2 selects - if ($('select.select2').length) { - import(/* webpackChunkName: 'select2' */ 'select2/select2') - .then(() => { - $('select.select2').select2({ - width: 'resolve', - minimumResultsForSearch: 10, - dropdownAutoWidth: true, - }); - - // Close select2 on escape - $('.js-select2').on('select2-close', () => { - setTimeout(() => { - $('.select2-container-active').removeClass('select2-container-active'); - $(':focus').blur(); - }, 1); - }); - }) - .catch(() => {}); - } - const glTooltipDelay = localStorage.getItem('gl-tooltip-delay'); const delay = glTooltipDelay ? JSON.parse(glTooltipDelay) : 0; @@ -179,9 +161,7 @@ function deferredInitialisation() { document.addEventListener('DOMContentLoaded', () => { const $body = $('body'); const $document = $(document); - const $window = $(window); - const $sidebarGutterToggle = $('.js-sidebar-toggle'); - let bootstrapBreakpoint = bp.getBreakpointSize(); + const bootstrapBreakpoint = bp.getBreakpointSize(); if (document.querySelector('#js-peek')) initPerformanceBar({ container: '#js-peek' }); @@ -199,6 +179,15 @@ document.addEventListener('DOMContentLoaded', () => { } }); + /** + * 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'); @@ -225,14 +214,12 @@ document.addEventListener('DOMContentLoaded', () => { localTimeAgo($('abbr.timeago, .js-timeago'), true); - // Form submitter - $('.trigger-submit').on('change', function triggerSubmitCallback() { - $(this) - .parents('form') - .submit(); - }); - - // Disable form buttons while a form is submitting + /** + * 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) { @@ -259,7 +246,11 @@ document.addEventListener('DOMContentLoaded', () => { $('.header-content').toggleClass('menu-expanded'); }); - // Commit show suppressed diff + /** + * 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(); @@ -290,39 +281,6 @@ document.addEventListener('DOMContentLoaded', () => { $(document).trigger('toggle.comments'); }); - $document.on('breakpoint:change', (e, breakpoint) => { - const breakpointSizes = ['md', 'sm', 'xs']; - if (breakpointSizes.includes(breakpoint)) { - const $gutterIcon = $sidebarGutterToggle.find('i'); - if ($gutterIcon.hasClass('fa-angle-double-right')) { - $sidebarGutterToggle.trigger('click'); - } - - const sidebarGutterVueToggleEl = document.querySelector('.js-sidebar-vue-toggle'); - - // Sidebar has an icon which corresponds to collapsing the sidebar - // only then trigger the click. - if (sidebarGutterVueToggleEl) { - const collapseIcon = sidebarGutterVueToggleEl.querySelector('i.fa-angle-double-right'); - - if (collapseIcon) { - collapseIcon.click(); - } - } - } - }); - - function fitSidebarForSize() { - const oldBootstrapBreakpoint = bootstrapBreakpoint; - bootstrapBreakpoint = bp.getBreakpointSize(); - - if (bootstrapBreakpoint !== oldBootstrapBreakpoint) { - $document.trigger('breakpoint:change', [bootstrapBreakpoint]); - } - } - - $window.on('resize.app', fitSidebarForSize); - $('form.filter-form').on('submit', function filterFormSubmitCallback(event) { const link = document.createElement('a'); link.href = this.action; |