Changeset 19310


Ignore:
Timestamp:
2010/11/07 01:09:22 (12 years ago)
Author:
miningbrownie
Message:
 
File:
1 edited

Legend:

Unmodified
Added
Removed
  • branches/camp/camp-2_5-E/html/user_data/packages/admin/js/jquery.plugin.js

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