Wedge

Public area => Bug reports => The Pub => Archived fixes => Discussion démarrée par: Dragooon le 17 Mars 2012 à 21:12

Titre: [Bug] Select menu is slightly broken on touch screens
Posté par: Dragooon le 17 Mars 2012 à 21:12
The select menu doesn't respond to scrolling on touch screen devices
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Nao le 17 Mars 2012 à 21:26
Which is why iPhones get a much higher size. To avoid the bars.
I don't remember if I added this for tablets as well.
I dunno how a scrollbqr is supposed to be used on a touch device.

Should really create a bug board now... ;)
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Dragooon le 17 Mars 2012 à 21:28
Wouldn't a safer bet be to let native select menus be used on touch devices? Just test for
Code: [Sélectionner]
var isTouch = 'ontouchstart' in document.documentElement;
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Arantor le 17 Mars 2012 à 21:38
That seems a good compromise.
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Nao le 17 Mars 2012 à 22:42
Hey good test string :)

However the reason I don't do that is that sometimes we use HTML in options...
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Arantor le 18 Mars 2012 à 20:24
I have noticed, though, that it is possibly to trip up the selectbox on things like the jumpto if you happen to have it near the bottom of the page and a lot of boards - and it's not possible to scroll on an iPod touch (or if it is, I haven't figured out how)
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Nao le 18 Mars 2012 à 22:41
I don't think it's possible toake it scroll. We mentioned that elsewhere today iirc. The solution is to avoid restraining height but I haven't got time to work on the select box right now.
As for tripping up you mean having it cut off on the right yeah? It's also another thing I always forget to fix. It's easy enough, I just need to reduce the left margin by the same amount of pixels.
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Arantor le 18 Mars 2012 à 22:45
No, I did mean the whole vertical thing, haven't caused it to be cropped on the right for any reason.
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Nao le 19 Mars 2012 à 07:01
It happens in the admin area mostly.
As for what you describe. How's this a bug? Wedge shows the a dropup instead of a dropdown so that it doesn't get cropped..
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Dragooon le 19 Mars 2012 à 07:41
Citation de Nao le 18 Mars 2012 à 22:41
I don't think it's possible toake it scroll. We mentioned that elsewhere today iirc. The solution is to avoid restraining height but I haven't got time to work on the select box right now.
As for tripping up you mean having it cut off on the right yeah? It's also another thing I always forget to fix. It's easy enough, I just need to reduce the left margin by the same amount of pixels.
It'll require some tricky scrolling code to make it scrolling, can't you drop the HTML from options when using the native select?
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Dragooon le 19 Mars 2012 à 15:47
This isn't exactly ideal, and it will lag a lot on touch devices. But it scrolls

Code: (At the end of ScrollBar function in sbox.js) [Sélectionner]
$dd[0].addEventListener('touchmove', function (e)
{
scrollTo(startPos - e.touches[0].pageY + iTouch);
e.preventDefault();
});
$dd[0].addEventListener('touchstart', function (e)
{
iTouch = e.touches[0].pageY;
startPos = parseInt($thumb.css('top') || 0);
});
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Nao le 30 Mars 2012 à 15:09
Never got around to replying that post...
I'm still unsure what to do about this. I'm always against forcing every single browse to load code that it will never need. (Just like I'm not cool about forcing them to load ARIA stuff they'll never use either, but that's a bit harder to detect than a browser version...)

I'd like to get some opinions on this.
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Arantor le 30 Mars 2012 à 15:12
This problem is only going to get worse as touch-capable desktops become more prevalent, so I'd be inclined to implement it like that and run with it. (Though I realise it's not the best solution.)
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Nao le 30 Mars 2012 à 15:19
It's just that, I like having my dropdown without any scrollbar. I find this more natural... More natural, even, than the iOS implementation.
Posté : 30 Mars 2012 à 15:19

BTW, only 5 commits left before we reach 300 commits (together) for the first quarter :)
We've already broken our record by far, anyway!
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Arantor le 30 Mars 2012 à 15:21
Hmm, iOS' implementation is pretty natural, as it only shows you the scrollbar as you're scrolling, but I've wondered if there shouldn't be a visual cue that the selection area is larger than what's currently displayed.

And woohoo! 2012 is very definitely shaping up to be a helluva year for both of us!
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Nao le 1er Mai 2012 à 22:26
So.. I was thinking about this topic after noticing that Facebook's iOS app had a perfectly usable scrollbar in their notification area (so many things to do, so few things I actually remember to do later...), and decided to implement Dragooon's code for a try.

It's live here, and it's only 28 extra bytes to sbox.js (gzipped), so I'll certainly be keeping it... It seems to work just like on Facebook, I didn't think it would feel so natural to simply scroll by tapping and moving around in that place, but it does have one drawback... Try it on the Quick Access box. When you're moving the finger, it will 'naturally' highlight a few entries, even though I'm not actually selecting them... And if I release my finger, it'll immediately pick an entry and then proceed to run it. Which isn't good... It's probably good on other sboxes, but not this one, and I need a more 'generic' solution.
I'm sure it can be solved with another event or something that is touch-centric. Any ideas?
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Dragooon le 5 Mai 2012 à 19:53
One idea to be unbind the click/hover events on start and bind them again at end. Should be a couple more lines.
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Nao le 6 Mai 2012 à 18:13
This would force me to add a touchend event, wouldn't it..?
And which one would I have to disable, do you reckon?
$items.not('.disabled').mousedown(clickSBItem), I suppose?

Wondering if it wouldn't be simpler to just turn it into a mouseup event... Maybe touch devices are less picky when it comes to mouseup... I don't know. I'd have to check on quirksmode.org, I think it lists all events triggered on touch for all touch devices...
Titre: Re: [Bug] Select menu is slightly broken on touch screens
Posté par: Dragooon le 7 Mai 2012 à 17:22
Yeah, something like this(Not tested)

Code: [Sélectionner]
$items = $dd.children().not('.optgroup');
$dd[0].addEventListener('touchend', function(e)
{
$items.mousedown(clickSBItem);
});
$dd[0].addEventListener('touchmove', function(e)
{
scrollTo(startPos - e.touches[0].pageY + iTouch);
e.preventDefault();
});
$dd[0].addEventListener('touchstart', function(e)
{
iTouch = e.touches[0].pageY;
startPos = parseInt($thumb.css('top') || 0);
$items.unbind('mousedown');
});

Not entirely sure about the mouseup thing, I think it'l still fire but I haven't experimented with that.