What are Slushbucket methods in script?

[peter_repan]

Hi all,

I miss documentation to Slushbucket. I have macro with <g:ui_slushbucket/> element and I would like to know available methods for slushbucket.

I found a method addLeftChoice() or clear() or getRightSelect() but I miss method for adding right choices.

Could you please point me to some documentation or show me some next methods?

Thanks!

[Mike Allen]

initialize: function(id) { 

       this.id = id; 

       this.leftSelectJustify = ""; 

       this.rightSelectJustify = ""; 

       this.rightValues = ""; 

       this.evenOddColoring = false; 

       this.ignoreDuplicates = false; 

} 

getLeftSelectJustify: function() { 

       return this.leftSelectJustify; 

} 

setLeftSelectJustify: function(justify) { 

       this.leftSelectJustify = justify; 

       this.getLeftSelect().style.textAlign = justify; 

} 

getRightSelectJustify: function() { 

       return this.rightSelectJustify; 

} 

setRightSelectJustify: function(justify) { 

       this.rightSelectJustify = justify; 

       this.getRightSelect().style.textAlign = justify; 

} 

getEvenOddColoring: function() { 

       return this.evenOddColoring; 

} 

setEvenOddColoring: function(evenOdd) { 

       this.evenOddColoring = evenOdd; 

} 

addLeftChoice: function(value, text) { 

       var opt = cel("option"); 

       opt.value = value; 

       opt.text = text; 

       this.getLeftSelect().options.add(opt); 

} 

clear: function() { 

       this.clearSelect(this.getLeftSelect()); 

       this.clearSelect(this.getRightSelect()); 

} 

clearSelect: function(selectBox) { 

       selectBox.options.length = 0; 

} 

getValues: function(selectBox) { 

       var values = new Array(); 

       var options = selectBox.options; 

       for (var i = 0; i < options.length; i++) { 

               values[i] = options[i].value; 

       } 

       return values; 

} 

saveRightValues: function(values) { 

       this.rightValues = values; 

} 

getRightValues: function() { 

       return this.rightValues; 

} 

getSelected: function(selectBox) { 

       var selectedIds = []; 

       var sourceOptions = selectBox.options; 

       for (var i = 0; i < sourceOptions.length; i++) { 

               option = sourceOptions[i]; 

               if (!option.selected) 

                       continue; 

               selectedIds.push(i); 

       } 

       return selectedIds; 

} 

getRightSelect: function() { 

       return gel(this.id + "_right"); 

} 

getLeftSelect: function() { 

       return gel(this.id + "_left"); 

} 

moveLeftToRight: function() { 

       this.moveOptions(this.getLeftSelect(), this.getRightSelect()); 

} 

moveRightToLeft: function() { 

       this.moveOptions(this.getRightSelect(), this.getLeftSelect()); 

} 

copyLeftToRight: function() { 

       this.moveOptions(this.getLeftSelect(), this.getRightSelect(), true); 

} 

moveOptions: function(sourceSelect, targetSelect, copyFlag) { 

       var selectedIds = this.getSelected(sourceSelect); 

       if (selectedIds.length < 1) 

               return; 

       var sourceOptions = sourceSelect.options; 

       var targetOptions = targetSelect.options; 

       targetSelect.selectedIndex = -1; 

       for (var i = 0; i < selectedIds.length; i++) { 

               var soption = sourceOptions[selectedIds[i]]; 

               var label = soption.text; 

               if ((this.ignoreDuplicates) && (this._isDuplicate(targetOptions, soption.value))) 

                       continue; 

               option = new Option(label, sourceOptions[selectedIds[i]].value); 

               option.cl = label; 

               option.style.color = sourceOptions[selectedIds[i]].style.color; 

               targetOptions[targetOptions.length] = option; 

               targetOptions[targetOptions.length - 1].selected = true; 

       } 

       if (!copyFlag) { 

               for (var i = selectedIds.length - 1; i > -1; i--) 

                       sourceSelect.remove(selectedIds[i]); 

       } 

       this.evenOddColorize(); 

       if (targetSelect["onchange"]) 

               targetSelect.onchange(); 

       if (sourceSelect["onchange"]) 

               sourceSelect.onchange(); 

       sourceSelect.disabled = true; 

       sourceSelect.disabled = false; 

       if (selectedIds.length > 0) 

               targetSelect.focus(); 

} 

moveUp: function() { 

       sourceSelect = this.getRightSelect(); 

       var selectedIds = this.getSelected(sourceSelect); 

       var options = sourceSelect.options; 

       for (var i = 0; i < selectedIds.length; i++) { 

               var selId = selectedIds[i]; 

               if (selId == 0) 

                       break; 

               if (window['privateMoveUp']) 

                       privateMoveUp(options, selId); 

               else 

                       this.swap(options[selId], options[selId - 1]); 

               options[selId].selected = false; 

               options[selId - 1].selected = true; 

       } 

       this.evenOddColorize(); 

       sourceSelect.focus(); 

       if (sourceSelect["onLocalMoveUp"]) 

               sourceSelect.onLocalMoveUp(); 

} 

moveDown: function() { 

       var sourceSelect = this.getRightSelect(); 

       var selectedIds = this.getSelected(sourceSelect); 

       selectedIds.reverse(); 

       var options = sourceSelect.options; 

       for (var i = 0; i < selectedIds.length; i++) { 

               var selId = selectedIds[i]; 

               if (selId + 1 == options.length) 

                       break; 

               if (window['privateMoveDown']) 

                       privateMoveDown(options, selId); 

               else 

                       this.swap(options[selId], options[selId + 1]); 

               options[selId].selected = false; 

               options[selId + 1].selected = true; 

       } 

       this.evenOddColorize(); 

       sourceSelect.focus(); 

       if (sourceSelect["onLocalMoveDown"]) 

               sourceSelect.onLocalMoveDown(); 

} 

swap: function(option1, option2) { 

       if (!option2) 

               return; 

       var t = $j(option1).clone(); 

       t = t[0]; 

       t.text = option1.text; 

       option1.value = option2.value; 

       option1.text = option2.text; 

       option2.value = t.value; 

       option2.text = t.text; 

} 

evenOddColorize: function() { 

       if (!this.evenOddColoring) 

               return; 

       rightSelect = this.getRightSelect(); 

       if (rightSelect.length < 1) 

               return; 

       var options = rightSelect.options; 

       for (var i = 0; i < rightSelect.length; i++) { 

               if ((i % 2) == 0) 

                       rightSelect.options[i].style.background = "white"; 

               else 

                       rightSelect.options[i].style.background = "#dddddd"; 

       } 

} 

_isDuplicate: function(options, value) { 

       for (var i = 0; i < options.length; i++) { 

               if (options[i].value == value) 

                       return true; 

       } 

       return false; 

} 

getClassName: function() { 

       return "SlushBucket"; 

}

[johnnyjava]

On a related note, the ui_slushbucket macro is great, but sometimes I want larger Select boxes. This is as simple as adding this to the Client Script:

//Called when the form loads

addLoadEvent(function(){

   jQuery('.slushselect').attr("style", "width: 400px"); //expands the ui_slushbucket macro

   GlideDialogWindow.get().onResize(); //recenter the GDW after resizing it.

});

Of course this is in the UI Page HTML:

<!-- Include the 'ui_slushbucket' UI macro -->

<g:ui_slushbucket />

[Luis Nunez]

Hi Johnny,
Can you provide some guidance on this?

Cheers,

Luis

[vishnuprasad]

How can we increase the size of left and right boxes of slushbucket. If I have some long words or sentences   in the left box .I need to have a dragging bar at the bottom to read it completely.

Can we do that in slush bucket.??

[johnnyjava]

the jquery I provided above will resize the slush bucket to make it wider. I'm not sure how to make it so the user can resize it or how to add a scrollbar. I tend to try to avoid making the user do those things as it detracts them just doing the work of the ticket or form they are trying to interact with. I try to regulate the size of what gets displayed in the options list, abbreviating as needed.