Skip to content

Commit

Permalink
Demo: add a 2nd multiple select + clean JS a bit + fix 'getSelectionO…
Browse files Browse the repository at this point in the history 
…rder' return value
  • Loading branch information
@tristanjahier
tristanjahier committed Jul 23, 2014
1 parent 5c4f4d5 commit 42c2202
Show file tree
Hide file tree
Showing 7 changed files with 68 additions and 36 deletions.
6 changes: 4 additions & 2 deletions coffee/chosen.order.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,10 +56,11 @@ class AbstractChosenOrder
# Retrieve order of the <select> <options>
@getSelectionOrder = (select) ->
select = retrieveDOMElement select if retrieveDOMElement? # Ensure to handle a true DOM element
order = []

if validMultipleSelectElement(select) and isChosenified(select)
chosen_ui = getChosenUIElement select
chosen_options = chosen_ui.getElementsByClassName 'search-choice'
order = []

for opt in chosen_options
close_btn = opt.getElementsByClassName('search-choice-close')[0]
Expand All @@ -68,10 +69,11 @@ class AbstractChosenOrder
option = options[rel]
order.push option.value

return order
else
console.error ERRORS.invalid_select_element.replace('{{function}}', 'getSelectionOrder')

return order


# ////////////////////////////////////////////////
# Change Chosen elements position to match the order
Expand Down
6 changes: 3 additions & 3 deletions dist/chosen.order.jquery.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,10 @@
if (typeof retrieveDOMElement !== "undefined" && retrieveDOMElement !== null) {
select = retrieveDOMElement(select);
}
order = [];
if (validMultipleSelectElement(select) && isChosenified(select)) {
chosen_ui = getChosenUIElement(select);
chosen_options = chosen_ui.getElementsByClassName('search-choice');
order = [];
for (_i = 0, _len = chosen_options.length; _i < _len; _i++) {
opt = chosen_options[_i];
close_btn = opt.getElementsByClassName('search-choice-close')[0];
Expand All @@ -81,10 +81,10 @@
option = options[rel];
order.push(option.value);
}
return order;
} else {
return console.error(ERRORS.invalid_select_element.replace('{{function}}', 'getSelectionOrder'));
console.error(ERRORS.invalid_select_element.replace('{{function}}', 'getSelectionOrder'));
}
return order;
};

AbstractChosenOrder.setSelectionOrder = function(select, order, force) {
Expand Down
2 changes: 1 addition & 1 deletion dist/chosen.order.jquery.min.js
View file

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

6 changes: 3 additions & 3 deletions dist/chosen.order.proto.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,10 @@
if (typeof retrieveDOMElement !== "undefined" && retrieveDOMElement !== null) {
select = retrieveDOMElement(select);
}
order = [];
if (validMultipleSelectElement(select) && isChosenified(select)) {
chosen_ui = getChosenUIElement(select);
chosen_options = chosen_ui.getElementsByClassName('search-choice');
order = [];
for (_i = 0, _len = chosen_options.length; _i < _len; _i++) {
opt = chosen_options[_i];
close_btn = opt.getElementsByClassName('search-choice-close')[0];
Expand All @@ -81,10 +81,10 @@
option = options[rel];
order.push(option.value);
}
return order;
} else {
return console.error(ERRORS.invalid_select_element.replace('{{function}}', 'getSelectionOrder'));
console.error(ERRORS.invalid_select_element.replace('{{function}}', 'getSelectionOrder'));
}
return order;
};

AbstractChosenOrder.setSelectionOrder = function(select, order, force) {
Expand Down
2 changes: 1 addition & 1 deletion dist/chosen.order.proto.min.js
View file

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

40 changes: 27 additions & 13 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ <h1>Chosen order handler <small>jQuery plugin</small></h1>
<p>
<div class="input-group">
<span class="input-group-addon">Fruits &laquo; à la française &raquo;</span>
<select id="fruit-list" class="form-control" multiple style="width: 450px;">
<select id="fruit-list" class="form-control chosen" multiple style="width: 450px;">
<option value="banane">Banane</option>
<option value="pomme">Pomme</option>
<option value="poire">Poire</option>
Expand All @@ -36,7 +36,6 @@ <h1>Chosen order handler <small>jQuery plugin</small></h1>
</select>
</div>
</p>
<hr>
<div class="row">
<div class="col-lg-3 col-sm-6">
<button type="button" id="get-order" class="btn btn-primary" style="width: 150px">Retrieve order</button>
Expand All @@ -49,31 +48,46 @@ <h1>Chosen order handler <small>jQuery plugin</small></h1>
<input id="order" type="text" class="form-control" value="poire, ananas, banane ,kiwi " style="width: 250px;">
</div>
</div>

<hr>
<p>
<div class="input-group">
<span class="input-group-addon">Another multiple select</span>
<select class="form-control chosen" multiple style="width: 450px;">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4" selected>Option 4</option>
<option value="5" selected>Option 5</option>
</select>
</div>
</p>
</article>


<script type="text/javascript">
var MY_SELECT = $('#fruit-list');
MY_SELECT.chosen();
// Chosenify every multiple select DOM elements with class 'chosen'
$('select[multiple].chosen').chosen();
var MY_SELECT = $($('select[multiple].chosen').get(0));

$('#get-order').click(function() {
$('#get-order').click(function()
{
// Functional
// var selection = ChosenOrder.getSelectionOrder(document.getElementById('fruit-list'));
// var selection = ChosenOrder.getSelectionOrder(MY_SELECT);
// Object-oriented
var selection = $('#fruit-list').getSelectionOrder();
var selection = MY_SELECT.getSelectionOrder();

$('#order-list').empty();
$(selection).each(function(i) {
$(selection).each(function(i)
{
$('#order-list').append("<li>"+selection[i]+"</li>");
});
});

$('#set-order').click(function() {
$('#set-order').click(function()
{
// Functional
// ChosenOrder.setSelectionOrder($('#fruit-list'), $('#order').val().split(','), true);
// ChosenOrder.setSelectionOrder(MY_SELECT, $('#order').val().split(','), true);
// Object-oriented
$('#fruit-list').setSelectionOrder($('#order').val().split(','), true);
MY_SELECT.setSelectionOrder($('#order').val().split(','), true);
})

// $('#get-order').click();
Expand Down
Loading

0 comments on commit 42c2202

Please sign in to comment.