search

AviKKi / hover-preview

A vanilla js library to show preview images on hover
7 stars 17 forks source link

Does not work well in mobile devices #10

Open AviKKi opened 3 years ago

AviKKi commented 3 years ago

mouseenter event is only registered on a tap, using pointerenter and pointerleave may help

yhau1989 commented 3 years ago

pointerenter and pointerleave is not supported in Safari/Safari IOS

AviKKi commented 3 years ago

@yhau1989 can you suggest a solution? If you want to solve this I can assign it to you.

yhau1989 commented 3 years ago

in mobile the UX concept is touch (click) or slider automatic

AviKKi commented 3 years ago

I get what you are saying, it's how mobile YouTube app shows preview on scrolling, the video on top automatically starts preview.

But it won't work for my use-case, we are using 2 column grid. A expected behavior on mobile is when user touches(not click) over a thumbnail, it should start the preview.

A touch and a click are different, if you tap on the screen it's a click but if you touch and hold for a bit longer, it won't trigger click event; we want to trigger preview in this case.

As library grows we can add more configurations, but for now I'm focusing on this.

PS: My client has suggested that pornhub.com has this type of UX for thumbnail preview

yhau1989 commented 3 years ago

@AviKKi haha pornhub.com is good case study, this events is activated when scroll is moving up or down, used id # by example

AviKKi commented 3 years ago

I'll dig into what event listeners they are using when I get the time. Your suggestion makes a lot sense.

yhau1989 commented 3 years ago

I am work in a demo 🕙

yhau1989 commented 3 years ago

my proposal is done , check out here in your📱

AviKKi commented 3 years ago

@yhau1989 this doesn't seem to be working

Edit - I had to resize my window for it to work.

I'm summing up your approach for future reference.

  • store y coordinate of all the img elements
  • when scrolled check the img that coincides with +-10 range for window.scrollY, if found start it's preview.

my remarks and opinion -

  • When there are multiple column, only the image on last column will work, as only one preview works at a time, last will override previous ones.
  • Images at the bottom of a page won't work, this will work best for infinite scroll behavior.
  • Instead of looping through images, we can optimize it with binary search / set (but there is payload overhead).

PS: This seems more like youtube app's logic, I'll reverse pornhub's code later(when I get some :alarm_clock: ) to see how they are doing it.

yhau1989 commented 3 years ago

Of course, my change is focus in mobile version, but responsive design needs to be improved