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

<!-- 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>

// 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.

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

<!-- 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>

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

<!-- 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.

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.

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

<!-- 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>

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

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

<!-- 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 DIV element -->
<div class="slider"></div>

// 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 float method:

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 {}

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

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

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

// 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:

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

// Pace options
paceOptions = {
	restartOnPushState: false
}

// Pace options
paceOptions = {
	restartOnRequestAfter: false
}

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

Plugin API

Pace exposes the following methods:

Plugin events

Pace fires the following events:

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

<!-- 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>

// Initialization
$.blockUI();

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

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

// Initialization
$.unblockUI();

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

Plugin options

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

<!-- 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 -->
<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>

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

// 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

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>

// 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'
});

// 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

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>

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

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

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

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

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

// 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.

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

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

Configuration

$.cookie.raw = true;

$.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.

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>

// 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

Events

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

Events list:

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>

// 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

Overview

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

Usage

<!-- 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>

<!-- 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>

// 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: