Last active
August 29, 2015 14:26
-
-
Save FirstVertex/8e9fe5aeafc58a1d32b2 to your computer and use it in GitHub Desktop.
Select2 with Primary selected item all 4 code files
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
<label for="Troops">Troops</label> | |
<select name="Troops" id="Troops" multiple="" class="primary-selectable"> | |
<option value="1">Barbarian</option> | |
<option value="2">Archer</option> | |
<option value="3">Goblin</option> | |
<option value="4">Giant</option> | |
<option value="5" selected="selected">Wall Breaker</option> | |
<option value="6">Balloon</option> | |
<option value="7" selected="selected">Wizard</option> | |
<option value="8">Healer</option> | |
<option value="9">Dragon</option> | |
<option value="10" selected="selected">P.E.K.K.A.</option> | |
<option value="11">Minion</option> | |
<option value="12">Hogrider</option> | |
<option value="13">Valkyrie</option> | |
<option value="14" selected="selected">Golem</option> | |
<option value="15" selected="selected">Witch</option> | |
<option value="16">Lava Hound</option> | |
<option value="17" selected="selected">Barbarian King</option> | |
<option value="18" selected="selected">Archer Queen</option> | |
</select> | |
<label>Primary Troop</label> | |
<input type="hidden" id="TroopsPrimary" name="TroopsPrimary" value="17"> | |
<span id="TroopsPrimaryDisplay"></span> | |
<span id="TroopsPrimaryDisplayNone">No Primary Troop selected</span> |
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 | |
}; | |
} |
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
$(function() { | |
// create an instance of PrimarySelect2 and attach to our Troop selector | |
// we set no special Select2 options. you could pass the normal Select2 options struct here, it will be passed to Select2 constructor | |
var s2Options = {}; | |
var ps2 = PrimarySelect2($('#Troops'), s2Options); | |
// ps2 is your handle now to the PrimarySelect2 interface | |
// if you're in a dynamic form later during your cleanup just call | |
// ps2.destroy(); | |
}); |
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
/* http://www.cssportal.com/css-gradient-generator/ */ | |
.select2-container-multi .select2-choices .select2-search-choice.select2-primary { | |
background-color: green; | |
border-color: green; | |
background-image: -ms-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%); | |
background-image: -moz-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%); | |
background-image: -o-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%); | |
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #5CBD73), color-stop(50, #79EF70), color-stop(51, #24E23D), color-stop(100, #1F9C49)); | |
background-image: -webkit-linear-gradient(top, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%); | |
background-image: linear-gradient(to bottom, #5CBD73 0%, #79EF70 50%, #24E23D 51%, #1F9C49 100%); | |
} | |
/* visibility is handled by JavaScript */ | |
#TroopsPrimaryDisplay, #TroopsPrimaryDisplayNone { | |
display: none; | |
} | |
#TroopsPrimaryDisplayNone { | |
font-style: italic; | |
color: #888; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
see here for full explanation on my Blog