| Server IP : 37.220.80.31 / Your IP : 3.137.170.241 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/ |
Upload File : |
(function() {
'use strict';
BX.namespace('BX.UI.ProgressBar');
BX.UI.ProgressBar = 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.textAfter = null;
this.maxValue = 100;
this.value = 0;
this.statusType = BX.UI.ProgressBar.Status.PERCENT;
this.color = BX.UI.ProgressBar.Color.PRIMARY;
this.size = BX.UI.ProgressBar.Size.MEDIUM;
this.setValue(options.value);
this.setMaxValue(options.maxValue);
this.setStatusType(options.statusType);
this.setColor(options.color);
this.setSize(options.size);
this.setFill(options.fill);
this.setColumn(options.column);
this.setTextBefore(options.textBefore);
this.setTextAfter(options.textAfter);
};
/**
*
* @enum {string}
*/
BX.UI.ProgressBar.Status = {
COUNTER: "COUNTER",
PERCENT: "PERCENT",
NONE: "NONE"
};
/**
*
* @enum {string}
*/
BX.UI.ProgressBar.Color = {
DANGER: "ui-progressbar-danger",
SUCCESS: "ui-progressbar-success",
PRIMARY: "ui-progressbar-primary",
WARNING: "ui-progressbar-warning"
};
/**
*
* @enum {string}
*/
BX.UI.ProgressBar.Size = {
LARGE: "ui-progressbar-lg",
MEDIUM: "ui-progressbar-md"
};
BX.UI.ProgressBar.prototype =
{
//region Parameters
getValue: function()
{
return this.value;
},
setValue: function(value)
{
if (BX.type.isNumber(value))
{
this.value = (value > this.maxValue) ? this.maxValue : 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);
}
},
setSize: function(size)
{
if (BX.type.isNotEmptyString(size))
{
BX.removeClass(this.getContainer(), this.size);
this.size = size;
BX.addClass(this.getContainer(), this.size);
}
},
setFill: function(fill)
{
if (fill === true)
{
BX.addClass(this.getContainer(), "ui-progressbar-bg");
}
else
{
BX.removeClass(this.getContainer(), "ui-progressbar-bg");
}
},
setColumn: function(column)
{
if (column === true)
{
BX.addClass(this.getContainer(), "ui-progressbar-column");
}
else
{
BX.removeClass(this.getContainer(), "ui-progressbar-column");
}
},
//endregion
//region Text
getTextBefore: function()
{
if (this.textBefore === null)
{
this.textBefore = BX.create("div", {
props: { className: "ui-progressbar-text-before" },
html: this.options.textBefore
});
}
return this.textBefore;
},
setTextBefore: function(text)
{
BX.adjust(this.textBefore, {
html: text
});
},
getTextAfter: function()
{
if (this.textAfter === null)
{
this.textAfter = BX.create("div", {
props: { className: "ui-progressbar-text-after" },
html: this.options.textAfter
});
}
return this.textAfter;
},
setTextAfter: function(text)
{
BX.adjust(this.textAfter, {
html: text
});
},
//endregion
// region Status
getStatus: function()
{
if (this.status === null)
{
if (this.getStatusType() === BX.UI.ProgressBar.Status.COUNTER)
{
this.status = BX.create("div", {
props: { className: "ui-progressbar-status" },
text: this.getStatusCounter()
});
}
else if (this.getStatusType() === BX.UI.ProgressBar.Status.PERCENT)
{
this.status = BX.create("div", {
props: { className: "ui-progressbar-status-percent" },
text: this.getStatusPercent()
});
}
else
{
this.status = BX.create("span", {});
}
}
return this.status;
},
getStatusPercent: function()
{
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.ProgressBar.Status.COUNTER)
{
BX.adjust(this.status, {
text: this.getStatusCounter()
});
}
else if (this.getStatusType() === BX.UI.ProgressBar.Status.PERCENT)
{
BX.adjust(this.status, {
text: this.getStatusPercent()
});
}
},
getStatusType: function()
{
return this.statusType;
},
setStatusType: function(type)
{
if (BX.type.isNotEmptyString(type))
{
this.statusType = type;
}
},
//endregion
// region ProgressBar
getBar: function()
{
if (this.bar === null)
{
this.bar = BX.create("div", {
props: { className: "ui-progressbar-bar" },
style: { width: this.getStatusPercent() }
});
}
return this.bar;
},
update: function(value)
{
this.setValue(value);
this.setStatus();
if (this.bar === null)
{
this.getBar();
}
BX.adjust(this.bar, {
style: { width: this.getStatusPercent() }
});
},
//endregion
getContainer: function()
{
if (this.container === null)
{
this.container = BX.create("div", {
props: { className: "ui-progressbar" },
children: [
this.getTextAfter(),
this.getTextBefore(),
this.getStatus(),
BX.create("div", {
props: { className: "ui-progressbar-track" },
children: [
this.getBar()
]
})
]
});
}
return this.container;
}
};
})();