Wheelzator Event Demo

Code


			$(function() {
			wheelzator("#event-demo-wheelzator", evtDemoOptions, evtDemoConfig);
			})

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

CSS Styling

CSS - Center icon style


.wheel-center {
box-shadow: inset 0px 2px 6px rgba(255,255,255,0.5),
inset 0px -2px 6px rgba(0,0,0,0.5),
0px 0px 0px 5px #9CF;
}
.wheel-center:hover {
box-shadow: inset 0px 3px 7px rgba(255,255,255,0.7),
inset 0px -3px 7px rgba(0,0,0,0.7),
0px 0px 0px 5px #9CF;
}
.in .wheel-center {
box-shadow: inset 0px -2px 2px rgba(255,255,255,0.7),
inset 0px 2px 2px rgba(0,0,0,0.7),
0px 0px 0px 5px #9CF;
}

CSS - Button color and hover style


.wheel-container .icon-ban {
box-shadow:0px 0px 0px 5px #E66;
color:#E66 !important; }
.wheel-container .icon-lock {
box-shadow:0px 0px 0px 5px #BBB;
color:#BBB !important; }
.wheel-container .icon-unlock {
box-shadow:0px 0px 0px 5px #7EC;
color:#7EC !important; }
.wheel-container .icon-thumbs-up {
box-shadow:0px 0px 0px 5px #66F;
color:#66F !important; }
.wheel-container .icon-thumbs-down {
box-shadow:0px 0px 0px 5px #F00;
color:#F00 !important; }
.wheel-container .icon-star {
box-shadow:0px 0px 0px 5px #EE0;
color:#EE0 !important; }

.wheel-container[data-icon="ban"] .wheel-inner .icon-ban {
box-shadow:none;
background:#E66;
color:#FFF !important; }
.wheel-container[data-icon="lock"] .wheel-inner .icon-lock {
box-shadow:none;
background:#BBB;
color:#FFF !important; }
.wheel-container[data-icon="unlock"] .wheel-inner .icon-unlock {
box-shadow:none;
background:#7EC;
color:#FFF !important; }
.wheel-container[data-icon="thumbs-up"] .wheel-inner .icon-thumbs-up {
box-shadow:none;
background:#66F;
color:#FFF !important; }
.wheel-container[data-icon="thumbs-down"] .wheel-inner .icon-thumbs-down {
box-shadow:none;
background:#F00;
color:#FFF !important; }
.wheel-container[data-icon="star"] .wheel-inner .icon-star {
box-shadow:none;
background:#EE0;
color:#FFF !important; }

CSS - Center button color


.wheel-container[data-icon="ban"] .wheel-center {
background:#E66;
}
.wheel-container[data-icon="lock"] .wheel-center {
background:#BBB;
}
.wheel-container[data-icon="unlock"] .wheel-center {
background:#7EC;
}
.wheel-container[data-icon="thumbs-up"] .wheel-center {
background:#66F;
}
.wheel-container[data-icon="thumbs-down"] .wheel-center {
background:#F00;
}
.wheel-container[data-icon="star"] .wheel-center {
background:#EE0;
}

CSS - Effect



.wheel-container .wheel-inner {
transition-delay:.25s;
transform:scale(0);
}
.wheel-container.in .wheel-inner {
transition:none;
}
.wheel-container .wheel-option { transform:scale(0); transition:transform .4s ease;}
.wheel-container.in .wheel-option {transform:scale(1); }
.wheel-container .option-index-1 {transition-delay:.1s;}
.wheel-container .option-index-2 {transition-delay:.15s;}
.wheel-container .option-index-3 {transition-delay:.2s;}
.wheel-container .option-index-4 {transition-delay:.25s;}
.wheel-container .option-index-5 {transition-delay:.3s;}
.wheel-container .option-index-6 {transition-delay:.35s;}

Angular Code


			angular.module('wheelzatorDemoEvent', [])
			.controller('myController',["$scope",function($scope) {
			$scope.index = 0;
			$scope.value = 0;
			$scope.target = 0;
			$scope.wheelContainer = 0;
			$scope.originObject = 0;
			$scope.status = "Closed";

			$scope.updateWheelzatorParameters = function(data) {
			if (typeof data.index != "undefined") $scope.index = data.index;
			if (typeof data.value != "undefined") $scope.value = data.value;
			if (typeof data.target != "undefined") $scope.target = data.target.toString();
			if (typeof data.wheelContainer != "undefined") $scope.wheelContainer = data.wheelContainer.toString();
			if (typeof data.originObject != "undefined") $scope.originObject = data.originObject.toString();
			}
			$scope.updateStatus = function(status) {
			$scope.status = status;
			}
			}])

Wheelzator Options


			var evtDemoOptions = [
			{ icon:"ban", value:"ban", title:"Report" },

			{ icon:"star", value:"favorite", title:"Save as favorite" },
			{ icon:"thumbs-up", value:"like", title:"Like" },
			{ icon:"unlock", value:"unlock", title:"Unlock" },

			{ icon:"lock", value:"lock", title:"Lock" },
			{ icon:"thumbs-down", value:"dislike", title:"Dislike" },
			]

Wheelzator Configuration (Only has Events)


			evtDemoConfig = {

			minDistance : 10,
			maxDistance : 100,
			optionDistance : 70,

			onOpen : function() {
			var $ngScope = angular.element($('[ng-controller="myController"]')[0]).scope();
			$ngScope.updateStatus("Open");
			$ngScope.$apply();
			},
			onClose : function() {
			var $ngScope = angular.element($('[ng-controller="myController"]')[0]).scope();
			$ngScope.updateStatus("Closed");
			$ngScope.$apply();
			},
			onSelect : function(data) {
			var $ngScope = angular.element($('[ng-controller="myController"]')[0]).scope();
			$ngScope.updateWheelzatorParameters(data);
			$ngScope.$apply();
			},
			onDeselect : function() {
			var $ngScope = angular.element($('[ng-controller="myController"]')[0]).scope();
			$ngScope.updateWheelzatorParameters({
			index:"none",
			value:"none"
			});
			$ngScope.$apply();
			},
			}