Velocity animations
/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="assets/js/vendor/velocity/velocity.min.js"></script>
<!-- Load Velocity UI -->
<script src="assets/js/vendor/velocity/velocity.ui.min.js"></script>
Call the plugin via JavaScript:
// Properties animation
const velocityPropsElement = document.querySelectorAll('.velocity-properties');
velocityPropsElement.forEach(function(link) {
link.addEventListener('click', function (e) {
e.preventDefault();
// Element that we animate
const currentElements = link.closest('.card-body').querySelectorAll('.card');
// Add animation class to panel element
Velocity(currentElements, {
marginLeft: 20,
marginRight: 20,
opacity: 0.5
});
Velocity(currentElements, "reverse", {
delay: 1000,
complete: function() {
currentElements.forEach(function(cards) {
cards.removeAttribute('style');
});
}
});
});
});
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.Plugin info
| Property | Description |
|---|---|
| File name | velocity.min.js, velocity.ui.js |
| Location | assets/js/vendor/velocity/ |
| Links | Github project page |
Prism syntax highlighter
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 plugin -->
<script src="assets/js/vendor/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.
Plugin info
| Property | Description |
|---|---|
| File name | prism.min.js |
| Location | assets/js/vendor/ui/ |
| Links | Github project page |
Moment
/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="assets/js/vendor/ui/moment/moment.min.js"></script>
<!-- Or load with included locales -->
<script src="assets/js/vendor/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.Plugin info
| Property | Description |
|---|---|
| File name | moment.min.js, moment_locales.min.js |
| Location | global_assets/js/plugins/ui/moment/ |
| Links | Github project page |
Mark.js
mark.min.js
Overview
Mark.js is a text highlighter written in JavaScript. It can be used to dynamically mark search terms or custom regular expressions and offers you built-in options like diacritics support, separate word search, custom synonyms, iframes support, custom filters, accuracy definition, custom element, custom class name and more.Usage
Include the following lines of code in the <head> section of your HTML:
<!-- Load library -->
<script src="assets/js/vendor/extensions/mark.min.js"></script>
Then initialize Mark.js in JavaScript:
// Create an instance of mark.js and pass an argument containing
// the DOM object of the context (where to search for matches)
const instanceBase = new Mark(document.querySelector(".demo-target-base"));
// Cache DOM elements
const inputBase = document.querySelector("input[name='keyword-basic']");
// Initialize
function performMarkBasic() {
// Read the keyword
const keywordBase = inputBase.value;
// Remove previous marked elements and mark
// the new keyword inside the context
instanceBase.unmark({
done: function(){
instanceBase.mark(keywordBase);
}
});
}
// Listen to input and option changes
inputBase.addEventListener("input", performMarkBasic);
Mark.js API
General
Each API method below can be called on an instance object. To initialize a new instance you have to use:
var instance = new Mark(context);
The variable context defines where you want mark.js to search for matches. You can pass a single element (e.g. the return value of document.getElementById(...) or document.querySelector(...)), an array containing multiple single elements, or a NodeList (e.g. document.querySelectorAll(...)). Alternatively you can pass a string selector.
If for example you'd like to highlight matches in a div with a class context then you'd have to use:
var instance = new Mark(document.querySelector("div.context"));
// or
var instance = new Mark("div.context");
mark()
A method to highlight custom search terms.
Syntax
var context = document.querySelector(".context");
var instance = new Mark(context);
instance.mark(keyword [, options]);
Options
| Option | Type | Default | Description |
|---|---|---|---|
| element | string | "mark" | HTML element to wrap matches, e.g. span |
| className | string | "" | A class name that will be appended to element |
| exclude | array | [ ] | An array with exclusion selectors. Matches inside these elements will be ignored. Example: "filter": ["h1", ".ignore"] |
| separateWordSearch | boolean | true | Whether to search for each word separated by a blank instead of the complete term |
| accuracy | string or object | "partially" | Either one of the following string values:
|
| diacritics | boolean | true | If diacritic characters should be matched. For example "piękny" would also match "piekny" and "doner" would also match "döner" |
| synonyms | object | { } | An object with synonyms. The key will be a synonym for the value and the value for the key. Example: "synonyms": {"one": "1"} will add the synonym "1" for "one" and vice versa |
| iframes | boolean | false | Whether to search also inside iframes. If you don't have permissions to some iframes (e.g. because they have a different origin) they will be silently skipped. If you don't want to search inside specific iframes (e.g. facebook share), you can pass an exclude selector that matches these iframes |
| iframesTimeout | number | 5000 | The maximum ms to wait for a load event before skipping an iframe. Especially important when there's no internet connection or a browser "offline" mode is enabled and an iframe has an online src – then the load event is never fired |
| acrossElements | boolean | false | Whether to search for matches across elements |
| caseSensitive | boolean | false | Whether to search case sensitive |
| ignoreJoiners | boolean | false | Whether to also find matches that contain soft hyphen, zero width space, zero width non-joiner and zero width joiner. They're used to indicate a point for a line break where there isn't enough space to show the full word |
| ignorePunctuation | array | [ ] | An array of punctuation mark strings. These punctuation marks can be between any characters, e.g. setting this option to ["'"] would match "Worlds", "World's" and "Wo'rlds". One or more apostrophes between the letters would still produce a match (e.g. "W'o''r'l'd's"). A typical setting for this option could be as follows: ":;.,-–—‒_(){}[]!'\"+=".split("") |
| wildcards | string | "disabled" | Set to any of the following string values:
|
| each | function | A callback for each marked element. Receives the marked DOM element as a parameter | |
| filter | function | A callback to filter or limit matches. It will be called for each match and receives the following parameters:
|
|
| noMatch | function | A callback function that will be called when there are no matches. Receives the not found term as a parameter | |
| done | function | A callback function after all marks are done. Receives the total number of marks as a parameter | |
| debug | boolean | false | Set this option to true if you want to log messages |
| log | object | console | Log messages to a specific object (only if debug is true) |
markRegExp()
A method to highlight custom regular expressions.
Syntax
var context = document.querySelector(".context");
var instance = new Mark(context);
instance.markRegExp(regexp [, options]);
Options
The regular expression to be marked. Example: /Lor[^]?m/gmi. Note that groups will be ignored and mark.js will always find all matches, regardless of the g flag.
| Option | Type | Default | Description |
|---|---|---|---|
| element | string | "mark" | HTML element to wrap matches, e.g. span |
| className | string | "" | A class name that will be appended to element |
| exclude | array | [ ] | An array with exclusion selectors. Matches inside these elements will be ignored. Example: "filter": ["h1", ".ignore"] |
| iframes | boolean | false | Whether to search also inside iframes. If you don't have permissions to some iframes (e.g. because they have a different origin) they will be silently skipped. If you don't want to search inside specific iframes (e.g. facebook share), you can pass an exclude selector that matches these iframes |
| iframesTimeout | number | 5000 | The maximum ms to wait for a load event before skipping an iframe. Especially important when there's no internet connection or a browser "offline" mode is enabled and an iframe has an online src – then the load event is never fired |
| acrossElements | boolean | false | Whether to search for matches across elements |
| ignoreGroups | number | 0 | Indicates the number of matching groups to ignore in the replacement. Can be used e.g. to implement non-capturing lookbehind groups. Note that when the value is > 0 (when groups should be ignored), it expects a total amount of groups in the RegExp of ignoreGroups + 1 |
| each | function | A callback for each marked element. Receives the marked DOM element as a parameter | |
| filter | function | A callback to filter or limit matches. It will be called for each match and receives the following parameters:
|
|
| noMatch | function | A callback function that will be called when there are no matches. Receives the not found term as a parameter | |
| done | function | A callback function after all marks are done. Receives the total number of marks as a parameter | |
| debug | boolean | false | Set this option to true if you want to log messages |
| log | object | console | Log messages to a specific object (only if debug is true) |
markRanges()
A method to mark ranges with a start position and length. They will be applied to text nodes in the specified context.
Syntax
var context = document.querySelector(".context");
var instance = new Mark(context);
instance.markRanges(ranges [, options]);
Options
An array of objects with a start and length property. Note that the start positions must be specified including whitespace characters.
| Option | Type | Default | Description |
|---|---|---|---|
| element | string | "mark" | HTML element to wrap matches, e.g. span |
| className | string | "" | A class name that will be appended to element |
| exclude | array | [ ] | An array with exclusion selectors. Matches inside these elements will be ignored. Example: "filter": ["h1", ".ignore"] |
| iframes | boolean | false | Whether to search also inside iframes. If you don't have permissions to some iframes (e.g. because they have a [different origin][SOP]) they will be silently skipped. If you don't want to search inside specific iframes (e.g. facebook share), you can pass an exclude selector that matches these iframes |
| iframesTimeout | number | 5000 | The maximum ms to wait for a load event before skipping an iframe. Especially important when there's no internet connection or a browser "offline" mode is enabled and an iframe has an online src – then the load event is never fired |
| each | function | A callback for each marked element. Receives the marked DOM element and the corresponding range as a parameter | |
| filter | function | A callback to filter or limit matches. It will be called for each match and receives the following parameters:
|
|
| noMatch | function | A callback function that will be called when there are no matches. Receives the not found range as a parameter | |
| done | function | A callback function after all marks are done. Receives the total number of marks as a parameter | |
| debug | boolean | false | Set this option to true if you want to log messages |
| log | object | console | Log messages to a specific object (only if debug is true) |
unmark()
A method to remove highlights created by mark.js.
Syntax
var context = document.querySelector(".context");
var instance = new Mark(context);
instance.unmark(options);
Options
| Option | Type | Default | Description |
|---|---|---|---|
| element | string | "" | Will remove only marked elements with this specific element |
| className | string | "" | Will remove only marked elements with this specific class name |
| exclude | array | [ ] | An array with exclusion selectors. These elements will be ignored. Example: "filter": ["h1", ".ignore"] |
| iframes | boolean | false | Whether to search also inside iframes. If you don't have permissions to some iframes (e.g. because they have a different origin) they will be silently skipped. If you don't want to search inside specific iframes (e.g. facebook share), you can pass an exclude selector that matches these iframes |
| iframesTimeout | number | 5000 | The maximum ms to wait for a load event before skipping an iframe. Especially important when there's no internet connection or a browser "offline" mode is enabled and an iframe has an online src – then the load event is never fired |
| done | function | A callback function after all marked elements were removed | |
| debug | boolean | false | Set this option to true if you want to log messages |
| log | object | console | Log messages to a specific object (only if debug is true) |
Plugin info
| Property | Description |
|---|---|
| File name | mark.min.js |
| Location | assets/js/vendor/extensions/ |
| Links | Github project page |
i18next
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 i18next and related plugins -->
<script src="assets/js/vendor/internationalization/i18next.min.js"></script>
<script src="assets/js/vendor/internationalization/i18nextHttpBackend.min.js"></script>
<script src="assets/js/vendor/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
const elements = document.querySelectorAll('.language-switch .dropdown-item'),
selector = document.querySelectorAll('[data-i18n]'),
englishLangClass = 'en',
ukrainianLangClass = 'ua';
// Add options
i18next.use(i18nextHttpBackend).use(i18nextBrowserLanguageDetector).init({
backend: {
loadPath: '../../../assets/demo/locales/{{lng}}.json'
},
debug: true,
fallbackLng: 'en'
},
function (err, t) {
selector.forEach(function(item) {
item.innerHTML = i18next.t(item.getAttribute("data-i18n"));
});
});
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. Below you can find additional links related to i18next library.Plugin info
| Property | Description |
|---|---|
| File name | i18next.min.js |
| Location | assets/js/vendor/internationalization/ |
| Links | Github project page |
Session timeout
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="assets/js/vendor/extensions/session_timeout.min.js"></script>
Example of initialization as a session timeout:
// Session timeout
$.sessionTimeout({
title: 'Session Timeout',
message: 'Your session is about to expire. Do you want to stay connected?',
ignoreUserActivity: true,
warnAfter: 10000,
redirAfter: 30000,
redirUrl: 'login_unlock.html',
logoutUrl: 'login_advanced.html'
});
Example of initialization as an idle timeout:
// Idle timeout
$.sessionTimeout({
title: 'Idle Timeout',
message: 'Your session is about to expire. Do you want to stay connected?',
warnAfter: 5000,
redirAfter: 15000,
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 | assets/js/vendor/extensions/ |
| Links | Github project page |