Skip to content

Commit

Permalink
#361.
Browse files Browse the repository at this point in the history
  • Loading branch information
@davidstutz
davidstutz committed Aug 19, 2014
1 parent 7508a43 commit 5991dd3
Show file tree
Hide file tree
Showing 3 changed files with 103 additions and 53 deletions.
27 changes: 27 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,6 +238,14 @@ <h1><a id="examples"></a>Examples</h1>
$('option[value="cheese"]', $('#example51')).remove();
$('option[value="tomato"]', $('#example51')).remove();
});

$('#example53').multiselect();
$('#example53-select').on('click', function() {
$('#example53').multiselect('select', 'cheese');
});
$('#example53-deselect').on('click', function() {
$('#example53').multiselect('deselect', 'cheese');
});
});
</script>

Expand Down Expand Up @@ -275,6 +283,25 @@ <h1><a id="examples"></a>Examples</h1>
Single selection without having the browser select the first option.
</td>
</tr>
<tr>
<td>
<div class="btn-group">
<select id="example53" size="2">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
<button class="btn btn-default" id="example53-select">Select cheese</button>
<button class="btn btn-default" id="example53-deselect">Deselect cheese</button>
</div>
</td>
<td>
The `.multiselect('select', value, triggerOnChange)` method can also be used to select options in single selection mode. Of course, the `.multiselect('deselect', value, triggerOnChange)` method works as expected, as well.
</td>
</tr>
<tr>
<td>
<select id="example2" multiple="multiple">
Expand Down
126 changes: 75 additions & 51 deletions js/bootstrap-multiselect.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@
/**
* bootstrap-multiselect.js
* https://github.com/davidstutz/bootstrap-multiselect
*
* Bootstrap Multiselect v0.9.8 (https://github.com/davidstutz/bootstrap-multiselect)
*
* Copyright 2012 - 2014 David Stutz
*
*
* Dual licensed under the BSD-3-Clause and the Apache License, Version 2.0.
*/
!function($) {
Expand All @@ -15,14 +14,16 @@

init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

var listOfSelectedItems = allBindingsAccessor().selectedOptions,
config = ko.utils.unwrapObservable(valueAccessor());
var listOfSelectedItems = allBindingsAccessor().selectedOptions;
var config = ko.utils.unwrapObservable(valueAccessor());

$(element).multiselect(config);

if (isObservableArray(listOfSelectedItems)) {
//set the initial selection state on the multi-select list

// Set the initial selection state on the multiselect list.
$(element).multiselect('select', ko.utils.unwrapObservable(listOfSelectedItems));

// Subscribe to the selectedOptions: ko.observableArray
listOfSelectedItems.subscribe(function (changes) {
var addedArray = [], deletedArray = [];
Expand All @@ -36,12 +37,14 @@
break;
}
});

if (addedArray.length > 0) {
$(element).multiselect('select', addedArray);
};
}

if (deletedArray.length > 0) {
$(element).multiselect('deselect', deletedArray);
};
}
}, null, "arrayChange");
}
},
Expand Down Expand Up @@ -74,8 +77,7 @@
}

function forEach(array, callback) {
var index;
for (index = 0; index < array.length; ++index) {
for (var index = 0; index < array.length; ++index) {
callback(array[index]);
}
}
Expand Down Expand Up @@ -128,7 +130,8 @@
defaults: {
/**
* Default text function will either print 'None selected' in case no
* option is selected or a list of the selected options up to a length of 3 selected options.
* option is selected or a list of the selected options up to a length
* of 3 selected options.
*
* @param {jQuery} options
* @param {jQuery} select
Expand All @@ -155,6 +158,7 @@
},
/**
* Updates the title of the button similar to the buttonText function.
*
* @param {jQuery} options
* @param {jQuery} select
* @returns {@exp;selected@call;substr}
Expand Down Expand Up @@ -182,6 +186,7 @@
},
/**
* Triggered on change of the multiselect.
*
* Not triggered when selecting/deselecting options manually.
*
* @param {jQuery} option
Expand Down Expand Up @@ -328,6 +333,7 @@

/**
* Build the dropdown options and binds all nessecary events.
*
* Uses createDivider and createOptionValue to create the necessary options.
*/
buildDropdownOptions: function() {
Expand All @@ -338,7 +344,7 @@
var tag = $(element).prop('tagName')
.toLowerCase();

if ($(element).prop('value') == this.options.selectAllValue) {
if ($(element).prop('value') === this.options.selectAllValue) {
return;
}

Expand Down Expand Up @@ -387,10 +393,10 @@

if (isSelectAllOption) {
if (checked) {
this.selectall();
this.selectAll();
}
else {
this.deselectall();
this.deselectAll();
}
}

Expand Down Expand Up @@ -609,6 +615,7 @@

/**
* Build the selct all.
*
* Checks if a select all has already been created.
*/
buildSelectAll: function() {
Expand Down Expand Up @@ -683,8 +690,8 @@
}

if (value !== this.options.selectAllValue && text) {
// by default lets assume that element is not
// interesting for this search
// By default lets assume that element is not
// interesting for this search.
var showElement = false;

if (this.options.enableCaseInsensitiveFiltering && filterCandidate.toLowerCase().indexOf(this.query.toLowerCase()) > -1) {
Expand Down Expand Up @@ -766,7 +773,11 @@
/**
* Select all options of the given values.
*
* If triggerOnChange is set to true, the on change event is triggered if
* and only if one value is passed.
*
* @param {Array} selectValues
* @param {Boolean} triggerOnChange
*/
select: function(selectValues, triggerOnChange) {
if(!$.isArray(selectValues)) {
Expand All @@ -779,11 +790,14 @@
var $option = this.getOptionByValue(value);
var $checkbox = this.getInputByValue(value);

if($option === void(0) || $checkbox === void(0))
{
if($option === undefined || $checkbox === undefined) {
continue;
}

if (!this.options.multiple) {
this.deselectAll(false);
}

if (this.options.selectedClass) {
$checkbox.parents('li')
.addClass(this.options.selectedClass);
Expand All @@ -795,25 +809,28 @@

this.updateButtonText();

if (triggerOnChange && selectValues.length == 1) {
if (triggerOnChange && selectValues.length === 1) {
this.options.onChange($option, true);
}
},

/**
* Clears all selected items
*
* Clears all selected items.
*/
clearSelection: function () {
this.deselectall(false);
this.deselectAll(false);
this.updateButtonText();
this.updateSelectAll();
},

/**
* Deselects all options of the given values.
*
* If triggerOnChange is set to true, the on change event is triggered, if
* and only if one value is passed.
*
* @param {Array} deselectValues
* @param {Boolean} triggerOnChange
*/
deselect: function(deselectValues, triggerOnChange) {
if(!$.isArray(deselectValues)) {
Expand All @@ -827,8 +844,7 @@
var $option = this.getOptionByValue(value);
var $checkbox = this.getInputByValue(value);

if($option === void(0) || $checkbox === void(0))
{
if($option === undefined || $checkbox === undefined) {
continue;
}

Expand All @@ -843,20 +859,19 @@

this.updateButtonText();

if (triggerOnChange && deselectValues.length == 1) {
if (triggerOnChange && deselectValues.length === 1) {
this.options.onChange($option, false);
}
},

/**
* Selects all enabled & visible options.
*
*/
selectall: function () {
var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul),
visibleCheckboxes = allCheckboxes.filter(":visible"),
allCheckboxesCount = allCheckboxes.length,
visibleCheckboxesCount = visibleCheckboxes.length;
selectAll: function () {
var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul);
var visibleCheckboxes = allCheckboxes.filter(":visible");
var allCheckboxesCount = allCheckboxes.length;
var visibleCheckboxesCount = visibleCheckboxes.length;

visibleCheckboxes.prop('checked', true);
$("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").addClass(this.options.selectedClass);
Expand All @@ -865,42 +880,52 @@
$("option:enabled", this.$select).prop('selected', true);
}
else {
var values = visibleCheckboxes.map(function() { return $(this).val() }).get();
$("option:enabled", this.$select).filter(function(index){ return $.inArray($(this).val(), values) !== -1; }).prop('selected', true);
var values = visibleCheckboxes.map(function() {
return $(this).val();
}).get();

$("option:enabled", this.$select).filter(function(index) {
return $.inArray($(this).val(), values) !== -1;
}).prop('selected', true);
}
},

/**
* Deselects all options.
*
* If justVisible is true or not specified, only visible options are deselected.
*
* @param {Boolean} justVisible
*/
deselectall: function (justVisible) {
var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul),
justVisible = typeof justVisible === 'undefined' ? true : justVisible,
visibleCheckboxes = void(0);
deselectAll: function (justVisible) {
var justVisible = typeof justVisible === 'undefined' ? true : justVisible;

if(justVisible) {
var values = void(0);
visibleCheckboxes = allCheckboxes.filter(":visible");
if(justVisible) {
var visibleCheckboxes = allCheckboxes.filter(":visible");
visibleCheckboxes.prop('checked', false);

values = visibleCheckboxes.map(function() { return $(this).val() }).get();
var values = visibleCheckboxes.map(function() {
return $(this).val();
}).get();

$("option:enabled", this.$select).filter(function(index){ return $.inArray($(this).val(), values) !== -1; }).prop('selected', false);
$("option:enabled", this.$select).filter(function(index) {
return $.inArray($(this).val(), values) !== -1;
}).prop('selected', false);

$("li:not(.divider):not(.disabled)", this.$ul).filter(":visible").removeClass(this.options.selectedClass);

}else {
}
else {
var allCheckboxes = $("li input[type='checkbox']:enabled", this.$ul);
allCheckboxes.prop('checked', false);

$("option:enabled", this.$select).prop('selected', false);
$("li:not(.divider):not(.disabled)", this.$ul).removeClass(this.options.selectedClass);
}
},

/**
* Rebuild the plugin.
*
* Rebuilds the dropdown, the filter and the select all option.
*/
rebuild: function() {
Expand Down Expand Up @@ -1017,11 +1042,11 @@
*/
updateSelectAll: function() {
if (this.hasSelectAll()) {
var allBoxes = $("li:not(.multiselect-item):not(.filter-hidden) input:enabled", this.$ul),
allBoxesLength = allBoxes.length,
checkedBoxesLength = allBoxes.filter(":checked").length,
selectAllLi = $("li." + this.options.selectAllValue, this.$ul),
selectAllInput = selectAllLi.find("input");
var allBoxes = $("li:not(.multiselect-item):not(.filter-hidden) input:enabled", this.$ul);
var allBoxesLength = allBoxes.length;
var checkedBoxesLength = allBoxes.filter(":checked").length;
var selectAllLi = $("li." + this.options.selectAllValue, this.$ul);
var selectAllInput = selectAllLi.find("input");

if (checkedBoxesLength > 0 && checkedBoxesLength === allBoxesLength) {
selectAllInput.prop("checked", true);
Expand All @@ -1045,7 +1070,6 @@

// Now update the title attribute of the button.
$('button.multiselect', this.$container).attr('title', this.options.buttonTitle(options, this.$select));

},

/**
Expand Down
3 changes: 1 addition & 2 deletions less/bootstrap-multiselect.less
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
/**
* bootstrap-multiselect.less
* https://github.com/davidstutz/bootstrap-multiselect
* Bootstrap Multiselect v0.9.8 (https://github.com/davidstutz/bootstrap-multiselect)
*
* Copyright 2012 - 2014 David Stutz
*
Expand Down

0 comments on commit 5991dd3

Please sign in to comment.