Page MenuHomePhabricator

Solve and fix why file selection wont work in mobile view
Open, Needs TriagePublic

Description

As part of mobile review T389723 was detected that selection doesnt work. Task is to fix the selection.

Details

Other Assignee
Shellygarg10

Event Timeline

Also @Zache , one more issue I just noticed upon opening an image in a by not going through the link and just clicking on it to view it's zoomed up version Cat-a-lot widget hides the small button to go back to the license of the image, I will try to tackle this as well and keep you posted. Thank you!

image.png (853×491 px, 327 KB)

This issue is not just for the mobile view but also for the desktop view I'll try to fix it too after looking into the above task and share updates.

image.png (228×1 px, 20 KB)

this.labels.on('click.catALot', function () {
    $(this).toggleClass('cat_a_lot_selected');  // Toggle selection
    CAL.updateSelectionCounter();  // Update the UI
});

$(document).ready(function () {
   CAL.makeClickable();
});

I have added the above two functions in the existing codebase. The updated makeClickable() function ensures that file selection works consistently on both desktop and mobile.

Previously, clicking on a file did not immediately select it, and selection only worked after an alert appeared. To fix this, an event listener was added using this.labels.on('click.catALot', function () { ... }), which toggles the cat_a_lot_selected class on click, ensuring that files are selected immediately.

Additionally, CAL.updateSelectionCounter(); was added to update the UI dynamically when selection changes. A key issue in mobile was that selection only worked after performing another action first, which was resolved by re-attaching event handlers on page load using $(document).ready(function () { CAL.makeClickable(); }). This ensures that the click event is properly initialized from the start.

With these fixes, files are selected on the first click, the selection counter updates correctly, and the selection mechanism now works reliably across different devices.

Also upon clicking on a file it's get deselected and the counter keeps updating as a file is selected or deselected which was earlier not working properly both for desktop and mobile versions where the counter and selections were not functioning on mouse click and now for mobile devices this file selection shall be enabled through touch too.

Please review and let me know, thank you!

Demo link
Please check out this video for the demo of the implemented changes @Zache .
Thank you!

Thank you! It seems. there is now something what i am missing propably because the change or problem works differently in my devices.

However one note related to your fix:

If this fixes it, then the issue is a race condition and executed in wrong order (i.e., ie because this re-running makeClickable() probably fixes it, but running it doesn't fix the root cause of the bug)

$(document).ready(function () {
   CAL.makeClickable();
});

Question: Could you also make a video without the fix so I can see how the bug behaves on your device?