File: platform/plugins/Q/web/js/tools/pie.js

(function (Q, $) {
	/**
	 * @module Q-tools
	 */

	/**
	 * This tool show round process bar.
	 * @class Q pie
	 * @constructor
	 * @param {Object}   [options] Override various options for this tool
	 *  @param {Number}  [options.fraction] Value process
	 *  @param {Number}  [options.size] Circle size
	 *  @param {Object}  [options.bgImage] URL to image to put in background
	 *  @param {Object}  [options.color] Arc color
	 *  @param {Object}  [options.borderSize] Arc border size. The progress line width.
	 * @return {Q.Tool}
	 */
	Q.Tool.define("Q/pie", function (options) {
			var tool = this;
			var $toolElement = $(tool.element);
			var state = tool.state;
			options = options || {};

			Q.addStylesheet('{{Q}}/css/pie.css');

			// positioning tool box
			tool.positionParent();

			// rotate arcs according to fraction
			tool.Q.onStateChanged('fraction').set(function () {
				var angle = 360/(100/parseFloat(state.fraction));

				var arcLeftAngle = angle > 180 ? angle - 180 + 45 : 45;
				arcLeftAngle = angle > 360 ? 225 : arcLeftAngle;
				var arcLeftDisplay = arcLeftAngle > 45 ? "block" : "none"; // only for Chrome

				var arcRightAngle = angle < 180 ? angle + 45 : 180 + 45;
				arcRightAngle = angle < 0 ? 45 : arcRightAngle;

				$(".Q_pie_arc.Q_pie_arcLeft", $toolElement).css({transform: "rotate(" + arcLeftAngle + "deg)", display: arcLeftDisplay}); // Chrome incorrect calculate positions
				$(".Q_pie_arc.Q_pie_arcRight", $toolElement).css("transform", "rotate(" + arcRightAngle + "deg)");
			}, "Q/pie");

			// set new size
			tool.Q.onStateChanged('size').set(function () {
				var size = state.size;

				$(".Q_pie_box", $toolElement).css({width: size, height: size});
			}, "Q/pie");

			// set new Arc color
			tool.Q.onStateChanged('color').set(function () {
				var color = state.color;

				$(".Q_pie_arc.Q_pie_arcLeft", $toolElement).css("border-color", color + " " + color + " transparent transparent");
				$(".Q_pie_arc.Q_pie_arcRight", $toolElement).css("border-color", "transparent transparent " + color + " " + color);
			}, "Q/pie");

			// set new Arc borderSize
			tool.Q.onStateChanged('borderSize').set(function () {
				var borderSize = state.borderSize;

				$(".Q_pie_arc, .Q_pie_shield", $toolElement).css("border-width", borderSize);
			}, "Q/pie");

			tool.refresh();
		},

		{
			fraction: 0,
			size: 80,
			bgImage: "",
			color: 'red',
			borderSize: 5, // in px
			clickPos: {
				angle: 0,
				anglePercent: 0
			} // service param contain info about click event inside tool element
		},

		{
			refresh: function () {
				var tool = this;
				var state = tool.state;
				var $toolElement = $(tool.element);

				var bgImage = state.bgImage ? "background-image: url("+state.bgImage+")" : "";

				var fields = {
					bgImage: bgImage
				};

				Q.Template.render(
					'Q/pie/main',
					fields,
					function (err, html) {
						if (err) return;

						$toolElement.html(html);

						// set arcs rotate
						tool.stateChanged('fraction');

						// set pie size
						tool.stateChanged('size');

						// set Arc color
						tool.stateChanged('color');

						// set Arc borderSize
						tool.stateChanged('borderSize');

						// set toolElement click event
						$toolElement.on(Q.Pointer.click, function (event) {
							var x = event.pageX - $toolElement.offset().left;
							var y = event.pageY - $toolElement.offset().top;
							var toolWidth = $toolElement.width();
							var insideR = (toolWidth - state.borderSize * 2)/2; // radius of circle inside arcs
							var outsideR = toolWidth/2; // radius of circle
							var angle = Math.atan2(y - outsideR, x - outsideR)*180/Math.PI + 90;
							angle = angle > 0 ? angle : 360 + angle;
							var anglePercent = angle/360*100;

							state.clickPos.angle = angle;
							state.clickPos.anglePercent = anglePercent;

							if(Math.sqrt((x - outsideR) * (x - outsideR) + (y - outsideR) * (y - outsideR)) < insideR){
								state.clickPos.inside = true;
							}else{
								state.clickPos.inside = false;

								//state.fraction = anglePercent;
								//tool.stateChanged('fraction');
							}
						});
					}
				)
			},
			/**
			 * Positioning tool box in parent box
			 * @method positionParent
			 */
			positionParent: function(){
				var tool = this;

				// if size already set in params - exit
				if(tool.state.size) return;

				var parent = $(tool.element).parent();
				var parentW = parent.width();
				var parentH = parent.height();

				tool.state.size = parentW > parentH ? parentH : parentW;
			},
			/**
			 * Set pie to initial position
			 * @method initPos
			 */
			initPos: function(){
				var tool = this;

				tool.state.fraction = 0;
				tool.stateChanged('fraction');
			}
		}
	);

	Q.Template.set('Q/pie/main',
		'<div class="Q_pie_box" style="{{bgImage}}">'
		+ '<div class="Q_pie_shield"></div>'
		+ '<div class="Q_pie_arcBox Q_pie_arcBoxRight"><div class="Q_pie_arc Q_pie_arcRight"></div></div>'
		+ '<div class="Q_pie_arcBox Q_pie_arcBoxLeft"><div class="Q_pie_arc Q_pie_arcLeft"></div></div>'
		+ '</div>'
	);

})(Q, jQuery);