| Server IP : 37.220.80.31 / Your IP : 18.218.135.227 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/progressbar/src/ |
Upload File : |
// @flow
import {Dom, Tag, Type} from 'main.core';
import ProgressBarColor from './progressbar-color';
import ProgressBarSize from './progressbar-size';
import ProgressBarStatus from './progressbar-status';
type ProgressBarOptions = {
value: number;
maxValue: number;
color: ProgressBarColor;
size: ProgressBarSize | number;
width: number;
textBefore: string;
textAfter: string;
colorTrack: string;
colorBar: string;
statusType: string;
lineSize: number;
fill: boolean;
finished: boolean;
rotation: boolean;
};
export class ProgressBar {
static Color = ProgressBarColor;
static Size = ProgressBarSize;
static Status = ProgressBarStatus;
constructor(options = ProgressBarOptions)
{
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.status = null;
this.finished = false;
this.fill = Type.isBoolean(this.options.fill) ? this.options.fill : false;
this.column = Type.isBoolean(this.options.column) ? this.options.column : false;
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.statusType = Type.isString(this.options.statusType) ? this.options.statusType : BX.UI.ProgressBar.Status.NONE;
this.size = (Type.isStringFilled(this.options.size) || Type.isNumber(this.options.size)) ? this.options.size : BX.UI.ProgressBar.Size.MEDIUM;
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.ProgressBar.Color.PRIMARY;
// this.setStatusType(options.statusType);
// this.setColorTrack(options.colorTrack);
// this.setColorBar(options.colorBar);
}
//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;
}
setColor(color: ProgressBarColor): 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-bar-color:" + color + ";"
this.#setCustomColors(color)
}
return this;
}
setColorTrack(color: string): this
{
if (Type.isStringFilled(color))
{
this.colorTrack = color;
this.setFill(true);
color = "--ui-current-bar-bg-track-color:" + color + ";"
this.#setCustomColors(color)
}
return this;
}
#setCustomColors(value)
{
if (this.container === null)
{
this.createContainer();
}
this.setFill(false)
this.setColor(BX.UI.ProgressBar.Color.NONE)
let currentAttribute = this.container.getAttribute('style'),
customColorsValue = (!currentAttribute) ? value : currentAttribute + value;
this.container.setAttribute('style', customColorsValue)
}
setSize(size: ProgressBarSize | number): this
{
if (this.container === null)
{
this.createContainer();
}
if (Type.isStringFilled(size))
{
Dom.removeClass(this.container, this.size);
this.size = size;
Dom.addClass(this.container, this.size);
}
else if (Type.isNumber(size))
{
this.container.setAttribute('style', "--ui-current-bar-size:" + size + "px;")
this.size = size;
}
return this;
}
setFill(fill: boolean): this
{
if (this.container === null)
{
this.createContainer();
}
if (fill)
{
Dom.addClass(this.container, "ui-progressbar-bg");
}
else
{
Dom.removeClass(this.container, "ui-progressbar-bg");
}
return this;
}
setColumn(column: boolean): this
{
if (this.container === null)
{
this.createContainer();
}
if (column === true)
{
Dom.addClass(this.container, "ui-progressbar-column");
}
else
{
Dom.removeClass(this.container, "ui-progressbar-column");
}
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-progressbar-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-progressbar-text-after">${text}</div>
`;
}
}
getTextAfter()
{
if (!this.textAfterContainer)
{
this.createTextAfter(this.textAfter);
}
return this.textAfterContainer;
}
//endregion
// region Status
setStatus()
{
if (this.getStatusType() === BX.UI.ProgressBar.Status.COUNTER)
{
Dom.adjust(this.status, {
text: this.getStatusCounter()
});
}
else if (this.getStatusType() === BX.UI.ProgressBar.Status.PERCENT)
{
Dom.adjust(this.status, {
text: this.getStatusPercent()
});
}
}
getStatus()
{
if (!this.status)
{
if (this.getStatusType() === BX.UI.ProgressBar.Status.COUNTER)
{
this.status = Tag.render`
<div class="ui-progressbar-status">${this.getStatusCounter()}</div>
`;
}
else if (this.getStatusType() === BX.UI.ProgressBar.Status.PERCENT)
{
this.status = Tag.render`
<div class="ui-progressbar-status-percent">${this.getStatusPercent()}</div>
`;
}
else
{
this.status = Dom.create("span", {});
}
}
return this.status;
}
getStatusPercent()
{
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()
{
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 ProgressBar
createContainer(): HTMLElement
{
if (this.container === null)
{
this.container = Dom.create("div", {
props: {className: "ui-progressbar"},
children: [
this.getTextAfter(),
this.getTextBefore(),
this.getStatus(),
BX.create("div", {
props: {className: "ui-progressbar-track"},
children: [
this.getBar()
]
})
]
});
this.setColor(this.color)
this.setColumn(this.column);
this.setSize(this.size);
this.setFill(this.fill);
this.setColorTrack(this.colorTrack);
this.setColorBar(this.colorBar);
}
}
getBar(): HTMLElement
{
if (this.bar === null)
{
this.bar = Dom.create("div", {
props: {className: "ui-progressbar-bar"},
style: {width: this.getStatusPercent()}
});
}
return this.bar;
}
update(value: number)
{
if (this.container === null)
{
this.createContainer();
}
this.setValue(value);
if (value >= this.maxValue)
{
setTimeout(function () {
Dom.addClass(this.container, "ui-progressbar-finished");
}.bind(this), 300);
this.finished = true;
}
else
{
Dom.removeClass(this.container, "ui-progressbar-finished");
this.finished = false;
}
this.setStatus();
if (this.bar === null)
{
this.getBar();
}
Dom.adjust(this.bar, {
style: {width: this.getStatusPercent()}
});
}
//endregion
getContainer(): Element
{
if (this.container === null)
{
this.createContainer();
}
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;
for (const property in this)
{
if (this.hasOwnProperty(property))
{
delete this[property];
}
}
Object.setPrototypeOf(this, null);
}
}