WagnerMatosUK WagnerMatosUK - 4 months ago 43
iOS Question

How to enable double tap on an Angular Js application

I've created an application which enables the user to double click on an item to edit. I'd like to allow the same functionality on mobile devices, meaning the user would double tap to edit the item.

What is the simplest way to implement this? I'd rather not use any additional library (I have heard of Hammer and AngularTouch but haven't used neither before) nor jQuery (in my app I completely forgone jQuery).

If there the only way to implement this is using a library, what would be lightest and easiest?

Many thanks

EDIT: Adding code
This is my controller for editing the item:

// Double click to edit products
$scope.editItem = function (item) {

item.editing = true;

};

$scope.doneEditing = function (item) {

item.editing = false;
$http.put('/api/users?id' + $scope.User.id, $scope.User);

};

$scope.cancelEditing = function (item) {

item.editing = false;

};

$scope.deleteItem = function (item) {

delete $scope.User.todos[item.id];

$http.put('/api/users?id' + $scope.User.id, $scope.User);

};


And this is the my template (Jade)

p(ng-dblclick="editItem(todo)", ng-hide="todo.editing").todo-title

span {{todo.content}}

form(ng-submit="doneEditing(todo)" ng-show="todo.editing", class="inline-editing-2")

input(type="text", class="form-control", ng-model="todo.content")

div.btn-block

button(class="btn btn-success mr-1", ng-show="todo.editing", ng-click="cancelEditing(todo)")

span(ng-click="doneEditing(todo)").fa.fa-check-circle

button(class="btn btn-warning mr-1", ng-show="todo.editing", ng-click="cancelEditing(todo)")

span(ng-click="cancelEditing(todo)").fa.fa-times-circle


So as you can see I use ng-doubleclick to fire my function. I'd need something like ng-double-tab to fire up the double tap. I've been reading more about Hammer and will use Angular Hammer for double tap but I'm not sure how it works...

Answer

You can use ios-dblclick, a directive I wrote to handle double click event on mobile browser (write it for iOS, but works on other browsers). It has no dependency and works like ng-dblclick. It's available here on Github.

Here's an example

<div ios-dblclick="removePhoto()"></div>

Here is the code of this directive

app.directive('iosDblclick',
    function () {

        const DblClickInterval = 300; //milliseconds

        var firstClickTime;
        var waitingSecondClick = false;

        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                element.bind('click', function (e) {

                    if (!waitingSecondClick) {
                        firstClickTime = (new Date()).getTime();
                        waitingSecondClick = true;

                        setTimeout(function () {
                            waitingSecondClick = false;
                        }, DblClickInterval);
                    }
                    else {
                        waitingSecondClick = false;

                        var time = (new Date()).getTime();
                        if (time - firstClickTime < DblClickInterval) {
                            scope.$apply(attrs.iosDblclick);
                        }
                    }
                });
            }
        };
    });