#### Limitless - Extensions

##### Velocity animations

Animation /velocity/

###### Overview

Velocity is an animation engine with the same API as jQuery's `$.animate()`. It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Velocity works everywhere — back to IE8 and Android 2.3. Under the hood, it mimics jQuery's `$.queue()`, and thus interoperates seamlessly with jQuery's `$.animate()`, `$.fade()`, and `$.delay()`. Since Velocity's syntax is identical to `$.animate()`, your code doesn't need to change.

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load library -->
    <script src="../../../../global_assets/js/plugins/velocity/velocity.min.js"></script>

    <!-- Load Velocity UI -->
    <script src="../../../../global_assets/js/plugins/velocity/velocity.ui.min.js"></script>

Call the plugin via JavaScript:

    // Chaining example
    $element
        .velocity({ width: 75 }) // Animate the width property
        .velocity({ height: 0 }); // Then, when finished, animate the height property

    // Per-Property Easing
    $element.velocity({
        borderBottomWidth: [ "2px", "spring" ], // Uses "spring"
        width: [ "100px", [ 250, 15 ] ], // Uses custom spring physics
        height: "100px" // Defaults to easeInSine, the call's default easing
    }, {
        easing: "easeInSine" // Default easing
    });

    // Animation Delay
    $element.velocity({
        height: "+=10em"
    }, {
        loop: 4,
        delay: 100 // Wait 100ms before alternating back
    });

###### Velocity.js documentation

Complete Velocity.js documentation can be found online on Official library website. It's quite big, actually the whole website is a documentation with examples. Follow the right sidebar to navigate the options, commands and features. Also check out UI Pack documentation. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Velocity.js library.

###### Plugin info

Property | Description
--- | ---
File name | velocity.min.js, velocity.ui.js
Location | global_assets/js/plugins/velocity/
Links | Official plugin website Full documentation Github project page

##### Prism syntax highlighter

Typo prism.min.js

###### Overview

Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. Allows you to define new languages or extend existing ones, add new features thanks to Prism’s plugin architecture. Language classes are inherited so you can only define the language once for multiple code snippets.

Core features:

- Only 2KB minified & gzipped (core). Each language definition adds roughly 300-500 bytes.
- Encourages good author practices. Other highlighters encourage or even force you to use elements that are semantically wrong, like `<pre>` (on its own) or `<script>`. Prism forces you to use the correct element for marking up code: `<code>`. On its own for inline code, or inside a <pre> for blocks of code. In addition, the language is defined through the way recommended in the HTML5 draft: through a language-xxxx class.
- The language definition is inherited. This means that if multiple code snippets have the same language, you can just define it once, in one of their common ancestors.
- Supports parallelism with Web Workers, if available. Disabled by default
- Very easy to extend without modifying the code, due to Prism’s plugin architecture. Multiple hooks are scattered throughout the source.
- Very easy to define new languages. Only thing you need is a good understanding of regular expressions
- All styling is done through CSS, with sensible class names rather than ugly namespaced abbreviated nonsense.
- Wide browser support: IE9+, Firefox, Chrome, Safari, Opera, most Mobile browsers
- Highlights embedded languages (e.g. CSS inside HTML, JavaScript inside HTML)
- Highlights inline code as well, not just code blocks
- Highlights nested languages (CSS in HTML, JavaScript in HTML
- It doesn’t force you to use any Prism-specific markup, not even a Prism-specific class name, only standard markup you should be using anyway. So, you can just try it for a while, remove it if you don’t like it and leave no traces behind.
- Highlight specific lines and/or line ranges (requires plugin)
- Show invisible characters like tabs, line breaks etc (requires plugin)
- Autolink URLs and emails, use Markdown links in comments (requires plugin)

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load jQuery -->
    <script src="../../../../global_assets/js/main/jquery.min.js"></script>

    <!-- Load plugin -->
    <script src="../../../../global_assets/js/plugins/ui/prism.min.js"></script>

Prism does its best to encourage good authoring practices. Therefore, it only works with `<code>` elements, since marking up code without a `<code>` element is semantically invalid. According to the HTML5 spec, the recommended way to define a code language is a language-xxxx class, which is what Prism uses. To make things easier however, Prism assumes that this language definition is inherited. Therefore, if multiple `<code>` elements have the same language, you can add the language-xxxx class on one of their common ancestors. This way, you can also define a document-wide default language, by adding a language-xxxx class on the `<body>` or `<html>` element.

    <!-- Code inside Pre element -->
    <pre><code class="language-css">p { color: red }</code></pre>

If you want to opt-out of highlighting for a `<code>` element that is a descendant of an element with a declared code language, you can add the class language-none to it (or any non-existing language, really).

If you want to prevent any elements from being automatically highlighted, you can use the attribute data-manual on the `<script>` element you used for prism and use the API. Example:

    <!-- Disable highlight -->
    <script src="prism.js" data-manual></script>

###### Prism.js documentation

Complete Prism.js documentation can be found online on Official library website. It's quite big, with a lot of options, events and customization options. Also check out plugins made for Prism.js, supported languages or make your own build. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Prism.js library.

###### Plugin info

Property | Description
--- | ---
File name | prism.min.js
Location | global_assets/js/plugins/ui/
Links | Official plugin website Full documentation Build your own Github project page

##### Moment

Extensions /ui/moment/

###### Overview

A lightweight JavaScript date library for parsing, validating, manipulating, and formatting dates. Moment was designed to work both in the browser and in Node.js. Currently the following browsers are used for the ci system: IE8, IE9 on Windows 7, stable Chrome on Windows XP, Safari 10.8 on Mac and stable Firefox on Linux.

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load plugin -->
    <script src="../../../../global_assets/js/plugins/ui/moment/moment.min.js"></script>

    <!-- Or load with included locales -->
    <script src="../../../../global_assets/js/plugins/ui/moment/moment_locales.min.js"></script>

###### Format dates

    // Format dates example
    moment().format('MMMM Do YYYY, h:mm:ss a'); // September 21st 2015, 1:31:51 am
    moment().format('dddd');                    // Monday
    moment().format("MMM Do YY");               // Sep 21st 15
    moment().format('YYYY [escaped] YYYY');     // 2015 escaped 2015
    moment().format();                          // 2015-09-21T01:31:51+02:00

###### Relative Time

    // Relative time example
    moment("20111031", "YYYYMMDD").fromNow(); // 4 years ago
    moment("20120620", "YYYYMMDD").fromNow(); // 3 years ago
    moment().startOf('day').fromNow();        // 2 hours ago
    moment().endOf('day').fromNow();          // in a day
    moment().startOf('hour').fromNow();       // 33 minutes ago

###### Calendar Time

    // Calendar time example
    moment().subtract(10, 'days').calendar(); // 09/11/2015
    moment().subtract(6, 'days').calendar();  // Last Tuesday at 1:33 AM
    moment().subtract(3, 'days').calendar();  // Last Friday at 1:33 AM
    moment().subtract(1, 'days').calendar();  // Yesterday at 1:33 AM
    moment().calendar();                      // Today at 1:33 AM
    moment().add(1, 'days').calendar();       // Tomorrow at 1:33 AM
    moment().add(3, 'days').calendar();       // Thursday at 1:33 AM
    moment().add(10, 'days').calendar();      // 10/01/2015

###### Multiple Locale Support

    // Multiple locale support example
    moment().format('L');    // 09/21/2015
    moment().format('l');    // 9/21/2015
    moment().format('LL');   // September 21, 2015
    moment().format('ll');   // Sep 21, 2015
    moment().format('LLL');  // September 21, 2015 1:33 AM
    moment().format('lll');  // Sep 21, 2015 1:33 AM
    moment().format('LLLL'); // Monday, September 21, 2015 1:33 AM
    moment().format('llll'); // Mon, Sep 21, 2015 1:33 AM

###### Moment.js documentation

Complete Moment.js documentation can be found online on Official library website. It's quite big, with a lot of options, events and customization options. Also check out plugins made for Moment.js. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to Moment.js library.

###### Plugin info

Property | Description
--- | ---
File name | moment.min.js, moment_locales.min.js
Location | global_assets/js/plugins/ui/moment/
Links | Official plugin website Full documentation Github project page

##### Touch punch

Extensions touch_punch.min.js

###### Overview

jQuery UI Touch Punch is a small hack that enables the use of touch events on sites using the jQuery UI user interface library. Touch Punch works by using simulated events to map touch events to their mouse event analogs. Simply include the script on your page and your touch events will be turned into their corresponding mouse events to which jQuery UI will respond as expected.

###### Usage

First off we're going to need to load the dependencies. This plugin requires jQuery and jQuery UI to function correctly:

    <!-- Load jQuery -->
    <script src="../../../../global_assets/js/main/jquery.min.js"></script>

    <!-- Load jQuery UI -->
    <script src="../../../../global_assets/js/extensions/jquery_ui/full.min.js"></script>

    <!-- Load extension -->
    <script src="../../../../global_assets/js/extensions/jquery_ui/touch.min.js"></script>

Just use jQuery UI as expected and watch it work at the touch of a finger:

    // Initialization
    $('#widget').draggable();

###### Plugin info

Property | Description
--- | ---
File name | touch_punch.min.js
Location | global_assets/js/extensions/jquery_ui/
Links | Official plugin website Github project page

##### jQuery UI slider pips

Sliders slider_pips.min.js

###### Overview

Plugin to add "pips" or "floats" to a jQuery UI Slider. This plugin extends the jQuery UI Slider widget. Use it for creating a nicely-styled slider.

###### Usage

First off we're going to need to load the dependencies. This plugin requires jQuery and jQuery UI to function correctly:

    <!-- Load jQuery -->
    <script src="../../../../global_assets/js/main/jquery.min.js"></script>

    <!-- Load jQuery UI -->
    <script src="../../../../global_assets/js/extensions/jquery_ui/full.min.js"></script>

    <!-- Load extension -->
    <script src="../../../../global_assets/js/plugins/sliders/slider_pips.js"></script>

Add element with attributes:

    <!-- Add DIV element -->
    <div class="slider"></div>

Call the plugin via JavaScript:

    // Both pips and floats
    $(".slider").slider().slider("pips").slider("float");

###### Plugin options

It is possible to supply configuration options to the pips plugin, this allows some basic way to control how the pips/floats are handled.

A list of all the options available on the `pips` method:

Option | Values | Default | Description
--- | --- | --- | ---
`first` | "label", "pip" or false | "label" | Determines the style of the first pip on the slider
`last` | "label", "pip" or false | "label" | Determines the style of the final pip on the slider
`rest` | "label", "pip" or false | "pip" | Determines the style of all other pips on the slider
`step` | number | 1 / 5% | The `step` parameter will only generate every nth pip. eg: If we set `step: 2`, then we will only get the values: 0, 2, 4, 6, 8... generated. Note: if the slider has a value over 100, step is set to 5% of the value
`labels` | array, object or false | false | Will override the values of the pips with an array of given values
`prefix` | string | "" | Adds a string value before the pip label. eg: `prefix: $` => $1, $2, $3, $4, ...
`suffix` | string | "" | Adds a string value after the pip label. eg: `suffix: °c` => 1°c, 2°c, 3°c, 4°c, ...

A list of all the options available on the `float` method:

Option | Values | Default | Description
--- | --- | --- | ---
`handle` | boolean | true | Determines if the float effect should appear on the slider handle
`pips` | boolean | false | Determines if the float effect should appear on the pips
`labels` | array, object or false | false | Will override the values of the floats with an array of given values
`prefix` | string | "" | Adds a string value before the float label. eg: `prefix: $` => $1, $2, $3, $4, ...
`suffix` | string | "" | Adds a string value after the float label. eg: `suffix: °c` => 1°c, 2°c, 3°c, 4°c, ...

###### Styling

The plugin makes great use of presentation classes to provide powerful customisation. It's important the slider fits the unique style of your project, and with slight CSS modification you can get some really interesting results. To make the code as succinct and performant as possible; there's only minimal javascript configuration on how the pips are displayed, positioned, formatted, etc. Instead the power lies in the hands of CSS:

    // List of the presentation classes used in a heirarchical tree
    .ui-slider.ui-slider-pips  {}
    .ui-slider-float {}
        .ui-slider-handle {}
            .ui-slider-tip {}
        .ui-slider-pip {}
        .ui-slider-pip-first {}
        .ui-slider-pip-last {}
        .ui-slider-pip-nth {}
        .ui-slider-pip-label {}
        .ui-slider-pip-hide {}
            .ui-slider-line {}
            .ui-slider-label {}
            .ui-slider-tip-label {}
        .ui-slider-pip-selected-initial {}
        .ui-slider-pip-selected {}

###### Plugin info

Property | Description
--- | ---
File name | slider_pips.min.js
Location | global_assets/js/plugins/sliders/
Links | Official plugin website Github project page

##### Pace page loader

Loader pace.min.js

###### Overview

Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation. No need to hook into any of your code, progress is detected automatically. Pace will automatically monitor your ajax requests, event loop lag, document ready state, and elements on your page to decide the progress. On ajax navigation it will begin again!

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load plugin -->
    <script src="../../../../global_assets/js/plugins/loaders/pace.min.js"></script>

Add one of presented Pace themes to `components.scss` file and re-compile CSS:

    // Pace page loader (default theme)
    @import "../../../../shared/pace/theme-default";

Pace is fully automatic, no configuration is necessary to get started. If you would like to make some tweaks, here's how:

    // Pace options
    paceOptions = {

    	// Disable the 'elements' source
    	elements: false,

    	// Only show the progress on regular and ajax-y page navigation,
    	// not every request
    	restartOnRequestAfter: false
    }

###### Plugin collectors

Collectors are the bits of code which gather progress information. Pace includes four default collectors:

Collector | Description
--- | ---
`Ajax` | Monitors all ajax requests on the page
`Elements` | Checks for the existance of specific elements on the page
`Document` | Checks the document readyState
`Event Lag` | Checks for event loop lag signaling that javascript is being executed

They can each be configured or disabled through configuration options of the same name. Add your own classes to `paceOptions.extraSources` to add more sources. Each source should either have a `.progress` property, or a `.elements` property which is a list of objects with `.progress` properties. Pace will automatically handle all scaling to make the progress changes look smooth to the user.

    // Pace options
    paceOptions = {
    	ajax: false, // disabled
    	document: false, // disabled
    	eventLag: false, // disabled
    	elements: {
    		selectors: ['.my-page']
    	}
    };

###### Elements

Elements being rendered to the screen is one way for us to decide that the page has been rendered. If you would like to use that source of information (not required at all), specify one or more selectors. You can comma seperate the selectors to propertly handle error states, where the progress bar should disappear, but the element we are looking for may never appear:

    // Pace options
    paceOptions = {
    	elements: {
    		selectors: ['.timeline,.timeline-error', '.user-profile,.profile-error']
    	}
    }

Pace will consider the elements test successful when each selector matches something. For this example, when either `.timeline` or `.timeline-error` exist, and either `.user-profile` or `.profile-error` exist.

###### Restart rules

Most users want the progress bar to automatically restart when a pushState event occurs (generally means ajax navigation is occuring). You can disable this:

    // Pace options
    paceOptions = {
    	restartOnPushState: false
    }

You can also have pace restart on every ajax request which lasts longer than x ms. You'll want to disable this if you make ajax requests the user doesn't need to know about, like precaching:

    // Pace options
    paceOptions = {
    	restartOnRequestAfter: false
    }

You can always trigger a restart manually by calling `Pace.restart()`

###### Plugin API

Pace exposes the following methods:

Option | Description
--- | ---
`Pace.start` | Show the progress bar and start updating. Called automatically if you don't use AMD or CommonJS
`Pace.restart` | Show the progress bar if it's hidden and start reporting the progress from scratch. Called automatically whenever `pushState` or `replaceState` is called by default
`Pace.stop` | Hide the progress bar and stop updating it
`Pace.track` | Explicitly track one or more requests
`Pace.ignore` | Expliticly ignore one or more requests

###### Plugin events

Pace fires the following events:

Option | Description
--- | ---
`start` | When pace is initially started, or as a part of a restart
`stop` | When pace is manually stopped, or as a part of a restart
`restart` | When pace is restarted (manually, or by a new AJAX request)
`done` | When pace is finished
`hide` | When the pace is hidden (can be later than done, based on `ghostTime` and `minTime`)

###### Plugin info

Property | Description
--- | ---
File name | pace.min.js
Location | global_assets/js/plugins/loaders/
Links | Official plugin website Full documentation Github project page

##### BlockUI

Loader blockui.min.js

###### Overview

The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser. When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction.

- fetch resources from server
- fetch each resource file individually (static) or all once via dynamicRoute
- apply translation to HTML tags with the data-i18n attribute
- post missing key-value pairs to server (for easy development -> just translate the new keys)
- search for key en-US first, then in en, then in fallback language (or de-DE, de , fallback)

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load jQuery -->
    <script src="../../../../global_assets/js/main/jquery.min.js"></script>

    <!-- Load plugin -->
    <script src="../../../../global_assets/js/plugins/loaders/blockui.min.js"></script>

To block user activity for the page:

    // Initialization
    $.blockUI();

Blocking with a custom message:

    // Initialization
    $.blockUI({
    	message: '<h1><img src="busy.gif" /> Just a moment...</h1>'
    });

Blocking with custom style:

    // Initialization
    $.blockUI({
    	css: {
    		backgroundColor: '#f00',
    		color: '#fff'
    	}
    });

To unblock the page:

    // Initialization
    $.unblockUI();

If you want to use the default settings and have the UI blocked for all ajax requests, it's as easy as this:

    // Initialization
    $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);

###### Plugin options

Option | Default | Description
--- | --- | ---
`message` | '<h1>Please wait...</h1>' | Message displayed when blocking (use `null` for no message)
`title` | null | Title string; only used when `theme == true`
`draggable` | true | Only used when `theme == true` (requires jquery-ui.js to be loaded)
`theme` | false | Set to true to use with jQuery UI themes
`css` | {...} | Styles for the message when blocking; if you wish to disable these and use an external stylesheet then do this in your code
`themedCSS` | width, top, left | Minimal style set used when themes are used
`overlayCSS` | backgroundColor, opacity, cursor | Styles for the overlay
`cursorReset` | 'default' | Style to replace `wait` cursor before unblocking to correct issue of lingering wait cursor
`growlCSS` | {} | Styles applied when using `$.growlUI`
`forceIframe` | false | Force usage of iframe in non-IE browsers (handy for blocking applets)
`baseZ` | 1000 | `z-index` for the blocking overlay
`centerX` | true | Set to `true` to have the message automatically centered horizontally
`centerY` | true | Set to `true` to have the message automatically centered vertically
`allowBodyStretch` | true | Allow body element to be stetched in ie6; this makes blocking look better on "short" pages. Disable if you wish to prevent changes to the body height
`bindEvents` | true | Enable if you want `key` and `mouse` events to be disabled for content that is blocked
`constrainTabKey` | true | Be default blockUI will supress tab navigation from leaving blocking content (if `bindEvents` is `true`)
`fadeIn` | 200 | `fadeIn` time in millis; set to `0` to disable `fadeIn` on block
`fadeOut` | 400 | `fadeOut` time in millis; set to `0` to disable `fadeOut` on unblock
`timeout` | 0 | Time in millis to wait before auto-unblocking; set to `0` to disable auto-unblock
`showOverlay` | true | Disable if you don't want to show the overlay
`focusInput` | true | If `true`, focus will be placed in the first available input field when page blocking
`onBlock` | null | Callback method invoked when `fadeIn` has completed and blocking message is visible
`onUnblock` | null | Callback method invoked when unblocking has completed; the callback is passed the element that has been unblocked (which is the window object for page blocks) and the options that were passed to the unblock call
`blockMsgClass` | 'blockMsg' | Class name of the message block
`ignoreIfBlocked` | false | If it is already blocked, then ignore it (don't unblock and reblock)

###### Plugin info

Property | Description
--- | ---
File name | blockui.min.js
Location | global_assets/js/plugins/loaders/
Links | Official plugin website Full documentation Github project page

##### i18next

Translation i18next.min.js

###### Overview

I18next is an internationalization-framework written in and for JavaScript. But it's much more than that. i18next goes beyond just providing the standard i18n features such as (plurals, context, interpolation, format). It provides you with a complete solution to localize your product from web to mobile and desktop. Most frameworks leave it to you how translations are being loaded. You are responsible to detect the user language, to load the translations and push them into the framework.

i18next takes care of these issue for you. We provide you with plugins to:

- detect the user language
- load the translations
- optionally cache the translations
- extention, by using post-processing - e.g. to enable sprintf support
- etc

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load jQuery -->
    <script src="../../../../global_assets/js/main/jquery.min.js"></script>

    <!-- Load i18next and related plugins -->
    <script src="../../../../global_assets/js/plugins/internationalization/i18next.min.js"></script>
    <script src="../../../../global_assets/js/plugins/internationalization/jquery-i18next.min.js"></script>
    <script src="../../../../global_assets/js/plugins/internationalization/i18nextXHRBackend.min.js"></script>
    <script src="../../../../global_assets/js/plugins/internationalization/i18nextBrowserLanguageDetector.min.js"></script>

Create elements:

    <!-- Create elements -->
    <ul class="nav">
    	<li><a href="#" data-i18n="nav.home"></a></li>
    	<li><a href="#" data-i18n="nav.page1"></a></li>
    	<li><a href="#" data-i18n="nav.page2"></a></li>
    </ul>

Load resource file:

    // JSON or any other file
    {
    	"app": {
    		"name": "i18next"
    	},
    	"nav": {
    		"home": "Home",
    		"page1": "Page One",
    		"page2": "Page Two"
    	}
    }

Finally call the plugin via JavaScript:

    // Basic initialization
    i18next.init({
    	lng: 'en',
    	debug: true,
    	resources: {
    		en: {
    			translation: {
    				"key": "hello world"
    			}
    		}
    	}
    }, function(err, t) {
    	// initialized and ready to go!
    	document.getElementById('output').innerHTML = i18next.t('key');
    });

###### i18next options and documentation

Full i18next documentation can be found online on Official library website. It's quite big, with a lot of options, events and methods. I find it useless to copy them all and paste to the Limitless documentation, nobody can represent and describe library features better than its creators. Below you can find additional links related to i18next library.

###### Plugin info

Property | Description
--- | ---
File name | i18next.min.js
Location | global_assets/js/plugins/internationalization/
Links | Official plugin website Full documentation Github project page

##### Session timeout

Tool session_timeput.min.js

###### Overview

After a set amount of idle time, a Bootstrap warning dialog is shown to the user with the option to either log out, or stay connected. If "Logout" button is selected, the page is redirected to a logout URL. If "Stay Connected" is selected the dialog closes and the session is kept alive. If no option is selected after another set amount of idle time, the page is automatically redirected to a set timeout URL.

Idle time is defined as no mouse, keyboard or touch event activity registered by the browser.

As long as the user is active, the (optional) keep-alive URL keeps getting pinged and the session stays alive. If you have no need to keep the server-side session alive via the keep-alive URL, you can also use this plugin as a simple lock mechanism that redirects to your lock-session or log-out URL after a set amount of idle time.

###### Usage

To use session timeout extension, include path to the minified plugin file:

    <!-- Path to file -->
    <script src="../../../../global_assets/js/plugins/extensions/session_timeout.min.js"></script>

Example of initialization as a session timeout:

    // Session timeout
    $.sessionTimeout({
        heading: 'h5',
        title: 'Session Timeout',
        message: 'Your session is about to expire. Do you want to stay connected?',
        ignoreUserActivity: true,
        warnAfter: 10000,
        redirAfter: 30000,
        keepAliveUrl: '/',
        redirUrl: 'login_unlock.html',
        logoutUrl: 'login_advanced.html'
    });

Example of initialization as an idle timeout:

    // Idle timeout
    $.sessionTimeout({
        heading: 'h5',
        title: 'Idle Timeout',
        message: 'Your session is about to expire. Do you want to stay connected?',
        warnAfter: 5000,
        redirAfter: 15000,
        keepAliveUrl: '/',
        redirUrl: 'login_unlock.html',
        logoutUrl: 'login_advanced.html'
    });

###### Options

Option | Default | Description
--- | --- | ---
`title` | 'Your session is about to expire!' | This is the text shown to user via Bootstrap warning dialog after warning period. (modal title)
`message` | 'Your session is about to expire.' | This is the text shown to user via Bootstrap warning dialog after warning period
`ignoreUserActivity` | false | If `true`, this will launch the Bootstrap warning dialog / redirect (or callback functions) in a set amounts of time regardless of user activity
`logoutButton` | 'Logout' | This is the text shown to user via Bootstrap warning dialog after warning period in the logout button
`keepAliveButton` | 'Stay Connected' | This is the text shown to user via Bootstrap warning dialog after warning period in the Keep Alive button
`keepAliveUrl` | '/keep-alive' | URL to ping via AJAX POST to keep the session alive. This resource should do something innocuous that would keep the session alive, which will depend on your server-side platform
`keepAlive` | true | If `true`, the plugin keeps pinging the `keepAliveUrl` for as long as the user is active. The time between two pings is set by the `keepAliveInterval` option. If you have no server-side session timeout to worry about, feel free to set this one to `false` to prevent unnecessary network activity
`keepAliveInterval` | 5000 | Time in milliseconds between two keep-alive pings
`ajaxType` | 'POST' | If you need to specify the ajax method
`ajaxData` | '' | If you need to send some data via AJAX POST to your `keepAliveUrl`, you can use this option
`redirUrl` | '/timed-out' | URL to take browser to if no action is take after the warning
`logoutUrl` | '/log-out' | URL to take browser to if user clicks "Logout" on the Bootstrap warning dialog
`warnAfter` | 900000 (15min) | Time in milliseconds after page is opened until warning dialog is opened
`redirAfter` | 1200000 (20min) | Time in milliseconds after page is opened until browser is redirected to `redirUrl`
`countdownSmart` | false | If `true`, displays minutes as well as seconds in the countdown timer (e.g. "3m 14s"). Displays only seconds when timer is under one minute (e.g. "42s")
`countdownMessage` | false | If you want a custom sentence to appear in the warning dialog with a timer showing the seconds remaining, use this option. Example: `countdownMessage: 'Redirecting in {timer}.'` Place the `{timer}` string where you want the numeric countdown to appear
`countdownBar` | false | If `true`, ads a countdown bar (uses Bootstrap progress bar) to the warning dialog. Can be combined with countdownMessage option or used independently
`onStart` | false | Optional callback fired when first calling the plugin and every time user refreshes the session (on any mouse, keyboard or touch action). Takes options object as the only argument
`onWarn` | false | Custom callback you can use instead of showing the Bootstrap warning dialog. Takes options object as the only argument
`onRedir` | false | Custom callback you can use instead of redirecting the user to `redirUrl`. Takes options object as the only argument

###### Plugin info

Property | Description
--- | ---
File name | session_timeout.min.js
Location | global_assets/js/plugins/extensions/
Links | Github project page

##### jQuery Cookie

Tool cookie.js

###### Overview

A simple, lightweight jQuery plugin for reading, writing and deleting cookies. Mega menu navigation plugin `drilldown.js` contains built-in `cookie.js` by default.

###### Usage

Include script after the jQuery library (unless you are packaging scripts somehow else):

    <!-- Include path to file -->
    <script src="../../../../global_assets/js/plugins/extensions/cookie.js"></script>

Create session cookie:

    // Initialize
    $.cookie('name', 'value');

Create expiring cookie, 7 days from then:

    // Initialize
    $.cookie('name', 'value', {
    	expires: 7
    });

Create expiring cookie, valid across entire site:

    // Initialize
    $.cookie('name', 'value', {
    	expires: 7,
    	path: '/'
    });

Read cookie:

    // Initialize
    $.cookie('name'); // => "value"
    $.cookie('nothing'); // => undefined

Read all available cookies:

    // Initialize
    $.cookie(); // => {
    	"name": "value"
    }

Delete cookie:

    // Returns true when cookie was successfully deleted, otherwise false
    $.removeCookie('name'); // => true
    $.removeCookie('nothing'); // => false

    // Need to use the same attributes (path, domain) as what the cookie was written with
    $.cookie('name', 'value', { path: '/' });

    // This won't work!
    $.removeCookie('name'); // => false

    // This will work!
    $.removeCookie('name', { path: '/' }); // => true

###### Converters

Provide a conversion function as optional last argument for reading, in order to change the cookie's value to a different representation on the fly.

Example for parsing a value into a number:

    // parsing a value into a number
    $.cookie('foo', '42');
    $.cookie('foo', Number); // => 42

Dealing with cookies that have been encoded using `escape` (3rd party cookies):

    // Encoded cookies
    $.cookie.raw = true;
    $.cookie('foo', unescape);

###### Configuration

Parameter | Description
--- | ---

`raw`

By default the cookie value is encoded/decoded when writing/reading, using encodeURIComponent/decodeURIComponent. Bypass this by setting raw to true:

    $.cookie.raw = true;

`json`

Turn on automatic storage of JSON objects passed as the cookie value. Assumes `JSON.stringify` and `JSON.parse`:

    $.cookie.json = true;

###### Cookie options

Cookie attributes can be set globally by setting properties of the $.cookie.defaults object or individually for each call to $.cookie() by passing a plain object to the options argument. Per-call options override the default options.

Parameter | Description
--- | ---
`expires` | Define lifetime of the cookie. Value can be a `Number` which will be interpreted as days from time of creation or a `Date` object. If omitted, the cookie becomes a session cookie.
`path` | Define the path where the cookie is valid. By default the path of the cookie is the path of the page where the cookie was created (standard browser behavior). If you want to make it available for instance across the entire domain use `path: '/'`. Default: path of page where the cookie was created
`domain` | Define the domain where the cookie is valid. Default: domain of page where the cookie was created
`secure` | If true, the cookie transmission requires a secure protocol (https). Default: `false`

###### Plugin info

Property | Description
--- | ---
File name | cookie.js
Location | global_assets/js/plugins/extensions/
Links | Github project page

##### Bootstrap context menu

Extension contextmenu.js

###### Overview

A context menu extension of Bootstrap made for everyone's convenience. Supports all possible dropdown components included to the template: headers, submenus, icons, checkboxes, radios, dividers, color options etc. Besides dropdown options, includes a bunch of extended options and events.

###### Usage

Context menu can be initialized via data attributes or Javascript. To initialize it via data attributes, add `data-toggle="context"` to any element that needs a custom context menu and via CSS set `position: relative` to the element. And point `data-target` attribute to your custom context menu:

    <!-- Data attributes initialization -->
    <div class="context" data-toggle="context" data-target="#context-menu">
    	...
    </div>

Call the context menu via JavaScript:

    // Javascript initialization
    $('.context').contextmenu({
    	target: '#context-menu',
    	before: function(e,context) {
    		// execute code before context menu if shown
    	},
    	onItem: function(context,e) {
    		// execute on menu item selection
    	}
    });

###### Options

Option | Description
--- | ---
`target` | Equivalent of the data-target attribute. It identifies the html of the menu that will be displayed
`scopes` | DOM selector for dynamically added context elements
`before` | Function that is called before the context menu is displayed. If this function returns false, the context menu will not be displayed. It is passed two parameters:
`(before) e` | The original event. (You can do an e.preventDefault() to cancel the browser event)
`(before) context` | The DOM element where right click occured
`onItem` | Function that is called when a menu item is clicked. Useful when you want to execute a specific function when an item is clicked. It is passed two parameters:
`(onItem) context` | the DOM element where right click occured
`(onItem) e` | the click event of the menu item, `$(e.target)` is the item element

###### Events

All events are fired at the context's menu. Check out dropdown plugin for a complete description of events. Usage example:

    // "Show" event example
    $('#myMenu').on('show.bs.context', function () {
    	// do something...
    });

Events list:

Event | Description
--- | ---
`show.bs.context` | This event fires immediately when the menu is opened
`shown.bs.context` | This event is fired when the dropdown has been made visible to the user
`hide.bs.context` | This event is fired immediately when the hide instance method has been called
`hidden.bs.context` | This event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete)

###### Plugin info

Property | Description
--- | ---
File name | contextmenu.js
Location | global_assets/js/plugins/extensions/
Links | Demonstration Github project page

##### Bootstrap Hover dropdown

Extension hover_dropdown.min.js

###### Overview

A simple plugin to enable Bootstrap dropdowns to activate on hover and provide a nice user experience.

The dropdowns are dismissed after a configurable delay. This fixes an issue that can instantly close your nav because of a 1px gap between the button/nav item that activated the dropdown and the actual dropdown. It is also generally a better user experience, as users are not punished by going 1 pixel outside of the dropdown, which would instantly close the nav without a delay.

Note: The HTML markup is the same as with any other Bootstrap dropdown. This will not interfere with Bootstrap's default activate-on-click method (i.e. this plugin combined with Bootstrap's default behavior work well to support both the ideal experience on desktop and mobile).

###### Usage

Just like in Bootstrap you can activate it without any JavaScript, just by adding a data-attribute, you can make it automatically work. Add data-hover="dropdown" in addition (or in place of) Bootstrap's data-toggle="dropdown". You can set options via data-attributes, too, via data-delay and data-close-others.

    <!-- Markup initialization -->
    <button class="btn btn-light dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
    	Cool button with dropdown
    </button>

    <div class="dropdown-menu">
    	<a href="#" class="dropdown-item">Dropdown item</a>
    	<a href="#" class="dropdown-item">Dropdown item</a>
    	<a href="#" class="dropdown-item">Dropdown item</a>
    </div>

Alternatively, you can initialize via JavaScript:

    // jQuery initialization
    $(document).ready(function () {
        $('.dropdown-toggle').dropdownHover(options);
    });

This also works with submenus without any other configuring since Bootstrap already supports this feature. Just use the markup like you were using before. Only the top level anchor tag needs any special markup for my plugin to work.

###### Options

Option | Value | Description
--- | --- | ---
`delay` | `500` | The delay in miliseconds. This is the time to wait before closing a dropdown when the mouse is no longer over the dropdown or the button/nav item that activated it. Defaults to 500.
`hoverDelay` | `0` | A delay before opening in miliseconds. Some people argue this improves user experience as it decreases the number of accidental menu openings. Defaults to 0.
`instantlyCloseOthers` | `true` | A boolean value that when true, will instantly close all other dropdowns matched by the selector used when you activate a new navigation. This is nice for when you have dropdowns close together that may overlap. Default is true.

###### Plugin info

Property | Description
--- | ---
File name | hover_dropdown.min.js
Location | global_assets/js/plugins/extensions/
Links | Github project page

##### TWBS pagination

Pagination bs_pagination.min.js

###### Overview

This jQuery plugin simplifies the usage of Bootstrap Pagintion. It uses appropriate classes: `.pagination` (you change this one), `.active` and `.disabled`.

###### Usage

Include the following lines of code in the `<head>` section of your HTML:

    <!-- Load jQuery -->
    <script src="../../../../global_assets/js/main/jquery.min.js"></script>

    <!-- Load Bootstrap -->
    <script src="../../../../global_assets/js/main/bootstrap.bundle.min.js"></script>

    <!-- Load plugin -->
    <script src="../../../../global_assets/js/plugins/pagination/bs_pagination.min.js"></script>

Add elements:

    <!-- Content -->
    <div class="card card-body bg-light mb-3 twbs-content-default">
    	Dynamic content here.
    </div>

    <!-- Pagination -->
    <ul class="pagination-flat justify-content-center twbs-default"></ul>

Call the plugin via JavaScript:

    // Basic initialization
    $('.twbs-default').twbsPagination({
        totalPages: 35,
        visiblePages: 4,
        prev: 'Prev',
        first: null,
        last: null,
        onPageClick: function (event, page) {
            $('.twbs-content-default').text('Page ' + page);
        }
    });

###### Plugin options

Options explanation and default values:

Option | Default | Description
--- | --- | ---
`totalPages` | required, checked | The number of pages
`startPage` | 1 | The current page that show on start
`visiblePages` | 5 | Maximum visible pages
`href` | false | Template for pagination links
`hrefVariable` | {{number}} | Variable name in href template for page number
`first` | 'First' | Text label
`prev` | 'Previous' | Text label
`next` | 'Next' | Text label
`last` | 'Last' | Text label
`loop` | false | Carousel-style pagination
`paginationClass` | 'pagination' | The root style for pagination component. You can use this option to apply your own style

###### Plugin info

Property | Description
--- | ---
File name | bs_pagination.min.js
Location | global_assets/js/plugins/pagination/
Links | Official plugin website Github project page