### Run NProgress Tests with npm Source: https://github.com/rstacruz/nprogress/blob/master/Notes.md Executes the NProgress test suite using npm. This involves installing project dependencies and then running the defined test scripts. ```bash $ npm install $ npm test ``` -------------------------------- ### Install NProgress via npm Source: https://github.com/rstacruz/nprogress/blob/master/Readme.md This command installs NProgress as a dependency in your project using npm, the Node.js package manager. The --save flag adds it to your package.json. ```shell npm install --save nprogress ``` -------------------------------- ### Start and Complete NProgress Bar Source: https://github.com/rstacruz/nprogress/blob/master/Readme.md These basic calls initiate and complete the NProgress bar. NProgress.start() begins the progress animation, and NProgress.done() finishes it, hiding the bar. ```javascript NProgress.start(); NProgress.done(); ``` -------------------------------- ### Initialize Mocha and Chai for NProgress Tests Source: https://github.com/rstacruz/nprogress/blob/master/test/component.html This snippet sets up the Mocha testing framework in BDD style, ignores memory leaks, and initializes Chai's `should` and `assert` interfaces for assertions. It also defines `testSuite` as `describe` and runs Mocha tests on window load. ```JavaScript mocha.ignoreLeaks(); mocha.setup('bdd'); should = chai.should() assert = chai.assert testSuite = describe; onload = function() { mocha.run(); } ``` -------------------------------- ### Integrate NProgress with Pjax Events Source: https://github.com/rstacruz/nprogress/blob/master/Readme.md This code integrates NProgress with Pjax, a jQuery plugin for AJAX navigation. It starts the progress bar on pjax:start and completes it on pjax:end, providing visual feedback during Pjax-driven page loads. ```javascript $(document).on('pjax:start', function() { NProgress.start(); }); $(document).on('pjax:end', function() { NProgress.done(); }); ``` -------------------------------- ### Integrate NProgress with Turbolinks 5+ Events Source: https://github.com/rstacruz/nprogress/blob/master/Readme.md This JavaScript code integrates NProgress with Turbolinks 5+ by binding to turbolinks:click to start the progress bar and turbolinks:render to complete and remove it. This ensures the progress bar appears during page transitions. ```javascript $(document).on('turbolinks:click', function() { NProgress.start(); }); $(document).on('turbolinks:render', function() { NProgress.done(); NProgress.remove(); }); ``` -------------------------------- ### Integrate NProgress with Turbolinks 3 and below Events Source: https://github.com/rstacruz/nprogress/blob/master/Readme.md This snippet shows how to integrate NProgress with older versions of Turbolinks (3 and below). It uses page:fetch to start, page:change to complete, and page:restore to remove the progress bar during page navigation. ```javascript $(document).on('page:fetch', function() { NProgress.start(); }); $(document).on('page:change', function() { NProgress.done(); }); $(document).on('page:restore', function() { NProgress.remove(); }); ``` -------------------------------- ### Mocha Test Runner Initialization and Error Handling Source: https://github.com/rstacruz/nprogress/blob/master/test/index.html This JavaScript snippet initializes the Mocha test framework for Nprogress. It sets up a global error handler to display unhandled JavaScript errors directly on the 'mocha' element, configures Mocha to ignore global variable leaks, sets the BDD interface style, and finally starts the test execution. ```javascript window.onerror=function(msg,url,line){document.getElementById('mocha').innerHTML+='

'+msg+''+'

'+url+':'+line+'';return false} mocha.ignoreLeaks(); mocha.setup('bdd'); mocha.run() ``` -------------------------------- ### Force NProgress Bar Completion Source: https://github.com/rstacruz/nprogress/blob/master/Readme.md Calling NProgress.done(true) forces the progress bar to complete and hide, even if start() was not previously called. This overrides the default behavior where done() only acts if the bar is already visible. ```javascript NProgress.done(true); ``` -------------------------------- ### NProgress Integration with jQuery for UI Control Source: https://github.com/rstacruz/nprogress/blob/master/index.html This JavaScript code demonstrates how to integrate NProgress with jQuery to control the progress bar based on user interactions and page load events. It showcases starting, setting, incrementing, and completing the progress bar in response to button clicks and a timeout. ```JavaScript $('body').show(); $('.version').text(NProgress.version); NProgress.start(); setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000); $("#b-0").click(function() { NProgress.start(); }); $("#b-40").click(function() { NProgress.set(0.4); }); $("#b-inc").click(function() { NProgress.inc(); }); $("#b-100").click(function() { NProgress.done(); }); ``` -------------------------------- ### Build and Test NProgress Component Source: https://github.com/rstacruz/nprogress/blob/master/Notes.md Instructions for building the NProgress component using the 'component' tool and then opening its dedicated test page in a browser to verify the build. ```bash $ component install $ component build $ open test/component.html ``` -------------------------------- ### Open NProgress Browser Test Page Source: https://github.com/rstacruz/nprogress/blob/master/Notes.md Launches the NProgress test suite directly in a web browser for visual verification and interactive debugging. ```bash $ open test/index.html ``` -------------------------------- ### Execute NProgress Release Workflow Source: https://github.com/rstacruz/nprogress/blob/master/Notes.md Comprehensive steps for releasing a new version of NProgress. This workflow includes running tests, bumping version numbers, creating a Git release tag, publishing to npm, and updating the gh-pages site. ```bash $ 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 ``` -------------------------------- ### Initialize Google Analytics Tracking Source: https://github.com/rstacruz/nprogress/blob/master/index.html This JavaScript snippet initializes Google Analytics tracking for the 'ricostacruz.com' domain. It sets the account ID, tracks page views, and dynamically loads the Google Analytics script asynchronously. ```JavaScript if(location.hostname.match(/ricostacruz\.com$/)){var _gaq=_gaq||[];_gaq.push(["_setAccount","UA-20473929-1"]),_gaq.push(["_trackPageview"]),function(){var a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=("https:"==document.location.protocol?"https://ssl":"http://www")+".google-analytics.com/ga.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b)}()} ``` -------------------------------- ### NProgress Core API Methods Source: https://github.com/rstacruz/nprogress/blob/master/index.html Documentation for the main NProgress API methods. These methods allow control over the progress bar's visibility and percentage, providing a simple interface for managing progress indications. ```APIDOC NProgress.start(): Shows the progress bar. NProgress.set(percentage: number): Sets the progress bar to a specific percentage (e.g., 0.4 for 40%). NProgress.inc(): Increments the progress bar by a small, random amount. NProgress.done(): Completes the progress bar and hides it. ``` -------------------------------- ### NProgress API Reference Source: https://github.com/rstacruz/nprogress/blob/master/Readme.md Comprehensive API documentation for the NProgress object, including methods for controlling the progress bar and configuration options to customize its behavior and appearance. ```APIDOC NProgress.configure(options: object) Description: Configures the progress bar's behavior and appearance. options: minimum: number (default: 0.08) Description: Changes the minimum percentage used upon starting. template: string Description: Custom HTML markup for the progress bar. Must contain an element with role='bar'. easing: string (default: 'ease') Description: CSS easing string for animation. speed: number (default: 200) Description: Animation speed in milliseconds. trickle: boolean (default: true) Description: Turns off the automatic incrementing behavior if set to false. trickleSpeed: number Description: Adjusts how often to trickle/increment, in milliseconds. showSpinner: boolean (default: true) Description: Turns off the loading spinner if set to false. NProgress.start(): void Description: Starts the progress bar animation. NProgress.done(force: boolean = false): void Description: Completes the progress bar animation and hides it. force: boolean (default: false) Description: If true, forces completion even if start() was not called. NProgress.set(n: number): void Description: Sets the progress bar to a specific percentage (0 to 1). n: number Description: The percentage value (0.0 to 1.0). NProgress.inc(amount: number = random): void Description: Increments the progress bar by a random or specified amount. amount: number (optional) Description: The specific value to increment by. NProgress.remove(): void Description: Removes the progress bar from the DOM. NProgress.status: number Description: The current numerical value of the progress bar (0 to 1). ``` -------------------------------- ### HN Button API Factory and Script Loader Source: https://github.com/rstacruz/nprogress/blob/master/index.html This JavaScript code defines a factory pattern for creating custom API methods (on, once, off, emit) for an 'HN' object, likely related to a Hacker News button. It also includes a `load` function to dynamically inject the 'hn-button.js' script into the document if it's not already present. ```JavaScript var HN=[];HN.factory=function(e){return function(){HN.push([e].concat(Array.prototype.slice.call(arguments,0)))};},HN.on=HN.factory("on"),HN.once=HN.factory("once"),HN.off=HN.factory("off"),HN.emit=HN.factory("emit"),HN.load=function(){var e="hn-button.js";if(document.getElementById(e))return;var t=document.createElement("script");t.id=e,t.src="//hn-button.herokuapp.com/hn-button.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)},HN.load(); ``` -------------------------------- ### Include NProgress via HTML Script and Link Tags Source: https://github.com/rstacruz/nprogress/blob/master/Readme.md This snippet demonstrates how to include NProgress JavaScript and CSS files directly into an HTML document using ``` -------------------------------- ### Set NProgress Bar to Specific Percentage Source: https://github.com/rstacruz/nprogress/blob/master/Readme.md The .set(n) method allows direct control over the progress bar's percentage, where n is a value between 0 and 1. This is useful for showing precise progress, such as during file uploads. ```javascript NProgress.set(0.0); // Sorta same as .start() NProgress.set(0.4); NProgress.set(1.0); // Sorta same as .done() ``` -------------------------------- ### Configure NProgress Parent Container Source: https://github.com/rstacruz/nprogress/blob/master/Readme.md This snippet demonstrates how to change the parent container for the NProgress loading bar. By default, NProgress appends itself to the `body` element. Setting the `parent` option allows you to specify a different CSS selector for the container where the progress bar should be rendered. ```javascript NProgress.configure({ parent: '#container' }); ``` -------------------------------- ### Increment NProgress Bar Progress Source: https://github.com/rstacruz/nprogress/blob/master/Readme.md The .inc() method increments the progress bar by a random amount, never reaching 100%. It's suitable for showing ongoing activity without a known end point. An optional parameter allows incrementing by a specific value. ```javascript NProgress.inc(); ``` ```javascript NProgress.inc(0.2); ``` -------------------------------- ### Retrieve Current NProgress Status Source: https://github.com/rstacruz/nprogress/blob/master/Readme.md The NProgress.status property provides the current numerical value of the progress bar, ranging from 0 to 1. This can be useful for debugging or custom logic based on the bar's state. ```javascript NProgress.status ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.