Core of the wheel - Source code: wheelnav.core.js

Methods


div

init

create

navigate

refresh

remove

The holder div
You need a div for wheelnav constructor. 

wheel = new wheelnav("wheelDiv");

initWheel
You can initialize wheelnav by title. After initialization each navItem configurable individually. 

wheel = new wheelnav("wheelDiv");
wheel.initWheel(["init", "create", "navigate", "refresh"]);

createWheel
Without initialization every navItem inherit wheelnav's properties. 

//With initWheel
wheel = new wheelnav("wheelDiv");
wheel.initWheel(["init", "create", "navigate", "refresh"]);
wheel.createWheel();
//Without initWheel
wheel = new wheelnav("wheelDiv");
wheel.createWheel(["init", "create", "navigate", "refresh"]);

navigateWheel
Every slice's click fires a navigateWheel method.
You can call this method manually. 

wheel = new wheelnav("wheelDiv");
wheel.createWheel(["init", "create", "navigate", "refresh"]);
wheel.navigateWheel(2);

refreshWheel
You can set properties of wheel and refresh them. 

wheel = new wheelnav("wheelDiv");
wheel.createWheel(["init", "create", "navigate", "refresh"]);
wheel.titleAttr = { fill: "#FFF" };
wheel.titleSelectedAttr = { fill: "#111" };
wheel.titleHoverAttr = { fill: "#111" };
wheel.refreshWheel();

removeWheel
This method removes wheelnav from DOM. 

wheel = new wheelnav("wheelDiv");
wheel.createWheel(["init", "create", "navigate", "refresh"]);
wheel.removeWheel();

Properties


reset

wheelRadius

centerX/Y

titleRotate

navAngle

Here is the default wheel.
Default radius, centered position, default angles.

wheelRadius
The default wheelRadius is the half of the width of div.
You can override this.

centerX - centerY
You can set the center of wheelnav.

titleRotateAngle
The titles keep them horizontal angle by default. It is possible to set a titleRotateAngle.

navAngle
The default angle of wheel is 0 aka middle-right. It can be override by navAngle property. 



            

        


        


        

        

            

                

            

            

                
Modes

                

                
reset

                
clockwise

                
rotate off

                
multiselect

                
spread select


                
                

                
                

                    

                        

                            Here is the default wheel.
                            

                            Default rotation mode, simple selection, without spreader.
                        

                    

                    

                        

                            clockwise
                            

                            Default order of navItems is clockwise. It can be counterclockwise.
                        

                    

                    

                        

                            clickModeRotate 
                            

                            The default mode is rotation.
                            

                            You can switch off this.
                        

                    

                    

                        

                            multiSelect
                            

                            You can select multiple navItem of wheelnav.
                        

                    

                    

                        

                            clickModeSpreadOff
                            

                            If you want hide navItems, use spreader.
                            It is possible to spread off the wheel after click.
                        

                    

                


                

            

        


        


        

        

            

                

            

            

                
Features

                

                
reset

                
colors

                
slice path

                
slice transform

                
icons


                
                

                
                

                    

                        

                            Here is the default wheel.
                            

                            Default colors, slicePath, sliceTransform and titles.
                        

                    

                    

                        

                            colors 
                            

                            The colors of wheel defined by string array.
                            

                            The colorPalettes class contains some default colors.
                        

                    

                    

                        

                            slicePathFunction 
                            

                            You can use any SVG path in wheelnav.
                            

                            The slicePath class contains some default paths.
                        

                    

                    

                        

                            sliceTransformFunction
                            

                            The slices can be transformed via transform attribute.
                            

                            The sliceTransform class contains some default transforms.
                        

                    

                    

                        

                            icons 
                            

                            The title of navItem can be text and icon. The icon can be svg or image.
                            

                            The svg icons are predefined svg paths. The image can be URL or data URI scheme
                        

                    

                


                


            

        


        


        

        

            

                

            

            

                
Keyboard

                

                
reset

                
enable

                
focus

                
keycode

                
alt


                
                

                
                

                    

                        

                            Here is the default wheel.
                            

                            Without handling of keyboard events.
                        

                    

                    

                        

                            keynavigateEnabled 
                            

                            You can enable keyboard navigation with keynavigateEnabled property. Event handler attached via 'keydown'.
                            

                            The default keys are left arrow and right arrow (or down arrow and up arrow).
                        

                    

                    

                        

                            keynavigateOnlyFocus 
                            

                            Event handler attached to window by default. You can attach it to div with keynavigateOnlyFocus property.
                            

                            Click the wheel to activate keyboard navigation.
                        

                    

                    

                        

                            keycodes 
                            

                            You can override default keys.
                            

                            Try the 'A' and 'D' key.
                        

                    

                    

                        

                            alternative keycodes 
                            

                            It is possible to add alternative keys.
                            

                            Try the 'S' and 'W' key.
                        

                    

                


                


            

        


        


        

        

            

                

            

            

                
Advanced constructor


                
                

                
                

                    

                        

                            Constructor is able to receive a raphael object in second parameter. The created wheelnav placed on the div of parent wheelnav and the first divId parameter has to be the identifier of the child wheelnav in this case.
                            

                            The third and fourth parameter is divWidth and divHeight and they can initialize the size of canvas in first calling.