From fccef985fe35c904af97da10d5439b8138b6add9 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Tue, 19 Dec 2017 14:38:54 -0500 Subject: [PATCH 1/4] Conditionally import loads the projects dropdown when opened. --- app/assets/javascripts/main.js | 5 + .../javascripts/projects_dropdown/index.js | 100 +++++++++--------- .../javascripts/projects_dropdown_loader.js | 14 +++ 3 files changed, 68 insertions(+), 51 deletions(-) create mode 100644 app/assets/javascripts/projects_dropdown_loader.js diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index e90119582398b0..60e6445d5423e9 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -45,6 +45,7 @@ import './gl_field_error'; import './gl_field_errors'; import './gl_form'; import initTodoToggle from './header'; +import conditionallyLoadProjectDropdown from './projects_dropdown_loader'; import initImporterStatus from './importer_status'; import './layout_nav'; import LazyLoader from './lazy_loader'; @@ -55,8 +56,11 @@ import './notifications_dropdown'; import './notifications_form'; import './pager'; import './preview_markdown'; +<<<<<<< HEAD import './project_import'; import './projects_dropdown'; +======= +>>>>>>> 790bbe7... Conditionally import loads the projects dropdown when opened. import './render_gfm'; import initBreadcrumbs from './breadcrumb'; @@ -110,6 +114,7 @@ $(function () { initImporterStatus(); initTodoToggle(); initLogoAnimation(); + conditionallyLoadProjectDropdown(); // Set the default path for all cookies to GitLab's root directory Cookies.defaults.path = gon.relative_url_root || '/'; diff --git a/app/assets/javascripts/projects_dropdown/index.js b/app/assets/javascripts/projects_dropdown/index.js index 2660da3c5589e5..e65e1e29ce3c95 100644 --- a/app/assets/javascripts/projects_dropdown/index.js +++ b/app/assets/javascripts/projects_dropdown/index.js @@ -9,60 +9,58 @@ import projectsDropdownApp from './components/app.vue'; Vue.use(Translate); -document.addEventListener('DOMContentLoaded', () => { - const el = document.getElementById('js-projects-dropdown'); - const navEl = document.getElementById('nav-projects-dropdown'); +const el = document.getElementById('js-projects-dropdown'); +const navEl = document.getElementById('nav-projects-dropdown'); - // Don't do anything if element doesn't exist (No projects dropdown) - // This is for when the user accesses GitLab without logging in - if (!el || !navEl) { - return; - } - - $(navEl).on('show.bs.dropdown', (e) => { - const dropdownEl = $(e.currentTarget).find('.projects-dropdown-menu'); - dropdownEl.one('transitionend', () => { - eventHub.$emit('dropdownOpen'); - }); +function dropdownOpened(e) { + const dropdownEl = $(e.currentTarget).find('.projects-dropdown-menu'); + dropdownEl.one('transitionend', () => { + eventHub.$emit('dropdownOpen'); }); +} - // eslint-disable-next-line no-new - new Vue({ - el, - components: { - projectsDropdownApp, - }, - data() { - const dataset = this.$options.el.dataset; - const store = new ProjectsStore(); - const service = new ProjectsService(dataset.userName); +$(navEl).on('show.bs.dropdown', (e) => { + dropdownOpened(e); +}); - const project = { - id: Number(dataset.projectId), - name: dataset.projectName, - namespace: dataset.projectNamespace, - webUrl: dataset.projectWebUrl, - avatarUrl: dataset.projectAvatarUrl || null, - lastAccessedOn: Date.now(), - }; +// eslint-disable-next-line no-new +new Vue({ + el, + components: { + projectsDropdownApp, + }, + data() { + const dataset = this.$options.el.dataset; + const store = new ProjectsStore(); + const service = new ProjectsService(dataset.userName); - return { - store, - service, - state: store.state, - currentUserName: dataset.userName, - currentProject: project, - }; - }, - render(createElement) { - return createElement('projects-dropdown-app', { - props: { - currentUserName: this.currentUserName, - currentProject: this.currentProject, - store: this.store, - service: this.service, - }, - }); - }, - }); + const project = { + id: Number(dataset.projectId), + name: dataset.projectName, + namespace: dataset.projectNamespace, + webUrl: dataset.projectWebUrl, + avatarUrl: dataset.projectAvatarUrl || null, + lastAccessedOn: Date.now(), + }; + + return { + store, + service, + state: store.state, + currentUserName: dataset.userName, + currentProject: project, + }; + }, + render(createElement) { + return createElement('projects-dropdown-app', { + props: { + currentUserName: this.currentUserName, + currentProject: this.currentProject, + store: this.store, + service: this.service, + }, + }); + }, }); + +export default dropdownOpened; diff --git a/app/assets/javascripts/projects_dropdown_loader.js b/app/assets/javascripts/projects_dropdown_loader.js new file mode 100644 index 00000000000000..8347541f318165 --- /dev/null +++ b/app/assets/javascripts/projects_dropdown_loader.js @@ -0,0 +1,14 @@ +export default function conditionallyLoadProjectDropdown() { + const el = document.getElementById('js-projects-dropdown'); + const navEl = document.getElementById('nav-projects-dropdown'); + if (!el || !navEl) { + return; + } + $(navEl).one('show.bs.dropdown', (e) => { + import(/* webpackChunkName: 'projects_dropdown' */ './projects_dropdown') + .then((importedFunc) => { + importedFunc.default(e); + }) + .catch(()=> {}); + }); +} -- GitLab From 63d7112ee9936e180fcdffd3b0adeaa1d51f6d80 Mon Sep 17 00:00:00 2001 From: Jacob Schatz Date: Tue, 19 Dec 2017 14:48:55 -0500 Subject: [PATCH 2/4] fix conflicts --- app/assets/javascripts/main.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js index 60e6445d5423e9..629b7b6b487d57 100644 --- a/app/assets/javascripts/main.js +++ b/app/assets/javascripts/main.js @@ -56,11 +56,7 @@ import './notifications_dropdown'; import './notifications_form'; import './pager'; import './preview_markdown'; -<<<<<<< HEAD import './project_import'; -import './projects_dropdown'; -======= ->>>>>>> 790bbe7... Conditionally import loads the projects dropdown when opened. import './render_gfm'; import initBreadcrumbs from './breadcrumb'; -- GitLab From dbffcd2279a49c57b03268c891354c2e44f2fa8a Mon Sep 17 00:00:00 2001 From: Constance Okoghenun Date: Tue, 9 Jan 2018 00:38:19 +0100 Subject: [PATCH 3/4] Fixed linting bug --- app/assets/javascripts/projects_dropdown_loader.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/projects_dropdown_loader.js b/app/assets/javascripts/projects_dropdown_loader.js index 8347541f318165..0c2786f65319f5 100644 --- a/app/assets/javascripts/projects_dropdown_loader.js +++ b/app/assets/javascripts/projects_dropdown_loader.js @@ -9,6 +9,6 @@ export default function conditionallyLoadProjectDropdown() { .then((importedFunc) => { importedFunc.default(e); }) - .catch(()=> {}); + .catch(() => {}); }); } -- GitLab From b037bf4e934eb1ef3c02cec2848bf78b1f9f5903 Mon Sep 17 00:00:00 2001 From: Constance Okoghenun Date: Sun, 14 Jan 2018 01:00:03 +0100 Subject: [PATCH 4/4] Added check for when project dropdown element is not in the dom --- app/assets/javascripts/projects_dropdown/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/assets/javascripts/projects_dropdown/index.js b/app/assets/javascripts/projects_dropdown/index.js index d70104b56f5aef..077ebacacdd1c7 100644 --- a/app/assets/javascripts/projects_dropdown/index.js +++ b/app/assets/javascripts/projects_dropdown/index.js @@ -35,7 +35,7 @@ new Vue({ projectsDropdownApp, }, data() { - const dataset = this.$options.el.dataset; + const dataset = this.$options.el ? this.$options.el.dataset : {}; const store = new ProjectsStore(); const service = new ProjectsService(dataset.userName); -- GitLab