| Server IP : 37.220.80.31 / Your IP : 3.149.237.89 Web Server : Apache/2.4.52 (Ubuntu) System : Linux 3051455-guretool.twc1.net 5.15.0-107-generic #117-Ubuntu SMP Fri Apr 26 12:26:49 UTC 2024 x86_64 User : www-root ( 1010) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, MySQL : OFF | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /var/www/www-root/data/www/dev.artlot24.ru/bitrix/js/ui/progressround/src/ |
Upload File : |
// @flow
import {Dom, Tag, Type} from 'main.core';
import ProgressRoundColor from './progressround-color';
import ProgressRoundStatus from './progressround-status';
type ProgressRoundOptions = {
value: number;
maxValue: number;
color: ProgressRoundColor;
width: number;
textBefore: string;
textAfter: string;
colorTrack: string;
colorBar: string;
statusType: string;
lineSize: number;
fill: boolean;
finished: boolean;
rotation: boolean;
};
export default class ProgressRound // extends BX.UI.ProgressRound
{
static Color = ProgressRoundColor;
static Status = ProgressRoundStatus;
constructor(options: ProgressRoundOptions)
{
this.options = Type.isPlainObject(options) ? options : {};
this.value = Type.isNumber(this.options.value) ? this.options.value : 0;
this.maxValue = Type.isNumber(this.options.maxValue) ? this.options.maxValue : 100;
this.bar = null;
this.container = null;
this.width = Type.isNumber(this.options.width) ? this.options.width : 100;
this.lineSize = Type.isNumber(this.options.lineSize) ? this.options.lineSize : 5;
this.status = null;
this.statusType = Type.isString(this.options.statusType) ? this.options.statusType : BX.UI.ProgressRound.Status.NONE;
this.statusPercent = "0%";
this.statusCounter = "0 / 0";
this.textBefore = Type.isString(this.options.textBefore) ? this.options.textBefore : null;
this.textBeforeContainer = null;
this.textAfter = Type.isString(this.options.textAfter) ? this.options.textAfter : null;
this.textAfterContainer = null;
this.fill = false;
this.finished = false;
this.rotation = Type.isBoolean(this.options.rotation) ? this.options.rotation : false;
this.colorTrack = Type.isString(this.options.colorTrack) ? this.options.colorTrack : null;
this.colorBar = Type.isString(this.options.colorBar) ? this.options.colorBar : null;
this.color = Type.isString(this.options.color) ? this.options.color : BX.UI.ProgressRound.Color.PRIMARY;
}
//region Parameters
setValue(value: number): this
{
if (Type.isNumber(value))
{
this.value = (value > this.maxValue) ? this.maxValue : value;
}
return this;
}
getValue(): number
{
return this.value;
}
setMaxValue(value: number): this
{
if (Type.isNumber(value))
{
this.maxValue = value;
}
return this;
}
getMaxValue(): number
{
return this.maxValue;
}
finish()
{
this.update(this.maxValue)
}
isFinish(): boolean
{
return this.finished;
}
setWidth(value: number): this
{
if (Type.isNumber(value))
{
this.width = value;
}
return this;
}
getWidth(): number
{
return this.width;
}
setLineSize(value: number): this
{
if (Type.isNumber(value))
{
this.lineSize = (value > (this.width / 2)) ? (this.width / 2) : value;
}
return this;
}
getLineSize(): number
{
return this.lineSize;
}
setColor(color: ProgressRoundColor): this
{
if (Type.isStringFilled(color))
{
if (this.container === null)
{
this.createContainer();
}
Dom.removeClass(this.container, this.color);
this.color = color;
Dom.addClass(this.container, this.color);
}
return this;
}
setColorBar(color: string): this
{
if (Type.isStringFilled(color))
{
this.colorBar = color;
color = "--ui-current-round-color:" + color + ";"
this.#setCustomColors(color)
}
return this;
}
setColorTrack(color: string): this
{
if (Type.isStringFilled(color))
{
this.colorTrack = color;
this.setFill(true);
color = "--ui-current-round-bg-track-color:" + color + ";"
this.#setCustomColors(color)
}
return this;
}
#setCustomColors(value)
{
if (this.container === null)
{
this.createContainer();
}
let currentAttribute = this.container.getAttribute('style'),
customColorsValue = (!currentAttribute) ? value : currentAttribute + value;
this.container.setAttribute('style', customColorsValue)
}
setFill(fill: boolean): this
{
if (this.container === null)
{
this.createContainer();
}
if (Type.isBoolean(fill))
{
this.fill = fill;
if (fill === true)
{
Dom.addClass(this.container, "ui-progressround-bg");
}
else
{
Dom.removeClass(this.container, "ui-progressround-bg");
}
}
return this;
}
setRotation(rotation: boolean): this
{
if (this.container === null)
{
this.createContainer();
}
if (Type.isBoolean(rotation))
{
this.rotation = rotation;
if (rotation === true)
{
Dom.addClass(this.container, "ui-progressround-rotation");
}
else
{
Dom.removeClass(this.container, "ui-progressround-rotation");
}
}
return this;
}
//endregion
//region Text
setTextBefore(text: string): this
{
if (Type.isStringFilled(text))
{
this.textBefore = text;
if (!this.textBeforeContainer)
{
this.createTextBefore(text);
}
else
{
Dom.adjust(this.textBeforeContainer, {
html: text
});
}
}
}
createTextBefore(text: string)
{
if ((!this.textBeforeContainer) && Type.isStringFilled(text))
{
this.textBeforeContainer = Tag.render`
<div class="ui-progressround-text-before">${text}</div>
`;
}
}
getTextBefore()
{
if (!this.textBeforeContainer)
{
this.createTextBefore(this.textBefore);
}
return this.textBeforeContainer;
}
setTextAfter(text: string): this
{
if (Type.isStringFilled(text))
{
this.textAfter = text;
if (!this.textAfterContainer)
{
this.createTextAfter(text);
}
else
{
Dom.adjust(this.textAfterContainer, {
html: text
});
}
}
}
createTextAfter(text: string)
{
if ((!this.textAfterContainer) && Type.isStringFilled(text))
{
this.textAfterContainer = Tag.render`
<div class="ui-progressround-text-after">${text}</div>
`;
}
}
getTextAfter()
{
if (!this.textAfterContainer)
{
this.createTextAfter(this.textAfter);
}
return this.textAfterContainer;
}
//endregion
// region Status
setStatus()
{
if (this.getStatusType() === BX.UI.ProgressRound.Status.COUNTER)
{
Dom.adjust(this.status, {
text: this.getStatusCounter()
});
}
else if (this.getStatusType() === BX.UI.ProgressRound.Status.PERCENT)
{
Dom.adjust(this.status, {
text: this.getStatusPercent()
});
}
else if (this.getStatusType() === BX.UI.ProgressRound.Status.INCIRCLE)
{
Dom.adjust(this.status, {
text: this.getStatusPercent()
});
}
else if (this.getStatusType() === BX.UI.ProgressRound.Status.INCIRCLECOUNTER)
{
Dom.adjust(this.status, {
text: this.getStatusCounter()
});
}
}
getStatus()
{
if (!this.status)
{
if (this.getStatusType() === BX.UI.ProgressRound.Status.COUNTER)
{
this.status = Tag.render`
<div class="ui-progressround-status">${this.getStatusCounter()}</div>
`;
}
else if (this.getStatusType() === BX.UI.ProgressRound.Status.INCIRCLE)
{
this.status = Tag.render`
<div class="ui-progressround-status-percent-incircle">${this.getStatusPercent()}</div>
`;
}
else if (this.getStatusType() === BX.UI.ProgressRound.Status.INCIRCLECOUNTER)
{
this.status = Tag.render`
<div class="ui-progressround-status-incircle">${this.getStatusCounter()}</div>
`;
}
else if (this.getStatusType() === BX.UI.ProgressRound.Status.PERCENT)
{
this.status = Tag.render`
<div class="ui-progressround-status-percent">${this.getStatusPercent()}</div>
`;
}
else
{
this.status = Dom.create("span", {});
}
}
return this.status;
}
getStatusPercent(): string | number
{
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(): string | number
{
if (Math.round(this.getValue()) > Math.round(this.getMaxValue()))
{
this.statusCounter = Math.round(this.getMaxValue()) + " / " + Math.round(this.getMaxValue());
}
else
{
this.statusCounter = Math.round(this.getValue()) + " / " + Math.round(this.getMaxValue());
}
return this.statusCounter;
}
getStatusType()
{
return this.statusType;
}
setStatusType(type: string)
{
if (Type.isStringFilled(type))
{
this.statusType = type;
}
}
//endregion
// region ProgressRound
createContainer(): HTMLElement
{
if (this.container === null)
{
this.container = Dom.create("div", {
props: {className: "ui-progressround"},
children: [
this.getTextAfter(),
this.getTextBefore(),
Dom.create("div", {
props: {className: "ui-progressround-track"},
children: [
this.getStatus(),
this.getBar()
]
})
]
});
this.setStatusType(this.statusType);
this.setColor(this.color);
this.setRotation(this.rotation);
this.setFill(this.fill);
this.setColorTrack(this.colorTrack);
this.setColorBar(this.colorBar);
}
}
getCircleFerence()
{
return (this.width / 2 - this.lineSize / 2) * 2 * 3.14;
}
getCircleProgress()
{
return this.getCircleFerence() - (this.getCircleFerence() / this.maxValue * this.value);
}
getBar(): HTMLElement
{
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()
{
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(value)
{
if (this.container === null)
{
this.createContainer();
}
this.setValue(value);
if (value >= this.maxValue)
{
setTimeout(function () {
Dom.addClass(this.container, "ui-progressround-finished");
}.bind(this), 300);
this.finished = true;
}
else
{
Dom.removeClass(this.container, "ui-progressround-finished");
this.finished = false;
}
this.setStatus();
if (this.svg === null)
{
this.getBar();
}
this.animateProgressBar();
}
//endregion
getContainer(): Element
{
if (this.container === null)
{
this.createContainer();
}
this.animateProgressBar()
return this.container;
}
renderTo(node: HTMLElement): HTMLElement | null
{
if (Type.isDomNode(node))
{
return node.appendChild(this.getContainer());
}
return null;
}
destroy(): void
{
Dom.remove(this.container);
this.container = null;
this.finished = false;
this.textAfterContainer = null;
this.textBeforeContainer = null;
this.bar = null;
this.svg = null;
for (const property in this)
{
if (this.hasOwnProperty(property))
{
delete this[property];
}
}
Object.setPrototypeOf(this, null);
}
}