|
| 1 | +/** |
| 2 | + * @license MIT |
| 3 | + * topbar 1.0.0, 2021-01-06 |
| 4 | + * http://buunguyen.github.io/topbar |
| 5 | + * Copyright (c) 2021 Buu Nguyen |
| 6 | + */ |
| 7 | +;(function (window, document) { |
| 8 | + 'use strict' |
| 9 | + |
| 10 | + // https://gist.github.com/paulirish/1579671 |
| 11 | + ;(function () { |
| 12 | + var lastTime = 0 |
| 13 | + var vendors = ['ms', 'moz', 'webkit', 'o'] |
| 14 | + for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { |
| 15 | + window.requestAnimationFrame = |
| 16 | + window[vendors[x] + 'RequestAnimationFrame'] |
| 17 | + window.cancelAnimationFrame = |
| 18 | + window[vendors[x] + 'CancelAnimationFrame'] || |
| 19 | + window[vendors[x] + 'CancelRequestAnimationFrame'] |
| 20 | + } |
| 21 | + if (!window.requestAnimationFrame) |
| 22 | + window.requestAnimationFrame = function (callback, element) { |
| 23 | + var currTime = new Date().getTime() |
| 24 | + var timeToCall = Math.max(0, 16 - (currTime - lastTime)) |
| 25 | + var id = window.setTimeout(function () { |
| 26 | + callback(currTime + timeToCall) |
| 27 | + }, timeToCall) |
| 28 | + lastTime = currTime + timeToCall |
| 29 | + return id |
| 30 | + } |
| 31 | + if (!window.cancelAnimationFrame) |
| 32 | + window.cancelAnimationFrame = function (id) { |
| 33 | + clearTimeout(id) |
| 34 | + } |
| 35 | + })() |
| 36 | + |
| 37 | + var canvas, |
| 38 | + progressTimerId, |
| 39 | + fadeTimerId, |
| 40 | + currentProgress, |
| 41 | + showing, |
| 42 | + addEvent = function (elem, type, handler) { |
| 43 | + if (elem.addEventListener) elem.addEventListener(type, handler, false) |
| 44 | + else if (elem.attachEvent) elem.attachEvent('on' + type, handler) |
| 45 | + else elem['on' + type] = handler |
| 46 | + }, |
| 47 | + options = { |
| 48 | + autoRun: true, |
| 49 | + barThickness: 3, |
| 50 | + barColors: { |
| 51 | + 0: 'rgba(26, 188, 156, .9)', |
| 52 | + '.25': 'rgba(52, 152, 219, .9)', |
| 53 | + '.50': 'rgba(241, 196, 15, .9)', |
| 54 | + '.75': 'rgba(230, 126, 34, .9)', |
| 55 | + '1.0': 'rgba(211, 84, 0, .9)' |
| 56 | + }, |
| 57 | + shadowBlur: 10, |
| 58 | + shadowColor: 'rgba(0, 0, 0, .6)', |
| 59 | + className: null |
| 60 | + }, |
| 61 | + repaint = function () { |
| 62 | + canvas.width = window.innerWidth |
| 63 | + canvas.height = options.barThickness * 5 // need space for shadow |
| 64 | + |
| 65 | + var ctx = canvas.getContext('2d') |
| 66 | + ctx.shadowBlur = options.shadowBlur |
| 67 | + ctx.shadowColor = options.shadowColor |
| 68 | + |
| 69 | + var lineGradient = ctx.createLinearGradient(0, 0, canvas.width, 0) |
| 70 | + for (var stop in options.barColors) |
| 71 | + lineGradient.addColorStop(stop, options.barColors[stop]) |
| 72 | + ctx.lineWidth = options.barThickness |
| 73 | + ctx.beginPath() |
| 74 | + ctx.moveTo(0, options.barThickness / 2) |
| 75 | + ctx.lineTo( |
| 76 | + Math.ceil(currentProgress * canvas.width), |
| 77 | + options.barThickness / 2 |
| 78 | + ) |
| 79 | + ctx.strokeStyle = lineGradient |
| 80 | + ctx.stroke() |
| 81 | + }, |
| 82 | + createCanvas = function () { |
| 83 | + canvas = document.createElement('canvas') |
| 84 | + var style = canvas.style |
| 85 | + style.position = 'fixed' |
| 86 | + style.top = style.left = style.right = style.margin = style.padding = 0 |
| 87 | + style.zIndex = 100001 |
| 88 | + style.display = 'none' |
| 89 | + if (options.className) canvas.classList.add(options.className) |
| 90 | + document.body.appendChild(canvas) |
| 91 | + addEvent(window, 'resize', repaint) |
| 92 | + }, |
| 93 | + topbar = { |
| 94 | + config: function (opts) { |
| 95 | + for (var key in opts) |
| 96 | + if (options.hasOwnProperty(key)) options[key] = opts[key] |
| 97 | + }, |
| 98 | + show: function () { |
| 99 | + if (showing) return |
| 100 | + showing = true |
| 101 | + if (fadeTimerId !== null) window.cancelAnimationFrame(fadeTimerId) |
| 102 | + if (!canvas) createCanvas() |
| 103 | + canvas.style.opacity = 1 |
| 104 | + canvas.style.display = 'block' |
| 105 | + topbar.progress(0) |
| 106 | + if (options.autoRun) { |
| 107 | + ;(function loop() { |
| 108 | + progressTimerId = window.requestAnimationFrame(loop) |
| 109 | + topbar.progress( |
| 110 | + '+' + 0.05 * Math.pow(1 - Math.sqrt(currentProgress), 2) |
| 111 | + ) |
| 112 | + })() |
| 113 | + } |
| 114 | + }, |
| 115 | + progress: function (to) { |
| 116 | + if (typeof to === 'undefined') return currentProgress |
| 117 | + if (typeof to === 'string') { |
| 118 | + to = |
| 119 | + (to.indexOf('+') >= 0 || to.indexOf('-') >= 0 |
| 120 | + ? currentProgress |
| 121 | + : 0) + parseFloat(to) |
| 122 | + } |
| 123 | + currentProgress = to > 1 ? 1 : to |
| 124 | + repaint() |
| 125 | + return currentProgress |
| 126 | + }, |
| 127 | + hide: function () { |
| 128 | + if (!showing) return |
| 129 | + showing = false |
| 130 | + if (progressTimerId != null) { |
| 131 | + window.cancelAnimationFrame(progressTimerId) |
| 132 | + progressTimerId = null |
| 133 | + } |
| 134 | + ;(function loop() { |
| 135 | + if (topbar.progress('+.1') >= 1) { |
| 136 | + canvas.style.opacity -= 0.05 |
| 137 | + if (canvas.style.opacity <= 0.05) { |
| 138 | + canvas.style.display = 'none' |
| 139 | + fadeTimerId = null |
| 140 | + return |
| 141 | + } |
| 142 | + } |
| 143 | + fadeTimerId = window.requestAnimationFrame(loop) |
| 144 | + })() |
| 145 | + } |
| 146 | + } |
| 147 | + |
| 148 | + if (typeof module === 'object' && typeof module.exports === 'object') { |
| 149 | + module.exports = topbar |
| 150 | + } else if (typeof define === 'function' && define.amd) { |
| 151 | + define(function () { |
| 152 | + return topbar |
| 153 | + }) |
| 154 | + } else { |
| 155 | + this.topbar = topbar |
| 156 | + } |
| 157 | +}.call(this, window, document)) |
0 commit comments