Skip to content
This repository was archived by the owner on Sep 8, 2020. It is now read-only.
This repository was archived by the owner on Sep 8, 2020. It is now read-only.

Chevron buttons are unreliable for touch usage #93

Description

@groberts9

It is difficult to trigger the click action on the chevron buttons using touch, using Chromium on Microsoft Surface Pro & Webkit on iPAD - I suspect this problem will occur on any touch platform.

My application uses angular-touch. I guess that the problem observed is related to the use of this particular component.

A quick double-click speed action may trigger a click; a longer touch never triggers a click.

It is not clear to me why this is occurring as I do not have this problem with code I have written for the same platforms that combines both drag and click handling on the same element.

As a workaround rather than a cure, I used the touchend event to trigger a click. The code is fussy about which element it operates upon, as any page element seems to be capable of triggering a touchend event in the ui-layout handler - this does not sound right to me.

The main changes for this workaround are applied to the mouseup / touchend handler as follows:

            htmlElement.on('mouseup touchend', function (event) {
                scope.$apply(angular.bind(ctrl, ctrl.mouseUpHandler, event));
                htmlElement.off('mousemove touchmove');

                if (event.type === "touchend") {
                    var touchMoveDistance = Math.abs(ctrl.lastPos - ctrl.startPos);

                    if (event.target.tagName === "A" &&
                        event.target.children.length === 1 &&
                        event.target.children[0].className.indexOf("glyphicon-chevron") !== -1 &&
                        touchMoveDistance < 5) {

                        $(event.target).trigger("click");

                    } else if (event.target.tagName === "SPAN" &&
                        event.target.className.indexOf("glyphicon-chevron") !== -1 &&
                        touchMoveDistance < 5) {

                        $(event.target.parentNode).trigger("click");
                    }
                }
            });

I am sure this could be coded better, but it works. I did not succeed in calling directly the appropriate click handler, as the ctrl variable in this event handler does not contain the correct data.

I added the following to the touchstart handler, to allow calculation of touch move distance, as I did not want the click action to trigger when the user drags the splitbar:

                if (e.originalEvent && e.originalEvent.changedTouches) {
                    ctrl.startPos = e.originalEvent.changedTouches[0][ctrl.sizeProperties.mouseProperty];
                    ctrl.lastPos = ctrl.startPos;
                }

To support this, I added the following to the controller, renaming the original lastPos and all its references:

    ctrl.startPos = 0;
    ctrl.lastPos = 0;

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions