@vuepress/plugin-nprogress
Advanced tools
Comparing version 2.0.0-rc.41 to 2.0.0-rc.42
@@ -5,16 +5,4 @@ /** | ||
*/ | ||
interface NProgressOptions { | ||
minimum: number; | ||
template: string; | ||
easing: string; | ||
speed: number; | ||
trickle: boolean; | ||
trickleRate: number; | ||
trickleSpeed: number; | ||
parent: string; | ||
barSelector: string; | ||
} | ||
interface NProgress { | ||
settings: NProgressOptions; | ||
status: number | null; | ||
percent: number | null; | ||
set(number: number): NProgress; | ||
@@ -24,3 +12,3 @@ isStarted(): boolean; | ||
done(force?: boolean): NProgress; | ||
inc(amount?: number): NProgress; | ||
increase(amount?: number): NProgress; | ||
trickle(): NProgress; | ||
@@ -27,0 +15,0 @@ render(fromStart?: boolean): HTMLDivElement; |
@@ -5,34 +5,102 @@ /** | ||
*/ | ||
import { isDef } from '@vuepress/helper/client'; | ||
// Forked and modified from nprogress v0.2.0 | ||
const addClass = (element, name) => { | ||
element.classList.add(name); | ||
}; | ||
const removeClass = (element, name) => { | ||
element.classList.remove(name); | ||
}; | ||
const removeElement = (element) => { | ||
element?.parentNode?.removeChild(element); | ||
}; | ||
const clamp = (n, min, max) => { | ||
if (n < min) | ||
return min; | ||
if (n > max) | ||
return max; | ||
return n; | ||
}; | ||
const toBarPercent = (n) => (-1 + n) * 100; | ||
const queue = (() => { | ||
const pending = []; | ||
const nextStep = () => { | ||
const fn = pending.shift(); | ||
if (fn) { | ||
fn(nextStep); | ||
} | ||
}; | ||
return (fn) => { | ||
pending.push(fn); | ||
if (pending.length === 1) | ||
nextStep(); | ||
}; | ||
})(); | ||
const camelCase = (content) => content | ||
.replace(/^-ms-/, 'ms-') | ||
.replace(/-([\da-z])/gi, (_, letter) => letter.toUpperCase()); | ||
const addStyle = (() => { | ||
const cssPrefixes = ['Webkit', 'O', 'Moz', 'ms']; | ||
const cssProps = {}; | ||
const getVendorProp = (name) => { | ||
const { style } = document.body; | ||
if (name in style) | ||
return name; | ||
const capName = name.charAt(0).toUpperCase() + name.slice(1); | ||
let index = cssPrefixes.length; | ||
while (index--) { | ||
const vendorName = `${cssPrefixes[index]}${capName}`; | ||
if (vendorName in style) | ||
return vendorName; | ||
} | ||
return name; | ||
}; | ||
const getStyleProp = (name) => { | ||
const finalizedName = camelCase(name); | ||
// eslint-disable-next-line no-return-assign | ||
return (cssProps[finalizedName] ??= getVendorProp(finalizedName)); | ||
}; | ||
const applyCss = (element, prop, value) => { | ||
element.style[getStyleProp(prop)] = value; | ||
}; | ||
return (element, properties) => { | ||
for (const prop in properties) { | ||
const value = properties[prop]; | ||
if (Object.hasOwn(properties, prop) && isDef(value)) | ||
applyCss(element, prop, value); | ||
} | ||
}; | ||
})(); | ||
const SETTINGS = { | ||
minimum: 0.08, | ||
easing: 'ease', | ||
speed: 200, | ||
trickle: true, | ||
trickleRate: 0.02, | ||
trickleSpeed: 800, | ||
barSelector: '[role="bar"]', | ||
parent: 'body', | ||
template: '<div class="bar" role="bar"></div>', | ||
}; | ||
export const nprogress = { | ||
settings: { | ||
minimum: 0.08, | ||
easing: 'ease', | ||
speed: 200, | ||
trickle: true, | ||
trickleRate: 0.02, | ||
trickleSpeed: 800, | ||
barSelector: '[role="bar"]', | ||
parent: 'body', | ||
template: '<div class="bar" role="bar"></div>', | ||
}, | ||
status: null, | ||
set: (n) => { | ||
const started = nprogress.isStarted(); | ||
n = clamp(n, nprogress.settings.minimum, 1); | ||
nprogress.status = n === 1 ? null : n; | ||
const progress = nprogress.render(!started); | ||
const bar = progress.querySelector(nprogress.settings.barSelector); | ||
const speed = nprogress.settings.speed; | ||
const ease = nprogress.settings.easing; | ||
percent: null, | ||
isRendered: () => Boolean(document.getElementById('nprogress')), | ||
set: (progress) => { | ||
const { speed, easing } = SETTINGS; | ||
const inProgress = nprogress.isStarted(); | ||
const newPercent = clamp(progress, SETTINGS.minimum, 1); | ||
nprogress.percent = newPercent === 1 ? null : newPercent; | ||
const nprogressElement = nprogress.render(!inProgress); | ||
const barElement = nprogressElement.querySelector(SETTINGS.barSelector); | ||
// eslint-disable-next-line @typescript-eslint/no-unused-expressions | ||
progress.offsetWidth; /* Repaint */ | ||
nprogressElement.offsetWidth; /* Repaint */ | ||
queue((next) => { | ||
// Add transition | ||
css(bar, { | ||
transform: 'translate3d(' + toBarPerc(n) + '%,0,0)', | ||
transition: 'all ' + speed + 'ms ' + ease, | ||
addStyle(barElement, { | ||
transform: `translate3d(${toBarPercent(newPercent)}%,0,0)`, | ||
transition: `all ${speed}ms ${easing}`, | ||
}); | ||
if (n === 1) { | ||
if (newPercent === 1) { | ||
// Fade out | ||
css(progress, { | ||
addStyle(nprogressElement, { | ||
transition: 'none', | ||
@@ -42,6 +110,6 @@ opacity: '1', | ||
// eslint-disable-next-line @typescript-eslint/no-unused-expressions | ||
progress.offsetWidth; /* Repaint */ | ||
nprogressElement.offsetWidth; /* Repaint */ | ||
setTimeout(() => { | ||
css(progress, { | ||
transition: 'all ' + speed + 'ms linear', | ||
addStyle(nprogressElement, { | ||
transition: `all ${speed}ms linear`, | ||
opacity: '0', | ||
@@ -56,3 +124,5 @@ }); | ||
else { | ||
setTimeout(() => next(), speed); | ||
setTimeout(() => { | ||
next(); | ||
}, speed); | ||
} | ||
@@ -62,15 +132,15 @@ }); | ||
}, | ||
isStarted: () => typeof nprogress.status === 'number', | ||
isStarted: () => typeof nprogress.percent === 'number', | ||
start: () => { | ||
if (!nprogress.status) | ||
if (!nprogress.percent) | ||
nprogress.set(0); | ||
const work = () => { | ||
setTimeout(() => { | ||
if (!nprogress.status) | ||
if (!nprogress.percent) | ||
return; | ||
nprogress.trickle(); | ||
work(); | ||
}, nprogress.settings.trickleSpeed); | ||
}, SETTINGS.trickleSpeed); | ||
}; | ||
if (nprogress.settings.trickle) | ||
if (SETTINGS.trickle) | ||
work(); | ||
@@ -80,18 +150,18 @@ return nprogress; | ||
done: (force) => { | ||
if (!force && !nprogress.status) | ||
if (!force && !nprogress.percent) | ||
return nprogress; | ||
return nprogress.inc(0.3 + 0.5 * Math.random()).set(1); | ||
return nprogress.increase(0.3 + 0.5 * Math.random()).set(1); | ||
}, | ||
inc: (amount) => { | ||
let n = nprogress.status; | ||
if (!n) { | ||
increase: (amount) => { | ||
let { percent } = nprogress; | ||
if (!percent) { | ||
return nprogress.start(); | ||
} | ||
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); | ||
percent = clamp(percent + | ||
(typeof amount === 'number' | ||
? amount | ||
: (1 - percent) * clamp(Math.random() * percent, 0.1, 0.95)), 0, 0.994); | ||
return nprogress.set(percent); | ||
}, | ||
trickle: () => nprogress.inc(Math.random() * nprogress.settings.trickleRate), | ||
trickle: () => nprogress.increase(Math.random() * SETTINGS.trickleRate), | ||
render: (fromStart) => { | ||
@@ -102,112 +172,25 @@ if (nprogress.isRendered()) { | ||
addClass(document.documentElement, 'nprogress-busy'); | ||
const progress = document.createElement('div'); | ||
progress.id = 'nprogress'; | ||
progress.innerHTML = nprogress.settings.template; | ||
const bar = progress.querySelector(nprogress.settings.barSelector); | ||
const perc = fromStart ? '-100' : toBarPerc(nprogress.status || 0); | ||
const parent = document.querySelector(nprogress.settings.parent); | ||
css(bar, { | ||
const nprogressElement = document.createElement('div'); | ||
nprogressElement.id = 'nprogress'; | ||
nprogressElement.innerHTML = SETTINGS.template; | ||
const barElement = nprogressElement.querySelector(SETTINGS.barSelector); | ||
const parentElement = document.querySelector(SETTINGS.parent); | ||
const percent = fromStart ? '-100' : toBarPercent(nprogress.percent ?? 0); | ||
addStyle(barElement, { | ||
transition: 'all 0 linear', | ||
transform: 'translate3d(' + perc + '%,0,0)', | ||
transform: `translate3d(${percent}%,0,0)`, | ||
}); | ||
if (parent !== document.body) { | ||
addClass(parent, 'nprogress-custom-parent'); | ||
if (parentElement) { | ||
if (parentElement !== document.body) { | ||
addClass(parentElement, 'nprogress-custom-parent'); | ||
} | ||
parentElement.appendChild(nprogressElement); | ||
} | ||
parent?.appendChild(progress); | ||
return progress; | ||
return nprogressElement; | ||
}, | ||
remove: () => { | ||
removeClass(document.documentElement, 'nprogress-busy'); | ||
removeClass(document.querySelector(nprogress.settings.parent), 'nprogress-custom-parent'); | ||
const progress = document.getElementById('nprogress'); | ||
progress && removeElement(progress); | ||
removeClass(document.querySelector(SETTINGS.parent), 'nprogress-custom-parent'); | ||
removeElement(document.getElementById('nprogress')); | ||
}, | ||
isRendered: () => !!document.getElementById('nprogress'), | ||
}; | ||
const clamp = (n, min, max) => { | ||
if (n < min) | ||
return min; | ||
if (n > max) | ||
return max; | ||
return n; | ||
}; | ||
const toBarPerc = (n) => (-1 + n) * 100; | ||
const queue = (function () { | ||
const pending = []; | ||
function next() { | ||
const fn = pending.shift(); | ||
if (fn) { | ||
fn(next); | ||
} | ||
} | ||
return function (fn) { | ||
pending.push(fn); | ||
if (pending.length === 1) | ||
next(); | ||
}; | ||
})(); | ||
const css = (function () { | ||
const cssPrefixes = ['Webkit', 'O', 'Moz', 'ms']; | ||
const cssProps = {}; | ||
function camelCase(string) { | ||
return string | ||
.replace(/^-ms-/, 'ms-') | ||
.replace(/-([\da-z])/gi, function (match, letter) { | ||
return letter.toUpperCase(); | ||
}); | ||
} | ||
function getVendorProp(name) { | ||
const style = document.body.style; | ||
if (name in style) | ||
return name; | ||
let i = cssPrefixes.length; | ||
const capName = name.charAt(0).toUpperCase() + name.slice(1); | ||
let vendorName; | ||
while (i--) { | ||
vendorName = cssPrefixes[i] + capName; | ||
if (vendorName in style) | ||
return vendorName; | ||
} | ||
return name; | ||
} | ||
function getStyleProp(name) { | ||
name = camelCase(name); | ||
return (cssProps[name] ??= getVendorProp(name)); | ||
} | ||
function applyCss(element, prop, value) { | ||
prop = getStyleProp(prop); | ||
element.style[prop] = value; | ||
} | ||
return function (element, properties) { | ||
for (const prop in properties) { | ||
const value = properties[prop]; | ||
if (value !== undefined && | ||
Object.prototype.hasOwnProperty.call(properties, prop)) | ||
applyCss(element, prop, value); | ||
} | ||
}; | ||
})(); | ||
const hasClass = (element, name) => { | ||
const list = typeof element === 'string' ? element : classList(element); | ||
return list.indexOf(' ' + name + ' ') >= 0; | ||
}; | ||
const addClass = (element, name) => { | ||
const oldList = classList(element); | ||
const newList = oldList + name; | ||
if (hasClass(oldList, name)) | ||
return; | ||
element.className = newList.substring(1); | ||
}; | ||
const removeClass = (element, name) => { | ||
const oldList = classList(element); | ||
if (!hasClass(element, name)) | ||
return; | ||
const newList = oldList.replace(' ' + name + ' ', ' '); | ||
element.className = newList.substring(1, newList.length - 1); | ||
}; | ||
const classList = (element) => { | ||
return (' ' + (element.className || '') + ' ').replace(/\s+/gi, ' '); | ||
}; | ||
const removeElement = (element) => { | ||
element && element.parentNode && element.parentNode.removeChild(element); | ||
}; |
{ | ||
"name": "@vuepress/plugin-nprogress", | ||
"version": "2.0.0-rc.41", | ||
"version": "2.0.0-rc.42", | ||
"description": "VuePress plugin - nprogress", | ||
@@ -34,6 +34,7 @@ "keywords": [ | ||
"dependencies": { | ||
"vue": "^3.4.37" | ||
"@vuepress/helper": "2.0.0-rc.42", | ||
"vue": "^3.4.38" | ||
}, | ||
"peerDependencies": { | ||
"vuepress": "2.0.0-rc.14" | ||
"vuepress": "2.0.0-rc.15" | ||
}, | ||
@@ -43,3 +44,3 @@ "publishConfig": { | ||
}, | ||
"gitHead": "7382aceb24df0b09f36ddd603dd4a00597343651" | ||
"gitHead": "66e494405a7fbb02f6d46d7be670ec69605b7606" | ||
} |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
11564
3
282
+ Added@vuepress/helper@2.0.0-rc.42
+ Added@vuepress/cli@2.0.0-rc.15(transitive)
+ Added@vuepress/client@2.0.0-rc.15(transitive)
+ Added@vuepress/core@2.0.0-rc.15(transitive)
+ Added@vuepress/helper@2.0.0-rc.42(transitive)
+ Added@vuepress/markdown@2.0.0-rc.15(transitive)
+ Added@vuepress/shared@2.0.0-rc.15(transitive)
+ Added@vuepress/utils@2.0.0-rc.15(transitive)
+ Addedboolbase@1.0.0(transitive)
+ Addedcheerio@1.0.0(transitive)
+ Addedcheerio-select@2.1.0(transitive)
+ Addedcss-select@5.1.0(transitive)
+ Addedcss-what@6.1.0(transitive)
+ Addeddom-serializer@2.0.0(transitive)
+ Addeddomelementtype@2.3.0(transitive)
+ Addeddomhandler@5.0.3(transitive)
+ Addeddomutils@3.1.0(transitive)
+ Addedencoding-sniffer@0.2.0(transitive)
+ Addedfflate@0.8.2(transitive)
+ Addedhtmlparser2@9.1.0(transitive)
+ Addediconv-lite@0.6.3(transitive)
+ Addednth-check@2.1.1(transitive)
+ Addedparse5@7.1.2(transitive)
+ Addedparse5-htmlparser2-tree-adapter@7.0.0(transitive)
+ Addedparse5-parser-stream@7.1.2(transitive)
+ Addedsafer-buffer@2.1.2(transitive)
+ Addedundici@6.19.8(transitive)
+ Addedvuepress@2.0.0-rc.15(transitive)
+ Addedwhatwg-encoding@3.1.1(transitive)
+ Addedwhatwg-mimetype@4.0.0(transitive)
- Removed@vuepress/cli@2.0.0-rc.14(transitive)
- Removed@vuepress/client@2.0.0-rc.14(transitive)
- Removed@vuepress/core@2.0.0-rc.14(transitive)
- Removed@vuepress/markdown@2.0.0-rc.14(transitive)
- Removed@vuepress/shared@2.0.0-rc.14(transitive)
- Removed@vuepress/utils@2.0.0-rc.14(transitive)
- Removedvuepress@2.0.0-rc.14(transitive)
Updatedvue@^3.4.38