Example code for submenu implementation

[pablodance]

Could anyone please post example code for submenu implementation? I'm pulling my hair out trying to implement it! The code in the page is heavily Minified - so just a basic example that i can use to figure out the layout would be ace.

Cheers Paul

[digitalmouse]

Agreed! An example of submenus on the donut slice would be great!

[softwaretailoring]

Hi Guys,

Sorry, but I don't want to share example.js because it contains a content for selling purpose. I hope so you understand it.

Furthermore the submenu example doesn't work well as you can see it in #29. :(

However, I would like to give a guide for you. :)

1. Use advanced constructor. As in #30 - http://wheelnavjs.softwaretailoring.net/documentation/core.html#divMultipleWheel
2. Customize slicePath based on this: http://wheelnavjs.softwaretailoring.net/documentation/slicePath.html#customization
3. For example DonutSlice customization: https://github.com/softwaretailoring/wheelnav/blob/v1.6.1/js/source/slicePath/wheelnav.slicePath.Donut.js
4. Add DOM events to show/hide second wheelnav as in navItem basics: http://wheelnavjs.softwaretailoring.net/documentation/navItem.html

I hope it helps.

@pablodance please close this issue if above guide could help you. If not so, I'm waiting for your further questions. ;)

[digitalmouse]

Looks like the multiple wheel and show/hide second wheelnav are the way to go. Just a matter of designing the inner and outer wheel diameters to be flexible on different devices screens. Thanks for the tips, Gabor!

[digitalmouse]

code for wheelnav.slicePath.Donut.js (from your point 3 above) looks rather straightforward, but do not know what is expected for 'helper'... it's not a reference to the new wheel object (I keep getting 'helper.setBaseValue is not a function'), so no idea on how to set that. Could you please provide an example usage ofDonutSlice( helper, percent, custom)? I notice it calls the customization function if there are no parameters, which presets a min and max radius, but I can't seem to override that with a later 'wheel1.slicePathCustom.minRadiusPercent=something' value. That works for all slices but the first/start slice.

[softwaretailoring]

I've got lot of feedbacks about this example, so here is a code snippet. :)

//Use advanced constructor for more wheelnav on same div
wheel1 = new wheelnav('wheelDiv', null, 600, 600);
wheel2 = new wheelnav('wheel2', wheel1.raphael);

//Customize slicePaths for proper size
wheel1.slicePathFunction = slicePath().DonutSlice;
wheel1.slicePathCustom = slicePath().DonutSliceCustomization();
wheel1.slicePathCustom.minRadiusPercent = 0.3;
wheel1.slicePathCustom.maxRadiusPercent = 0.6;
wheel1.sliceSelectedPathCustom = wheel1.slicePathCustom;
wheel1.sliceInitPathCustom = wheel1.slicePathCustom;
wheel2.slicePathFunction = slicePath().DonutSlice;
wheel2.slicePathCustom = slicePath().DonutSliceCustomization();
wheel2.slicePathCustom.minRadiusPercent = 0.6;
wheel2.slicePathCustom.maxRadiusPercent = 0.9;
wheel2.sliceSelectedPathCustom = wheel2.slicePathCustom;
wheel2.sliceInitPathCustom = wheel2.slicePathCustom;

//Disable rotation, set navAngle and create the menus
wheel1.clickModeRotate = false;
wheel2.clickModeRotate = false;
wheel2.navAngle = -30;
wheel1.createWheel(["1", "2", "3"]);
wheel2.createWheel(["1.1", "1.2", "2.1", "2.2", "3.1", "3.2"]);

//Add function to each main menu for show/hide sub menus
var main1selected = true;
wheel1.navItems[0].navigateFunction = function () {
    if (main1selected) {
        wheel2.navItems[0].navItem.hide();
        wheel2.navItems[1].navItem.hide();
    }
    else {
        wheel2.navItems[0].navItem.show();
        wheel2.navItems[1].navItem.show();
    }
    main1selected = !main1selected;
};

I hope it helps!

[digitalmouse]

Good timing! I had just worked out how to hide/show different wheels and was starting up an if() with a for() loop when you comment arrived! I was missing the wheel2.sliceInitPathCustom = newwheel2.slicePathCustom;

Thanks! That is a good push in the right direction. :+1:

[chasset]

Hello, Thanks for this great library! I am trying to hide the submenu when the spreader is clicked. Any idea to fire the event? Best regards, Pierre-Olivier

[softwaretailoring]

Hi @chasset Please check this issue: #49 There is a JSBin link with sample code.

[chasset]

Nice. Thank you

[chasset]

It works! So, with it, the submenus can be hide. I would like to trigger their spreader. Is there a way to trigger the spreader of a specific submenu when the main wheel spreader is clicked?

[softwaretailoring]

Yes, there is a spreadWheel function for that: https://github.com/softwaretailoring/wheelnav/blob/v1.7.1/js/dist/wheelnav.js#L461

[chasset]

Many thanks

[martinmonzog]

Hi, I was able to create a submenu when clicking an item of the main wheel, but I have a little problem: I want to set the submenu position next to the position of the selected item. Could you help me with that? Thank you

[softwaretailoring]

You can use the centerX and centerY properties for positioning. https://github.com/softwaretailoring/wheelnav/blob/v1.7.1/js/dist/wheelnav.js#L79