Listbox : Multi/Single select property #94
Unanswered
bernardLescure
asked this question in
Q&A
Replies: 1 comment 3 replies
-
Right now there is no ideal way to do it, but there is a way to do it. Basically you just have to self manage it so that only one item is selected at all times... which is unfortunately not as easy as it could be. Here's a codepen. It should be pretty self sufficient in that I made it listen to all var getElIndex = function( el ) {
return [...el.parentNode.children].indexOf(el);
};
var listBoxes = SDB.typeAll('listbox');
listBoxes.forEach(function( listbox ) {
listbox.addEventListener("onSelect", function(e) {
var currentEl = e.detail.element;
var selectionArray = e.detail.selection.index;
var currentIndex;
if ( selectionArray.length > 1 ) {
currentIndex = getElIndex(currentEl.parentNode);
selectionArray.forEach(function( index ) {
if ( currentIndex !== index ) SDB.Listbox.deselect( listbox, index);
});
}
else {
currentIndex = selectionArray[0];
}
listBoxSelected( listbox, currentEl, currentIndex );
});
});
function listBoxSelected( lisbox, item, index ) {
if ( index === 1 ) {
alert('Index: ' + index)
}
} Alternatively, and perhaps the better option in your case would be to remove all events from list boxes and then it would be way easier to impose your own click events whichever way you want. Here's a codepen link for that. var listBoxes = SDB.typeAll('listbox');
listBoxes.forEach(function( listbox ) {
listbox.outerHTML = listbox.outerHTML;
});
var listBoxes = SDB.typeAll('listbox');
listBoxes.forEach(function( listbox ) {
listbox.querySelectorAll('ul li').forEach(function( item ) {
item.addEventListener('click', function( e ) {
console.log( e.target.textContent );
});
});
}); |
Beta Was this translation helpful? Give feedback.
3 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hi,
in the super power UI editor (👍 ),
we've got a checkbox option for / Lisbox => creation properties => multiselect.
This option seems not to have effect on the CEP export,
In the header script object I can see
<!-- .... "creationProps":{"multiselect":false, ... -->
But no difference in CEP / html export if multiselect is on or off.
Is there a way to change this property ?
Rather than adding a list of buttons, I would prefer using a list box with single selection.
I'm just starting to use it for AnimateCC panels.
Thank you again for this super tool ! 🥇
Nardo
Beta Was this translation helpful? Give feedback.
All reactions