Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use disabledText only when multiselect is actually disabled #1029

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Use disabledText only when multiselect is actually disabled #1029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
304aa48
Use disabledText only when multiselect is disabled
adeeb1 Jun 9, 2018
a53fec5
Use select.children().length
adeeb1 Jun 9, 2018
e08c560
Fix the styling for Bootstrap 4.
adeeb1 Jul 3, 2019
5510843
Increase label width to improve selection on the dropdown menu.
adeeb1 Jul 4, 2019
18a2b9c
Fix the filter clear button.
adeeb1 Jul 4, 2019
7e1df13
Merge pull request #1 from adeeb1/support-bootstrap-4
adeeb1 Jul 4, 2019
461b561
Fix issue with collapsible optgroups in Bootstrap 4
Dec 10, 2019
55fa65f
Fixed tests for updated dropdown structure with bootstrap 4.
Dec 10, 2019
4595b1e
Merge pull request #2 from agiles2/master
adeeb1 Apr 27, 2020
22ab2eb
Disable the numberDisplayed option with -1 instead of 0.
adeeb1 Apr 27, 2020
2877e4e
Merge pull request #3 from adeeb1/change-number-displayed-default
adeeb1 Apr 27, 2020
c49f0cc
Update the resetButton styles for Bootstrap 4, and change it to a but…
adeeb1 Apr 28, 2020
31addd3
Reduce the size of the reset button.
adeeb1 Sep 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion dist/css/bootstrap-multiselect.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

92 changes: 54 additions & 38 deletions dist/js/bootstrap-multiselect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,8 +250,7 @@
*/
buttonText: function(options, select) {
if (this.disabledText.length > 0
&& (select.prop('disabled') || (options.length == 0 && this.disableIfEmpty))) {

&& (select.prop('disabled') || (select.children().length === 0 && this.disableIfEmpty))) {
return this.disabledText;
}
else if (options.length === 0) {
Expand All @@ -269,7 +268,7 @@
return this.allSelectedText;
}
}
else if (this.numberDisplayed != 0 && options.length > this.numberDisplayed) {
else if (this.numberDisplayed != -1 && options.length > this.numberDisplayed) {
return options.length + ' ' + this.nSelectedText;
}
else {
Expand Down Expand Up @@ -400,10 +399,10 @@

},
enableHTML: false,
buttonClass: 'btn btn-default',
buttonClass: 'btn btn-secondary',
inheritClass: false,
buttonWidth: 'auto',
buttonContainer: '<div class="btn-group" />',
buttonContainer: '<div class="btn-group" role="group" />',
dropRight: false,
dropUp: false,
selectedClass: 'active',
Expand Down Expand Up @@ -439,14 +438,14 @@
includeResetDivider: false,
resetText: 'Reset',
templates: {
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span> <b class="caret"></b></button>',
button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"><span class="multiselect-selected-text"></span></button>',
ul: '<ul class="multiselect-container dropdown-menu"></ul>',
filter: '<li class="multiselect-item multiselect-filter"><div class="input-group"><span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span><input class="form-control multiselect-search" type="text" /></div></li>',
filterClearBtn: '<span class="input-group-btn"><button class="btn btn-default multiselect-clear-filter" type="button"><i class="glyphicon glyphicon-remove-circle"></i></button></span>',
li: '<li><a tabindex="0"><label></label></a></li>',
divider: '<li class="multiselect-item divider"></li>',
liGroup: '<li class="multiselect-item multiselect-group"><label></label></li>',
resetButton: '<li class="multiselect-reset text-center"><div class="input-group"><a class="btn btn-default btn-block"></a></div></li>'
filter: '<li class="multiselect-item multiselect-filter"><div class="input-group mx-2 mb-2"><div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-search"></i></span></div><input class="form-control multiselect-search" type="text" /></div></li>',
filterClearBtn: '<div class="input-group-append"><button class="btn btn-secondary multiselect-clear-filter" type="button"><i class="fa fa-times-circle"></i></button></div>',
li: '<li class="dropdown-item"><div class="form-check" tabindex="0"><label></label></div></li>',
divider: '<li class="dropdown-item multiselect-item dropdown-divider"></li>',
liGroup: '<li class="dropdown-item multiselect-item multiselect-group"><label></label></li>',
resetButton: '<li class="multiselect-reset text-center"><div class="input-group mx-2"><button type="button" class="btn btn-sm btn-outline-secondary btn-block"></button></div></li>'
}
},

Expand Down Expand Up @@ -509,7 +508,7 @@
this.$ul = $(this.options.templates.ul);

if (this.options.dropRight) {
this.$ul.addClass('pull-right');
this.$ul.addClass('float-right');
}

// Set max height of dropdown menu to activate auto scrollbar.
Expand All @@ -535,6 +534,13 @@
});
}

if (this.options.multiple) {
// Prevent the dropdown from closing after each click
this.$ul.on("click", function(e) {
e.stopPropagation();
});
}

this.$container.append(this.$ul);
},

Expand Down Expand Up @@ -625,9 +631,6 @@

$($checkboxesNotThis).prop('checked', false);
$optionsNotThis.prop('selected', false);

// It's a single selection, so close.
this.$button.click();
}

if (this.options.selectedClass === "active") {
Expand Down Expand Up @@ -739,7 +742,7 @@
}

var index = $items.index($items.filter(':focus'));

// Navigation up.
if (event.keyCode === 38 && index > 0) {
index--;
Expand Down Expand Up @@ -826,7 +829,7 @@
}

if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
$("li.multiselect-group .caret-container", this.$ul).on("click", $.proxy(function(event) {
$("li.multiselect-group .optgroup-container", this.$ul).on("click", $.proxy(function(event) {
var $li = $(event.target).closest('li');
var $inputs = $li.nextUntil("li.multiselect-group")
.not('.multiselect-filter-hidden');
Expand All @@ -837,11 +840,11 @@
});

if (visible) {
$inputs.hide()
$inputs.attr('hidden', true)
.addClass('multiselect-collapsible-hidden');
}
else {
$inputs.show()
$inputs.removeAttr('hidden')
.removeClass('multiselect-collapsible-hidden');
}
}, this));
Expand Down Expand Up @@ -869,16 +872,26 @@
var value = $element.val();
var inputType = this.options.multiple ? "checkbox" : "radio";

// Generate a random number between 0 and MAX_SAFE_INTEGER to use as a highly unique ID
var randomNum = Math.floor(Math.random() * Math.floor(Number.MAX_SAFE_INTEGER));

// This element ID is required for the label and checkbox so that Bootstrap 4 will select the option when the label is clicked
// Ex: "bootstrap-multiselect-option-7-2193414947069541"
var optionComponentId = "bootstrap-multiselect-option-" + value + "-" + randomNum;

var $li = $(this.options.templates.li);
var $label = $('label', $li);
var $div = $('div', $li);
$label.addClass(inputType);
$label.addClass("form-check-label");
$label.attr("title", label);
$label.attr("for", optionComponentId);
$li.addClass(classes);

// Hide all children items when collapseOptGroupsByDefault is true
if (this.options.collapseOptGroupsByDefault && $(element).parent().prop("tagName").toLowerCase() === "optgroup") {
$li.addClass("multiselect-collapsible-hidden");
$li.hide();
$li.attr('hidden', true);
}

if (this.options.enableHTML) {
Expand All @@ -890,19 +903,22 @@

var $checkbox = $('<input/>').attr('type', inputType);

$checkbox.attr('id', optionComponentId);
$checkbox.addClass('form-check-input');

var name = this.options.checkboxName($element);
if (name) {
$checkbox.attr('name', name);
}

$label.prepend($checkbox);
$div.prepend($checkbox);

var selected = $element.prop('selected') || false;
$checkbox.val(value);

if (value === this.options.selectAllValue) {
$li.addClass("multiselect-item multiselect-all");
$checkbox.parent().parent()
$checkbox.parent().parent().parent()
.addClass('multiselect-all');
}

Expand Down Expand Up @@ -945,7 +961,7 @@
createOptgroup: function(group) {
var label = $(group).attr("label");
var value = $(group).attr("value");
var $li = $('<li class="multiselect-item multiselect-group"><a href="javascript:void(0);"><label><b></b></label></a></li>');
var $li = $('<li class="multiselect-item multiselect-group"><div class="optgroup-container"><label><b></b></label></div></li>');

var classes = this.options.optionClass(group);
$li.addClass(classes);
Expand All @@ -958,11 +974,11 @@
}

if (this.options.enableCollapsibleOptGroups && this.options.multiple) {
$('a', $li).append('<span class="caret-container"><b class="caret"></b></span>');
$('.optgroup-container', $li).append('<span class="caret-container"><b><i class="fas fa-caret-down"></i></b></span>');
}

if (this.options.enableClickableOptGroups && this.options.multiple) {
$('a label', $li).prepend('<input type="checkbox" value="' + value + '"/>');
$('.optgroup-container label', $li).prepend('<input type="checkbox" value="' + value + '"/>');
}

if ($(group).is(':disabled')) {
Expand Down Expand Up @@ -991,13 +1007,13 @@
var $resetButton = $(this.options.templates.resetButton);

if (this.options.enableHTML) {
$('a', $resetButton).html(this.options.resetText);
$('button', $resetButton).html(this.options.resetText);
}
else {
$('a', $resetButton).text(this.options.resetText);
$('button', $resetButton).text(this.options.resetText);
}

$('a', $resetButton).click($.proxy(function(){
$('button', $resetButton).click($.proxy(function(){
this.clearSelection();
}, this));

Expand Down Expand Up @@ -1046,7 +1062,7 @@
$checkbox.val(this.options.selectAllValue);

$li.addClass("multiselect-item multiselect-all");
$checkbox.parent().parent()
$checkbox.parent().parent().parent()
.addClass('multiselect-all');

this.$ul.prepend($li);
Expand Down Expand Up @@ -1077,7 +1093,7 @@

this.query = '';
this.$filter.find('.multiselect-search').val('');
$('li', this.$ul).show().removeClass('multiselect-filter-hidden');
$('li', this.$ul).removeAttr('hidden').removeClass('multiselect-filter-hidden');

this.updateSelectAll();

Expand Down Expand Up @@ -1146,11 +1162,11 @@

// Toggle current element (group or group item) according to showElement boolean.
if(!showElement){
$(element).css('display', 'none');
$(element).attr('hidden', true);
$(element).addClass('multiselect-filter-hidden');
}
if(showElement){
$(element).css('display', 'block');
$(element).removeAttr('hidden');
$(element).removeClass('multiselect-filter-hidden');
}

Expand All @@ -1163,13 +1179,13 @@
else {
// Show group name when at least one of its items is visible.
if (showElement) {
$(currentGroup).show()
$(currentGroup).removeAttr('hidden')
.removeClass('multiselect-filter-hidden');
}

// Show all group items when group name satisfies filter.
if (!showElement && currentGroupVisible) {
$(element).show()
$(element).removeAttr('hidden')
.removeClass('multiselect-filter-hidden');
}
}
Expand All @@ -1196,7 +1212,7 @@
*/
destroy: function() {
this.$container.remove();
this.$select.show();
this.$select.removeAttr('hidden');

// reset original state
this.$select.prop('disabled', this.options.wasDisabled);
Expand Down Expand Up @@ -1382,7 +1398,7 @@

var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
var allLis = $("li:not(.divider):not(.disabled):not(.multiselect-group)", this.$ul);
var visibleLis = $("li:not(.divider):not(.disabled):not(.multiselect-group):not(.multiselect-filter-hidden):not(.multiselect-collapisble-hidden)", this.$ul).filter(':visible');
var visibleLis = $("li:not(.divider):not(.disabled):not(.multiselect-group):not(.multiselect-filter-hidden):not(.multiselect-collapsible-hidden)", this.$ul).filter(':visible');

if(justVisible) {
$('input:enabled' , visibleLis).prop('checked', true);
Expand Down Expand Up @@ -1427,7 +1443,7 @@

var justVisible = typeof justVisible === 'undefined' ? true : justVisible;
var allLis = $("li:not(.divider):not(.disabled):not(.multiselect-group)", this.$ul);
var visibleLis = $("li:not(.divider):not(.disabled):not(.multiselect-group):not(.multiselect-filter-hidden):not(.multiselect-collapisble-hidden)", this.$ul).filter(':visible');
var visibleLis = $("li:not(.divider):not(.disabled):not(.multiselect-group):not(.multiselect-filter-hidden):not(.multiselect-collapsible-hidden)", this.$ul).filter(':visible');

if(justVisible) {
$('input[type="checkbox"]:enabled' , visibleLis).prop('checked', false);
Expand Down
27 changes: 7 additions & 20 deletions dist/less/bootstrap-multiselect.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,15 +75,13 @@ span.multiselect-native-select select{
}

> li {
padding: 0;

> a.multiselect-all label {
font-weight: bold;
}

&.multiselect-group label {
margin: 0;
padding: 3px 20px 3px 20px;
width: 100%;
height: 100%;
font-weight: bold;
}
Expand All @@ -92,23 +90,13 @@ span.multiselect-native-select select{
cursor: pointer;
}

> a {
padding: 0;

> div {
> label {
margin: 0;
width: 100%;
height: 100%;
cursor: pointer;
font-weight: normal;
padding: 3px 20px 3px 40px;

&.radio, &.checkbox {
margin: 0;
}

> input[type="checkbox"] {
margin-bottom:5px;
}
}
}
}
Expand All @@ -120,11 +108,6 @@ span.multiselect-native-select select{
}

.form-inline .multiselect-container{

label.checkbox, label.radio{
padding: 3px 20px 3px 40px;
}

li a label{

&.checkbox input[type="checkbox"], &.radio input[type="radio"]{
Expand All @@ -133,3 +116,7 @@ span.multiselect-native-select select{
}
}
}

.multiselect-filter {
padding-right: 1rem;
}
Loading