CODEWITHSUNDEEP
cordovainappbrowserhammer.js
Yasitha Lokunarangoda
Yasitha Lokunarangoda

Reputation: 63

Hammer.js swipe not working with Cordova InAppBrowser

I have a hosted website which uses Hammer.js for swipe functions. The swipe functions works fine in both desktop and mobile browsers but does not work on Cordova InAppBrowser (cordova-plugin-inappbrowser).

Cordova application:

var ref = cordova.InAppBrowser.open('http://10.200.200.210:80/#dashboard', '_blank', 'location=no,clearcache=yes,clearsessioncache=yes,hidenavigationbuttons=yes,hideurlbar=yes');

Web Application (Knockout.js/html) 

        var events = ['tap', 'doubletap', 'hold', 'rotate',
     'drag', 'dragstart', 'dragend', 'dragleft', 'dragright', 'dragup',
     'dragdown', 'transform', 'transformstart',
     'transformend', 'swipe', 'swipeleft', 'swiperight',
     'swipeup', 'swipedown', 'pinch', 'pinchin', 'pinchout'];

        ko.utils.arrayForEach(events, function (eventName) {
            ko.bindingHandlers[eventName] = {
                update: function (element, valueAccessor) {
                   // var BindingContext = valueAccessor()[0];
                    var EventToFire = valueAccessor()[0];

                    var options = {
                        dragLockToAxis: true,
                        dragBlockHorizontal: true
                    };

                    var hammerTime = new Hammer(element, options);
                    hammerTime.on(eventName, function (ev) {
                        //Fire the event with the item it was bound to.
                        EventToFire();
                    });
                }
            };
        });
<table width="100%" border="0" cellspacing="0" cellpadding="0" data-bind="swipeleft: [SwipeLeft], swiperight: [SwipeRight]">
        <tr>
            <td>
                 <input type="text" data-bind="value: customer.name, valueUpdate: 'afterkeydown'">
            </td>
            <td>
                 <input type="text" data-bind="value: customer.code, valueUpdate: 'afterkeydown'">
            </td>
            <td>
                 <input type="text" data-bind="value: customer.description, valueUpdate: 'afterkeydown'" style="width: 295px">
            </td>
        </tr>
</table>

Upvotes: 1

Views: 813

Answers (2)

Yasitha Lokunarangoda
Yasitha Lokunarangoda

Reputation: 63

The issue was due to caching. It was fixed once I uninstall and reinstall the android application on my device. Thank you.

Upvotes: 0

andreszs
andreszs

Reputation: 2956

Hammer.js? That brings back bad old memories.

All my swipe problems have been solved the switched to jQuery's event.swipe library. Feel free to try it, I use it on all environments (Cordova, iOS, Android, Windows Phone, etc.) with great success.

I also created a modified version that supports the new PointerEvents as well, that might or might not work better, check it out here. This one is for horizontal scrolling only.

Upvotes: 1

Related Questions