Scrolling lists of the draggable items

[ZwS]

If there is a lot of items in the sidebar and scroll appears, there is no way to scroll this list down. One finger gestures trigger dragging the items, two- and mode fingers gestures do nothing. Similar behavior is observed in the dnd5e sheetm however in this case it could be workarounded by dragging by the empty space of the sheet.

[Aioros]

Thanks, v2.0.13 is out now with some simple buttons at the bottom of the sidebar to scroll up or down when necessary. Let me know if you have any issues after updating the module.

[ZwS]

Thank you for quick response. Buttons appear to me, but only if I open directory first, then go to another sidebar tab and go back where I was previously. Maybe it is important to mention that I'm using Foundry v11.

[ZwS]

Another thing I've noticed - in compendium tab compendium labels overlap buttons preventing them from being clicked.

[Aioros]

Reopening this while we figure this out: can you try updating the module again (2.0.14)? The overlap should definitely be fixed now, but I'm curious to see if the buttons now appear correctly on load for you.

[ZwS]

Buttons still appear only after switching tabs. I've tried to debug added code. Seems event renderDirectoryApplication never happens. Maybe, it would be better to permanently show buttons at the bottom of the sidebar? The issue with compendium gone.

[Aioros]

That's strange, the renderDirectoryApplication hook fires for me on all sidebar tabs when the page loads. I'm testing on v11.315, I assume that's the same version you're on?

[ZwS]

Yes, version matches, but the hook does not firing. I've also tried module in the fresh world on v12 with only TouchVTT module enabled and result is the same for me. Also, device rotation does not cause buttons to appear.

[Aioros]

Well, it seems like I have some research to do. One thing I'll definitely want to do is place the buttons at the top, because on small displays they might actually be out of screen without other modules like Mobile Improvements. In the meantime, do you have a way of checking if the renderDocumentDirectory hook fires for you for the sidebar tabs?

[ZwS]

I've set CONFIG.debug.hooks = true to check what hooks called and when.

I can observe that renderDocumentDirectory is triggered on early initialization stages, right after the Foundry VTT | Retrieved and compiled template templates/sidebar/document-directory.html message appears. Another occurences happen on directery creation and removal. Expanding/collapsing directiroes does not trigger any hooks.

I'm not sure how complex it might be, but is it possible to shrink the draggable area of the items? Maybe add some handlebars?

modules like Mobile Improvements

Just curious, don't you plan to adopt/incorporate this module? It seems unmaintained and it's styles are out of date. I have some fixes for it to make it usable with the D&D5e v3 and modern Foundry though, but I'm no good in CSS to make it polished.

[Aioros]

I might just use renderDocumentDirectory in addition to renderDirectoryApplication and changeSidebarTab, and that will probably cover all cases, even if I'm still curious as to why that would be different. Maybe we use different systems (I'm usually on dnd5e), and the system is doing some trickery with prototypes there?

I thought about creating some space on the side to allow regular scrolling, but it would not be obvious to a user, and horizontal space is kinda precious on many devices that use this module.

About Mobile Improvements... I would love to be an actual collaborator there, but I'm not sure that the owner is interested. He did incorporate my PR recently though, so there is an unstable, v12-compatible version on their gitlab repo that I highly recommend to anybody on a small screen.

[ZwS]

I thought about creating some space on the side to allow regular scrolling, but it would not be obvious to a user, and horizontal space is kinda precious on many devices that use this module.

Here is the concept of what I mean. Drag'n'drop initiated only if touch/click was started on the handlebar. All other space is available for scrolling. This also might resolve behavior when sometimes 'touch and hold' still initiates dragging instead of opening context menu.

document.querySelectorAll('#sidebar li[draggable="true"].directory-item.document').forEach(element => {
    element.draggable = false;
    let handlebar = document.createElement("i");
    handlebar.className = "far fa-grip-dots-vertical";
    handlebar.style.cssText = "height: var(--sidebar-item-height); width: 15px; flex: 0 0 auto; font-size: 2em; padding-top: 11px;";
    handlebar.addEventListener("mousedown", e => {
        e.currentTarget.parentNode.draggable = true;
    });
    handlebar.addEventListener("touchstart", e => {
        e.currentTarget.parentNode.draggable = true;
    });
    handlebar.addEventListener("mouseup", e => {
        e.currentTarget.parentNode.draggable = false;
    });
    handlebar.addEventListener("touchend", e => {
        e.currentTarget.parentNode.draggable = false;
    });
    element.prepend(handlebar);
});

document.querySelectorAll('#sidebar li[draggable="true"].directory-item.folder').forEach(element => {
    element.draggable = false;
    let handlebar = document.createElement("i");
    handlebar.className = "far fa-grip-dots-vertical";
    handlebar.style.cssText = "line-height: 24px; width: 15px; flex: 0 0 auto; font-size: 2em;";
    handlebar.addEventListener("mousedown", e => {
        e.currentTarget.parentNode.draggable = true;
    });
    handlebar.addEventListener("touchstart", e => {
        e.currentTarget.parentNode.draggable = true;
    });
    handlebar.addEventListener("mouseup", e => {
        e.currentTarget.parentNode.draggable = false;
    });
    handlebar.addEventListener("touchend", e => {
        e.currentTarget.parentNode.draggable = false;
    });
    element.getElementsByTagName("header")[0].prepend(handlebar);
});

// could be potentially used for the lists inside the character sheets

He did incorporate my PR recently though, so there is an unstable, v12-compatible version on their gitlab repo that I highly recommend to anybody on a small screen.

Oh, I didn't know that there were some updates in unstable branch, I'll definetly will check them, thanks! I'll post custom CSS I use on the Mobile Improvements issue tracker. I could ping you if you are interested.

[Aioros]

Oh wow, that's actually a pretty cool solution. I'll play around with it and see how it turns out.

[Aioros]

Well, version 2.1.0 is out now with the suggested behavior (except that the free version of the Font Awesome icon is a little uglier). Let me know what you think.

[ZwS]

Everything looks fine for me. The only thing I noticed that for the compendiums there are no handles, but overall it looks and works great!

[Aioros]

Nice, I'll see if I can fit compendiums in this too before closing the issue. Thanks again for your help!

[Aioros]

I do see handles for compendiums too. Can you show me an example of a missing one?

[ZwS]

Here is what I can observe. Folders have handles, but compendiums don't

[Aioros]

Alright, this should be fixed now in v2.1.3. I'll close the issue, but let me know if something doesn't look right.