Changeset 672


Ignore:
Timestamp:
11/22/12 17:59:26 (12 years ago)
Author:
vmipsl
Message:

Correction double select

File:
1 edited

Legend:

Unmodified
Added
Removed

  • geisa/web/resources/js/classesForJQuery/Select.js

    r595 r672  
    2626var Select = Class.create( { 
    2727 
    28             // Public functions ******************************************************** 
    29  
    30             initialize: function( objectParameter ) 
    31             { 
    32                 // Param 
    33                 this.id = objectParameter.id; 
    34                 this.parent = objectParameter.parent ? objectParameter.parent : document.body; 
    35                 this.isDisplayed = objectParameter.isDisplayed ? objectParameter.isDisplayed : false; 
    36                 this.isDisable = objectParameter.isDisable ? objectParameter.isDisable : false; 
    37                 this.maxOptionSize = objectParameter.maxOptionSize ? objectParameter.maxOptionSize : 0; 
    38                 this.indexOption = 0; 
    39                 this.isHover = false; 
    40                 this.arrayOptions = $(); 
    41                 this.className = objectParameter.className ? "select_container " + objectParameter.className : "select_container"; 
    42                 this.classNameOption = objectParameter.classNameOption ? "select_choicelist " + objectParameter.classNameOption : "select_choicelist"; 
     28    // Public functions ******************************************************** 
     29 
     30    initialize: function( objectParameter ) 
     31    { 
     32        // Param 
     33        this.id = objectParameter.id; 
     34        this.parent = objectParameter.parent ? objectParameter.parent : document.body; 
     35        this.isDisplayed = objectParameter.isDisplayed ? objectParameter.isDisplayed : false; 
     36        this.isDisable = objectParameter.isDisable ? objectParameter.isDisable : false; 
     37        this.maxOptionSize = objectParameter.maxOptionSize ? objectParameter.maxOptionSize : 0; 
     38        this.indexOption = 0; 
     39        this.isHover = false; 
     40        this.arrayOptions = $(); 
     41        this.className = objectParameter.className ? "select_container " + objectParameter.className : "select_container"; 
     42        this.classNameOption = objectParameter.classNameOption ? "select_choicelist " + objectParameter.classNameOption : "select_choicelist"; 
    4343//                this.callbackSelect = objectParameter.callbackSelect ? objectParameter.callbackSelect : false; 
    4444 
    45                 // Variables 
    46                 this.itemValues = $(); 
    47  
    48                 // Select div 
    49                 this.divSelect = $( document.createElement( "div" ) ); 
    50                 this.divSelect.attr( {id:this.id, class:this.className} ); 
    51  
    52                 this.divSelectLeft = $( document.createElement( "div" ) ) 
    53                 this.divSelectLeft.addClass( "select_selectLeft" ); 
    54                 this.divSelect.append( this.divSelectLeft ); 
    55  
    56                 this.divSelectMiddle = $( document.createElement( "div" ) ) 
    57                 this.divSelectMiddle.addClass( "select_selectMiddle" ); 
    58                 this.divSelect.append( this.divSelectMiddle ); 
    59  
    60                 this.divSelectRight = $( document.createElement( "div" ) ) 
    61                 this.divSelectRight.addClass( "select_selectRight" ); 
    62                 this.divSelect.append( this.divSelectRight ); 
    63  
    64                 this.parent.append( this.divSelect ); 
    65  
    66                 // Options div 
    67                 this.divOption = $( document.createElement( "div" ) ) 
    68                 this.divOption.addClass( this.classNameOption ); 
    69                 this.parent.append( this.divOption ); 
    70  
    71                 //rajout pour onclick 
     45        // Variables 
     46        this.itemValues = $(); 
     47 
     48        // Select div 
     49        this.divSelect = $( document.createElement( "div" ) ); 
     50        this.divSelect.attr( {id:this.id, class:this.className} ); 
     51 
     52        this.divSelectLeft = $( document.createElement( "div" ) ) 
     53        this.divSelectLeft.addClass( "select_selectLeft" ); 
     54        this.divSelect.append( this.divSelectLeft ); 
     55 
     56        this.divSelectMiddle = $( document.createElement( "div" ) ) 
     57        this.divSelectMiddle.addClass( "select_selectMiddle" ); 
     58        this.divSelect.append( this.divSelectMiddle ); 
     59 
     60        this.divSelectRight = $( document.createElement( "div" ) ) 
     61        this.divSelectRight.addClass( "select_selectRight" ); 
     62        this.divSelect.append( this.divSelectRight ); 
     63 
     64        this.parent.append( this.divSelect ); 
     65 
     66        // Options div 
     67        this.divOption = $( document.createElement( "div" ) ) 
     68        this.divOption.addClass( this.classNameOption ); 
     69        this.parent.append( this.divOption ); 
     70 
     71        //rajout pour onclick 
    7272//                if(this.callbackSelect) 
    7373//                    this.divSelect.bind( 'click', this, this.onClickSelect ); 
    7474 
    75                 this.divSelect.bind( "mouseup", this, this.toggleOption ); 
    76                 this.divSelect.bind( 'mouseover', this, this.onMouseHover ); 
    77                 this.divSelect.bind( 'mouseout', this, this.onMouseOut ); 
    78                 this.divOption.bind( 'mouseover', this, this.onMouseHover ); 
    79                 this.divOption.bind( 'mouseout', this, this.onMouseOut ); 
    80                 this.parent.bind( 'mouseleave', this, this.onMouseParentOut ); 
    81  
    82                 if( this.isDisplayed ) 
    83                     this.showOption(); 
    84  
    85                 if( this.isDisable ) 
    86                     this.hideOption(); 
    87             }, 
    88  
    89             getName: function() 
     75        this.divSelect.bind( "mouseup", this, this.toggleOption ); 
     76        this.divSelect.bind( 'mouseover', this, this.onMouseHover ); 
     77        this.divSelect.bind( 'mouseout', this, this.onMouseOut ); 
     78        this.divOption.bind( 'mouseover', this, this.onMouseHover ); 
     79        this.divOption.bind( 'mouseout', this, this.onMouseOut ); 
     80        this.parent.bind( 'mouseleave', this, this.onMouseParentOut ); 
     81 
     82        if( this.isDisplayed ) 
     83            this.showOption(); 
     84 
     85        if( this.isDisable ) 
     86            this.hideOption(); 
     87    }, 
     88 
     89    getName: function() 
     90    { 
     91        return this.itemName; 
     92    }, 
     93 
     94    getValue: function() 
     95    { 
     96        return this.itemValue; 
     97    }, 
     98 
     99    getValue2: function() 
     100    { 
     101        return this.itemValue2; 
     102    }, 
     103 
     104    getValues: function() 
     105    { 
     106        return this.itemValues; 
     107    }, 
     108 
     109    getSize: function() 
     110    { 
     111        return this.arrayOptions.size(); 
     112    }, 
     113 
     114    // private 
     115    toggleOption:function( event ) 
     116    { 
     117        var contextEvent = event.data; 
     118        if( contextEvent.isDisplayed ) 
     119        { 
     120            contextEvent.isHover = false; 
     121            contextEvent.hideOption(); 
     122        } 
     123        else 
     124            contextEvent.showOption(); 
     125    }, 
     126 
     127    // private 
     128    showOption:function() 
     129    { 
     130        if( this.isDisable ) 
     131            return; 
     132 
     133        this.isDisplayed = true; 
     134        this.displayOptions(); 
     135        this.divOption.show(); 
     136    }, 
     137 
     138    // private 
     139    hideOption: function() 
     140    { 
     141        if( this.isHover ) 
     142            return; 
     143 
     144        this.isDisplayed = false; 
     145        this.divOption.hide(); 
     146    }, 
     147 
     148    // public 
     149    disable: function() 
     150    { 
     151        this.isDisable = true; 
     152        this.divSelect.addClass( "disable" ); 
     153        this.hideOption(); 
     154        /* Nath*/ 
     155        this.divSelectMiddle.removeClass( "select_selectMiddle" ); 
     156        this.divSelectMiddle.addClass( "select_selectMiddle_disable" ); 
     157    }, 
     158 
     159    // public 
     160    enable: function() 
     161    { 
     162        this.isDisable = false; 
     163        this.divSelect.removeClass( "disable" ); 
     164        /* Nath*/ 
     165        this.divSelectMiddle.removeClass( "select_selectMiddle_disable" ); 
     166        this.divSelectMiddle.addClass( "select_selectMiddle" ); 
     167    }, 
     168 
     169    // public 
     170    /** 
     171     * This method indicates if the itemValue is already in the array 
     172     */ 
     173    content: function( itemValue ) 
     174    { 
     175        var result = false; 
     176        jQuery.each( this.arrayOptions, jQuery.proxy( function( i, divOption ) 
     177        { 
     178            if( divOption.itemValue == itemValue ) 
    90179            { 
    91                 return this.itemName; 
    92             }, 
    93  
    94             getValue: function() 
     180                result = true; 
     181                return false; 
     182            } 
     183        }, this ) ); 
     184        return result; 
     185    }, 
     186 
     187    // public 
     188    add: function( itemValue, itemName, callback, itemValue2 ) 
     189    { 
     190        var divOptionMiddle = $( document.createElement( "div" ) ); 
     191        divOptionMiddle.attr( {id:"option_" + itemValue, class: "select_item_middle" } ); 
     192        divOptionMiddle.html( itemName ); 
     193        divOptionMiddle.itemName = itemName; 
     194        divOptionMiddle.itemValue = itemValue; 
     195        if( itemValue2 ) 
     196            divOptionMiddle.itemValue2 = itemValue2; 
     197        divOptionMiddle.callback = callback; 
     198        this.divOption.append( divOptionMiddle ); 
     199 
     200        divOptionMiddle.bind( 'click', [this, divOptionMiddle], this.onOptionClick ); 
     201 
     202        this.arrayOptions.push( divOptionMiddle ); 
     203        this.itemValues.push( itemValue ); 
     204    }, 
     205 
     206    // public 
     207    remove: function( itemValue ) 
     208    { 
     209        jQuery.each( this.arrayOptions, jQuery.proxy( function( i, divOption ) 
     210        { 
     211            if( divOption.itemValue == itemValue ) 
    95212            { 
    96                 return this.itemValue; 
    97             }, 
    98  
    99             getValue2: function() 
     213                $( "#option_" + itemValue ).first().remove(); 
     214                var index = jQuery.inArray( divOption, this.arrayOptions ); 
     215                this.arrayOptions.splice( index, 1 ); 
     216                this.itemValues.splice( index, 1 ); 
     217                return false; 
     218            } 
     219        }, this ) ); 
     220    }, 
     221 
     222    // public 
     223    clear: function() 
     224    { 
     225        this.divOption.empty(); 
     226        this.arrayOptions = $(); 
     227        this.itemValues = $(); 
     228    }, 
     229 
     230    // public 
     231    /** 
     232     * This method changes only the content of the divSelect without add the item to the array 
     233     * @param itemValue 
     234     * @param itemName 
     235     * @param callback 
     236     */ 
     237    changeSelectMiddle: function( itemValue, itemName, callback ) 
     238    { 
     239        this.add( itemValue, itemName, callback ); 
     240        this.select( itemValue, callback ); 
     241        this.remove( itemValue ); 
     242    }, 
     243 
     244    // public 
     245    // @itemValue : code of the selected line 
     246    // @ execute : true / false. Execute the callback. 
     247    select: function( itemValue, execute ) 
     248    { 
     249        jQuery.each( this.arrayOptions, jQuery.proxy( function( i, divOption ) 
     250        { 
     251            if( divOption.itemValue == itemValue ) 
    100252            { 
    101                 return this.itemValue2; 
    102             }, 
    103  
    104             getValues: function() 
    105             { 
    106                 return this.itemValues; 
    107             }, 
    108  
    109             getSize: function() 
    110             { 
    111                 return this.arrayOptions.size(); 
    112             }, 
    113  
    114             // private 
    115             toggleOption:function( event ) 
    116             { 
    117                 var contextEvent = event.data; 
    118                 if( contextEvent.isDisplayed ) 
    119                 { 
    120                     contextEvent.isHover = false; 
    121                     contextEvent.hideOption(); 
    122                 } 
    123                 else 
    124                     contextEvent.showOption(); 
    125             }, 
    126  
    127             // private 
    128             showOption:function() 
    129             { 
    130                 if( this.isDisable ) 
    131                     return; 
    132  
    133                 this.isDisplayed = true; 
    134                 this.displayOptions(); 
    135                 this.divOption.show(); 
    136             }, 
    137  
    138             // private 
    139             hideOption: function() 
    140             { 
    141                 if( this.isHover ) 
    142                     return; 
    143  
    144                 this.isDisplayed = false; 
    145                 this.divOption.hide(); 
    146             }, 
    147  
    148             // public 
    149             disable: function() 
    150             { 
    151                 this.isDisable = true; 
    152                 this.divSelect.addClass( "disable" ); 
    153                 this.hideOption(); 
    154                 /* Nath*/ 
    155                 this.divSelectMiddle.removeClass( "select_selectMiddle" ); 
    156                 this.divSelectMiddle.addClass( "select_selectMiddle_disable" ); 
    157             }, 
    158  
    159             // public 
    160             enable: function() 
    161             { 
    162                 this.isDisable = false; 
    163                 this.divSelect.removeClass( "disable" ); 
    164                 /* Nath*/ 
    165                 this.divSelectMiddle.removeClass( "select_selectMiddle_disable" ); 
    166                 this.divSelectMiddle.addClass( "select_selectMiddle" ); 
    167             }, 
    168  
    169             // public 
    170             /** 
    171              * This method indicates if the itemValue is already in the array 
    172              */ 
    173             content: function( itemValue ) 
    174             { 
    175                 var result = false; 
    176                 jQuery.each( this.arrayOptions, jQuery.proxy( function( i, divOption ) 
    177                 { 
    178                     if( divOption.itemValue == itemValue ) 
    179                     { 
    180                         result = true; 
    181                         return false; 
    182                     } 
    183                 }, this ) ); 
    184                 return result; 
    185             }, 
    186  
    187             // public 
    188             add: function( itemValue, itemName, callback, itemValue2 ) 
    189             { 
    190                 var divOptionMiddle = $( document.createElement( "div" ) ); 
    191                 divOptionMiddle.attr( {id:"option_" + itemValue, class: "select_item_middle" } ); 
    192                 divOptionMiddle.html( itemName ); 
    193                 divOptionMiddle.itemName = itemName; 
    194                 divOptionMiddle.itemValue = itemValue; 
    195                 if( itemValue2 ) 
    196                     divOptionMiddle.itemValue2 = itemValue2; 
    197                 divOptionMiddle.callback = callback; 
    198                 this.divOption.append( divOptionMiddle ); 
    199  
    200                 divOptionMiddle.bind( 'click', [this, divOptionMiddle], this.onOptionClick ); 
    201  
    202                 this.arrayOptions.push( divOptionMiddle ); 
    203                 this.itemValues.push(itemValue); 
    204             }, 
    205  
    206             // public 
    207             remove: function( itemValue ) 
    208             { 
    209                 jQuery.each( this.arrayOptions, jQuery.proxy( function( i, divOption ) 
    210                 { 
    211                     if( divOption.itemValue == itemValue ) 
    212                     { 
    213                         $( "#option_" + itemValue ).first().remove(); 
    214                         var index = jQuery.inArray( divOption, this.arrayOptions ); 
    215                         this.arrayOptions.splice( index, 1 ); 
    216                         this.itemValues.splice( index, 1 ); 
    217                         return false; 
    218                     } 
    219                 }, this ) ); 
    220             }, 
    221  
    222             // public 
    223             clear: function() 
    224             { 
    225                 this.divOption.empty(); 
    226                 this.arrayOptions = $(); 
    227                 this.itemValues = $(); 
    228             }, 
    229  
    230             // public 
    231             /** 
    232              * This method changes only the content of the divSelect without add the item to the array 
    233              * @param itemValue 
    234              * @param itemName 
    235              * @param callback 
    236              */ 
    237             changeSelectMiddle: function( itemValue, itemName, callback ) 
    238             { 
    239                 this.add( itemValue, itemName, callback ); 
    240                 this.select( itemValue, callback ); 
    241                 this.remove( itemValue ); 
    242             }, 
    243  
    244             // public 
    245             // @itemValue : code of the selected line 
    246             // @ execute : true / false. Execute the callback. 
    247             select: function( itemValue, execute ) 
    248             { 
    249                 jQuery.each( this.arrayOptions, jQuery.proxy( function( i, divOption ) 
    250                 { 
    251                     if( divOption.itemValue == itemValue ) 
    252                     { 
    253                         this.selectOption( divOption ); 
    254                         if( execute && undefined != divOption.callback ) 
    255                             divOption.callback( divOption.itemValue ); 
    256                         return false; 
    257                     } 
    258                 }, this ) ); 
    259             }, 
    260  
    261             // public 
    262             // @ execute : true / false. Execute the callback. 
    263             selectFirst: function( execute ) 
    264             { 
    265                 var divOption = this.arrayOptions[0]; 
    266                 if( undefined == divOption ) 
    267                     return; 
    268  
    269253                this.selectOption( divOption ); 
    270254                if( execute && undefined != divOption.callback ) 
    271255                    divOption.callback( divOption.itemValue ); 
    272             }, 
    273  
    274             // private 
    275             selectOption: function( divOption ) 
    276             { 
    277                 this.itemName = divOption.itemName; 
    278                 this.itemValue = divOption.itemValue; 
    279                 this.itemValue2 = divOption.itemValue2; 
    280                 this.divSelectMiddle.html( this.itemName ); 
    281             }, 
    282  
    283             // private 
    284             onOptionClick: function( event ) 
    285             { 
    286                 var contextEvent = event.data[0]; 
    287                 var divOption = event.data[1]; 
    288                 contextEvent.isHover = false; 
    289                 contextEvent.hideOption(); 
    290                 contextEvent.select( divOption.itemValue, true ); 
    291                 if( undefined != divOption.callback ) 
    292                     divOption.callback( divOption.itemValue ); 
    293             }, 
    294  
    295             // private 
    296             onMouseHover: function( event ) 
    297             { 
    298                 event.data.isHover = true; 
    299             }, 
    300  
    301             // private 
    302             onMouseParentOut: function( event ) 
    303             { 
    304                 event.data.isHover = false; 
    305                 event.data.hideOption(); 
    306             }, 
    307  
    308             onMouseOut: function( event ) 
    309             { 
    310                 event.data.isHover = false; 
    311             }, 
    312  
    313             // private 
    314             displayOptions: function() 
    315             { 
    316                 var fromOption = this.indexOption; 
    317                 var toOption = this.indexOption + this.maxOptionSize - 1; 
    318                 for( var i = 0; i < this.arrayOptions.size(); i++ ) 
    319                 { 
    320                     if( 0 == this.maxOptionSize ) 
    321                         this.arrayOptions.get( i ).show(); 
    322                     else if( i >= fromOption && i <= toOption ) 
    323                         this.arrayOptions.get( i ).show(); 
    324                     else 
    325                         this.arrayOptions.get( i ).hide(); 
    326                 } 
     256                return false; 
    327257            } 
     258        }, this ) ); 
     259    }, 
     260 
     261    // public 
     262    // @ execute : true / false. Execute the callback. 
     263    selectFirst: function( execute ) 
     264    { 
     265        var divOption = this.arrayOptions[0]; 
     266        if( undefined == divOption ) 
     267            return; 
     268 
     269        this.selectOption( divOption ); 
     270        if( execute && undefined != divOption.callback ) 
     271            divOption.callback( divOption.itemValue ); 
     272    }, 
     273 
     274    // private 
     275    selectOption: function( divOption ) 
     276    { 
     277        this.itemName = divOption.itemName; 
     278        this.itemValue = divOption.itemValue; 
     279        this.itemValue2 = divOption.itemValue2; 
     280        this.divSelectMiddle.html( this.itemName ); 
     281    }, 
     282 
     283    // private 
     284    onOptionClick: function( event ) 
     285    { 
     286        var contextEvent = event.data[0]; 
     287        var divOption = event.data[1]; 
     288        contextEvent.isHover = false; 
     289        contextEvent.hideOption(); 
     290        contextEvent.select( divOption.itemValue, true ); 
     291    }, 
     292 
     293    // private 
     294    onMouseHover: function( event ) 
     295    { 
     296        event.data.isHover = true; 
     297    }, 
     298 
     299    // private 
     300    onMouseParentOut: function( event ) 
     301    { 
     302        event.data.isHover = false; 
     303        event.data.hideOption(); 
     304    }, 
     305 
     306    onMouseOut: function( event ) 
     307    { 
     308        event.data.isHover = false; 
     309    }, 
     310 
     311    // private 
     312    displayOptions: function() 
     313    { 
     314        var fromOption = this.indexOption; 
     315        var toOption = this.indexOption + this.maxOptionSize - 1; 
     316        for( var i = 0; i < this.arrayOptions.size(); i++ ) 
     317        { 
     318            if( 0 == this.maxOptionSize ) 
     319                this.arrayOptions.get( i ).show(); 
     320            else if( i >= fromOption && i <= toOption ) 
     321                this.arrayOptions.get( i ).show(); 
     322            else 
     323                this.arrayOptions.get( i ).hide(); 
     324        } 
     325    } 
    328326 
    329327//            onClickSelect: function() 
    … …  
    331329//                this.callbackSelect(); 
    332330//            } 
    333         } ); 
     331} ); 
Note: See TracChangeset for help on using the changeset viewer.