Jump to content
Search Community

Draggable Crashing Ionic 2 / Cordova

TheAlexPorter test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi everyone,

 

I'm experiencing odd behavior. Whenever I reference Draggable ANYWHERE in my Ionic 2 app, Cordova crashes and throws this error:

 

"Uncaught TypeError: Cannot read property 'toLowerCase' of undefined" (screenshot included below).

 

When I run the code in the browser doing "ionic serve", draggable works and everything is great. On the emulator or build, the app crashes. If I remove / comment out draggable, the app runs. There isn't any issue with TweenLite, just Draggable.

 

Has anyone else experienced this before?

Screen Shot 2018-03-02 at 11.06.51 AM.png

Link to comment
Share on other sites

This looks like an issue with a call an event listener in Cordova ... perhaps passing a null event since cordova calls the toLowerCase method within the event listener on the event itself.

 

Look in any event listener and you'll see

 

var e = evt.toLowerCase();

 

What does your main.js line 149487 look like?

  • Like 2
Link to comment
Share on other sites

Yeah, I'm kinda curious - is it problematic in Cordova to add a listener for an event type that doesn't exist? That's the only thing I can think of that may be happening there, like a "touchstart" on a non-touch device(?). I wouldn't expect that to be problematic because if there is no such event, then there simply won't be any dispatched, but perhaps Cordova doesn't handle that properly? 

Link to comment
Share on other sites

I think I see the problem and I can just add " || type" after the event lookup. In other words:

//BEFORE:
element.addEventListener(_touchEventLookup[type], func, capture);

//AFTER:
element.addEventListener(_touchEventLookup[type] || type, func, capture);


Here's an uncompressed version with that edit in place: 
https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable-latest-beta.js

 

Does that resolve things for you? 

  • Like 3
Link to comment
Share on other sites

Thank you everyone for your quick responses! I've added the modified version of Draggable like you suggested. When I click, my element moves, once, then this same error fires, but on a different line in Cordova (see attached image).

 

Seems to be something with the "onPress" method. I tried rolling back to GSAP version 1.19.1 and these errors go away, even without the update to Draggable. That version doesn't have the same rotationOrigin that the latest 1.20 version has, so I can't implement the nice rotate to clicked point feature.

 

Thats really what I'm trying to get working. Any ideas on that? Is it possible to wire up the rotationOrigin a different way on version 1.19.1?

 

Note: I can't make any lasting changes to cordova.js. It always fixes itself.

Screen Shot 2018-03-05 at 11.11.02 AM.png

Link to comment
Share on other sites

I was using NPM and updated the file wrong. I reinstalled version 1.20.4 and then added your fix to node_modules/gsap/Draggable.js:

 

element.addEventListener(_touchEventLookup[type] || type, func, capture);

 

Now it's working great! Thank you so much for your help :-D

  • Like 2
Link to comment
Share on other sites

  • 1 month later...

I followed the above steps. However, I am getting this now:

Cannot find module "../TweenLite.js" even tho it obviously exists.

 

Adding this however, fixes the issue (at the end of Draggable.js):

//export to AMD/RequireJS and CommonJS/Node (precursor to full modular build system coming at a later date)
(function(name) {
    "use strict";
    var getGlobal = function() {
        return (_gsScope.GreenSockGlobals || _gsScope)[name];
    };
    if (typeof(module) !== "undefined" && module.exports) { //node
        require("gsap/TweenLite.js");
        require("gsap/CSSPlugin.js");
        module.exports = getGlobal();
    } else if (typeof(define) === "function" && define.amd) { //AMD
        define(["gsap/TweenLite", "gsap/CSSPlugin"], getGlobal);
    }
}("Draggable"));
Edited by Curly Brackets
Added possible solution
Link to comment
Share on other sites

  • 1 month later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...