@aldabil/next-progress
Version:
Probably the easiest progress bar/skeleton for Next.js
139 lines (138 loc) • 6.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var defaultValues = {
type: "bar",
background: "#aaaaaa",
height: 5,
};
var defaultSVG = "\n<svg width=\"150px\" height=\"50px\" version=\"1.1\" viewBox=\"0 0 150 50\" xmlns=\"http://www.w3.org/2000/svg\">\n<g transform=\"translate(115,-245)\">\n<text transform=\"scale(.86637 1.1542)\" x=\"18.282198\" y=\"245.38565\" style=\"font-family:sans-serif;font-size:29.982px;letter-spacing:0px;line-height:1.25;stroke-width:.74956;word-spacing:0px\" xml:space=\"preserve\"><tspan x=\"18.282198\" y=\"245.38565\" style=\"stroke-width:.74956\">Your SVG</tspan></text>\n </g>\n</svg>\n";
var Progress = /** @class */ (function () {
function Progress(initials) {
this.from = 0.1;
this.to = 1;
this.timer = null;
this.type = initials.type;
this.background = initials.background;
this.height = initials.height;
}
Object.defineProperty(Progress.prototype, "body", {
get: function () {
return document.getElementsByTagName("body");
},
enumerable: false,
configurable: true
});
Object.defineProperty(Progress.prototype, "bar", {
get: function () {
return document.getElementById("progress__bar");
},
enumerable: false,
configurable: true
});
Object.defineProperty(Progress.prototype, "fullpage", {
get: function () {
return document.getElementById("progress__fullpage");
},
enumerable: false,
configurable: true
});
Progress.prototype.start = function () {
this._unsubscribe();
if (this.type === "fullpage") {
this._startFullpage();
}
else if (this.type === "bar") {
this._startBar();
}
};
Progress.prototype.complete = function () {
this._unsubscribe();
if (this.type === "bar") {
var bar = this.bar;
if (bar) {
bar.style.width = "100%";
bar.style.opacity = "0";
}
}
else if (this.type === "fullpage") {
var modal = this.fullpage;
if (modal) {
modal.remove();
}
}
};
Progress.prototype.configure = function (configs) {
this.type = configs.type || defaultValues.type;
this.background = configs.background || defaultValues.background;
this.height = configs.height || defaultValues.height;
this.svg = configs.svg || defaultSVG;
};
/**
* Inners
*/
Progress.prototype._startFullpage = function () {
var body = this.body;
if (!body[0])
return;
var html = "\n <div id=\"progress__fullpage\" role=\"none presentation\" tabindex=\"-1\">\n <style>\n #progress__fullpage {\n position: fixed;\n width: 100%;\n height: 100%;\n z-index: 9000;\n opacity: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n }\n .progress__fullpage__inner{\n padding: 1rem;\n background: #ffffff;\n color:#a9a9a9;\n border-radius: 5px;\n min-width: 100px;\n }\n .progress__fullpage__inner_skeleton svg{\n fill: url(#progress__fullpage__inner_skeleton);\n }\n </style>\n <div class=\"progress__fullpage__inner\">\n <div class=\"progress__fullpage__inner_skeleton\">\n " + this.svg + "\n </div>\n </div>\n </div>\n ";
var modal = this.fullpage;
if (modal) {
modal.remove();
}
body[0].insertAdjacentHTML("afterbegin", html);
var newModal = this.fullpage;
var svg = document.querySelector(".progress__fullpage__inner_skeleton svg");
svg === null || svg === void 0 ? void 0 : svg.insertAdjacentHTML("afterbegin", "<defs>\n <linearGradient id=\"progress__fullpage__inner_skeleton\">\n <stop offset=\"0%\" stop-color=\"#a9a9a9\" />\n <stop offset=\"15%\" stop-color=\"#a9a9a9\" />\n <stop offset=\"50%\" stop-color=\"#dbdbdb\" />\n <stop offset=\"85%\" stop-color=\"#a9a9a9\" />\n <stop offset=\"100%\" stop-color=\"#a9a9a9\" />\n <animateTransform attributeName=\"gradientTransform\"\n type=\"translate\"\n from=\"-1 0\"\n to=\"1 0\"\n begin=\"0s\"\n dur=\"1.5s\"\n repeatCount=\"indefinite\"/>\n </linearGradient>\n </defs>");
newModal.style.background = this.background;
this.timer = setTimeout(function () {
newModal.style.opacity = "1";
}, 1);
};
Progress.prototype._startBar = function () {
var _this = this;
var body = this.body;
if (!body[0])
return;
var html = "\n <div id=\"progress__bar\">\n <style>\n #progress__bar {\n position: fixed;\n width: 0;\n opacity:0;\n top:0;\n left:0;\n z-index: 9000;\n transition: all 500ms ease-in-out;\n border-radius: 0 2px 2px 0;\n box-shadow: 0 1px 3px #696969;\n }\n </style>\n </div>\n ";
var bar = this.bar;
if (bar) {
bar.remove();
}
body[0].insertAdjacentHTML("afterbegin", html);
var newBar = this.bar;
this.from = 0;
newBar.style.width = this.from * 100 + "%";
newBar.style.opacity = "1";
newBar.style.height = this.height + "px";
newBar.style.background = this.background;
this.timer = setInterval(function () { return _this._increment(); }, 200);
};
Progress.prototype._increment = function () {
var incrementer = 0.2;
if (this.to - this.from >= 0.65) {
incrementer = 0.06;
}
else if (this.to - this.from >= 0.3) {
incrementer = 0.02;
}
else if (this.to - this.from >= 0) {
incrementer = 0.01;
}
else {
return this._unsubscribe();
}
var bar = this.bar;
if (bar) {
this.from += incrementer;
bar.style.width = this.from * 99 + "%";
}
};
Progress.prototype._unsubscribe = function () {
if (this.timer) {
clearTimeout(this.timer);
clearInterval(this.timer);
}
};
return Progress;
}());
exports.default = new Progress(defaultValues);