Problems in Drag & Drop while moving to Onsen 2

[Fran Diox]

@CNaik Yes, sorry, it was more like a confirmation than a work around. Probably certain things won’t work properly, like ripple effect in Material Design I think.

[CNaik]

@Fran-Diox ah… little worrying.

Is there a way to switch it OFF and back ON when needed? I tried setting enabled property of document.body._gestureDetector but it didn’t help.

Say we have a navigation controller within a splitter content. While pushing a specific page we would like to switch OFF this global gesture detector so to make drag and drop working. And would switch it ON with the pop of that page so that we can take benefit of the features like ripple and such others in remaining part of the application.

Regards,
CNaik.

[munsterlander]

@CNaik : Have you tried document.body._gestureDetector.setup()? I am truly curious if this works based on what is in onsenui.js.

[CNaik]

@munsterlander just tried as you suggested. Console shows an error “document.body._gestureDetector.setup is not a function.”

Kindly share if you have any other thought.

Regards,
CNaik.

[munsterlander]

@CNaik I didn’t think that Setup() was exposed as a function but I thought it worth a try. The register function is exposed, but I think you have to do it for each gesture that you want to register. @Fran-Diox and team will be able to answer much better than I, as I am simply digging into the Onsenui.js file. I am trying to get a better understanding of the components. Apologies for giving you a false lead.

[CNaik]

@Fran-Diox I would like to have your thoughts on whether it’s possible to switch ON / OFF gestureDetector on demand? As detailed in my earlier post 2 days back in this thread.

Regards,
CNaik.

[munsterlander]

@CNaik If you need immediate assistance, the Onsen technical support is the more appropriate avenue. Their team responds amazingly fast!

https://monaca.io/service/index.html

Advanced Technical Support / Code Review

For advanced technical support and partial code review we provide ticketbased support to Monaca users. Our professional team will help you solve the issues in your program or provide specific sample code, based on your needs. Please use this option when you require immediate response from our team.

[Fran Diox]

@CNaik @munsterlander Since I’m living in Tokyo our online time is probably quite different :sweat_smile:

This is a bit complex problem and we will think how to manage it internally in Onsen UI. For now, since I guess it can work for your application, maybe you can dispose it and then create the GestureDetector again.
document.body._gestureDetector.dispose(); and document.body._gestureDetector = new ons.GestureDetector(document.body); should do the trick.

[CNaik]

@Fran-Diox Thank you very much. That’s what I was looking for.

Timing is not a problem. :blush: There is no urgency as this is not a project with critical deadline. We are evaluating Onsen UI by doing one real project.

Regards,
CNaik.

[Fran Diox]

@CNaik I hope you like it so far :relaxed:
We just finished most of the reference docs. I think the webpage will be updated in few hours.

[CNaik]

@Fran-Diox yes, I do. It makes our life very easy. Having updated reference docs will be very helpful.

Thanks a ton for everything.

Regards,
CNaik.

[CNaik]

@Fran-Diox need your advice in this matter as got stuck again.

The work around you gave is working fine on a single page. I have updated the demo ( http://codepen.io/CNaik/pen/pyraoa ) to have related buttons.

BUT it doesn’t work when the content is inside splitter, drag and drop stops working in that case. Here is another sample demonstrating the problem - http://codepen.io/CNaik/pen/xVYEmd

HTML related to drag and drop and controller codes are same. I have also made sure that controller function to disable gesture detector is being called.

Hope you have workaround :) Otherwise will have to do weird adjustment in the application. Kindly let me know.

Regards,
CNaik.

[Fran Diox]

@CNaik There are some components like ons-splitter-side and ons-pull-hook that have their own GestureDetector because it’s slightly different form the main one. I guess you can apply the same fix to document.querySelector('ons-splitter-side')._gestureDetector as well. As I said, we should check if GestureDetector has incompatibilities with other libraries and try to fix it.

[CNaik]

@Fran-Diox ah…ok, very clear. Thank you. This will work as we are going to switch off gesture on one specific page where drag and drop is required.

Just one quick question (probably a last one on this :blush:). Unlike document body, gesture detector couldn’t be reactivated for splitter. I tried reactivating it by assigning new ons.GestureDetector(…) to variable name, document.querySelector(‘ons-splitter-side’), document.getElementById (…) but none of them worked. (demo updated)

Once disabled, I couldn’t again get swipe menu activated. I saw in documentations that ons.GestureDetector has optional options parameter. Do we need to use any specific option in case of splitter?

Regards,
CNaik.

[Fran Diox]

@CNaik Oh yes, I forgot about that, sorry. You need to pass the parent element as a parameter. Something like this:
splitterSide._gestureDetector = new GestureDetector(splitterSide.parentElement, {dragMinDistance: 1});

[CNaik]

@Fran-Diox unfortunately it didn’t solve the problem (demo updated). May be any other required options missing?

One thing I noticed that for dispose and create statements, I had to use variable name specified in id attribute in HTML. Normally we use variable specified with var attribute. Which is not working in this case. I guess this might be very normal. But I noticed this for first time and hence bringing into your notice if it’s something new.

Regards,
CNaik.

[Fran Diox]

@CNaik One more thing, it needs to refresh the swipeable attribute in order to listen for the events again. The easiest way is to remove it and set it again. Updated here: http://codepen.io/frankdiox/pen/RaQpQQ

About using var attribute or not… var is only for Angular stuff. Here we are modifying the core so we need to use the real components. Normally you would need to do document.querySeletor('#splMenu'); to access the component. However, due to some hidden feature of HTML (not in Onsen), global variables are created for every ID so technically you can use splMenu with the same result. For example, you can access to <div id="myDiv"></div> with window.myDiv. This is quite error prone and I’d say it’s not recommended.

[CNaik]

@Fran-Diox it’s working perfectly now. Thank you for your valuable input.

We will avoid using global variables.

Regards,
CNaik.