Skip to content

Commit

Permalink
Merge branch '692-useselect2-notchosen-fixup'
Browse files Browse the repository at this point in the history 
* 692-useselect2-notchosen-fixup:
  warn/xfd: replace jquery.chosen with select2 (#692)
  • Loading branch information
@Amorymeltzer
Amorymeltzer committed Jan 24, 2020
2 parents 3ab18f2 + 4a1330c commit 4141d7d
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 26 deletions.
52 changes: 29 additions & 23 deletions modules/twinklewarn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,14 @@
*/

Twinkle.warn = function twinklewarn() {

if (mw.config.get('wgRelevantUserName')) {
Twinkle.addPortletLink(Twinkle.warn.callback, 'Warn', 'tw-warn', 'Warn/notify user');
if (Twinkle.getPref('autoMenuAfterRollback') && mw.config.get('wgNamespaceNumber') === 3 &&
mw.util.getParamValue('vanarticle') && !mw.util.getParamValue('friendlywelcome') && !mw.util.getParamValue('noautowarn')) {
if (Twinkle.getPref('autoMenuAfterRollback') &&
mw.config.get('wgNamespaceNumber') === 3 &&
mw.util.getParamValue('vanarticle') &&
!mw.util.getParamValue('friendlywelcome') &&
!mw.util.getParamValue('noautowarn')) {
Twinkle.warn.callback();
}
}
Expand Down Expand Up @@ -60,7 +64,7 @@ Twinkle.warn = function twinklewarn() {

Twinkle.warn.callback = function twinklewarnCallback() {
if (mw.config.get('wgRelevantUserName') === mw.config.get('wgUserName') &&
!confirm('You are about to warn yourself! Are you sure you want to proceed?')) {
!confirm('You are about to warn yourself! Are you sure you want to proceed?')) {
return;
}

Expand Down Expand Up @@ -1081,9 +1085,6 @@ Twinkle.warn.prev_article = null;
Twinkle.warn.prev_reason = null;

Twinkle.warn.callback.change_category = function twinklewarnCallbackChangeCategory(e) {
if (!Twinkle.getPref('oldSelect')) {
$('select[name=sub_group]').chosen('destroy');
}

var value = e.target.value;
var sub_group = e.target.root.sub_group;
Expand Down Expand Up @@ -1202,31 +1203,36 @@ Twinkle.warn.callback.change_category = function twinklewarnCallbackChangeCatego
// Trigger custom label/change on main category change
Twinkle.warn.callback.change_subcategory(e);

// Build select menu with jquery.chosen
// Use select2 to make the select menu searchable
if (!Twinkle.getPref('oldSelect')) {
$('select[name=sub_group]')
.chosen({width: '100%', search_contains: true})
.select2({
width: '100%',
matcher: Morebits.select2.matcher,
templateResult: Morebits.select2.highlightSearchMatches,
language: {
searching: Morebits.select2.queryInterceptor
}
})
.change(Twinkle.warn.callback.change_subcategory);

$('.select2-selection').keydown(Morebits.select2.autoStart);

mw.util.addCSS(
// Force chosen select menu to display over the dialog while overflowing
// based on https://github.com/harvesthq/chosen/issues/1390#issuecomment-21397245
'.ui-dialog.morebits-dialog .morebits-dialog-content { overflow:visible !important; }' +
'.ui-dialog.morebits-dialog { overflow: inherit !important; }' +
// prevent dropdown from appearing behind the dialog, just in case
'.select2-container { z-index: 10000; }' +

// Increase height to match that of native select
'.morebits-dialog .chosen-drop .chosen-results { max-height: 300px; }' +
'.morebits-dialog .chosen-drop { max-height: 338px; }' +
// Increase height
'.select2-container .select2-dropdown .select2-results > .select2-results__options { max-height: 350px; }' +

// Remove padding
'.morebits-dialog .chosen-drop .chosen-results li { padding-top: 0px; padding-bottom: 0px; }'
);
// (Hopefully) temporary fixes for visual issues caused by the above CSS, see #665 and #667
$('.ui-resizable-handle').remove();
// Jump to extend the dialog to include any previewing content
// without scrolling and prevent resizing
mw.util.addCSS('.ui-dialog.morebits-dialog .morebits-dialog-content { max-height: max-content !important; }');
// Reduce padding
'.select2-results .select2-results__option { padding-top: 1px; padding-bottom: 1px; }' +
'.select2-results .select2-results__group { padding-top: 1px; padding-bottom: 1px; } ' +

// Adjust font size
'.select2-container .select2-dropdown .select2-results { font-size: 13px; }' +
'.select2-container .selection .select2-selection__rendered { font-size: 13px; }'
);
}
};

Expand Down
29 changes: 26 additions & 3 deletions modules/twinklexfd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ Twinkle.xfd = function twinklexfd() {
if (mw.config.get('wgNamespaceNumber') < 0 || !mw.config.get('wgArticleId') || (mw.config.get('wgNamespaceNumber') === 6 && document.getElementById('mw-sharedupload'))) {
return;
}

Twinkle.addPortletLink(Twinkle.xfd.callback, 'XFD', 'tw-xfd', 'Start a deletion discussion');
};

Expand Down Expand Up @@ -260,11 +261,33 @@ Twinkle.xfd.callback.change_category = function twinklexfdCallbackChangeCategory

$(work_area).find('[name=delsort]')
.attr('data-placeholder', 'Select delsort pages')
.chosen({width: '100%'});
.select2({
width: '100%',
matcher: Morebits.select2.matcher,
templateResult: Morebits.select2.highlightSearchMatches,
language: {
searching: Morebits.select2.queryInterceptor
}
});

mw.util.addCSS(
// prevent dropdown from appearing behind the dialog, just in case
'.select2-container { z-index: 10000; }' +

// Remove black border
'.select2-container--default.select2-container--focus .select2-selection--multiple { border: 1px solid #aaa; }' +

// Reduce padding
'.select2-results .select2-results__option { padding-top: 1px; padding-bottom: 1px; }' +
'.select2-results .select2-results__group { padding-top: 1px; padding-bottom: 1px; } ' +

// Reduce padding
mw.util.addCSS('.morebits-dialog .chosen-drop .chosen-results li { padding-top: 2px; padding-bottom: 2px; }');
// Adjust font size
'.select2-container .select2-dropdown .select2-results { font-size: 13px; }' +
'.select2-container .selection .select2-selection__rendered { font-size: 13px; }' +

// Make the tiny cross larger
'.select2-selection__choice__remove { font-size: 130%; }'
);
break;
case 'tfd':
work_area = new Morebits.quickForm.element({
Expand Down
67 changes: 67 additions & 0 deletions morebits.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1152,6 +1152,72 @@ Morebits.array = {
}
};

/**
* ************ Morebits.select2 ***************
* Utilities to enhance select2 menus
* See twinklewarn and twinklexfd for sample usages
*/
Morebits.select2 = {

/**
* Custom matcher in which if the optgroup matches, all options in that group are shown,
* like in jquery.chosen
*/
matcher: function(params, data) {
var originalMatcher = $.fn.select2.defaults.defaults.matcher;
var result = originalMatcher(params, data);

if (result && params.term &&
data.text.toUpperCase().indexOf(params.term.toUpperCase()) !== -1) {
result.children = data.children;
}
return result;
},

/** Underline matched part of options */
highlightSearchMatches: function(data) {
var searchTerm = Morebits.select2SearchQuery;
if (!searchTerm || data.loading) {
return data.text;
}
var idx = data.text.toUpperCase().indexOf(searchTerm.toUpperCase());
if (idx < 0) {
return data.text;
}

return $('<span>').append(
data.text.slice(0, idx),
$('<span>').css('text-decoration', 'underline').text(data.text.slice(idx, idx + searchTerm.length)),
data.text.slice(idx + searchTerm.length)
);
},

/** Intercept query as it is happening, for use in highlightSearchMatches */
queryInterceptor: function(params) {
Morebits.select2SearchQuery = params && params.term;
},

/**
* Open dropdown and begin search when the .select2-selection has focus and a key is pressed
* https://github.com/select2/select2/issues/3279#issuecomment-442524147
*/
autoStart: function(ev) {
if (ev.which < 48) {
return;
}
var target = $(ev.target).closest('.select2-container');
if (!target.length) {
return;
}
target = target.prev();
target.select2('open');
var search = target.data('select2').dropdown.$search ||
target.data('select2').selection.$search;
search.focus();
}

};


/**
* **************** Morebits.pageNameNorm ****************
Expand Down Expand Up @@ -3975,6 +4041,7 @@ Morebits.batchOperation = function(currentAction) {
* **************** Morebits.simpleWindow ****************
* A simple draggable window
* now a wrapper for jQuery UI's dialog feature
* @requires {jquery.ui.dialog}
*/

/**
Expand Down

0 comments on commit 4141d7d

Please sign in to comment.