JSFiddle - React, Tailwind, and code Playground

by sqiudward

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.js"></script>
<script src="https://cdn.jsdelivr.net/wheelnav/1.7.0/wheelnav.min.js"></script>
<div style="height:400px; width: 400px;" id="wheelDiv"></div>
<div style="height:400px; width: 400px;" id="wheel2"></div>

JavaScript

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

//Customize slicePaths for proper size
wheel1.slicePathFunction = slicePath().DonutSlice;
wheel1.slicePathCustom = slicePath().DonutSliceCustomization();
wheel1.slicePathCustom.minRadiusPercent = 0.28;
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;

//Set color
wheel1.colors = ['black'];
wheel2.colors = ['#2c7bc2'];


//Enable spreader
wheel1.spreaderInTitle = 'NEXUS';
wheel1.spreaderOutTitle = 'NEXUS';
wheel1.spreaderTitleFont = '100 24px Helvetica';
wheel1.spreaderEnable = true;
wheel1.spreaderRadius = 46;

//Customize nav items
wheel1.sliceHoverAttr = { stroke: 'white', 'stroke-width': 4 };
wheel1.lineHoverAttr = { stroke: 'white', 'stroke-width': 6 };
wheel1.titleHoverAttr = { fill: 'white', stroke: 'none' };
wheel1.sliceSelectedAttr = { stroke: 'white', 'stroke-width': 4 };
wheel1.lineSelectedAttr = { stroke: 'white', 'stroke-width': 6 };
wheel1.titleSelectedAttr = { fill: 'white' };


//Disable rotation, set navAngle and create the menus
wheel1.clickModeRotate = false;
wheel2.clickModeRotate = false;
/* wheel2.navAngle = -30; */
wheel1.createWheel(["A", "B", "C"]);
wheel2.createWheel(["imgsrc:https://upload.wikimedia.org/wikipedia/commons/7/73/Flat_tick_icon.svg", "imgsrc:https://upload.wikimedia.org/wikipedia/commons/7/73/Flat_tick_icon.svg"]);



//Add function to each main menu for show/hide sub menus
var main1selected = true;
wheel1.navItems[0].navigateFunction =...