Modifying ion-side-menu or repurposing the same drag/snap logic


#1

I want to build a slightly different version of <ion-side-menu>. The current menu works by sliding the main content area out of the way to reveal a fixed position menu “behind”. I would like to reverse it, so the content remains fixed, but the menu slides in/out over the top.

While I can achieve a simple version of this, it doesn’t come with all the logic I can see in <ion-side-menu>. Things like…

  • You can drag from the edge of the main content to begin dragging open the main menu.
  • When you drag a slight distance, it automatically snaps back.
  • Or if you drag over half way, it will snap all the way open.
  • If you drag quickly it will snap open all the way as well.

I have noticed similar logic powering <ion-slide-box> as well with regards to dragging, snapping, etc.

Where is this logic? How can I use it?

I understand collide might be powering some of this, but I would rather not try to rebuild it given I want to use all logic that currently powers the <ion-side-menu>.

Is there a way I can find the drag/open/close code for <ion-side-menu> and just re-purpose it?

Edit: Here is a codepen of what I mean: http://codepen.io/HappyPelican/pen/NGKYOE

Of course, the menu only shows when you click the button and hides when you click inside the menu somewhere. But I want to have all the drag/snap logic that comes with ion-side-menu as well, and given that logic already exists to power ion-side-menu and largely in ion-slide-box, I was hoping someone could help me work out how to re-use it.


#2

Something like this?

But only in reverse, where new slide should animate over the old one?


#3

Sorry, that link just goes to the top of the page. Which plugin were you referring to?


#4

My mistake, take a look now.