feat: added primaryColor into configure (#3)

* feat: added `primaryColor` into configure * chore: demo update
wangyewei · Feb 4, 2024 · acf8b6c · acf8b6c
1 parent 7058e54
commit acf8b6c
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 10 deletions.
diff --git a/packages/index.ts b/packages/index.ts
@@ -95,7 +95,7 @@ class NProgress {
     NProgress.set(100)
   }
 
-  static render(from: Minimum) {
+  private static render(from: Minimum) {
     if (NProgress.isRendered) return document.getElementById(ELEMENT_ID)
 
     addClass(document.documentElement, 'nprogress-busy')
@@ -104,6 +104,8 @@ class NProgress {
     progress.id = ELEMENT_ID
     progress.innerHTML = NProgress.settings.template
 
+    document.documentElement.style.setProperty('--progress-primary-color', NProgress.settings.primaryColor)
+
     const bar = progress.querySelector<HTMLElement>(
       NProgress.settings.barSelector
     )!
@@ -170,7 +172,7 @@ class NProgress {
     progress && removeElement(progress)
   }
 
-  static getPositionCss(): 'translate3d' | 'translate' | 'margin' {
+  private static getPositionCss(): 'translate3d' | 'translate' | 'margin' {
     const bodyStyle = document.body.style
 
     const vendorPrefix =
@@ -193,7 +195,7 @@ class NProgress {
     }
   }
 
-  static barPositionCSS(n: Minimum, speed: number, ease: string) {
+  private static barPositionCSS(n: Minimum, speed: number, ease: string) {
     let barCSS: Record<string, any>
 
     if (NProgress.settings.positionUsing === 'translate3d') {

diff --git a/packages/settings.ts b/packages/settings.ts
@@ -2,6 +2,7 @@ import type { DightEnum } from './utils/typed'
 
 export type Minimum = DightEnum<101>
 export type NProgressSetting = {
+  primaryColor: string
   minimum: Minimum
   easing: 'linear' | string
   positionUsing: string
@@ -16,6 +17,7 @@ export type NProgressSetting = {
 }
 
 export const DEFAULT_SETTINGS: NProgressSetting = {
+  primaryColor: '#29d',
   minimum: 1,
   easing: 'linear',
   positionUsing: '',

diff --git a/packages/style.css b/packages/style.css
@@ -1,10 +1,13 @@
 /* Make clicks pass-through */
+:root {
+  --progress-primary-color: #29d;
+}
 #nprogress {
   pointer-events: none;
 }
 
 #nprogress .bar {
-  background: #29d;
+  background: var(--progress-primary-color);
 
   position: fixed;
   z-index: 1031;
@@ -22,7 +25,8 @@
   right: 0px;
   width: 100px;
   height: 100%;
-  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
+  box-shadow: 0 0 10px var(--progress-primary-color),
+    0 0 5px var(--progress-primary-color);
   opacity: 1;
 
   -webkit-transform: rotate(3deg) translate(0px, -4px);
@@ -45,8 +49,8 @@
   box-sizing: border-box;
 
   border: solid 2px transparent;
-  border-top-color: #29d;
-  border-left-color: #29d;
+  border-top-color: var(--progress-primary-color);
+  border-left-color: var(--progress-primary-color);
   border-radius: 50%;
 
   -webkit-animation: nprogress-spinner 400ms linear infinite;

diff --git a/playground/index.js b/playground/index.js
@@ -1,9 +1,10 @@
-import Progress from "./dist/index.js"
+import Progress from './dist/index.js'
 
 window.addEventListener('DOMContentLoaded', () => {
   const start = document.getElementById('start')
   const set = document.getElementById('set')
   const done = document.getElementById('done')
+
   start.onclick = () => {
     Progress.start()
   }
@@ -15,4 +16,4 @@ window.addEventListener('DOMContentLoaded', () => {
   done.onclick = () => {
     Progress.done()
   }
-})
+})
diff --git a/tests/index.test.ts b/tests/index.test.ts
@@ -9,7 +9,6 @@ import type { NProgressSetting } from '../packages/settings'
 
 const getProgress = () => document.getElementById('nprogress')
 const rawSettings: NProgressSetting = deepClone(NProgress.settings)
-
 describe('n-progress-esm', () => {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,7 +9,6 @@ import type { NProgressSetting } from '../packages/settings'

		const getProgress = () => document.getElementById('nprogress')
		const rawSettings: NProgressSetting = deepClone(NProgress.settings)

		describe('n-progress-esm', () => {


Expand Down