Projekt

Allgemein

Profil

Herunterladen (11,9 KB) Statistiken
| Zweig: | Markierung: | Revision:

kivitendo/js/jquery.multiselect2side.js @ 440ad8d3

d31c7de4 Moritz Bunkus
/*
* multiselect2side jQuery plugin
*
* Copyright (c) 2010 Giovanni Casassa (senamion.com - senamion.it)
*
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
* http://www.senamion.com
*
*/

(function($) {
jQuery.fn.multiselect2side = function (o) {
o = $.extend({
selectedPosition: 'right',
moveOptions: true,
labelTop: 'Top',
labelBottom: 'Bottom',
labelUp: 'Up',
labelDown: 'Down',
labelSort: 'Sort',
labelsx: 'Available',
labeldx: 'Selected',
68879d96 Moritz Bunkus
maxSelected: -1,
leftSel: null,
rightSel: null,

sortOptions: function() {
o.leftSel.sortOptions();
o.rightSel.sortOptions();
}
d31c7de4 Moritz Bunkus
}, o);

return this.each(function () {
var el = $(this);

df8ecbfb Moritz Bunkus
var hiddenName = $(this).attr("name");
d31c7de4 Moritz Bunkus
var originalName = $(this).attr("name");
if (originalName.indexOf('[') != -1)
originalName = originalName.substring(0, originalName.indexOf('['));

df8ecbfb Moritz Bunkus
var nameDx = originalName + "ms2side__dx";
var idDx = originalName + "ms2side__dx";
var nameSx = originalName + "ms2side__sx";
var hiddenId = originalName + "ms2side_hidden";
var size = $(this).attr("size");
38ef9063 Moritz Bunkus
$(this).attr("name", originalName + "ms2side__orig");
d31c7de4 Moritz Bunkus
// SIZE MIN
if (size < 6) {
$(this).attr("size", "6");
size = 6;
}

// UP AND DOWN
var divUpDown =
"<div class='ms2side__updown'>" +
"<p class='SelSort' title='Sort'>" + o.labelSort + "</p>" +
"<p class='MoveTop' title='Move on top selected option'>" + o.labelTop + "</p>" +
"<p class='MoveUp' title='Move up selected option'>" + o.labelUp + "</p>" +
"<p class='MoveDown' title='Move down selected option'>" + o.labelDown + "</p>" +
"<p class='MoveBottom' title='Move on bottom selected option'>" + o.labelBottom + "</p>" +
"</div>";

// CREATE NEW ELEMENT (AND HIDE IT) AFTER THE HIDDED ORGINAL SELECT
var htmlToAdd =
"<div class='ms2side__div'>" +
((o.selectedPosition != 'right' && o.moveOptions) ? divUpDown : "") +
"<div class='ms2side__select'>" +
(o.labelsx ? ("<div class='ms2side__header'>" + o.labelsx + "</div>") : "") +
"<select title='" + o.labelsx + "' name='" + nameSx + "' id='" + nameSx + "' size='" + size + "' multiple='multiple' ></select>" +
"</div>" +
"<div class='ms2side__options'>" +
((o.selectedPosition == 'right')
?
("<p class='AddOne' title='Add Selected'>&rsaquo;</p>" +
"<p class='AddAll' title='Add All'>&raquo;</p>" +
"<p class='RemoveOne' title='Remove Selected'>&lsaquo;</p>" +
"<p class='RemoveAll' title='Remove All'>&laquo;</p>")
:
("<p class='AddOne' title='Add Selected'>&lsaquo;</p>" +
"<p class='AddAll' title='Add All'>&laquo;</p>" +
"<p class='RemoveOne' title='Remove Selected'>&rsaquo;</p>" +
"<p class='RemoveAll' title='Remove All'>&raquo;</p>")
) +
"</div>" +
"<div class='ms2side__select'>" +
(o.labeldx ? ("<div class='ms2side__header'>" + o.labeldx + "</div>") : "") +
38ef9063 Moritz Bunkus
"<select title='" + o.labeldx + "' name='" + nameDx + "' id='" + idDx + "' size='" + size + "' multiple='multiple' ></select>" +
d31c7de4 Moritz Bunkus
"</div>" +
df8ecbfb Moritz Bunkus
"<span id=\"" + hiddenId + "\"></span>" +
d31c7de4 Moritz Bunkus
((o.selectedPosition == 'right' && o.moveOptions) ? divUpDown : "") +
"</div>";
$(this).after(htmlToAdd).hide();
df8ecbfb Moritz Bunkus
$("#" + hiddenId).hide();
d31c7de4 Moritz Bunkus
// ELEMENTS
var allSel = $(this).next().find("select");
var leftSel = (o.selectedPosition == 'right') ? allSel.eq(0) : allSel.eq(1);
var rightSel = (o.selectedPosition == 'right') ? allSel.eq(1) : allSel.eq(0);
// HEIGHT DIV
var heightDiv = $(".ms2side__select").eq(0).height();
68879d96 Moritz Bunkus
o.leftSel = leftSel;
o.rightSel = rightSel;
d31c7de4 Moritz Bunkus
// CENTER MOVE OPTIONS AND UPDOWN OPTIONS
$(this).next().find('.ms2side__options, .ms2side__updown').each(function(){
var top = ((heightDiv/2) - ($(this).height()/2));
if (top > 0)
$(this).css('padding-top', top + 'px' );
});

// MOVE SELECTED OPTION TO RIGHT, NOT SELECTED TO LEFT
$(this).find("option:selected").clone().appendTo(rightSel);
$(this).find("option:not(:selected)").clone().appendTo(leftSel);

bbb24781 Moritz Bunkus
// Mark all unselected.
rightSel.find("option").attr("selected", false);
d31c7de4 Moritz Bunkus
// ON CHANGE REFRESH ALL BUTTON STATUS
allSel.change(function() {
var div = $(this).parent().parent();
var selectSx = leftSel.children();
var selectDx = rightSel.children();
var selectedSx = leftSel.find("option:selected");
var selectedDx = rightSel.find("option:selected");
df8ecbfb Moritz Bunkus
var hiddenCont = $("#" + hiddenId);
d31c7de4 Moritz Bunkus
if (selectedSx.size() == 0 || (o.maxSelected >= 0 && (selectedSx.size() + selectDx.size()) > o.maxSelected))
div.find(".AddOne").addClass('ms2side__hide');
else
div.find(".AddOne").removeClass('ms2side__hide');

// FIRST HIDE ALL
div.find(".RemoveOne, .MoveUp, .MoveDown, .MoveTop, .MoveBottom, .SelSort").addClass('ms2side__hide');
f09ed6e1 Moritz Bunkus
// if (selectDx.size() > 1)
// div.find(".SelSort").removeClass('ms2side__hide');
d31c7de4 Moritz Bunkus
if (selectedDx.size() > 0) {
div.find(".RemoveOne").removeClass('ms2side__hide');
f09ed6e1 Moritz Bunkus
// // ALL SELECTED - NO MOVE
// if (selectedDx.size() < selectDx.size()) { // FOR NOW (JOE) && selectedDx.size() == 1
// if (selectedDx.val() != selectDx.val()) // FIRST OPTION, NO UP AND TOP BUTTON
// div.find(".MoveUp, .MoveTop").removeClass('ms2side__hide');
// if (selectedDx.last().val() != selectDx.last().val()) // LAST OPTION, NO DOWN AND BOTTOM BUTTON
// div.find(".MoveDown, .MoveBottom").removeClass('ms2side__hide');
// }
d31c7de4 Moritz Bunkus
}

if (selectSx.size() == 0 || (o.maxSelected >= 0 && selectSx.size() >= o.maxSelected))
div.find(".AddAll").addClass('ms2side__hide');
else
div.find(".AddAll").removeClass('ms2side__hide');

if (selectDx.size() == 0)
div.find(".RemoveAll").addClass('ms2side__hide');
else
div.find(".RemoveAll").removeClass('ms2side__hide');
f09ed6e1 Moritz Bunkus
df8ecbfb Moritz Bunkus
// Rebuild hidden inputs...
hiddenCont.empty();
rightSel.find("option").each(function(idx, option) {
$('<input type="hidden"/>').attr("name", hiddenName).attr("value", $(option).attr("value")).appendTo(hiddenCont);
});
d31c7de4 Moritz Bunkus
});

// DOUBLE CLICK ON LEFT SELECT OPTION
leftSel.dblclick(function () {
$(this).find("option:selected").each(function(i, selected){

if (o.maxSelected < 0 || rightSel.children().size() < o.maxSelected) {
$(this).remove().appendTo(rightSel);
el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
}
});
$(this).trigger('change');
68879d96 Moritz Bunkus
o.sortOptions();
d31c7de4 Moritz Bunkus
});

// DOUBLE CLICK ON RIGHT SELECT OPTION
rightSel.dblclick(function () {
$(this).find("option:selected").each(function(i, selected){
$(this).remove().appendTo(leftSel);
el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
});
$(this).trigger('change');
68879d96 Moritz Bunkus
o.sortOptions();
d31c7de4 Moritz Bunkus
});

// CLICK ON OPTION
$(this).next().find('.ms2side__options').children().click(function () {
if (!$(this).hasClass("ms2side__hide")) {
if ($(this).hasClass("AddOne")) {
leftSel.find("option:selected").each(function(i, selected){
$(this).remove().appendTo(rightSel);
el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
});
68879d96 Moritz Bunkus
o.sortOptions();
d31c7de4 Moritz Bunkus
} else if ($(this).hasClass("AddAll")) { // ALL SELECTED
leftSel.children().appendTo(rightSel);
leftSel.children().remove();
el.find('option').attr("selected", true);
// el.children().attr("selected", true); -- PROBLEM WITH OPTGROUP
68879d96 Moritz Bunkus
o.sortOptions();
d31c7de4 Moritz Bunkus
} else if ($(this).hasClass("RemoveOne")) {
rightSel.find("option:selected").each(function(i, selected){
$(this).remove().appendTo(leftSel);
el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
});
68879d96 Moritz Bunkus
o.sortOptions();
d31c7de4 Moritz Bunkus
} else if ($(this).hasClass("RemoveAll")) { // ALL REMOVED
rightSel.children().appendTo(leftSel);
rightSel.children().remove();
el.find('option').attr("selected", false);
//el.children().attr("selected", false); -- PROBLEM WITH OPTGROUP
68879d96 Moritz Bunkus
o.sortOptions();
d31c7de4 Moritz Bunkus
}
}

leftSel.trigger('change');
});

// CLICK ON UP - DOWN
$(this).next().find('.ms2side__updown').children().click(function () {
var selectedDx = rightSel.find("option:selected");
var selectDx = rightSel.find("option");

if (!$(this).hasClass("ms2side__hide")) {
if ($(this).hasClass("SelSort")) {
// SORT SELECTED ELEMENT
selectDx.sort(function(a, b) {
var compA = $(a).text().toUpperCase();
var compB = $(b).text().toUpperCase();
return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
})
// FIRST REMOVE FROM ORIGINAL SELECT
el.find("option:selected").remove();
// AFTER ADD ON ORIGINAL AND RIGHT SELECT
selectDx.each(function() {
rightSel.append($(this).clone().attr("selected", true));
el.append($(this).attr("selected", true));
});

} else if ($(this).hasClass("MoveUp")) {
var prev = selectedDx.first().prev();
var hPrev = el.find("[value=" + prev.val() + "]");

selectedDx.each(function() {
$(this).insertBefore(prev);
el.find("[value=" + $(this).val() + "]").insertBefore(hPrev); // HIDDEN SELECT
});

} else if ($(this).hasClass("MoveDown")) {
var next = selectedDx.last().next();
var hNext = el.find("[value=" + next.val() + "]");

selectedDx.each(function() {
$(this).insertAfter(next);
el.find("[value=" + $(this).val() + "]").insertAfter(hNext); // HIDDEN SELECT
});

} else if ($(this).hasClass("MoveTop")) {
var first = selectDx.first();
var hFirst = el.find("[value=" + first.val() + "]");

selectedDx.each(function() {
$(this).insertBefore(first);
el.find("[value=" + $(this).val() + "]").insertBefore(hFirst); // HIDDEN SELECT
});

} else if ($(this).hasClass("MoveBottom")) {
var last = selectDx.last();
var hLast = el.find("[value=" + last.val() + "]");

selectedDx.each(function() {
last = $(this).insertAfter(last); // WITH last = SAME POSITION OF SELECTED OPTION AFTER MOVE
hLast = el.find("[value=" + $(this).val() + "]").insertAfter(hLast); // HIDDEN SELECT
});
}
}

leftSel.trigger('change');
});

// HOVER ON OPTION
$(this).next().find('.ms2side__options, .ms2side__updown').children().hover(
function () {
$(this).addClass('ms2side_hover');
},
function () {
$(this).removeClass('ms2side_hover');
}
);

// UPDATE BUTTON ON START
leftSel.trigger('change');
68879d96 Moritz Bunkus
o.sortOptions();
d31c7de4 Moritz Bunkus
// SHOW WHEN ALL READY
$(this).next().show();
});
};
})(jQuery);