Wheelzator Documentation

Usage

HTML:


					<div id="my-wheel-container" class="my-wheel"></div>

Code:


					<script>
					wObj = wheelzator("#my-wheel-container", optionsArray, configurationsAndEventsObject);
					</script>

More code:


					<script>
					wObj.setValue("active");
					$(".wheel-option-container a").tooltip();
					</script>

Structure

General:


					div.wheel-container[data-selected=N][data-icon=ICON]
					div.wheel-inner
					div.wheel-option-container
					a.wheel-option.icon-ICON.option-index-N
					i.fa.fa-ICON
					div.wheel-center
					i.fa.fa-ICON

Yes / No Generated HTML example:


<div class="wheel-container"
 data-clickstart="1466196723964"
 data-selected=""
 data-icon="">
<div class="wheel-inner" 
 style="width: 180px;
height: 180px;
top: -90px;
left: -90px;
box-sizing: border-box;
padding: 89px;" >
<div class="wheel-option-container"
 style="top: 30px;
 left: 90px;">
<a  title="Ativo"
data-icon="check"
class="wheel-option icon-check option-index-1"
data-val="true">
<i class="fa fa-check"></i>
</a>
</div>
<div class="wheel-option-container"
 style="top: 150px;
 left: 90px;">
<a  title="Inativo"
data-icon="times"
class="wheel-option icon-times option-index-2"
data-val="false">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="wheel-center">
<i class="fa"></i>
</div>
</div>

Options are displayed in this form (if offsetAngle is default):

Styling

Each icon has it's index and icon as class:
.option-index-3
.icon-whatsapp
When the user moves the mouse around the opened wheel (.in class means it's opened), it shall toggle attributes on .wheel-container as such:
[data-selected="3"]
[data-icon="whatsapp"]

Use this css template to code upon


.wheel-container {

}
.wheel-container .wheel-inner {

}
.wheel-container .wheel-center {

}
.wheel-container .wheel-center .fa {

}
.wheel-container .wheel-inner .wheel-option-container {

}
.wheel-container .wheel-inner .wheel-option-container .wheel-option {

}
.wheel-container .wheel-inner .wheel-option-container .wheel-option .fa {
}


.wheel-container.in {

}
.wheel-container.in .wheel-inner {

}
.wheel-container.in .wheel-center {

}
.wheel-container.in .wheel-center .fa {

}
.wheel-container.in .wheel-inner .wheel-option-container {

}
.wheel-container.in .wheel-option {

}
.wheel-container.in .wheel-inner .wheel-option-container .wheel-option .fa {

}

Template to create color schemes, using 1, 2, 3 (N) or using icon (font awesome's icon class without the ".fa-" prefix)


.wheel-container .wheel-option.option-index-N { background:#COLOR_MUTED; }
div.wheel-container[data-selected="N"] .wheel-option.option-index-N {  background:#COLOR_HOVER; }
div.wheel-container[data-selected="N"] .wheel-center {  background:#COLOR_HOVER; }


.wheel-container .wheel-option.icon-FONTAWESOMEICON { background:#COLOR_MUTED; }
div.wheel-container[data-icon="FONTAWESOMEICON"] .wheel-option.icon-FONTAWESOMEICON {  background:#COLOR_HOVER; }
div.wheel-container[data-icon="FONTAWESOMEICON"] .wheel-center {  background:#COLOR_HOVER; }

Example

Social Media Wheelzator (doesn't includes -square here, like )



.wheelzator-social .wheel-container .wheel-option.icon-facebook { background:#9daccc; }
.wheelzator-social .wheel-container .wheel-option.icon-twitter { background:#aad6f7; }
.wheelzator-social .wheel-container .wheel-option.icon-google-plus { background:#eea59c; }
.wheelzator-social .wheel-container .wheel-option.icon-youtube { background:#dd7f7f; }
.wheelzator-social .wheel-container .wheel-option.icon-linkedin { background:#7fbddb; }
.wheelzator-social .wheel-container .wheel-option.icon-instagram { background:#85aac5; }
.wheelzator-social .wheel-container .wheel-option.icon-pinterest { background:#e58f93; }
.wheelzator-social .wheel-container .wheel-option.icon-whatsapp { background:#a3e29e; }
.wheelzator-social .wheel-container .wheel-option.icon-vine { background:#7fdfc7; }
.wheelzator-social .wheel-container .wheel-option.icon-snapchat { background:#fffe7f; }
.wheelzator-social .wheel-container .wheel-option.icon-spotify { background:#7ff2b0; }
.wheelzator-social .wheel-container .wheel-option.icon-tumblr { background:#98a7b6; }
.wheelzator-social .wheel-container .wheel-option.icon-rss { background:#ffb27f; }

.wheelzator-social div.wheel-container[data-icon="facebook"] .wheel-option.icon-facebook {  background:#3b5998; }
.wheelzator-social div.wheel-container[data-icon="twitter"] .wheel-option.icon-twitter {  background:#55acee; }
.wheelzator-social div.wheel-container[data-icon="google-plus"] .wheel-option.icon-google-plus {  background:#dd4b39; }
.wheelzator-social div.wheel-container[data-icon="youtube"] .wheel-option.icon-youtube {  background:#bb0000; }
.wheelzator-social div.wheel-container[data-icon="linkedin"] .wheel-option.icon-linkedin {  background:#007bb5; }
.wheelzator-social div.wheel-container[data-icon="instagram"] .wheel-option.icon-instagram {  background:#125688; }
.wheelzator-social div.wheel-container[data-icon="pinterest"] .wheel-option.icon-pinterest {  background:#cb2027; }
.wheelzator-social div.wheel-container[data-icon="whatsapp"] .wheel-option.icon-whatsapp {  background:#4dc247; }
.wheelzator-social div.wheel-container[data-icon="vine"] .wheel-option.icon-vine {  background:#00bf8f; }
.wheelzator-social div.wheel-container[data-icon="snapchat"] .wheel-option.icon-snapchat {  background:#fffc00; }
.wheelzator-social div.wheel-container[data-icon="spotify"] .wheel-option.icon-spotify {  background:#00e461; }
.wheelzator-social div.wheel-container[data-icon="tumblr"] .wheel-option.icon-tumblr {  background:#32506d; }
.wheelzator-social div.wheel-container[data-icon="rss"] .wheel-option.icon-rss {  background:#ff6600; }

.wheelzator-social div.wheel-container[data-icon="facebook"] .wheel-center {  background:#3b5998; }
.wheelzator-social div.wheel-container[data-icon="twitter"] .wheel-center {  background:#55acee; }
.wheelzator-social div.wheel-container[data-icon="google-plus"] .wheel-center {  background:#dd4b39; }
.wheelzator-social div.wheel-container[data-icon="youtube"] .wheel-center {  background:#bb0000; }
.wheelzator-social div.wheel-container[data-icon="linkedin"] .wheel-center {  background:#007bb5; }
.wheelzator-social div.wheel-container[data-icon="instagram"] .wheel-center {  background:#125688; }
.wheelzator-social div.wheel-container[data-icon="pinterest"] .wheel-center {  background:#cb2027; }
.wheelzator-social div.wheel-container[data-icon="whatsapp"] .wheel-center {  background:#4dc247; }
.wheelzator-social div.wheel-container[data-icon="vine"] .wheel-center {  background:#00bf8f; }
.wheelzator-social div.wheel-container[data-icon="snapchat"] .wheel-center {  background:#fffc00; }
.wheelzator-social div.wheel-container[data-icon="spotify"] .wheel-center {  background:#00e461; }
.wheelzator-social div.wheel-container[data-icon="tumblr"] .wheel-center {  background:#32506d; }
.wheelzator-social div.wheel-container[data-icon="rss"] .wheel-center {  background:#ff6600; }

Parameters


					wheelzator("#element", optionsArray, configurationObject);

Options


					var options = [
					{
					icon:"whatsapp",
					value:562,
					title:"Share on WhatsApp"
					},
					{
					...
					]

icon: The FontAwesome icon class, without the "fa-" prefix.
Example: "group"( )

value: Whatever value this wheel's option should have.
Example: 5, (an category ID to relate to an post); TRUE or FALSE, meaning "Active" or "Inactive", etc

title: Actual title="" attribute.
Example: "Activate", "Share on facebook", "Admin Group": The explanation of what this option is.
-- Use bootstrap's .tooltip() to improve style and user experience:

$(".wheel-option-container a").tooltip();

Config

Defines size, angle and callback functions


					var config = {
					minDistance : 20,
					maxDistance : 90,
					optionDistance : 60,
					offsetAngle : 90,
					offsetCalcAngle : -15,

					onOpen : function() {
					console.log("Wheelzator Opened");
					},
					onClose : function() {
					console.log("Wheelzator Closed");
					},
					onSelect : function(data) {
					console.log("Wheelzator -- selected option "+data.index+" with value "+data.value);
					},
					onDeselect : function() {
					console.log("Deselected");
					},
					}

minDistance:
Minimal distance from center of wheel to select an option.
Clicking within this radius will trigger onDeselect().

maxDistance:
Outer limit of wheel. Also represents .wheel-inner size.
Clicking outside this radius will trigger onDeselect().

optionDistance:
Distance of each option to the center of wheel.

offsetAngle:
Amount of degrees to rotate the options

offsetCalcAngle:
In-code compensation angle

Events

onOpen():
Function called when wheel is opened.
Takes no arguments.

onSelect(data):
Function called when an option is selected.
data object: index, value, target, wheelContainer, originObject

index: number of option selected

value: assigned value of this option

target: html obj of option selected

wheelContainer: html object of wheel container

originObject: html object parent of wheel container

onDeselect():
Function called when selection happens inside the donut hole or outside of wheel.
Takes no arguments.

Event Demo

Presets

Style

Flat UI (taken from here)


						<div class='wheelzator-flat-ui'>

Yes No


						<div class='wheelzator-yes-no'>

Importance (success, info, warning and danger)


						<div class='wheelzator-importance'>

Blueish (different animation also)


						<div class='wheelzator-blueish'>

Social (most social icons covered i guess)


						<div class='wheelzator-social'>

Options (Javascript)

Yes No


						var wheelzatorYesNo = [
						{icon:"check", value:true, title:"Ativo"},
						{icon:"times", value:false, title:"Inativo"},
						]

Importance


						var wheelzatorImportance = [
						{icon:"square", value:1, title:"Comum"},
						{icon:"info", value:2, title:"Informação"},
						{icon:"exclamation-triangle", value:3, title:"Atenção"},
						{icon:"exclamation-circle", value:4, title:"Importante"},
						]

Effects

Default is Rotation with Scaling, with easeOutBack transition.

Important: when not selected, .wheel-inner must have transform:scale(0);, otherwise the options will overlap all elements around the wheel.

Easing functions

Rotate and Grow:


					.wheel-container .wheel-inner {
					transform:scale(0)rotate(90deg);
					}
					.wheel-container.in .wheel-inner {
					transform:scale(1)rotate(0deg);
					}

Fade, no Grow (with easing):


					.wheel-container .wheel-inner {
					transform:scale(0);
					opacity:0;
					transition:opacity .4s ease;
					}
					.wheel-container.in .wheel-inner {
					transform:scale(1);
					opacity:1;
					}

Popup effect on each option


					.wheel-container .wheel-option {
					transition:.4s ease;
					transform:scale(1);
					}
					div.wheel-container[data-selected="1"] .option-index-1,
					div.wheel-container[data-selected="2"] .option-index-2,
					div.wheel-container[data-selected="3"] .option-index-3,
					...
					{
					transform:scale(1.3);
					}

Manipulating

Example: set the value of a wheel via js

wheelzator() returns an wheelzator object:


					var activeInactiveWheel = wheelzator("#a-i-wheel", [
					{icon:"times",value:"inactive",title:"Inactive"},
					{icon:"check",value:"active",title:"Active"},
					]);

					$("#a-i-wheel a").tooltip();

					activeInactiveWheel.setValue("active");

Obs.: calling .setIndex(), .setValue() and .deselect() does not trigger .onSelect(), .onClose() etc. functions.

Functions:

.setIndex( index )

Sets the selected option of the wheel according to index. Starts in 1
returns an error if index is <1 or greater than wheel's number of options.

.setValue( value )

Sets the selected option of the wheel according to value.
directly compares this argument to each option's value and calls setIndex(). Returns error if didn't find.

.deselect()

Deselects the wheel, setting it to none.

.getIndex()

Returns current wheel index, or undefined if deselected.
The same as $("#wheelzator-container .wheel-container").attr("data-value")

.getValue()

Returns current wheel value, or undefined if deselected.
The same as $("#wheelzator-container .wheel-container").attr("data-selected")

Dependancies

jQuery 1.1
Font Awesome
Bootstrap if you'll use tooltip

Wheelzator

Stylish alternative to combobox selection using wheel-like popup buttons

See the demo