Berichte OE: Bestellnummer des Kunden anzeigen/danach filtern
[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       leftSel:          null,
27       rightSel:         null,
28
29       sortOptions: function() {
30         o.leftSel.sortOptions();
31         o.rightSel.sortOptions();
32       }
33     }, o);
34
35     return this.each(function () {
36       var el = $(this);
37
38       var hiddenName = $(this).attr("name");
39       var originalID = $(this).attr("id");
40       if (!originalID)
41         originalID = hiddenName;
42       if (originalID.indexOf('[') != -1)
43         originalID = originalID.substring(0, originalID.indexOf('['));
44
45       var nameDx   = originalID + "ms2side__dx";
46       var idDx     = originalID + "ms2side__dx";
47       var nameSx   = originalID + "ms2side__sx";
48       var hiddenId = originalID + "ms2side_hidden";
49       var size     = $(this).attr("size");
50       $(this).attr("name", originalID + "ms2side__orig");
51       // SIZE MIN
52       if (size < 6) {
53         $(this).attr("size", "6");
54         size = 6;
55       }
56
57       // UP AND DOWN
58       var divUpDown =
59         "<div class='ms2side__updown'>" +
60         "<p class='SelSort' title='Sort'>" + o.labelSort + "</p>" +
61         "<p class='MoveTop' title='Move on top selected option'>" + o.labelTop + "</p>" +
62         "<p class='MoveUp' title='Move up selected option'>" + o.labelUp + "</p>" +
63         "<p class='MoveDown' title='Move down selected option'>" + o.labelDown + "</p>" +
64         "<p class='MoveBottom' title='Move on bottom selected option'>" + o.labelBottom + "</p>" +
65         "</div>";
66
67       // CREATE NEW ELEMENT (AND HIDE IT) AFTER THE HIDDED ORGINAL SELECT
68       var htmlToAdd =
69         "<div class='ms2side__div'>" +
70         ((o.selectedPosition != 'right' && o.moveOptions) ? divUpDown : "") +
71         "<div class='ms2side__select'>" +
72         (o.labelsx ? ("<div class='ms2side__header'>" + o.labelsx + "</div>") : "") +
73         "<select title='" + o.labelsx + "' name='" + nameSx + "' id='" + nameSx + "' size='" + size + "' multiple='multiple' ></select>" +
74         "</div>" +
75         "<div class='ms2side__options'>" +
76         ((o.selectedPosition == 'right')
77          ?
78          ("<p class='AddOne' title='Add Selected'>&rsaquo;</p>" +
79           "<p class='AddAll' title='Add All'>&raquo;</p>" +
80           "<p class='RemoveOne' title='Remove Selected'>&lsaquo;</p>" +
81           "<p class='RemoveAll' title='Remove All'>&laquo;</p>")
82          :
83          ("<p class='AddOne' title='Add Selected'>&lsaquo;</p>" +
84           "<p class='AddAll' title='Add All'>&laquo;</p>" +
85           "<p class='RemoveOne' title='Remove Selected'>&rsaquo;</p>" +
86           "<p class='RemoveAll' title='Remove All'>&raquo;</p>")
87         ) +
88         "</div>" +
89         "<div class='ms2side__select'>" +
90         (o.labeldx ? ("<div class='ms2side__header'>" + o.labeldx + "</div>") : "") +
91         "<select title='" + o.labeldx + "' name='" + nameDx + "' id='" + idDx + "' size='" + size + "' multiple='multiple' ></select>" +
92         "</div>" +
93         "<span id=\"" + hiddenId + "\"></span>" +
94         ((o.selectedPosition == 'right' && o.moveOptions) ? divUpDown : "") +
95         "</div>";
96       $(this).after(htmlToAdd).hide();
97       $("#" + hiddenId).hide();
98
99       // ELEMENTS
100       var allSel    = $(this).next().find("select");
101       var leftSel   = (o.selectedPosition == 'right') ? allSel.eq(0) : allSel.eq(1);
102       var rightSel  = (o.selectedPosition == 'right') ? allSel.eq(1) : allSel.eq(0);
103       // HEIGHT DIV
104       var heightDiv = $(".ms2side__select").eq(0).height();
105       o.leftSel     = leftSel;
106       o.rightSel    = rightSel;
107
108       // CENTER MOVE OPTIONS AND UPDOWN OPTIONS
109       $(this).next().find('.ms2side__options, .ms2side__updown').each(function(){
110         var     top = ((heightDiv/2) - ($(this).height()/2));
111         if (top > 0)
112           $(this).css('padding-top',  top + 'px' );
113       });
114
115       // MOVE SELECTED OPTION TO RIGHT, NOT SELECTED TO LEFT
116       $(this).find("option:selected").clone().appendTo(rightSel);
117       $(this).find("option:not(:selected)").clone().appendTo(leftSel);
118
119       // Mark all unselected.
120       rightSel.find("option").attr("selected", false);
121
122       // ON CHANGE REFRESH ALL BUTTON STATUS
123       allSel.change(function() {
124         var div        = $(this).parent().parent();
125         var selectSx   = leftSel.children();
126         var selectDx   = rightSel.children();
127         var selectedSx = leftSel.find("option:selected");
128         var selectedDx = rightSel.find("option:selected");
129         var hiddenCont = $("#" + hiddenId);
130
131         if (selectedSx.size() == 0 || (o.maxSelected >= 0 && (selectedSx.size() + selectDx.size()) > o.maxSelected))
132           div.find(".AddOne").addClass('ms2side__hide');
133         else
134           div.find(".AddOne").removeClass('ms2side__hide');
135
136         // FIRST HIDE ALL
137         div.find(".RemoveOne, .MoveUp, .MoveDown, .MoveTop, .MoveBottom, .SelSort").addClass('ms2side__hide');
138         // if (selectDx.size() > 1)
139           // div.find(".SelSort").removeClass('ms2side__hide');
140         if (selectedDx.size() > 0) {
141           div.find(".RemoveOne").removeClass('ms2side__hide');
142           // // ALL SELECTED - NO MOVE
143           // if (selectedDx.size() < selectDx.size()) {    // FOR NOW (JOE) && selectedDx.size() == 1
144           //   if (selectedDx.val() != selectDx.val())     // FIRST OPTION, NO UP AND TOP BUTTON
145           //     div.find(".MoveUp, .MoveTop").removeClass('ms2side__hide');
146           //   if (selectedDx.last().val() != selectDx.last().val())       // LAST OPTION, NO DOWN AND BOTTOM BUTTON
147           //     div.find(".MoveDown, .MoveBottom").removeClass('ms2side__hide');
148           // }
149         }
150
151         if (selectSx.size() == 0 || (o.maxSelected >= 0 && selectSx.size() >= o.maxSelected))
152           div.find(".AddAll").addClass('ms2side__hide');
153         else
154           div.find(".AddAll").removeClass('ms2side__hide');
155
156         if (selectDx.size() == 0)
157           div.find(".RemoveAll").addClass('ms2side__hide');
158         else
159           div.find(".RemoveAll").removeClass('ms2side__hide');
160
161         // Rebuild hidden inputs...
162         hiddenCont.empty();
163         rightSel.find("option").each(function(idx, option) {
164           $('<input type="hidden"/>').attr("name", hiddenName).attr("value", $(option).attr("value")).appendTo(hiddenCont);
165         });
166       });
167
168       // DOUBLE CLICK ON LEFT SELECT OPTION
169       leftSel.dblclick(function () {
170         $(this).find("option:selected").each(function(i, selected){
171
172           if (o.maxSelected < 0 || rightSel.children().size() < o.maxSelected) {
173             $(this).remove().appendTo(rightSel);
174             el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
175           }
176         });
177         $(this).trigger('change');
178         o.sortOptions();
179       });
180
181       // DOUBLE CLICK ON RIGHT SELECT OPTION
182       rightSel.dblclick(function () {
183         $(this).find("option:selected").each(function(i, selected){
184           $(this).remove().appendTo(leftSel);
185           el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
186         });
187         $(this).trigger('change');
188         o.sortOptions();
189       });
190
191       // CLICK ON OPTION
192       $(this).next().find('.ms2side__options').children().click(function () {
193         if (!$(this).hasClass("ms2side__hide")) {
194           if ($(this).hasClass("AddOne")) {
195             leftSel.find("option:selected").each(function(i, selected){
196               $(this).remove().appendTo(rightSel);
197               el.find("[value=" + $(selected).val() + "]").attr("selected", true).remove().appendTo(el);
198             });
199             o.sortOptions();
200
201           } else if ($(this).hasClass("AddAll")) {        // ALL SELECTED
202             leftSel.children().appendTo(rightSel);
203             leftSel.children().remove();
204             el.find('option').attr("selected", true);
205             // el.children().attr("selected", true); -- PROBLEM WITH OPTGROUP
206             o.sortOptions();
207
208           } else if ($(this).hasClass("RemoveOne")) {
209             rightSel.find("option:selected").each(function(i, selected){
210               $(this).remove().appendTo(leftSel);
211               el.find("[value=" + $(selected).val() + "]").attr("selected", false).remove().appendTo(el);
212             });
213             o.sortOptions();
214
215           } else if ($(this).hasClass("RemoveAll")) {     // ALL REMOVED
216             rightSel.children().appendTo(leftSel);
217             rightSel.children().remove();
218             el.find('option').attr("selected", false);
219             //el.children().attr("selected", false); -- PROBLEM WITH OPTGROUP
220             o.sortOptions();
221           }
222         }
223
224         leftSel.trigger('change');
225       });
226
227       // CLICK ON UP - DOWN
228       $(this).next().find('.ms2side__updown').children().click(function () {
229         var selectedDx = rightSel.find("option:selected");
230         var selectDx   = rightSel.find("option");
231
232         if (!$(this).hasClass("ms2side__hide")) {
233           if ($(this).hasClass("SelSort")) {
234             // SORT SELECTED ELEMENT
235             selectDx.sort(function(a, b) {
236               var compA = $(a).text().toUpperCase();
237               var compB = $(b).text().toUpperCase();
238               return (compA < compB) ? -1 : (compA > compB) ? 1 : 0;
239             })
240             // FIRST REMOVE FROM ORIGINAL SELECT
241             el.find("option:selected").remove();
242             // AFTER ADD ON ORIGINAL AND RIGHT SELECT
243             selectDx.each(function() {
244               rightSel.append($(this).clone().attr("selected", true));
245               el.append($(this).attr("selected", true));
246             });
247
248           } else if ($(this).hasClass("MoveUp")) {
249             var prev = selectedDx.first().prev();
250             var hPrev = el.find("[value=" + prev.val() + "]");
251
252             selectedDx.each(function() {
253               $(this).insertBefore(prev);
254               el.find("[value=" + $(this).val() + "]").insertBefore(hPrev);     // HIDDEN SELECT
255             });
256
257           } else if ($(this).hasClass("MoveDown")) {
258             var next = selectedDx.last().next();
259             var hNext = el.find("[value=" + next.val() + "]");
260
261             selectedDx.each(function() {
262               $(this).insertAfter(next);
263               el.find("[value=" + $(this).val() + "]").insertAfter(hNext);      // HIDDEN SELECT
264             });
265
266           } else if ($(this).hasClass("MoveTop")) {
267             var first = selectDx.first();
268             var hFirst = el.find("[value=" + first.val() + "]");
269
270             selectedDx.each(function() {
271               $(this).insertBefore(first);
272               el.find("[value=" + $(this).val() + "]").insertBefore(hFirst);    // HIDDEN SELECT
273             });
274
275           } else if ($(this).hasClass("MoveBottom")) {
276             var last = selectDx.last();
277             var hLast = el.find("[value=" + last.val() + "]");
278
279             selectedDx.each(function() {
280               last = $(this).insertAfter(last); // WITH last = SAME POSITION OF SELECTED OPTION AFTER MOVE
281               hLast = el.find("[value=" + $(this).val() + "]").insertAfter(hLast);      // HIDDEN SELECT
282             });
283           }
284         }
285
286         leftSel.trigger('change');
287       });
288
289       // HOVER ON OPTION
290       $(this).next().find('.ms2side__options, .ms2side__updown').children().hover(
291         function () {
292           $(this).addClass('ms2side_hover');
293         },
294         function () {
295           $(this).removeClass('ms2side_hover');
296         }
297       );
298
299       // UPDATE BUTTON ON START
300       leftSel.trigger('change');
301       o.sortOptions();
302       // SHOW WHEN ALL READY
303       $(this).next().show();
304     });
305   };
306 })(jQuery);