/* ------------------------------------------------------------------------------
*
* # Bootstrap multiselect
*
* Specific JS code additions for form_multiselect.html page
*
* Version: 1.0
* Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */
$(function() {
// Basic examples
// ------------------------------
// Basic initialization
$('.multiselect').multiselect({
onChange: function() {
$.uniform.update();
}
});
// Limit options number
$('.multiselect-number').multiselect({
numberDisplayed: 1
});
// Custom empty text
$('.multiselect-nonselected-text').multiselect({
nonSelectedText: 'Please choose'
});
// Select All option
$('.multiselect-select-all').multiselect({
includeSelectAllOption: true,
onChange: function() {
$.uniform.update();
}
});
// Enable filtering
$('.multiselect-filtering').multiselect({
enableFiltering: true,
templates: {
filter: ' '
},
onChange: function() {
$.uniform.update();
}
});
// Select All and Filtering features
$('.multiselect-select-all-filtering').multiselect({
includeSelectAllOption: true,
enableFiltering: true,
templates: {
filter: ' '
},
onChange: function() {
$.uniform.update();
}
});
// Linked button style
$('.multiselect-link').multiselect({
buttonClass: 'btn btn-link'
});
// Custom button color
$('.multiselect-custom-color').multiselect({
buttonClass: 'btn bg-teal-400'
});
// Clickable optgroups
$('.multiselect-clickable-groups').multiselect({
enableClickableOptGroups: true,
onChange: function() {
$.uniform.update();
}
});
// Disable if empty
$('.multiselect-disable-empty').multiselect({
disableIfEmpty: true
});
// Menu background color
$('.multiselect-menu-bg-color').multiselect({
templates: {
ul: ''
}
});
// Combined colors
$('.multiselect-combine-all').multiselect({
buttonClass: 'btn bg-slate',
templates: {
ul: ''
}
});
// Full featured example
$('.multiselect-full-featured').multiselect({
includeSelectAllOption: true,
enableFiltering: true,
templates: {
filter: ' '
},
onChange: function() {
$.uniform.update();
}
});
// With max height
$('.multiselect-max-height').multiselect({
maxHeight: 200
});
// Prevent deselect
$('.multiselect-prevent-deselect').multiselect({
onChange: function(option, checked) {
if (checked === false) {
$('.multiselect-prevent-deselect').multiselect('select', option.val());
}
}
});
// Remove active option class
$('.multiselect-no-active-class').multiselect({
selectedClass: null
});
// Contextual alternatives
// ------------------------------
// Primary
$('.multiselect-primary').multiselect({
buttonClass: 'btn btn-primary'
});
// Danger
$('.multiselect-danger').multiselect({
buttonClass: 'btn btn-danger'
});
// Success
$('.multiselect-success').multiselect({
buttonClass: 'btn btn-success'
});
// Warning
$('.multiselect-warning').multiselect({
buttonClass: 'btn btn-warning'
});
// Info
$('.multiselect-info').multiselect({
buttonClass: 'btn btn-info'
});
// Height sizing
// ------------------------------
// Large
$('.multiselect-lg').multiselect({
buttonClass: 'btn btn-default btn-lg'
});
// Small
$('.multiselect-sm').multiselect({
buttonClass: 'btn btn-default btn-sm'
});
// Mini
$('.multiselect-xs').multiselect({
buttonClass: 'btn btn-default btn-xs'
});
// Width sizing
// ------------------------------
// Full width
$('.multiselect-full').multiselect({
buttonWidth: '100%'
});
// Percentage width
$('.multiselect-custom-percents').multiselect({
buttonWidth: '80%'
});
// Auto width
$('.multiselect-auto').multiselect({
buttonWidth: 'auto'
});
// Events
// ------------------------------
// onChange
$('.multiselect-onchange-notice').multiselect({
buttonClass: 'btn btn-info',
onChange: function(element, checked){
$.uniform.update();
new PNotify({
text: 'onChange callback fired.',
addclass: 'bg-teal alert-styled-left'
});
}
});
// onChange desktop
$('.multiselect-onchange-desktop').multiselect({
buttonClass: 'btn btn-info',
onChange:function(element, checked){
$.uniform.update();
PNotify.desktop.permission();
(new PNotify({
title: 'Desktop Notice',
text: 'onChange callback desktop notification.',
desktop: {
desktop: true,
addclass: 'bg-sky',
icon: 'assets/images/pnotify/info.png'
}
})).get().click(function(e) {
if ($('.ui-pnotify-closer, .ui-pnotify-sticker, .ui-pnotify-closer *, .ui-pnotify-sticker *').is(e.target)) return;
alert('Hey! You clicked the desktop notification!');
});
}
});
// onShow
$('.multiselect-show-event').multiselect({
buttonClass: 'btn btn-info',
onDropdownShow: function() {
new PNotify({
text: 'onDropdownShow event fired.',
addclass: 'bg-teal alert-styled-left'
});
}
});
// onHide
$('.multiselect-hide-event').multiselect({
buttonClass: 'btn btn-info',
onDropdownHide: function() {
new PNotify({
text: 'onDropdownHide event fired.',
addclass: 'bg-teal alert-styled-left'
});
}
});
// Methods
// ------------------------------
//
// Create and destroy
//
// Initialize
$('.multiselect-method-destroy').multiselect();
// Destroy
$('.multiselect-destroy-button').on('click', function() {
$('.multiselect-method-destroy').multiselect('destroy');
});
// Create
$('.multiselect-create-button').on('click', function() {
$('.multiselect-method-destroy').multiselect();
});
//
// Refresh
//
// Initialize
$('.multiselect-method-refresh').multiselect();
// Select option
$('.multiselect-select-button').on('click', function() {
$('option[value="tomatoes"]', $('.multiselect-method-refresh')).attr('selected', 'selected');
$('option[value="tomatoes"]', $('.multiselect-method-refresh')).prop('selected', true);
$('option[value="mushrooms"]', $('.multiselect-method-refresh')).prop('selected', true);
$('option[value="mushrooms"]', $('.multiselect-method-refresh')).attr('selected', 'selected');
$('option[value="onions"]', $('.multiselect-method-refresh')).prop('selected', true);
$('option[value="onions"]', $('.multiselect-method-refresh')).attr('selected', 'selected');
alert('Selected Tomatoes, Mushrooms and Onions.');
});
// Deselect
$('.multiselect-deselect-button').on('click', function() {
$('option', $('.multiselect-method-refresh')).each(function(element) {
$(this).removeAttr('selected').prop('selected', false);
});
});
// Refresh
$('.multiselect-refresh-button').on('click', function() {
$('.multiselect-method-refresh').multiselect('refresh');
$.uniform.update();
});
//
// Rebuild
//
// Initialize
$('.multiselect-method-rebuild').multiselect();
// Add option
$('.multiselect-add-button').on('click', function() {
$('.multiselect-method-rebuild').append('');
});
// Remove option
$('.multiselect-delete-button').on('click', function() {
$('option[value="add1"]', $('.multiselect-method-rebuild')).remove();
$('option[value="add2"]', $('.multiselect-method-rebuild')).remove();
$('option[value="add3"]', $('.multiselect-method-rebuild')).remove();
});
// Rebuild menu
$('.multiselect-rebuild-button').on('click', function() {
$('.multiselect-method-rebuild').multiselect('rebuild');
$(".multiselect-container input").uniform({ radioClass: 'choice' });
});
//
// Select
//
// Initialize
$('.multiselect-method-select').multiselect();
// Select first option
$('.multiselect-select-cheese-button').on('click', function() {
$('.multiselect-method-select').multiselect('select', 'cheese'),
$.uniform.update();
});
// Select second option
$('.multiselect-select-onions-button').on('click', function() {
$('.multiselect-method-select').multiselect('select', 'onions'),
$.uniform.update();
});
//
// Deselect
//
// Initialize
$('.multiselect-method-deselect').multiselect();
// Deselect first option
$('.multiselect-deselect-cheese-button').on('click', function() {
$('.multiselect-method-deselect').multiselect('deselect', 'cheese'),
$.uniform.update();
});
// Deselect second option
$('.multiselect-deselect-onions-button').on('click', function() {
$('.multiselect-method-deselect').multiselect('deselect', 'onions'),
$.uniform.update();
});
//
// Disable
//
// Initialize
$('.multiselect-method-disable').multiselect();
// Enable
$('.multiselect-enable1-button').on('click', function() {
$('.multiselect-method-disable').multiselect('enable');
});
// Disable
$('.multiselect-disable1-button').on('click', function() {
$('.multiselect-method-disable').multiselect('disable');
});
//
// Enable
//
// Initialize
$('.multiselect-method-enable').multiselect({
buttonContainer: '',
});
// Enable
$('.multiselect-enable2-button').on('click', function() {
$('.multiselect-method-enable').multiselect('enable');
});
// Disable
$('.multiselect-disable2-button').on('click', function() {
$('.multiselect-method-enable').multiselect('disable');
});
// Advanced examples
// ------------------------------
// Simulate selections
$('.multiselect-simulate-selections').multiselect({
onChange: function(option, checked) {
var values = [];
$('.multiselect-simulate-selections option').each(function() {
if ($(this).val() !== option.val()) {
values.push($(this).val());
}
});
$('.multiselect-simulate-selections').multiselect('deselect', values), $.uniform.update();
}
});
// Close dropdown automaticallywhen options are selected
$('.multiselect-close-dropdown').multiselect({
onChange: function(option, checked) {
var selected = 0;
$('option', $('.multiselect-close-dropdown')).each(function() {
if ($(this).prop('selected')) {
selected++;
}
});
if (selected >= 3) {
$('.multiselect-close-dropdown').siblings('div').children('ul').dropdown('toggle');
}
}
});
// Templates
$('.multiselect-templates').multiselect({
buttonContainer: '',
templates: {
divider: ''
}
});
//
// Display values
//
// Initialize
$('.multiselect-display-values').multiselect();
// Select options
$('.multiselect-display-values-select').on('click', function() {
$('.multiselect-display-values').multiselect('select', 'cheese');
$('.multiselect-display-values').multiselect('select', 'tomatoes');
$.uniform.update();
});
// Deselect options
$('.multiselect-display-values-deselect').on('click', function() {
$('.multiselect-display-values').multiselect('deselect', 'cheese');
$('.multiselect-display-values').multiselect('deselect', 'tomatoes');
$.uniform.update();
});
// Display values
$('.multiselect-show-values').on('click', function() {
$('.values-area').text('Selected: ' + $('.multiselect-display-values').val().join(', ')).addClass('alert alert-info');
});
//
// Toggle selection
//
// Select all/Deselect all
function multiselect_selected($el) {
var ret = true;
$('option', $el).each(function(element) {
if (!!!$(this).prop('selected')) {
ret = false;
}
});
return ret;
}
function multiselect_selectAll($el) {
$('option', $el).each(function(element) {
$el.multiselect('select', $(this).val());
});
}
function multiselect_deselectAll($el) {
$('option', $el).each(function(element) {
$el.multiselect('deselect', $(this).val());
});
}
function multiselect_toggle($el, $btn) {
if (multiselect_selected($el)) {
multiselect_deselectAll($el);
$btn.text("Select All");
}
else {
multiselect_selectAll($el);
$btn.text("Deselect All");
}
}
// Initialize
$('.multiselect-toggle-selection').multiselect();
// Toggle selection on button click
$(".multiselect-toggle-selection-button").click(function(e) {
e.preventDefault();
multiselect_toggle($(".multiselect-toggle-selection"), $(this));
$.uniform.update();
});
//
// Order options
//
var orderCount = 0;
// Initialize
$('.multiselect-order-options').multiselect({
buttonText: function(options) {
if (options.length == 0) {
return 'None selected';
}
else if (options.length > 3) {
return options.length + ' selected';
}
else {
var selected = [];
options.each(function() {
selected.push([$(this).text(), $(this).data('order')]);
});
selected.sort(function(a, b) {
return a[1] - b[1];
});
var text = '';
for (var i = 0; i < selected.length; i++) {
text += selected[i][0] + ', ';
}
return text.substr(0, text.length -2);
}
},
onChange: function(option, checked) {
if (checked) {
orderCount++;
$(option).data('order', orderCount);
}
else {
$(option).data('order', '');
}
}
});
// Order selected options on button click
$('.multiselect-order-options-button').on('click', function() {
var selected = [];
$('.multiselect-order-options option:selected').each(function() {
selected.push([$(this).val(), $(this).data('order')]);
});
selected.sort(function(a, b) {
return a[1] - b[1];
});
var text = '';
for (var i = 0; i < selected.length; i++) {
text += selected[i][0] + ', ';
}
text = text.substring(0, text.length - 2);
alert(text);
});
//
// Reset selections
//
// Initialize
$('.multiselect-reset').multiselect();
// Reset using reset button
$('#multiselect-reset-form').on('reset', function() {
$('.multiselect-reset option:selected').each(function() {
$(this).prop('selected', false);
})
$('.multiselect-reset').multiselect('refresh');
$.uniform.update();
});
// Related plugins
// ------------------------------
// Styled checkboxes and radios
$(".styled, .multiselect-container input").uniform({ radioClass: 'choice'});
});