diff options
Diffstat (limited to 'app/assets/javascripts/header.js')
-rw-r--r-- | app/assets/javascripts/header.js | 79 |
1 files changed, 34 insertions, 45 deletions
diff --git a/app/assets/javascripts/header.js b/app/assets/javascripts/header.js index 3f9163e924d..b833cca1db6 100644 --- a/app/assets/javascripts/header.js +++ b/app/assets/javascripts/header.js @@ -2,9 +2,6 @@ import $ from 'jquery'; import Vue from 'vue'; import Translate from '~/vue_shared/translate'; import { highCountTrim } from '~/lib/utils/text_utility'; -import SetStatusModalTrigger from './set_status_modal/set_status_modal_trigger.vue'; -import SetStatusModalWrapper from './set_status_modal/set_status_modal_wrapper.vue'; -import { parseBoolean } from '~/lib/utils/common_utils'; import Tracking from '~/tracking'; /** @@ -17,7 +14,7 @@ import Tracking from '~/tracking'; export default function initTodoToggle() { $(document).on('todo:toggle', (e, count) => { const updatedCount = count || e?.detail?.count || 0; - const $todoPendingCount = $('.todos-count'); + const $todoPendingCount = $('.js-todos-count'); $todoPendingCount.text(highCountTrim(updatedCount)); $todoPendingCount.toggleClass('hidden', updatedCount === 0); @@ -26,51 +23,43 @@ export default function initTodoToggle() { function initStatusTriggers() { const setStatusModalTriggerEl = document.querySelector('.js-set-status-modal-trigger'); - const setStatusModalWrapperEl = document.querySelector('.js-set-status-modal-wrapper'); - if (setStatusModalTriggerEl || setStatusModalWrapperEl) { - Vue.use(Translate); + if (setStatusModalTriggerEl) { + setStatusModalTriggerEl.addEventListener('click', () => { + import( + /* webpackChunkName: 'statusModalBundle' */ './set_status_modal/set_status_modal_wrapper.vue' + ) + .then(({ default: SetStatusModalWrapper }) => { + const setStatusModalWrapperEl = document.querySelector('.js-set-status-modal-wrapper'); + const statusModalElement = document.createElement('div'); + setStatusModalWrapperEl.appendChild(statusModalElement); - // eslint-disable-next-line no-new - new Vue({ - el: setStatusModalTriggerEl, - data() { - const { hasStatus } = this.$options.el.dataset; + Vue.use(Translate); - return { - hasStatus: parseBoolean(hasStatus), - }; - }, - render(createElement) { - return createElement(SetStatusModalTrigger, { - props: { - hasStatus: this.hasStatus, - }, - }); - }, - }); - - // eslint-disable-next-line no-new - new Vue({ - el: setStatusModalWrapperEl, - data() { - const { currentEmoji, currentMessage } = this.$options.el.dataset; + // eslint-disable-next-line no-new + new Vue({ + el: statusModalElement, + data() { + const { currentEmoji, currentMessage } = setStatusModalWrapperEl.dataset; - return { - currentEmoji, - currentMessage, - }; - }, - render(createElement) { - const { currentEmoji, currentMessage } = this; + return { + currentEmoji, + currentMessage, + }; + }, + render(createElement) { + const { currentEmoji, currentMessage } = this; - return createElement(SetStatusModalWrapper, { - props: { - currentEmoji, - currentMessage, - }, - }); - }, + return createElement(SetStatusModalWrapper, { + props: { + currentEmoji, + currentMessage, + }, + }); + }, + }); + }) + .catch(() => {}); }); } } @@ -101,5 +90,5 @@ export function initNavUserDropdownTracking() { document.addEventListener('DOMContentLoaded', () => { requestIdleCallback(initStatusTriggers); - initNavUserDropdownTracking(); + requestIdleCallback(initNavUserDropdownTracking); }); |