@quasarwork/qwik-city-nprogress
Version:
A simple Qwik City progress bar component using NProgress.
309 lines (308 loc) • 12.7 kB
JavaScript
import { componentQrl, inlinedQrl, useStylesQrl, useVisibleTaskQrl, useLexicalScope, _jsxQ } from "@builder.io/qwik";
import { useLocation } from "@builder.io/qwik-city";
var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
function getDefaultExportFromCjs(x) {
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
}
var nprogress = { exports: {} };
/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
* @license MIT */
(function(module, exports) {
(function(root, factory) {
{
module.exports = factory();
}
})(commonjsGlobal, function() {
var NProgress = {};
NProgress.version = "0.2.0";
var Settings = NProgress.settings = {
minimum: 0.08,
easing: "ease",
positionUsing: "",
speed: 200,
trickle: true,
trickleRate: 0.02,
trickleSpeed: 800,
showSpinner: true,
barSelector: '[role="bar"]',
spinnerSelector: '[role="spinner"]',
parent: "body",
template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
};
NProgress.configure = function(options) {
var key, value;
for (key in options) {
value = options[key];
if (value !== void 0 && options.hasOwnProperty(key))
Settings[key] = value;
}
return this;
};
NProgress.status = null;
NProgress.set = function(n) {
var started = NProgress.isStarted();
n = clamp(n, Settings.minimum, 1);
NProgress.status = n === 1 ? null : n;
var progress = NProgress.render(!started), bar = progress.querySelector(Settings.barSelector), speed = Settings.speed, ease = Settings.easing;
progress.offsetWidth;
queue(function(next) {
if (Settings.positionUsing === "")
Settings.positionUsing = NProgress.getPositioningCSS();
css(bar, barPositionCSS(n, speed, ease));
if (n === 1) {
css(progress, {
transition: "none",
opacity: 1
});
progress.offsetWidth;
setTimeout(function() {
css(progress, {
transition: "all " + speed + "ms linear",
opacity: 0
});
setTimeout(function() {
NProgress.remove();
next();
}, speed);
}, speed);
} else {
setTimeout(next, speed);
}
});
return this;
};
NProgress.isStarted = function() {
return typeof NProgress.status === "number";
};
NProgress.start = function() {
if (!NProgress.status)
NProgress.set(0);
var work = function() {
setTimeout(function() {
if (!NProgress.status)
return;
NProgress.trickle();
work();
}, Settings.trickleSpeed);
};
if (Settings.trickle)
work();
return this;
};
NProgress.done = function(force) {
if (!force && !NProgress.status)
return this;
return NProgress.inc(0.3 + 0.5 * Math.random()).set(1);
};
NProgress.inc = function(amount) {
var n = NProgress.status;
if (!n) {
return NProgress.start();
} else {
if (typeof amount !== "number") {
amount = (1 - n) * clamp(Math.random() * n, 0.1, 0.95);
}
n = clamp(n + amount, 0, 0.994);
return NProgress.set(n);
}
};
NProgress.trickle = function() {
return NProgress.inc(Math.random() * Settings.trickleRate);
};
(function() {
var initial = 0, current = 0;
NProgress.promise = function($promise) {
if (!$promise || $promise.state() === "resolved") {
return this;
}
if (current === 0) {
NProgress.start();
}
initial++;
current++;
$promise.always(function() {
current--;
if (current === 0) {
initial = 0;
NProgress.done();
} else {
NProgress.set((initial - current) / initial);
}
});
return this;
};
})();
NProgress.render = function(fromStart) {
if (NProgress.isRendered())
return document.getElementById("nprogress");
addClass(document.documentElement, "nprogress-busy");
var progress = document.createElement("div");
progress.id = "nprogress";
progress.innerHTML = Settings.template;
var bar = progress.querySelector(Settings.barSelector), perc = fromStart ? "-100" : toBarPerc(NProgress.status || 0), parent = document.querySelector(Settings.parent), spinner;
css(bar, {
transition: "all 0 linear",
transform: "translate3d(" + perc + "%,0,0)"
});
if (!Settings.showSpinner) {
spinner = progress.querySelector(Settings.spinnerSelector);
spinner && removeElement(spinner);
}
if (parent != document.body) {
addClass(parent, "nprogress-custom-parent");
}
parent.appendChild(progress);
return progress;
};
NProgress.remove = function() {
removeClass(document.documentElement, "nprogress-busy");
removeClass(document.querySelector(Settings.parent), "nprogress-custom-parent");
var progress = document.getElementById("nprogress");
progress && removeElement(progress);
};
NProgress.isRendered = function() {
return !!document.getElementById("nprogress");
};
NProgress.getPositioningCSS = function() {
var bodyStyle = document.body.style;
var vendorPrefix = "WebkitTransform" in bodyStyle ? "Webkit" : "MozTransform" in bodyStyle ? "Moz" : "msTransform" in bodyStyle ? "ms" : "OTransform" in bodyStyle ? "O" : "";
if (vendorPrefix + "Perspective" in bodyStyle) {
return "translate3d";
} else if (vendorPrefix + "Transform" in bodyStyle) {
return "translate";
} else {
return "margin";
}
};
function clamp(n, min, max) {
if (n < min)
return min;
if (n > max)
return max;
return n;
}
function toBarPerc(n) {
return (-1 + n) * 100;
}
function barPositionCSS(n, speed, ease) {
var barCSS;
if (Settings.positionUsing === "translate3d") {
barCSS = { transform: "translate3d(" + toBarPerc(n) + "%,0,0)" };
} else if (Settings.positionUsing === "translate") {
barCSS = { transform: "translate(" + toBarPerc(n) + "%,0)" };
} else {
barCSS = { "margin-left": toBarPerc(n) + "%" };
}
barCSS.transition = "all " + speed + "ms " + ease;
return barCSS;
}
var queue = function() {
var pending = [];
function next() {
var fn = pending.shift();
if (fn) {
fn(next);
}
}
return function(fn) {
pending.push(fn);
if (pending.length == 1)
next();
};
}();
var css = function() {
var cssPrefixes = ["Webkit", "O", "Moz", "ms"], cssProps = {};
function camelCase(string) {
return string.replace(/^-ms-/, "ms-").replace(/-([\da-z])/gi, function(match, letter) {
return letter.toUpperCase();
});
}
function getVendorProp(name) {
var style = document.body.style;
if (name in style)
return name;
var i = cssPrefixes.length, capName = name.charAt(0).toUpperCase() + name.slice(1), vendorName;
while (i--) {
vendorName = cssPrefixes[i] + capName;
if (vendorName in style)
return vendorName;
}
return name;
}
function getStyleProp(name) {
name = camelCase(name);
return cssProps[name] || (cssProps[name] = getVendorProp(name));
}
function applyCss(element, prop, value) {
prop = getStyleProp(prop);
element.style[prop] = value;
}
return function(element, properties) {
var args = arguments, prop, value;
if (args.length == 2) {
for (prop in properties) {
value = properties[prop];
if (value !== void 0 && properties.hasOwnProperty(prop))
applyCss(element, prop, value);
}
} else {
applyCss(element, args[1], args[2]);
}
};
}();
function hasClass(element, name) {
var list = typeof element == "string" ? element : classList(element);
return list.indexOf(" " + name + " ") >= 0;
}
function addClass(element, name) {
var oldList = classList(element), newList = oldList + name;
if (hasClass(oldList, name))
return;
element.className = newList.substring(1);
}
function removeClass(element, name) {
var oldList = classList(element), newList;
if (!hasClass(element, name))
return;
newList = oldList.replace(" " + name + " ", " ");
element.className = newList.substring(1, newList.length - 1);
}
function classList(element) {
return (" " + (element.className || "") + " ").replace(/\s+/gi, " ");
}
function removeElement(element) {
element && element.parentNode && element.parentNode.removeChild(element);
}
return NProgress;
});
})(nprogress);
var nprogressExports = nprogress.exports;
const nProgress = /* @__PURE__ */ getDefaultExportFromCjs(nprogressExports);
const nProgressStyles = "/* Make clicks pass-through */\n#nprogress {\n pointer-events: none;\n}\n\n#nprogress .bar {\n background: #29d;\n\n position: fixed;\n z-index: 1031;\n top: 0;\n left: 0;\n\n width: 100%;\n height: 2px;\n}\n\n/* Fancy blur effect */\n#nprogress .peg {\n display: block;\n position: absolute;\n right: 0px;\n width: 100px;\n height: 100%;\n box-shadow: 0 0 10px #29d, 0 0 5px #29d;\n opacity: 1.0;\n\n -webkit-transform: rotate(3deg) translate(0px, -4px);\n -ms-transform: rotate(3deg) translate(0px, -4px);\n transform: rotate(3deg) translate(0px, -4px);\n}\n\n/* Remove these to get rid of the spinner */\n#nprogress .spinner {\n display: block;\n position: fixed;\n z-index: 1031;\n top: 15px;\n right: 15px;\n}\n\n#nprogress .spinner-icon {\n width: 18px;\n height: 18px;\n box-sizing: border-box;\n\n border: solid 2px transparent;\n border-top-color: #29d;\n border-left-color: #29d;\n border-radius: 50%;\n\n -webkit-animation: nprogress-spinner 400ms linear infinite;\n animation: nprogress-spinner 400ms linear infinite;\n}\n\n.nprogress-custom-parent {\n overflow: hidden;\n position: relative;\n}\n\n.nprogress-custom-parent #nprogress .spinner,\n.nprogress-custom-parent #nprogress .bar {\n position: absolute;\n}\n\n@-webkit-keyframes nprogress-spinner {\n 0% { -webkit-transform: rotate(0deg); }\n 100% { -webkit-transform: rotate(360deg); }\n}\n@keyframes nprogress-spinner {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n";
const qwikCityNProgressStyles = "#nprogress .bar {\n background: var(--qwik-city-nprogress-color, #29d);\n height: var(--qwik-city-nprogress-height, 2px);\n}\n\n/* Fancy blur effect */\n#nprogress .peg {\n box-shadow: 0 0 10px var(--qwik-city-nprogress-color, #29d),\n 0 0 5px var(--qwik-city-nprogress-color, #29d);\n}\n\n#nprogress .spinner-icon {\n border-top-color: var(--qwik-city-nprogress-color, #29d);\n border-left-color: var(--qwik-city-nprogress-color, #29d);\n}\n";
const QwikCityNprogress = /* @__PURE__ */ componentQrl(/* @__PURE__ */ inlinedQrl((props) => {
useStylesQrl(/* @__PURE__ */ inlinedQrl(nProgressStyles + qwikCityNProgressStyles, "QwikCityNprogress_component_useStyles_wg7hnvIIoXw"));
nProgress.configure(props.options ?? {});
const location = useLocation();
useVisibleTaskQrl(/* @__PURE__ */ inlinedQrl(({ track }) => {
const [location2] = useLexicalScope();
const isNavigating = track(() => location2.isNavigating);
if (isNavigating)
nProgress.start();
else
nProgress.done();
}, "QwikCityNprogress_component_useVisibleTask_edPDgE642Ds", [
location
]));
return /* @__PURE__ */ _jsxQ("style", {
dangerouslySetInnerHTML: `
:root {
${(props.options ?? {}).color ? `${"--qwik-city-nprogress-"}color: ${(props.options ?? {}).color};` : ""}
${(props.options ?? {}).height ? `${"--qwik-city-nprogress-"}height: ${(props.options ?? {}).height};` : ""}
}
`
}, null, null, 3, "tX_0");
}, "QwikCityNprogress_component_OYFdoX9wJ0E"));
export {
QwikCityNprogress
};