Update
This commit is contained in:
root
@@ -1,411 +0,0 @@
|
||||
(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;
|
||||
}
|
||||
};
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user