%PDF- %PDF-
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); } }