Last active
August 29, 2015 14:26
-
-
Save FirstVertex/bb50da1a7772a0685f0e to your computer and use it in GitHub Desktop.
Select2 with Primary selected item 2/4
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// set up a facade to handle interacting with the PrimarySelect2 | |
function PrimarySelect2($element, s2Options) { | |
// reality check | |
if (!$element || !$element.length) return; | |
// implementing on more than one item is left as an exercise for the reader. suggest jQuery plugin pattern | |
$element = $element.first(); | |
// pass the options straight through to Select2 | |
$element.select2(s2Options); | |
// get a handle to the Select2 api | |
var s2Instance = $element.data('select2'); | |
// trigger special behavior by adding this class in the markup | |
if ($element.hasClass('primary-selectable')) { | |
// using the id of the select2'd form control, we look for additional fields on the page to populate, via a Naming Convention | |
var formKey = $element.attr('id'); | |
var primary = { | |
// a hidden field to populate with the Primary selected item's id | |
$hidden: $('#' + formKey + 'Primary'), | |
// a place to display the text of the Primary selected item | |
$display: $('#' + formKey + 'PrimaryDisplay'), | |
// a holder for a feedback message when there's no Primary selected item | |
$displayNone: $('#' + formKey + 'PrimaryDisplayNone'), | |
}; | |
function selectPrimary($item, detect) { | |
// if we pass detect, we want to read the state from the UI | |
if (detect) { | |
$item = $('.select2-search-choice.select2-primary', s2Instance.container).first(); | |
} else { | |
// if nothing was passed, just get the first one | |
$item = $item || $('.select2-search-choice', s2Instance.container).first(); | |
if (!$item.length) return; | |
$item.toggleClass('select2-primary').siblings().removeClass('select2-primary'); | |
} | |
var s2Data = null, newValue = null; | |
if ($item.hasClass('select2-primary')) { | |
s2Data = $item.data('select2Data'); | |
newValue = (s2Data && s2Data.id) ? s2Data.id.toString() : null; | |
} | |
primary.$hidden.val(newValue); | |
if (newValue && s2Data) { | |
primary.$displayNone.hide(); | |
primary.$display.html(s2Data.text).show(); | |
} else { | |
primary.$displayNone.show(); | |
primary.$display.hide(); | |
} | |
} | |
s2Instance.container.on('click.s2p','.select2-search-choice', function(e) { | |
selectPrimary($(this)); | |
}); | |
$element.on('change.s2p', function(e) { | |
if (e.added && s2Instance.val().length === 1) { | |
// if it's the first one added, set it as Primary automatically | |
selectPrimary(); | |
} else { | |
// auto detect what should be primary in other cases | |
selectPrimary(null, true); | |
} | |
}); | |
// initialize the selection from the Hidden field | |
var initSelected = primary.$hidden.val(); | |
if (initSelected && initSelected !== '') { | |
$('.select2-search-choice', s2Instance.container).each(function() { | |
var $item = $(this); | |
var s2Data = $item.data('select2Data'); | |
if (s2Data && s2Data.id) { | |
if (initSelected === s2Data.id.toString()) { | |
selectPrimary($item); | |
return false; | |
} | |
} | |
}); | |
} | |
} | |
function destroy() { | |
if ($element) { | |
$element.off('change.s2p'); | |
$element.off('change.ntk'); | |
s2Instance && | |
s2Instance.container && | |
s2Instance.container.off('click.s2p'); | |
$element.select2('destroy'); | |
} | |
s2Instance = null; | |
$element = null; | |
} | |
return { | |
$element: $element, | |
s2Instance: s2Instance, | |
destroy: destroy | |
}; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
see here for all code