Web Interface - Context Menu From Touch Devices

[smwa]

I often use the "Trash Data and Remove From List" option in the context menu from the web interface. I cannot get the context menu to work from my phone.

It might be possible to upgrade to the newest contextmenu version to solve this. Otherwise I would vote to add listeners for touch events.

An alternative might be adding the same options in the info pane somewhere.

Has anyone else found this to be an issue?

[smwa]

It seems that when the contextmenu was implemented, they expected to use the "taphold" menu(per the "taphold: true" in transmission.js), but that library has not been included

[sebastian-king]

I'm very interested in this too, I tried adding the taphold.js library to the website, however it does not appear to work on touch devices for me--it worked fine on desktop browsers. It will likely need some debugging to make it work with the torrent rows. When I have some spare time I will start work on this.

[sebastian-king]

I've got a rudimentary working version. The context menu appears when pressing on a torrent in the list for 0.75 seconds.

This in it's current state is kind of a workaround though, it needs to be cleaned up, the code put in the correct places, and more testing is needed to find bugs. I will do all of this and eventually when it is ready I will make a PR.

There is already one noticable bug which is that it seems it doesn't work if I press on the bottom right part of the torrent row. Any testing/bugs feedback would be appreciated.

Note: this does not require or use the taphold.js or jquery-mobile.js libraries.

Added this to main.js (I know it is not supposed to go there, but it works for now).

    var timer;
    var taphold;

    $("ul.torrent_list").on("touchstart", "li.torrent", function(e) {
            taphold = false;
            timer = setTimeout(function() {
                    taphold = true;
                    $("ul#torrent_list").contextmenu("open", $(e.target).closest('.torrent_name'));
            }, 750);
    });

    $("ul.torrent_list").on("touchend", "li.torrent", function(e) {
            if(taphold) {
                    e.preventDefault();
            } else {
                    clearTimeout(timer);
            }
    });

Add this to common.css (to stop the text being highlighted instead of the tap and hold effect):
[this probably should only be run on the mobile version, but I kind of like the behaviour on the desktop version and it stops highlighting torrent names when I double-click]

  .torrent_list {
             -webkit-touch-callout: none; /* iOS Safari */
             -webkit-user-select: none; /* Safari */
             -khtml-user-select: none; /* Konqueror HTML */
             -moz-user-select: none; /* Firefox */
             -ms-user-select: none; /* Internet Explorer/Edge */
             user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
   }

And last, taphold: true should probably be changed to taphold: false in the transmission.js file just to avoid conflicts.

If you use it please provide feedback!

[smwa]

Thanks for the work @sebastian-king!

I hate to have to add our own event listeners, but if contextmenu.js isn't handling it properly then this looks nice to me.

"var taphold" and "var timer" might be better named "var isTouchStarted" and "var timerLongTouch", or something else more descriptive.

I'm sure you understand the transmission web code better than I. Would you put the 2 functions(on 'touchstart' and on 'touchend') into functions on the transmission.js class? This would let you put only 2 calls into main.js. I suppose they would look like:

document.getElementById("torrent_list").addEventListener("touchstart", transmission.listTouchStart); document.getElementById("torrent_list").addEventListener("touchend", transmission.listTouchEnd);

[zmwangx]

I ran into this myself on my iPad just now. Contrary to @sebastian-king's experience, I added https://cdn.jsdelivr.net/npm/ui-contextmenu@1.18.1/lib/jquery-taphold/taphold.js and it immediately worked, not sure if he was using a bad version or had an incompatible browser.

Anyway, I submitted #774. Not really expecting it to be merged, but hopefully it may help someone else.

[abercrave]

I had actually added taphold.min.js myself independently and can confirm @zmwangx's PR #774 will work perfectly. With the plugin in place iOS Chrome and Safari display the expected contextual menu.

[sameignatovich]

Hello everyone.
I just tried to tap and hold, but Safari begins to highlight context.
Can you add some button/dots/burger for context menu on each torrent?

[mfedoseev]

Hi! Same here. Cannot open the context menu from mobile Safari. It just starts to highlight text and progress bars. So I'm unable to verify or trash local data… Hoping for a fix?

[ckerr]

The web client refresh in #1476 fixes this. It will be included in the next stable release and is available now in the nightly builds.

[michaelkrieger]

To confirm, am I supposed to be able to bring up a context menu to change folders or similar from iOS Safari on an iPad or iPhone?

[ckerr]

Should be able to, yeah

[beville]

This works on my Android phone. In Chrome browser, I’m able to long press on an item, and I get the context menu.

However, on my iPad, in Safari, the long press only selects text and the progress bars.

Running 4.0.2.

[cwanja]

Can confirm that pressing and holding on an item does not bring up a context menu at all. Neither does pressing and holding on a button.

[slokhorst]

@cwanja what browser, operating system, and version of Transmission are you using?

[cwanja]

@cwanja what browser, operating system, and version of Transmission are you using?

@slokhorst iOS 16.5, Safari, 3.0. Transmission runs on an Ubuntu host.

[slokhorst]

It seems like the new implementation uses the contextmenu event to detect a right click/long press. This is event is supported on all browsers, except for Safari on iOS (as of version 16.5).

So, in order to get this working on (the current) Safari on iOS, a workaround would need to be implemented.

[iamrgroot]

It seems like the new implementation uses the contextmenu event to detect a right click/long press. This is event is supported on all browsers, except for Safari on iOS (as of version 16.5).

So, in order to get this working on (the current) Safari on iOS, a workaround would need to be implemented.

I cannot find any reference to this in open issues. Is this being worked on and am I missing something or should I open a new issue?

[Rukario]

It never worked in iPadOS/iOS. I'm waiting for #5827 to ship then there'll be another PR focused on bringing context menu to touch devices featuring iPad and iPhone.