- Timestamp:
- 11/22/12 17:59:26 (12 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
geisa/web/resources/js/classesForJQuery/Select.js
r595 r672 26 26 var Select = Class.create( { 27 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 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"; 43 43 // this.callbackSelect = objectParameter.callbackSelect ? objectParameter.callbackSelect : false; 44 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 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 72 72 // if(this.callbackSelect) 73 73 // this.divSelect.bind( 'click', this, this.onClickSelect ); 74 74 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 ) 90 179 { 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 ) 95 212 { 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 ) 100 252 { 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 // private115 toggleOption:function( event )116 {117 var contextEvent = event.data;118 if( contextEvent.isDisplayed )119 {120 contextEvent.isHover = false;121 contextEvent.hideOption();122 }123 else124 contextEvent.showOption();125 },126 127 // private128 showOption:function()129 {130 if( this.isDisable )131 return;132 133 this.isDisplayed = true;134 this.displayOptions();135 this.divOption.show();136 },137 138 // private139 hideOption: function()140 {141 if( this.isHover )142 return;143 144 this.isDisplayed = false;145 this.divOption.hide();146 },147 148 // public149 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 // public160 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 // public170 /**171 * This method indicates if the itemValue is already in the array172 */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 // public188 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 // public207 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 // public223 clear: function()224 {225 this.divOption.empty();226 this.arrayOptions = $();227 this.itemValues = $();228 },229 230 // public231 /**232 * This method changes only the content of the divSelect without add the item to the array233 * @param itemValue234 * @param itemName235 * @param callback236 */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 // public245 // @itemValue : code of the selected line246 // @ 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 // public262 // @ 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 253 this.selectOption( divOption ); 270 254 if( execute && undefined != divOption.callback ) 271 255 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; 327 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 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 } 328 326 329 327 // onClickSelect: function() … … 331 329 // this.callbackSelect(); 332 330 // } 333 331 } );
Note: See TracChangeset
for help on using the changeset viewer.