Commit 57214375 authored by Tim Zallmann's avatar Tim Zallmann

Improved project.js and select2 loading

We check now if select2 dropdowns are actually on the screen
parent 8c871ce3
...@@ -97,7 +97,10 @@ const groupsSelect = () => { ...@@ -97,7 +97,10 @@ const groupsSelect = () => {
}); });
}; };
export default () => export default () => {
import(/* webpackChunkName: 'select2' */ 'select2/select2') if ($('.ajax-groups-select').length) {
.then(groupsSelect) import(/* webpackChunkName: 'select2' */ 'select2/select2')
.catch(() => {}); .then(groupsSelect)
.catch(() => {});
}
};
...@@ -13,48 +13,54 @@ import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown'; ...@@ -13,48 +13,54 @@ import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
export default class Project { export default class Project {
constructor() { constructor() {
const $cloneOptions = $('ul.clone-options-dropdown'); const $cloneOptions = $('ul.clone-options-dropdown');
const $projectCloneField = $('#project_clone'); if ($cloneOptions.length) {
const $cloneBtnLabel = $('.js-git-clone-holder .js-clone-dropdown-label'); const $projectCloneField = $('#project_clone');
const mobileCloneField = document.querySelector( const $cloneBtnLabel = $('.js-git-clone-holder .js-clone-dropdown-label');
'.js-mobile-git-clone .js-clone-dropdown-label', const mobileCloneField = document.querySelector(
); '.js-mobile-git-clone .js-clone-dropdown-label',
);
const selectedCloneOption = $cloneBtnLabel.text().trim();
if (selectedCloneOption.length > 0) { const selectedCloneOption = $cloneBtnLabel.text().trim();
$(`a:contains('${selectedCloneOption}')`, $cloneOptions).addClass('is-active'); if (selectedCloneOption.length > 0) {
} $(`a:contains('${selectedCloneOption}')`, $cloneOptions).addClass('is-active');
}
$('a', $cloneOptions).on('click', e => { $('a', $cloneOptions).on('click', e => {
e.preventDefault(); e.preventDefault();
const $this = $(e.currentTarget); const $this = $(e.currentTarget);
const url = $this.attr('href'); const url = $this.attr('href');
const cloneType = $this.data('cloneType'); const cloneType = $this.data('cloneType');
$('.is-active', $cloneOptions).removeClass('is-active'); $('.is-active', $cloneOptions).removeClass('is-active');
$(`a[data-clone-type="${cloneType}"]`).each(function() { $(`a[data-clone-type="${cloneType}"]`).each(function() {
const $el = $(this); const $el = $(this);
const activeText = $el.find('.dropdown-menu-inner-title').text(); const activeText = $el.find('.dropdown-menu-inner-title').text();
const $container = $el.closest('.project-clone-holder'); const $container = $el.closest('.project-clone-holder');
const $label = $container.find('.js-clone-dropdown-label'); const $label = $container.find('.js-clone-dropdown-label');
$el.toggleClass('is-active'); $el.toggleClass('is-active');
$label.text(activeText); $label.text(activeText);
});
if (mobileCloneField) {
mobileCloneField.dataset.clipboardText = url;
} else {
$projectCloneField.val(url);
}
$('.js-git-empty .js-clone').text(url);
}); });
}
if (mobileCloneField) {
mobileCloneField.dataset.clipboardText = url;
} else {
$projectCloneField.val(url);
}
$('.js-git-empty .js-clone').text(url);
});
// Ref switcher // Ref switcher
Project.initRefSwitcher(); if (document.querySelector('.js-project-refs-dropdown')) {
$('.project-refs-select').on('change', function() { Project.initRefSwitcher();
return $(this) $('.project-refs-select').on('change', function() {
.parents('form') return $(this)
.submit(); .parents('form')
}); .submit();
});
}
$('.hide-no-ssh-message').on('click', function(e) { $('.hide-no-ssh-message').on('click', function(e) {
Cookies.set('hide_no_ssh_message', 'false'); Cookies.set('hide_no_ssh_message', 'false');
$(this) $(this)
...@@ -78,6 +84,7 @@ export default class Project { ...@@ -78,6 +84,7 @@ export default class Project {
.remove(); .remove();
return e.preventDefault(); return e.preventDefault();
}); });
Project.projectSelectDropdown(); Project.projectSelectDropdown();
} }
......
...@@ -110,7 +110,10 @@ const projectSelect = () => { ...@@ -110,7 +110,10 @@ const projectSelect = () => {
}); });
}; };
export default () => export default () => {
import(/* webpackChunkName: 'select2' */ 'select2/select2') if ($('.ajax-project-select').length) {
.then(projectSelect) import(/* webpackChunkName: 'select2' */ 'select2/select2')
.catch(() => {}); .then(projectSelect)
.catch(() => {});
}
};
...@@ -561,92 +561,99 @@ function UsersSelect(currentUser, els, options = {}) { ...@@ -561,92 +561,99 @@ function UsersSelect(currentUser, els, options = {}) {
}, },
}); });
}); });
import(/* webpackChunkName: 'select2' */ 'select2/select2')
.then(() => { if ($('.ajax-users-select').length) {
$('.ajax-users-select').each((i, select) => { import(/* webpackChunkName: 'select2' */ 'select2/select2')
const options = getAjaxUsersSelectOptions($(select), AJAX_USERS_SELECT_OPTIONS_MAP); .then(() => {
options.skipLdap = $(select).hasClass('skip_ldap'); $('.ajax-users-select').each((i, select) => {
const showNullUser = $(select).data('nullUser'); const options = getAjaxUsersSelectOptions($(select), AJAX_USERS_SELECT_OPTIONS_MAP);
const showAnyUser = $(select).data('anyUser'); options.skipLdap = $(select).hasClass('skip_ldap');
const showEmailUser = $(select).data('emailUser'); const showNullUser = $(select).data('nullUser');
const firstUser = $(select).data('firstUser'); const showAnyUser = $(select).data('anyUser');
return $(select).select2({ const showEmailUser = $(select).data('emailUser');
placeholder: __('Search for a user'), const firstUser = $(select).data('firstUser');
multiple: $(select).hasClass('multiselect'), return $(select).select2({
minimumInputLength: 0, placeholder: __('Search for a user'),
query(query) { multiple: $(select).hasClass('multiselect'),
return userSelect.users(query.term, options, users => { minimumInputLength: 0,
let name; query(query) {
const data = { return userSelect.users(query.term, options, users => {
results: users, let name;
}; const data = {
if (query.term.length === 0) { results: users,
if (firstUser) { };
// Move current user to the front of the list if (query.term.length === 0) {
const ref = data.results; if (firstUser) {
// Move current user to the front of the list
for (let index = 0, len = ref.length; index < len; index += 1) { const ref = data.results;
const obj = ref[index];
if (obj.username === firstUser) { for (let index = 0, len = ref.length; index < len; index += 1) {
data.results.splice(index, 1); const obj = ref[index];
data.results.unshift(obj); if (obj.username === firstUser) {
break; data.results.splice(index, 1);
data.results.unshift(obj);
break;
}
} }
} }
} if (showNullUser) {
if (showNullUser) { const nullUser = {
const nullUser = { name: s__('UsersSelect|Unassigned'),
name: s__('UsersSelect|Unassigned'), id: 0,
id: 0, };
}; data.results.unshift(nullUser);
data.results.unshift(nullUser); }
} if (showAnyUser) {
if (showAnyUser) { name = showAnyUser;
name = showAnyUser; if (name === true) {
if (name === true) { name = s__('UsersSelect|Any User');
name = s__('UsersSelect|Any User'); }
const anyUser = {
name,
id: null,
};
data.results.unshift(anyUser);
} }
const anyUser = { }
name, if (
id: null, showEmailUser &&
data.results.length === 0 &&
query.term.match(/^[^@]+@[^@]+$/)
) {
const trimmed = query.term.trim();
const emailUser = {
name: sprintf(__('Invite "%{trimmed}" by email'), { trimmed }),
username: trimmed,
id: trimmed,
invite: true,
}; };
data.results.unshift(anyUser); data.results.unshift(emailUser);
} }
} return query.callback(data);
if (showEmailUser && data.results.length === 0 && query.term.match(/^[^@]+@[^@]+$/)) { });
const trimmed = query.term.trim(); },
const emailUser = { initSelection() {
name: sprintf(__('Invite "%{trimmed}" by email'), { trimmed }), const args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
username: trimmed, return userSelect.initSelection.apply(userSelect, args);
id: trimmed, },
invite: true, formatResult() {
}; const args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
data.results.unshift(emailUser); return userSelect.formatResult.apply(userSelect, args);
} },
return query.callback(data); formatSelection() {
}); const args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
}, return userSelect.formatSelection.apply(userSelect, args);
initSelection() { },
const args = 1 <= arguments.length ? [].slice.call(arguments, 0) : []; dropdownCssClass: 'ajax-users-dropdown',
return userSelect.initSelection.apply(userSelect, args); // we do not want to escape markup since we are displaying html in results
}, escapeMarkup(m) {
formatResult() { return m;
const args = 1 <= arguments.length ? [].slice.call(arguments, 0) : []; },
return userSelect.formatResult.apply(userSelect, args); });
},
formatSelection() {
const args = 1 <= arguments.length ? [].slice.call(arguments, 0) : [];
return userSelect.formatSelection.apply(userSelect, args);
},
dropdownCssClass: 'ajax-users-dropdown',
// we do not want to escape markup since we are displaying html in results
escapeMarkup(m) {
return m;
},
}); });
}); })
}) .catch(() => {});
.catch(() => {}); }
} }
UsersSelect.prototype.initSelection = function(element, callback) { UsersSelect.prototype.initSelection = function(element, callback) {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment