softwaretailoring / wheelnav

Animated wheel navigation JavaScript library based on Raphaël.js (SVG/VML). It can be a pie menu (radial menu, circular menu) and many more.
https://wheelnavjs.softwaretailoring.net
MIT License
702 stars 101 forks source link

Menu closed by default? #17

Closed NickSick closed 9 years ago

NickSick commented 9 years ago

I think that it would be easy but i didn't find something relative in documentation. So,is possible to keep the nav closed by default? Also,it seems that the default clockwise behaviour,it stops working after few clicks on nav items.

softwaretailoring commented 9 years ago

There was a currentPercent property wich was available for inner logic. Now this property is available from outside, so you can achieve closed wheel with this property before createWheel():

wheel.currentPercent = 0;

Is this working for you? Can you send me a sample which contains the clockwise issue?

NickSick commented 9 years ago

For some reason it doesn't. I used the generator from your page to create the nav and i don't think i made any major changes. I'll try it again and search it for a while. I am working in local enviroment.,this is how the code looks like.

.Html

<div id='piemenu' data-wheelnav
 data-wheelnav-slicepath='PieSlice'
 data-wheelnav-spreader data-wheelnav-spreaderpath='PieSpreader'
 data-wheelnav-navangle='270'
 data-wheelnav-cssmode 
 data-wheelnav-init>
  <div data-wheelnav-navitemtext='Home' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemtext='About' onmouseup='alert("Place your logic here.");'></div>
  <div data-wheelnav-navitemtext='Contact' onmouseup='alert("Place your logic here.");'></div>
 <div data-wheelnav-navitemtext='blah' onmouseup='alert("Place your logic here.");'></div>
   </div> 

.Js

piemenu = new wheelnav('piemenu');
piemenu.spreaderInTitle = icon.plus;
piemenu.spreaderOutTitle = icon.cross;
piemenu.clockwise = true;
piemenu.spreaderRadius = piemenu.wheelRadius * 0.13;
piemenu.sliceInitPathFunction = piemenu.slicePathFunction;
piemenu.initPercent = 0.1;
piemenu.wheelRadius = piemenu.wheelRadius * 0.83;
piemenu.currentPercent = 0;
piemenu.createWheel();

I'm using bootstrap 3

softwaretailoring commented 9 years ago

Hmm. The above code is working for me. Did you use the latest commit? I didn't create a release for it, so please download the master zip. I think I understand your clockwise issue. Check this: piemenu.rotateRound = true; Is it OK now?

NickSick commented 9 years ago

I was working with the 1.5..4 version.With the latest commit and your code above,both issues solved. Thank you for your time!