diff --git a/.github/workflows/pipeline.yml b/.github/workflows/pipeline.yml new file mode 100644 index 0000000..81339ca --- /dev/null +++ b/.github/workflows/pipeline.yml @@ -0,0 +1,33 @@ +name: CI + +on: + push: + branches: [ '**' ] + pull_request: + branches: [ master ] + +jobs: + build: + runs-on: ubuntu-latest + strategy: + matrix: + node-version: [16.x, 18.x, 20.x] + + steps: + # checkout the repository + - name: Checkout repository + uses: actions/checkout@v4 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v4 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + + - name: Install dependencies + run: npm install + + - name: Build package + run: npm run build + + - name: Run tests + run: npm test \ No newline at end of file diff --git a/.gitignore b/.gitignore index 09b27ba..70d21c0 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules components -.vscode \ No newline at end of file +.vscode +dist \ No newline at end of file diff --git a/.npmignore b/.npmignore deleted file mode 100644 index d53732b..0000000 --- a/.npmignore +++ /dev/null @@ -1,7 +0,0 @@ -index.html -support -test -.travis.yml -*.md -bower.json -components.json \ No newline at end of file diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index 3c66e65..0000000 --- a/.travis.yml +++ /dev/null @@ -1,4 +0,0 @@ -language: node_js -node_js: ["14.0.0"] -notifications: - email: false \ No newline at end of file diff --git a/History.md b/CHANGELOG.md similarity index 100% rename from History.md rename to CHANGELOG.md diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000..62bb624 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,23 @@ +## Testing + +```sh +npm install +npm test +``` + +Try in the browser by serving index.html from a server +```sh +# Example with python +python3 -m http.server 8000 +``` + + +## Releasing + +```sh +npm test +bump *.json nprogress.js # bump version numbers +git release 0.1.1 # release to github +npm publish # release to npm +git push origin master:gh-pages # update the site +``` diff --git a/Notes.md b/Notes.md deleted file mode 100644 index 3956c41..0000000 --- a/Notes.md +++ /dev/null @@ -1,25 +0,0 @@ -Testing -------- - - $ npm install - $ npm test - -or try it out in the browser: - - $ open test/index.html - -Testing component build ------------------------ - - $ component install - $ component build - $ open test/component.html - -Releasing ---------- - - $ npm test - $ bump *.json nprogress.js # bump version numbers - $ git release 0.1.1 # release to bower/github - $ npm publish # release to npm - $ git push origin master:gh-pages # update the site diff --git a/Readme.md b/Readme.md index ed21ca6..876348e 100644 --- a/Readme.md +++ b/Readme.md @@ -1,88 +1,56 @@ NProgress ========= -[![Status](https://api.travis-ci.org/RamyRais/multi-nprogress.svg?branch=master)](https://travis-ci.org/RamyRais/multi-nprogress) [![npm version](https://img.shields.io/npm/v/multi-nprogress.png)](https://npmjs.org/package/multi-nprogress "View this project on npm") [![jsDelivr Hits](https://data.jsdelivr.com/v1/package/npm/multi-nprogress/badge?style=rounded)](https://www.jsdelivr.com/package/npm/multi-nprogress) > Minimalist progress bar -Slim progress bars for Ajax applications. Inspired by Google, YouTube, and -Medium. +Slim progress bars for frontend applications. -Installation ------------- +## Installation -Add [nprogress.js] and [nprogress.css] to your project. +### version 1.0.0 and above +NProgress is an ES6 module available via [npm]. + + $ npm install --save nprogress + +**Manual:** Download the files and add [nprogress.js] and [nprogress.css] to your project. ```html - + ``` -NProgress is available via [npm]. +### version 0.x.x +NProgress is an UMD module available via [npm]. $ npm install --save nprogress -Also available via [unpkg] CDN: +**Manual:** Download the files and add [nprogress.js] and [nprogress.css] to your project. + +```html + + +``` -- https://unpkg.com/multi-nprogress@0.3.3/nprogress.js -- https://unpkg.com/multi-nprogress@0.3.3/nprogress.css -Basic usage ------------ -you should instantiate the progress bar -~~~ js +## Basic usage +you should instantiate the progress bar from default import +```js var nprogress = NProgress(); -~~~ +``` then Simply call `start()` and `done()` to control the progress bar. -~~~ js +```js nprogress.start(); nprogress.done(); -~~~ - -### Turbolinks (version 5+) -Ensure you're using Turbolinks 5+, and use -this: (explained [here](https://github.com/rstacruz/nprogress/issues/8#issuecomment-239107109)) - -~~~ js -$(document).on('turbolinks:click', function() { - nprogress.start(); -}); -$(document).on('turbolinks:render', function() { - nprogress.done(); - nprogress.remove(); -}); -~~~ - -### Turbolinks (version 3 and below) -Ensure you're using Turbolinks 1.3.0+, and use -this: (explained [here](https://github.com/rstacruz/nprogress/issues/8#issuecomment-23010560)) - -~~~ js -$(document).on('page:fetch', function() { nprogress.start(); }); -$(document).on('page:change', function() { nprogress.done(); }); -$(document).on('page:restore', function() { nprogress.remove(); }); -~~~ - -### Pjax -Try this: (explained [here](https://github.com/rstacruz/nprogress/issues/22#issuecomment-36540472)) - -~~~ js -$(document).on('pjax:start', function() { nprogress.start(); }); -$(document).on('pjax:end', function() { nprogress.done(); }); -~~~ - -Ideas ------ - - * Add progress to your Ajax calls! Bind it to the jQuery `ajaxStart` and - `ajaxStop` events. +``` - * Make a fancy loading bar even without Turbolinks/Pjax! Bind it to - `$(document).ready` and `$(window).load`. Advanced usage -------------- @@ -182,7 +150,7 @@ var elt = document.getElementById('#container') nprogress.configure({ parent: elt }); ~~~ -Also this is useful when you want to have multi progress bar in your page you need to give different parent for each +When you want to have multi progress bar in your page you need to give different parent for each ~~~ js var nprogress1 = NProgress(); var nprogress2 = NProgress(); @@ -199,10 +167,6 @@ and replace occurrences of `#29d`. The included CSS file is pretty minimal... in fact, feel free to scrap it and make your own! -Resources ---------- - - * [New UI Pattern: Website Loading Bars](http://www.usabilitypost.com/2013/08/19/new-ui-pattern-website-loading-bars/) (usabilitypost.com) Support ------- @@ -211,20 +175,11 @@ __Bugs and requests__: submit them through the project's issues tracker.
[![Issues](http://img.shields.io/github/issues/RamyRais/multi-nprogress.svg)]( https://github.com/RamyRais/multi-nprogress/issues ) -Thanks ------- -**multi-nprogress** © 2018 Ramy Rais. Released under the [MIT License].
- -Authored and maintained by Rico Sta. Cruz with help from [contributors]. - - - -Spacial Thanks +License ------ -**multi-nprogress** is based on [**NProgress**](https://github.com/rstacruz/nprogress) by [Rico Sta. Cruz.](http://ricostacruz.com)
+This is a fork from [**NProgress**](https://github.com/rstacruz/nprogress) Released under the [MIT License].
-> GitHub [@RamyRais](https://github.com/RamyRais)