Svelte-gantt is not compatible in mobile mode

[leCheveuCodeur]

Hello,

Would it be possible to add the mobile equivalents of click/move/etc... events on the actions that svelte-gantt manages ?

Thanks in advance!
Great job by the way!

[leCheveuCodeur]

While waiting for a native solution, I managed to find a piece of code that I've updated:

      `var init = function() {
            document.addEventListener('touchstart', handler, true);
            document.addEventListener('touchmove', handler, true);
            document.addEventListener('touchend', handler, true);
            document.addEventListener('touchcancel', handler, true);
        };

        var handler = function(event) {
            var touch = event.changedTouches[0];

            // Use new MouseEvent instead of initMouseEvent
            var simulatedEvent = new MouseEvent(
                { touchstart: 'mousedown', touchmove: 'mousemove', touchend: 'mouseup' }[event.type],
                {
                    bubbles: true,
                    cancelable: true,
                    view: window,
                    detail: 1,
                    screenX: touch.screenX,
                    screenY: touch.screenY,
                    clientX: touch.clientX,
                    clientY: touch.clientY,
                    ctrlKey: false,
                    altKey: false,
                    shiftKey: false,
                    metaKey: false,
                    button: 0,
                    relatedTarget: null
                }
            );

            touch.target.dispatchEvent(simulatedEvent);
        };

        // Call the init function to activate event listeners
        init();`

Source link: https://stackoverflow.com/questions/19283780/draggable-is-blocking-touch-event

[ANovokmet]

Thank you, I will apply the changes you suggest.

[leCheveuCodeur]

And what would be great and what I can't manage to do at the moment, would be to manage to enlarge in height and top a task by 50% only when it's mobile on touchstart and touchmouve to help users on tablets and mobiles who don't use tactile pen.

[ANovokmet]

And what would be great and what I can't manage to do at the moment, would be to manage to enlarge in height and top a task by 50% only when it's mobile on touchstart and touchmouve to help users on tablets and mobiles who don't use tactile pen.

What does it mean to top a task by 50%? I suggest you listen to the window size changes and set the task and row height appropriately.

[leCheveuCodeur]

The goal isn't to make everything bigger, but just to assist the user on a cell phone, based on event touch, by slightly magnifying the task to help him see what he's typing and modifying, a bit like this example where I unfortunately didn't manage to keep the drag&drop management...

[ANovokmet]

Right, thank you for the explanation. I test with this CSS, and seems to be working right:

.sg-task.moving, .sg-task-selected {
    scale: 1.5;
}

Does this help you? You can even add .sg-task { transition: all 0.2s; }

[leCheveuCodeur]

I'm having trouble rewriting the style in js because I'd forgotten the scale rule in css. 😢
On second thought, maybe it's not a bad idea to make the rowHeight a bit bigger from the start if you're on mobile to help with aiming.

Thanks ANovokmet 👍

[ANovokmet]

Interactions with the gantt on mobile devices still do not work.

[ANovokmet]

Interactions on mobile fixed with v4.3.0