Your IP : 3.135.247.237


Current Path : /var/www/www-root/data/www/www.monolith-realty.ru/bitrix/js/ui/progressround/
Upload File :
Current File : /var/www/www-root/data/www/www.monolith-realty.ru/bitrix/js/ui/progressround/ui.progressround.js

(function() {

	'use strict';

	BX.namespace('BX.UI.ProgressRound');

	BX.UI.ProgressRound = function(options)
	{
		this.options = BX.type.isPlainObject(options) ? options : {};

		this.bar = null;
		this.container = null;
		this.status = null;
		this.statusPercent = "0%";
		this.statusCounter = "0 / 0";
		this.textBefore = null;
		this.textBeforeContainer = null;
		this.textAfter = null;
		this.textAfterContainer = null;
		this.maxValue = 100;
		this.value = 0;
		this.width = 100;
		this.lineSize = 5;
		this.statusType = BX.UI.ProgressRound.Status.NONE;
		this.color = BX.UI.ProgressRound.Color.PRIMARY;

		this.setValue(options.value);
		this.setWidth(options.width);
		this.setLineSize(options.lineSize);
		this.setMaxValue(options.maxValue);
		this.setStatusType(options.statusType);
		this.setColor(options.color);
		this.setTextBefore(options.textBefore);
		this.setTextAfter(options.textAfter);
		this.setFill(options.fill);
	};

	/**
	 *
	 * @enum {string}
	 */
	BX.UI.ProgressRound.Status = {
		COUNTER: "COUNTER",
		PERCENT: "PERCENT",
		INCIRCLE: "INCIRCLE",
		INCIRCLECOUNTER: "INCIRCLECOUNTER",
		NONE: "NONE",
	};

	/**
	 *
	 * @enum {string}
	 */
	BX.UI.ProgressRound.Color = {
		DANGER: "ui-progressround-danger",
		SUCCESS: "ui-progressround-success",
		PRIMARY: "ui-progressround-primary",
		WARNING: "ui-progressround-warning"
	};

	BX.UI.ProgressRound.prototype =
		{
			//region Parameters
			getValue: function()
			{
				return this.value;
			},

			setValue: function(value)
			{
				if (BX.type.isNumber(value))
				{
					this.value = (value > this.maxValue) ? this.maxValue : value;
				}
			},

			getWidth: function()
			{
				return this.width;
			},

			setWidth: function(value)
			{
				if (BX.type.isNumber(value))
				{
					this.width = value;
				}
			},

			getLineSize: function()
			{
				return this.lineSize;
			},

			setLineSize: function(value)
			{
				if (BX.type.isNumber(value))
				{
					this.lineSize = (value > (this.width / 2)) ? (this.width / 2) : value ;
				}
			},

			getMaxValue: function()
			{
				return this.maxValue;
			},

			setMaxValue: function(value)
			{
				if (BX.type.isNumber(value))
				{
					this.maxValue = value;
				}
			},

			setColor: function(color)
			{
				if (BX.type.isNotEmptyString(color))
				{
					BX.removeClass(this.getContainer(), this.color);
					this.color = color;
					BX.addClass(this.getContainer(), this.color);
				}
			},

			setFill: function(fill)
			{
				if (fill === true)
				{
					BX.addClass(this.getContainer(), "ui-progressbar-bg");
				}
				else
				{
					BX.removeClass(this.getContainer(), "ui-progressbar-bg");
				}
			},

			//endregion

			//region Text
			createTextBefore: function(text)
			{
				if ((this.textBeforeContainer === null) && (text !== null))
				{
					this.textBeforeContainer = BX.create("div", {
						props: {className: "ui-progressround-text-before"},
						html: text
					});
				}
			},

			getTextBefore: function()
			{
				if (this.textBeforeContainer === null)
				{
					this.createTextBefore(this.textBefore);
				}
				return this.textBeforeContainer;
			},

			setTextBefore: function(text)
			{
				if (this.textBeforeContainer === null)
				{
					this.createTextBefore(text);
				}
				else
				{
					BX.adjust(this.textBeforeContainer, {
						html: text
					});
				}
			},

			createTextAfter: function(text)
			{
				if ((this.textAfterContainer === null) && (text !== null))
				{
					this.textAfterContainer = BX.create("div", {
						props: {className: "ui-progressround-text-after"},
						html: text
					});
				}
			},

			getTextAfter: function()
			{
				if (this.textAfterContainer === null)
				{
					this.createTextAfter(this.textAfter);
				}
				return this.textAfterContainer;
			},

			setTextAfter: function(text)
			{
				if (this.textAfterContainer === null)
				{
					this.createTextAfter(text);
				}
				else
				{
					BX.adjust(this.textAfterContainer, {
						html: text
					});
				}
			},

			//endregion

			// region Status
			getStatus: function()
			{
				if (this.status === null)
				{
					if (this.getStatusType() === BX.UI.ProgressRound.Status.COUNTER)
					{
						this.status = BX.create("div", {
							props: { className: "ui-progressround-status" },
							text: this.getStatusCounter()
						});
					}
					else if (this.getStatusType() === BX.UI.ProgressRound.Status.INCIRCLE)
					{
						this.status = BX.create("div", {
							props: { className: "ui-progressround-status-percent-incircle" },
							text: this.getStatusPercent()
						});
					}
					else if (this.getStatusType() === BX.UI.ProgressRound.Status.INCIRCLECOUNTER)
					{
						this.status = BX.create("div", {
							props: { className: "ui-progressround-status-incircle" },
							text: this.getStatusCounter()
						});
					}
					else if (this.getStatusType() === BX.UI.ProgressRound.Status.PERCENT)
					{
						this.status = BX.create("div", {
							props: { className: "ui-progressround-status-percent" },
							text: this.getStatusPercent()
						});
					}
					else
					{
						this.status = BX.create("span", {});
					}
				}

				return this.status;
			},

			getStatusPercent: function()
			{
				if (this.maxValue === 0)
				{
					return "0%"
				}
				this.statusPercent = Math.round(this.getValue() / (this.getMaxValue() / 100));
				if (this.statusPercent > 100)
				{
					this.statusPercent = 100;
				}

				return this.statusPercent + "%";
			},

			getStatusCounter: function()
			{
				this.statusCounter = Math.round(this.getValue()) + " / " + Math.round(this.getMaxValue());
				if (Math.round(this.getValue()) > Math.round(this.getMaxValue()))
				{
					this.statusCounter = Math.round(this.getMaxValue()) + " / " + Math.round(this.getMaxValue());
				}

				return this.statusCounter;
			},

			setStatus: function()
			{
				if (this.getStatusType() === BX.UI.ProgressRound.Status.COUNTER)
				{
					BX.adjust(this.status, {
						text: this.getStatusCounter()
					});
				}
				else if (this.getStatusType() === BX.UI.ProgressRound.Status.PERCENT)
				{
					BX.adjust(this.status, {
						text: this.getStatusPercent()
					});
				}
				else if (this.getStatusType() === BX.UI.ProgressRound.Status.INCIRCLE)
				{
					BX.adjust(this.status, {
						text: this.getStatusPercent()
					});
				}
				else if (this.getStatusType() === BX.UI.ProgressRound.Status.INCIRCLECOUNTER)
				{
					BX.adjust(this.status, {
						text: this.getStatusCounter()
					});
				}
			},

			getStatusType: function()
			{
				return this.statusType;
			},

			setStatusType: function(type)
			{
				if (BX.type.isNotEmptyString(type))
				{
					this.statusType = type;
				}
			},

			//endregion

			// region ProgressRound
			getCircleFerence: function() {
				return (this.width / 2 - this.lineSize / 2) * 2 * 3.14;
			},

			getCircleProgress: function() {
				return this.getCircleFerence() - (this.getCircleFerence() / this.maxValue * this.value);
			},

			getBar: function() {
				var factRadius = this.width / 2 - (this.lineSize / 2);

				this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
				this.svg.setAttributeNS(null, 'class', 'ui-progressround-track-bar');
				this.svg.setAttributeNS(null, 'viewport', '0 0 ' + this.width + ' ' + this.width);
				this.svg.setAttributeNS(null, 'width', this.width);
				this.svg.setAttributeNS(null, 'height', this.width);

				this.progressBg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
				this.progressBg.setAttributeNS(null, 'r', factRadius);
				this.progressBg.setAttributeNS(null, 'cx', (this.width / 2));
				this.progressBg.setAttributeNS(null, 'cy', (this.width / 2));
				this.progressBg.setAttributeNS(null, 'stroke-width', this.lineSize);
				this.progressBg.setAttributeNS(null, 'class', 'ui-progressround-track-bar-bg');

				this.svg.appendChild(this.progressBg);

				this.progressMove = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
				this.progressMove.setAttributeNS(null, 'r', factRadius);
				this.progressMove.setAttributeNS(null, 'cx', (this.width / 2));
				this.progressMove.setAttributeNS(null, 'cy', (this.width / 2));
				this.progressMove.setAttributeNS(null, 'stroke-width', this.lineSize);
				this.progressMove.setAttributeNS(null, 'stroke-dasharray', this.getCircleFerence());
				this.progressMove.setAttributeNS(null, 'stroke-dashoffset', this.getCircleFerence());
				this.progressMove.setAttributeNS(null, 'class', 'ui-progressround-track-bar-progress');

				this.svg.appendChild(this.progressMove);

				return this.svg;
			},

			animateProgressBar: function() {
				this.svg.setAttributeNS(null, 'class', 'task-report-circle-bar task-report-circle-bar-animate');

				var progressDashoffset = (this.maxValue === 0) ? this.getCircleFerence() : this.getCircleProgress();

				this.progressMove.setAttributeNS(null, 'stroke-dashoffset', progressDashoffset);
			},

			update: function(value)
			{
				this.setValue(value);
				this.setStatus();

				if (this.svg === null)
				{
					this.getBar();
				}

				this.animateProgressBar();
			},

			//endregion

			getContainer: function()
			{
				if (this.container === null)
				{
					this.container = BX.create("div", {
						props: { className: "ui-progressround" },
						children: [
							this.getTextAfter(),
							this.getTextBefore(),
							BX.create("div", {
								props: { className: "ui-progressround-track" },
								children: [
									this.getStatus(),
									this.getBar(),
									this.animateProgressBar()
								]
							})
						]
					});
				}

				return this.container;
			}
		};

})();