mirror of https://github.com/vuejs/vitepress
Divyansh Singh
2 years ago
parent
57116607b8
commit
589387f051
@ -0,0 +1,31 @@
|
|||||||
|
/* Make clicks pass-through */
|
||||||
|
#nprogress {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#nprogress .bar {
|
||||||
|
background: var(--vp-c-brand);
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
z-index: 1031;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Fancy blur effect */
|
||||||
|
#nprogress .peg {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
width: 100px;
|
||||||
|
height: 100%;
|
||||||
|
box-shadow: 0 0 10px var(--vp-c-brand), 0 0 5px var(--vp-c-brand);
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
-webkit-transform: rotate(3deg) translate(0px, -4px);
|
||||||
|
-ms-transform: rotate(3deg) translate(0px, -4px);
|
||||||
|
transform: rotate(3deg) translate(0px, -4px);
|
||||||
|
}
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
// Type definitions for NProgress 0.2
|
||||||
|
// Project: https://github.com/rstacruz/nprogress
|
||||||
|
// Definitions by: Judah Gabriel Himango <https://github.com/JudahGabriel>, Ovyerus <https://github.com/Ovyerus>
|
||||||
|
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||||
|
// TypeScript Version: 2.1
|
||||||
|
|
||||||
|
declare namespace nProgress {
|
||||||
|
interface NProgressOptions {
|
||||||
|
minimum: number
|
||||||
|
template: string
|
||||||
|
easing: string
|
||||||
|
speed: number
|
||||||
|
trickle: boolean
|
||||||
|
trickleSpeed: number
|
||||||
|
showSpinner: boolean
|
||||||
|
parent: string
|
||||||
|
positionUsing: string
|
||||||
|
barSelector: string
|
||||||
|
spinnerSelector: string
|
||||||
|
}
|
||||||
|
|
||||||
|
interface NProgress {
|
||||||
|
version: string
|
||||||
|
settings: NProgressOptions
|
||||||
|
status: number | null
|
||||||
|
|
||||||
|
configure(options: Partial<NProgressOptions>): NProgress
|
||||||
|
set(number: number): NProgress
|
||||||
|
isStarted(): boolean
|
||||||
|
start(): NProgress
|
||||||
|
done(force?: boolean): NProgress
|
||||||
|
inc(amount?: number): NProgress
|
||||||
|
trickle(): NProgress
|
||||||
|
|
||||||
|
/* Internal */
|
||||||
|
|
||||||
|
render(fromStart?: boolean): HTMLDivElement
|
||||||
|
remove(): void
|
||||||
|
isRendered(): boolean
|
||||||
|
getPositioningCSS(): 'translate3d' | 'translate' | 'margin'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare const nProgress: nProgress.NProgress
|
||||||
|
export default nProgress
|
||||||
@ -0,0 +1,505 @@
|
|||||||
|
/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
|
||||||
|
* @license MIT */
|
||||||
|
|
||||||
|
var NProgress = {}
|
||||||
|
|
||||||
|
NProgress.version = '0.2.0'
|
||||||
|
|
||||||
|
var Settings = (NProgress.settings = {
|
||||||
|
minimum: 0.08,
|
||||||
|
easing: 'linear',
|
||||||
|
positionUsing: '',
|
||||||
|
speed: 200,
|
||||||
|
trickle: true,
|
||||||
|
trickleSpeed: 200,
|
||||||
|
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>'
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Updates configuration.
|
||||||
|
*
|
||||||
|
* NProgress.configure({
|
||||||
|
* minimum: 0.1
|
||||||
|
* });
|
||||||
|
*/
|
||||||
|
NProgress.configure = function (options) {
|
||||||
|
var key, value
|
||||||
|
for (key in options) {
|
||||||
|
value = options[key]
|
||||||
|
if (value !== undefined && options.hasOwnProperty(key))
|
||||||
|
Settings[key] = value
|
||||||
|
}
|
||||||
|
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Last number.
|
||||||
|
*/
|
||||||
|
|
||||||
|
NProgress.status = null
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sets the progress bar status, where `n` is a number from `0.0` to `1.0`.
|
||||||
|
*
|
||||||
|
* NProgress.set(0.4);
|
||||||
|
* NProgress.set(1.0);
|
||||||
|
*/
|
||||||
|
|
||||||
|
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 /* Repaint */
|
||||||
|
|
||||||
|
queue(function (next) {
|
||||||
|
// Set positionUsing if it hasn't already been set
|
||||||
|
if (Settings.positionUsing === '')
|
||||||
|
Settings.positionUsing = NProgress.getPositioningCSS()
|
||||||
|
|
||||||
|
// Add transition
|
||||||
|
css(bar, barPositionCSS(n, speed, ease))
|
||||||
|
|
||||||
|
if (n === 1) {
|
||||||
|
// Fade out
|
||||||
|
css(progress, {
|
||||||
|
transition: 'none',
|
||||||
|
opacity: 1
|
||||||
|
})
|
||||||
|
progress.offsetWidth /* Repaint */
|
||||||
|
|
||||||
|
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'
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Shows the progress bar.
|
||||||
|
* This is the same as setting the status to 0%, except that it doesn't go backwards.
|
||||||
|
*
|
||||||
|
* NProgress.start();
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hides the progress bar.
|
||||||
|
* This is the *sort of* the same as setting the status to 100%, with the
|
||||||
|
* difference being `done()` makes some placebo effect of some realistic motion.
|
||||||
|
*
|
||||||
|
* NProgress.done();
|
||||||
|
*
|
||||||
|
* If `true` is passed, it will show the progress bar even if its hidden.
|
||||||
|
*
|
||||||
|
* NProgress.done(true);
|
||||||
|
*/
|
||||||
|
|
||||||
|
NProgress.done = function (force) {
|
||||||
|
if (!force && !NProgress.status) return this
|
||||||
|
|
||||||
|
return NProgress.inc(0.3 + 0.5 * Math.random()).set(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Increments by a random amount.
|
||||||
|
*/
|
||||||
|
|
||||||
|
NProgress.inc = function (amount) {
|
||||||
|
var n = NProgress.status
|
||||||
|
|
||||||
|
if (!n) {
|
||||||
|
return NProgress.start()
|
||||||
|
} else if (n > 1) {
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
if (typeof amount !== 'number') {
|
||||||
|
if (n >= 0 && n < 0.2) {
|
||||||
|
amount = 0.1
|
||||||
|
} else if (n >= 0.2 && n < 0.5) {
|
||||||
|
amount = 0.04
|
||||||
|
} else if (n >= 0.5 && n < 0.8) {
|
||||||
|
amount = 0.02
|
||||||
|
} else if (n >= 0.8 && n < 0.99) {
|
||||||
|
amount = 0.005
|
||||||
|
} else {
|
||||||
|
amount = 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
n = clamp(n + amount, 0, 0.994)
|
||||||
|
return NProgress.set(n)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
NProgress.trickle = function () {
|
||||||
|
return NProgress.inc()
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Waits for all supplied jQuery promises and
|
||||||
|
* increases the progress as the promises resolve.
|
||||||
|
*
|
||||||
|
* @param $promise jQUery Promise
|
||||||
|
*/
|
||||||
|
;(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
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
|
||||||
|
/**
|
||||||
|
* (Internal) renders the progress bar markup based on the `template`
|
||||||
|
* setting.
|
||||||
|
*/
|
||||||
|
|
||||||
|
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 = isDOM(Settings.parent)
|
||||||
|
? Settings.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
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Removes the element. Opposite of render().
|
||||||
|
*/
|
||||||
|
|
||||||
|
NProgress.remove = function () {
|
||||||
|
removeClass(document.documentElement, 'nprogress-busy')
|
||||||
|
var parent = isDOM(Settings.parent)
|
||||||
|
? Settings.parent
|
||||||
|
: document.querySelector(Settings.parent)
|
||||||
|
removeClass(parent, 'nprogress-custom-parent')
|
||||||
|
var progress = document.getElementById('nprogress')
|
||||||
|
progress && removeElement(progress)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checks if the progress bar is rendered.
|
||||||
|
*/
|
||||||
|
|
||||||
|
NProgress.isRendered = function () {
|
||||||
|
return !!document.getElementById('nprogress')
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Determine which positioning CSS rule to use.
|
||||||
|
*/
|
||||||
|
|
||||||
|
NProgress.getPositioningCSS = function () {
|
||||||
|
// Sniff on document.body.style
|
||||||
|
var bodyStyle = document.body.style
|
||||||
|
|
||||||
|
// Sniff prefixes
|
||||||
|
var vendorPrefix =
|
||||||
|
'WebkitTransform' in bodyStyle
|
||||||
|
? 'Webkit'
|
||||||
|
: 'MozTransform' in bodyStyle
|
||||||
|
? 'Moz'
|
||||||
|
: 'msTransform' in bodyStyle
|
||||||
|
? 'ms'
|
||||||
|
: 'OTransform' in bodyStyle
|
||||||
|
? 'O'
|
||||||
|
: ''
|
||||||
|
|
||||||
|
if (vendorPrefix + 'Perspective' in bodyStyle) {
|
||||||
|
// Modern browsers with 3D support, e.g. Webkit, IE10
|
||||||
|
return 'translate3d'
|
||||||
|
} else if (vendorPrefix + 'Transform' in bodyStyle) {
|
||||||
|
// Browsers without 3D support, e.g. IE9
|
||||||
|
return 'translate'
|
||||||
|
} else {
|
||||||
|
// Browsers without translate() support, e.g. IE7-8
|
||||||
|
return 'margin'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Helpers
|
||||||
|
*/
|
||||||
|
|
||||||
|
function isDOM(obj) {
|
||||||
|
if (typeof HTMLElement === 'object') {
|
||||||
|
return obj instanceof HTMLElement
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
obj &&
|
||||||
|
typeof obj === 'object' &&
|
||||||
|
obj.nodeType === 1 &&
|
||||||
|
typeof obj.nodeName === 'string'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function clamp(n, min, max) {
|
||||||
|
if (n < min) return min
|
||||||
|
if (n > max) return max
|
||||||
|
return n
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* (Internal) converts a percentage (`0..1`) to a bar translateX
|
||||||
|
* percentage (`-100%..0%`).
|
||||||
|
*/
|
||||||
|
|
||||||
|
function toBarPerc(n) {
|
||||||
|
return (-1 + n) * 100
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* (Internal) returns the correct CSS for changing the bar's
|
||||||
|
* position given an n percentage, and speed and ease from Settings
|
||||||
|
*/
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* (Internal) Queues a function to be executed.
|
||||||
|
*/
|
||||||
|
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
|
||||||
|
/**
|
||||||
|
* (Internal) Applies css properties to an element, similar to the jQuery
|
||||||
|
* css method.
|
||||||
|
*
|
||||||
|
* While this helper does assist with vendor prefixed property names, it
|
||||||
|
* does not perform any manipulation of values prior to setting styles.
|
||||||
|
*/
|
||||||
|
|
||||||
|
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 !== undefined && properties.hasOwnProperty(prop))
|
||||||
|
applyCss(element, prop, value)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
applyCss(element, args[1], args[2])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})()
|
||||||
|
|
||||||
|
/**
|
||||||
|
* (Internal) Determines if an element or space separated list of class names contains a class name.
|
||||||
|
*/
|
||||||
|
|
||||||
|
function hasClass(element, name) {
|
||||||
|
var list = typeof element == 'string' ? element : classList(element)
|
||||||
|
return list.indexOf(' ' + name + ' ') >= 0
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* (Internal) Adds a class to an element.
|
||||||
|
*/
|
||||||
|
|
||||||
|
function addClass(element, name) {
|
||||||
|
var oldList = classList(element),
|
||||||
|
newList = oldList + name
|
||||||
|
|
||||||
|
if (hasClass(oldList, name)) return
|
||||||
|
|
||||||
|
// Trim the opening space.
|
||||||
|
element.className = newList.substring(1)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* (Internal) Removes a class from an element.
|
||||||
|
*/
|
||||||
|
|
||||||
|
function removeClass(element, name) {
|
||||||
|
var oldList = classList(element),
|
||||||
|
newList
|
||||||
|
|
||||||
|
if (!hasClass(element, name)) return
|
||||||
|
|
||||||
|
// Replace the class name.
|
||||||
|
newList = oldList.replace(' ' + name + ' ', ' ')
|
||||||
|
|
||||||
|
// Trim the opening and closing spaces.
|
||||||
|
element.className = newList.substring(1, newList.length - 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* (Internal) Gets a space separated list of the class names on the element.
|
||||||
|
* The list is wrapped with a single space on each end to facilitate finding
|
||||||
|
* matches within the list.
|
||||||
|
*/
|
||||||
|
|
||||||
|
function classList(element) {
|
||||||
|
return (' ' + ((element && element.className) || '') + ' ').replace(
|
||||||
|
/\s+/gi,
|
||||||
|
' '
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* (Internal) Removes an element from the DOM.
|
||||||
|
*/
|
||||||
|
|
||||||
|
function removeElement(element) {
|
||||||
|
element && element.parentNode && element.parentNode.removeChild(element)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NProgress
|
||||||
@ -1,12 +0,0 @@
|
|||||||
#nprogress .bar {
|
|
||||||
background: var(--vp-c-brand);
|
|
||||||
}
|
|
||||||
|
|
||||||
#nprogress .spinner-icon {
|
|
||||||
border-top-color: var(--vp-c-brand);
|
|
||||||
border-left-color: var(--vp-c-brand);
|
|
||||||
}
|
|
||||||
|
|
||||||
#nprogress .peg {
|
|
||||||
box-shadow: 0 0 10px var(--vp-c-brand), 0 0 5px var(--vp-c-brand);
|
|
||||||
}
|
|
||||||
Loading…
Reference in new issue