565 lines
18 KiB
JavaScript
Executable file
565 lines
18 KiB
JavaScript
Executable file
var __extends =
|
|
(this && this.__extends) ||
|
|
(function () {
|
|
var extendStatics = function (d, b) {
|
|
extendStatics =
|
|
Object.setPrototypeOf ||
|
|
({ __proto__: [] } instanceof Array &&
|
|
function (d, b) {
|
|
d.__proto__ = b;
|
|
}) ||
|
|
function (d, b) {
|
|
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
|
|
};
|
|
return extendStatics(d, b);
|
|
};
|
|
return function (d, b) {
|
|
extendStatics(d, b);
|
|
function __() {
|
|
this.constructor = d;
|
|
}
|
|
d.prototype =
|
|
b === null
|
|
? Object.create(b)
|
|
: ((__.prototype = b.prototype), new __());
|
|
};
|
|
})();
|
|
var lv = /** @class */ (function () {
|
|
function lv() {
|
|
this.observer = new MutationObserver(this.callback);
|
|
}
|
|
/**
|
|
* iterates through all elements and calls function create on them
|
|
*/
|
|
lv.prototype.initLoaderAll = function () {
|
|
var divs = document.getElementsByTagName("DIV");
|
|
for (var i = 0; i < divs.length; i++) {
|
|
if (!divs[i].hasChildNodes()) {
|
|
lv.create(divs[i]);
|
|
}
|
|
}
|
|
};
|
|
/**
|
|
* returns list of non-main classes (every except the one that specifies the element)
|
|
* @param classList
|
|
* @param notIncludingClass
|
|
*/
|
|
lv.getModifyingClasses = function (classList, notIncludingClass) {
|
|
var modifyingClasses = [];
|
|
for (var i = 0; i < classList.length; i++) {
|
|
if (classList[i] != notIncludingClass) {
|
|
modifyingClasses.push(classList[i]);
|
|
}
|
|
}
|
|
return modifyingClasses;
|
|
};
|
|
/**
|
|
* decides type of passed element and returns its object
|
|
* @param element - pass existing element or null
|
|
* @param classString - classes separated with one space that specifies type of element, optional, only when passing null instead of element
|
|
*/
|
|
lv.create = function (element, classString) {
|
|
if (element === void 0) {
|
|
element = null;
|
|
}
|
|
var classes = [];
|
|
if (element != null) {
|
|
var listOfClasses = element.classList;
|
|
for (var i = 0; i < listOfClasses.length; i++) {
|
|
classes.push(listOfClasses[i]);
|
|
}
|
|
} else if (classString != null) {
|
|
classes = classString.split(" ");
|
|
}
|
|
for (var i = 0; i < classes.length; i++) {
|
|
switch (classes[i]) {
|
|
case "lv-bars":
|
|
return new lv.Circle(
|
|
element,
|
|
lv.CircleType.Bars,
|
|
lv.getModifyingClasses(classes, "lv-bars")
|
|
);
|
|
case "lv-squares":
|
|
return new lv.Circle(
|
|
element,
|
|
lv.CircleType.Squares,
|
|
lv.getModifyingClasses(classes, "lv-squares")
|
|
);
|
|
case "lv-circles":
|
|
return new lv.Circle(
|
|
element,
|
|
lv.CircleType.Circles,
|
|
lv.getModifyingClasses(classes, "lv-circles")
|
|
);
|
|
case "lv-dots":
|
|
return new lv.Circle(
|
|
element,
|
|
lv.CircleType.Dots,
|
|
lv.getModifyingClasses(classes, "lv-dots")
|
|
);
|
|
case "lv-spinner":
|
|
return new lv.Circle(
|
|
element,
|
|
lv.CircleType.Spinner,
|
|
lv.getModifyingClasses(classes, "lv-spinner")
|
|
);
|
|
case "lv-dashed":
|
|
return new lv.Circle(
|
|
element,
|
|
lv.CircleType.Dashed,
|
|
lv.getModifyingClasses(classes, "lv-dashed")
|
|
);
|
|
case "lv-determinate_circle":
|
|
return new lv.Circle(
|
|
element,
|
|
lv.CircleType.DeterminateCircle,
|
|
lv.getModifyingClasses(classes, "lv-determinate_circle")
|
|
);
|
|
case "lv-line":
|
|
return new lv.Bar(
|
|
element,
|
|
lv.BarType.Line,
|
|
lv.getModifyingClasses(classes, "lv-line")
|
|
);
|
|
case "lv-bordered_line":
|
|
return new lv.Bar(
|
|
element,
|
|
lv.BarType.BorderedLine,
|
|
lv.getModifyingClasses(classes, "lv-bordered_line")
|
|
);
|
|
case "lv-determinate_line":
|
|
return new lv.Bar(
|
|
element,
|
|
lv.BarType.DeterminateLine,
|
|
lv.getModifyingClasses(classes, "lv-determinate_line")
|
|
);
|
|
case "lv-determinate_bordered_line":
|
|
return new lv.Bar(
|
|
element,
|
|
lv.BarType.DeterminateBorderedLine,
|
|
lv.getModifyingClasses(classes, "lv-determinate_bordered_line")
|
|
);
|
|
}
|
|
}
|
|
return null;
|
|
};
|
|
/**
|
|
* observes for changes in DOM and creates new element's objects
|
|
* @param mutationList
|
|
* @param observer
|
|
*/
|
|
lv.prototype.callback = function (mutationList, observer) {
|
|
for (var i = 0; i < mutationList.length; i++) {
|
|
if (mutationList[i].type === "childList") {
|
|
try {
|
|
if (mutationList[i].addedNodes[0].classList.length > 0) {
|
|
// filling the node with divs when it is empty
|
|
lv.create(mutationList[i].addedNodes[0]);
|
|
}
|
|
} catch (error) {}
|
|
}
|
|
}
|
|
};
|
|
lv.prototype.startObserving = function () {
|
|
this.observer.observe(document.body, { childList: true, subtree: true });
|
|
};
|
|
lv.prototype.stopObserving = function () {
|
|
this.observer.disconnect();
|
|
};
|
|
return lv;
|
|
})();
|
|
(function (lv) {
|
|
/**
|
|
* specifies functions same for all elements
|
|
*/
|
|
var ElementBase = /** @class */ (function () {
|
|
function ElementBase(element) {
|
|
this.element = element === null ? document.createElement("div") : element;
|
|
}
|
|
ElementBase.prototype.show = function () {
|
|
this.element.style.display = null;
|
|
};
|
|
ElementBase.prototype.hide = function () {
|
|
this.element.style.display = "none";
|
|
};
|
|
ElementBase.prototype.remove = function () {
|
|
this.element.parentNode.removeChild(this.element);
|
|
};
|
|
ElementBase.prototype.setLabel = function (labelText) {
|
|
this.element.setAttribute("data-label", labelText);
|
|
};
|
|
ElementBase.prototype.removeLabel = function () {
|
|
this.element.removeAttribute("data-label");
|
|
};
|
|
ElementBase.prototype.showPercentage = function () {
|
|
this.element.setAttribute("data-percentage", "true");
|
|
};
|
|
ElementBase.prototype.hidePercentage = function () {
|
|
this.element.removeAttribute("data-percentage");
|
|
};
|
|
ElementBase.prototype.setId = function (idText) {
|
|
this.element.setAttribute("id", idText);
|
|
};
|
|
ElementBase.prototype.removeId = function () {
|
|
this.element.removeAttribute("id");
|
|
};
|
|
/**
|
|
* adds class or classes to element
|
|
* @param classString - string that contains classes separated with one space
|
|
*/
|
|
ElementBase.prototype.addClass = function (classString) {
|
|
var classList = classString.split(" ");
|
|
for (var i = 0; i < classList.length; i++) {
|
|
this.element.classList.add(classList[i]);
|
|
}
|
|
};
|
|
/**
|
|
* if element contains specified class or classes, it/they are removed
|
|
* @param classString - string that contains classes separated with one space
|
|
*/
|
|
ElementBase.prototype.removeClass = function (classString) {
|
|
var classList = classString.split(" ");
|
|
for (var i = 0; i < classList.length; i++) {
|
|
if (this.element.classList.contains(classList[i])) {
|
|
this.element.classList.remove(classList[i]);
|
|
}
|
|
}
|
|
};
|
|
/**
|
|
* returns DOM element - needed for placing or removing the element with jquery
|
|
*/
|
|
ElementBase.prototype.getElement = function () {
|
|
return this.element;
|
|
};
|
|
/**
|
|
* resets determinate element to 0
|
|
* @param maxValue
|
|
*/
|
|
ElementBase.prototype.reset = function (maxValue) {
|
|
this.update("set", 0, maxValue);
|
|
};
|
|
/**
|
|
* sets determinate element to 100%
|
|
* @param maxValue
|
|
*/
|
|
ElementBase.prototype.fill = function (maxValue) {
|
|
this.update("set", maxValue, maxValue);
|
|
};
|
|
/**
|
|
* adds positive or negative value to a determinate element
|
|
* @param addValue
|
|
* @param maxValue
|
|
*/
|
|
ElementBase.prototype.add = function (addValue, maxValue) {
|
|
this.update("add", addValue, maxValue);
|
|
};
|
|
/**
|
|
* sets loading bar to passed value
|
|
* @param value
|
|
* @param maxValue
|
|
*/
|
|
ElementBase.prototype.set = function (value, maxValue) {
|
|
this.update("set", value, maxValue);
|
|
};
|
|
/**
|
|
* initializes an element
|
|
* @param loaderElement
|
|
* @param description
|
|
*/
|
|
ElementBase.prototype.initLoader = function (loaderElement, description) {
|
|
// manual addition on specified object
|
|
if (!loaderElement.hasChildNodes()) {
|
|
this.fillElement(
|
|
loaderElement,
|
|
description.className,
|
|
description.divCount
|
|
);
|
|
}
|
|
};
|
|
/**
|
|
* fills element with appropriate number of divs
|
|
* @param element
|
|
* @param elementClass
|
|
* @param divNumber
|
|
*/
|
|
ElementBase.prototype.fillElement = function (
|
|
element,
|
|
elementClass,
|
|
divNumber
|
|
) {
|
|
for (var i = 0; i < divNumber; i += 1) {
|
|
element.appendChild(document.createElement("DIV"));
|
|
}
|
|
if (
|
|
elementClass === "lv-determinate_circle" ||
|
|
elementClass === "lv-determinate_line" ||
|
|
elementClass === "lv-determinate_bordered_line"
|
|
) {
|
|
element.lastElementChild.innerHTML = "0";
|
|
}
|
|
if (!element.classList.contains(elementClass)) {
|
|
element.classList.add(elementClass);
|
|
}
|
|
};
|
|
return ElementBase;
|
|
})();
|
|
lv.ElementBase = ElementBase;
|
|
/**
|
|
* class for linear elements
|
|
*/
|
|
var Bar = /** @class */ (function (_super) {
|
|
__extends(Bar, _super);
|
|
/**
|
|
* creates linear element
|
|
* @param element
|
|
* @param barType
|
|
* @param classes
|
|
*/
|
|
function Bar(element, barType, classes) {
|
|
if (classes === void 0) {
|
|
classes = null;
|
|
}
|
|
var _this = _super.call(this, element) || this;
|
|
_this.divCount = {};
|
|
_this.divCount[BarType.Line] = { className: "lv-line", divCount: 1 };
|
|
_this.divCount[BarType.BorderedLine] = {
|
|
className: "lv-bordered_line",
|
|
divCount: 1,
|
|
};
|
|
_this.divCount[BarType.DeterminateLine] = {
|
|
className: "lv-determinate_line",
|
|
divCount: 2,
|
|
};
|
|
_this.divCount[BarType.DeterminateBorderedLine] = {
|
|
className: "lv-determinate_bordered_line",
|
|
divCount: 2,
|
|
};
|
|
_this.initLoader(_this.element, _this.divCount[barType]);
|
|
for (var i = 0; i < classes.length; i++) {
|
|
_this.element.classList.add(classes[i]);
|
|
}
|
|
return _this;
|
|
}
|
|
/**
|
|
* type specific update function for linear element
|
|
* @param type
|
|
* @param newValue
|
|
* @param maxValue
|
|
*/
|
|
Bar.prototype.update = function (type, newValue, maxValue) {
|
|
// getting current width of line from the page
|
|
var line = this.element.firstElementChild;
|
|
var percentage = this.element.lastElementChild;
|
|
var currentWidth = parseFloat(line.style.width);
|
|
// protective condition for empty line
|
|
if (isNaN(currentWidth)) {
|
|
currentWidth = 0;
|
|
}
|
|
// end point of the animation
|
|
var goalWidth;
|
|
if (type === "add") {
|
|
goalWidth =
|
|
currentWidth + Math.round((newValue / maxValue) * 1000) / 10;
|
|
} else if (type === "set") {
|
|
goalWidth = Math.round((newValue / maxValue) * 1000) / 10;
|
|
}
|
|
// prevent overflow from both sides
|
|
if (goalWidth > 100) {
|
|
goalWidth = 100.0;
|
|
}
|
|
if (goalWidth < 0) {
|
|
goalWidth = 0;
|
|
}
|
|
var animation = setInterval(frame, 5);
|
|
function frame() {
|
|
if (currentWidth > goalWidth) {
|
|
// shortening the line
|
|
if (currentWidth < goalWidth + 0.01) {
|
|
clearInterval(animation);
|
|
} else {
|
|
currentWidth -= 0.1;
|
|
}
|
|
} else {
|
|
// extending the line
|
|
if (currentWidth > goalWidth - 0.01) {
|
|
clearInterval(animation);
|
|
} else {
|
|
currentWidth += 0.1;
|
|
}
|
|
}
|
|
line.style.width = currentWidth + "%";
|
|
// updating the percentage
|
|
percentage.innerHTML = currentWidth.toFixed(1);
|
|
}
|
|
};
|
|
return Bar;
|
|
})(ElementBase);
|
|
lv.Bar = Bar;
|
|
/**
|
|
* class for square or circular elements
|
|
*/
|
|
var Circle = /** @class */ (function (_super) {
|
|
__extends(Circle, _super);
|
|
/**
|
|
* creates square or circular element
|
|
* @param element
|
|
* @param circleType
|
|
* @param classes
|
|
*/
|
|
function Circle(element, circleType, classes) {
|
|
if (classes === void 0) {
|
|
classes = null;
|
|
}
|
|
var _this = _super.call(this, element) || this;
|
|
_this.divCount = {};
|
|
_this.divCount[CircleType.Bars] = { className: "lv-bars", divCount: 8 };
|
|
_this.divCount[CircleType.Squares] = {
|
|
className: "lv-squares",
|
|
divCount: 4,
|
|
};
|
|
_this.divCount[CircleType.Circles] = {
|
|
className: "lv-circles",
|
|
divCount: 12,
|
|
};
|
|
_this.divCount[CircleType.Dots] = { className: "lv-dots", divCount: 4 };
|
|
_this.divCount[CircleType.DeterminateCircle] = {
|
|
className: "lv-determinate_circle",
|
|
divCount: 4,
|
|
};
|
|
_this.divCount[CircleType.Spinner] = {
|
|
className: "lv-spinner",
|
|
divCount: 1,
|
|
};
|
|
_this.divCount[CircleType.Dashed] = {
|
|
className: "lv-dashed",
|
|
divCount: 1,
|
|
};
|
|
_this.initLoader(_this.element, _this.divCount[circleType]);
|
|
for (var i = 0; i < classes.length; i++) {
|
|
_this.element.classList.add(classes[i]);
|
|
}
|
|
return _this;
|
|
}
|
|
/**
|
|
* type specific update function for non-linear elements
|
|
* @param type
|
|
* @param newValue
|
|
* @param maxValue
|
|
*/
|
|
Circle.prototype.update = function (type, newValue, maxValue) {
|
|
var rotationOffset = -45; // initial rotation of the spinning div in css
|
|
// separating individual parts of the circle
|
|
var background = this.element.children[0];
|
|
var overlay = this.element.children[1];
|
|
var spinner = this.element.children[2];
|
|
var percentage = this.element.children[3];
|
|
// getting the colors defined in css
|
|
var backgroundColor = window.getComputedStyle(background).borderTopColor;
|
|
var spinnerColor = window.getComputedStyle(spinner).borderTopColor;
|
|
// computing current rotation of spinning part of circle using rotation matrix
|
|
var rotationMatrix = window
|
|
.getComputedStyle(spinner)
|
|
.getPropertyValue("transform")
|
|
.split("(")[1]
|
|
.split(")")[0]
|
|
.split(",");
|
|
var currentAngle =
|
|
Math.round(
|
|
Math.atan2(
|
|
parseFloat(rotationMatrix[1]),
|
|
parseFloat(rotationMatrix[0])
|
|
) *
|
|
(180 / Math.PI)
|
|
) - rotationOffset;
|
|
// safety conditions for full and empty circle (360 <=> 0 and that caused problems)
|
|
if (percentage.innerHTML === "100") {
|
|
currentAngle = 360;
|
|
}
|
|
if (currentAngle < 0) {
|
|
currentAngle += 360;
|
|
}
|
|
// end point of the animation
|
|
var goalAngle;
|
|
if (type === "add") {
|
|
goalAngle = currentAngle + Math.round((newValue / maxValue) * 360);
|
|
} else if (type === "set") {
|
|
goalAngle = Math.round((newValue / maxValue) * 360);
|
|
}
|
|
// prevent overflow to both sides
|
|
if (goalAngle > 360) {
|
|
goalAngle = 360;
|
|
}
|
|
if (goalAngle < 0) {
|
|
goalAngle = 0;
|
|
}
|
|
var id = setInterval(frame, 3);
|
|
function frame() {
|
|
if (currentAngle === goalAngle) {
|
|
// stopping the animation when end point is reached
|
|
clearInterval(id);
|
|
} else {
|
|
if (currentAngle < goalAngle) {
|
|
// "filling" the circle
|
|
if (currentAngle === 90) {
|
|
background.style.borderRightColor = spinnerColor;
|
|
overlay.style.borderTopColor = "transparent";
|
|
} else if (currentAngle === 180) {
|
|
background.style.borderBottomColor = spinnerColor;
|
|
} else if (currentAngle === 270) {
|
|
background.style.borderLeftColor = spinnerColor;
|
|
}
|
|
currentAngle += 1;
|
|
} else {
|
|
// "emptying the circle"
|
|
if (currentAngle === 270) {
|
|
background.style.borderLeftColor = backgroundColor;
|
|
} else if (currentAngle === 180) {
|
|
background.style.borderBottomColor = backgroundColor;
|
|
} else if (currentAngle === 90) {
|
|
background.style.borderRightColor = backgroundColor;
|
|
overlay.style.borderTopColor = backgroundColor;
|
|
}
|
|
currentAngle -= 1;
|
|
}
|
|
// rotating the circle
|
|
spinner.style.transform =
|
|
"rotate(" + (rotationOffset + currentAngle).toString() + "deg)";
|
|
// updating percentage
|
|
percentage.innerHTML = Math.round(
|
|
(currentAngle / 360) * 100
|
|
).toString();
|
|
}
|
|
}
|
|
};
|
|
return Circle;
|
|
})(ElementBase);
|
|
lv.Circle = Circle;
|
|
/**
|
|
* list of linear elements
|
|
*/
|
|
var BarType;
|
|
(function (BarType) {
|
|
BarType[(BarType["Line"] = 0)] = "Line";
|
|
BarType[(BarType["BorderedLine"] = 1)] = "BorderedLine";
|
|
BarType[(BarType["DeterminateLine"] = 2)] = "DeterminateLine";
|
|
BarType[(BarType["DeterminateBorderedLine"] = 3)] =
|
|
"DeterminateBorderedLine";
|
|
})((BarType = lv.BarType || (lv.BarType = {})));
|
|
/**
|
|
* list of non-linear elements
|
|
*/
|
|
var CircleType;
|
|
(function (CircleType) {
|
|
CircleType[(CircleType["Bars"] = 0)] = "Bars";
|
|
CircleType[(CircleType["Squares"] = 1)] = "Squares";
|
|
CircleType[(CircleType["Circles"] = 2)] = "Circles";
|
|
CircleType[(CircleType["Dots"] = 3)] = "Dots";
|
|
CircleType[(CircleType["DeterminateCircle"] = 4)] = "DeterminateCircle";
|
|
CircleType[(CircleType["Spinner"] = 5)] = "Spinner";
|
|
CircleType[(CircleType["Dashed"] = 6)] = "Dashed";
|
|
})((CircleType = lv.CircleType || (lv.CircleType = {})));
|
|
})(lv || (lv = {}));
|
|
|
|
export { lv };
|
|
|
|
//# sourceMappingURL=main.js.map
|