Per default alle Items unselektiert
[kivitendo-erp.git] / js / jquery.multiselect2side.js
1 /*
2  * multiselect2side jQuery plugin
3  *
4  * Copyright (c) 2010 Giovanni Casassa (senamion.com - senamion.it)
5  *
6  * Dual licensed under the MIT (MIT-LICENSE.txt)
7  * and GPL (GPL-LICENSE.txt) licenses.
8  *
9  * http://www.senamion.com
10  *
11  */
12
13 (function($) {
14   jQuery.fn.multiselect2side = function (o) {
15     o = $.extend({
16       selectedPosition: 'right',
17       moveOptions:      true,
18       labelTop:         'Top',
19       labelBottom:      'Bottom',
20       labelUp:          'Up',
21       labelDown:        'Down',
22       labelSort:        'Sort',
23       labelsx:          'Available',
24       labeldx:          'Selected',
25       maxSelected:      -1
26     }, o);
27
28     return this.each(function () {
29       var el = $(this);
30
31       var originalName = $(this).attr("name");
32       if (originalName.indexOf('[') != -1)
33         originalName = originalName.substring(0, originalName.indexOf('['));
34
35       var nameDx = originalName + "ms2side__dx";
36       var nameSx = originalName + "ms2side__sx";
37       var size   = $(this).attr("size");
38       // SIZE MIN
39       if (size < 6) {
40         $(this).attr("size", "6");
41         size = 6;
42       }
43
44       // UP AND DOWN
45       var divUpDown =
46         "<div class='ms2side__updown'>" +
47         "<p class='SelSort' title='Sort'>" + o.labelSort + "</p>" +
48         "<p class='MoveTop' title='Move on top selected option'>" + o.labelTop + "</p>" +
49         "<p class='MoveUp' title='Move up selected option'>" + o.labelUp + "</p>" +
50         "<p class='MoveDown' title='Move down selected option'>" + o.labelDown + "</p>" +
51         "<p class='MoveBottom' title='Move on bottom selected option'>" + o.labelBottom + "</p>" +
52         "</div>";
53
54       // CREATE NEW ELEMENT (AND HIDE IT) AFTER THE HIDDED ORGINAL SELECT
55       var htmlToAdd =
56         "<div class='ms2side__div'>" +
57         ((o.selectedPosition != 'right' && o.moveOptions) ? divUpDown : "") +
58         "<div class='ms2side__select'>" +
59         (o.labelsx ? ("<div class='ms2side__header'>" + o.labelsx + "</div>") : "") +
60         "<select title='" + o.labelsx + "' name='" + nameSx + "' id='" + nameSx + "' size='" + size + "' multiple='multiple' ></select>" +
61         "</div>" +
62         "<div class='ms2side__options'>" +
63         ((o.selectedPosition == 'right')
64          ?
65          ("<p class='AddOne' title='Add Selected'>&rsaquo;</p>" +
66           "<p class='AddAll' title='Add All'>&raquo;</p>" +
67           "<p class='RemoveOne' title='Remove Selected'>&lsaquo;</p>" +
68           "<p class='RemoveAll' title='Remove All'>&laquo;</p>")
69          :
70          ("<p class='AddOne' title='Add Selected'>&lsaquo;</p>" +
71           "<p class='AddAll' title='Add All'>&laquo;</p>" +
72           "<p class='RemoveOne' title='Remove Selected'>&rsaquo;</p>" +
73           "<p class='RemoveAll' title='Remove All'>&raquo;</p>")
74         ) +
75         "</div>" +
76         "<div class='ms2side__select'>" +
77         (o.labeldx ? ("<div class='ms2side__header'>" + o.labeldx + "</div>") : "") +
78         "<select title='" + o.labeldx + "' name='" + nameDx + "' id='" + nameDx + "' size='" + size + "' multiple='multiple' ></select>" +
79         "</div>" +
80         ((o.selectedPosition == 'right' && o.moveOptions) ? divUpDown : "") +
81         "</div>";
82       $(this).after(htmlToAdd).hide();
83
84       // ELEMENTS
85       var allSel    = $(this).next().find("select");
86       var leftSel   = (o.selectedPosition == 'right') ? allSel.eq(0) : allSel.eq(1);
87       var rightSel  = (o.selectedPosition == 'right') ? allSel.eq(1) : allSel.eq(0);
88       // HEIGHT DIV
89       var heightDiv = $(".ms2side__select").eq(0).height();
90
91       // CENTER MOVE OPTIONS AND UPDOWN OPTIONS
92       $(this).next().find('.ms2side__options, .ms2side__updown').each(function(){
93         var     top = ((heightDiv/2) - ($(this).height()/2));
94         if (top > 0)
95           $(this).css('padding-top',  top + 'px' );
96       });
97
98       // MOVE SELECTED OPTION TO RIGHT, NOT SELECTED TO LEFT
99       $(this).find("option:selected").clone().appendTo(rightSel);
100       $(this).find("option:not(:selected)").clone().appendTo(leftSel);
101
102       // Mark all unselected.
103       rightSel.find("option").attr("selected", false);
104
105       // ON CHANGE REFRESH ALL BUTTON STATUS
106       allSel.change(function() {
107         var div        = $(this).parent().parent();
108         var selectSx   = leftSel.children();
109         var selectDx   = rightSel.children();
110         var selectedSx = leftSel.find("option:selected");
111         var selectedDx = rightSel.find("option:selected");
112
113         if (selectedSx.size() == 0 || (o.maxSelected >= 0 && (selectedSx.size() + selectDx.size()) > o.maxSelected))
114           div.find(".AddOne").addClass('ms2side__hide');
115         else
116           div.find(".AddOne").removeClass('ms2side__hide');
117
118         // FIRST HIDE ALL
119         div.find(".RemoveOne, .MoveUp, .MoveDown, .MoveTop, .MoveBottom, .SelSort").addClass('ms2side__hide');
120         // if (selectDx.size() > 1)
121           // div.find(".SelSort").removeClass('ms2side__hide');
122         if (selectedDx.size() > 0) {
123           div.find(".RemoveOne").removeClass('ms2side__hide');
124           // // ALL SELECTED - NO MOVE
125           // if (selectedDx.size() < selectDx.size()) {    // FOR NOW (JOE) && selectedDx.size() == 1
126           //   if (selectedDx.val() != selectDx.val())     // FIRST OPTION, NO UP AND TOP BUTTON
127           //     div.find(".MoveUp, .MoveTop").removeClass('ms2side__hide');
128           //   if (selectedDx.last().val() != selectDx.last().val())       // LAST OPTION, NO DOWN AND BOTTOM BUTTON
129           //     div.find(".MoveDown, .MoveBottom").removeClass('ms2side__hide');
130           // }
131         }
132
133         if (selectSx.size() == 0 || (o.maxSelected >= 0 && selectSx.size() >= o.maxSelected))
134           div.find(".AddAll").addClass('ms2side__hide');
135         else
136           div.find(".AddAll").removeClass('ms2side__hide');
137
138         if (selectDx.size() == 0)
139           div.find(".RemoveAll").addClass('ms2side__hide');
140         else
141           div.find(".RemoveAll").removeClass('ms2side__hide');
142
143         leftSel.sortOptions();
144         rightSel.sortOptions();
145       });
146
147       // DOUBLE CLICK ON LEFT SELECT OPTION
148       leftSel.dblclick(function () {
149         $(this).find("option:selected").each(function(i, selected){
150
151           if (o.maxSelected < 0 || rightSel.children().size() < o.maxSelected) {
152             $(this).remove().appendTo(rightSel);
153             el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
154           }
155         });
156         $(this).trigger('change');
157       });
158
159       // DOUBLE CLICK ON RIGHT SELECT OPTION
160       rightSel.dblclick(function () {
161         $(this).find("option:selected").each(function(i, selected){
162           $(this).remove().appendTo(leftSel);
163           el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
164         });
165         $(this).trigger('change');
166       });
167
168       // CLICK ON OPTION
169       $(this).next().find('.ms2side__options').children().click(function () {
170         if (!$(this).hasClass("ms2side__hide")) {
171           if ($(this).hasClass("AddOne")) {
172             leftSel.find("option:selected").each(function(i, selected){
173               $(this).remove().appendTo(rightSel);
174               el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
175             });
176
177           } else if ($(this).hasClass("AddAll")) {        // ALL SELECTED
178             leftSel.children().appendTo(rightSel);
179             leftSel.children().remove();
180             el.find('option').attr("selected", true);
181             // el.children().attr("selected", true); -- PROBLEM WITH OPTGROUP
182
183           } else if ($(this).hasClass("RemoveOne")) {
184             rightSel.find("option:selected").each(function(i, selected){
185               $(this).remove().appendTo(leftSel);
186               el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
187             });
188
189           } else if ($(this).hasClass("RemoveAll")) {     // ALL REMOVED
190             rightSel.children().appendTo(leftSel);
191             rightSel.children().remove();
192             el.find('option').attr("selected", false);
193             //el.children().attr("selected", false); -- PROBLEM WITH OPTGROUP
194           }
195         }
196
197         leftSel.trigger('change');
198       });
199
200       // CLICK ON UP - DOWN
201       $(this).next().find('.ms2side__updown').children().click(function () {
202         var selectedDx = rightSel.find("option:selected");
203         var selectDx   = rightSel.find("option");
204
205         if (!$(this).hasClass("ms2side__hide")) {
206           if ($(this).hasClass("SelSort")) {
207             // SORT SELECTED ELEMENT
208             selectDx.sort(function(a, b) {
209               var compA = $(a).text().toUpperCase();
210               var compB = $(b).text().toUpperCase();
211               return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
212             })
213             // FIRST REMOVE FROM ORIGINAL SELECT
214             el.find("option:selected").remove();
215             // AFTER ADD ON ORIGINAL AND RIGHT SELECT
216             selectDx.each(function() {
217               rightSel.append($(this).clone().attr("selected", true));
218               el.append($(this).attr("selected", true));
219             });
220
221           } else if ($(this).hasClass("MoveUp")) {
222             var prev = selectedDx.first().prev();
223             var hPrev = el.find("[value=" + prev.val() + "]");
224
225             selectedDx.each(function() {
226               $(this).insertBefore(prev);
227               el.find("[value=" + $(this).val() + "]").insertBefore(hPrev);     // HIDDEN SELECT
228             });
229
230           } else if ($(this).hasClass("MoveDown")) {
231             var next = selectedDx.last().next();
232             var hNext = el.find("[value=" + next.val() + "]");
233
234             selectedDx.each(function() {
235               $(this).insertAfter(next);
236               el.find("[value=" + $(this).val() + "]").insertAfter(hNext);      // HIDDEN SELECT
237             });
238
239           } else if ($(this).hasClass("MoveTop")) {
240             var first = selectDx.first();
241             var hFirst = el.find("[value=" + first.val() + "]");
242
243             selectedDx.each(function() {
244               $(this).insertBefore(first);
245               el.find("[value=" + $(this).val() + "]").insertBefore(hFirst);    // HIDDEN SELECT
246             });
247
248           } else if ($(this).hasClass("MoveBottom")) {
249             var last = selectDx.last();
250             var hLast = el.find("[value=" + last.val() + "]");
251
252             selectedDx.each(function() {
253               last = $(this).insertAfter(last); // WITH last = SAME POSITION OF SELECTED OPTION AFTER MOVE
254               hLast = el.find("[value=" + $(this).val() + "]").insertAfter(hLast);      // HIDDEN SELECT
255             });
256           }
257         }
258
259         leftSel.trigger('change');
260       });
261
262       // HOVER ON OPTION
263       $(this).next().find('.ms2side__options, .ms2side__updown').children().hover(
264         function () {
265           $(this).addClass('ms2side_hover');
266         },
267         function () {
268           $(this).removeClass('ms2side_hover');
269         }
270       );
271
272       // UPDATE BUTTON ON START
273       leftSel.trigger('change');
274       // SHOW WHEN ALL READY
275       $(this).next().show();
276     });
277   };
278 })(jQuery);