Snap.js not working with Ionic

[dbaq]

Hi,

I ran into an issue with Ionic. I use snap.js for the side menu.

I got the following code:

<div snap-content snap-options="opts">
  <header class="bar bar-header bar-positive">
      <button class="button " ng-click="toggleMenu()">
        <img src="img/icon-menu.svg" alt="&#9776;" />
      </button>
      <h1 class="title">APP</h1>
  </header> 

  <ng-view></ng-view> 
</div> 

and

$scope.toggleMenu = function() {
     snapRemote.toggle('left');
    console.log('toggle menu');
}

It works perfectly on chrome but on my iOS simulator and on my nexus 4, the menu does not toggle but "toggle menu" appears in the console.

If I remove ionic from the list:
angular.module('app', ['snap', 'ionic',.. it is also working.

Any thoughts on that?

Thanks in advance

[mlynch]

Hey @dbaq. Just curious, why are you using snap.js instead of our side menu system? I'm honestly curious if it's just a missing feature or something you like about it that we could add.

As for why it's not working, I'm not exactly sure. What do you see when you inspect element after opening in the simulator? You could test this in the iOS simulator with the Safari remote debugging if you've used that before.

[dbaq]

I am currently migrating my app to use Ionic, I didn't check all the options with your side menu system yet. What I absolutely need is:

• "No-Drag" elements, be able to define a div as a non draggable area. Useful when your navigating on a map, because otherwise the menu is opening all the time.
• tap to close feature: when your menu is open if tap on the visible content, the menu should close.
• possibility to customize some stuff like the drag intent and the minimum drag distance before moving the panel

I never used the Safari remote debugging tool, I will take a look at it.

[dbaq]

I reproduced the error here : https://github.com/dbaq/ionic-angular-cordova-seed
If you click on the button it does not work. Il you swipe it works.

Could you take a look pls?

[mlynch]

I tried it out, but I'm not sure what is going on. Looks like it's snapping actually, so it is doing something it's just getting reverted or something immediately.

Do you have the non minified snap.js? That would help.

[dbaq]

sure,
https://github.com/dbaq/ionic-angular-cordova-seed/commit/fa017c0a1bd07b20ceac36942746f5ca31afc6f9

ps: so far I am using only ionic.css (remove all ionic js) with angular 1.2.2 regular, it's working fine.

thanks again

[darrenahunter]

Also interested in the sidemenucontroller having the functions that snap have. I use snap.js with angular also and am looking to migrate over. Snap has a lot of features but think dbaq listed the main ones above. Prefer use sidemenucontroller than snap in ionic app as it is part of your core. Cheers darren
Will try and find time to see if i am assist in the issue

[mlynch]

Hey all, just added the functionality to close when the content area is tapped.

I'm going to close this issue as I think it would be better suited on the forum as I haven't been able to identify it as an ionic issue specifically, but more of an interaction issue with snap.js and we do have most of the features they have.

If you do have specific feature requests, those would work well as individual github issues. Thanks!

[brianfeister]

For reference, this is a problem with snapjs it looks like the library is doing some work that I might consider "dirty" in suppressing DOM event bubbling, and also messing with fixed position among others. Hopefully that's not too off topic, thought it might help someone else.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.