Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sliding user experience not "as used to" on iPhone #6

Open
RobIsHere opened this issue Aug 22, 2016 · 1 comment
Open

Sliding user experience not "as used to" on iPhone #6

RobIsHere opened this issue Aug 22, 2016 · 1 comment

Comments

@RobIsHere
Copy link

Hi! We use ember-side-menu in our video editor application and cordova app. Thanks for sharing!

On IPhone 6s (my test device), iOS 9.3 the slide to open and slide to close action needs dragging across half of the menu width until the threshold is reached.

I noticed, that changedTouches on touchEnd contains the same pageX as the start event most times. But the current pageX is given as originalEvent.pageX in iOS.
=> velocityX = 0 most times => threshold passed 50%? complete : abort

This feels a little bit jerky. So i tried to improve it. It is not tested in the field yet, only on three devices and chrome. Maybe i post an update later. The current solution is to change _completeMenuTransition to this:

    _completeMenuTransition(event) {
        const progress = get(this, "progress");
        const touchStartEvent = get(this, "touchStartEvent");
        const side = get(this, "side");
        const velocityX = this._calculateVelocityX(
            touchStartEvent.originalEvent.touches[0].pageX,
            touchStartEvent.originalEvent.timeStamp,
            typeof event.originalEvent.pageX !== "undefined"? event.originalEvent.pageX : event.originalEvent.changedTouches[0].pageX,
            event.originalEvent.timeStamp
        );
        const minClosingVelocity = 0.000001;
        const isSwipingLeft = velocityX > minClosingVelocity;
        const isSwipingRight = velocityX < -minClosingVelocity;

        const isClosingMovement = (side === "left" && isSwipingLeft) ||
            (side === "right" && isSwipingRight);
        const isOpeningMovement = (side === "left" && isSwipingRight) ||
            (side === "right" && isSwipingLeft);

        if (isClosingMovement) {
            get(this, "sideMenu").close();
        } else if (isOpeningMovement) {
            get(this, "sideMenu").open();
        }
    },
@tsubik
Copy link
Owner

tsubik commented Aug 24, 2016

@RobIsHere thanks for reporting this. If only I find some time I will investigate this.

@tsubik tsubik closed this as completed Apr 14, 2017
@tsubik tsubik reopened this Apr 14, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants