I need a listbox in my web app that lets the user select multiple rows.
While that works in a Desktop browser, by using modifier keys, this isn’t so easy on a touch pad device (iPhone, iPad etc.), as there are no modifier keys there.
How do others solve this?
My idea was to make every tap into the listbox invert that row’s selection state. But that’s not so easy because the Frontend deselects all other rows (which I do not want to happen) before my Event code is invoked to undo that. This would lead to a lot of flicker. Is there a way to modify the click handler of the Listbox to keep it from deselecting all rows?
I had a look at the framework.js. For touch devices, it installs special handlers:
content.addEventListener('touchend',this,false);
The touchend function then checks for modifier keys.
var selectType;
if (event.shiftKey === true) {
selectType = 2;
} else {
if (Xojo.platform == 1) {
if (event.metaKey === true) {
selectType = 3;
} else {
selectType = 1;
}
} else {
if (event.ctrlKey === true) {
selectType = 3;
} else {
selectType = 1;
}
}
}
If it sets selectType to 3, it means it’ll toggle the targeted row. That’s what I want to happen.
Now, if I could inject my own handler that intercepts Xojo’s touchend handler, modify the event to include the meta/ctrl keys, and then pass that on to Xojo’s handler, I’d get the effect I want.
But how would I program that? I am not experienced enough with JS to understand how I’d add another function and intercept the framework’s handler. Can that be done?